@acms-subir/core 0.2.0 → 0.3.1

package/src/components/NavManager.tsx

@@ -11,8 +11,10 @@ import type { NavItem, NavArea } from '../lib/schema';
 // area is empty); footer renders above the footer text; social feeds the
 // footer social row and share UIs.
 //
-// Edits stay local until "Save changes" commits them all at once — the live
-// nav never sees a half-rearranged state. Discard restores the saved state.
+// Edits stay local until "Save changes", which STAGES the whole list in the
+// design draft: menus go live together with the design on "Publish design"
+// (here or on the Design screen), and preview mode shows them first.
+// Discard restores the last saved state.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -22,8 +24,7 @@ const AREAS: { key: NavArea; title: string; hint: string }[] = [
   { key: 'social', title: 'Social', hint: 'Footer social row — also used for share links on posts.' },
 ];
 
-// unsaved additions carry a temp id until nav.create returns the real one
-const isTemp = (id: string) => id.startsWith('tmp-');
+// new items carry a temp id; Publish design gives them real ids
 
 function Row({
   item, onEdit, onArea, onDelete,
@@ -67,8 +68,10 @@ function Row({
   );
 }
 
-export default function NavManager({ items: initial }: { items: NavItem[] }) {
+export default function NavManager({ items: initial, staged: stagedInitially }: { items: NavItem[]; staged: boolean }) {
   const [items, setItems] = useState<NavItem[]>(initial);
+  // the saved list is staged (differs from the live menus) until Publish
+  const [staged, setStaged] = useState(stagedInitially);
   // last state the server has — dirty compares against this
   const [saved, setSaved] = useState<NavItem[]>(initial);
   const [saveState, setSaveState] = useState<SaveState>('saved');
@@ -122,45 +125,34 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
     });
   }
 
-  // one commit for everything: deletes, creates (temp ids become real),
-  // updates, then the full display order
+  // one commit for everything: the full ordered list stages in the draft
   async function saveAll() {
     setSaveState('saving');
-    try {
-      const savedById = new Map(saved.map((n) => [n.id, n]));
-      const keptIds = new Set(items.map((n) => n.id));
-      for (const n of saved) {
-        if (!keptIds.has(n.id)) {
-          const r = await actions.nav.delete({ id: n.id });
-          if (r.error) throw r.error;
-        }
-      }
-      const next: NavItem[] = [];
-      for (const n of items) {
-        if (isTemp(n.id)) {
-          const r = await actions.nav.create({ label: n.label, url: n.url, area: n.area });
-          if (r.error) throw r.error;
-          next.push({ ...n, id: r.data.item.id });
-        } else {
-          const prev = savedById.get(n.id);
-          if (prev && (prev.label !== n.label || prev.url !== n.url || prev.area !== n.area)) {
-            const r = await actions.nav.update({ id: n.id, label: n.label, url: n.url, area: n.area });
-            if (r.error) throw r.error;
-          }
-          next.push(n);
-        }
-      }
-      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
-      if (ordered.length) {
-        const r = await actions.nav.reorder({ ids: ordered });
-        if (r.error) throw r.error;
-      }
-      setItems(next);
-      setSaved(next);
-      setSaveState('saved');
-    } catch {
-      setSaveState('error');
-    }
+    const ordered = AREAS.flatMap((a) => items.filter((n) => n.area === a.key));
+    const r = await actions.nav.saveDraft({
+      items: ordered.map(({ id, label, url, area }) => ({ id, label, url, area })),
+    });
+    if (r.error) { setSaveState('error'); return; }
+    setItems(ordered);
+    setSaved(ordered);
+    setStaged(r.data.changes.some((c) => c.key === 'nav'));
+    setSaveState('saved');
+  }
+
+  async function publish() {
+    if (!window.confirm('Publish now? Staged menus and any staged design changes go live together. The current design is saved to History.')) return;
+    setSaveState('saving');
+    const r = await actions.settings.applyDesign({});
+    if (r.error) { setSaveState('error'); return; }
+    setStaged(false);
+    setSaveState('saved');
+  }
+
+  async function unstage() {
+    setSaveState('saving');
+    const r = await actions.settings.revertDesignChange({ key: 'nav' });
+    if (r.error) { setSaveState('error'); return; }
+    location.reload(); // back to the live menus
   }
 
   function discard() {
@@ -172,7 +164,7 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
     <div className="nm">
       <div className="nm-head">
         <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>
-          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : dirty ? 'Unsaved changes — not live yet' : 'Live'}
+          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : dirty ? 'Unsaved changes' : staged ? 'Staged, not live yet' : 'Live'}
         </span>
         {dirty && (
           <>
@@ -180,6 +172,13 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
             <button className="btn sm primary" type="button" onClick={() => void saveAll()} disabled={saveState === 'saving'}>Save changes</button>
           </>
         )}
+        {!dirty && staged && (
+          <>
+            <button className="btn sm ghost" type="button" onClick={() => void unstage()} disabled={saveState === 'saving'}>Discard staged menus</button>
+            <a className="btn sm" href="/?designPreview=1" target="_blank" rel="noopener">Preview site ↗</a>
+            <button className="btn sm primary" type="button" onClick={() => void publish()} disabled={saveState === 'saving'}>Publish…</button>
+          </>
+        )}
       </div>
       {AREAS.map((a) => {
         const group = items.filter((n) => n.area === a.key);

package/src/components/ThemeScript.astro

@@ -0,0 +1,50 @@
+---
+// Admin theme (Light / Dark / System). Inlined in <head> of every admin
+// document so data-theme is set before first paint — no light flash on a
+// dark-mode machine. The preference lives in localStorage per browser;
+// "system" follows the OS live. Public-site previews (iframes) never read it.
+---
+
+<meta name="color-scheme" content="light dark" />
+<meta name="theme-color" content="#e8e6e1" />
+<script is:inline>
+  (() => {
+    const KEY = 'acms-theme';
+    const COLORS = { light: '#e8e6e1', dark: '#141311' };
+    const mq = matchMedia('(prefers-color-scheme: dark)');
+    const root = document.documentElement;
+    const pref = () => {
+      try { return localStorage.getItem(KEY) || 'system'; } catch { return 'system'; }
+    };
+    const apply = (p = pref()) => {
+      const t = p === 'dark' || (p === 'system' && mq.matches) ? 'dark' : 'light';
+      root.dataset.theme = t;
+      root.dataset.themePref = p;
+      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', COLORS[t]);
+      document.querySelectorAll('[data-set-theme]').forEach((el) => {
+        el.setAttribute('aria-pressed', String(el.getAttribute('data-set-theme') === p));
+      });
+    };
+    const set = (p) => {
+      try { localStorage.setItem(KEY, p); } catch {}
+      apply(p);
+      window.dispatchEvent(new CustomEvent('acms:theme', { detail: root.dataset.theme }));
+    };
+    window.acmsTheme = { set, pref };
+    apply();
+    mq.addEventListener('change', () => pref() === 'system' && apply());
+    document.addEventListener('DOMContentLoaded', () => apply());
+    document.addEventListener('click', (e) => {
+      const el = e.target instanceof Element ? e.target.closest('[data-set-theme]') : null;
+      if (el) set(el.getAttribute('data-set-theme'));
+    });
+    // ⌘⇧L / Ctrl+Shift+L cycles light → dark → system
+    document.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'l') {
+        e.preventDefault();
+        const order = ['light', 'dark', 'system'];
+        set(order[(order.indexOf(pref()) + 1) % order.length]);
+      }
+    });
+  })();
+</script>

package/src/components/ThemeSections.astro

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