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

package/src/pages/[...slug].astro

@@ -8,10 +8,14 @@ import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../lib/highlightCode';
 import { resolveDesign } from '../lib/theme';
 import { effectiveSettings } from '../lib/designPreview';
+import { requestLocale } from '../lib/i18n';
+import { localizeDoc, isExtraLocale } from '../lib/translations';
 
 const { slug } = Astro.params;
 const repo = await getRepo(Astro.locals);
-const page = slug ? await repo.getPageBySlug(slug) : null;
+const locale = requestLocale(Astro.url, Astro.locals);
+const rawPage = slug ? await repo.getPageBySlug(slug) : null;
+const page = rawPage ? localizeDoc(rawPage, locale) : null;
 
 // Drafts are visible only to a logged-in admin (doubles as draft preview).
 const isAdmin = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
@@ -20,7 +24,8 @@ if (!page || (page.status !== 'published' && !isAdmin)) {
 }
 const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
 // ?designPreview=1 (admin-only) renders the staged Design-screen changes
-const settings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
+const baseSettings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
+const settings = isExtraLocale(locale) ? { ...baseSettings, locale } : baseSettings;
 // Live state must not survive in a cached page after its snapshot expires.
 if (settings.live.mode !== 'off' || page?.blocks.some(block => block.type === 'live') ||
     (page && settings.sectionPages?.[page.id]?.sections.some(section => section.type === 'live'))) {
@@ -43,7 +48,7 @@ const PageTemplate = (page.template && settings.sectionPages?.[page.id]?.mode !=
     </p>
   )}
   {settings.sectionPages?.[page.id]?.mode === 'sections' ? (
-    <ThemeSections page={page} settings={settings} />
+    <ThemeSections page={page} settings={settings} locale={locale} />
   ) : PageTemplate ? (
     <PageTemplate page={page} html={bodyHtml} settings={settings} />
   ) : page.bodyHtml ? (

package/src/pages/admin/app-auth.astro

@@ -0,0 +1,159 @@
+---
+import { roleLabels } from '../../lib/roles';
+// Editor-app sign-in (OAuth 2.0 authorization code + PKCE, RFC 8252). The
+// app opens this page in the system browser; the middleware has already sent
+// signed-out visitors to /admin/login?next=… and back. Approving issues a
+// one-time code (two minutes, single use) bound to this person, the app, its
+// return address and the PKCE challenge, then returns to the app.
+import { getRepo } from '../../lib/repo';
+import { BRAND } from '../../lib/brand';
+import { validateSession, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { EDITOR } from '../../lib/editor/config';
+import { checkAuthorize, checkConsentTicket, consentTicket, issueCode, redirectWith } from '../../lib/editor/auth';
+import { bookingsEnabled } from '../../lib/calendar/config';
+import { I18N } from '../../lib/i18n';
+import ThemeScript from '../../components/ThemeScript.astro';
+import '../../styles/admin.css';
+
+// never framed (clickjacking the Approve button), never cached; the query
+// (challenge, state) never leaks as a referrer. Not "no-referrer": that
+// makes browsers send Origin: null on the form POST, failing the CSRF check.
+Astro.response.headers.set('X-Frame-Options', 'DENY');
+Astro.response.headers.set('Content-Security-Policy', "frame-ancestors 'none'");
+Astro.response.headers.set('Cache-Control', 'no-store');
+Astro.response.headers.set('Referrer-Policy', 'same-origin');
+if (!EDITOR.enabled) return new Response(null, { status: 404 });
+
+const leave = (to: string) => new Response(null, { status: 303, headers: { Location: to, 'Cache-Control': 'no-store', 'Referrer-Policy': 'no-referrer' } });
+const repo = await getRepo(Astro.locals);
+const session = Astro.cookies.get(SESSION_COOKIE)?.value ?? '';
+const userId = await validateSession(session, Astro.locals);
+if (!userId) return Astro.redirect(`/admin/login?next=${encodeURIComponent(Astro.url.pathname + Astro.url.search)}`);
+
+const check = checkAuthorize(Astro.url.searchParams);
+const iss = Astro.url.origin;
+// untrustworthy return address/app: show the problem here, never redirect
+if (!check.ok && check.redirect) {
+  return leave(redirectWith(check.redirectUri, { error: check.error, error_description: check.message, ...(check.state ? { state: check.state } : {}), iss }));
+}
+const params = check.ok ? check.params : null;
+const envOwner = userId === OWNER_ENV;
+const user = envOwner ? null : await repo.getUser(userId);
+const settings = await repo.getSettings();
+const appName = EDITOR.name || params?.clientId || 'An app';
+const switchUrl = `/admin/logout?next=${encodeURIComponent(Astro.url.pathname + Astro.url.search)}`;
+
+let error = '';
+if (Astro.request.method === 'POST' && params && user) {
+  const form = await Astro.request.formData();
+  const origin = Astro.request.headers.get('origin');
+  if (origin !== Astro.url.origin || Astro.request.headers.get('sec-fetch-site') === 'cross-site') error = 'This request didn’t come from this page. Try again.';
+  else if (!checkConsentTicket(String(form.get('ticket') ?? ''), session, params)) error = 'This sign-in page expired. Start again from the app.';
+  else if (form.get('op') === 'cancel') return leave(redirectWith(params.redirectUri, { error: 'access_denied', error_description: 'Sign-in was cancelled.', state: params.state, iss }));
+  else if (form.get('op') === 'approve') {
+    if (!await repo.email.rateLimit(`editor:approve:${user.id}`, 10, 60_000)) error = 'Too many sign-ins in a minute. Wait a moment and try again.';
+    else {
+      const version = await repo.email.sessionVersion(user.id);
+      if (version === null) error = 'Your account changed. Sign in again.';
+      else {
+        const code = await issueCode(repo, { id: user.id, sessionVersion: version }, params, String(form.get('device_name') ?? ''));
+        return leave(redirectWith(params.redirectUri, { code, state: params.state, iss }));
+      }
+    }
+  }
+}
+const ticket = params && user ? consentTicket(session, params) : '';
+const deviceName = params?.deviceName || 'Phone';
+const returnTo = (() => { if (!params) return ''; try { const u = new URL(params.redirectUri); return u.protocol === 'https:' || u.protocol === 'http:' ? u.host : `${u.protocol}//`; } catch { return ''; } })();
+const owner = user?.role === 'owner';
+const can = [
+  'Edit, publish and unpublish posts, pages and events',
+  owner ? 'Change section content, including locked sections' : 'Change section text and images (not the layout)',
+  'Upload images and files',
+  ...(I18N.enabled ? ['Write and review translations'] : []),
+  ...(bookingsEnabled() ? ['Confirm, decline and cancel bookings'] : []),
+];
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <ThemeScript />
+    <meta name="robots" content="noindex" />
+    <title>Sign in to {appName} · {settings.siteTitle}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <main class="login-wrap consent-wrap">
+      <div class="card consent-card">
+        <div class="consent-site">
+          <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
+          </svg>
+          <span>{settings.siteTitle || BRAND.name}</span>
+        </div>
+
+        {!params && (
+          <div class="consent-body">
+            <h1>This app can’t sign in here</h1>
+            <p class="consent-lead">{!check.ok && check.message}</p>
+            <p class="hint">Close this page and return to the app. If you run this site, check the editor app settings.</p>
+          </div>
+        )}
+
+        {params && envOwner && (
+          <div class="consent-body">
+            <h1>Use your own account</h1>
+            <p class="consent-lead"><b>{appName}</b> signs in as a person, so each phone can be signed out on its own. You’re signed in with the owner password, which has no account to connect.</p>
+            <a class="btn primary block" href={switchUrl}>Sign in with an account</a>
+            <p class="hint consent-foot">Owners create accounts in Users.</p>
+          </div>
+        )}
+
+        {params && user && (
+          <form method="post" class="consent-body">
+            <h1><span class="consent-app">{appName}</span> wants to sign in</h1>
+            <p class="consent-lead">It will use <b>{settings.siteTitle || 'this site'}</b> as you, with your role. You can sign this phone out any time.</p>
+
+            <div class="consent-who">
+              <span class="consent-initial" aria-hidden="true">{(user.name || user.email).trim().charAt(0).toUpperCase()}</span>
+              <span class="consent-id">
+                <b>{user.name}</b>
+                <span>{user.email}</span>
+              </span>
+              <span class="consent-role"><i class={owner ? 'is-owner' : ''} aria-hidden="true"></i>{user ? roleLabels[user.role] : 'Owner'}</span>
+            </div>
+
+            <p class="consent-label">The app will be able to</p>
+            <ul class="consent-can">
+              {can.map((line) => <li>{line}</li>)}
+            </ul>
+
+            <label class="field consent-device">
+              <span>Name this device</span>
+              <input type="text" name="device_name" value={deviceName} maxlength="60" autocomplete="off" required />
+            </label>
+
+            {error && <div class="flash error" role="alert">{error}</div>}
+            <input type="hidden" name="ticket" value={ticket} />
+            <div class="consent-actions">
+              <button class="btn" type="submit" name="op" value="cancel" formnovalidate>Cancel</button>
+              <button class="btn primary" type="submit" name="op" value="approve">Approve</button>
+            </div>
+
+            <dl class="consent-meta">
+              <div><dt>Returns to</dt><dd><code>{returnTo}</code></dd></div>
+              <div><dt>App ID</dt><dd><code>{params.clientId}</code></dd></div>
+            </dl>
+            <p class="hint consent-foot">Not you? <a href={switchUrl}>Switch account</a></p>
+          </form>
+        )}
+      </div>
+    </main>
+  </body>
+</html>

package/src/pages/admin/c/[collection]/[id].astro

@@ -1,4 +1,6 @@
 ---
+import { I18N, extraLocales, localeName } from '../../../../lib/i18n';
+import { translationEngine } from '../../../../lib/translate';
 import { getRepo } from '../../../../lib/repo';
 import { renderMarkdown } from '../../../../lib/markdown';
 import { createPreviewToken } from '../../../../lib/preview';
@@ -37,6 +39,10 @@ const sharePath = `${previewPath}?token=${createPreviewToken('post', post.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 const settings = await repo.getSettings();
 const templates = Object.keys(resolveDesign(settings).theme.postTemplates);
+// other languages this document can be written in (acms({ i18n }))
+const trLanguages = extraLocales().map((code) => ({ code, name: localeName(code, true) }));
+const trMain = { code: I18N.defaultLocale, name: localeName(I18N.defaultLocale || 'en', true) };
+const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSettings()).ai, Astro.locals) !== null;
 ---
 
 <!doctype html>
@@ -54,6 +60,9 @@ const templates = Object.keys(resolveDesign(settings).theme.postTemplates);
     <PostEditor
       client:only="react"
       post={editable}
+      languages={trLanguages}
+      mainLanguage={trMain}
+      translationDrafts={trDrafts}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}

package/src/pages/admin/calendar/events/[id].astro

@@ -1,4 +1,6 @@
 ---
+import { I18N, extraLocales, localeName } from '../../../../lib/i18n';
+import { translationEngine } from '../../../../lib/translate';
 import { getRepo } from '../../../../lib/repo';
 import { createPreviewToken } from '../../../../lib/preview';
 import { env } from '../../../../lib/env';
@@ -24,6 +26,10 @@ const editable = mergeEventDraft(event);
 const [settings, calendars] = await Promise.all([repo.getSettings(), repo.listCalendars()]);
 const previewPath = `/preview/event/${event.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('event', event.id)}`;
+// other languages this document can be written in (acms({ i18n }))
+const trLanguages = extraLocales().map((code) => ({ code, name: localeName(code, true) }));
+const trMain = { code: I18N.defaultLocale, name: localeName(I18N.defaultLocale || 'en', true) };
+const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSettings()).ai, Astro.locals) !== null;
 ---
 
 <!doctype html>
@@ -42,6 +48,9 @@ const sharePath = `${previewPath}?token=${createPreviewToken('event', event.id)}
       client:only="react"
       kind="event"
       event={editable}
+      languages={trLanguages}
+      mainLanguage={trMain}
+      translationDrafts={trDrafts}
       initialHTML={editable.bodyHtml}
       unsplashEnabled={Boolean(env('UNSPLASH_ACCESS_KEY'))}
       previewPath={previewPath}

package/src/pages/admin/login.astro

@@ -1,12 +1,15 @@
 ---
+import { safeNext } from '../../lib/editor/next';
 import { checkPassword, createSessionToken, verifyPassword, validateSession, SESSION_COOKIE } from '../../lib/auth';
 import { getRepo } from '../../lib/repo';
 import { BRAND } from '../../lib/brand';
 import ThemeScript from '../../components/ThemeScript.astro';
 import '../../styles/admin.css';
 
+// ?next= returns to the editor-app sign-in page only (never another site)
+const next = safeNext(Astro.url.searchParams.get('next'), Astro.url);
 if ((await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals))) {
-  return Astro.redirect('/admin');
+  return Astro.redirect(next ?? '/admin');
 }
 
 let error = '';
@@ -40,7 +43,7 @@ if (Astro.request.method === 'POST') {
       maxAge: 7 * 24 * 60 * 60,
       secure: Astro.url.protocol === 'https:',
     });
-    return Astro.redirect('/admin');
+    return Astro.redirect(next ?? '/admin');
   }
 }
 ---
