site-builder: feedback batch (social, features, header menu, spacer)

Five of six items from user feedback (Contact Form email delivery split
into a focused, live-tested follow-up):

- Social Links: add Spotify + Twitch (FA 4.7.0 already ships both glyphs).
- Features Grid: per-feature icon/image toggle (upload + URL) and an
  optional button (text + url); render, settings, and HTML export updated,
  backward compatible with existing icon-only features.
- Header: seed the default header with a Navbar (logo + Home/About/Services/
  Contact) so new sites open with an editable menu-with-links instead of an
  empty header zone. Adds a vitest guard that the seed deserializes and
  exports a real <nav>.
- Canvas: slim the empty header/footer placeholder from a padded band to a
  thin hint line so an empty zone no longer reads as a stray spacer.

Design spec: docs/superpowers/specs/2026-07-06-site-builder-feedback-batch-design.md

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-07-06-site-builder-feedback-batch-design.md

@@ -0,0 +1,75 @@
+# Site Builder — feedback batch (2026-07-06)
+
+Six items from user feedback on the Craft.js site builder (`/workspace/site-builder/craft/`).
+Scope decisions were made with the user before writing this spec. Each item is
+independently shippable.
+
+## 1 & 2 — Spotify + Twitch social links
+**File:** `craft/src/components/basic/SocialLinks.tsx`
+Add `spotify → { icon: 'fa-spotify', label: 'Spotify' }` and `twitch → { icon:
+'fa-twitch', label: 'Twitch' }` to `platformIcons` + `platformLabels`. The "Add
+Platform" dropdown, editor render, and `toHtml` pick them up automatically.
+Font Awesome 4.7.0 (loaded in `craft/index.html`) already ships both glyphs — no
+CDN change. **Twitch live-status indicator is explicitly deferred** (needs a
+Twitch app Client-ID + published-site JS) — see Follow-ups.
+
+## 3 — Features: image option + optional button (structured, no canvas rewrite)
+**File:** `craft/src/components/sections/FeaturesGrid.tsx`
+Extend `FeatureItem`:
+```ts
+mediaType?: 'icon' | 'image';  // default 'icon'
+image?: string; imageAlt?: string;
+buttonText?: string; buttonUrl?: string;
+```
+- Per-feature settings gain an icon/image toggle. Image mode = upload + URL input,
+  reusing the `uploadToWhp(file)` helper pattern from `Navbar.tsx`/`ImageBlock.tsx`.
+- Optional button fields (text + url); render a button under the description when
+  `buttonText` is set.
+- Editor render + `toHtml` updated: `<img>` when `mediaType==='image'`, else the
+  glyph; button block when present. Backward compatible (missing `mediaType`
+  falls back to icon).
+
+## 4 & 6 — Menu links in the header (seed a real default header)
+**Files:** `craft/src/state/PageContext.tsx` (default header craftState), minor
+`craft/src/panels/left/PagesPanel.tsx` hint.
+Root cause of "no obvious way to add links to the menu": the default header
+(`DEFAULT_HEADER` craftState) is an **empty `Container`** — new sites open with a
+blank header and nothing to edit. Fix: seed the default header with a `Navbar`
+(logo + page links + CTA) so every new site has an editable menu out of the box.
+Add a one-line hint in the header-edit empty state pointing at the Navbar's Links
+section. No new component.
+
+## 5 — "Spacer" gap between page and header
+**File:** `craft/src/components/layout/HeaderZone.tsx` (+ header default from #4/6)
+Same root cause: the empty header zone's `minHeight` renders as a blank band that
+reads as a stray spacer. Seeding real header content (item 4/6) removes it in the
+common case. Additionally collapse the empty-state min-height so a deliberately
+empty header leaves no gap. **Reproduce first** to confirm there is not also a
+literal stray `Spacer` node before finalizing.
+
+## 7 — Contact Form email delivery
+**Files:** `craft/src/components/forms/ContactForm.tsx`,
+`whp/web-files/api/site-builder.php` (publish/deploy path), self-contained
+`contact-handler.php` dropped into the site docroot at publish.
+- Add a **"Send submissions to" recipient email** field.
+- Published sites live on the customer docroot (not the panel), so the working
+  form needs a handler at the site. At publish/deploy time, if any page contains
+  a ContactForm, write a self-contained `contact-handler.php` into the docroot
+  with the recipient stored server-side (sidecar config, kept out of client HTML
+  to avoid harvesting).
+- `toHtml` emits `action="contact-handler.php"`, a hidden honeypot field, and a
+  thank-you redirect. Handler validates + sends via PHP `mail()`.
+- SMTP hardening via the existing mailer noted as a Follow-up.
+
+## Build & deploy
+Frontend: `cd craft && npm run build` (runs `tsc && vite build`). Deploy is the
+standard WHP release pipeline (copy `dist/` into the whp repo → build-release →
+download-update); **not** auto-deployed here — customer-facing UI, deploy is a
+separate authorized step.
+
+## Follow-ups (not in this batch)
+- Twitch live-status badge (Twitch Helix + published-site JS + Client-ID config).
+- ContactForm SMTP delivery via the WHP mailer instead of PHP `mail()`.
+
+## Build order
+1&2 (trivial) → 3 → 4/5/6 (shared header work) → 7 (largest, touches deploy path).