feat(site-builder): per-page SEO meta + favicon + design-token CSS-var wiring + published-output a11y/perf

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

craft/src/panels/left/PageSettingsModal.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Modal } from '../../ui/Modal';
+import { AssetPicker } from '../../ui/AssetPicker';
+import { PageData, PageSeo } from '../../types';
+
+interface PageSettingsModalProps {
+  open: boolean;
+  onClose: () => void;
+  page: PageData | null;
+  updatePageSeo: (pageId: string, seo: Partial<PageSeo>) => void;
+}
+
+const EMPTY_SEO: PageSeo = {
+  metaTitle: '',
+  metaDescription: '',
+  ogTitle: '',
+  ogImage: '',
+  twitterCard: 'summary_large_image',
+  noindex: false,
+};
+
+/**
+ * Per-page SEO/meta settings (PKG-H contract §1/§4). Opened via the gear
+ * icon on a page row in PagesPanel. Fields map 1:1 onto `PageData.seo`
+ * (`types/index.ts`) and are consumed by `html-export.ts`'s `wrapInDocument`
+ * (Preview) and the backend's `generateCompiledHTML` (published output) --
+ * field names here MUST match the shared contract exactly.
+ *
+ * Follows the HeadCodeModal precedent: portaled to `document.body` (escapes
+ * the topbar/left-panel's own stacking context, same fix HeadCodeModal and
+ * TemplateModal already needed), built on the shared `Modal` shell, edits
+ * commit immediately via `updatePageSeo` (no separate Save step) rather than
+ * buffering to a "Save" button -- consistent with HeadCodeModal's live-edit
+ * pattern for `design.headCode`.
+ */
+export const PageSettingsModal: React.FC<PageSettingsModalProps> = ({ open, onClose, page, updatePageSeo }) => {
+  const [seo, setSeo] = useState<PageSeo>(EMPTY_SEO);
+
+  // Re-sync local form state from the target page's stored seo whenever the
+  // modal opens (or the target page changes while open) -- mirrors the
+  // pattern of resetting form-local state on prop identity change rather
+  // than deriving directly from props (dropdowns/checkboxes need editable
+  // local state).
+  useEffect(() => {
+    if (!open) return;
+    setSeo({ ...EMPTY_SEO, ...(page?.seo || {}) });
+  }, [open, page?.id, page?.seo]);
+
+  if (!page) return null;
+
+  const update = (patch: Partial<PageSeo>) => {
+    setSeo((prev) => ({ ...prev, ...patch }));
+    updatePageSeo(page.id, patch);
+  };
+
+  return createPortal(
+    <Modal open={open} onClose={onClose}>
+      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div style={modalHeaderStyle}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <i className="fa fa-cog" style={{ color: 'var(--color-accent)', fontSize: 16 }} />
+            <div>
+              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)' }}>
+                Page Settings — {page.name}
+              </div>
+              <div style={{ fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2 }}>
+                SEO and social-sharing metadata for this page only.
+              </div>
+            </div>
+          </div>
+          <button onClick={onClose} style={closeButtonStyle} aria-label="Close">
+            <i className="fa fa-times" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div style={{ padding: 20, flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <div>
+            <label style={fieldLabelStyle}>Meta Title</label>
+            <input
+              type="text"
+              className="control-input"
+              value={seo.metaTitle || ''}
+              onChange={(e) => update({ metaTitle: e.target.value })}
+              placeholder={page.name}
+              data-testid="page-seo-meta-title"
+            />
+            <p style={hintStyle}>Overrides the browser tab title. Leave blank to use the page name.</p>
+          </div>
+
+          <div>
+            <label style={fieldLabelStyle}>Meta Description</label>
+            <textarea
+              className="control-input"
+              value={seo.metaDescription || ''}
+              onChange={(e) => update({ metaDescription: e.target.value })}
+              placeholder="A short summary shown in search results and link previews..."
+              rows={3}
+              style={{ resize: 'vertical' as const }}
+              data-testid="page-seo-meta-description"
+            />
+          </div>
+
+          <div>
+            <label style={fieldLabelStyle}>Social Share Title (og:title)</label>
+            <input
+              type="text"
+              className="control-input"
+              value={seo.ogTitle || ''}
+              onChange={(e) => update({ ogTitle: e.target.value })}
+              placeholder={seo.metaTitle || page.name}
+              data-testid="page-seo-og-title"
+            />
+          </div>
+
+          <div>
+            <label style={fieldLabelStyle}>Social Share Image (og:image)</label>
+            <AssetPicker
+              value={seo.ogImage || ''}
+              onChange={(url) => update({ ogImage: url })}
+              mediaType="image"
+              variant="full"
+              placeholder="Or paste image URL..."
+            />
+          </div>
+
+          <div>
+            <label style={fieldLabelStyle}>Twitter Card Type</label>
+            <select
+              className="control-select"
+              value={seo.twitterCard || 'summary_large_image'}
+              onChange={(e) => update({ twitterCard: e.target.value as PageSeo['twitterCard'] })}
+              data-testid="page-seo-twitter-card"
+            >
+              <option value="summary">Summary</option>
+              <option value="summary_large_image">Summary with Large Image</option>
+            </select>
+          </div>
+
+          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--color-text)', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={!!seo.noindex}
+              onChange={(e) => update({ noindex: e.target.checked })}
+              data-testid="page-seo-noindex"
+            />
+            Hide this page from search engines (noindex)
+          </label>
+        </div>
+
+        {/* Footer */}
+        <div style={{
+          padding: '12px 20px',
+          borderTop: '1px solid var(--color-border)',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: 8,
+        }}>
+          <button onClick={onClose} style={doneButtonStyle}>
+            Done
+          </button>
+        </div>
+      </div>
+    </Modal>,
+    document.body,
+  );
+};
+
+/* ---------- Styles ---------- */
+
+const modalStyle: React.CSSProperties = {
+  width: '90vw',
+  maxWidth: 560,
+  maxHeight: '85vh',
+  backgroundColor: 'var(--color-bg-surface)',
+  borderRadius: 12,
+  border: '1px solid var(--color-border)',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
+};
+
+const modalHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '16px 20px',
+  borderBottom: '1px solid var(--color-border)',
+  flexShrink: 0,
+};
+
+const closeButtonStyle: React.CSSProperties = {
+  width: 32,
+  height: 32,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 'none',
+  border: '1px solid var(--color-border)',
+  borderRadius: 6,
+  color: 'var(--color-text-muted)',
+  cursor: 'pointer',
+  fontSize: 14,
+};
+
+const doneButtonStyle: React.CSSProperties = {
+  padding: '8px 24px',
+  fontSize: 13,
+  fontWeight: 600,
+  background: 'var(--color-accent)',
+  color: '#fff',
+  border: 'none',
+  borderRadius: 6,
+  cursor: 'pointer',
+};
+
+const fieldLabelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: 11,
+  fontWeight: 600,
+  color: 'var(--color-text-muted)',
+  marginBottom: 6,
+  textTransform: 'uppercase',
+  letterSpacing: '0.3px',
+};
+
+const hintStyle: React.CSSProperties = {
+  fontSize: 10,
+  color: 'var(--color-text-dim)',
+  margin: '4px 0 0',
+};

