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

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>
+  );
+}

package/src/components/ThemeSections.astro

@@ -5,49 +5,68 @@ import { getTheme } from '../lib/theme';
 import { getRepo } from '../lib/repo';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { sectionIssues } from '../theme-sdk/contract.mjs';
+import { migrateSection, resolveSectionData, wallNow, withExample } from '../lib/sections';
+import { scheduledVisible, localizeData } from '../theme-sdk/fields.mjs';
+import { I18N, requestLocale } from '../lib/i18n';
+import { resolvePreview } from '../lib/designPreview';
 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 }
+interface Props { page: Page; settings: Settings; editable?: boolean; locale?: string }
 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 ?? '']));
+// admin design preview: sections carry their ids so the Design screen can
+// open the one you click (see Site.astro's preview script)
+const editable = Astro.props.editable ?? (await resolvePreview(Astro.url, Astro.cookies, Astro.locals)).role === 'admin';
+const locale = Astro.props.locale ?? requestLocale(Astro.url, Astro.locals);
+const now = Date.now();
+const nowWall = wallNow(settings.timezone || 'UTC', now);
+// another language: dates/times format in it (components read settings.locale)
+const localized = locale !== I18N.defaultLocale && I18N.locales.includes(locale);
+const view = localized ? { ...settings, locale } : settings;
+const sections = await Promise.all(layout.sections.map(async (stored) => {
+  // older instances upgrade through the theme's migrations/<type>.mjs, if any
+  const migrated = migrateSection(theme, stored);
+  const definition = theme.sections[migrated.type];
+  // scheduled sections: outside their window they're hidden for visitors;
+  // the admin preview still shows them (marked) so they can be edited
+  const offSchedule = !scheduledVisible(migrated, nowWall);
+  const example = editable && definition ? withExample(definition, migrated.data) : { data: migrated.data, used: false };
+  // validity is judged on the main-language data (translations are words only)
+  const invalid = migrated.hidden || (offSchedule && !editable) || sectionIssues({ mode: 'sections', sections: [{ ...migrated, data: example.data as typeof migrated.data }] }, theme.sections).length > 0;
+  // another language: its translated words over the shared facts
+  const words = definition && localized && migrated.translations?.[locale] ? localizeData(definition, example.data, migrated.translations[locale]) : example.data;
+  const data = definition && !invalid ? await resolveSectionData(definition, words, { repo, settings: view, now }) : {};
+  const section = migrated;
   const collection = String(data.collection || 'posts');
-  const posts = section.type === 'posts' && !section.hidden && !invalid && CONTENT.collections[collection]
+  const posts = section.type === 'posts' && !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 };
+  const items = Array.isArray(data.items) ? (data.items as { title?: string; text?: string }[]) : [];
+  return { ...section, data, invalid, posts, items, offSchedule, exampleUsed: example.used, Template: theme.sectionTemplates[section.type] as any };
 }));
+const hero = (d: Record<string, unknown>) => ({ image: String(d.image ?? ''), href: String(d.href ?? '') });
 ---
 <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} /> : (
+  {sections.filter(s => !s.hidden && !s.invalid).map(({ id, type, variant, data, Template, posts, items, offSchedule, exampleUsed }) => (
+    <section id={`section-${id}`} class:list={['acms-section', `section-${type}`, `variant-${variant}`, { 'acms-off-schedule': editable && offSchedule }]} data-acms-section={editable ? id : undefined} data-acms-page={editable ? page.id : undefined} data-acms-label={editable ? `${theme.sections[type]?.name ?? type}${offSchedule ? ' · not showing now (scheduled)' : exampleUsed ? ' · example text' : ''}` : undefined}>
+      {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={view} 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>}
+            {data.label && hero(data).href && <a class="w-btn primary" href={hero(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" />}
+          {type === 'hero' && hero(data).image && <img class="section-image" src={hero(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>;
-              })}
+              {items.filter(row => row.title || row.text).map((row) => type === 'faq'
+                ? <details><summary>{row.title}</summary><p>{row.text}</p></details>
+                : <article><h3>{row.title}</h3><p>{row.text}</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>}