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

package/src/components/sections/SectionPicker.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+// "Add a section": a searchable grid grouped by category. Thumbnails are the
+// real section rendered with its schema `example` (GET /admin/section-preview)
+// at desktop width, scaled down; they load lazily as tiles scroll into view.
+
+export interface PickerDef {
+  name?: string; description?: string; category?: string; limit?: number; variants?: string[];
+  presets?: { name: string; description?: string; variant?: string; data: Record<string, unknown> }[];
+}
+export interface PickerChoice { type: string; variant?: string; data?: Record<string, unknown>; label: string }
+
+interface Entry extends PickerChoice { key: string; description: string; category: string; full: boolean; coded: boolean }
+
+const FRAME_W = 1280;
+const FRAME_H = 760;
+
+export function SectionPicker({ open, defs, coded, counts, theme, onClose, onPick }: {
+  open: boolean;
+  defs: Record<string, PickerDef>;
+  coded: Set<string>;
+  /** how many of each type the page already has (for per-page limits) */
+  counts: Record<string, number>;
+  theme: string;
+  onClose: () => void;
+  onPick: (choice: PickerChoice) => void;
+}) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const [q, setQ] = useState('');
+  const [cat, setCat] = useState('All');
+  const [sel, setSel] = useState<string | null>(null);
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return;
+    if (open && !d.open) { d.showModal(); setQ(''); setSel(null); }
+    if (!open && d.open) d.close();
+  }, [open]);
+
+  const entries = useMemo<Entry[]>(() => Object.entries(defs)
+    .filter(([type]) => type !== 'page-content' || !counts[type])
+    .flatMap(([type, d]) => {
+      const category = d.category || (coded.has(type) ? 'More' : 'Basic');
+      const full = Boolean(d.limit && (counts[type] ?? 0) >= d.limit);
+      const base: Entry = { key: type, type, label: d.name || type, description: d.description || '', category, full, coded: coded.has(type) };
+      const presets = (d.presets ?? []).map((p, i): Entry => ({ ...base, key: `${type}#${i}`, label: p.name, description: p.description || `${d.name || type}, ready to fill in`, variant: p.variant, data: p.data }));
+      return [base, ...presets];
+    })
+    // the theme's own sections first; generic built-ins last
+    .sort((a, b) => Number(a.category === 'Basic') - Number(b.category === 'Basic')), [defs, coded, counts]);
+  const cats = useMemo(() => ['All', ...[...new Set(entries.map((e) => e.category))].sort((a, b) => (a === 'Basic' ? 1 : b === 'Basic' ? -1 : a.localeCompare(b)))], [entries]);
+  const shown = entries.filter((e) => (cat === 'All' || e.category === cat) && (!q || `${e.label} ${e.description} ${e.category}`.toLowerCase().includes(q.toLowerCase())));
+  const chosen = entries.find((e) => e.key === sel && !e.full);
+  const pick = (e: Entry | undefined) => { if (!e || e.full) return; onPick({ type: e.type, variant: e.variant, data: e.data, label: e.label }); onClose(); };
+
+  return (
+    <dialog ref={ref} className="modal te-picker" aria-labelledby="te-picker-title" onClose={onClose} onClick={(e) => { if (e.target === ref.current) onClose(); }}>
+      <div className="modal-head">
+        <span id="te-picker-title">Add a section</span>
+        <input className="te-picker-search" type="search" placeholder="Search sections…" aria-label="Search sections" value={q} onChange={(e) => setQ(e.target.value)} autoFocus />
+        <button className="modal-x" type="button" onClick={onClose} aria-label="Close">✕</button>
+      </div>
+      <div className="te-picker-body">
+        <nav className="te-picker-cats" aria-label="Categories">
+          {cats.map((c) => (
+            <button key={c} type="button" className={c === cat ? 'on' : ''} aria-pressed={c === cat} onClick={() => setCat(c)}>{c}</button>
+          ))}
+        </nav>
+        <div className="te-picker-grid" role="listbox" aria-label="Sections">
+          {shown.length === 0 && <p className="te-muted">No sections match “{q}”.</p>}
+          {shown.map((e) => (
+            <button
+              key={e.key}
+              type="button"
+              role="option"
+              aria-selected={sel === e.key}
+              aria-disabled={e.full}
+              className={`te-tile ${sel === e.key ? 'on' : ''} ${e.full ? 'is-full' : ''}`}
+              onClick={() => setSel(e.key)}
+              onDoubleClick={() => pick(e)}
+            >
+              <Thumb type={e.type} variant={e.variant} theme={theme} />
+              <span className="te-tile-text">
+                <b>{e.label}</b>
+                <span>{e.full ? 'Already on this page' : e.description}</span>
+                {e.coded && <em>coded</em>}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="modal-foot te-picker-foot">
+        <button className="btn ghost" type="button" onClick={onClose}>Cancel</button>
+        <button className="btn primary" type="button" disabled={!chosen} onClick={() => pick(chosen)}>
+          {chosen ? `Add ${chosen.label}` : 'Choose a section'}
+        </button>
+      </div>
+    </dialog>
+  );
+}
+
+function Thumb({ type, variant, theme }: { type: string; variant?: string; theme: string }) {
+  const box = useRef<HTMLSpanElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [scale, setScale] = useState(0.18);
+  useEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } }, { rootMargin: '120px' });
+    io.observe(el);
+    const ro = new ResizeObserver(() => setScale(el.clientWidth / FRAME_W));
+    ro.observe(el);
+    return () => { io.disconnect(); ro.disconnect(); };
+  }, []);
+  const src = `/admin/section-preview?type=${encodeURIComponent(type)}&theme=${encodeURIComponent(theme)}${variant ? `&variant=${encodeURIComponent(variant)}` : ''}`;
+  return (
+    <span className="te-thumb-frame" ref={box} aria-hidden="true">
+      {visible && <iframe src={src} title="" tabIndex={-1} loading="lazy" style={{ width: FRAME_W, height: FRAME_H, transform: `scale(${scale})` }} />}
+    </span>
+  );
+}

