@acms-subir/core 0.2.0 → 0.3.0

package/src/components/ThemeSections.astro

@@ -0,0 +1,57 @@
+---
+import type { Page, Settings } from '../lib/schema';
+import { getTheme } from '../lib/theme';
+import { getRepo } from '../lib/repo';
+import { CONTENT, collectionUrl } from '../lib/content';
+import { sectionIssues } from '../theme-sdk/contract.mjs';
+import WidgetRenderer from './WidgetRenderer.astro';
+import { expandDynamicBlocks } from '../lib/dynamicBlocks';
+import { highlightCodeHtml } from '../lib/highlightCode';
+import PostCard from './site/PostCard.astro';
+import '../styles/sections.css';
+interface Props { page: Page; settings: Settings }
+const { page, settings } = Astro.props;
+const theme = getTheme(settings.activeTheme);
+const layout = settings.sectionPages[page.id];
+const repo = await getRepo(Astro.locals);
+const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
+const safeUrl = (value: unknown) => {
+  const s = String(value ?? '').trim();
+  return /^(https?:\/\/|mailto:|tel:|\/(?!\/)|#)/i.test(s) ? s : '';
+};
+const sections = await Promise.all(layout.sections.map(async (section) => {
+  const definition = theme.sections[section.type];
+  const invalid = sectionIssues({ mode: 'sections', sections: [section] }, theme.sections).length > 0;
+  const data = Object.fromEntries(Object.entries(definition?.fields ?? {}).map(([key, field]) => [key, section.data[key] ?? (field as {default?: unknown}).default ?? '']));
+  const collection = String(data.collection || 'posts');
+  const posts = section.type === 'posts' && !section.hidden && !invalid && CONTENT.collections[collection]
+    ? (await repo.listPublishedPosts(collection)).slice(0, Math.max(1, Math.min(12, Number(data.limit) || 3))) : [];
+  return { ...section, data, invalid, posts, Template: theme.sectionTemplates[section.type] as any };
+}));
+---
+<div class="acms-sections">
+  {sections.filter(s => !s.hidden && !s.invalid).map(({ id, type, variant, data, Template, posts }) => (
+    <section id={`section-${id}`} class:list={['acms-section', `section-${type}`, `variant-${variant}`]}>
+      {type === 'page-content' ? (page.bodyHtml ? <article class="page-body" set:html={bodyHtml} /> : <WidgetRenderer pageId={page.id} blocks={page.blocks} />) : Template ? <Template data={data} variant={variant} settings={settings} page={page} /> : (
+        <>
+          <div class="section-copy">
+            {data.heading && <h2>{String(data.heading)}</h2>}
+            {data.text && <p class="section-text">{String(data.text)}</p>}
+            {data.label && safeUrl(data.href) && <a class="w-btn primary" href={safeUrl(data.href)}>{String(data.label)}</a>}
+          </div>
+          {type === 'hero' && safeUrl(data.image) && <img class="section-image" src={safeUrl(data.image)} alt={String(data.alt ?? '')} loading="eager" />}
+          {['features', 'testimonials', 'faq'].includes(type) && (
+            <div class="section-items">
+              {String(data.items ?? '').split('\n').filter(Boolean).map((row) => {
+                const [title, ...body] = row.split('|');
+                return type === 'faq' ? <details><summary>{title}</summary><p>{body.join('|')}</p></details>
+                  : <article><h3>{title}</h3><p>{body.join('|')}</p></article>;
+              })}
+            </div>
+          )}
+          {type === 'posts' && <div class="section-items">{posts.map(post => <PostCard variant={variant === 'list' ? 'row' : 'card'} href={collectionUrl(post.collection, post.slug)} title={post.title} excerpt={post.excerpt} cover={post.cover} coverAlt={post.coverAlt} />)}</div>}
+        </>
+      )}
+    </section>
+  ))}
+</div>

package/src/components/ThemeSectionsEditor.tsx

@@ -0,0 +1,513 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ImagePicker } from './editor/ImagePicker';
+
+// Pages tab of the Design screen: lay out a page from the active theme's
+// section registry (builtins + the theme's own sections). Edits stay local
+// until "Save section draft" stages them into the design draft through
+// POST /api/design; nothing here publishes, and a page's own content is
+// never touched (switching a page back to "Page content" keeps its layout).
+
+type FieldType = 'text' | 'textarea' | 'image' | 'url' | 'select' | 'number';
+interface FieldDef { label: string; type: FieldType; default?: string | number; options?: string[] }
+interface SectionDef { name?: string; label?: string; version?: number; variants?: string[]; fields?: Record<string, FieldDef> }
+type SectionValue = string | number;
+export interface SectionInstance {
+  id: string;
+  type: string;
+  version: number;
+  variant: string;
+  hidden: boolean;
+  data: Record<string, SectionValue>;
+}
+export interface PageLayout { mode: 'sections' | 'content'; sections: SectionInstance[] }
+export type SectionPages = Record<string, PageLayout>;
+interface DesignSide { activeTheme?: string; sectionPages?: SectionPages; [k: string]: unknown }
+export interface DesignApiState {
+  revision: number;
+  live: DesignSide;
+  draft: DesignSide | null;
+  changes: { key: string; label: string; from: string; to: string; kind: string }[];
+  themes: { slug: string; name: string; version: string | number; sections: Record<string, SectionDef> }[];
+  pages: { id: string; title: string; slug: string; isHome: boolean }[];
+  versions: { id: string; createdAt: number; author: string; summary: string }[];
+  scopes: string[];
+}
+
+const errorText = async (res: Response, fallback: string) => {
+  try {
+    const body = (await res.json()) as { error?: unknown };
+    if (typeof body?.error === 'string' && body.error) return body.error;
+  } catch { /* not JSON */ }
+  return fallback;
+};
+
+/** GET /api/design, shared by the Pages editor and the Review tab */
+export function useDesignApi() {
+  const [data, setData] = useState<DesignApiState | null>(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch('/api/design', { headers: { accept: 'application/json' } });
+      if (!res.ok) { setError(await errorText(res, `Couldn't load the design (${res.status}).`)); return; }
+      setData((await res.json()) as DesignApiState);
+    } catch {
+      setError("Couldn't reach the server.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+  return { data, error, loading, reload: load };
+}
+
+const stagedPages = (d: DesignApiState): SectionPages =>
+  (d.draft?.sectionPages ?? d.live.sectionPages ?? {}) as SectionPages;
+
+const sectionName = (def: SectionDef | undefined, type: string) => def?.name || def?.label || type;
+
+const newId = (type: string) => {
+  const rand = typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID().slice(0, 8)
+    : Math.random().toString(36).slice(2, 10);
+  return `${type}-${rand}`;
+};
+
+const defaultsFor = (def: SectionDef): Record<string, SectionValue> => {
+  const out: Record<string, SectionValue> = {};
+  for (const [key, f] of Object.entries(def.fields ?? {})) {
+    if (f.default !== undefined) out[key] = f.default;
+  }
+  return out;
+};
+
+const pagePath = (p: { slug: string; isHome: boolean }) => (p.isHome ? '/' : `/${p.slug}`);
+
+interface EditorProps {
+  api: ReturnType<typeof useDesignApi>;
+  /** theme picked in the Theme tab (may be ahead of the staged draft) */
+  activeTheme: string;
+  unsplashEnabled: boolean;
+}
+
+export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled }: EditorProps) {
+  const { data, error: loadError, loading, reload } = api;
+  const [pages, setPages] = useState<SectionPages>({});
+  const [pageId, setPageId] = useState('');
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [addType, setAddType] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [conflict, setConflict] = useState(false);
+  const [imageFor, setImageFor] = useState<{ sectionId: string; key: string } | null>(null);
+
+  // rehydrate local edits whenever a fresh server state arrives
+  const base = useMemo(() => (data ? stagedPages(data) : {}), [data]);
+  useEffect(() => {
+    if (!data) return;
+    setPages(structuredClone(base));
+    setConflict(false);
+    setSaveError('');
+    setPageId((cur) => (cur && data.pages.some((p) => p.id === cur) ? cur : (data.pages.find((p) => p.isHome) ?? data.pages[0])?.id ?? ''));
+  }, [data, base]);
+
+  const dirty = useMemo(() => JSON.stringify(pages) !== JSON.stringify(base), [pages, base]);
+  const dirtyRef = useRef(false);
+  dirtyRef.current = dirty;
+  useEffect(() => {
+    const warn = (e: BeforeUnloadEvent) => { if (dirtyRef.current) e.preventDefault(); };
+    addEventListener('beforeunload', warn);
+    return () => removeEventListener('beforeunload', warn);
+  }, []);
+
+  const theme = data?.themes.find((t) => t.slug === activeTheme)
+    ?? data?.themes.find((t) => t.slug === (data.draft?.activeTheme ?? data.live.activeTheme))
+    ?? data?.themes[0];
+  const defs: Record<string, SectionDef> = theme?.sections ?? {};
+  const defTypes = Object.keys(defs);
+  useEffect(() => {
+    if (!defTypes.includes(addType)) setAddType(defTypes[0] ?? '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defTypes.join('|')]);
+
+  if (loading && !data) return <p className="te-muted">Loading page layouts…</p>;
+  if (!data) {
+    return (
+      <div className="notice warn" role="alert">
+        <span>{loadError || "Couldn't load page layouts."}</span>
+        <button className="btn sm" type="button" onClick={() => void reload()}>Try again</button>
+      </div>
+    );
+  }
+  if (data.pages.length === 0) {
+    return (
+      <div className="empty-state">
+        <b>No pages yet</b>
+        <p>Create a page first, then give it a section layout here.</p>
+        <a className="btn" href="/admin/pages">Go to pages</a>
+      </div>
+    );
+  }
+
+  const page = data.pages.find((p) => p.id === pageId) ?? data.pages[0];
+  const layout: PageLayout | undefined = pages[page.id];
+
+  const setLayout = (fn: (l: PageLayout) => PageLayout) =>
+    setPages((all) => ({ ...all, [page.id]: fn(all[page.id] ?? { mode: 'sections', sections: [] }) }));
+  const setSections = (fn: (s: SectionInstance[]) => SectionInstance[]) =>
+    setLayout((l) => ({ ...l, sections: fn(l.sections) }));
+  const patchSection = (id: string, fn: (s: SectionInstance) => SectionInstance) =>
+    setSections((list) => list.map((s) => (s.id === id ? fn(s) : s)));
+
+  const addSection = () => {
+    const def = defs[addType];
+    if (!def) return;
+    const s: SectionInstance = {
+      id: newId(addType),
+      type: addType,
+      version: def.version ?? 1,
+      variant: def.variants?.[0] ?? 'default',
+      hidden: false,
+      data: defaultsFor(def),
+    };
+    setLayout((l) => ({ ...l, mode: 'sections', sections: [...l.sections, s] }));
+    setOpenId(s.id);
+  };
+  const move = (i: number, dir: -1 | 1) =>
+    setSections((list) => {
+      const j = i + dir;
+      if (j < 0 || j >= list.length) return list;
+      const next = [...list];
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  const duplicate = (i: number) =>
+    setSections((list) => {
+      const copy = { ...structuredClone(list[i]), id: newId(list[i].type) };
+      return [...list.slice(0, i + 1), copy, ...list.slice(i + 1)];
+    });
+  const remove = (s: SectionInstance) => {
+    if (!window.confirm(`Delete the “${sectionName(defs[s.type], s.type)}” section from ${page.title}? This happens when you save the section draft.`)) return;
+    setSections((list) => list.filter((x) => x.id !== s.id));
+  };
+  const setField = (id: string, key: string, value: SectionValue | undefined) =>
+    patchSection(id, (s) => {
+      const d = { ...s.data };
+      if (value === undefined) delete d[key]; else d[key] = value;
+      return { ...s, data: d };
+    });
+
+  const save = async () => {
+    setSaving(true);
+    setSaveError('');
+    try {
+      const res = await fetch('/api/design', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ operation: 'stage', revision: data.revision, patch: { sectionPages: { ...base, ...pages } } }),
+      });
+      if (res.status === 409) { setConflict(true); return; }
+      if (!res.ok) { setSaveError(await errorText(res, `Couldn't save the section draft (${res.status}).`)); return; }
+      dirtyRef.current = false;
+      location.reload(); // refresh the draft status, change list and preview
+    } catch {
+      setSaveError("Couldn't reach the server. Your edits are still here.");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const reloadLatest = () => {
+    if (dirty && !window.confirm('Load the latest draft? Your unsaved section edits will be lost.')) return;
+    void reload();
+  };
+  const discardEdits = () => {
+    if (!window.confirm('Discard your unsaved section edits?')) return;
+    setPages(structuredClone(base));
+  };
+
+  const pageDirty = (id: string) => JSON.stringify(pages[id]) !== JSON.stringify(base[id]);
+  const editingSection = imageFor ? layout?.sections.find((s) => s.id === imageFor.sectionId) : undefined;
+
+  return (
+    <div className="te">
+      <p className="te-intro">
+        Build a page from your theme's sections. Edits stay on this screen until you save them to the private design
+        draft; visitors see them only after <b>Publish</b>. The page's own content is never changed.
+      </p>
+
+      <div className="te-pagebar">
+        <label className="field te-pagepick">
+          <span>Page</span>
+          <select aria-label="Page" value={page.id} onChange={(e) => { setPageId(e.target.value); setOpenId(null); }}>
+            {data.pages.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.title || p.slug}{p.isHome ? ' · home' : ''}{pages[p.id]?.mode === 'sections' ? ' · sections' : ''}{pageDirty(p.id) ? ' · edited' : ''}
+              </option>
+            ))}
+          </select>
+        </label>
+        <a className="btn sm ghost" href={`${pagePath(page)}?designPreview=1`} target="_blank" rel="noopener">
+          Preview page ↗
+        </a>
+      </div>
+
+      {!layout ? (
+        <div className="te-empty">
+          <p><b>{page.title || page.slug}</b> shows its page content.</p>
+          <p className="te-muted">Start a layout, then add Existing page content to keep your current text or widgets alongside new sections. You can switch back at any time.</p>
+          <button className="btn" type="button" onClick={() => setLayout(() => ({ mode: 'sections', sections: [{ id: newId('page-content'), type: 'page-content', version: 1, variant: 'default', hidden: false, data: {} }] }))}>Keep content and add sections</button>
+        </div>
+      ) : (
+        <>
+          <div className="te-mode">
+            <span className="te-mode-label" id="te-mode-label">Page shows</span>
+            <div className="seg" role="radiogroup" aria-labelledby="te-mode-label">
+              {(['sections', 'content'] as const).map((m) => (
+                <button
+                  key={m}
+                  type="button"
+                  role="radio"
+                  aria-checked={layout.mode === m}
+                  className={layout.mode === m ? 'on' : ''}
+                  onClick={() => setLayout((l) => ({ ...l, mode: m }))}
+                >
+                  {m === 'sections' ? 'Sections' : 'Page content'}
+                </button>
+              ))}
+            </div>
+          </div>
+          {layout.mode === 'content' && (
+            <p className="notice te-note">
+              This page shows its own content. The {layout.sections.length} {layout.sections.length === 1 ? 'section is' : 'sections are'} kept, so you can switch back later.
+            </p>
+          )}
+
+          <ol className={`te-list ${layout.mode === 'content' ? 'is-inactive' : ''}`} aria-label={`Sections on ${page.title || page.slug}`}>
+            {layout.sections.length === 0 && <li className="te-muted te-none">No sections yet. Add one below.</li>}
+            {layout.sections.map((s, i) => {
+              const def = defs[s.type];
+              const name = sectionName(def, s.type);
+              const open = openId === s.id;
+              const panelId = `te-sec-${s.id}`;
+              return (
+                <li key={s.id} className={`te-sec ${s.hidden ? 'is-hidden' : ''} ${open ? 'is-open' : ''}`}>
+                  <div className="te-sec-head">
+                    <button
+                      type="button"
+                      className="te-sec-toggle"
+                      aria-expanded={open}
+                      aria-controls={panelId}
+                      onClick={() => setOpenId(open ? null : s.id)}
+                    >
+                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+                      <span className="te-sec-name">{name}</span>
+                      <span className="te-sec-meta">
+                        {s.variant}
+                        {s.hidden && ' · hidden'}
+                        {!def && ' · unavailable'}
+                      </span>
+                    </button>
+                    <div className="te-sec-actions">
+                      <button className="icon-btn" type="button" onClick={() => move(i, -1)} disabled={i === 0} aria-label={`Move ${name} up`} title="Move up">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 15 6-6 6 6" /></svg>
+                      </button>
+                      <button className="icon-btn" type="button" onClick={() => move(i, 1)} disabled={i === layout.sections.length - 1} aria-label={`Move ${name} down`} title="Move down">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+                      </button>
+                    </div>
+                  </div>
+
+                  {open && (
+                    <div className="te-sec-body" id={panelId}>
+                      {!def ? (
+                        <p className="notice warn te-note">
+                          {theme?.name ?? 'This theme'} has no “{s.type}” section, so it won't render. Its {Object.keys(s.data).length} saved {Object.keys(s.data).length === 1 ? 'value is' : 'values are'} preserved and come back if you switch to a theme that has it.
+                        </p>
+                      ) : (
+                        <>
+                          {def.version !== undefined && s.version !== def.version && (
+                            <p className="notice warn te-note">Saved with version {s.version} of this section; the theme ships version {def.version}.</p>
+                          )}
+                          {s.type === 'page-content' && <p className="te-muted">This section uses the page's published text and widgets. Edit them in the page editor; any pending content draft stays separate.</p>}
+                          {(def.variants?.length ?? 0) > 0 && (
+                            <label className="field">
+                              <span>Variant</span>
+                              <select value={s.variant} onChange={(e) => patchSection(s.id, (x) => ({ ...x, variant: e.target.value }))}>
+                                {!def.variants!.includes(s.variant) && <option value={s.variant}>{s.variant} (not in this theme)</option>}
+                                {def.variants!.map((v) => <option key={v} value={v}>{v}</option>)}
+                              </select>
+                            </label>
+                          )}
+                          {Object.entries(def.fields ?? {}).map(([key, f]) => (
+                            <FieldInput
+                              key={key}
+                              id={`${panelId}-${key}`}
+                              field={f}
+                              value={s.data[key]}
+                              onChange={(v) => setField(s.id, key, v)}
+                              onPickImage={() => setImageFor({ sectionId: s.id, key })}
+                            />
+                          ))}
+                        </>
+                      )}
+                      <div className="te-sec-foot">
+                        <button className="btn sm" type="button" aria-pressed={s.hidden} onClick={() => patchSection(s.id, (x) => ({ ...x, hidden: !x.hidden }))}>
+                          {s.hidden ? 'Show section' : 'Hide section'}
+                        </button>
+                        <button className="btn sm" type="button" onClick={() => duplicate(i)}>Duplicate</button>
+                        <button className="btn sm ghost danger te-delete" type="button" onClick={() => remove(s)}>Delete section</button>
+                      </div>
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ol>
+
+          <div className="te-add">
+            <label className="field">
+              <span>Add a section</span>
+              <select aria-label="Add a section" value={addType} onChange={(e) => setAddType(e.target.value)} disabled={defTypes.length === 0}>
+                {defTypes.length === 0 && <option value="">This theme has no sections</option>}
+                {defTypes.map((t) => <option key={t} value={t}>{sectionName(defs[t], t)}</option>)}
+              </select>
+            </label>
+            <button className="btn" type="button" onClick={addSection} disabled={!defs[addType]}>Add</button>
+          </div>
+        </>
+      )}
+
+      {conflict && (
+        <div className="notice warn te-alert" role="alert">
+          <span>The design draft changed somewhere else since this screen loaded. Your edits are still here and weren't saved.</span>
+          <button className="btn sm" type="button" onClick={reloadLatest}>Load latest draft</button>
+        </div>
+      )}
+      {saveError && <p className="flash error te-alert" role="alert">{saveError}</p>}
+
+      <div className="te-savebar">
+        <span className={`te-savestate ${dirty ? 'is-dirty' : ''}`} aria-live="polite">
+          {dirty ? 'Unsaved section edits' : 'No unsaved section edits'}
+        </span>
+        {dirty && <button className="btn sm ghost" type="button" onClick={discardEdits} disabled={saving}>Discard edits</button>}
+        <button className="btn sm" type="button" onClick={() => void save()} disabled={!dirty || saving || conflict}>
+          {saving ? 'Saving…' : 'Save section draft'}
+        </button>
+      </div>
+
+      <ImagePicker
+        open={Boolean(imageFor && editingSection)}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setImageFor(null)}
+        onSelect={(img) => {
+          if (imageFor) setField(imageFor.sectionId, imageFor.key, img.src);
+          setImageFor(null);
+        }}
+      />
+    </div>
+  );
+}
+
+function FieldInput({ id, field, value, onChange, onPickImage }: {
+  id: string;
+  field: FieldDef;
+  value: SectionValue | undefined;
+  onChange: (v: SectionValue | undefined) => void;
+  onPickImage: () => void;
+}) {
+  const shown = value ?? field.default ?? '';
+  switch (field.type) {
+    case 'textarea':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <textarea id={id} rows={4} value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+    case 'number':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input
+            id={id}
+            type="number"
+            value={shown === '' ? '' : String(shown)}
+            onChange={(e) => {
+              const n = e.target.valueAsNumber;
+              onChange(e.target.value === '' || !Number.isFinite(n) ? undefined : n);
+            }}
+          />
+        </label>
+      );
+    case 'select': {
+      const opts = field.options ?? [];
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <select id={id} value={String(shown)} onChange={(e) => onChange(e.target.value)}>
+            {!opts.includes(String(shown)) && <option value={String(shown)}>{shown === '' ? 'Choose…' : `${shown} (not an option)`}</option>}
+            {opts.map((o) => <option key={o} value={o}>{o}</option>)}
+          </select>
+        </label>
+      );
+    }
+    case 'image':
+      return (
+        <div className="field te-image">
+          <label htmlFor={id}><span>{field.label}</span></label>
+          <div className="te-image-row">
+            {shown !== '' && <img className="te-thumb" src={String(shown)} alt="" />}
+            <input id={id} className="mono" type="url" placeholder="https://" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+            <button className="btn sm" type="button" onClick={onPickImage}>Choose…</button>
+          </div>
+        </div>
+      );
+    case 'url':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} className="mono" type="url" placeholder="https:// or /path" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+    default:
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} type="text" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+  }
+}
+
+/** Review tab: which pages the staged draft re-lays out, vs the live site */
+export function SectionsReview({ api }: { api: ReturnType<typeof useDesignApi> }) {
+  const { data, error } = api;
+  if (error && !data) return <p className="te-muted">Page layouts couldn't be loaded: {error}</p>;
+  if (!data) return <p className="te-muted">Loading page layouts…</p>;
+  const live = (data.live.sectionPages ?? {}) as SectionPages;
+  const staged = data.draft?.sectionPages as SectionPages | undefined;
+  if (!staged) return <p className="te-muted">No page layout changes are staged.</p>;
+  const ids = [...new Set([...Object.keys(live), ...Object.keys(staged)])]
+    .filter((id) => JSON.stringify(live[id]) !== JSON.stringify(staged[id]));
+  if (ids.length === 0) return <p className="te-muted">No page layout changes are staged.</p>;
+  return (
+    <ul className="te-review">
+      {ids.map((id) => {
+        const p = data.pages.find((x) => x.id === id);
+        const s = staged[id];
+        const shown = s ? s.sections.filter((x) => !x.hidden).length : 0;
+        return (
+          <li key={id}>
+            <span className="te-review-page">{p ? p.title || p.slug : 'Deleted page'}{p?.isHome ? ' · home' : ''}</span>
+            <span className="te-review-what">
+              {!s ? 'Layout removed' : s.mode === 'content' ? 'Shows page content' : `${shown} visible ${shown === 1 ? 'section' : 'sections'}`}
+            </span>
+            {p && <a className="btn sm ghost" href={`${pagePath(p)}?designPreview=1`} target="_blank" rel="noopener">Preview ↗</a>}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}