craft/src/panels/left/PagesPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { usePages } from '../../state/PageContext';
 import { clickableProps } from '../../utils/a11y';
+import { PageSettingsModal } from './PageSettingsModal';
 
 export const PagesPanel: React.FC = () => {
   const {
@@ -14,6 +15,7 @@ export const PagesPanel: React.FC = () => {
     addPage,
     deletePage,
     renamePage,
+    updatePageSeo,
   } = usePages();
   const [isAdding, setIsAdding] = useState(false);
   const [newName, setNewName] = useState('');
@@ -22,6 +24,8 @@ export const PagesPanel: React.FC = () => {
   const [editName, setEditName] = useState('');
   const [editSlug, setEditSlug] = useState('');
   const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [seoSettingsPageId, setSeoSettingsPageId] = useState<string | null>(null);
+  const seoSettingsPage = pages.find((p) => p.id === seoSettingsPageId) || null;
 
   const handleAdd = () => {
     if (!newName.trim()) return;
@@ -343,6 +347,26 @@ export const PagesPanel: React.FC = () => {
                 style={{ display: 'flex', gap: 4, flexShrink: 0 }}
                 onClick={(e) => e.stopPropagation()}
               >
+                <button
+                  onClick={() => setSeoSettingsPageId(page.id)}
+                  data-tooltip="Page Settings (SEO)"
+                  aria-label={`Page settings for ${page.name}`}
+                  style={{
+                    width: 24,
+                    height: 24,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 11,
+                    color: 'var(--color-text-muted)',
+                    background: 'transparent',
+                    border: 'none',
+                    borderRadius: 'var(--radius-sm)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <i className="fa fa-cog" aria-hidden="true" />
+                </button>
                 <button
                   onClick={() => startEditing(page)}
                   data-tooltip="Rename"
@@ -492,6 +516,13 @@ export const PagesPanel: React.FC = () => {
           + Add Page
         </button>
       )}
+
+      <PageSettingsModal
+        open={seoSettingsPageId !== null}
+        onClose={() => setSeoSettingsPageId(null)}
+        page={seoSettingsPage}
+        updatePageSeo={updatePageSeo}
+      />
     </div>
   );
 };

craft/src/panels/right/SiteDesignPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useSiteDesign, DEFAULT_SITE_DESIGN } from '../../state/SiteDesignContext';
 import { FONT_FAMILIES } from '../../constants/presets';
+import { AssetPicker } from '../../ui/AssetPicker';
 
 type DesignTab = 'basic' | 'advanced';
 
@@ -200,6 +201,19 @@ export const SiteDesignPanel: React.FC = () => {
       {/* Basic tab */}
       {tab === 'basic' && (
         <>
+          <div className="guided-section">
+            <label className="guided-section-label">Favicon</label>
+            <AssetPicker
+              value={design.favicon}
+              onChange={(url) => updateDesign({ favicon: url })}
+              mediaType="image"
+              variant="full"
+              placeholder="Or paste favicon URL..."
+            />
+            <p style={{ fontSize: 10, color: 'var(--color-text-dim)', margin: '4px 0 0' }}>
+              Shown in browser tabs and bookmarks. Applies site-wide.
+            </p>
+          </div>
           <ColorField
             label="Primary Color"
             value={design.primaryColor}

craft/src/panels/topbar/TopBar.tsx

@@ -28,7 +28,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuid
     canRedo: query.history.canRedo(),
   }));
   const { save, publish, load } = useWhpApi();
-  const { headerPage, footerPage } = usePages();
+  const { headerPage, footerPage, pages, activePageId } = usePages();
   const { design } = useSiteDesign();
 
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
@@ -156,10 +156,27 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuid
 
         // Compose full page: header + body + footer
         const composedBody = headerHtml + bodyHtml + footerHtml;
+
+        // PKG-H: fold the active page's own SEO overrides + the site-wide
+        // design tokens/favicon into the Preview export so editor Preview
+        // === published output (contract §4/§7). `title` is the fully
+        // resolved TITLE (seo.metaTitle || page.name) per the contract --
+        // html-export's buildSeoMeta/og:title fallback both key off it.
+        const activePage = pages.find((p) => p.id === activePageId);
+        const seo = activePage?.seo;
+        const title = seo?.metaTitle || activePage?.name || whpConfig?.siteName || 'Preview';
+
         const result = exportToHtml(serialized, {
-          title: whpConfig?.siteName || 'Preview',
+          title,
           includeFonts: true,
           headCode: design.headCode,
+          description: seo?.metaDescription,
+          ogTitle: seo?.ogTitle,
+          ogImage: seo?.ogImage,
+          twitterCard: seo?.twitterCard,
+          noindex: seo?.noindex,
+          favicon: design.favicon,
+          design,
         });
 
         // Replace the body in the full document with our composed version.
@@ -183,7 +200,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuid
     } catch (e) {
       console.error('Preview failed:', e);
     }
-  }, [query, headerPage, footerPage, whpConfig, design]);
+  }, [query, headerPage, footerPage, whpConfig, design, pages, activePageId]);
 
   // Phase A: at ≤768px the topbar collapses to only the essentials --
   // back arrow, Undo/Redo, Save (+Publish) -- with Templates, Sitesmith,