@acms-subir/core 0.3.9 → 0.3.11

package/src/components/ThemeTransfer.tsx

@@ -0,0 +1,211 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import type { Media } from '../lib/schema';
+import { openZip, type ZipIndex } from '../lib/import/zipread';
+import { ThemeDesignFile, ThemeTransferManifest, type DesignImportReport } from '../lib/theme-transfer';
+import type { DesignChange } from '../lib/designDiff';
+
+// Design → Export / Import theme dialogs (acms-theme v1 ZIPs, see
+// lib/theme-transfer). Export downloads the design as this screen shows it;
+// import previews the file against this site, uploads its images, then
+// stages it as a draft for Review. Nothing here publishes.
+
+export interface ThemeTransferHandle { openExport(): void; openImport(): void }
+interface Props {
+  theme: { slug: string; name: string; project: boolean };
+  /** flush pending autosaves so the export/import sees the latest draft */
+  flush: () => Promise<boolean>;
+  onCopyThemeJson: () => Promise<void>;
+  copied: boolean;
+}
+
+interface Loaded {
+  name: string;
+  manifest: ThemeTransferManifest;
+  design: ThemeDesignFile;
+  media: Media[];
+  zip: ZipIndex;
+}
+interface Preview { report: DesignImportReport; changes: DesignChange[] }
+
+const plural = (n: number, w: string) => `${n} ${w}${n === 1 ? '' : 's'}`;
+async function errorOf(res: Response, fallback: string) {
+  const data = (await res.json().catch(() => null)) as { error?: string } | null;
+  return data?.error ?? `${fallback} (${res.status})`;
+}
+async function revision(): Promise<number> {
+  const res = await fetch('/api/design', { headers: { accept: 'application/json' } });
+  if (!res.ok) throw new Error(await errorOf(res, 'Couldn’t load the design'));
+  return ((await res.json()) as { revision: number }).revision;
+}
+
+async function readThemeFile(file: File): Promise<Loaded> {
+  const buf = await file.arrayBuffer();
+  let zip: ZipIndex;
+  try { zip = openZip(buf); } catch { throw new Error('Choose a theme file (.acms-theme.zip) exported from Design.'); }
+  if (zip.has('bundle.json')) throw new Error('This is a content export. Import it from Import & export instead.');
+  if (!zip.has('manifest.json') || !zip.has('design.json')) throw new Error('This ZIP isn’t a theme export. Export one from Design → Export on the other site.');
+  const json = async (n: string) => JSON.parse(new TextDecoder().decode(await zip.read(n)));
+  const manifest = ThemeTransferManifest.safeParse(await json('manifest.json'));
+  if (!manifest.success) throw new Error('This theme file was made by a newer or unknown version of acms.');
+  const design = ThemeDesignFile.safeParse(await json('design.json'));
+  if (!design.success) throw new Error('The theme file’s design.json is damaged.');
+  const media = zip.has('media.json') ? ((await json('media.json')) as Media[]) : [];
+  return { name: file.name, manifest: manifest.data, design: design.data, media, zip };
+}
+
+export default forwardRef<ThemeTransferHandle, Props>(function ThemeTransfer({ theme, flush, onCopyThemeJson, copied }, ref) {
+  const exportRef = useRef<HTMLDialogElement>(null);
+  const importRef = useRef<HTMLDialogElement>(null);
+  const [withMedia, setWithMedia] = useState(true);
+  const [withNav, setWithNav] = useState(false);
+  const [loaded, setLoaded] = useState<Loaded | null>(null);
+  const [preview, setPreview] = useState<Preview | null>(null);
+  const [useImages, setUseImages] = useState(true);
+  const [useNav, setUseNav] = useState(false);
+  const [busy, setBusy] = useState('');
+  const [error, setError] = useState('');
+
+  useImperativeHandle(ref, () => ({
+    openExport: () => exportRef.current?.showModal(),
+    openImport: () => { setLoaded(null); setPreview(null); setError(''); setBusy(''); importRef.current?.showModal(); },
+  }));
+
+  const download = async () => {
+    if (!(await flush())) return;
+    location.href = `/api/design/export?media=${withMedia ? 1 : 0}&nav=${withNav ? 1 : 0}`;
+    exportRef.current?.close();
+  };
+
+  const check = async (l: Loaded, nav: boolean) => {
+    const res = await fetch('/api/design/import', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ revision: await revision(), design: l.design, nav, dryRun: true }),
+    });
+    if (!res.ok) throw new Error(await errorOf(res, 'Couldn’t read the theme file'));
+    setPreview((await res.json()) as Preview);
+  };
+
+  const choose = async (file: File | undefined) => {
+    if (!file) return;
+    setError(''); setPreview(null); setBusy('Reading…');
+    try {
+      if (!(await flush())) throw new Error('Save your current changes first.');
+      const l = await readThemeFile(file);
+      setLoaded(l); setUseImages(l.media.length > 0); setUseNav(false);
+      await check(l, false);
+    } catch (e) { setLoaded(null); setError(e instanceof Error ? e.message : 'Couldn’t read the file.'); }
+    finally { setBusy(''); }
+  };
+
+  const toggleNav = async (on: boolean) => {
+    setUseNav(on);
+    if (loaded) try { await check(loaded, on); } catch (e) { setError(e instanceof Error ? e.message : 'Check failed.'); }
+  };
+
+  const run = async () => {
+    if (!loaded) return;
+    setError('');
+    try {
+      if (useImages) {
+        let n = 0;
+        for (const m of loaded.media) {
+          setBusy(`Uploading images ${++n}/${loaded.media.length}…`);
+          const form = new FormData();
+          form.set('media', JSON.stringify(m));
+          for (const key of [m.key, ...m.variants.map((v) => v.key)]) {
+            form.set(key, new File([await loaded.zip.read(`media/${key}`)], key.split('/').pop() ?? 'file', { type: key === m.key ? m.mime : 'image/webp' }));
+          }
+          const res = await fetch('/api/import/media', { method: 'POST', body: form });
+          if (!res.ok) throw new Error(`${m.filename}: ${await errorOf(res, 'Upload failed')}`);
+        }
+      }
+      setBusy('Staging the draft…');
+      const res = await fetch('/api/design/import', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ revision: await revision(), design: loaded.design, nav: useNav }),
+      });
+      if (!res.ok) throw new Error(await errorOf(res, 'Import failed'));
+      location.hash = 'review';
+      location.reload();
+    } catch (e) { setError(e instanceof Error ? e.message : 'Import failed.'); setBusy(''); }
+  };
+
+  const r = preview?.report;
+  const m = loaded?.manifest;
+  return (
+    <>
+      <dialog className="modal dm-dialog" ref={exportRef} aria-labelledby="dm-export-title" onClick={(e) => { if (e.target === e.currentTarget) exportRef.current?.close(); }}>
+        <div className="modal-head">
+          <span id="dm-export-title">Export theme</span>
+          <button className="modal-x" type="button" onClick={() => exportRef.current?.close()} aria-label="Close">✕</button>
+        </div>
+        <div className="modal-body">
+          <p className="dm-dialog-sub">Downloads <b>{theme.name}</b> as you see it here (including unpublished changes) as one <code>.acms-theme.zip</code>. Import it on another site or machine from Design → Import.</p>
+          <label className="check-row"><input type="checkbox" checked disabled />Colors, fonts, layout options, logo and page sections</label>
+          <label className="check-row"><input type="checkbox" checked={withMedia} onChange={(e) => setWithMedia(e.target.checked)} />Images used by the design</label>
+          <label className="check-row"><input type="checkbox" checked={withNav} onChange={(e) => setWithNav(e.target.checked)} />Navigation menus<small className="tt-muted">· links usually differ per site</small></label>
+          {theme.project && (
+            <p className="tt-note">The theme’s code (<code>src/themes/{theme.slug}/</code>) is part of your project, not this file. Move it with git, or run <code>acms theme pack {theme.slug}</code> and <code>acms theme install</code> on the other machine.</p>
+          )}
+          <p className="tt-muted tt-small">Never included: posts, page text, API keys or other settings.</p>
+          <div className="modal-foot">
+            <button className="btn ghost" type="button" onClick={() => void onCopyThemeJson()}>{copied ? 'Copied ✓' : 'Copy as theme.json'}</button>
+            <button className="btn primary" type="button" onClick={() => void download()}>Download</button>
+          </div>
+        </div>
+      </dialog>
+
+      <dialog className="modal dm-dialog" ref={importRef} aria-labelledby="dm-import-title" onClick={(e) => { if (e.target === e.currentTarget && !busy) importRef.current?.close(); }}>
+        <div className="modal-head">
+          <span id="dm-import-title">Import theme</span>
+          <button className="modal-x" type="button" onClick={() => importRef.current?.close()} aria-label="Close" disabled={Boolean(busy) && Boolean(preview)}>✕</button>
+        </div>
+        <div className="modal-body">
+          {!loaded && (
+            <>
+              <p className="dm-dialog-sub">Choose a <code>.acms-theme.zip</code> exported from Design on another site or machine. It’s staged as a draft. You review it, then publish.</p>
+              <label className="tt-drop">
+                <input type="file" accept=".zip,application/zip" onChange={(e) => { const f = e.target.files?.[0]; e.target.value = ''; void choose(f); }} disabled={Boolean(busy)} />
+                <b>{busy || 'Choose theme file…'}</b>
+              </label>
+            </>
+          )}
+          {loaded && m && (
+            <div className="tt-pkg">
+              <b>{m.theme.name || m.theme.slug}</b>{m.theme.version && <span className="tt-muted"> v{m.theme.version}</span>}
+              <small>{loaded.name} · exported {new Date(m.exportedAt).toLocaleDateString()}{m.source.title ? ` from ${m.source.title}` : ''}</small>
+            </div>
+          )}
+          {r && preview && (
+            <>
+              <ul className="tt-list">
+                <li>
+                  <b>Design settings</b> <span className="imp-mark ok">{plural(preview.changes.length, 'change')}</span>
+                  <small>Colors, fonts, logo{r.layouts.matched.length ? ` and sections for ${r.layouts.matched.join(', ')}` : ''}.</small>
+                </li>
+                {loaded!.media.length > 0 && (
+                  <li><label className="check-row"><input type="checkbox" checked={useImages} onChange={(e) => setUseImages(e.target.checked)} /><span><b>Images</b><small>{plural(loaded!.media.length, 'image')} added to your media library (skipped if already there)</small></span></label></li>
+                )}
+                {!!loaded!.design.navItems?.length && (
+                  <li><label className="check-row"><input type="checkbox" checked={useNav} onChange={(e) => void toggleNav(e.target.checked)} /><span><b>Navigation</b><small>Replaces your menus with {plural(loaded!.design.navItems.length, 'link')}</small></span></label></li>
+                )}
+              </ul>
+              {!r.theme.installed && (
+                <p className="tt-note warn"><b>The “{m?.theme.name || r.theme.slug}” theme isn’t installed on this site.</b> Its code lives in <code>src/themes/{r.theme.slug}/</code> of the other project. Copy it over (git, or <code>acms theme pack</code> / <code>acms theme install</code>), then rebuild. Until then the draft keeps your current theme.</p>
+              )}
+              {r.layouts.skipped.length > 0 && <p className="tt-note">No page here for {r.layouts.skipped.join(', ')}. {r.layouts.skipped.length === 1 ? 'Its layout is' : 'Their layouts are'} skipped. Create the page with the same address and import again to bring {r.layouts.skipped.length === 1 ? 'it' : 'them'} over.</p>}
+              {r.links.dropped > 0 && <p className="tt-note">{plural(r.links.dropped, 'button link')} pointed at items this site doesn’t have; they keep their typed address.</p>}
+            </>
+          )}
+          {error && <p className="flash error">{error}</p>}
+          {loaded && (
+            <div className="modal-foot">
+              <button className="btn ghost" type="button" disabled={Boolean(busy)} onClick={() => { setLoaded(null); setPreview(null); setError(''); }}>Choose another</button>
+              <button className="btn primary" type="button" disabled={!preview || Boolean(busy)} onClick={() => void run()}>{busy || 'Import & review draft'}</button>
+            </div>
+          )}
+        </div>
+      </dialog>
+    </>
+  );
+});