package/src/components/sections/TranslationPanel.tsx

@@ -0,0 +1,143 @@
+import { translationUnits, unitStatus, translationSummary, textHash } from '../../theme-sdk/fields.mjs';
+import { RichTextInput, type FieldDef } from './SectionFields';
+
+// Translation mode for Design → Pages: a section's words in another language,
+// English beside each one. Facts (times, photos, links, linked events) are
+// shared and not shown here. Every value carries a state:
+//   AI draft  — machine-written, shown to visitors, flagged for review
+//   reviewed  — a person wrote or approved it; never overwritten by AI
+//   outdated  — the English changed since (source hash differs)
+
+export interface Translation { data: Record<string, string | number | boolean>; meta: Record<string, { state: 'ai' | 'reviewed'; src: string }> }
+interface Def { name?: string; fields?: Record<string, FieldDef> }
+interface Inst { id: string; type: string; data: Record<string, unknown>; translations?: Record<string, Translation>; locked?: boolean }
+export interface Unit { path: string; label: string; kind: string; source: string; hash: string }
+
+export const STATUS_LABEL: Record<string, string> = { missing: 'Not translated', ai: 'AI draft', reviewed: 'Reviewed', outdated: 'English changed' };
+
+export const sectionUnits = (def: Def, s: Inst): Unit[] => translationUnits(def, s.data) as Unit[];
+export const sectionSummary = (def: Def, s: Inst, lang: string) => translationSummary(def, s.data, s.translations?.[lang]) as { total: number; missing: number; ai: number; reviewed: number; outdated: number };
+
+/** set one translated value (+ state) on a section, immutably */
+export function withTranslation(s: Inst, lang: string, unit: Unit, value: string, state: 'ai' | 'reviewed'): Inst {
+  const t: Translation = s.translations?.[lang] ?? { data: {}, meta: {} };
+  const data = { ...t.data };
+  const meta = { ...t.meta };
+  if (value.trim()) { data[unit.path] = value; meta[unit.path] = { state, src: unit.hash }; }
+  else { delete data[unit.path]; delete meta[unit.path]; }
+  return { ...s, translations: { ...(s.translations ?? {}), [lang]: { data, meta } } };
+}
+
+/** mark a value right for the current English (reviewed) without changing it */
+export function confirmTranslation(s: Inst, lang: string, unit: Unit): Inst {
+  const t = s.translations?.[lang];
+  const value = t?.data?.[unit.path];
+  return value === undefined ? s : withTranslation(s, lang, unit, String(value), 'reviewed');
+}
+
+/** units a machine should (re)draft: missing, or outdated AI drafts. Reviewed text is never overwritten. */
+export function unitsToDraft(def: Def, s: Inst, lang: string, includeOutdatedReviewed = false): Unit[] {
+  const t = s.translations?.[lang];
+  return sectionUnits(def, s).filter((u) => {
+    const st = unitStatus(u, t);
+    return st === 'missing' || (st === 'outdated' && (includeOutdatedReviewed || t?.meta?.[u.path]?.state !== 'reviewed'));
+  });
+}
+
+/** ask the server for machine drafts; returns id → text */
+export async function requestDrafts(lang: string, items: { id: string; unit: Unit }[]): Promise<Record<string, string>> {
+  if (!items.length) return {};
+  const res = await fetch('/api/design/translate', {
+    method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' },
+    body: JSON.stringify({ locale: lang, units: items.map(({ id, unit }) => ({ id, text: unit.source, kind: unit.kind, label: unit.label })) }),
+  });
+  const body = await res.json().catch(() => ({})) as { results?: Record<string, string>; error?: string };
+  if (!res.ok) throw new Error(body.error || `Translation failed (${res.status}).`);
+  return body.results ?? {};
+}
+
+/**
+ * Guided merge: copy the words of a separately authored home page in another
+ * language (the older setup) into this page's translations. Sections match by
+ * type in order; list rows by position. Matched values are marked reviewed.
+ */
+export function planMerge(defs: Record<string, Def>, target: Inst[], separate: Inst[], lang: string) {
+  const used = new Set<number>();
+  let copied = 0, unmatched = 0;
+  const next = target.map((s) => {
+    const def = defs[s.type];
+    if (!def) return s;
+    const idx = separate.findIndex((x, i) => !used.has(i) && x.type === s.type);
+    if (idx < 0) { unmatched++; return s; }
+    used.add(idx);
+    const other = separate[idx];
+    let out = s;
+    // the other page's own words at the same path (its rows by position)
+    const theirs = new Map((translationUnits(def, other.data) as Unit[]).map((u) => [normalizePath(u.path, other), u.source]));
+    for (const u of sectionUnits(def, s)) {
+      const v = theirs.get(normalizePath(u.path, s));
+      if (v && v !== u.source && !s.translations?.[lang]?.data?.[u.path]) { out = withTranslation(out, lang, u, v, 'reviewed'); copied++; }
+    }
+    return out;
+  });
+  return { sections: next, copied, unmatched };
+}
+// "services.r4k2.note" → "services.<row index>.note" so rows match by position
+function normalizePath(path: string, s?: Inst) {
+  const [key, rid, sub] = path.split('.');
+  if (!sub) return path;
+  if (rid.startsWith('#')) return `${key}.${rid.slice(1)}.${sub}`;
+  const rows = (s?.data?.[key] ?? []) as { _id?: string }[];
+  const i = rows.findIndex((r) => r?._id === rid);
+  return `${key}.${i < 0 ? rid : i}.${sub}`;
+}
+
+export function TranslationFields({ def, section, lang, langName, readOnly, busyPaths, onSet, onConfirm, onDraft }: {
+  def: Def; section: Inst; lang: string; langName: string; readOnly: boolean;
+  busyPaths: Set<string>;
+  onSet: (unit: Unit, value: string) => void;
+  onConfirm: (unit: Unit) => void;
+  onDraft: ((units: Unit[]) => void) | null;
+}) {
+  const units = sectionUnits(def, section);
+  const t = section.translations?.[lang];
+  if (!units.length) return <p className="te-muted">Nothing to translate here: this section has no words of its own (times, photos and linked content are shared).</p>;
+  return (
+    <div className="te-tr">
+      <div className="te-tr-head" aria-hidden="true"><span>English</span><span>{langName}</span></div>
+      {units.map((u) => {
+        const st = unitStatus(u, t);
+        const value = String(t?.data?.[u.path] ?? '');
+        const id = `tr-${section.id}-${u.path.replace(/[^a-z0-9]/gi, '-')}`;
+        const busy = busyPaths.has(`${section.id}::${u.path}`);
+        return (
+          <div key={u.path} className={`te-tr-row is-${st}`}>
+            <div className="te-tr-src">
+              <label htmlFor={id}>{u.label}</label>
+              {u.kind === 'richtext' ? <div className="te-tr-srctext" dangerouslySetInnerHTML={{ __html: u.source }} /> : <div className="te-tr-srctext">{u.source}</div>}
+            </div>
+            <div className="te-tr-dst">
+              <span className={`te-tr-state is-${st}`}>{busy ? 'Translating…' : STATUS_LABEL[st]}</span>
+              {u.kind === 'richtext' ? (
+                <fieldset disabled={readOnly} className="te-tr-rich"><RichTextInput id={id} value={value} onChange={(v) => onSet(u, String(v ?? ''))} /></fieldset>
+              ) : u.kind === 'textarea' ? (
+                <textarea id={id} rows={3} value={value} disabled={readOnly} placeholder={st === 'missing' ? `${langName}…` : ''} onChange={(e) => onSet(u, e.target.value)} />
+              ) : (
+                <input id={id} type="text" value={value} disabled={readOnly} placeholder={st === 'missing' ? `${langName}…` : ''} onChange={(e) => onSet(u, e.target.value)} />
+              )}
+              {!readOnly && (
+                <span className="te-tr-actions">
+                  {(st === 'ai' || st === 'outdated') && <button type="button" onClick={() => onConfirm(u)}>{st === 'ai' ? '✓ Looks right' : '✓ Still right'}</button>}
+                  {onDraft && st !== 'reviewed' && <button type="button" disabled={busy} onClick={() => onDraft([u])}>{st === 'missing' ? 'Translate with AI' : 'Re-translate'}</button>}
+                  {onDraft && st === 'reviewed' && <button type="button" className="quiet" disabled={busy} onClick={() => onDraft([u])}>Re-translate</button>}
+                </span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export { textHash };

package/src/components/sections/checks.ts

@@ -0,0 +1,64 @@
+import { fieldVisible, normalizeData, normalizeValue, valueIssues, translationSummary } from '../../theme-sdk/fields.mjs';
+import type { FieldDef, SectionTargets } from './SectionFields';
+
+// Pre-publish checklist for section layouts. Errors (invalid values) block
+// publishing; warnings (missing image descriptions, dead-end buttons, links
+// to unpublished pages) can be published anyway.
+
+export interface Check { level: 'error' | 'warn'; pageId: string; sectionId: string; section: string; message: string }
+interface Def { name?: string; fields?: Record<string, FieldDef> }
+interface Instance { id: string; type: string; hidden: boolean; data: Record<string, unknown>; translations?: Record<string, unknown> }
+interface Layout { mode: string; sections: Instance[] }
+
+// the image's description field: "<key>Alt" (e.g. photoAlt), else a sibling "alt"
+const altFor = (key: string, fields: Record<string, FieldDef>) => [`${key}Alt`, 'alt'].find((k) => k !== key && k in fields);
+
+export function checkLayouts(pages: Record<string, Layout>, defs: Record<string, Def>, targets: SectionTargets, only?: { pageId: string; sectionId?: string }): Check[] {
+  const out: Check[] = [];
+  const live = new Set(targets.links.map((l) => l.ref));
+  for (const [pageId, layout] of Object.entries(pages)) {
+    if (only && only.pageId !== pageId) continue;
+    if (layout.mode !== 'sections') continue;
+    for (const s of layout.sections) {
+      if (s.hidden || (only?.sectionId && only.sectionId !== s.id)) continue;
+      const def = defs[s.type];
+      if (!def) continue;
+      const name = def.name || s.type;
+      const add = (level: Check['level'], message: string) => out.push({ level, pageId, sectionId: s.id, section: name, message });
+      const fields = def.fields ?? {};
+      const data = normalizeData(def, s.data) as Record<string, unknown>;
+      const scan = (scopeFields: Record<string, FieldDef>, scope: Record<string, unknown>, where: string) => {
+        for (const [key, f] of Object.entries(scopeFields)) {
+          if (!fieldVisible(f, scope)) continue;
+          const v = normalizeValue(f, scope[key]);
+          if (f.type === 'image' && typeof v === 'string' && v.trim()) {
+            const alt = altFor(key, scopeFields);
+            if (alt && !String(scope[alt] ?? '').trim()) add('warn', `${where}${f.label} has no description for screen readers`);
+          }
+          if (f.type === 'link' && v && typeof v === 'object') {
+            const l = v as { label?: string; href?: string; ref?: string };
+            const label = String(l.label ?? '').trim(), href = String(l.href ?? '').trim();
+            if (label && !href) add('warn', `${where}“${label}” button doesn’t go anywhere`);
+            if (!label && href) add('warn', `${where}${f.label} has a destination but no text, so it won’t show`);
+            if (l.ref && !live.has(l.ref)) add('warn', `${where}“${label || f.label}” links to a page that isn’t published`);
+          }
+          if (f.type === 'list' && Array.isArray(v)) {
+            (v as Record<string, unknown>[]).forEach((row, i) => scan(f.fields, row, `${where}${f.label} ${i + 1} › `));
+          }
+        }
+      };
+      for (const [key, f] of Object.entries(fields)) {
+        if (fieldVisible(f, data)) for (const m of valueIssues(f, data[key])) add('error', m);
+      }
+      scan(fields, data, '');
+      // other languages: missing or stale translations (visitors see the main language there)
+      for (const l of targets.i18n?.locales ?? []) {
+        const sum = translationSummary(def, s.data, s.translations?.[l.code]) as { total: number; missing: number; outdated: number; ai: number };
+        if (!sum.total) continue;
+        const bits = [sum.missing && `${sum.missing} not translated`, sum.outdated && `${sum.outdated} out of date`, sum.ai && `${sum.ai} AI ${sum.ai === 1 ? 'draft' : 'drafts'} not reviewed`].filter(Boolean);
+        if (bits.length) add('warn', `${l.name}: ${bits.join(', ')}`);
+      }
+    }
+  }
+  return out;
+}

package/src/layouts/Admin.astro

@@ -1,8 +1,10 @@
 ---
+import { roleLabels } from '../lib/roles';
 import { getRepo } from '../lib/repo';
 import { BRAND } from '../lib/brand';
 import { CONTENT } from '../lib/content';
 import { CALENDAR, bookingsEnabled } from '../lib/calendar/config';
+import { PUSH } from '../lib/push/config';
 import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../lib/auth';
 import ThemeScript from '../components/ThemeScript.astro';
 import CommandPalette from '../components/CommandPalette';
@@ -31,7 +33,7 @@ const [pages, posts, links, home, settings, sessionUser] = await Promise.all([
 const pendingBookings = bookingsEnabled() ? (await repo.listBookings({ from: Date.now(), statuses: ['pending'] })).length : 0;
 const me = {
   name: sessionUser?.name || 'Admin',
-  role: sessionUserId === OWNER_ENV ? 'Owner' : sessionUser?.role === 'owner' ? 'Owner' : 'Editor',
+  role: roleLabels[sessionUserId === OWNER_ENV ? 'owner' : sessionUser?.role ?? 'editor'],
   avatar: sessionUser?.avatar || '',
 };
 const initials = me.name.split(/\s+/).map((w) => w[0] ?? '').join('').slice(0, 2).toUpperCase();
@@ -67,6 +69,7 @@ const icons: Record<string, string> = {
   bookings: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
   resources: 'M3 21V9l9-5 9 5v12M9 21v-6h6v6',
   plug: 'M9 7V3M15 7V3M6 7h12v4a6 6 0 0 1-12 0zM12 17v4',
+  phone: 'M7 2.5h10a1.5 1.5 0 0 1 1.5 1.5v16a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 20V4A1.5 1.5 0 0 1 7 2.5zM10.5 18.5h3',
 };
 
 // one sidebar entry per configured collection, in config order
@@ -106,15 +109,14 @@ const groups: { id: string; label: string; items: Item[] }[] = [
     ? [{
         id: 'calendar',
         label: 'Calendar',
+        // two homes: Schedule (anything on a date — grid, list, calendar
+        // settings) and Bookings (anything people reserve — requests, rooms &
+        // people, booking links). Sub-pages highlight their home.
         items: [
-          { key: 'calendar:events', label: 'Events', href: '/admin/calendar/events', icon: icons.calendar, count: null },
+          { key: 'calendar:schedule', label: 'Schedule', href: '/admin/calendar', icon: icons.calendar, count: null },
           ...(bookingsEnabled()
-            ? [
-                { key: 'calendar:bookings', label: 'Bookings', href: '/admin/calendar/bookings', icon: icons.bookings, count: pendingBookings || null, attention: pendingBookings > 0 },
-                { key: 'calendar:resources', label: 'Resources', href: '/admin/calendar/resources', icon: icons.resources, count: null },
-              ]
+            ? [{ key: 'calendar:bookings', label: 'Bookings', href: '/admin/calendar/bookings', icon: icons.bookings, count: pendingBookings || null, attention: pendingBookings > 0 }]
             : []),
-          { key: 'calendar:calendars', label: 'Calendars', href: '/admin/calendar/calendars', icon: icons.calendars, count: null },
         ],
       }]
     : []),
@@ -125,6 +127,8 @@ const groups: { id: string; label: string; items: Item[] }[] = [
       { key: 'design', label: 'Design', href: '/admin/design', icon: icons.design, count: null },
       { key: 'navigation', label: 'Navigation', href: '/admin/navigation', icon: icons.navigation, count: null },
       { key: 'links', label: 'Links page', href: '/admin/links', icon: icons.links, count: links.length },
+      // push notifications: only when acms({ mobile: { push } }) is on, owners only
+      ...(PUSH.enabled && me.role === 'Owner' ? [{ key: 'mobile', label: 'Mobile app', href: '/admin/mobile', icon: icons.phone, count: null }] : []),
     ],
   },
   {