@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/src/components/ThemeSectionsEditor.tsx

@@ -1,16 +1,24 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS as DndCSS } from '@dnd-kit/utilities';
 import { ImagePicker } from './editor/ImagePicker';
+import { FieldInput, EMPTY_TARGETS, type FieldDef, type SectionTargets } from './sections/SectionFields';
+import { SectionPicker, type PickerChoice } from './sections/SectionPicker';
+import { checkLayouts } from './sections/checks';
+import { TranslationFields, sectionSummary, withTranslation, confirmTranslation, unitsToDraft, requestDrafts, planMerge, type Unit } from './sections/TranslationPanel';
+import { defaultValue, fieldVisible, initialData, normalizeData, normalizeValue, orphanKeys, valueIssues } from '../theme-sdk/fields.mjs';
 
 // 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
+// autosave into the design draft (1.2s after the last edit) 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;
+interface SectionDef { name?: string; label?: string; description?: string; version?: number; variants?: string[]; fields?: Record<string, FieldDef>; category?: string; limit?: number; example?: Record<string, unknown>; presets?: { name: string; description?: string; variant?: string; data: Record<string, unknown> }[] }
+type SectionValue = unknown;
+interface Preset { name: string; description?: string; sections: { type: string; variant?: string; hidden?: boolean; data: Record<string, SectionValue> }[] }
 export interface SectionInstance {
   id: string;
   type: string;
@@ -18,6 +26,10 @@ export interface SectionInstance {
   variant: string;
   hidden: boolean;
   data: Record<string, SectionValue>;
+  showFrom?: string;
+  showUntil?: string;
+  locked?: boolean;
+  translations?: Record<string, { data: Record<string, string | number | boolean>; meta: Record<string, { state: 'ai' | 'reviewed'; src: string }> }>;
 }
 export interface PageLayout { mode: 'sections' | 'content'; sections: SectionInstance[] }
 export type SectionPages = Record<string, PageLayout>;
@@ -27,8 +39,9 @@ export interface DesignApiState {
   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 }[];
+  themes: { slug: string; name: string; version: string | number; sections: Record<string, SectionDef>; coded?: string[]; migratable?: string[]; presets?: Record<string, Preset> }[];
+  targets?: SectionTargets;
+  pages: { id: string; title: string; slug: string; isHome: boolean; locale?: string }[];
   versions: { id: string; createdAt: number; author: string; summary: string }[];
   scopes: string[];
 }
@@ -46,6 +59,8 @@ export function useDesignApi() {
   const [data, setData] = useState<DesignApiState | null>(null);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(true);
+  // bumps only on a real (re)load, so local patches don't reset editors
+  const [loadCount, setLoadCount] = useState(0);
   const load = useCallback(async () => {
     setLoading(true);
     setError('');
@@ -53,6 +68,7 @@ export function useDesignApi() {
       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);
+      setLoadCount((n) => n + 1);
     } catch {
       setError("Couldn't reach the server.");
     } finally {
@@ -60,7 +76,9 @@ export function useDesignApi() {
     }
   }, []);
   useEffect(() => { void load(); }, [load]);
-  return { data, error, loading, reload: load };
+  /** update local state after our own write (e.g. an autosave) without a refetch */
+  const patch = useCallback((fn: (d: DesignApiState) => DesignApiState) => setData((d) => (d ? fn(d) : d)), []);
+  return { data, error, loading, loadCount, reload: load, patch };
 }
 
 const stagedPages = (d: DesignApiState): SectionPages =>
