@acms-subir/core 0.1.0 → 0.3.0

package/src/components/DesignManager.tsx

@@ -1,12 +1,20 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { actions } from 'astro:actions';
 import type { Settings } from '../lib/schema';
+import type { DesignChange } from '../lib/designDiff';
 import { ImagePicker } from './editor/ImagePicker';
+import ThemeSectionsEditor, { SectionsReview, useDesignApi } from './ThemeSectionsEditor';
+import DesignAccess from './DesignAccess';
+import '../styles/theme-editor.css';
 
 // Design screen: pick a code-first theme (src/themes/<slug>/), layer sparse
 // token overrides on top (saved to settings.designOverrides — the theme files
 // are never written to), set the site logo, and export the effective design
 // as a committable theme.json.
+//
+// Every change stages into settings.draftDesign — the preview iframe renders
+// the staged design (?designPreview=1, admin-only) while visitors keep the
+// live one until "Publish design" applies it.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -14,9 +22,12 @@ interface ThemeInfo {
   slug: string;
   name: string;
   description: string;
-  tokens: Record<string, string | number>;
+  tokens: Record<string, string | number> & { dark?: Record<string, string> };
   post: Record<string, string | boolean>;
   hasHome: boolean;
+  version: string;
+  templateCount: number;
+  sectionCount: number;
 }
 
 // post-page toggles: designOverrides key + which theme default backs it
@@ -27,19 +38,41 @@ const POST_TOGGLE_ROWS: { key: string; field: string; label: string; hint: strin
   { key: 'postAuthorCard', field: 'authorCard', label: 'Author card', hint: 'Avatar + bio block under the post' },
   { key: 'postShare', field: 'share', label: 'Share buttons', hint: 'X, LinkedIn and copy-link' },
   { key: 'postRelated', field: 'related', label: 'Related reading', hint: 'Three related posts at the bottom' },
+  { key: 'postProgress', field: 'progress', label: 'Reading progress', hint: 'Thin accent bar across the top while reading' },
+  { key: 'postToc', field: 'toc', label: 'On this page', hint: 'Sticky section list beside long posts (wide screens)' },
+];
+
+// shape / layout tokens (token v2): designOverrides key = token key
+const LOOK_ROWS: { key: string; label: string; hint: string; options: [string, string][] }[] = [
+  { key: 'scheme', label: 'Light & dark', hint: 'Auto follows the visitor’s device and adds a toggle to the header', options: [['auto', 'Auto + toggle'], ['light', 'Light only'], ['dark', 'Dark only']] },
+  { key: 'button', label: 'Buttons', hint: 'Fill for primary buttons', options: [['ink', 'Ink (text color)'], ['accent', 'Accent color']] },
+  { key: 'radius', label: 'Corners', hint: 'Roundness of cards, images and controls', options: [['sharp', 'Sharp'], ['soft', 'Soft'], ['round', 'Round'], ['smooth', 'Extra round']] },
+  { key: 'elevation', label: 'Depth', hint: 'Shadows under cards and buttons', options: [['flat', 'Flat (borders only)'], ['soft', 'Soft'], ['lifted', 'Lifted']] },
+  { key: 'density', label: 'Spacing', hint: 'Vertical rhythm of pages and sections', options: [['compact', 'Compact'], ['cozy', 'Cozy'], ['airy', 'Airy']] },
+  { key: 'header', label: 'Header', hint: 'Style of the site header', options: [['floating', 'Floating bar'], ['bar', 'Full-width bar'], ['minimal', 'Minimal (scrolls away)'], ['centered', 'Centered logo']] },
+  { key: 'footer', label: 'Footer', hint: 'Columns show links, socials and a Read column', options: [['columns', 'Columns'], ['simple', 'Simple row']] },
+  { key: 'blogLayout', label: 'Post lists', hint: 'Auto uses cards when most posts have a cover', options: [['auto', 'Auto'], ['cards', 'Cards'], ['list', 'List']] },
 ];
 const COVER_LABEL: Record<string, string> = { normal: 'Content width', full: 'Full bleed', overlay: 'Overlay (title on image)', hidden: 'Hidden' };
 interface Pairing { key: string; label: string; headingFont: string; bodyFont: string; googleFonts: string }
 
 interface Props {
   settings: Settings;
+  // true when settings.draftDesign held staged changes at load time
+  pendingDesign: boolean;
   themes: ThemeInfo[];
   pairings: Pairing[];
   unsplashEnabled: boolean;
   /** public path of the newest published post, or null when nothing is published */
   postPreviewPath: string | null;
+  /** staged draft vs live, computed server-side at load */
+  changes: DesignChange[];
 }
 
