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

package/src/actions/index.ts

@@ -7,7 +7,7 @@ import type { ActionAPIContext } from 'astro:actions';
 import { getRepo } from '../lib/repo';
 import { getMediaStore } from '../lib/media/store';
 import { validateSession, SESSION_COOKIE } from '../lib/auth';
-import { LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
+import { DocTranslations, LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
 import { env } from '../lib/env';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { invalidateRedirectCache } from '../middleware';
@@ -30,6 +30,7 @@ import { diffDesign, revertDesignChange, summarizeChanges } from '../lib/designD
 import { shareEpoch } from '../lib/drafts';
 import { createDesignToken } from '../lib/preview';
 import { getTheme } from '../lib/theme';
+import { savePost, applyPostUpdate, savePage, applyPageUpdate, saveEvent, applyEventUpdate, type SaveHooks } from '../lib/content-service';
 
 // "What changes" for the Design screen: the staged draft vs the live design
 async function designChanges(repo: Awaited<ReturnType<typeof getRepo>>) {
@@ -65,79 +66,16 @@ const BlockInput = z.object({
 
 // ---- calendar helpers ------------------------------------------------------
 
-type EventSaveInput = Partial<Omit<CalEvent, 'id' | 'draft' | 'startAt' | 'endAt' | 'createdAt' | 'updatedAt' | 'sourceUid' | 'publishedAt'>>;
-
-// Validate + normalize an event save. Times are checked as a PAIR against the
-// merged (staged) state so a half-edited range can't slip through.
-async function cleanEventInput(repo: Awaited<ReturnType<typeof getRepo>>, data: EventSaveInput, before: CalEvent): Promise<EventSaveInput> {
-  const out: EventSaveInput = { ...data };
-  if (out.slug !== undefined) {
-    const base = slugify(out.slug || out.title || before.title);
-    let slug = base;
-    for (let n = 2; ; n++) {
-      const clash = await repo.getEventBySlug(slug);
-      if (!clash || clash.id === before.id) break;
-      slug = `${base}-${n}`;
-    }
-    out.slug = slug;
-  }
-  if (out.timezone !== undefined && out.timezone !== '' && !isValidTimeZone(out.timezone)) {
-    throw new ActionError({ code: 'BAD_REQUEST', message: `“${out.timezone}” isn’t a timezone we recognize.` });
-  }
-  if (out.start !== undefined || out.end !== undefined || out.allDay !== undefined) {
-    const merged = before.draft ? { ...before, ...(before.draft as Partial<CalEvent>) } : before;
-    try {
-      const t = normalizeEventTimes({ start: out.start ?? merged.start, end: out.end ?? merged.end, allDay: out.allDay ?? merged.allDay });
-      out.start = t.start;
-      out.end = t.end;
-    } catch (err) {
-      throw new ActionError({ code: 'BAD_REQUEST', message: err instanceof Error ? err.message : 'Invalid time.' });
-    }
-  }
-  if (out.calendarIds !== undefined) {
-    const known = new Set((await repo.listCalendars()).filter((c) => c.kind === 'native').map((c) => c.id));
-    out.calendarIds = [...new Set(out.calendarIds.filter((c) => known.has(c)))];
-  }
-  if (out.fields !== undefined) {
-    const allowed = new Map(CALENDAR.eventFields.map((f) => [f.key, f]));
-    out.fields = Object.fromEntries(
-      Object.entries(out.fields)
-        .filter(([k, v]) => allowed.has(k) && v !== '')
-        .filter(([k, v]) => allowed.get(k)!.type !== 'select' || allowed.get(k)!.options.includes(v))
-    );
-  }
-  if (out.cta !== undefined) {
-    const href = out.cta.href.trim();
-    if (href && !/^(https?:\/\/|\/(?!\/)|mailto:|tel:|#)/i.test(href)) {
-      throw new ActionError({ code: 'BAD_REQUEST', message: 'The button link must start with https://, /, mailto:, or tel:.' });
-    }
-    out.cta = { ...out.cta, href };
-  }
-  if (out.location?.url) {
-    if (!/^https?:\/\//i.test(out.location.url.trim())) {
-      throw new ActionError({ code: 'BAD_REQUEST', message: 'The map or meeting link must start with https://.' });
-    }
+// Save/Update logic is shared with the editor-app API (lib/content-service).
+// Its ApiErrors become ActionErrors with the same message.
+function asActionError(error: unknown): never {
+  if (error instanceof ApiError) {
+    const code = error.status === 404 ? 'NOT_FOUND' : error.status === 403 ? 'FORBIDDEN' : error.status === 409 ? 'CONFLICT' : error.status === 401 ? 'UNAUTHORIZED' : 'BAD_REQUEST';
+    throw new ActionError({ code, message: error.message });
   }
-  if (out.tags !== undefined) out.tags = [...new Set(out.tags.map((t) => t.trim()).filter(Boolean))];
-  if (out.status === 'scheduled' && !(out.scheduledAt && out.scheduledAt > Date.now())) {
-    throw new ActionError({ code: 'BAD_REQUEST', message: 'Pick a future publish time to schedule.' });
-  }
-  if (out.status === 'published') out.scheduledAt = null;
-  return out;
-}
-
-async function eventSideEffects(
-  repo: Awaited<ReturnType<typeof getRepo>>,
-  ctx: ActionAPIContext,
-  before: CalEvent,
-  after: CalEvent,
-  applied = false
-) {
-  const settings = await repo.getSettings();
-  await eventChanged(repo, before, after, {
-    origin: siteOrigin(settings, ctx.url), waitUntil: waitUntilFrom(ctx.locals), applied, onRedirect: invalidateRedirectCache,
-  });
+  throw error;
 }
+const hooksFor = (ctx: ActionAPIContext): SaveHooks => ({ url: ctx.url, locals: ctx.locals, onRedirect: invalidateRedirectCache });
 
 async function importEvents(
   repo: Awaited<ReturnType<typeof getRepo>>,
@@ -178,6 +116,7 @@ export const server = {
         coverAlt: z.string().optional(),
         seoTitle: z.string().optional(),
         seoDesc: z.string().optional(),
+        translations: DocTranslations.optional(),
         status: StatusInput.optional(),
         featured: z.boolean().optional(),
         authorId: z.string().nullable().optional(),
@@ -189,38 +128,7 @@ export const server = {
       handler: async ({ id, ...data }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        if (data.slug !== undefined) data.slug = slugify(data.slug);
-        if (data.collection !== undefined && !CONTENT.collections[data.collection]) {
-          throw new ActionError({ code: 'BAD_REQUEST', message: `Unknown collection "${data.collection}".` });
-        }
-        const before = await repo.getPost(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
-        // A live (published/scheduled) post never takes content edits
-        // directly: they stage into the pending draft until the user hits
-        // Update. Status transitions stay deliberate, immediate writes.
-        const transitions = data.status !== undefined && data.status !== before.status;
-        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
-          const { status: _status, scheduledAt: _scheduledAt, authorId: _authorId, ...staged } = data;
-          await repo.savePostDraft(id, staged);
-          return { post: (await repo.getPost(id))! };
-        }
-        await repo.updatePost(id, data);
-        // any new tag names become registry entries with slugs for archives
-        if (data.tags !== undefined) await repo.ensureTags(data.tags);
-        const post = await repo.getPost(id);
-        if (!post) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
-        // a published post whose slug or collection changed leaves a 301
-        // behind so old links keep working
-        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
-          await repo
-            .createRedirect({
-              fromPath: collectionUrl(before.collection, before.slug),
-              toPath: collectionUrl(post.collection, post.slug),
-            })
-            .catch(() => {});
-          invalidateRedirectCache();
-        }
-        return { post };
+        try { return { post: await savePost(repo, id, data, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     // Update button: copy the pending draft onto the live columns. The
@@ -231,21 +139,7 @@ export const server = {
       handler: async ({ id }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        const before = await repo.getPost(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
-        await repo.applyPostDraft(id);
-        const post = (await repo.getPost(id))!;
-        if (post.tags.length) await repo.ensureTags(post.tags);
-        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
-          await repo
-            .createRedirect({
-              fromPath: collectionUrl(before.collection, before.slug),
-              toPath: collectionUrl(post.collection, post.slug),
-            })
-            .catch(() => {});
-          invalidateRedirectCache();
-        }
-        return { post };
+        try { return { post: await applyPostUpdate(repo, id, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     discardChanges: defineAction({
@@ -281,6 +175,7 @@ export const server = {
         locale: z.string().optional(),
         seoTitle: z.string().optional(),
         seoDesc: z.string().optional(),
+        translations: DocTranslations.optional(),
         template: z.string().optional(),
         bodyJson: z.string().optional(),
         bodyHtml: z.string().optional(),
@@ -289,33 +184,13 @@ export const server = {
       handler: async ({ id, blocks, ...data }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        if (data.slug !== undefined) data.slug = slugify(data.slug);
-        // default locale stores as '', unknown codes fall back to it
-        if (data.locale !== undefined) data.locale = normalizePageLocale(data.locale);
-        const before = await repo.getPage(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
         const cleanBlocks =
           blocks === undefined
             ? undefined
             : blocks
                 .filter((b) => widgetTypes.includes(b.type as WidgetType))
                 .map((b) => ({ ...b, type: b.type as WidgetType, config: parseConfig(b.type as WidgetType, b.config) as Record<string, unknown> }));
-        // live pages stage their edits until Update, same as posts
-        const transitions = data.status !== undefined && data.status !== before.status;
-        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
-          const { status: _status, ...staged } = data;
-          await repo.savePageDraft(id, { ...staged, blocks: cleanBlocks });
-          return { page: (await repo.getPage(id))! };
-        }
-        await repo.updatePage(id, { ...data, blocks: cleanBlocks });
-        const page = await repo.getPage(id);
-        if (!page) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
-        // renaming a published slug leaves a 301 behind so old links keep working
-        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
-          await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
-          invalidateRedirectCache();
-        }
-        return { page };
+        try { return { page: await savePage(repo, id, data, cleanBlocks, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     applyUpdate: defineAction({
@@ -323,15 +198,7 @@ export const server = {
       handler: async ({ id }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        const before = await repo.getPage(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
-        await repo.applyPageDraft(id);
-        const page = (await repo.getPage(id))!;
-        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
-          await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
-          invalidateRedirectCache();
-        }
-        return { page };
+        try { return { page: await applyPageUpdate(repo, id, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     discardChanges: defineAction({
@@ -946,6 +813,7 @@ export const server = {
         coverAlt: z.string().optional(),
         seoTitle: z.string().optional(),
         seoDesc: z.string().optional(),
+        translations: DocTranslations.optional(),
         status: StatusInput.optional(),
         featured: z.boolean().optional(),
         template: z.string().optional(),
@@ -966,21 +834,7 @@ export const server = {
       handler: async ({ id, ...data }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        const before = await repo.getEvent(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Event not found.' });
-        const clean = await cleanEventInput(repo, data, before);
-        // live events stage edits until Update, exactly like posts
-        const transitions = clean.status !== undefined && clean.status !== before.status;
-        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
-          const { status: _s, scheduledAt: _sa, ...staged } = clean;
-          await repo.saveEventDraft(id, staged);
-          return { event: (await repo.getEvent(id))! };
-        }
-        await repo.updateEvent(id, clean);
-        if (clean.tags !== undefined) await repo.ensureTags(clean.tags);
-        const event = (await repo.getEvent(id))!;
-        await eventSideEffects(repo, ctx, before, event);
-        return { event };
+        try { return { event: await saveEvent(repo, id, data, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     applyUpdate: defineAction({
@@ -988,13 +842,7 @@ export const server = {
       handler: async ({ id }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        const before = await repo.getEvent(id);
-        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Event not found.' });
-        await repo.applyEventDraft(id);
-        const event = (await repo.getEvent(id))!;
-        if (event.tags.length) await repo.ensureTags(event.tags);
-        await eventSideEffects(repo, ctx, before, event, true);
-        return { event };
+        try { return { event: await applyEventUpdate(repo, id, hooksFor(ctx)) }; } catch (e) { asActionError(e); }
       },
     }),
     discardChanges: defineAction({

package/src/components/AiSettings.tsx

@@ -16,8 +16,8 @@ import { useEffect, useId, useRef, useState } from 'react';
 type Provider = 'openai' | 'custom';
 
 interface PublicSettings {
-  ai: { enabled: boolean; provider: Provider; baseUrl: string; model: string; hasApiKey: boolean };
-  agent: { enabled: boolean; hasKey: boolean; keyPrefix: string; allowPublish: boolean };
+  ai: { enabled: boolean; provider: Provider; baseUrl: string; model: string; hasApiKey: boolean; glossary?: string };
+  agent: { enabled: boolean; hasKey: boolean; keyPrefix: string; allowPublish: boolean; allowSections?: boolean };
   agentUrl: string;
   docsUrl: string;
 }
@@ -58,7 +58,7 @@ const sameUrl = (a: string, b: string) => {
 // only link to same-site paths or http(s) URLs from the server response
 const safeHref = (u: string) => (u.startsWith('/') && !u.startsWith('//')) || /^https?:\/\//i.test(u) ? u : '';
 
-type Busy = 'save' | 'test' | 'generate' | 'revoke' | 'saveAgent';
+type Busy = 'glossary' | 'save' | 'test' | 'generate' | 'revoke' | 'saveAgent';
 
 export default function AiSettings() {
   const uid = useId();
@@ -77,6 +77,9 @@ export default function AiSettings() {
   // agent form
   const [agentEnabled, setAgentEnabled] = useState(false);
   const [allowPublish, setAllowPublish] = useState(false);
+  const [allowSections, setAllowSections] = useState(false);
+  const [glossary, setGlossary] = useState('');
+  const [glossaryMsg, setGlossaryMsg] = useState('');
   const [token, setToken] = useState('');
   const [copied, setCopied] = useState('');
 
@@ -96,15 +99,27 @@ export default function AiSettings() {
       setProvider(s.ai.provider);
       setBaseUrl(s.ai.provider === 'openai' ? OPENAI_URL : s.ai.baseUrl);
       setModel(s.ai.model);
+      setGlossary(s.ai.glossary ?? '');
       setApiKey('');
       setClearApiKey(false);
     }
     if (part !== 'ai') {
       setAgentEnabled(s.agent.enabled);
       setAllowPublish(s.agent.allowPublish);
+      setAllowSections(Boolean(s.agent.allowSections));
     }
   }
 
+  async function saveGlossary() {
+    setBusy('glossary');
+    setGlossaryMsg('');
+    try {
+      adopt(await api<PublicSettings>('/api/ai/settings', { action: 'saveGlossary', glossary }), 'ai');
+      setGlossaryMsg('Saved. New AI translations follow it.');
+    } catch (e) { setGlossaryMsg(e instanceof Error ? e.message : 'Couldn’t save.'); }
+    finally { setBusy(null); }
+  }
+
   async function load() {
     setLoadError('');
     try {
@@ -150,7 +165,7 @@ export default function AiSettings() {
   const keyWillDrop = data.ai.hasApiKey && destinationChanged && !apiKey.trim() && !clearApiKey;
   const formDirty =
     enabled !== data.ai.enabled || destinationChanged || model.trim() !== data.ai.model || !!apiKey || clearApiKey;
-  const agentDirty = agentEnabled !== data.agent.enabled || allowPublish !== data.agent.allowPublish;
+  const agentDirty = agentEnabled !== data.agent.enabled || allowPublish !== data.agent.allowPublish || allowSections !== Boolean(data.agent.allowSections);
   const isCustom = provider !== 'openai';
 
   async function save() {
@@ -238,7 +253,7 @@ export default function AiSettings() {
     setAgentMsg({ ok: '', err: '' });
     await run('saveAgent', async () => {
       try {
-        adopt(await api<PublicSettings>('/api/ai/settings', { action: 'saveAgent', enabled: agentEnabled, allowPublish }), 'agent');
+        adopt(await api<PublicSettings>('/api/ai/settings', { action: 'saveAgent', enabled: agentEnabled, allowPublish, allowSections }), 'agent');
         setAgentMsg({ ok: 'Agent access saved.', err: '' });
       } catch (e) {
         setAgentMsg({ ok: '', err: errText(e) });
@@ -412,6 +427,26 @@ export default function AiSettings() {
         </div>
       </section>
 
+      {/* ---- translation glossary ---- */}
+      <section className="ais-card" aria-labelledby={id('gl-h')}>
+        <header className="ais-head">
+          <div className="ais-grow">
+            <h2 id={id('gl-h')}>Translation glossary</h2>
+            <p>When AI drafts another language, these words always come out your way. One per line: <code>Youth Night = Noche de Jóvenes</code>, or just a name to keep as is (<code>Riverside</code>).</p>
+          </div>
+        </header>
+        <label className="field" htmlFor={id('gl')}>
+          <span>Terms</span>
+          <textarea id={id('gl')} rows={6} className="mono" value={glossary} onChange={(e) => setGlossary(e.target.value)} placeholder={'Youth Night = Noche de Jóvenes\nSunday Worship = Culto dominical\nRiverside'} />
+        </label>
+        <div className="ais-actions">
+          <button type="button" className="btn primary" disabled={busy !== null || glossary.trim() === (data?.ai.glossary ?? '').trim()} onClick={() => void saveGlossary()}>
+            {busy === 'glossary' ? 'Saving…' : 'Save glossary'}
+          </button>
+          {glossaryMsg && <span className="hint" aria-live="polite">{glossaryMsg}</span>}
+        </div>
+      </section>
+
       {/* ---- agent ---- */}
       <section className="ais-card" aria-labelledby={id('ag-h')}>
         <header className="ais-head">
@@ -427,6 +462,7 @@ export default function AiSettings() {
         <ul className="ais-perms" aria-label="What the agent key can do">
           <li className="yes">Read all posts and pages, including unpublished drafts</li>
           <li className="yes">Create drafts and edit drafts of posts and pages</li>
+          <li className={allowSections ? 'yes' : 'no'}>Page sections — {allowSections ? 'can stage layout and content changes for your review' : 'read only unless you turn it on below'}</li>
           <li className={allowPublish ? 'yes' : 'no'}>Publish — {allowPublish ? 'allowed' : 'off unless you turn it on below'}</li>
           <li className="no">Never delete anything or change settings</li>
         </ul>
@@ -486,6 +522,10 @@ export default function AiSettings() {
             <input type="checkbox" checked={allowPublish} onChange={(e) => setAllowPublish(e.target.checked)} />
             <span>Let the agent publish <span className="hint">(off by default, so drafts wait for you to review)</span></span>
           </label>
+          <label className="check-row">
+            <input type="checkbox" checked={allowSections} onChange={(e) => setAllowSections(e.target.checked)} />
+            <span>Let the agent edit page sections <span className="hint">(homepage layouts and section content; changes stay in the design draft)</span></span>
+          </label>
           <div className="ais-actions">
             <button type="button" className="btn primary" onClick={() => void saveAgent()} disabled={busy !== null || !agentDirty}>
               {busy === 'saveAgent' ? 'Saving…' : 'Save agent access'}

package/src/components/DesignManager.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useCallback, 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 ThemeSectionsEditor, { SectionsReview, useDesignApi, type SectionFocus } from './ThemeSectionsEditor';
+import { checkLayouts, type Check } from './sections/checks';
+import { EMPTY_TARGETS } from './sections/SectionFields';
 import DesignAccess from './DesignAccess';
 import '../styles/theme-editor.css';
 
@@ -145,7 +147,9 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
   const [copied, setCopied] = useState(false);
   const [tick, setTick] = useState(0);
   const [previewPage, setPreviewPage] = useState<'home' | 'post'>('home');
-  const [previewDevice, setPreviewDevice] = useState<DeviceKey>('mobile');
+  // open on the device you're most likely designing for: desktop on a wide
+  // admin window (scaled to fit), phone otherwise; both are one click away
+  const [previewDevice, setPreviewDevice] = useState<DeviceKey>(() => (typeof window !== 'undefined' && window.innerWidth >= 1200 ? 'desktop' : 'mobile'));
   const [previewScheme, setPreviewScheme] = useState<'light' | 'dark'>('light');
   // "What changes" + preview compare / share / history
   const [changes, setChanges] = useState<DesignChange[]>(initialChanges);
@@ -186,16 +190,45 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
   const sectionsStagedRef = useRef(false);
   sectionsStagedRef.current = sectionsStaged;
 
+  // pre-publish checklist (section layouts)
+  const [checks, setChecks] = useState<Check[]>([]);
+  const checksRef = useRef<HTMLDialogElement>(null);
+  const flushSections = useRef<() => Promise<boolean>>(async () => true);
+  // click-to-edit: the preview asks for a section's form; the open form
+  // highlights its section in the preview
+  const [sectionFocus, setSectionFocus] = useState<SectionFocus | null>(null);
+  const openSection = useRef<string | null>(null);
+  const frameEl = useRef<HTMLIFrameElement>(null);
+  // unsaved section edits, rendered by the server: swap them into the preview
+  // (only while it shows the draft; the Live compare stays the live site)
+  const compareRef = useRef<'draft' | 'live'>('draft');
+  compareRef.current = compare;
+  const liveHtml = useCallback((html: string) => {
+    if (compareRef.current !== 'draft') return;
+    try { frameEl.current?.contentWindow?.postMessage({ type: 'acms-section-html', html }, location.origin); } catch { /* frame navigating */ }
+  }, []);
+  const focusPreview = (sectionId: string | null) => {
+    try { frameEl.current?.contentWindow?.postMessage({ type: 'acms-section-focus', sectionId }, location.origin); } catch { /* frame navigating */ }
+  };
+
   // 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);
+      if (e.origin !== location.origin) return;
+      if (e.data?.type === 'acms-preview-nav') {
+        pathRef.current = String(e.data.path || '/');
+        setPreviewPath(pathRef.current);
+      } else if (e.data?.type === 'acms-section-edit') {
+        setTab('pages');
+        setSectionFocus((f) => ({ pageId: String(e.data.pageId), sectionId: String(e.data.sectionId), n: (f?.n ?? 0) + 1 }));
+      } else if (e.data?.type === 'acms-sections-ready' && openSection.current) {
+        focusPreview(openSection.current);
+      }
     };
     addEventListener('message', onMsg);
     return () => removeEventListener('message', onMsg);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const frameRef = useRef<HTMLDivElement>(null);
   const [frameBox, setFrameBox] = useState({ w: 0, h: 0 });
@@ -243,13 +276,23 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
   };
 
   // Publish design: flush any queued save into the staged blob, then apply it
-  const publishDesign = async () => {
+  const publishDesign = async (checked = false) => {
     if (timer.current) { clearTimeout(timer.current); timer.current = null; }
     if (!(await doSave())) return;
+    if (!(await flushSections.current())) return;
     const n = latestChanges.current.length;
     if (!n && !sectionsStagedRef.current) return;
+    // pre-publish checklist over the staged page layouts
+    if (!checked) {
+      const d = designApi.data;
+      const themeDefs = d?.themes.find((t) => t.slug === activeTheme)?.sections ?? {};
+      const staged = (d?.draft?.sectionPages ?? d?.live.sectionPages ?? {}) as Parameters<typeof checkLayouts>[0];
+      const found = d ? checkLayouts(staged, themeDefs as Parameters<typeof checkLayouts>[1], d.targets ?? EMPTY_TARGETS) : [];
+      if (found.length) { setChecks(found); checksRef.current?.showModal(); 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;
+    if (!checked && !window.confirm(`Publish ${what}? Visitors see them right away. The current design is saved to History.`)) return;
+    checksRef.current?.close();
     const { error } = await actions.settings.applyDesign({});
     if (error) { setSaveMessage(error.message); setSaveState('error'); return; }
     setPending(false);
@@ -370,6 +413,9 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
   );
 
   const hasDraft = (pending && changes.length > 0) || sectionsStaged;
+  // editors change section content only: Pages tab, per-section publish
+  const editorOnly = (designApi.data as { role?: string } | null)?.role === 'editor';
+  useEffect(() => { if (editorOnly && tab !== 'pages') setTab('pages'); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [editorOnly]);
 
   return (
     <div className="dm-layout">
@@ -384,7 +430,7 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
               <span className={`lm-savestate ${saveState}`}>
                 {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? (saveMessage || 'Save failed') : null}
               </span>
-              <button className="btn sm ghost" type="button" onClick={() => void openHistory()}>History</button>
+              {!editorOnly && <button className="btn sm ghost" type="button" onClick={() => void openHistory()}>History</button>}
             </div>
           </div>
 
@@ -396,10 +442,10 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
                 <><span className="dm-st is-live">Live</span><span className="dm-st-sub">· no unpublished changes</span></>
               )}
               <span className="dm-status-actions">
-                {overrideCount > 0 && (
+                {overrideCount > 0 && !editorOnly && (
                   <button className="btn sm ghost" type="button" onClick={() => { setOverrides({}); scheduleSave(); }}>Reset all</button>
                 )}
-                {hasDraft && (
+                {hasDraft && !editorOnly && (
                   <>
                     <button className="btn sm ghost" type="button" onClick={discardDesign}>Discard</button>
                     <button className="btn sm primary" type="button" onClick={() => void publishDesign()}>Publish…</button>
@@ -408,22 +454,22 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
               </span>
             </div>
             <div className="dm-status-links">
-              {hasDraft && tab !== 'review' && (
+              {hasDraft && tab !== 'review' && !editorOnly && (
                 <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'}>
+              {!editorOnly && <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>
+              </button>}
             </div>
           </div>
 
           <div className="seg te-tabs" role="tablist" aria-label="Design settings" onKeyDown={onTabKey}>
-            {TABS.map((t) => (
+            {TABS.filter((t) => !editorOnly || t.key === 'pages').map((t) => (
               <button
                 key={t.key}
                 ref={(el) => { tabRefs.current[t.key] = el; }}
@@ -734,7 +780,24 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
           </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} />
+            <ThemeSectionsEditor
+              api={designApi}
+              activeTheme={activeTheme}
+              unsplashEnabled={unsplashEnabled}
+              focus={sectionFocus}
+              onOpenSection={(_pageId, sectionId, path) => {
+                openSection.current = sectionId;
+                // show the page being edited: follow it in the preview
+                if (sectionId && path && pathRef.current.split('?')[0] !== path) {
+                  pathRef.current = path;
+                  setPreviewPath(path);
+                  setTick((t) => t + 1);
+                } else focusPreview(sectionId);
+              }}
+              onSaved={() => setTick((t) => t + 1)}
+              onLiveHtml={liveHtml}
+              flushRef={flushSections}
+            />
           </div>
 
           <div className="te-panel" role="tabpanel" id="dm-panel-review" aria-labelledby="dm-tab-review" hidden={tab !== 'review'}>
@@ -840,6 +903,7 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
           return (
             <div className="dm-frame" ref={frameRef}>
               <iframe
+                ref={frameEl}
                 key={iframeSrc}
                 src={iframeSrc}
                 title="Site preview"
@@ -854,6 +918,38 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
         })()}
       </div>
 
+      <dialog className="modal dm-dialog dm-checks" ref={checksRef} aria-labelledby="dm-checks-title" onClick={(e) => { if (e.target === e.currentTarget) checksRef.current?.close(); }}>
+        <div className="modal-head">
+          <span id="dm-checks-title">Before you publish</span>
+          <button className="modal-x" type="button" onClick={() => checksRef.current?.close()} aria-label="Close">✕</button>
+        </div>
+        <div className="modal-body">
+          {checks.some((c) => c.level === 'error')
+            ? <p className="dm-dialog-sub">Some fields need fixing before this can go live.</p>
+            : <p className="dm-dialog-sub">A few things you may want to fix first. You can also publish as is.</p>}
+          <ul className="dm-checklist">
+            {checks.slice(0, 12).map((c, i) => (
+              <li key={i} className={`is-${c.level}`}>
+                <span className="dm-check-dot" aria-hidden="true" />
+                <span><b>{c.section}</b>: {c.message}</span>
+                <button className="btn sm ghost" type="button" onClick={() => {
+                  checksRef.current?.close();
+                  setTab('pages');
+                  setSectionFocus((f) => ({ pageId: c.pageId, sectionId: c.sectionId, n: (f?.n ?? 0) + 1 }));
+                }}>Fix</button>
+              </li>
+            ))}
+            {checks.length > 12 && <li className="te-muted">…and {checks.length - 12} more</li>}
+          </ul>
+          <div className="modal-foot">
+            <button className="btn ghost" type="button" onClick={() => checksRef.current?.close()}>Keep editing</button>
+            {!checks.some((c) => c.level === 'error') && (
+              <button className="btn primary" type="button" onClick={() => void publishDesign(true)}>Publish anyway</button>
+            )}
+          </div>
+        </div>
+      </dialog>
+
       <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>