@acms-subir/core 0.2.0 → 0.3.0

package/src/components/EventPage.astro

@@ -0,0 +1,178 @@
+---
+// The built-in event page (feature image, date block, place, button, add to
+// calendar, share, related events). Themes replace it with
+// templates/event.astro, which receives the same props. Every element
+// carries a stable .pc-ev-* class for CSS overrides.
+import type { CalEvent, Calendar, Settings } from '../lib/schema';
+import { CALENDAR, eventIcsUrl, eventUrl, calendarPageUrl } from '../lib/calendar/config';
+import { addToCalendarLinks, eventTimeZone, formatOccurrence, safeColor, type Occurrence } from '../lib/calendar/events';
+import { describeRepeat } from '../lib/calendar/rrule';
+import { eventCardHtml, safeHref } from '../lib/calendar/cards';
+import { siteLocale } from '../lib/dates';
+
+interface Props {
+  event: CalEvent;
+  occurrence: Occurrence;
+  settings: Settings;
+  calendars: Calendar[];
+  html: string;
+  upcoming: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days'>[];
+  origin: string;
+  preview?: boolean;
+  // RSVP state when the event takes RSVPs (null otherwise)
+  rsvp?: { going: number; left: number | null; maxSeats: number; error: string; open: boolean } | null;
+}
+const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, preview = false, rsvp = null } = Astro.props;
+const tz = eventTimeZone(e, settings);
+const locale = siteLocale(settings);
+const f = formatOccurrence(o, tz, locale);
+const pageUrl = origin + eventUrl(e.slug);
+const links = addToCalendarLinks(e, o, { pageUrl, icsUrl: eventIcsUrl(e.slug), tz });
+const repeats = describeRepeat(e.rrule, e.start, (ymd) => {
+  const [y, m, d] = ymd.split('-').map(Number);
+  return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+});
+const ctaHref = safeHref(e.cta.href);
+const mapHref = e.location.url
+  ? safeHref(e.location.url)
+  : e.location.address
+    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([e.location.name, e.location.address].filter(Boolean).join(', '))}`
+    : '';
+const fieldRows = CALENDAR.eventFields.filter((fd) => e.fields[fd.key]).map((fd) => ({ label: fd.label, value: e.fields[fd.key], type: fd.type }));
+const visibleTags = e.tags.filter((t) => !t.startsWith('#'));
+const I = {
+  pin: 'M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
+  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
+  repeat: 'M17 2l4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 0 1-3 3H3',
+  cal: 'M3 5.5h18v15H3zM3 10h18M8 3v4M16 3v4',
+  share: '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',
+  info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 8h.01',
+  video: 'M3 7h12v10H3zM15 10l6-3v10l-6-3',
+};
+const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(e.location.url);
+---
+
+<article class={`pc-ev-page${e.cancelled ? ' is-cancelled' : ''}`}>
+  {preview && <p class="pc-ev-preview">Preview — only you can see this {e.status === 'published' ? 'version' : 'draft'}.</p>}
+  {e.cover && (
+    <figure class="pc-ev-hero"><img src={e.cover} alt={e.coverAlt} /></figure>
+  )}
+  <div class="pc-ev-layout">
+    <div class="pc-ev-main">
+      {(calendars.length > 0 || visibleTags.length > 0) && (
+        <div class="pc-ev-chips">
+          {calendars.map((c) => (
+            <a class="pc-ev-chip" href={calendarPageUrl(c.slug)}><i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}</a>
+          ))}
+          {visibleTags.map((t) => <span class="pc-ev-chip is-tag">{t}</span>)}
+        </div>
+      )}
+      <h1 class="pc-ev-title">{e.title}</h1>
+      {e.cancelled && <p class="pc-ev-cancelled"><b>This event is cancelled.</b> It stays listed so nobody is left wondering.</p>}
+      {e.excerpt && <p class="pc-ev-lede">{e.excerpt}</p>}
+      <div class="pc-ev-body post-content" set:html={html} />
+    </div>
+
+    <aside class="pc-ev-side" aria-label="Event details">
+      <div class="pc-ev-date">
+        <span class="pc-ev-tile" aria-hidden="true"><b>{f.month}</b><span>{f.day}</span></span>
+        <div>
+          <b>{f.date}</b>
+          <span>{f.time}</span>
+        </div>
+      </div>
+      {(e.location.name || e.location.address || e.location.url) && (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={online && !e.location.address ? I.video : I.pin} /></svg>
+          <div>
+            {e.location.name && <b>{e.location.name}</b>}
+            {(e.location.address || mapHref) && (
+              <span>
+                {e.location.address}
+                {mapHref && <>{e.location.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? 'Join online' : 'Map'}</a></>}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+      {repeats && (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.repeat} /></svg>
+          <div><b>{repeats}</b><span>Showing {f.date}</span></div>
+        </div>
+      )}
+      {fieldRows.map((r) => (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.info} /></svg>
+          <div><span>{r.label}</span><b>{r.type === 'url' && safeHref(r.value) ? <a href={safeHref(r.value)} target="_blank" rel="noopener">{r.value.replace(/^https?:\/\//, '')}</a> : r.value}</b></div>
+        </div>
+      ))}
+      {rsvp ? (
+        <div class="pc-ev-rsvp">
+          <p class="pc-ev-going"><b>{rsvp.going}</b> going{rsvp.left !== null && <> · <b>{rsvp.left}</b> {rsvp.left === 1 ? 'spot' : 'spots'} left</>}</p>
+          {rsvp.open && (rsvp.left === null || rsvp.left > 0) ? (
+            <details class="pc-ev-rsvpform" open={Boolean(rsvp.error)}>
+              <summary class="pc-ev-cta">Save my seat</summary>
+              <form method="post">
+                {rsvp.error && <p class="pc-bk-error">{rsvp.error}</p>}
+                <label class="pc-bk-field"><span>Your name</span><input name="name" required autocomplete="name" /></label>
+                <label class="pc-bk-field"><span>Email</span><input name="email" type="email" required autocomplete="email" /></label>
+                {rsvp.maxSeats > 1 && (
+                  <label class="pc-bk-field"><span>Seats</span>
+                    <select name="seats">{Array.from({ length: Math.min(rsvp.maxSeats, rsvp.left ?? rsvp.maxSeats) }, (_, i) => <option value={i + 1}>{i + 1}</option>)}</select>
+                  </label>
+                )}
+                <button class="pc-bk-submit" type="submit">{e.rsvp.autoConfirm ? 'Confirm my seat' : 'Request a seat'}</button>
+              </form>
+            </details>
+          ) : <p class="pc-ev-full">{rsvp.open ? 'This event is full.' : 'RSVPs are closed.'}</p>}
+        </div>
+      ) : e.cta.label && ctaHref && !e.cancelled && (
+        <a class={`pc-ev-cta${e.cta.style === 'outline' ? ' is-outline' : ''}`} href={ctaHref}>{e.cta.label}</a>
+      )}
+      <details class="pc-ev-add">
+        <summary>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.cal} /></svg>
+          Add to calendar
+        </summary>
+        <div class="pc-ev-add-menu">
+          <a href={links.google} target="_blank" rel="noopener">Google Calendar</a>
+          <a href={links.ics}>Apple Calendar</a>
+          <a href={links.outlook} target="_blank" rel="noopener">Outlook</a>
+          <a href={links.ics} download={`${e.slug}.ics`}>Download .ics</a>
+        </div>
+      </details>
+      <button type="button" class="pc-ev-share" data-url={pageUrl} data-title={e.title}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.share} /></svg>
+        <span>Share</span>
+      </button>
+    </aside>
+  </div>
+
+  {upcoming.length > 0 && (
+    <section class="pc-ev-more">
+      <h2>More events</h2>
+      <div class="pc-ev-cards" data-layout="grid" set:html={upcoming.map((u) => eventCardHtml(u, settings, { showImage: true })).join('')} />
+      <a class="pc-ev-all" href={CALENDAR.base}>See the full calendar →</a>
+    </section>
+  )}
+</article>
+
+<script>
+  // share sheet where available, else copy the link
+  document.querySelectorAll<HTMLButtonElement>('.pc-ev-share').forEach((b) => b.addEventListener('click', async () => {
+    const url = b.dataset.url ?? location.href;
+    if (navigator.share) {
+      try { await navigator.share({ title: b.dataset.title, url }); return; } catch { /* dismissed */ }
+    }
+    await navigator.clipboard.writeText(url);
+    const label = b.querySelector('span');
+    if (label) { label.textContent = 'Link copied'; setTimeout(() => (label.textContent = 'Share'), 1400); }
+  }));
+  // one open menu; outside click closes
+  document.addEventListener('click', (ev) => {
+    document.querySelectorAll<HTMLDetailsElement>('details.pc-ev-add[open]').forEach((d) => {
+      if (!(ev.target instanceof Node && d.contains(ev.target))) d.open = false;
+    });
+  });
+</script>

package/src/components/LegalPage.astro

@@ -0,0 +1,27 @@
+---
+import Site from '../layouts/Site.astro';
+import WidgetRenderer from './WidgetRenderer.astro';
+import { getRepo } from '../lib/repo';
+import { defaultPolicy, LEGAL } from '../lib/legal';
+import { expandDynamicBlocks } from '../lib/dynamicBlocks';
+interface Props { policy: 'privacy' | 'terms' }
+const { policy } = Astro.props;
+const repo = await getRepo(Astro.locals);
+const [settings, page] = await Promise.all([repo.getSettings(), repo.getPageBySlug(policy)]);
+const custom = page?.status === 'published' ? page : null;
+const standard = defaultPolicy(policy, settings);
+const html = custom?.bodyHtml ? await expandDynamicBlocks(custom.bodyHtml, repo) : '';
+---
+<Site title={custom?.title || standard.title} noindex={!custom && !standard.complete}>
+  {custom ? (
+    html ? <article class="page-body" set:html={html} /> : <WidgetRenderer pageId={custom.id} blocks={custom.blocks} />
+  ) : (
+    <article class="page-body">
+      <h1>{standard.title}</h1>
+      {LEGAL.updatedAt && <p>Last updated: <time datetime={LEGAL.updatedAt}>{LEGAL.updatedAt}</time></p>}
+      {!standard.complete && <p><strong>Standard notice:</strong> The site operator has not yet completed its identity and contact details. This page describes the standard site features and needs the operator’s site-specific information.</p>}
+      {standard.sections.map(section => <section><h2>{section.title}</h2><p>{section.text}</p></section>)}
+      {LEGAL.contactEmail && <p><a href={`mailto:${LEGAL.contactEmail}`}>Contact the site operator</a></p>}
+    </article>
+  )}
+</Site>

package/src/components/LinksManager.tsx

@@ -128,6 +128,8 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
   const [colorPickerFor, setColorPickerFor] = useState<string | null>(null);
   const [saveState, setSaveState] = useState<SaveState>('saved');
   const [tick, setTick] = useState(0);
+  // narrow screens show one pane at a time
+  const [view, setView] = useState<'edit' | 'preview' | 'insights'>('edit');
 
   const linkShape = (l: Link) => ({ id: l.id, kind: l.kind, label: l.label, url: l.url, icon: l.icon, html: l.html, meta: l.meta });
   const dirty = useMemo(
@@ -246,10 +248,21 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
     saveState === 'error' ? 'Save failed' :
     dirty ? 'Unsaved changes — not live yet' : 'Live';
 
+  const clickable = links.filter((l) => l.kind === 'link' || l.kind === 'email' || l.kind === 'phone' || l.kind === 'vcard');
+  const totalClicks = clickable.reduce((n, l) => n + l.clicks, 0);
+  const topClicks = [...clickable].sort((x, y) => y.clicks - x.clicks);
+
   return (
-    <div className="lm-layout">
-      <div>
-        <div className="card card-pad lm-profile" style={{ marginBottom: 16 }}>
+    <div className={`lm-layout view-${view}`}>
+      <div className="lm-views seg" role="tablist" aria-label="Links page view">
+        {(['edit', 'preview', 'insights'] as const).map((v) => (
+          <button key={v} type="button" role="tab" aria-selected={view === v} onClick={() => { setView(v); if (v === 'preview') setTick((t) => t + 1); }}>
+            {v[0].toUpperCase() + v.slice(1)}
+          </button>
+        ))}
+      </div>
+      <div className="lm-editor">
+        <div className="lm-profile">
           <div className="lm-avatarwrap">
             <button
               type="button"
@@ -260,7 +273,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
               {profile.linksAvatar ? (
                 <img src={profile.linksAvatar} alt="" />
               ) : (
-                <span aria-hidden="true">{(profile.linksName.trim()[0] ?? '?').toUpperCase()}</span>
+                <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4zM12 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></svg>
               )}
               <span className="lm-avatar-hint">Edit</span>
             </button>
@@ -299,50 +312,60 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
           </div>
         </div>
 
-        <div className="card card-pad" style={{ marginBottom: 16 }}>
-          <div className="lm-picker-head">
-            <p className="card-title">{pickerOpen && sitesOpen ? 'Choose a site' : 'Add block'}</p>
-            {pickerOpen && sitesOpen && (
-              <button type="button" className="btn sm ghost" onClick={() => setSitesOpen(false)}>‹ All blocks</button>
-            )}
-            <button type="button" className="btn sm ghost" onClick={() => { setPickerOpen((v) => !v); setSitesOpen(false); }}>
-              {pickerOpen ? 'Close' : '+ Add'}
-            </button>
-          </div>
-          {pickerOpen && !sitesOpen && TILE_GROUPS.map((g) => (
-            <div key={g.label}>
-              <p className="lm-group-label">{g.label}</p>
-              <div className="lm-tiles">
-                {g.tiles.map((t) => (
-                  <button
-                    key={t.key}
-                    type="button"
-                    className="lm-tile"
-                    onClick={() => (t.kind === 'site' ? setSitesOpen(true) : add(NEW_ITEM[t.kind]))}
-                  >
-                    <span className="lm-tile-ico" dangerouslySetInnerHTML={{ __html: TILE_ICONS[t.key] }} />
-                    <span className="lm-tile-body">
-                      <b>{t.name}</b>
-                      <span>{t.desc}</span>
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          ))}
-          {pickerOpen && sitesOpen && (
-            <div className="lm-sites">
-              {SITES.map((s) => (
-                <button key={s.name} type="button" className="lm-site" onClick={() => addSite(s)} style={{ color: `#${s.si.hex}` }}>
-                  <span className="lm-site-ico" dangerouslySetInnerHTML={{ __html: svgOf(s.si) }} />
-                  <span>{s.name}</span>
-                </button>
+        <div className="lm-addwrap">
+          <button
+            type="button"
+            className={`lm-addbtn ${pickerOpen ? 'is-open' : ''}`}
+            aria-expanded={pickerOpen}
+            onClick={() => { setPickerOpen((v) => !v); setSitesOpen(false); }}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
+            Add block
+          </button>
+          {pickerOpen && (
+            <div className="lm-picker">
+              {sitesOpen && (
+                <div className="lm-picker-head">
+                  <button type="button" className="btn sm ghost" onClick={() => setSitesOpen(false)}>‹ All blocks</button>
+                  <b>Choose a site</b>
+                </div>
+              )}
+              {!sitesOpen && TILE_GROUPS.map((g) => (
+                <div key={g.label}>
+                  <p className="lm-group-label">{g.label}</p>
+                  <div className="lm-tiles">
+                    {g.tiles.map((t) => (
+                      <button
+                        key={t.key}
+                        type="button"
+                        className="lm-tile"
+                        onClick={() => (t.kind === 'site' ? setSitesOpen(true) : add(NEW_ITEM[t.kind]))}
+                      >
+                        <span className="lm-tile-ico" dangerouslySetInnerHTML={{ __html: TILE_ICONS[t.key] }} />
+                        <span className="lm-tile-body">
+                          <b>{t.name}</b>
+                          <span>{t.desc}</span>
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
               ))}
+              {sitesOpen && (
+                <div className="lm-sites">
+                  {SITES.map((s) => (
+                    <button key={s.name} type="button" className="lm-site" onClick={() => addSite(s)} style={{ color: `#${s.si.hex}` }}>
+                      <span className="lm-site-ico" dangerouslySetInnerHTML={{ __html: svgOf(s.si) }} />
+                      <span>{s.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
             </div>
           )}
         </div>
 
-        <div className="card rowlist">
+        <div className="lm-list rowlist">
           <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <SortableContext items={links.map((l) => l.id)} strategy={verticalListSortingStrategy}>
               {links.map((l) => (
@@ -361,7 +384,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
               ))}
             </SortableContext>
           </DndContext>
-          {links.length === 0 && <p className="hint empty">Nothing here yet — add your first block above.</p>}
+          {links.length === 0 && <p className="hint lm-empty">Nothing here yet — add your first block above.</p>}
         </div>
       </div>
 
@@ -377,23 +400,47 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
 
       <aside className="lm-preview">
         <div className="lm-preview-bar">
-          <span className="lm-preview-label">Live preview</span>
-          <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>{saveLabel}</span>
-          <div style={{ display: 'flex', gap: 2 }}>
-            {dirty && (
-              <>
-                <button type="button" className="btn sm ghost" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
-                <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={saveState === 'saving'}>Save changes</button>
-              </>
-            )}
-            <button type="button" className="btn sm ghost" title="Refresh" onClick={() => setTick((t) => t + 1)}>↻</button>
-            <a className="btn sm ghost" href="/links" target="_blank" rel="noopener" title="Open in tab">↗</a>
-          </div>
+          <span className="lm-url">{location.host}/links</span>
+          <button
+            type="button"
+            className="icon-btn"
+            title="Copy link"
+            aria-label="Copy link"
+            onClick={() => void navigator.clipboard.writeText(`${location.origin}/links`)}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 9h11v11H9zM5 15H4V4h11v1" /></svg>
+          </button>
+          <a className="icon-btn" href="/links" target="_blank" rel="noopener" title="Open in tab" aria-label="Open in tab">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>
+          </a>
         </div>
         <div className="lm-phone">
           <iframe key={tick} src="/links" title="Links page preview" />
         </div>
+        <p className="lm-stat"><b>{totalClicks.toLocaleString()}</b> total clicks · <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>{saveLabel}</span></p>
       </aside>
+
+      <section className="lm-insights" aria-label="Insights">
+        <div className="card-head"><b>Clicks by block</b><span className="hint">{totalClicks.toLocaleString()} total</span></div>
+        {topClicks.length === 0 && <p className="hint">No buttons yet.</p>}
+        {topClicks.map((l) => (
+          <div key={l.id} className="mini-row bar-row">
+            <i style={{ width: `${topClicks[0].clicks ? (l.clicks / topClicks[0].clicks) * 100 : 0}%` }} />
+            <span className="grow">{l.label || l.url || 'Untitled'}{l.meta?.hidden ? ' · hidden' : ''}</span>
+            <b>{l.clicks.toLocaleString()}</b>
+          </div>
+        ))}
+      </section>
+
+      {dirty && (
+        <div className="lm-savebar" role="status">
+          <span>{saveState === 'error' ? 'Save failed — try again' : 'Unsaved changes'}</span>
+          <button type="button" className="btn sm" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+          <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={saveState === 'saving'}>
+            {saveState === 'saving' ? 'Saving…' : 'Save changes'}
+          </button>
+        </div>
+      )}
     </div>
   );
 }
@@ -434,7 +481,7 @@ function ItemRow({
   return (
     <div
       ref={setNodeRef}
-      className={`lm-item ${isDragging ? 'is-dragging' : ''}`}
+      className={`lm-item ${isDragging ? 'is-dragging' : ''} ${link.meta?.hidden ? 'is-hidden' : ''}`}
       style={{ transform: CSS.Transform.toString(transform), transition }}
     >
       <div className={`row lm-row ${hasEditorPane && editorOpen ? 'is-open' : ''}`}>
@@ -529,6 +576,16 @@ function ItemRow({
             {editorOpen ? 'Done' : expandLabel}
           </button>
         )}
+        <button
+          type="button"
+          role="switch"
+          aria-checked={!link.meta?.hidden}
+          className={`lm-switch ${link.meta?.hidden ? '' : 'on'}`}
+          title={link.meta?.hidden ? 'Hidden on the page — click to show' : 'Visible — click to hide'}
+          onClick={() => onEdit(link.id, { meta: { ...link.meta, hidden: !link.meta?.hidden } }, true)}
+        >
+          <i />
+        </button>
         <button type="button" className="btn sm ghost danger reveal" onClick={() => onDelete(link.id)}>Delete</button>
       </div>
 

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>