@@ -75,43 +93,150 @@ const newId = (type: string) => {
   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 defaultsFor = (def: SectionDef): Record<string, SectionValue> => initialData(def) as Record<string, SectionValue>;
+const CLIP_KEY = 'acms-section-clipboard';
+// schedules are stored as site wall-clock "YYYY-MM-DDTHH:MM"; datetime-local speaks the same format
+const toLocalInput = (v?: string) => (v ? (v.length === 10 ? `${v}T00:00` : v) : '');
+const fromLocalInput = (v: string) => (v ? v.slice(0, 16) : undefined);
+const scheduleText = (s: SectionInstance) => {
+  const now = new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+  if (s.showFrom && now < toLocalInput(s.showFrom)) return 'Hidden now · appears on ' + toLocalInput(s.showFrom).replace('T', ' at ');
+  if (s.showUntil && now >= toLocalInput(s.showUntil)) return 'Ended · no longer shown';
+  if (s.showUntil) return 'Showing now · until ' + toLocalInput(s.showUntil).replace('T', ' at ');
+  return s.showFrom ? 'Showing now' : 'Pick dates in your site’s timezone';
+};
+/** the section's other filled-in text fields, as context for AI help */
+const sectionContext = (def: SectionDef, s: SectionInstance, except: string) =>
+  Object.entries(def.fields ?? {}).filter(([k, f]) => k !== except && ['text', 'textarea', 'richtext'].includes(f.type) && typeof s.data[k] === 'string' && String(s.data[k]).trim())
+    .map(([k, f]) => `${f.label}: ${String(s.data[k]).replace(/<[^>]+>/g, ' ').slice(0, 300)}`).join('\n').slice(0, 3000);
+/** validation messages per field key (lists report at the list) */
+const fieldIssues = (def: SectionDef, s: SectionInstance): Record<string, string[]> => {
+  const data = normalizeData(def, s.data) as Record<string, unknown>;
+  return Object.fromEntries(Object.entries(def.fields ?? {}).map(([k, f]) => [k, fieldVisible(f, data) ? valueIssues(f, data[k]) : []]));
 };
+const hasSource = (def: SectionDef | undefined) => Object.values(def?.fields ?? {}).some((f) => f.type === 'source');
 
 const pagePath = (p: { slug: string; isHome: boolean }) => (p.isHome ? '/' : `/${p.slug}`);
 
+export interface SectionFocus { pageId: string; sectionId: string; n: number }
+
 interface EditorProps {
   api: ReturnType<typeof useDesignApi>;
   /** theme picked in the Theme tab (may be ahead of the staged draft) */
   activeTheme: string;
   unsplashEnabled: boolean;
+  /** open a section (click-to-edit in the preview, or ?page=&section= links) */
+  focus?: SectionFocus | null;
+  /** the open section changed: the preview highlights it */
+  onOpenSection?: (pageId: string, sectionId: string | null, path: string) => void;
+  /** a save or publish landed: refresh the preview */
+  onSaved?: () => void;
+  /** freshly rendered sections for the unsaved layout: swap them into the preview */
+  onLiveHtml?: (html: string) => void;
+  /** the Design screen's Publish flushes pending section edits through this */
+  flushRef?: { current: () => Promise<boolean> };
 }
 
-export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled }: EditorProps) {
-  const { data, error: loadError, loading, reload } = api;
+export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled, focus, onOpenSection, onSaved, onLiveHtml, flushRef }: EditorProps) {
+  const { data, error: loadError, loading, reload, loadCount, patch } = api;
   const [pages, setPages] = useState<SectionPages>({});
   const [pageId, setPageId] = useState('');
   const [openId, setOpenId] = useState<string | null>(null);
-  const [addType, setAddType] = useState('');
+  const [pickerOpen, setPickerOpen] = useState(false);
+  // translation mode: '' = the site's main language, else a locale code
+  const [lang, setLang] = useState('');
+  const [busyPaths, setBusyPaths] = useState<Set<string>>(new Set());
+  const [trError, setTrError] = useState('');
+  const loadedPages = useRef<SectionPages>({});
+  const isOwnerRef = useRef(true);
+  const [schedFor, setSchedFor] = useState<string | null>(null);
+  const [clip, setClip] = useState<SectionInstance | null>(() => {
+    try { const v = JSON.parse(localStorage.getItem(CLIP_KEY) ?? 'null'); return v?.acmsSection ? v.section : null; } catch { return null; }
+  });
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState('');
+  const [flash, setFlash] = useState('');
   const [conflict, setConflict] = useState(false);
-  const [imageFor, setImageFor] = useState<{ sectionId: string; key: string } | null>(null);
+  const [imageApply, setImageApply] = useState<((src: string) => void) | null>(null);
+  const listRef = useRef<HTMLOListElement>(null);
+  // undo/redo: whole-layout snapshots; a burst of typing is one step
+  const past = useRef<SectionPages[]>([]);
+  const future = useRef<SectionPages[]>([]);
+  const lastEdit = useRef(0);
+  const [, setHistoryTick] = useState(0);
+  /** every user edit goes through here so it can be undone */
+  const edit = (fn: (all: SectionPages) => SectionPages) => {
+    setPages((prev) => {
+      const next = fn(prev);
+      if (next === prev) return prev;
+      const now = Date.now();
+      if (now - lastEdit.current > 800) {
+        past.current = [...past.current.slice(-49), prev];
+        future.current = [];
+        setHistoryTick((n) => n + 1);
+      }
+      lastEdit.current = now;
+      return next;
+    });
+  };
+  const undo = () => setPages((cur) => {
+    const prev = past.current.pop();
+    if (!prev) return cur;
+    future.current.push(cur);
+    lastEdit.current = 0;
+    setHistoryTick((n) => n + 1);
+    return prev;
+  });
+  const redo = () => setPages((cur) => {
+    const next = future.current.pop();
+    if (!next) return cur;
+    past.current.push(cur);
+    lastEdit.current = 0;
+    setHistoryTick((n) => n + 1);
+    return next;
+  });
 
-  // rehydrate local edits whenever a fresh server state arrives
-  const base = useMemo(() => (data ? stagedPages(data) : {}), [data]);
+  // `base` is what the server holds (the staged draft); edits autosave into
+  // it. A real reload rehydrates everything; our own autosaves only move
+  // `base` and the revision forward, so typing is never overwritten.
+  const [base, setBase] = useState<SectionPages>({});
+  const revRef = useRef(0);
   useEffect(() => {
     if (!data) return;
-    setPages(structuredClone(base));
+    const fresh = stagedPages(data);
+    loadedPages.current = structuredClone(fresh);
+    revRef.current = data.revision;
+    setBase(fresh);
+    setPages(structuredClone(fresh));
+    past.current = [];
+    future.current = [];
     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]);
+    setPageId((cur) => {
+      if (cur && data.pages.some((p) => p.id === cur)) return cur;
+      const wanted = new URLSearchParams(location.search).get('page');
+      return (data.pages.find((p) => p.id === wanted) ?? data.pages.find((p) => p.isHome) ?? data.pages[0])?.id ?? '';
+    });
+    const wantedSection = new URLSearchParams(location.search).get('section');
+    if (wantedSection) setOpenId((cur) => cur ?? wantedSection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadCount]);
+
+  // click-to-edit from the preview
+  useEffect(() => {
+    if (!focus || !data) return;
+    if (data.pages.some((p) => p.id === focus.pageId)) setPageId(focus.pageId);
+    setOpenId(focus.sectionId);
+  }, [focus, data]);
+  useEffect(() => {
+    const p = data?.pages.find((x) => x.id === pageId);
+    const base0 = p ? pagePath(p) : '/';
+    const path = lang ? (base0 === '/' ? `/${lang}` : `/${lang}${base0}`) : base0;
+    if (!openId) { onOpenSection?.(pageId, null, path); return; }
+    onOpenSection?.(pageId, openId, path);
+    requestAnimationFrame(() => listRef.current?.querySelector(`[data-sec="${CSS.escape(openId)}"]`)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openId, pageId, lang]);
 
   const dirty = useMemo(() => JSON.stringify(pages) !== JSON.stringify(base), [pages, base]);
   const dirtyRef = useRef(false);
@@ -122,15 +247,188 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
     return () => removeEventListener('beforeunload', warn);
   }, []);
 