package/src/components/auth/ClerkSession.astro

@@ -0,0 +1,80 @@
+---
+// Optional Clerk sign-in: exposes only the public configuration to the page
+// and, with keepAlive, loads the SDK so the short-lived session cookie keeps
+// refreshing while the page stays open (admin screens, app consent, staff
+// previews). Renders nothing in built-in mode.
+//
+// signedOutUrl: where to go when the session ends elsewhere; '' stays put.
+// freshPosts: refresh the cookie before plain same-origin form POSTs (admin
+// screens); off on public pages, whose forms aren't staff actions.
+import { AUTH, clerkPublicConfig } from '../../lib/auth/config';
+
+interface Props { keepAlive?: boolean; signedOutUrl?: string; freshPosts?: boolean }
+const { keepAlive = false, signedOutUrl = '/admin/login', freshPosts = true } = Astro.props;
+let config: { publishableKey: string; frontendApi: string } | null = null;
+if (AUTH.provider === 'clerk') {
+  try { config = clerkPublicConfig(Astro.locals); } catch { config = null; }
+}
+---
+
+{config && (
+  <>
+    <meta name="acms-clerk" data-key={config.publishableKey} data-frontend-api={config.frontendApi} data-keep-alive={keepAlive ? '1' : undefined} data-signed-out-url={keepAlive ? signedOutUrl : undefined} data-fresh-posts={keepAlive && freshPosts ? '1' : undefined} />
+    <link rel="preconnect" href={`https://${config.frontendApi}`} crossorigin />
+  </>
+)}
+
+<script>
+  import { loadClerk, refreshSession } from './clerk';
+
+  const meta = document.querySelector<HTMLMetaElement>('meta[name="acms-clerk"][data-keep-alive]');
+  if (meta) {
+    const signedOutUrl = meta.dataset.signedOutUrl ?? '/admin/login';
+    const start = () => loadClerk().then((clerk) => {
+      // ended elsewhere (signed out in another tab, revoked by an owner):
+      // go to sign-in instead of failing on the next save
+      let gone = false;
+      clerk.addListener(({ session }) => {
+        if (clerk.loaded && session === null && !gone && signedOutUrl) { gone = true; location.assign(signedOutUrl); }
+      }, { skipInitialEmit: true });
+    }).catch(() => { /* the server still enforces sign-in; a later request redirects */ });
+    if ('requestIdleCallback' in window) requestIdleCallback(start, { timeout: 2000 }); else setTimeout(start, 300);
+
+    // Timers stall while a laptop sleeps or a phone locks, so the cookie can
+    // be expired when the page comes back. Refresh then, and again right
+    // before any plain same-origin form POST (the last listener to run, so
+    // forms handled by script are left alone).
+    const wake = () => { if (document.visibilityState === 'visible') void refreshSession(); };
+    document.addEventListener('visibilitychange', wake);
+    addEventListener('pageshow', (e) => { if (e.persisted) wake(); });
+    addEventListener('online', wake);
+    if (meta.dataset.freshPosts) addEventListener('submit', async (e) => {
+      const form = e.target;
+      if (e.defaultPrevented || !(form instanceof HTMLFormElement) || form.target && form.target !== '_self') return;
+      const submitter = (e as SubmitEvent).submitter as HTMLButtonElement | HTMLInputElement | null;
+      const method = (submitter?.getAttribute('formmethod') ?? form.getAttribute('method') ?? 'get').toLowerCase();
+      const action = new URL(submitter?.getAttribute('formaction') ?? form.getAttribute('action') ?? '', location.href);
+      if (method !== 'post' || action.origin !== location.origin) return;
+      e.preventDefault();
+      await refreshSession();
+      // form.submit() skips the submitter's name/value; carry it over
+      if (submitter?.name) {
+        const carry = document.createElement('input');
+        carry.type = 'hidden'; carry.name = submitter.name; carry.value = submitter.value;
+        form.append(carry);
+      }
+      const prev = form.getAttribute('action');
+      if (submitter?.hasAttribute('formaction')) form.setAttribute('action', action.href);
+      HTMLFormElement.prototype.submit.call(form);
+      if (prev === null) form.removeAttribute('action'); else form.setAttribute('action', prev);
+    });
+
+    document.querySelectorAll<HTMLElement>('[data-clerk-profile]').forEach((el) => {
+      el.hidden = false;
+      el.addEventListener('click', async (e) => {
+        e.preventDefault();
+        try { (await loadClerk()).openUserProfile?.(); } catch { alert('The sign-in service is unavailable. Try again in a moment.'); }
+      });
+    });
+  }
+</script>

