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

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>

package/src/components/MobileApp.tsx

@@ -0,0 +1,392 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { AdminPushState } from '../lib/push/api';
+import type { PushAuto, PushNotification } from '../lib/push/types';
+import '../styles/mobile-app.css';
+
+// Admin → Mobile app: send a notification to the site's own app, choose the
+// automatic notices, see who is subscribed and what was delivered. Owner only;
+// the page exists only when acms({ mobile: { push } }) is on.
+
+const ENDPOINT = '/api/push/admin';
+const CUSTOM = '__custom';
+const SOON_MINUTES = [10, 15, 30, 60, 120, 1440];
+
+async function api<T>(body?: Record<string, unknown>): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const plural = (n: number, one: string, many = `${one}s`) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+const minutesLabel = (m: number) => (m >= 1440 ? '1 day' : m >= 60 ? `${m / 60} hour${m === 60 ? '' : 's'}` : `${m} minutes`);
+
+function ago(ms: number, now: number) {
+  const s = Math.round((now - ms) / 1000);
+  if (s < 60) return 'Just now';
+  if (s < 3600) return `${Math.floor(s / 60)} min ago`;
+  const d = new Date(ms);
+  const sameDay = new Date(now).toDateString() === d.toDateString();
+  return sameDay ? d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+    : d.toLocaleDateString([], { month: 'short', day: 'numeric', ...(d.getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
+}
+
+const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon' };
+
+export default function MobileApp() {
+  const [state, setState] = useState<AdminPushState | null>(null);
+  const [loadError, setLoadError] = useState('');
+  useEffect(() => { api<AdminPushState>().then(setState, (e) => setLoadError(errText(e))); }, []);
+  if (loadError) return <p className="flash error">{loadError}</p>;
+  if (!state) return <div className="ma-skel" aria-busy="true" aria-label="Loading"><i /><i /><i /></div>;
+  return <MobileAppView state={state} setState={setState} />;
+}
+
+function MobileAppView({ state, setState }: { state: AdminPushState; setState: (s: AdminPushState) => void }) {
+  const topicLabel = useMemo(() => {
+    const map = new Map(state.topics.map((t) => [t.id, t.label]));
+    for (const c of state.collections) if (!map.has(`collection:${c.key}`)) map.set(`collection:${c.key}`, c.label);
+    for (const c of state.calendars) if (!map.has(`calendar:${c.slug}`)) map.set(`calendar:${c.slug}`, c.name);
+    map.set('*', 'Everyone');
+    return (id: string) => map.get(id) ?? id;
+  }, [state]);
+  const { stats } = state;
+  return (
+    <div className="ma">
+      <div className="kpis ma-kpis">
+        <div className="kpi"><small>Devices</small><b>{stats.devices.toLocaleString()}</b></div>
+        <div className="kpi"><small>iPhone and iPad</small><b>{stats.platforms.ios.toLocaleString()}</b></div>
+        <div className="kpi"><small>Android</small><b>{stats.platforms.android.toLocaleString()}</b></div>
+        <div className="kpi"><small>Opened in the last 30 days</small><b>{stats.active30.toLocaleString()}</b></div>
+      </div>
+      {stats.devices === 0 && (
+        <div className="notice ma-notice">
+          <div>
+            <b>No app has signed up for notifications yet.</b>
+            <p>Add the push recipe to your Expo app, then open it on a phone and turn notifications on. From your site folder: <code>npx acms mobile recipe add push</code></p>
+          </div>
+        </div>
+      )}
+      <Composer state={state} setState={setState} topicLabel={topicLabel} />
+      <div className="ma-grid ma-grid-2">
+        <Automatic state={state} setState={setState} />
+        <Audience state={state} topicLabel={topicLabel} />
+      </div>
+      <DeliveryLog log={state.log} topicLabel={topicLabel} />
+      <p className="hint ma-foot">
+        Sent through Expo’s push service{state.expo.customEndpoint ? ' (custom endpoint from ACMS_EXPO_PUSH_URL)' : ''}.{' '}
+        {state.expo.accessToken ? 'Expo access token is set.' : 'No Expo access token set; only needed when enhanced push security is on for your Expo project (EXPO_ACCESS_TOKEN).'}{' '}
+        Devices that don’t open the app for {state.retentionDays} days are removed.
+      </p>
+    </div>
+  );
+}
+
+// ---- composer -----------------------------------------------------------------
+
+function Composer({ state, setState, topicLabel }: { state: AdminPushState; setState: (s: AdminPushState) => void; topicLabel: (id: string) => string }) {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [linkRef, setLinkRef] = useState('');
+  const [customUrl, setCustomUrl] = useState('');
+  const [mode, setMode] = useState<'all' | 'topics'>('all');
+  const [topics, setTopics] = useState<string[]>([]);
+  const [count, setCount] = useState<number | null>(state.stats.devices);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+  const dialog = useRef<HTMLDialogElement>(null);
+
+  const audience = mode === 'all' ? ['*'] : topics;
+  const target = state.links.find((l) => l.ref === linkRef);
+  const url = linkRef === CUSTOM ? customUrl.trim() : target?.url ?? '';
+  const groups = [...new Set(state.links.map((l) => l.group))];
+
+  useEffect(() => {
+    if (mode === 'all') { setCount(state.stats.devices); return; }
+    if (!topics.length) { setCount(0); return; }
+    let live = true;
+    api<{ recipients: number }>({ action: 'count', audience: topics }).then((r) => live && setCount(r.recipients), () => live && setCount(null));
+    return () => { live = false; };
+  }, [mode, topics.join('|'), state.stats.devices]);
+
+  const toggle = (id: string) => setTopics((t) => (t.includes(id) ? t.filter((x) => x !== id) : [...t, id]));
+  const problem = !title.trim() ? 'Add a title.' : mode === 'topics' && !topics.length ? 'Choose at least one topic.'
+    : linkRef === CUSTOM && url && !/^(\/(?!\/)|https?:\/\/)/i.test(url) ? 'Links start with / or https://.' : '';
+
+  const send = async () => {
+    setBusy(true); setMsg({});
+    try {
+      const r = await api<{ notification: PushNotification; state: AdminPushState }>({ action: 'send', title: title.trim(), body: body.trim(), url, audience });
+      dialog.current?.close();
+      const n = r.notification;
+      setMsg(n.status === 'failed' ? { err: `Not delivered: ${n.error || 'the push service refused it.'}` }
+        : { ok: n.recipients ? `Sent to ${plural(n.ok, 'device')}${n.failed ? ` · ${n.failed} failed` : ''}.` : 'Saved, but no device matched this audience.' });
+      if (n.status !== 'failed') { setTitle(''); setBody(''); setLinkRef(''); setCustomUrl(''); }
+      setState(r.state);
+    } catch (e) {
+      dialog.current?.close();
+      setMsg({ err: errText(e) });
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <section className="card card-pad ma-compose" aria-labelledby="ma-compose-h">
+      <div className="ma-compose-form">
+        <header className="ma-head">
+          <h2 id="ma-compose-h">New notification</h2>
+          <p>Goes to the lock screen of everyone you choose. Tapping it opens the link in your app.</p>
+        </header>
+        <label className="field">
+          <span>Title <em className="ma-count">{title.length}/80</em></span>
+          <input type="text" value={title} maxLength={80} placeholder="Service times changed this Sunday" onChange={(e) => setTitle(e.target.value)} />
+        </label>
+        <label className="field">
+          <span>Message <em className="ma-count">{body.length}/240</em></span>
+          <textarea rows={3} value={body} maxLength={240} placeholder="We meet at 10:30 this week only. See you there." onChange={(e) => setBody(e.target.value)} />
+        </label>
+        <label className="field">
+          <span>Opens</span>
+          <select value={linkRef} onChange={(e) => setLinkRef(e.target.value)}>
+            <option value="">The app’s home screen</option>
+            {groups.map((g) => (
+              <optgroup key={g} label={g}>
+                {state.links.filter((l) => l.group === g).map((l) => <option key={l.ref} value={l.ref}>{l.label}</option>)}
+              </optgroup>
+            ))}
+            <option value={CUSTOM}>Custom address…</option>
+          </select>
+        </label>
+        {linkRef === CUSTOM && (
+          <label className="field">
+            <span>Address</span>
+            <input className="mono" type="url" value={customUrl} placeholder="/visit or https://example.com" onChange={(e) => setCustomUrl(e.target.value)} />
+          </label>
+        )}
+        {target && <p className="hint ma-linkhint">Opens {target.url}, in the reader’s language when a translation exists.</p>}
+        <fieldset className="ma-audience">
+          <legend>Who gets it</legend>
+          <div className="seg" role="tablist" aria-label="Audience">
+            <button type="button" role="tab" aria-selected={mode === 'all'} onClick={() => setMode('all')}>Everyone</button>
+            <button type="button" role="tab" aria-selected={mode === 'topics'} onClick={() => setMode('topics')}>People following…</button>
+          </div>
+          {mode === 'topics' && (
+            <div className="ma-topics">
+              {state.topics.map((t) => (
+                <label key={t.id} className={`ma-opt${topics.includes(t.id) ? ' on' : ''}`}>
+                  <input type="checkbox" checked={topics.includes(t.id)} onChange={() => toggle(t.id)} />
+                  <span>{t.label}</span>
+                  <em>{(state.stats.topics[t.id] ?? 0).toLocaleString()}</em>
+                </label>
+              ))}
+            </div>
+          )}
+        </fieldset>
+        {msg.ok && <p className="flash" role="status">{msg.ok}</p>}
+        {msg.err && <p className="flash error" role="alert">{msg.err}</p>}
+        <div className="ma-send">
+          <span className="ma-reach">{count === null ? 'Counting…' : count === 0 ? 'No devices match yet' : `Reaches ${plural(count, 'device')}`}</span>
+          <button type="button" className="btn primary" disabled={!!problem || busy} title={problem || undefined} onClick={() => dialog.current?.showModal()}>Send…</button>
+        </div>
+      </div>
+      <LockScreen state={state} title={title} body={body} />
+      <dialog className="modal" ref={dialog} aria-labelledby="ma-confirm-h">
+        <div className="modal-head"><span id="ma-confirm-h">Send to {count === null ? 'these devices' : plural(count, 'device')}?</span>
+          <button type="button" className="modal-x" onClick={() => dialog.current?.close()} aria-label="Close">✕</button></div>
+        <div className="modal-body">
+          <div className="ma-confirm">
+            <b>{title || 'Untitled'}</b>
+            {body && <p>{body}</p>}
+            <small>{mode === 'all' ? 'Everyone with notifications on' : topics.map(topicLabel).join(', ')}{url ? ` · opens ${url}` : ''}</small>
+          </div>
+          <p className="hint modal-note">It arrives within seconds and can’t be recalled.</p>
+          <div className="modal-foot">
+            <button type="button" className="btn" onClick={() => dialog.current?.close()}>Cancel</button>
+            <button type="button" className="btn primary" disabled={busy} onClick={send}>{busy ? 'Sending…' : 'Send now'}</button>
+          </div>
+        </div>
+      </dialog>
+    </section>
+  );
+}
+
+// A phone lock screen with the notification as it will show. Device preview:
+// fixed neutral colors (like the site previews), not admin tokens.
+function LockScreen({ state, title, body }: { state: AdminPushState; title: string; body: string }) {
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => { const t = setInterval(() => setNow(new Date()), 30_000); return () => clearInterval(t); }, []);
+  return (
+    <figure className="ma-preview" aria-label="Lock screen preview">
+      <div className="ma-phone">
+        <div className="ma-phone-screen">
+          <div className="ma-clock">
+            <small>{now.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' })}</small>
+            <b>{now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?[AP]M$/i, '')}</b>
+          </div>
+          <div className="ma-note">
+            <div className="ma-note-top">
+              <span className="ma-appicon" aria-hidden="true">
+                {state.site.icon ? <img src={state.site.icon} alt="" /> : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0" /></svg>
+                )}
+              </span>
+              <span className="ma-appname">{state.site.name || 'Your app'}</span>
+              <span className="ma-now">now</span>
+            </div>
+            <b className="ma-note-title">{title.trim() || 'Your title'}</b>
+            <p className="ma-note-body">{body.trim() || 'Your message appears here.'}</p>
+          </div>
+        </div>
+      </div>
+      <figcaption className="hint">Phones shorten long text; keep the key words first.</figcaption>
+    </figure>
+  );
+}
+
+// ---- automatic ----------------------------------------------------------------
+
+function Automatic({ state, setState }: { state: AdminPushState; setState: (s: AdminPushState) => void }) {
+  const [auto, setAuto] = useState<PushAuto>(state.auto);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+  const dirty = JSON.stringify(auto) !== JSON.stringify(state.auto);
+  const flip = (list: string[], id: string) => (list.includes(id) ? list.filter((x) => x !== id) : [...list, id]);
+  const save = async () => {
+    setBusy(true); setMsg({});
+    try {
+      const r = await api<{ auto: PushAuto; state: AdminPushState }>({ action: 'saveAuto', auto });
+      setState(r.state); setAuto(r.auto); setMsg({ ok: 'Saved.' });
+    } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(false); }
+  };
+  const calendarChoices = (key: 'newEvent' | 'startingSoon') => {
+    const list = auto[key].calendars;
+    const all = list.includes('*');
+    const set = (calendars: string[]) => setAuto({ ...auto, [key]: { ...auto[key], calendars } });
+    return (
+      <div className="ma-choices">
+        <label className="ma-check"><input type="checkbox" checked={all} onChange={() => set(all ? [] : ['*'])} /><span>All public calendars</span></label>
+        {state.calendars.map((c) => (
+          <label key={c.id} className="ma-check"><input type="checkbox" disabled={all} checked={all || list.includes(c.id)} onChange={() => set(flip(list, c.id))} />
+            <span><i className="ma-dot" style={{ background: c.color || 'var(--faint)' }} />{c.name}</span></label>
+        ))}
+      </div>
+    );
+  };
+  return (
+    <section className="card card-pad" aria-labelledby="ma-auto-h">
+      <header className="ma-head">
+        <h2 id="ma-auto-h">Automatic notifications</h2>
+        <p>Sent once, when something goes live for the first time. Edits never notify again.</p>
+      </header>
+      <div className="ma-rules">
+        <div className="ma-rule">
+          <div className="ma-rule-head"><b>New post published</b><small>Title and summary, opens the post.</small></div>
+          <div className="ma-choices">
+            {state.collections.map((c) => (
+              <label key={c.key} className="ma-check"><input type="checkbox" checked={auto.newPost.collections.includes(c.key)}
+                onChange={() => setAuto({ ...auto, newPost: { collections: flip(auto.newPost.collections, c.key) } })} /><span>{c.label}</span></label>
+            ))}
+          </div>
+        </div>
+        {state.calendarEnabled && (
+          <>
+            <div className="ma-rule">
+              <div className="ma-rule-head"><b>New event published</b><small>Name, date and place, opens the event.</small></div>
+              {calendarChoices('newEvent')}
+            </div>
+            <div className="ma-rule">
+              <div className="ma-rule-head"><b>Starting soon</b><small>A reminder before each event time, once per date.</small></div>
+              {calendarChoices('startingSoon')}
+              <label className="field ma-lead">
+                <span>Send</span>
+                <select value={auto.startingSoon.minutes} onChange={(e) => setAuto({ ...auto, startingSoon: { ...auto.startingSoon, minutes: Number(e.target.value) } })}>
+                  {[...new Set([...SOON_MINUTES, auto.startingSoon.minutes])].sort((a, b) => a - b).map((m) => <option key={m} value={m}>{minutesLabel(m)} before</option>)}
+                </select>
+              </label>
+            </div>
+          </>
+        )}
+      </div>
+      {msg.err && <p className="flash error" role="alert">{msg.err}</p>}
+      <div className="form-actions">
+        <button type="button" className="btn" disabled={!dirty || busy} onClick={save}>{busy ? 'Saving…' : 'Save'}</button>
+        {dirty ? <button type="button" className="btn ghost" onClick={() => { setAuto(state.auto); setMsg({}); }}>Discard</button>
+          : msg.ok && <span className="ma-saved" role="status">{msg.ok}</span>}
+      </div>
+    </section>
+  );
+}
+
+// ---- audience -----------------------------------------------------------------
+
+function Audience({ state, topicLabel }: { state: AdminPushState; topicLabel: (id: string) => string }) {
+  const { stats } = state;
+  const rows = [...new Set([...state.topics.map((t) => t.id), ...Object.keys(stats.topics)])]
+    .map((id) => ({ id, n: stats.topics[id] ?? 0 }));
+  const max = Math.max(1, ...rows.map((r) => r.n));
+  return (
+    <section className="card card-pad" aria-labelledby="ma-aud-h">
+      <header className="ma-head">
+        <h2 id="ma-aud-h">Following</h2>
+        <p>Topics people turned on in the app. Everyone gets “Everyone” notifications.</p>
+      </header>
+      <ul className="ma-bars">
+        {rows.map((r) => (
+          <li key={r.id}>
+            <span className="ma-bar-label">{topicLabel(r.id)}<code>{r.id}</code></span>
+            <span className="ma-bar" aria-hidden="true"><i style={{ width: `${(r.n / max) * 100}%` }} /></span>
+            <b>{r.n.toLocaleString()}</b>
+          </li>
+        ))}
+      </ul>
+      <p className="hint ma-aud-note">Your app decides which topics to offer; it reads them from <code>/api/v1/push/topics</code>.</p>
+    </section>
+  );
+}
+
+// ---- delivery log -------------------------------------------------------------
+
+function DeliveryLog({ log, topicLabel }: { log: PushNotification[]; topicLabel: (id: string) => string }) {
+  const now = Date.now();
+  return (
+    <section className="card ma-log" aria-labelledby="ma-log-h">
+      <header className="ma-head card-pad ma-log-head">
+        <h2 id="ma-log-h">Delivery log</h2>
+        <p>The last 50 notifications. Failures update after Expo reports back (about 15 minutes).</p>
+      </header>
+      {!log.length ? <p className="ma-empty">Nothing sent yet.</p> : (
+        <div className="ma-scroll">
+          <table className="list ma-table">
+            <thead><tr><th>Sent</th><th>Notification</th><th>Audience</th><th>From</th><th className="num">Delivered</th></tr></thead>
+            <tbody>
+              {log.map((n) => (
+                <tr key={n.id}>
+                  <td data-l="Sent" className="ma-when">{ago(n.createdAt, now)}</td>
+                  <td data-l="Notification">
+                    <div className="t-title">{n.title}</div>
+                    {n.body && <div className="ma-body">{n.body}</div>}
+                    {n.url && <div className="t-sub ma-url">{n.url}</div>}
+                  </td>
+                  <td data-l="Audience" className="ma-aud">{n.topics.map(topicLabel).join(', ')}</td>
+                  <td data-l="From">{SOURCE[n.source]}{n.source === 'manual' && n.author ? ` ${n.author}` : n.source === 'manual' ? ' an owner' : ''}</td>
+                  <td data-l="Delivered" className="num ma-result">
+                    {n.status === 'sending' ? <span className="ma-st" data-tone="info">Sending…</span>
+                      : !n.recipients ? <span className="ma-st">No devices</span>
+                      : <>
+                          <span className="ma-st" data-tone={n.status === 'failed' ? 'bad' : n.failed ? 'warn' : 'ok'}>{n.ok.toLocaleString()} of {n.recipients.toLocaleString()}</span>
+                          {(n.failed > 0 || n.removed > 0) && <small>{n.failed ? `${n.failed} failed` : ''}{n.failed && n.removed ? ' · ' : ''}{n.removed ? `${n.removed} removed` : ''}</small>}
+                          {n.error && <small className="ma-err" title={n.error}>{n.error}</small>}
+                        </>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}