+  const baseRef = useRef(base);
+  baseRef.current = base;
+  const post = async (body: Record<string, unknown>, retried = false): Promise<{ revision: number } | null> => {
+    const res = await fetch('/api/design', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', accept: 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (res.status === 409 && !retried && typeof body.revision === 'number') {
+      // the revision moved: if only other design settings changed (theme,
+      // colors autosave), our layouts are still current, so retry once
+      const fresh = await fetch('/api/design', { headers: { accept: 'application/json' } }).then((r) => (r.ok ? (r.json() as Promise<DesignApiState>) : null)).catch(() => null);
+      if (fresh && JSON.stringify(stagedPages(fresh)) === JSON.stringify(baseRef.current)) return post({ ...body, revision: fresh.revision }, true);
+      if (body.operation === 'stage') { setConflict(true); return null; }
+    }
+    if (!res.ok) { setSaveError(await errorText(res, `Couldn't save (${res.status}).`)); return null; }
+    return (await res.json()) as { revision: number };
+  };
+  // autosave: stage into the design draft 1.2s after the last edit
+  const [saveState, setSaveState] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  const saving$ = useRef(false);
+  const staleRef = useRef(false);
+  const autosave = async () => {
+    if (saving$.current) return;
+    saving$.current = true;
+    setSaveState('saving');
+    const snapshot = pagesRef.current;
+    try {
+      const out = await post({ operation: 'stage', revision: revRef.current, patch: { sectionPages: snapshot } });
+      if (!out) { setSaveState('error'); return; }
+      revRef.current = out.revision;
+      setBase(snapshot);
+      setSaveState('saved');
+      patch((d) => ({ ...d, revision: out.revision, draft: { ...(d.draft ?? {}), sectionPages: snapshot } }));
+      // the preview couldn't swap (new layout / mode change): reload it now
+      if (staleRef.current) { staleRef.current = false; onSaved?.(); }
+    } catch {
+      setSaveState('error');
+      setSaveError("Couldn't reach the server. Your edits are kept here and will save when you're back online.");
+    } finally {
+      saving$.current = false;
+    }
+  };
+  const autosaveRef = useRef(autosave);
+  autosaveRef.current = autosave;
+  const pagesRef = useRef(pages);
+  pagesRef.current = pages;
+  useEffect(() => {
+    if (!data || !dirty || conflict) return;
+    const t = setTimeout(() => void autosaveRef.current(), 1200);
+    return () => clearTimeout(t);
+  }, [pages, dirty, conflict, data, saveState]);
+
+  // live preview: render the unsaved layout ~0.35s after you pause typing
+  const liveSent = useRef('');
+  const [liveNonce, setLiveNonce] = useState(0);
+  useEffect(() => {
+    const onMsg = (e: MessageEvent) => {
+      if (e.origin !== location.origin) return;
+      if (e.data?.type === 'acms-sections-ready') { liveSent.current = ''; setLiveNonce((n) => n + 1); }
+      if (e.data?.type === 'acms-preview-stale') staleRef.current = true;
+    };
+    addEventListener('message', onMsg);
+    return () => removeEventListener('message', onMsg);
+  }, []);
+  useEffect(() => {
+    if (!onLiveHtml || !pageId) return;
+    const layout = pages[pageId];
+    if (!layout || layout.mode !== 'sections') return;
+    const key = JSON.stringify([pageId, activeTheme, layout, lang]);
+    if (key === liveSent.current) return;
+    const ctrl = new AbortController();
+    const t = setTimeout(async () => {
+      try {
+        const res = await fetch('/admin/section-preview', { method: 'POST', signal: ctrl.signal, headers: { 'content-type': 'application/json' }, body: JSON.stringify({ pageId, layout, theme: activeTheme, locale: lang || undefined }) });
+        if (!res.ok) return;
+        const html = await res.text();
+        liveSent.current = key;
+        onLiveHtml(html);
+      } catch { /* aborted or offline: the next edit tries again */ }
+    }, 350);
+    return () => { clearTimeout(t); ctrl.abort(); };
+  }, [pages, pageId, activeTheme, onLiveHtml, liveNonce, lang]);
+
+  // machine drafts for translations: fills values, marks them "AI draft"
+  const draftUnits = async (targetLang: string, items: { sectionId: string; unit: Unit }[], quiet = false) => {
+    if (!items.length) return 0;
+    const keyOf = (x: { sectionId: string; unit: Unit }) => `${x.sectionId}::${x.unit.path}`;
+    setBusyPaths((b) => new Set([...b, ...items.map(keyOf)]));
+    setTrError('');
+    try {
+      const results = await requestDrafts(targetLang, items.map((x) => ({ id: keyOf(x), unit: x.unit })));
+      let applied = 0;
+      edit((all) => {
+        const next = { ...all };
+        for (const [pid, layout] of Object.entries(all)) {
+          const sections = layout.sections.map((sec) => {
+            let out = sec;
+            for (const x of items) if (x.sectionId === sec.id && results[keyOf(x)] !== undefined) {
+              const cur = out.translations?.[targetLang];
+              // never overwrite something a person reviewed meanwhile
+              if (cur?.meta?.[x.unit.path]?.state === 'reviewed' && cur.meta[x.unit.path].src === x.unit.hash) continue;
+              out = withTranslation(out, targetLang, x.unit, results[keyOf(x)], 'ai') as SectionInstance;
+              applied++;
+            }
+            return out;
+          });
+          next[pid] = { ...layout, sections };
+        }
+        return next;
+      });
+      return applied;
+    } catch (e) {
+      if (!quiet) setTrError(e instanceof Error ? e.message : 'Translation failed.');
+      return 0;
+    } finally {
+      setBusyPaths((b) => { const n = new Set(b); for (const x of items) n.delete(keyOf(x)); return n; });
+    }
+  };
+  // auto-draft: when English changes in sections you edited this session,
+  // the other languages redraft (missing, or outdated AI drafts) a few seconds later
+  const i18nInfo = data?.targets?.i18n;
+  const drafting = useRef(false);
+  useEffect(() => {
+    if (lang || !i18nInfo?.drafts || !i18nInfo.locales.length || !data) return;
+    const t = setTimeout(async () => {
+      if (drafting.current) return;
+      const defsNow = (data.themes.find((th) => th.slug === activeTheme) ?? data.themes[0])?.sections ?? {};
+      const work: { l: string; items: { sectionId: string; unit: Unit }[] }[] = [];
+      for (const { code } of i18nInfo.locales) {
+        const items: { sectionId: string; unit: Unit }[] = [];
+        for (const [pid, layout] of Object.entries(pagesRef.current)) {
+          for (const sec of layout.sections) {
+            const before = loadedPages.current[pid]?.sections.find((x) => x.id === sec.id);
+            if (before && JSON.stringify(before.data) === JSON.stringify(sec.data)) continue; // untouched this session
+            const def = defsNow[sec.type];
+            if (!def || sec.locked && !isOwnerRef.current) continue;
+            for (const unit of unitsToDraft(def, sec, code)) items.push({ sectionId: sec.id, unit });
+          }
+        }
+        if (items.length) work.push({ l: code, items: items.slice(0, 120) });
+      }
+      if (!work.length) return;
+      drafting.current = true;
+      try { for (const w of work) await draftUnits(w.l, w.items, true); } finally { drafting.current = false; }
+    }, 4000);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pages, lang, i18nInfo?.drafts]);
+
+  // ⌘Z / ⌘⇧Z (Ctrl+Y) while editing sections; rich text keeps its own undo
+  const rootRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || !rootRef.current || rootRef.current.offsetParent === null) return;
+      const t = e.target as HTMLElement | null;
+      if (t?.isContentEditable) return;
+      if (t && t !== document.body && !rootRef.current.contains(t)) return;
+      const k = e.key.toLowerCase();
+      if (k === 'z' && !e.shiftKey) { e.preventDefault(); undo(); }
+      else if ((k === 'z' && e.shiftKey) || k === 'y') { e.preventDefault(); redo(); }
+    };
+    addEventListener('keydown', onKey);
+    return () => removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+
   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('|')]);