@@ -67,6 +70,7 @@ if (Astro.request.method === 'POST') {
           </svg>
           <div class="brand-name">{BRAND.name}</div>
         </div>
+        {next && !error && <p class="hint login-for-app">Sign in to connect the app to your account.</p>}
         {error && <div class="flash error">{error}</div>}
         <form method="post">
           <label class="field">

package/src/pages/admin/logout.ts

@@ -1,7 +1,10 @@
 import type { APIRoute } from 'astro';
 import { SESSION_COOKIE } from '../../lib/auth';
+import { safeNext } from '../../lib/editor/next';
 
-export const GET: APIRoute = ({ cookies, redirect }) => {
+export const GET: APIRoute = ({ cookies, redirect, url }) => {
   cookies.delete(SESSION_COOKIE, { path: '/' });
-  return redirect('/admin/login');
+  // "Switch account" on the editor-app sign-in page comes back to it
+  const next = safeNext(url.searchParams.get('next'), url);
+  return redirect(next ? `/admin/login?next=${encodeURIComponent(next)}` : '/admin/login');
 };

package/src/pages/admin/mobile.astro

@@ -0,0 +1,18 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import MobileApp from '../../components/MobileApp';
+import { getRepo } from '../../lib/repo';
+import { requireSession } from '../../lib/api';
+const repo = await getRepo(Astro.locals);
+try { await requireSession(Astro.request, Astro.cookies, repo, true); }
+catch { return new Response('Owner access is required.', { status: 403 }); }
+---
+<Admin title="Mobile app" section="mobile">
+  <div class="page-head">
+    <div>
+      <h1>Mobile app</h1>
+      <p class="sub">Notifications for people who installed your app.</p>
+    </div>
+  </div>
+  <MobileApp client:only="react" />
+</Admin>

package/src/pages/admin/pages/[id].astro

@@ -1,4 +1,6 @@
 ---
+import { I18N, extraLocales, localeName } from '../../../lib/i18n';
+import { translationEngine } from '../../../lib/translate';
 import { getRepo } from '../../../lib/repo';
 import { blocksToHtml } from '../../../lib/blocksToHtml';
 import { createPreviewToken } from '../../../lib/preview';
@@ -7,6 +9,7 @@ import { env } from '../../../lib/env';
 import { BRAND } from '../../../lib/brand';
 import { mergePageDraft } from '../../../lib/drafts';
 import { localeHomeUrl } from '../../../lib/i18n';
+import { homeSource } from '../../../lib/home-source';
 import ThemeScript from '../../../components/ThemeScript.astro';
 import PostEditor from '../../../components/editor/PostEditor';
 import '../../../styles/admin.css';
@@ -30,6 +33,12 @@ const sharePath = `${previewPath}?token=${createPreviewToken('page', page.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 const settings = await repo.getSettings();
 const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
+// the homepage may really be a section layout or a coded template: say so
+const home = homeSource(settings, page);
+// other languages this document can be written in (acms({ i18n }))
+const trLanguages = extraLocales().map((code) => ({ code, name: localeName(code, true) }));
+const trMain = { code: I18N.defaultLocale, name: localeName(I18N.defaultLocale || 'en', true) };
+const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSettings()).ai, Astro.locals) !== null;
 ---
 
 <!doctype html>
@@ -48,6 +57,9 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
       client:only="react"
       kind="page"
       page={editable}
+      languages={trLanguages}
+      mainLanguage={trMain}
+      translationDrafts={trDrafts}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}
@@ -56,5 +68,55 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
       templates={templates}
       site={{ title: settings.siteTitle, url: settings.siteUrl }}
     />
+    {home.kind !== 'content' && (
+      <dialog class="modal home-source" data-home-source={`${page.id}:${home.kind}`} aria-labelledby="home-source-title">
+        <div class="modal-head">
+          <span id="home-source-title">{home.kind === 'sections' ? 'Your homepage is built from sections' : 'Your homepage is a coded template'}</span>
+          <button class="modal-x" type="button" data-close aria-label="Close">✕</button>
+        </div>
+        <div class="modal-body">
+          {home.kind === 'sections' ? (
+            <>
+              <p>Visitors see the {home.sections} {home.sections === 1 ? 'section' : 'sections'} laid out in <b>Design → Pages</b>. Change times, events, text and images there.</p>
+              <p class="home-source-note">{home.showsPageContent
+                ? 'This page’s text still appears inside the layout, as the “Existing page content” section.'
+                : 'This page’s text isn’t shown on the homepage right now.'}</p>
+            </>
+          ) : (
+            <>
+              <p>The <b>{home.theme}</b> theme draws your homepage from <code>{home.file}</code>. This page’s text appears as its opening section.</p>
+              <p class="home-source-note">Changing the layout means editing that file (or asking your AI agent). To use this page as the homepage instead, set <b>Homepage</b> to your content page in Design → Theme.</p>
+            </>
+          )}
+          <label class="home-source-check"><input type="checkbox" data-remember /> Don’t show this again for this page</label>
+          <div class="modal-foot">
+            <button class="btn ghost" type="button" data-close>Edit page text {home.kind === 'sections' ? 'anyway' : ''}</button>
+            <a class="btn primary" href={home.editUrl} data-go autofocus>{home.kind === 'sections' ? 'Go to homepage sections' : 'Open Design'}</a>
+          </div>
+        </div>
+      </dialog>
+      <script is:inline>
+        (() => {
+          const d = document.querySelector('dialog.home-source');
+          if (!d) return;
+          const key = `acms-home-source:${d.dataset.homeSource}`;
+          try { if (localStorage.getItem(key)) return; } catch {}
+          const remember = () => { if (d.querySelector('[data-remember]')?.checked) try { localStorage.setItem(key, '1'); } catch {} };
+          d.querySelectorAll('[data-close]').forEach((b) => b.addEventListener('click', () => { remember(); d.close(); }));
+          d.querySelector('[data-go]')?.addEventListener('click', remember);
+          d.addEventListener('click', (e) => { if (e.target === d) { remember(); d.close(); } });
+          d.showModal();
+        })();
+      </script>
+      <style>
+        .home-source { width: min(480px, calc(100vw - 32px)); }
+        .home-source p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
+        .home-source p b { color: var(--text); }
+        .home-source code { font-size: 12.5px; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
+        .home-source-note { color: var(--muted) !important; font-size: 13px !important; }
+        .home-source-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
+        @media (max-width: 480px) { .home-source .modal-foot { flex-direction: column-reverse; } .home-source .modal-foot .btn { width: 100%; justify-content: center; min-height: 40px; } }
+      </style>
+    )}
   </body>
 </html>

package/src/pages/admin/section-preview.astro

@@ -0,0 +1,61 @@
+---
+import Site from '../../layouts/Site.astro';
+import ThemeSections from '../../components/ThemeSections.astro';
+import { getRepo } from '../../lib/repo';
+import { mergeDesignDraft } from '../../lib/drafts';
+import { getTheme } from '../../lib/theme';
+import { SectionLayout } from '../../theme-sdk/contract.mjs';
+import { initialData } from '../../theme-sdk/fields.mjs';
+import { I18N } from '../../lib/i18n';
+
+// Admin-only (middleware guards /admin) section renders for the Design screen:
+//   POST { pageId, layout, theme? } → the page's sections with an UNSAVED
+//        layout, as a minimal document; the preview iframe swaps them in
+//        while you type. Nothing is written.
+//   GET  ?type=&variant=&theme=     → one section with its example data, in
+//        the full theme frame; the "Add a section" picker shows it scaled.
+const repo = await getRepo(Astro.locals);
+const settings = mergeDesignDraft(await repo.getSettings());
+Astro.response.headers.set('Cache-Control', 'no-store');
+Astro.response.headers.set('X-Robots-Tag', 'noindex');
+
+let mode: 'live' | 'thumb' | 'bad' = 'bad';
+let locale = I18N.defaultLocale;
+let page = null as Awaited<ReturnType<typeof repo.getPage>>;
+let view = settings;
+if (Astro.request.method === 'POST') {
+  try {
+    const body = await Astro.request.json() as { pageId?: string; layout?: unknown; theme?: string; locale?: string };
+    if (typeof body.locale === 'string' && I18N.locales.includes(body.locale)) locale = body.locale;
+    page = body.pageId ? await repo.getPage(String(body.pageId)) : null;
+    const layout = SectionLayout.safeParse(body.layout);
+    if (page && layout.success) {
+      mode = 'live';
+      view = { ...settings, activeTheme: typeof body.theme === 'string' && body.theme ? getTheme(body.theme).slug : settings.activeTheme, sectionPages: { ...settings.sectionPages, [page.id]: { ...layout.data, mode: 'sections' } } };
+    }
+  } catch { /* bad JSON → 400 below */ }
+} else {
+  const q = Astro.url.searchParams;
+  const theme = getTheme(q.get('theme') || settings.activeTheme);
+  const type = q.get('type') ?? '';
+  const def = theme.sections[type];
+  page = (await repo.getHomePage()) ?? (await repo.listPages())[0] ?? null;
+  if (def && page) {
+    mode = 'thumb';
+    const variant = def.variants.includes(q.get('variant') ?? '') ? q.get('variant')! : def.variants[0];
+    const example = (def as { example?: Record<string, unknown> }).example ?? {};
+    view = { ...settings, activeTheme: theme.slug, sectionPages: { ...settings.sectionPages, [page.id]: { mode: 'sections', sections: [{ id: `thumb-${type}`, type, version: def.version, variant, hidden: false, data: { ...initialData(def), ...example } as never }] } } };
+  }
+}
+if (mode === 'bad' || !page) Astro.response.status = 400;
+---
+{mode === 'live' && page ? (
+  <html lang="en"><head><meta charset="utf-8" /></head><body><ThemeSections page={page} settings={view} editable locale={locale} /></body></html>
+) : mode === 'thumb' && page ? (
+  <Site title="Section preview" bare>
+    <ThemeSections page={page} settings={view} editable={false} />
+    <style is:global>html, body { overflow: hidden; } main.site-main { padding-block: 8px; } .acms-sections { margin-block: 0; }</style>
+  </Site>
+) : (
+  <p>Bad section preview request.</p>
+)}