package/src/components/auth/ReverifyForms.astro

@@ -0,0 +1,61 @@
+---
+// Clerk mode: forms marked data-reverify check for a recent verification (the
+// "strict" policy, last ten minutes) before they submit. Without one they stay
+// put, edits intact, and a dialog offers to sign in again (a fresh sign-in
+// counts), returning here afterwards. Buttons marked data-acms-signin-again do
+// the same; without script their form signs out (POST) instead. The server enforces the policy either
+// way. Needs ClerkSession on the page.
+---
+
+<dialog class="modal reverify-dialog" aria-labelledby="reverify-h" data-reverify-dialog>
+  <div class="modal-head"><span id="reverify-h">Confirm it’s you</span></div>
+  <div class="modal-body">
+    <p class="reverify-text">Account and security changes need a sign-in from the last ten minutes.</p>
+    <p class="hint">Signing in again leaves this page and brings you back here, but anything you’ve typed and not saved is cleared. Choose <b>Not now</b> to keep your edits.</p>
+    <div class="modal-foot">
+      <button class="btn ghost" type="button" data-reverify-close>Not now</button>
+      <button class="btn primary" type="button" data-reverify-go>Sign in again</button>
+    </div>
+  </div>
+</dialog>
+
+<script>
+  import { checkReverified, clerkSettings, signInAgain } from './clerk';
+
+  const dialog = document.querySelector<HTMLDialogElement>('[data-reverify-dialog]');
+  const go = (b: HTMLButtonElement) => {
+    b.disabled = true;
+    b.textContent = 'Signing out…';
+    void signInAgain();
+  };
+  dialog?.querySelector('[data-reverify-close]')?.addEventListener('click', () => dialog.close());
+  dialog?.querySelector<HTMLButtonElement>('[data-reverify-go]')?.addEventListener('click', (e) => go(e.currentTarget as HTMLButtonElement));
+
+  if (clerkSettings()) {
+    document.addEventListener('submit', async (e) => {
+      const form = e.target;
+      if (!(form instanceof HTMLFormElement) || !form.matches('form[data-reverify]') || e.defaultPrevented) return;
+      e.preventDefault();
+      const submitter = (e as SubmitEvent).submitter as HTMLButtonElement | null;
+      const buttons = [...form.querySelectorAll<HTMLButtonElement>('button')];
+      buttons.forEach((b) => (b.disabled = true));
+      const result = await checkReverified();
+      buttons.forEach((b) => (b.disabled = false));
+      if (result === 'needed') {
+        if (dialog && !dialog.open) dialog.showModal();
+        return;
+      }
+      // form.submit() skips the submitter's name/value; carry it over
+      if (submitter?.name) {
+        const carry = document.createElement('input');
+        carry.type = 'hidden'; carry.name = submitter.name; carry.value = submitter.value;
+        form.append(carry);
+      }
+      HTMLFormElement.prototype.submit.call(form);
+    });
+
+    document.querySelectorAll<HTMLButtonElement>('button[data-acms-signin-again]').forEach((b) => {
+      b.addEventListener('click', (e) => { e.preventDefault(); go(b); });
+    });
+  }
+</script>

