@acms-subir/core 0.1.0 → 0.3.0

package/src/components/NavManager.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useState } 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';
@@ -10,6 +10,11 @@ import type { NavItem, NavArea } from '../lib/schema';
 // auto-list of published pages (which stays as a fallback while the header
 // area is empty); footer renders above the footer text; social feeds the
 // footer social row and share UIs.
+//
+// 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';
 
@@ -19,6 +24,8 @@ const AREAS: { key: NavArea; title: string; hint: string }[] = [
   { key: 'social', title: 'Social', hint: 'Footer social row — also used for share links on posts.' },
 ];
 
+// new items carry a temp id; Publish design gives them real ids
+
 function Row({
   item, onEdit, onArea, onDelete,
 }: {
@@ -61,54 +68,49 @@ 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');
-  const pending = useRef(0);
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const dirty = useMemo(
+    () =>
+      JSON.stringify(items.map(({ id, label, url, area }) => ({ id, label, url, area }))) !==
+      JSON.stringify(saved.map(({ id, label, url, area }) => ({ id, label, url, area }))),
+    [items, saved]
+  );
+
+  // unsaved edits live only in this tab — warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
-  async function run(fn: () => Promise<{ error?: unknown }>) {
-    pending.current += 1;
-    setSaveState('saving');
-    const r = await fn();
-    pending.current -= 1;
-    if (r.error) setSaveState('error');
-    else if (pending.current === 0) setSaveState('saved');
-  }
-
-  function debounced(key: string, fn: () => void, ms = 600) {
-    const prev = timers.current.get(key);
-    if (prev) clearTimeout(prev);
-    timers.current.set(key, setTimeout(() => { timers.current.delete(key); fn(); }, ms));
-  }
-
   function edit(id: string, patch: Partial<Pick<NavItem, 'label' | 'url'>>) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, ...patch } : n)));
-    debounced(id, () => void run(() => actions.nav.update({ id, ...patch })));
   }
 
   function setArea(id: string, area: NavArea) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, area } : n)));
-    void run(() => actions.nav.update({ id, area }));
   }
 
-  async function add(area: NavArea) {
-    await run(async () => {
-      const r = await actions.nav.create({ label: 'New link', url: '/', area });
-      if (!r.error) setItems((ls) => [...ls, r.data.item]);
-      return r;
-    });
+  function add(area: NavArea) {
+    setItems((ls) => [...ls, { id: `tmp-${crypto.randomUUID()}`, label: 'New link', url: '/', area, order: ls.length }]);
   }
 
   function remove(id: string) {
-    if (!window.confirm('Delete this navigation item?')) return;
+    // local until Save — Discard brings it back
     setItems((ls) => ls.filter((n) => n.id !== id));
-    void run(() => actions.nav.delete({ id }));
   }
 
   function onDragEnd(area: NavArea, e: DragEndEvent) {
@@ -119,21 +121,64 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
       const rest = ls.filter((n) => n.area !== area);
       const from = group.findIndex((n) => n.id === active.id);
       const to = group.findIndex((n) => n.id === over.id);
-      const moved = arrayMove(group, from, to);
-      const next = [...rest, ...moved];
-      // persist the full display order: header, footer, social, each in order
-      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
-      void run(() => actions.nav.reorder({ ids: ordered }));
-      return next;
+      return [...rest, ...arrayMove(group, from, to)];
+    });
+  }
+
+  // one commit for everything: the full ordered list stages in the draft
+  async function saveAll() {
+    setSaveState('saving');
+    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() {
+    setItems(saved);
+    setSaveState('saved');
   }
 
   return (
     <div className="nm">
       <div className="nm-head">
-        <span className={`lm-savestate ${saveState}`}>
-          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+        <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>
+          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : dirty ? 'Unsaved changes' : staged ? 'Staged, not live yet' : 'Live'}
         </span>
+        {dirty && (
+          <>
+            <button className="btn sm ghost" type="button" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+            <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);
@@ -144,7 +189,7 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
                 <p className="card-title">{a.title}</p>
                 <p className="hint">{a.hint}</p>
               </div>
-              <button className="btn sm" type="button" onClick={() => void add(a.key)}>+ Add item</button>
+              <button className="btn sm" type="button" onClick={() => add(a.key)}>+ Add item</button>
             </div>
             {group.length === 0 && <p className="nm-empty">No items yet.</p>}
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={(e) => onDragEnd(a.key, e)}>

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