+  const coded = new Set(theme?.coded ?? []);
+  const migratable = new Set(theme?.migratable ?? []);
+  const presets = Object.entries(theme?.presets ?? {});
+  const targets = data?.targets ?? EMPTY_TARGETS;
+  const i18n = targets.i18n ?? EMPTY_TARGETS.i18n!;
+  // editors change content only; owners arrange layouts and can lock sections
+  const isOwner = (data as { role?: string } | null)?.role !== 'editor';
+  isOwnerRef.current = isOwner;
 
   if (loading && !data) return <p className="te-muted">Loading page layouts…</p>;
   if (!data) {
@@ -153,36 +451,76 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
 
   const page = data.pages.find((p) => p.id === pageId) ?? data.pages[0];
   const layout: PageLayout | undefined = pages[page.id];
+  const liveLayout = (data.live.sectionPages ?? {})[page.id] as PageLayout | undefined;
 
   const setLayout = (fn: (l: PageLayout) => PageLayout) =>
-    setPages((all) => ({ ...all, [page.id]: fn(all[page.id] ?? { mode: 'sections', sections: [] }) }));
+    edit((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),
+  const instanceFor = (type: string, variant?: string, data?: Record<string, SectionValue>, hidden = false): SectionInstance => {
+    const def = defs[type];
+    return {
+      id: newId(type),
+      type,
+      version: def?.version ?? 1,
+      variant: variant && def?.variants?.includes(variant) ? variant : def?.variants?.[0] ?? 'default',
+      hidden,
+      data: { ...defaultsFor(def ?? {}), ...(data ?? {}) },
     };
+  };
+  const addSection = (choice: PickerChoice) => {
+    if (!defs[choice.type]) return;
+    const s = instanceFor(choice.type, choice.variant, choice.data ? structuredClone(choice.data) as Record<string, SectionValue> : undefined);
     setLayout((l) => ({ ...l, mode: 'sections', sections: [...l.sections, s] }));
     setOpenId(s.id);
   };
+  // copy / paste sections (also across tabs, via localStorage)
+  const copySection = (s: SectionInstance) => {
+    const json = JSON.stringify({ acmsSection: 1, section: s });
+    try { localStorage.setItem(CLIP_KEY, json); } catch { /* private mode */ }
+    void navigator.clipboard?.writeText(json).catch(() => {});
+    setClip(s);
+    setFlash(`Copied “${sectionName(defs[s.type], s.type)}”. Paste it on any page.`);
+    setTimeout(() => setFlash(''), 2600);
+  };
+  const pasteSection = () => {
+    if (!clip || !defs[clip.type]) return;
+    const s = { ...structuredClone(clip), id: newId(clip.type), locked: undefined };
+    setLayout((l) => ({ ...l, mode: 'sections', sections: [...l.sections, s] }));
+    setOpenId(s.id);
+  };
+  const copyToPage = (s: SectionInstance, targetId: string) => {
+    const target = data.pages.find((p) => p.id === targetId);
+    if (!target) return;
+    const copy = { ...structuredClone(s), id: newId(s.type) };
+    edit((all) => ({ ...all, [targetId]: { ...(all[targetId] ?? { mode: 'sections', sections: [] }), sections: [...(all[targetId]?.sections ?? []), copy] } }));
+    setFlash(`Copied to ${target.title || target.slug}. It saves with your draft.`);
+    setTimeout(() => setFlash(''), 2600);
+  };
+  const applyPreset = (key: string) => {
+    const preset = theme?.presets?.[key];
+    if (!preset) return;
+    if (layout?.sections.length && !window.confirm(`Replace the ${layout.sections.length} sections on ${page.title} with “${preset.name}”? This happens when you save the section draft.`)) return;
+    setLayout(() => ({ mode: 'sections', sections: preset.sections.map((p) => instanceFor(p.type, p.variant, structuredClone(p.data), p.hidden)) }));
+    setOpenId(null);
+  };
   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;
+      return arrayMove(list, i, j);
+    });
+  const onDragEnd = (e: DragEndEvent) => {
+    if (!e.over || e.active.id === e.over.id) return;
+    setSections((list) => {
+      const from = list.findIndex((s) => s.id === e.active.id);
+      const to = list.findIndex((s) => s.id === e.over!.id);
+      return from < 0 || to < 0 ? list : arrayMove(list, from, to);
     });
+  };
   const duplicate = (i: number) =>
     setSections((list) => {
       const copy = { ...structuredClone(list[i]), id: newId(list[i].type) };
@@ -199,43 +537,115 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
       return { ...s, data: d };
     });
 