package/src/components/auth/clerk.ts

@@ -0,0 +1,169 @@
+// Browser side of optional Clerk staff sign-in. Pages render the public
+// configuration (publishable key + Frontend API host) through
+// ClerkSession.astro; nothing secret ever reaches the page. The SDK and its
+// prebuilt UI come from this instance's own Frontend API, pinned to the major
+// versions Clerk documents for script-tag installs, so no npm bundle is needed
+// and the key can change per deployment at runtime.
+
+const CLERK_JS = '@clerk/clerk-js@6/dist/clerk.browser.js';
+const CLERK_UI = '@clerk/ui@1/dist/ui.browser.js';
+const HOST = /^[a-z0-9](?:[a-z0-9.-]*[a-z0-9])?\.[a-z]{2,}$/i;
+
+type Listener = (e: { session?: ClerkSession | null }) => void;
+export interface ClerkSession {
+  id: string;
+  getToken(opts?: { skipCache?: boolean }): Promise<string | null>;
+  checkAuthorization?(params: { reverification: 'strict' }): boolean;
+}
+export interface ClerkInstance {
+  loaded: boolean;
+  isSignedIn: boolean;
+  session: ClerkSession | null | undefined;
+  user: { primaryEmailAddress?: { emailAddress: string } | null; fullName?: string | null } | null | undefined;
+  load(opts: Record<string, unknown>): Promise<void>;
+  signOut(opts?: { redirectUrl?: string }): Promise<void>;
+  mountSignIn(el: HTMLElement, props?: Record<string, unknown>): void;
+  mountSignUp(el: HTMLElement, props?: Record<string, unknown>): void;
+  openUserProfile?(props?: Record<string, unknown>): void;
+  addListener(cb: Listener, opts?: { skipInitialEmit?: boolean }): () => void;
+}
+declare global {
+  // __internal_ClerkUICtor is the name Clerk's script-tag install docs pass to load()
+  interface Window { Clerk?: ClerkInstance; __internal_ClerkUICtor?: unknown }
+}
+
+/** Public configuration rendered by ClerkSession.astro, or null in built-in mode. */
+export function clerkSettings(): { publishableKey: string; frontendApi: string } | null {
+  const meta = document.querySelector<HTMLMetaElement>('meta[name="acms-clerk"]');
+  const publishableKey = meta?.dataset.key ?? '', frontendApi = meta?.dataset.frontendApi ?? '';
+  return /^pk_(test|live)_/.test(publishableKey) && HOST.test(frontendApi) ? { publishableKey, frontendApi } : null;
+}
+
+// Clerk components read the admin tokens, so Light/Night follow the theme.
+export const appearance = {
+  variables: {
+    colorPrimary: 'var(--accent)',
+    colorPrimaryForeground: 'var(--on-accent)',
+    colorBackground: 'var(--panel)',
+    colorForeground: 'var(--text)',
+    colorMutedForeground: 'var(--muted)',
+    colorMuted: 'var(--panel-2)',
+    colorInput: 'var(--panel)',
+    colorInputForeground: 'var(--text)',
+    colorBorder: 'var(--line-strong)',
+    colorRing: 'var(--accent-ring)',
+    colorDanger: 'var(--red)',
+    colorSuccess: 'var(--green)',
+    colorWarning: 'var(--amber)',
+    colorNeutral: 'var(--text)',
+    colorShadow: 'rgb(60 52 40 / 12%)',
+    colorModalBackdrop: 'var(--dim)',
+    fontFamily: 'inherit',
+    fontFamilyButtons: 'inherit',
+    borderRadius: 'var(--r-md)',
+  },
+};
+// Mounted sign-in/sign-up sit inside the login card, which already is the paper surface.
+export const embedded = {
+  elements: {
+    rootBox: { width: '100%' },
+    cardBox: { width: '100%', boxShadow: 'none', border: '0', borderRadius: '0' },
+    card: { boxShadow: 'none', padding: '0', background: 'transparent', border: '0' },
+    footer: { background: 'transparent' },
+  },
+};
+
+function addScript(src: string, attrs: Record<string, string> = {}): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const el = document.createElement('script');
+    el.src = src; el.async = true; el.crossOrigin = 'anonymous';
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+    el.onload = () => resolve();
+    el.onerror = () => reject(new Error('The sign-in service could not be loaded.'));
+    document.head.appendChild(el);
+  });
+}
+
+let loading: Promise<ClerkInstance> | null = null;
+/** Loads and initialises Clerk once per page. Rejects when not configured or unreachable. */
+export function loadClerk(): Promise<ClerkInstance> {
+  if (loading) return loading;
+  const attempt = (async () => {
+    const settings = clerkSettings();
+    if (!settings) throw new Error('Clerk sign-in is not configured.');
+    const base = `https://${settings.frontendApi}/npm/`;
+    // the UI bundle must be present before clerk-js initialises its components
+    await addScript(base + CLERK_UI);
+    await addScript(base + CLERK_JS, { 'data-clerk-publishable-key': settings.publishableKey });
+    const clerk = window.Clerk;
+    if (!clerk) throw new Error('The sign-in service could not be loaded.');
+    if (!clerk.loaded) {
+      await clerk.load({
+        ui: { ClerkUI: window.__internal_ClerkUICtor },
+        appearance,
+        signInUrl: '/admin/login',
+        signUpUrl: '/admin/login?signUp=1',
+        afterSignOutUrl: '/admin/login',
+        allowedRedirectOrigins: [location.origin],
+      });
+    }
+    if (!clerk.loaded) throw new Error('The sign-in service could not be loaded.');
+    return clerk;
+  })();
+  // a blocked or unreachable Frontend API must not leave pages waiting forever
+  const timeout = new Promise<never>((_, reject) => setTimeout(() => reject(new Error('The sign-in service is taking too long to respond.')), 20_000));
+  loading = Promise.race([attempt, timeout]);
+  loading.catch(() => { loading = null; });
+  return loading;
+}
+
+/**
+ * Re-mint the short-lived session cookie (supported getToken, no new
+ * verification). Never rejects and gives up after a few seconds, so callers
+ * can await it before a request without risking a stuck page.
+ */
+export function refreshSession(): Promise<void> {
+  const refresh = loadClerk().then((clerk) => clerk.session?.getToken({ skipCache: true })).then(() => undefined, () => undefined);
+  return Promise.race([refresh, new Promise<void>((resolve) => setTimeout(resolve, 4000))]);
+}
+
+export type Reverify = 'ok' | 'needed' | 'unknown';
+/**
+ * Whether the session carries a recent ("strict": last ten minutes)
+ * verification, as sensitive changes require. The server checks the same
+ * policy on every such request; this only spares the owner a rejected
+ * attempt. clerk-js has no supported prompt outside React, so 'needed' is
+ * answered with signInAgain(). 'unknown' (SDK unavailable) means submit
+ * anyway and let the server decide.
+ */
+export async function checkReverified(): Promise<Reverify> {
+  let clerk: ClerkInstance;
+  try { clerk = await loadClerk(); } catch { return 'unknown'; }
+  const session = clerk.session;
+  if (!session || typeof session.checkAuthorization !== 'function') return 'unknown';
+  // a fresh token first: it carries the verification age this check reads,
+  // and it's the cookie the server will see
+  await refreshSession();
+  return session.checkAuthorization({ reverification: 'strict' }) ? 'ok' : 'needed';
+}
+
+/**
+ * A fresh sign-in counts as a recent verification. Signs out of Clerk and
+ * returns to `back` (this page by default) once signed in again. Leaves the
+ * page, so call it only when the owner chooses to.
+ */
+export async function signInAgain(back = location.pathname + location.search): Promise<void> {
+  const login = `/admin/login?reverify=1&return=${encodeURIComponent(back)}`;
+  try { await (await loadClerk()).signOut({ redirectUrl: login }); }
+  catch { postLogout(); }
+}
+
+/** Server sign-out: Clerk mode only accepts a same-origin POST. */
+export function postLogout(next?: string): void {
+  const form = document.createElement('form');
+  form.method = 'post';
+  form.action = '/admin/logout' + (next ? `?next=${encodeURIComponent(next)}` : '');
+  form.hidden = true;
+  document.body.append(form);
+  form.submit();
+}

