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

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
@@ -125,6 +128,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 }] : []),
     ],
   },
   {

package/src/layouts/Site.astro

@@ -5,7 +5,7 @@ import { resolveDesign } from '../lib/theme';
 import { siteOrigin, absUrl, canonicalPath } from '../lib/seo';
 import { siteLang } from '../lib/dates';
 import { CONTENT } from '../lib/content';
-import { I18N, localeFromPath, localeHomeUrl } from '../lib/i18n';
+import { I18N, localeFromPath, localeHomeUrl, localePath, requestLocale, stripLocale } from '../lib/i18n';
 import { LEGAL } from '../lib/legal';
 import { SEARCH } from '../lib/search-config';
 import { searchStrings } from '../lib/search-i18n';
@@ -89,7 +89,8 @@ const tokens = design.tokens;
 // the visitor scheme toggle only exists when the theme follows the OS
 const schemeToggle = tokens.scheme === 'auto';
 
-const current = Astro.url.pathname;
+// the path the visitor sees (/es/… is rewritten to the shared route by the middleware)
+const current = (Astro.locals as { acmsPath?: string }).acmsPath ?? Astro.url.pathname;
 const fullTitle = exactTitle && title ? title : title ? `${title} · ${settings.siteTitle}` : settings.siteTitle;
 // the columns footer already shows the tagline beside the brand, so its
 // default bottom line is just the copyright
@@ -113,7 +114,11 @@ const canonical = origin + canonicalPath(current);
 const metaDescription = description || settings.tagline || undefined;
 // with i18n configured, the request path decides the document language; the
 // locale setting (a date-formatting concern) stays the fallback
-const reqLocale = I18N.enabled ? localeFromPath(current) : '';
+const reqLocale = I18N.enabled ? requestLocale(new URL(current, Astro.url), Astro.locals) : '';
+// same page, other language; internal links stay in the visitor's language
+const barePath = stripLocale(current);
+const inLang = reqLocale && reqLocale !== I18N.defaultLocale ? reqLocale : '';
+const lnk = (url: string) => (inLang && /^\/(?!\/|media\/|rss\.xml|sitemap|admin|api|_)/.test(url) ? localePath(url, inLang) : url);
 const htmlLang = reqLocale || siteLang(settings);
 // search modal chrome: strings follow the document language, the form's
 // no-JS fallback goes to the (locale-prefixed) /search page
@@ -131,9 +136,9 @@ const readLinks = [
   ...(SEARCH.enabled ? [{ label: 'Search', url: searchAction }] : []),
   { label: 'RSS', url: '/rss.xml' },
 ];
-// hreflang alternates connect the per-language home pages; other routes have
-// no language twins yet, so alternates are emitted only on home paths
-const isHomePath = I18N.enabled && I18N.locales.some((l) => current === localeHomeUrl(l));
+// hreflang alternates: every public page exists in each language (translated
+// words where available, the main language otherwise)
+const isHomePath = I18N.enabled && !noindex && !bare;
 // analytics tags render wherever headCode does (bare pages and previews too)
 const analyticsHtml = analyticsHead(settings);
 const analyticsBodyHtml = analyticsBody(settings);
@@ -165,9 +170,9 @@ const homeJsonLd =
     {noindex && <meta name="robots" content="noindex" />}
     <link rel="canonical" href={canonical} />
     {isHomePath && I18N.locales.map((l) => (
-      <link rel="alternate" hreflang={l} href={origin + localeHomeUrl(l)} />
+      <link rel="alternate" hreflang={l} href={origin + localePath(barePath, l)} />
     ))}
-    {isHomePath && <link rel="alternate" hreflang="x-default" href={origin + '/'} />}
+    {isHomePath && <link rel="alternate" hreflang="x-default" href={origin + barePath} />}
     {settings.siteFavicon && <link rel="icon" href={settings.siteFavicon} type={faviconType} />}
     <link rel="alternate" type="application/rss+xml" title={settings.siteTitle} href={`${origin}/rss.xml`} />
     <link rel="sitemap" href={`${origin}/sitemap.xml`} />
@@ -250,8 +255,8 @@ const homeJsonLd =
           <nav class="site-nav" aria-label="Main">
             {headerLinks.map((n) => (
               <a
-                href={n.url}
-                aria-current={isCurrent(n.url) ? 'page' : undefined}
+                href={lnk(n.url)}
+                aria-current={isCurrent(lnk(n.url)) ? 'page' : undefined}
                 target={isExternal(n.url) ? '_blank' : undefined}
                 rel={isExternal(n.url) ? 'noopener' : undefined}
               >{n.label}</a>
@@ -270,7 +275,7 @@ const homeJsonLd =
               <span class="lang-switch" role="group" aria-label="Language">
                 {I18N.locales.map((l) => (
                   <a
-                    href={localeHomeUrl(l)}
+                    href={localePath(barePath, l)}
                     lang={l}
                     class:list={[{ on: l === (reqLocale || I18N.defaultLocale) }]}
                     aria-current={l === (reqLocale || I18N.defaultLocale) ? 'true' : undefined}
@@ -297,8 +302,8 @@ const homeJsonLd =
         <nav aria-label="Main">
           {headerLinks.map((n) => (
             <a
-              href={n.url}
-              aria-current={isCurrent(n.url) ? 'page' : undefined}
+              href={lnk(n.url)}
+              aria-current={isCurrent(lnk(n.url)) ? 'page' : undefined}
               target={isExternal(n.url) ? '_blank' : undefined}
               rel={isExternal(n.url) ? 'noopener' : undefined}
             >{n.label}<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg></a>
@@ -308,7 +313,7 @@ const homeJsonLd =
           {I18N.enabled ? (
             <span class="lang-switch" role="group" aria-label="Language">
               {I18N.locales.map((l) => (
-                <a href={localeHomeUrl(l)} lang={l} class:list={[{ on: l === (reqLocale || I18N.defaultLocale) }]}>{l.toUpperCase()}</a>
+                <a href={localePath(barePath, l)} lang={l} class:list={[{ on: l === (reqLocale || I18N.defaultLocale) }]}>{l.toUpperCase()}</a>
               ))}
             </span>
           ) : <span />}
@@ -553,6 +558,89 @@ const homeJsonLd =
         })();
       </script>
     )}
+    {preview.role === 'admin' && !bare && (
+      <script is:inline>
+        addEventListener('DOMContentLoaded', () => {
+          // Click-to-edit + live preview for coded sections (admin preview
+          // only). Inside the Design screen's iframe a click opens that
+          // section's form and unsaved edits are swapped in as you type; in
+          // a normal tab the chip links to the Design screen instead.
+          const framed = window.top !== window;
+          if (!document.querySelector('[data-acms-section]') && !framed) return;
+          const css = document.createElement('style');
+          css.textContent = `
+            [data-acms-section]{position:relative;transition:outline-color .12s}
+            [data-acms-section]:hover,[data-acms-section].acms-sel{outline:2px solid rgb(238 93 32/.55);outline-offset:-2px}
+            [data-acms-section].acms-sel{outline-color:#ee5d20}
+            ${framed ? '[data-acms-section]{cursor:pointer}' : ''}
+            .acms-edit-chip{position:absolute;top:8px;right:8px;z-index:50;display:none;align-items:center;gap:6px;font:600 12px/1 system-ui,sans-serif;
+              background:#ee5d20;color:#fff;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;text-decoration:none;box-shadow:0 2px 8px rgb(0 0 0/.18)}
+            [data-acms-section]:hover>.acms-edit-chip,[data-acms-section].acms-sel>.acms-edit-chip,.acms-edit-chip:focus-visible{display:inline-flex}
+            @keyframes acms-flash{from{box-shadow:inset 0 0 0 9999px rgb(238 93 32/.10)}to{box-shadow:inset 0 0 0 9999px rgb(238 93 32/0)}}
+            .acms-flash{animation:acms-flash .9s ease-out}`;
+          document.head.append(css);
+          let selected = null;
+          const open = (el) => {
+            const msg = { type: 'acms-section-edit', pageId: el.dataset.acmsPage, sectionId: el.dataset.acmsSection };
+            if (framed) { parent.postMessage(msg, location.origin); select(el.dataset.acmsSection, false); }
+            else location.href = `/admin/design?page=${encodeURIComponent(msg.pageId)}&section=${encodeURIComponent(msg.sectionId)}#pages`;
+          };
+          const select = (id, scroll) => {
+            selected = id;
+            for (const el of document.querySelectorAll('[data-acms-section]')) {
+              const on = el.dataset.acmsSection === id;
+              el.classList.toggle('acms-sel', on);
+              if (on && scroll) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+          };
+          const decorate = (root) => {
+            for (const el of root.querySelectorAll('[data-acms-section]')) {
+              if (el.querySelector(':scope > .acms-edit-chip')) continue;
+              const chip = document.createElement('button');
+              chip.type = 'button';
+              chip.className = 'acms-edit-chip';
+              chip.textContent = `Edit · ${el.dataset.acmsLabel || 'section'}`;
+              chip.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); open(el); });
+              el.append(chip);
+              if (framed) el.addEventListener('click', (e) => {
+                if (e.target.closest('a,button,input,select,textarea,summary,label,video,iframe')) return;
+                open(el);
+              });
+            }
+          };
+          decorate(document);
+          // live preview: the editor sends a freshly rendered document for
+          // the page with its unsaved layout; swap the sections in place
+          const swap = (html) => {
+            const doc = new DOMParser().parseFromString(html, 'text/html');
+            const next = doc.querySelector('.acms-sections');
+            const current = document.querySelector('.acms-sections');
+            if (!next || !current) { parent.postMessage({ type: 'acms-preview-stale' }, location.origin); return; }
+            // styles for section types that weren't on the page yet
+            const have = new Set([...document.querySelectorAll('head style, head link[rel=stylesheet]')].map((n) => n.outerHTML));
+            for (const n of doc.querySelectorAll('head style, head link[rel=stylesheet]')) if (!have.has(n.outerHTML)) document.head.append(document.importNode(n, true));
+            const before = new Map([...current.querySelectorAll(':scope > [data-acms-section]')].map((el) => [el.dataset.acmsSection, el.innerHTML.replace(/<button type="button" class="acms-edit-chip">[^<]*<\/button>/, '')]));
+            const fresh = document.importNode(next, true);
+            current.replaceWith(fresh);
+            decorate(fresh);
+            for (const el of fresh.querySelectorAll(':scope > [data-acms-section]')) {
+              const id = el.dataset.acmsSection;
+              const old = before.get(id);
+              if (old !== undefined && old === el.innerHTML.replace(/<button type="button" class="acms-edit-chip">[^<]*<\/button>/, '')) continue;
+              el.classList.add('acms-flash');
+              setTimeout(() => el.classList.remove('acms-flash'), 950);
+            }
+            if (selected) select(selected, false);
+          };
+          addEventListener('message', (e) => {
+            if (e.origin !== location.origin) return;
+            if (e.data?.type === 'acms-section-focus') select(e.data.sectionId, true);
+            if (e.data?.type === 'acms-section-html' && typeof e.data.html === 'string') swap(e.data.html);
+          });
+          if (framed) parent.postMessage({ type: 'acms-sections-ready', path: location.pathname }, location.origin);
+        });
+      </script>
+    )}
     <main class="site-main" id="main">
       <slot />
     </main>
@@ -567,7 +655,7 @@ const homeJsonLd =
                 {socialNav.length > 0 && (
                   <nav class="social-nav" aria-label="Social">
                     {socialNav.map((n) => (
-                      <a href={n.url} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} title={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
+                      <a href={lnk(n.url)} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} title={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
                         {n.icon ? <Fragment set:html={n.icon} /> : n.label}
                       </a>
                     ))}
@@ -576,13 +664,13 @@ const homeJsonLd =
               </div>
               <nav class="footer-col" aria-label="Read">
                 <h2>Read</h2>
-                {readLinks.map((n) => <a href={n.url}>{n.label}</a>)}
+                {readLinks.map((n) => <a href={lnk(n.url)}>{n.label}</a>)}
               </nav>
               {footerNav.length > 0 && (
                 <nav class="footer-col" aria-label="Site">
                   <h2>Site</h2>
                   {footerNav.map((n) => (
-                    <a href={n.url} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener' : undefined}>{n.label}</a>
+                    <a href={lnk(n.url)} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener' : undefined}>{n.label}</a>
                   ))}
                 </nav>
               )}
@@ -592,14 +680,14 @@ const homeJsonLd =
               {footerNav.length > 0 && (
                 <nav class="footer-nav">
                   {footerNav.map((n) => (
-                    <a href={n.url} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener' : undefined}>{n.label}</a>
+                    <a href={lnk(n.url)} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener' : undefined}>{n.label}</a>
                   ))}
                 </nav>
               )}
               {socialNav.length > 0 && (
                 <nav class="social-nav" aria-label="Social">
                   {socialNav.map((n) => (
-                    <a href={n.url} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
+                    <a href={lnk(n.url)} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
                       {n.icon ? <Fragment set:html={n.icon} /> : n.label}
                     </a>
                   ))}