-  const save = async () => {
+  const finish = async (message: string) => {
+    setFlash(message);
+    setTimeout(() => setFlash(''), 2600);
+    await reload();
+    onSaved?.();
+  };
+  /** save now (the Save button, and before publishing/upgrading) */
+  const flush = async (): Promise<boolean> => {
+    if (!dirty) return true;
+    await autosaveRef.current();
+    return JSON.stringify(pagesRef.current) === JSON.stringify(baseRef.current);
+  };
+  if (flushRef) flushRef.current = flush;
+  const publishSection = async (s: SectionInstance) => {
+    const name = sectionName(defs[s.type], s.type);
+    const warns = checkLayouts({ [page.id]: { mode: 'sections', sections: [s] } }, defs as never, targets, { pageId: page.id, sectionId: s.id });
+    const note = warns.length ? `\n\nWorth a look first:\n${warns.slice(0, 5).map((w) => `• ${w.message}`).join('\n')}` : '';
+    if (!window.confirm(`Publish your changes to “${name}” now? Visitors see them right away. Everything else stays in the draft.${note}`)) return;
     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
+      if (!(await flush())) return;
+      if (await post({ operation: 'publishSection', revision: revRef.current, pageId: page.id, sectionId: s.id })) await finish(`“${name}” is live.`);
+      else await reload();
     } catch {
       setSaveError("Couldn't reach the server. Your edits are still here.");
     } finally {
       setSaving(false);
     }
   };
+  const upgrade = async () => {
+    setSaving(true);
+    setSaveError('');
+    try {
+      if (!(await flush())) return;
+      if (await post({ operation: 'migrate', revision: revRef.current })) await finish('Sections upgraded to the theme’s current version. Review and publish.');
+    } 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));
+
+  // ---- translation helpers (page level) ----
+  const mainLangName = i18n.defaultLocale ? ({ en: 'English', es: 'Español', fr: 'Français', pt: 'Português' } as Record<string, string>)[i18n.defaultLocale.split('-')[0]] ?? i18n.defaultLocale.toUpperCase() : 'English';
+  const pageSummary = (code: string) => {
+    const total = { missing: 0, ai: 0, reviewed: 0, outdated: 0 };
+    for (const x of layout?.mode === 'sections' ? layout.sections : []) {
+      const d = defs[x.type];
+      if (!d || x.hidden) continue;
+      const sm = sectionSummary(d, x, code);
+      total.missing += sm.missing; total.ai += sm.ai; total.reviewed += sm.reviewed; total.outdated += sm.outdated;
+    }
+    return total;
+  };
+  const draftAllMissing = async () => {
+    if (!lang || !layout) return;
+    const items = layout.sections.flatMap((x) => (defs[x.type] && !x.hidden && !(x.locked && !isOwner) ? unitsToDraft(defs[x.type], x, lang).map((unit) => ({ sectionId: x.id, unit })) : []));
+    await draftUnits(lang, items.slice(0, 200));
+  };
+  const jumpToStatus = (status: 'ai' | 'missing' | 'outdated') => {
+    const hit = layout?.sections.find((x) => defs[x.type] && sectionSummary(defs[x.type], x, lang)[status] > 0);
+    if (hit) setOpenId(hit.id);
+  };
+  // the older setup: a separately authored home page for this language
+  const mergeSource = lang && page.isHome
+    ? (() => {
+        const other = data.pages.find((p) => p.isHome && p.locale === lang && p.id !== page.id);
+        const otherLayout = other ? pages[other.id] : undefined;
+        const alreadyMerged = layout?.sections.some((x) => x.translations?.[lang]);
+        return other && otherLayout?.mode === 'sections' && otherLayout.sections.length && !alreadyMerged ? { ...other, layout: otherLayout } : null;
+      })()
+    : null;
+  const runMerge = () => {
+    if (!mergeSource || !layout) return;
+    const plan = planMerge(defs as never, layout.sections as never, mergeSource.layout.sections as never, lang);
+    if (!window.confirm(`Copy ${plan.copied} ${plan.copied === 1 ? 'text' : 'texts'} from “${mergeSource.title}” into this page's ${i18n.locales.find((l) => l.code === lang)?.name ?? lang} version?${plan.unmatched ? ` ${plan.unmatched} ${plan.unmatched === 1 ? 'section has' : 'sections have'} no match there; translate ${plan.unmatched === 1 ? 'it' : 'them'} with AI afterwards.` : ''}\n\nThe separate page isn't deleted; once this page has translations, /${lang} shows this one.`)) return;
+    setLayout((l) => ({ ...l, sections: plan.sections as SectionInstance[] }));
   };
 
+  const allIssues = (layout?.mode === 'sections' ? layout.sections : []).map((x) => {
+    const d = defs[x.type];
+    return { id: x.id, n: d && !x.hidden ? Object.values(fieldIssues(d, x)).reduce((n, l) => n + l.length, 0) : 0 };
+  });
+  const totalIssues = allIssues.reduce((n, x) => n + x.n, 0);
+  const firstIssueId = allIssues.find((x) => x.n > 0)?.id ?? null;
   const pageDirty = (id: string) => JSON.stringify(pages[id]) !== JSON.stringify(base[id]);