package/src/components/import/ImportExport.tsx

@@ -39,7 +39,7 @@ const errText = (e: unknown) => (e instanceof Error && e.message ? e.message : '
 const date = (ms: number) => new Date(ms).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
 const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
 
-export default function ImportExport({ initialTab = 'import' }: { initialTab?: Tab }) {
+export default function ImportExport({ initialTab = 'import', clerk = false }: { initialTab?: Tab; clerk?: boolean }) {
   const [tab, setTab] = useState<Tab>(initialTab);
   const [runs, setRuns] = useState<Run[] | null>(null);
 
@@ -66,8 +66,8 @@ export default function ImportExport({ initialTab = 'import' }: { initialTab?: T
         ))}
         <a href="/admin/settings#backup">Backup &amp; restore</a>
       </nav>
-      {tab === 'import' && <ImportTab onFinished={loadRuns} openHistory={() => setTab('history')} />}
-      {tab === 'export' && <ExportTab />}
+      {tab === 'import' && <ImportTab onFinished={loadRuns} openHistory={() => setTab('history')} clerk={clerk} />}
+      {tab === 'export' && <ExportTab clerk={clerk} />}
       {tab === 'history' && <HistoryTab runs={runs} reload={loadRuns} />}
     </div>
   );
@@ -75,7 +75,7 @@ export default function ImportExport({ initialTab = 'import' }: { initialTab?: T
 
 // ---------------------------------------------------------------------------
 
-function ImportTab({ onFinished, openHistory }: { onFinished: () => void; openHistory: () => void }) {
+function ImportTab({ onFinished, openHistory, clerk }: { onFinished: () => void; openHistory: () => void; clerk: boolean }) {
   const [file, setFile] = useState<File | null>(null);
   const [siteUrl, setSiteUrl] = useState('');
   const [source, setSource] = useState<Source | null>(null);
@@ -225,7 +225,7 @@ function ImportTab({ onFinished, openHistory }: { onFinished: () => void; openHi
             {plan && plan.authors.length > 0 && (
               <div className="imp-authors">
                 <h3>Authors</h3>
-                <p className="hint">New authors get a byline and an author page, but can’t sign in until you set a password in Users.</p>
+                <p className="hint">{clerk ? 'New authors get a byline and an author page, but can’t sign in until you link their Clerk account in Users.' : 'New authors get a byline and an author page, but can’t sign in until you set a password in Users.'}</p>
                 {plan.authors.map((a) => (
                   <div key={a.sourceId} className="imp-author">
                     <div><b>{a.name}</b><small>{a.email}</small></div>
@@ -362,15 +362,22 @@ function Done({ report, reset, openHistory }: { report: Report; reset: () => voi
 
 // ---------------------------------------------------------------------------
 
-function ExportTab() {
+function ExportTab({ clerk }: { clerk: boolean }) {
   return (
     <div className="imp-grid">
+      <div className="imp-stack">
       <section className="imp-card">
         <h3>Export content</h3>
         <p>A ZIP with every post, page, tag, author byline, navigation item and redirect, plus your uploaded media. Import it into any acms site; it merges with what’s there instead of replacing it.</p>
         <p className="hint">Not included: bookings, users’ passwords, API keys, email and provider settings. For a complete copy of this site, use a backup.</p>
         <div className="imp-actions"><a className="btn primary" href="/api/export" download>Download export</a></div>
       </section>
+      <section className="imp-card">
+        <h3>Themes</h3>
+        <p>Moving your theme to another site or machine? Export it from Design with its colors, fonts, logo, page sections and images, then import it there from the same screen.</p>
+        <div className="imp-actions"><a className="btn" href="/admin/design">Go to Design → Export</a></div>
+      </section>
+      </div>
       <aside className="imp-side">
         <div className="imp-card imp-help">
           <h3>Export or backup?</h3>
@@ -380,8 +387,10 @@ function ExportTab() {
               <tr><td>Use for</td><td>Moving content</td><td>Recovery</td></tr>
               <tr><td>Import</td><td>Merges</td><td>Replaces all</td></tr>
               <tr><td>Bookings</td><td>No</td><td>Yes</td></tr>
+              {clerk && <tr><td>Sign-in</td><td>Bylines only</td><td>Owner kept</td></tr>}
             </tbody>
           </table>
+          {clerk && <p className="hint">Restoring a backup needs a sign-in from the last ten minutes and a backup that includes your current owner account. Only your own Clerk link is kept; every other restored account has to be linked again in Users before it can sign in. Sign-in settings stay as deployed.</p>}
         </div>
       </aside>
     </div>
@@ -459,6 +468,7 @@ const CSS = `
 .imp-tabs button:hover,.imp-tabs a:hover{color:var(--text)}
 .imp-tabs a{margin-left:auto;font-weight:500}
 .imp-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
+.imp-stack{display:grid;gap:16px;min-width:0}
 .imp-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px 22px}
 .imp-card h3{font-size:14px;margin:0 0 8px;letter-spacing:-.01em}
 .imp-card p{margin:0 0 10px;font-size:13.5px}

package/src/components/import/runner.ts

@@ -49,6 +49,9 @@ export async function readSource(file: File, siteUrl = ''): Promise<Source> {
     if (zip.has('content.json') && !zip.has('bundle.json')) {
       throw new Error('This is an acms backup. Restore it from Settings → Backup instead; it replaces the whole site.');
     }
+    if (zip.has('manifest.json') && zip.has('design.json')) {
+      throw new Error('This is a theme file. Import it from Design → Import instead.');
+    }
     if (zip.has('bundle.json')) {
       const bundle = ImportBundle.parse(JSON.parse(new TextDecoder().decode(await zip.read('bundle.json'))));
       return { kind: bundle.source.kind, label: bundle.source.title || file.name, bundle, zip, hash };