+interface VersionRow { id: string; createdAt: number; author: string; summary: string; theme: string }
+const when = (ts: number) =>
+  new Date(ts).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+
 const COLOR_FIELDS: { key: string; label: string; hint: string }[] = [
   { key: 'bg', label: 'Background', hint: 'Page background' },
   { key: 'ink', label: 'Text', hint: 'Body and heading text' },
@@ -47,7 +80,7 @@ const COLOR_FIELDS: { key: string; label: string; hint: string }[] = [
   { key: 'muted', label: 'Muted text', hint: 'Bylines, captions, metadata' },
   { key: 'line', label: 'Borders', hint: 'Dividers and card borders' },
   { key: 'panel', label: 'Panels', hint: 'Cards and link buttons' },
-  { key: 'soft', label: 'Soft fill', hint: 'Tag pills, inline code, table heads' },
+  { key: 'soft', label: 'Soft fill', hint: 'Inline code, quotes, table heads, empty images' },
 ];
 const WIDTHS = [
   { label: 'Narrow', px: 640 },
@@ -80,7 +113,23 @@ const DEVICES = [
 ] as const;
 type DeviceKey = (typeof DEVICES)[number]['key'];
 
-export default function DesignManager({ settings, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+// control tabs; the active one lives in the URL hash so reloads (after a
+// section save, discard or restore) land back on the same tab
+const TABS = [
+  { key: 'theme', label: 'Theme' },
+  { key: 'brand', label: 'Brand' },
+  { key: 'pages', label: 'Pages' },
+  { key: 'review', label: 'Review' },
+  { key: 'access', label: 'Access' },
+] as const;
+type TabKey = (typeof TABS)[number]['key'];
+const tabFromHash = (): TabKey => {
+  const h = typeof location === 'undefined' ? '' : location.hash.slice(1);
+  return (TABS.find((t) => t.key === h)?.key ?? 'theme');
+};
+
+export default function DesignManager({ settings, pendingDesign, themes, pairings, unsplashEnabled, postPreviewPath, changes: initialChanges }: Props) {
+  const [pending, setPending] = useState(pendingDesign);
   const [activeTheme, setActiveTheme] = useState(settings.activeTheme || 'ink');
   const [overrides, setOverrides] = useState<Record<string, unknown>>(
     (settings.designOverrides as Record<string, unknown>) ?? {}
@@ -89,6 +138,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
   const [siteFavicon, setSiteFavicon] = useState(settings.siteFavicon);
   const [siteCover, setSiteCover] = useState(settings.siteCover);
   const [saveState, setSaveState] = useState<SaveState>('saved');
+  const [saveMessage, setSaveMessage] = useState('');
   const [logoPickerOpen, setLogoPickerOpen] = useState(false);
   const [faviconPickerOpen, setFaviconPickerOpen] = useState(false);
   const [coverPickerOpen, setCoverPickerOpen] = useState(false);
@@ -96,6 +146,57 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
   const [tick, setTick] = useState(0);
   const [previewPage, setPreviewPage] = useState<'home' | 'post'>('home');
   const [previewDevice, setPreviewDevice] = useState<DeviceKey>('mobile');
+  const [previewScheme, setPreviewScheme] = useState<'light' | 'dark'>('light');
+  // "What changes" + preview compare / share / history
+  const [changes, setChanges] = useState<DesignChange[]>(initialChanges);
+  const [compare, setCompare] = useState<'draft' | 'live'>('draft');
+  const [previewPath, setPreviewPath] = useState('/');
+  const pathRef = useRef('/');
+  const shareRef = useRef<HTMLDialogElement>(null);
+  const histRef = useRef<HTMLDialogElement>(null);
+  const [shareDays, setShareDays] = useState(7);
+  const [shareUrl, setShareUrl] = useState('');
+  const [shareMsg, setShareMsg] = useState('');
+  const [versions, setVersions] = useState<VersionRow[] | null>(null);
+  const [tab, setTabState] = useState<TabKey>(tabFromHash);
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const setTab = (key: TabKey, focus = false) => {
+    setTabState(key);
+    history.replaceState(null, '', key === 'theme' ? location.pathname + location.search : `#${key}`);
+    if (focus) tabRefs.current[key]?.focus();
+  };
+  const onTabKey = (e: ReactKeyboardEvent) => {
+    const i = TABS.findIndex((t) => t.key === tab);
+    const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? TABS.length - 1 : null;
+    if (to === null) return;
+    e.preventDefault();
+    setTab(TABS[(to + TABS.length) % TABS.length].key, true);
+  };
+  // keys load on first visit to Access, not on every Design page load
+  const accessSeen = useRef(false);
+  if (tab === 'access') accessSeen.current = true;
+  // shared GET /api/design for page layouts (Pages + Review)
+  const designApi = useDesignApi();
+  // staged page layouts count as a draft even if the change list omits them
+  const sectionsStaged = useMemo(() => {
+    const d = designApi.data;
+    if (!d?.draft?.sectionPages) return false;
+    return JSON.stringify(d.draft.sectionPages) !== JSON.stringify(d.live.sectionPages ?? {});
+  }, [designApi.data]);
+  const sectionsStagedRef = useRef(false);
+  sectionsStagedRef.current = sectionsStaged;
+
+  // the preview iframe reports where it navigated (preview-mode links keep the
+  // draft), so reloads after a change land on the same page
+  useEffect(() => {
+    const onMsg = (e: MessageEvent) => {
+      if (e.origin !== location.origin || e.data?.type !== 'acms-preview-nav') return;
+      pathRef.current = String(e.data.path || '/');
+      setPreviewPath(pathRef.current);
+    };
+    addEventListener('message', onMsg);
+    return () => removeEventListener('message', onMsg);
+  }, []);
   const frameRef = useRef<HTMLDivElement>(null);
   const [frameBox, setFrameBox] = useState({ w: 0, h: 0 });
   useEffect(() => {
@@ -112,23 +213,101 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
   latest.current = { activeTheme, overrides, siteLogo, siteFavicon, siteCover };
 
   const theme = themes.find((t) => t.slug === activeTheme) ?? themes[0];
+  const latestChanges = useRef(changes);
+  latestChanges.current = changes;
+
+  // saves stage into settings.draftDesign — the live site is untouched
+  const doSave = async () => {
+    const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
+    const { data, error } = await actions.settings.saveDesignDraft({
+      activeTheme,
+      designOverrides: overrides,
+      siteLogo,
+      siteFavicon,
+      siteCover,
+    });
+    if (error) { setSaveMessage(error.message); setSaveState('error'); return false; }
+    setSaveState('saved');
+    // edits that land back on the live design leave nothing staged
+    const next = (data?.changes ?? []) as DesignChange[];
+    setChanges(next);
+    setPending(next.length > 0);
+    setTick((t) => t + 1);
+    return true;
+  };
 
   const scheduleSave = () => {
     setSaveState('saving');
     if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(async () => {
-      const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
-      const { error } = await actions.settings.update({
-        activeTheme,
-        designOverrides: overrides,
-        siteLogo,
-        siteFavicon,
-        siteCover,
-      });
-      if (error) { setSaveState('error'); return; }
+    timer.current = setTimeout(doSave, 500);
+  };
+
+  // Publish design: flush any queued save into the staged blob, then apply it
+  const publishDesign = async () => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    if (!(await doSave())) return;
+    const n = latestChanges.current.length;
+    if (!n && !sectionsStagedRef.current) return;
+    const what = n ? `${n} ${n === 1 ? 'change' : 'changes'}` : 'the staged page layouts';
+    if (!window.confirm(`Publish ${what}? Visitors see them right away. The current design is saved to History.`)) return;
+    const { error } = await actions.settings.applyDesign({});
+    if (error) { setSaveMessage(error.message); setSaveState('error'); return; }
+    setPending(false);
+    setChanges([]);
+    setVersions(null);
+    setTick((t) => t + 1);
+    void designApi.reload();
+  };
+
+  // undo one row of the change list: the server rewrites the draft, the
+  // controls rehydrate from it (or from the live design when nothing's left)
+  const revertChange = async (key: string) => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    setSaveState('saving');
+    const { data, error } = await actions.settings.revertDesignChange({ key });
+    if (error) { setSaveMessage(error.message); setSaveState('error'); return; }
+    if (key === 'nav') {
+      setChanges(data.changes as DesignChange[]);
+      setPending(data.changes.length > 0);
       setSaveState('saved');
       setTick((t) => t + 1);
-    }, 500);
+      return;
+    }
+    location.reload();
+  };
+
+  const openShare = () => { setShareUrl(''); setShareMsg(''); shareRef.current?.showModal(); };
+  const createShare = async () => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; await doSave(); }
+    const { data, error } = await actions.settings.createShareLink({ days: shareDays });
+    if (error) { setShareMsg(error.message); return; }
+    setShareUrl(data.url);
+    try { await navigator.clipboard.writeText(data.url); setShareMsg('Link copied.'); } catch { setShareMsg(''); }
+  };
+  const revokeShares = async () => {
+    const { error } = await actions.settings.revokeShareLinks({});
+    setShareUrl('');
+    setShareMsg(error ? error.message : 'Every earlier share link has stopped working.');
+  };
+
+  const openHistory = async () => {
+    histRef.current?.showModal();
+    const { data } = await actions.settings.listDesignVersions({});
+    setVersions((data?.versions ?? []) as VersionRow[]);
+  };
+  const restoreVersion = async (id: string) => {
+    if (pending && !window.confirm('Replace your current draft with this version? Your unpublished changes will be lost.')) return;
+    const { error } = await actions.settings.restoreDesignVersion({ id });
+    if (error) { window.alert(error.message); return; }
+    location.reload();
+  };
+
+  const discardDesign = async () => {
+    if (!window.confirm('Discard the staged design changes and go back to the live design? This cannot be undone.')) return;
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    const { error } = await actions.settings.discardDesign({});
+    if (error) { setSaveMessage(error.message); setSaveState('error'); return; }
+    location.reload(); // rehydrate the controls from the live design
   };
 
   const setOv = (key: string, value: unknown) => {
@@ -149,10 +328,13 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
 
   const copyThemeJson = async () => {
     const tokens: Record<string, string | number> = { ...theme.tokens };
-    for (const f of [...COLOR_FIELDS.map((c) => c.key), 'width']) {
+    for (const f of [...COLOR_FIELDS.map((c) => c.key), 'width', ...LOOK_ROWS.map((r) => r.key)]) {
       const v = overrides[f];
       if (v !== undefined && v !== null && v !== '') tokens[f] = v as string | number;
     }
+    if (typeof overrides.darkAccent === 'string' && overrides.darkAccent) {
+      (tokens as Record<string, unknown>).dark = { ...(theme.tokens.dark ?? {}), accent: overrides.darkAccent };
+    }
     const pairing = pairings.find((p) => p.key === overrides.fontPairing);
     if (pairing) {
       tokens.headingFont = pairing.headingFont;
@@ -169,6 +351,14 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
     setTimeout(() => setCopied(false), 1800);
   };
 
+  // rebuilt only when something that should reload the preview changes —
+  // not when the iframe merely reports a new path
+  const iframeSrc = useMemo(() => {
+    const path = pathRef.current.split('?')[0] || '/';
+    return `${path}?designPreview=${compare === 'live' ? 'live' : '1'}&design=${tick}&scheme=${previewScheme}`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tick, compare, previewScheme, previewPage]);
+
   const overrideCount = Object.keys(overrides).filter((k) => overrides[k] !== undefined && overrides[k] !== '').length;
 
   // "you changed it · Reset to theme" hint line, per the plan mock
@@ -179,50 +369,79 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
     </>
   );
 
+  const hasDraft = (pending && changes.length > 0) || sectionsStaged;
+
   return (
     <div className="dm-layout">
       <div className="dm-controls">
         <div className="card card-pad">
           <div className="dm-cardhead">
             <p className="dm-sub">
-              Active theme: <b>{theme.name}</b> · loaded from <code>src/themes/{theme.slug}/</code> —
-              values below override it. Overrides apply instantly.
+              Active theme: <b>{theme.name}</b> · loaded from <code>src/themes/{theme.slug}/</code>. Changes stay in a
+              private draft until you publish; visitors keep the live design.
             </p>
             <div className="dm-headactions">
-              {overrideCount > 0 && (
-                <button className="btn sm ghost" type="button" onClick={() => { setOverrides({}); scheduleSave(); }}>
-                  Reset all
-                </button>
-              )}
               <span className={`lm-savestate ${saveState}`}>
-                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? (saveMessage || 'Save failed') : null}
               </span>
+              <button className="btn sm ghost" type="button" onClick={() => void openHistory()}>History</button>
             </div>
           </div>
 
-          <div className="dm-themes">
-            {themes.map((t) => (
+          <div className="dm-status">
+            <div className="dm-status-line">
+              {hasDraft ? (
+                <><span className="dm-st is-draft">Draft</span><span className="dm-st-sub">· {changes.length > 0 ? `${changes.length} ${changes.length === 1 ? 'change' : 'changes'}` : 'page layouts'}, not live</span></>
+              ) : (
+                <><span className="dm-st is-live">Live</span><span className="dm-st-sub">· no unpublished changes</span></>
+              )}
+              <span className="dm-status-actions">
+                {overrideCount > 0 && (
+                  <button className="btn sm ghost" type="button" onClick={() => { setOverrides({}); scheduleSave(); }}>Reset all</button>
+                )}
+                {hasDraft && (
+                  <>
+                    <button className="btn sm ghost" type="button" onClick={discardDesign}>Discard</button>
+                    <button className="btn sm primary" type="button" onClick={() => void publishDesign()}>Publish…</button>
+                  </>
+                )}
+              </span>
+            </div>
+            <div className="dm-status-links">
+              {hasDraft && tab !== 'review' && (
+                <button className="btn sm" type="button" onClick={() => setTab('review')}>Review changes</button>
+              )}
+              <a className="btn sm" href="/?designPreview=1" target="_blank" rel="noopener">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></svg>
+                Preview site
+              </a>
+              <button className="btn sm" type="button" onClick={openShare} disabled={!hasDraft} title={hasDraft ? undefined : 'Make a change first'}>
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5" /></svg>
+                Share preview
+              </button>
+            </div>
+          </div>
+
+          <div className="seg te-tabs" role="tablist" aria-label="Design settings" onKeyDown={onTabKey}>
+            {TABS.map((t) => (
               <button
-                key={t.slug}
+                key={t.key}
+                ref={(el) => { tabRefs.current[t.key] = el; }}
                 type="button"
-                className={`dm-theme ${t.slug === activeTheme ? 'active' : ''}`}
-                title={t.description}
-                onClick={() => pickTheme(t.slug)}
+                role="tab"
+                id={`dm-tab-${t.key}`}
+                aria-selected={tab === t.key}
+                aria-controls={`dm-panel-${t.key}`}
+                tabIndex={tab === t.key ? 0 : -1}
+                onClick={() => setTab(t.key)}
               >
-                <span
-                  className="dm-swatch"
-                  style={{ background: String(t.tokens.bg), borderColor: String(t.tokens.line) }}
-                >
-                  <span style={{ color: String(t.tokens.ink), fontFamily: String(t.tokens.headingFont) }}>Aa</span>
-                  <i style={{ background: String(t.tokens.accent) }} />
-                </span>
-                <span className="dm-theme-name">{t.name}</span>
-                <span className="dm-theme-desc">{t.description.split(' — ')[0]}</span>
-                {t.hasHome && <span className="dm-chip">coded homepage</span>}
+                {t.label}
+                {t.key === 'review' && pending && changes.length > 0 && <span className="te-tab-count" aria-label={`${changes.length} staged`}>{changes.length}</span>}
               </button>
             ))}
           </div>
 
+          <div className="te-panel" role="tabpanel" id="dm-panel-brand" aria-labelledby="dm-tab-brand" hidden={tab !== 'brand'}>
           <div className="dm-row">
             <div className="dm-lab">
               <span>Logo</span>
@@ -324,6 +543,33 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
               </div>
             );
           })}
+          </div>
+
+          <div className="te-panel" role="tabpanel" id="dm-panel-theme" aria-labelledby="dm-tab-theme" hidden={tab !== 'theme'}>
+          <div className="dm-themes">
+            {themes.map((t) => (
+              <button
+                key={t.slug}
+                type="button"
+                className={`dm-theme ${t.slug === activeTheme ? 'active' : ''}`}
+                title={t.description}
+                aria-pressed={t.slug === activeTheme}
+                onClick={() => pickTheme(t.slug)}
+              >
+                <span
+                  className="dm-swatch"
+                  style={{ background: String(t.tokens.bg), borderColor: String(t.tokens.line) }}
+                >
+                  <span style={{ color: String(t.tokens.ink), fontFamily: String(t.tokens.headingFont) }}>Aa</span>
+                  <i style={{ background: String(t.tokens.accent) }} />
+                </span>
+                <span className="dm-theme-name">{t.name}</span>
+                <span className="dm-theme-desc">{t.description.split(' — ')[0]}</span>
+                <span className="dm-chip">v{t.version} · {t.sectionCount} sections</span>
+                <span className="dm-theme-desc">{t.templateCount} custom templates · installed</span>
+              </button>
+            ))}
+          </div>
 
           <div className="dm-row">
             <div className="dm-lab">
@@ -331,7 +577,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
               <small>
                 {overrides.width !== undefined
                   ? overriddenHint(`${Number(theme.tokens.width)}px`, 'width')
-                  : `Desktop max width of the whole layout — theme default is ${Number(theme.tokens.width)}px`}
+                  : `Reading column width for posts and pages; theme default is ${Number(theme.tokens.width)}px`}
               </small>
             </div>
             <div className="dm-ctl">
@@ -382,6 +628,53 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
             </div>
           )}
 
+          <p className="card-title dm-group">Look</p>
+          <p className="dm-grouphint">
+            Shape, depth and layout. Every theme has defaults; changes here apply on top of it.
+          </p>
+
+          {LOOK_ROWS.map((r) => (
+            <div className="dm-row" key={r.key}>
+              <div className="dm-lab">
+                <span>{r.label}{overrides[r.key] !== undefined && <em className="dm-ovr">override</em>}</span>
+                <small>{r.hint}</small>
+              </div>
+              <div className="dm-ctl">
+                <select
+                  className="lm-select"
+                  value={String(overrides[r.key] ?? '')}
+                  onChange={(e) => (e.target.value ? setOv(r.key, e.target.value) : clearOv(r.key))}
+                >
+                  <option value="">Theme default ({r.options.find(([v]) => v === String(theme.tokens[r.key]))?.[1] ?? String(theme.tokens[r.key] ?? '')})</option>
+                  {r.options.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+                </select>
+              </div>
+            </div>
+          ))}
+
+          {String(effective('scheme')) !== 'light' && (
+            <div className="dm-row">
+              <div className="dm-lab">
+                <span>Dark accent{overrides.darkAccent !== undefined && <em className="dm-ovr">override</em>}</span>
+                <small>
+                  {theme.tokens.dark && Object.keys(theme.tokens.dark).length
+                    ? 'Accent used in dark mode, the theme ships its own dark palette'
+                    : 'This theme generates its dark palette; check it in the preview'}
+                </small>
+              </div>
+              <div className="dm-ctl">
+                <input
+                  type="color"
+                  value={String(overrides.darkAccent ?? theme.tokens.dark?.accent ?? '#7d93ff')}
+                  onChange={(e) => setOv('darkAccent', e.target.value)}
+                />
+                {overrides.darkAccent !== undefined && (
+                  <button className="btn sm ghost" type="button" onClick={() => clearOv('darkAccent')}>Reset</button>
+                )}
+              </div>
+            </div>
+          )}
+
           <p className="card-title dm-group">Posts</p>
           <p className="dm-grouphint">
             How individual posts render. The theme sets the defaults; anything you change here overrides it site-wide.
@@ -438,6 +731,49 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
               </button>
             </div>
           </div>
+          </div>
+
+          <div className="te-panel" role="tabpanel" id="dm-panel-pages" aria-labelledby="dm-tab-pages" hidden={tab !== 'pages'}>
+            <ThemeSectionsEditor api={designApi} activeTheme={activeTheme} unsplashEnabled={unsplashEnabled} />
+          </div>
+
+          <div className="te-panel" role="tabpanel" id="dm-panel-review" aria-labelledby="dm-tab-review" hidden={tab !== 'review'}>
+            <p className="card-title dm-group te-first">Staged changes</p>
+            {pending && changes.length > 0 ? (
+              <ul className="dm-changes">
+                {changes.map((c) => (
+                  <li key={c.key}>
+                    <span className="dm-ch-label">{c.label}</span>
+                    <span className="dm-ch-val">
+                      {c.kind === 'color' ? (
+                        <><i className="dm-ch-sw" style={{ background: c.from || 'transparent' }} title={c.from || 'Theme default'} />→<i className="dm-ch-sw" style={{ background: c.to || 'transparent' }} title={c.to || 'Theme default'} /></>
+                      ) : c.kind === 'image' ? (
+                        <>{c.from ? 'Changed' : 'Added'}{!c.to && ' (removed)'}</>
+                      ) : c.kind === 'nav' ? (
+                        <>{c.to}</>
+                      ) : (
+                        <>{c.from} → <b>{c.to}</b></>
+                      )}
+                    </span>
+                    <button type="button" className="dm-ch-undo" onClick={() => void revertChange(c.key)} aria-label={`Undo ${c.label}`}>Undo</button>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="te-muted">
+                {hasDraft ? 'No theme or brand changes staged.' : 'Nothing staged. The live design is what visitors see.'}
+              </p>
+            )}
+            <p className="card-title dm-group">Page layouts</p>
+            <SectionsReview api={designApi} />
+            <p className="dm-grouphint te-reviewhint">
+              Publish from the bar above to make every staged change live at once, or share a preview link first.
+            </p>
+          </div>
+
+          <div className="te-panel" role="tabpanel" id="dm-panel-access" aria-labelledby="dm-tab-access" hidden={tab !== 'access'}>
+            {accessSeen.current && <DesignAccess />}
+          </div>
         </div>
       </div>
 
@@ -459,19 +795,29 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
                 </button>
               ))}
             </div>
+            <div className="dm-ptabs" title="Compare with the live design (D in the full preview)">
+              <button type="button" className={compare === 'live' ? 'active' : ''} onClick={() => setCompare('live')}>Live</button>
+              <button type="button" className={compare === 'draft' ? 'active' : ''} onClick={() => setCompare('draft')}>Draft</button>
+            </div>
+            {String(effective('scheme')) === 'auto' && (
+              <div className="dm-ptabs">
+                <button type="button" className={previewScheme === 'light' ? 'active' : ''} onClick={() => setPreviewScheme('light')}>Light</button>
+                <button type="button" className={previewScheme === 'dark' ? 'active' : ''} onClick={() => setPreviewScheme('dark')}>Dark</button>
+              </div>
+            )}
             {postPreviewPath && (
               <div className="dm-ptabs">
                 <button
                   type="button"
                   className={previewPage === 'home' ? 'active' : ''}
-                  onClick={() => setPreviewPage('home')}
+                  onClick={() => { pathRef.current = '/'; setPreviewPath('/'); setPreviewPage('home'); }}
                 >
                   Home
                 </button>
                 <button
                   type="button"
                   className={previewPage === 'post' ? 'active' : ''}
-                  onClick={() => setPreviewPage('post')}
+                  onClick={() => { pathRef.current = postPreviewPath ?? "/"; setPreviewPath(postPreviewPath ?? "/"); setPreviewPage("post"); }}
                 >
                   Post
                 </button>
@@ -479,11 +825,12 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
             )}
             <a
               className="btn sm ghost"
-              href={previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}
+              href={`${previewPath.split('?')[0]}?designPreview=1`}
               target="_blank"
               rel="noopener"
+              title={`Open ${previewPath} in preview mode`}
             >
-              Open ↗
+              Open draft ↗
             </a>
           </div>
         </div>
@@ -493,8 +840,8 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
           return (
             <div className="dm-frame" ref={frameRef}>
               <iframe
-                key={`${previewPage}-${tick}`}
-                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?design=${tick}`}
+                key={iframeSrc}
+                src={iframeSrc}
                 title="Site preview"
                 style={{
                   width: device.width,
@@ -507,6 +854,67 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
         })()}
       </div>
 
+      <dialog className="modal dm-dialog" ref={shareRef} onClick={(e) => { if (e.target === e.currentTarget) shareRef.current?.close(); }}>
+        <div className="modal-head">
+          <span>Share a preview</span>
+          <button className="modal-x" type="button" onClick={() => shareRef.current?.close()} aria-label="Close">✕</button>
+        </div>
+        <div className="modal-body">
+          <p className="dm-dialog-sub">Anyone with the link can browse the site with your draft design. They can't edit or publish, and the link stops working when you publish or discard the draft.</p>
+          {shareUrl ? (
+            <div className="dm-share-url">
+              <input readOnly value={shareUrl} onFocus={(e) => e.currentTarget.select()} aria-label="Preview link" />
+              <button className="btn sm primary" type="button" onClick={() => void navigator.clipboard.writeText(shareUrl).then(() => setShareMsg('Link copied.'))}>Copy</button>
+            </div>
+          ) : (
+            <div className="dm-share-row">
+              <label>Expires
+                <select className="lm-select" value={shareDays} onChange={(e) => setShareDays(Number(e.target.value))}>
+                  <option value={1}>In 24 hours</option>
+                  <option value={7}>In 7 days</option>
+                  <option value={30}>In 30 days</option>
+                </select>
+              </label>
+              <button className="btn sm primary" type="button" onClick={() => void createShare()}>Create link</button>
+            </div>
+          )}
+          {shareMsg && <p className="dm-dialog-msg">{shareMsg}</p>}
+          <div className="dm-share-foot">
+            <button className="btn sm ghost dm-danger" type="button" onClick={() => void revokeShares()}>Revoke all links</button>
+          </div>
+        </div>
+      </dialog>
+
+      <dialog className="modal dm-dialog" ref={histRef} onClick={(e) => { if (e.target === e.currentTarget) histRef.current?.close(); }}>
+        <div className="modal-head">
+          <span>Design history</span>
+          <button className="modal-x" type="button" onClick={() => histRef.current?.close()} aria-label="Close">✕</button>
+        </div>
+        <div className="modal-body">
+          <p className="dm-dialog-sub">Every publish saves the design it replaced. Restoring loads a version as your draft, so you can preview it before publishing.</p>
+          {versions === null ? (
+            <p className="dm-dialog-msg">Loading…</p>
+          ) : versions.length === 0 ? (
+            <p className="dm-dialog-msg">No earlier versions yet. The first publish creates one.</p>
+          ) : (
+            <ul className="dm-hist">
+              {versions.map((v) => (
+                <li key={v.id}>
+                  <div>
+                    <b>{v.theme}{v.summary ? ` · replaced by: ${v.summary}` : ''}</b>
+                    <small>Saved {when(v.createdAt)}{v.author ? ` by ${v.author}` : ''}</small>
+                  </div>
+                  <span className="dm-hist-actions">
+                    <a className="btn sm ghost" href={`/?designVersion=${v.id}`} target="_blank" rel="noopener">Preview</a>
+                    <button className="btn sm" type="button" onClick={() => void restoreVersion(v.id)}>Restore as draft</button>
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </dialog>
+
       <ImagePicker
         open={logoPickerOpen}
         unsplashEnabled={unsplashEnabled}