-  const editingSection = imageFor ? layout?.sections.find((s) => s.id === imageFor.sectionId) : undefined;
+  const liveSection = (id: string) => liveLayout?.mode === 'sections' ? liveLayout.sections.find((x) => x.id === id) : undefined;
+  const canPublishAlone = data.scopes.includes('design:publish');
 
   return (
-    <div className="te">
+    <div className="te" ref={rootRef}>
       <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.
+        Build a page from your theme's sections. Sections marked <b>coded</b> come from your theme's code: their look
+        changes in code, their content changes here. Edits save to a private draft as you type; visitors see them after you <b>Publish</b>.
       </p>
+      <details className="te-help-panel">
+        <summary>How editing works</summary>
+        <ul>
+          <li><b>Click anything in the preview</b> to open its section here. The preview updates as you type.</li>
+          <li><b>Your changes save themselves</b> to a draft. Undo with ⌘Z (Ctrl+Z), redo with ⌘⇧Z.</li>
+          <li><b>Publish</b> (top of this screen) makes every change live. <b>Publish this section</b> sends just one section and leaves the rest in the draft.</li>
+          <li><b>Linked</b> sections (like upcoming events) fill themselves from your calendar or posts, so there's nothing to update here.</li>
+          <li>Fields marked in red need fixing before that section can be published.</li>
+          <li>Something look wrong? <b>History</b> (top right) restores any earlier published design as a draft.</li>
+        </ul>
+      </details>
 
       <div className="te-pagebar">
         <label className="field te-pagepick">
@@ -253,15 +663,75 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
         </a>
       </div>
 
-      {!layout ? (
+      {layout?.mode === 'sections' && i18n.locales.length > 0 && (
+        <div className="te-langbar">
+          <div className="seg" role="radiogroup" aria-label="Language">
+            <button type="button" role="radio" aria-checked={!lang} className={!lang ? 'on' : ''} onClick={() => setLang('')}>{mainLangName}</button>
+            {i18n.locales.map((l) => {
+              const need = pageSummary(l.code);
+              return (
+                <button key={l.code} type="button" role="radio" aria-checked={lang === l.code} className={lang === l.code ? 'on' : ''} onClick={() => setLang(l.code)}>
+                  {l.name}{need.missing + need.outdated + need.ai > 0 && <span className="te-lang-count" aria-label={`${need.missing + need.outdated + need.ai} to check`}>{need.missing + need.outdated + need.ai}</span>}
+                </button>
+              );
+            })}
+          </div>
+          {lang ? (() => {
+            const sum = pageSummary(lang);
+            const name = i18n.locales.find((l) => l.code === lang)?.name ?? lang;
+            return (
+              <div className="te-lang-sum">
+                <span>
+                  <b>{sum.reviewed}</b> reviewed · <span className="st-ai"><b>{sum.ai}</b> AI {sum.ai === 1 ? 'draft' : 'drafts'}</span> · <span className="st-old"><b>{sum.outdated}</b> English changed</span> · <span className="st-miss"><b>{sum.missing}</b> not translated</span>
+                </span>
+                <span className="te-lang-actions">
+                  {i18n.drafts && (sum.missing + sum.outdated > 0) && (
+                    <button className="btn sm" type="button" disabled={busyPaths.size > 0} onClick={() => void draftAllMissing()}>{busyPaths.size ? 'Translating…' : `Translate ${sum.missing + sum.outdated} with AI`}</button>
+                  )}
+                  {sum.ai > 0 && <button className="btn sm ghost" type="button" onClick={() => jumpToStatus('ai')}>Review AI drafts</button>}
+                </span>
+                <span className="te-muted te-lang-note">Times, photos, links and linked events are shared with {mainLangName}; only the words change. {name} visitors see AI drafts right away, and {mainLangName} wherever nothing is translated yet.</span>
+                {!i18n.drafts && <span className="te-muted te-lang-note">Turn on AI in Settings → AI &amp; agents and {name} drafts itself whenever the {mainLangName} changes.</span>}
+                {mergeSource && (
+                  <div className="notice te-note te-merge">
+                    <span>You also have a separate {name} home page, “{mergeSource.title}”. Bring its text in here? Matching sections keep your {name} words (marked reviewed); the rest can be drafted with AI. Nothing is deleted.</span>
+                    <button className="btn sm" type="button" onClick={runMerge}>Bring in its text</button>
+                  </div>
+                )}
+              </div>
+            );
+          })() : null}
+          {trError && <p className="flash error te-alert" role="alert">{trError}</p>}
+        </div>
+      )}
+
+      {!layout && !isOwner ? (
+        <div className="te-empty"><p><b>{page.title || page.slug}</b> shows its page content. Edit it in the page editor.</p></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>
+          {presets.length > 0 ? (
+            <>
+              <p className="te-muted">{theme?.name} comes with ready-made layouts. Start from one, then change any text, list or image.</p>
+              <div className="te-presets">
+                {presets.map(([key, p]) => (
+                  <button key={key} type="button" className="te-preset" onClick={() => applyPreset(key)}>
+                    <b>{p.name}</b>
+                    <span>{p.description || `${p.sections.length} sections`}</span>
+                  </button>
+                ))}
+              </div>
+              <p className="te-muted">Or keep your current text and widgets and add sections around them:</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: [instanceFor('page-content')] }))}>Keep content and add sections</button>
         </div>
       ) : (
         <>
-          <div className="te-mode">
+          {!isOwner && <p className="notice te-note">You can change the text, lists and pictures in these sections. Adding, moving or restyling sections is up to an owner.</p>}
+          <div className="te-mode" hidden={!isOwner}>
             <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) => (
@@ -284,98 +754,217 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
             </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>
-                      ) : (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            <SortableContext items={layout.sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+              <ol ref={listRef} 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}`;
+                  const orphans = def ? orphanKeys(def, s.data) : [];
+                  const live = liveSection(s.id);
+                  const savedCopy = (base[page.id]?.sections ?? []).find((x) => x.id === s.id);
+                  const changedFromLive = Boolean(live) && JSON.stringify(live) !== JSON.stringify(s);
+                  const unsaved = JSON.stringify(savedCopy) !== JSON.stringify(s);
+                  const issues = def && !s.hidden ? fieldIssues(def, s) : {};
+                  const issueCount = Object.values(issues).reduce((n, list) => n + list.length, 0);
+                  return (
+                    <SortableSection key={s.id} id={s.id} className={`te-sec ${s.hidden ? 'is-hidden' : ''} ${open ? 'is-open' : ''}`}>
+                      {(handle) => (
                         <>
-                          {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>
+                          <div className="te-sec-head">
+                            {isOwner && !lang ? <button className="te-grip" type="button" aria-label={`Reorder ${name}`} {...handle}>⋮⋮</button> : <span className="te-grip-space" />}
+                            <button
+                              type="button"
+                              className="te-sec-toggle"
+                              aria-expanded={open}
+                              aria-controls={panelId}
+                              onClick={() => setOpenId(open ? null : s.id)}
+                            >
+                              <span className="te-sec-name">{name}</span>
+                              <span className="te-sec-meta">
+                                {s.variant !== 'default' && s.variant}
+                                {s.hidden && ' · hidden'}
+                                {!def && ' · unavailable'}
+                                {unsaved && ' · saving'}
+                                {(s.showFrom || s.showUntil) && ' · scheduled'}
+                              </span>
+                              {issueCount > 0 && <span className="te-issue-mark">{issueCount} to fix</span>}
+                            </button>
+                            {lang && def ? (() => {
+                              const sum = sectionSummary(def, s, lang);
+                              return sum.total === 0 ? <span className="te-mark">shared</span>
+                                : sum.missing ? <span className="te-mark st-miss">{sum.missing} to translate</span>
+                                : sum.outdated ? <span className="te-mark st-old">{sum.outdated} changed</span>
+                                : sum.ai ? <span className="te-mark st-ai">{sum.ai} AI {sum.ai === 1 ? 'draft' : 'drafts'}</span>
+                                : <span className="te-mark is-linked">✓ translated</span>;
+                            })() : def && hasSource(def) ? <span className="te-mark is-linked">linked</span> : coded.has(s.type) ? <span className="te-mark is-coded">coded</span> : null}
+                            {s.locked && <span className="te-mark is-locked" title={isOwner ? 'Editors can’t change this section' : 'Locked by an owner'}>locked</span>}
+                            <div className="te-sec-actions" hidden={!isOwner || Boolean(lang)}>
+                              <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 && lang && def ? (
+                            <div className="te-sec-body" id={panelId}>
+                              <TranslationFields
+                                def={def}
+                                section={s}
+                                lang={lang}
+                                langName={i18n.locales.find((l) => l.code === lang)?.name ?? lang}
+                                readOnly={Boolean(s.locked && !isOwner)}
+                                busyPaths={busyPaths}
+                                onSet={(u, v) => patchSection(s.id, (x) => withTranslation(x, lang, u, v, 'reviewed') as SectionInstance)}
+                                onConfirm={(u) => patchSection(s.id, (x) => confirmTranslation(x, lang, u) as SectionInstance)}
+                                onDraft={i18n.drafts ? (units) => void draftUnits(lang, units.map((unit) => ({ sectionId: s.id, unit }))) : null}
+                              />
+                            </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 && (
+                                    <div className="notice warn te-note">
+                                      <span>Saved with version {s.version} of this section; the theme ships version {def.version}.{migratable.has(s.type) ? ' The theme can upgrade it.' : ' The theme has no upgrade for it, so it stays hidden until a developer adds one.'}</span>
+                                      {migratable.has(s.type) && <button className="btn sm" type="button" onClick={() => void upgrade()} disabled={saving}>Upgrade sections</button>}
+                                    </div>
+                                  )}
+                                  {def.description && <p className="te-muted te-desc">{def.description}</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>}
+                                  {s.locked && !isOwner && <p className="notice te-note">An owner locked this section, so it can’t be changed here.</p>}
+                                  {(def.variants?.length ?? 0) > 1 && isOwner && (
+                                    <div className="field te-variants">
+                                      <span>Style</span>
+                                      <div className="seg" role="radiogroup" aria-label="Style">
+                                        {!def.variants!.includes(s.variant) && <button type="button" role="radio" aria-checked className="on">{s.variant} (not in this theme)</button>}
+                                        {def.variants!.map((v) => (
+                                          <button key={v} type="button" role="radio" aria-checked={s.variant === v} className={s.variant === v ? 'on' : ''} onClick={() => patchSection(s.id, (x) => ({ ...x, variant: v }))}>
+                                            {v.replace(/-/g, ' ')}
+                                          </button>
+                                        ))}
+                                      </div>
+                                    </div>
+                                  )}
+                                  {Object.entries(def.fields ?? {}).filter(([, f]) => fieldVisible(f, normalizeData(def, s.data))).map(([key, f]) => (
+                                    <fieldset key={key} disabled={!isOwner && (s.locked || Boolean((f as { locked?: boolean }).locked))} className={`te-field ${issues[key]?.length ? 'has-issue' : ''} ${!isOwner && (f as { locked?: boolean }).locked ? 'is-locked' : ''}`}>
+                                      {!isOwner && (f as { locked?: boolean }).locked && !s.locked && <small className="te-lock-note">Locked by an owner</small>}
+                                      {(isOwner || !(s.locked || (f as { locked?: boolean }).locked)) && JSON.stringify(normalizeValue(f, s.data[key])) !== JSON.stringify(defaultValue(f)) && f.type !== 'list' && f.type !== 'source' && (
+                                        <button type="button" className="te-reset" onClick={() => setField(s.id, key, defaultValue(f) as SectionValue)} title="Back to the theme’s default">Reset</button>
+                                      )}
+                                      <FieldInput
+                                        id={`${panelId}-${key}`}
+                                        field={f}
+                                        value={normalizeValue(f, s.data[key])}
+                                        onChange={(v) => setField(s.id, key, v)}
+                                        targets={targets}
+                                        pickImage={(apply) => setImageApply(() => apply)}
+                                        context={sectionContext(def, s, key)}
+                                        focal={f.type === 'image' ? String(s.data[`${key}__focus`] ?? '') : undefined}
+                                        onFocal={f.type === 'image' ? (v) => setField(s.id, `${key}__focus`, v) : undefined}
+                                      />
+                                      {issues[key]?.map((m) => <small key={m} className="te-error" role="alert">{m}</small>)}
+                                    </fieldset>
+                                  ))}
+                                  {orphans.length > 0 && isOwner && (
+                                    <div className="notice te-note te-orphans">
+                                      <span>{orphans.length} saved {orphans.length === 1 ? 'value' : 'values'} ({orphans.join(', ')}) no longer {orphans.length === 1 ? 'has' : 'have'} a field in this section. Kept in case the theme brings {orphans.length === 1 ? 'it' : 'them'} back.</span>
+                                      <button className="btn sm ghost" type="button" onClick={() => patchSection(s.id, (x) => {
+                                        const d = { ...x.data };
+                                        for (const k of orphans) delete d[k];
+                                        return { ...x, data: d };
+                                      })}>Remove</button>
+                                    </div>
+                                  )}
+                                </>
+                              )}
+                              {(schedFor === s.id || s.showFrom || s.showUntil) && (
+                                <div className="te-schedule">
+                                  <span className="te-schedule-title">Show on the site</span>
+                                  <label>From <input type="datetime-local" value={toLocalInput(s.showFrom)} onChange={(e) => patchSection(s.id, (x) => ({ ...x, showFrom: fromLocalInput(e.target.value) }))} /></label>
+                                  <label>Until <input type="datetime-local" value={toLocalInput(s.showUntil)} onChange={(e) => patchSection(s.id, (x) => ({ ...x, showUntil: fromLocalInput(e.target.value) }))} /></label>
+                                  <span className="te-muted te-schedule-state">{scheduleText(s)}</span>
+                                  {(s.showFrom || s.showUntil) && <button className="btn sm ghost" type="button" onClick={() => { patchSection(s.id, (x) => ({ ...x, showFrom: undefined, showUntil: undefined })); setSchedFor(null); }}>Always show</button>}
+                                </div>
+                              )}
+                              <div className="te-sec-foot">
+                                {isOwner && <>
+                                <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>
+                                {!s.showFrom && !s.showUntil && schedFor !== s.id && <button className="btn sm" type="button" onClick={() => setSchedFor(s.id)}>Schedule…</button>}
+                                <details className="te-more">
+                                  <summary className="btn sm">More</summary>
+                                  <div className="te-more-menu">
+                                    <button type="button" onClick={() => duplicate(i)}>Duplicate</button>
+                                    <button type="button" onClick={() => copySection(s)}>Copy section</button>
+                                    {data.pages.length > 1 && (
+                                      <label>Copy to page
+                                        <select value="" onChange={(e) => { if (e.target.value) copyToPage(s, e.target.value); }}>
+                                          <option value="">Choose…</option>
+                                          {data.pages.filter((p) => p.id !== page.id).map((p) => <option key={p.id} value={p.id}>{p.title || p.slug}</option>)}
+                                        </select>
+                                      </label>
+                                    )}
+                                    {def && Object.keys(def.fields ?? {}).length > 0 && <button type="button" onClick={() => { if (window.confirm(`Reset every field in “${name}” to its default?`)) patchSection(s.id, (x) => ({ ...x, data: defaultsFor(def) })); }}>Reset all fields</button>}
+                                    <button type="button" onClick={() => patchSection(s.id, (x) => ({ ...x, locked: x.locked ? undefined : true }))}>{s.locked ? 'Unlock for editors' : 'Lock for editors'}</button>
+                                  </div>
+                                </details>
+                                <button className="btn sm ghost danger te-delete" type="button" onClick={() => remove(s)}>Delete section</button>
+                                </>}
+                                {canPublishAlone && changedFromLive && layout.mode === 'sections' && liveLayout?.mode === 'sections' && (
+                                  <button className="btn sm primary te-publish-one" type="button" onClick={() => void publishSection(s)} disabled={saving || conflict || issueCount > 0} title={issueCount ? 'Fix the fields marked below first' : undefined}>
+                                    {unsaved ? 'Save & publish this section' : 'Publish this section'}
+                                  </button>
+                                )}
+                              </div>
+                            </div>
                           )}
-                          {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>
+                    </SortableSection>
+                  );
+                })}
+              </ol>
+            </SortableContext>
+          </DndContext>
+
+          <div className="te-add" hidden={!isOwner || Boolean(lang)}>
+            <button className="btn" type="button" onClick={() => setPickerOpen(true)} disabled={defTypes.length === 0}>+ Add section</button>
+            {clip && defs[clip.type] && <button className="btn ghost" type="button" onClick={pasteSection}>Paste “{sectionName(defs[clip.type], clip.type)}”</button>}
           </div>
+          <SectionPicker
+            open={pickerOpen}
+            defs={defs}
+            coded={coded}
+            counts={Object.fromEntries(defTypes.map((t) => [t, layout.sections.filter((x) => x.type === t).length]))}
+            theme={theme?.slug ?? activeTheme}
+            onClose={() => setPickerOpen(false)}
+            onPick={addSection}
+          />
+          {presets.length > 0 && (
+            <details className="te-preset-more" hidden={!isOwner}>
+              <summary>Start over from a {theme?.name} layout</summary>
+              <div className="te-presets">
+                {presets.map(([key, p]) => (
+                  <button key={key} type="button" className="te-preset" onClick={() => applyPreset(key)}>
+                    <b>{p.name}</b>
+                    <span>{p.description || `${p.sections.length} sections`}</span>
+                  </button>
+                ))}
+              </div>
+            </details>
+          )}
         </>
       )}
 
@@ -388,97 +977,36 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled
       {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 className={`te-savestate ${saveState === 'error' ? 'is-dirty' : ''}`} aria-live="polite">
+          {flash || (saveState === 'error' ? 'Not saved yet' : dirty || saveState === 'saving' ? 'Saving draft…' : saveState === 'saved' ? 'Draft saved · publish when ready' : 'All changes saved')}
+          {totalIssues > 0 && <> · <button type="button" className="te-issue-link" onClick={() => setOpenId(firstIssueId)}>{totalIssues} {totalIssues === 1 ? 'field needs' : 'fields need'} fixing before publishing</button></>}
         </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>
+        <button className="btn sm ghost" type="button" onClick={undo} disabled={!past.current.length} title="Undo (⌘Z)">Undo</button>
+        <button className="btn sm ghost" type="button" onClick={redo} disabled={!future.current.length} title="Redo (⌘⇧Z)">Redo</button>
+        {saveState === 'error' && <button className="btn sm" type="button" onClick={() => void autosaveRef.current()} disabled={conflict}>Try saving again</button>}
       </div>
 
       <ImagePicker
-        open={Boolean(imageFor && editingSection)}
+        open={imageApply !== null}
         unsplashEnabled={unsplashEnabled}
-        onClose={() => setImageFor(null)}
+        onClose={() => setImageApply(null)}
         onSelect={(img) => {
-          if (imageFor) setField(imageFor.sectionId, imageFor.key, img.src);
-          setImageFor(null);
+          imageApply?.(img.src);
+          setImageApply(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>
-      );
-  }
+type DragHandle = Record<string, unknown>;
+function SortableSection({ id, className, children }: { id: string; className: string; children: (handle: DragHandle) => ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  return (
+    <li ref={setNodeRef} data-sec={id} className={`${className} ${isDragging ? 'is-dragging' : ''}`} style={{ transform: DndCSS.Transform.toString(transform), transition }}>
+      {children({ ...attributes, ...listeners })}
+    </li>
+  );
 }
 
 /** Review tab: which pages the staged draft re-lays out, vs the live site */