@glw907/cairn-cms 0.41.0 → 0.51.0

package/CHANGELOG.md

@@ -2,6 +2,88 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.51.0
+
+The `svelte` peer dependency floor rises from `^5.0.0` to `^5.56.3`, turning the 0.40.0 advisory
+into an enforced range: consumer sites compile the shipped `.svelte` sources, and svelte `5.56.1`
+miscompiles parenthesized boolean groupings. `cairn-doctor` gains a `config.dependency-floors`
+check in its default set, which compares the lockfile's resolved `svelte` and `@sveltejs/kit`
+versions against the peer ranges the installed engine declares.
+
+Consumers must: raise the `svelte` devDependency range to at least `^5.56.3` (and `@sveltejs/kit`
+to `^2.12` where it sits lower) and reinstall so the lockfile re-resolves. A site pinning svelte
+below the floor now draws an npm peer warning or resolution failure on install, and the doctor
+reports the below-floor version as a blocker.
+
+The edit page's preview now renders inside a sandboxed iframe whose document links the site's own
+stylesheets, so an entry proofs in the site's real styling without that CSS ever touching the
+admin document. The adapter gains an optional `preview` member naming the compiled CSS URLs (a
+Vite `?url` import resolves the hashed asset) plus `bodyClass` and `containerClass` for the site's
+body classes and content wrapper, and a `byConcept` map overrides either class per concept for a
+site whose posts and pages wrap content differently. While Preview shows, the sidebar steps aside
+so the document takes the full width, and a width menu on the Preview tab sizes the frame to
+Desktop, Tablet, Phone, or Small phone, persisted per browser.
+
+Consumers should: wire `preview` in the adapter, referencing the sheet only through `?url` and
+linking the same URL from the site layout, the way
+[the adapter guide](docs/guides/define-an-adapter-and-schema.md) shows. Without the knob the
+preview renders unstyled markup behind a one-line hint.
+
+The editor's directive highlighting now recognizes labeled and attributed `:::` openers and fences
+of four or more colons, where before only bare closers matched, and nested containers step their
+band and rail tint by depth. No consumer action.
+
+`cairn-doctor` derives its missing inputs from the repo it runs in: the backend owner and repo
+plus the sender address come from evaluating the site's config module through the manifest bin's
+Vite machinery, and the Cloudflare account id comes from the wrangler config, with flags and
+environment variables taking precedence. A new `--probe <url>` flag runs a zero-side-effect live
+check against the deployed admin's sign-in surface: the login envelope, the CSRF cookie and field,
+and the uniform non-leak answer to a stranger's sign-in request. Consumers may: drop the `--from`
+and `--repo` flags from doctor invocations and run `npx cairn-doctor --probe <url>` after a
+deploy.
+
+## 0.50.0
+
+The admin now mounts as one catch-all route. A new `createCairnAdmin(runtime, deps)` facade
+serves every admin view through a single `load` and a single `actions` record, the new
+`CairnAdmin` component switches the views on the discriminated `AdminData`, and `parseAdminPath`
+is the one path authority behind both. A site's whole `/admin` surface is now three files (the
+`$lib/cairn.server.ts` composer plus the `/admin/[...path]` route pair) instead of a per-route
+tree of shims whose action names coupled to engine components by bare string. The admin URLs are
+unchanged. The per-surface factories (`createContentRoutes` and friends) stay public as the
+advanced seam.
+
+Consumers must: delete the admin route tree and replace it with the two-file mount plus the
+composer; the exact files are in
+[the canonical admin mount](docs/reference/admin-routes.md) and the migration is the `0.50.0`
+section of [the upgrade guide](docs/guides/upgrade-cairn.md). The engine's auth and shell forms
+now post named actions (`?/request`, `?/confirm`, `?/logout`, `?/publishAll`), so a site that
+mounts `LoginPage`, `ConfirmPage`, or `AdminLayout` directly must register those names, and the
+`/admin/auth/logout` server route leaves the contract.
+
+Consumers must: rename `createSiteIndex` to `createSiteResolver` and `SiteIndex` to
+`SiteResolver` where imported from `/delivery/data`; the `paginate` helper is deleted.
+
+Consumers must: read `form.error` where they read `form.renameError`. Every action failure now
+carries `error: string` as its one-line summary; the structured extras (`brokenLinks`,
+`inboundLinks`) keep their keys beside it.
+
+Consumers must: replace the hand-written `App.Locals` block in `src/app.d.ts` with
+`import '@glw907/cairn-cms/ambient';`, the new type-only subpath that ships the
+`App.Locals.editor` augmentation.
+
+The diagnostics registry reaches its remaining runtime sites. A missing `AUTH_DB` on a gated
+admin request renders a branded condition page instead of a silent login redirect, and a missing
+email binding, missing GitHub App credentials, and an invalid site config now carry their
+registered condition ids through the error chain and the logs.
+`deps.mintToken` widens to accept a plain string return. The concept list reads published rows
+from the committed manifest in one call, falling back to the per-file crawl only on a repo with
+no manifest yet. Internal layering rides along (one home each for the link rewriter, the escape
+helpers, and the conflict check) with no consumer surface change.
+
+This release publishes together with `0.41.0`, so a site crossing from `0.40.0` takes both
+windows in one upgrade.
+
 ## 0.41.0
 
 `cairn-doctor` ships as a second bin: a setup preflight that runs nine checks over the local config

package/README.md

@@ -45,7 +45,7 @@ doesn't, cairn is the wrong tool and will not try to meet you halfway.
    tutorial, takes you from an empty directory to a deployed site with a working `/admin`.
 2. **[`examples/showcase`](./examples/showcase)** is a complete consumer site wired to the
    engine, and the worked reference for every shape in the docs. When a guide says "mount the
-   route shims," the showcase shows the mounted result.
+   admin," the showcase shows the mounted result.
 3. **[The docs](./docs/README.md)** are organized in four arms: the tutorial, task guides,
    one reference page per export, and explanation pages for the architecture and design
    rules.
@@ -66,7 +66,7 @@ npm install @glw907/cairn-cms
 ```
 
 Peer dependencies: `svelte@^5` and `@sveltejs/kit@^2.12`. A consumer site implements a
-`CairnAdapter` and mounts thin `/admin` route shims around the package subpaths:
+`CairnAdapter` and mounts the whole `/admin` with one catch-all route over the package subpaths:
 
 - `@glw907/cairn-cms`: the core engine and adapter contract.
 - `@glw907/cairn-cms/sveltekit`: the server load and action logic.

package/dist/ambient.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from './auth/types.js';
+declare global {
+    namespace App {
+        interface Locals {
+            editor?: Editor | null;
+        }
+    }
+}
+export {};

package/dist/ambient.js

@@ -0,0 +1 @@
+export {};

package/dist/components/AdminLayout.svelte

@@ -279,7 +279,7 @@ identical on every host regardless of the site's own theme.
             <kbd class="ml-auto hidden rounded border border-[var(--cairn-card-border)] px-1.5 text-[0.6875rem] font-medium sm:inline">&#8984;K</kbd>
           </button>
         </div>
-        {#if pendingCount > 0 && data.concepts.length > 0}
+        {#if pendingCount > 0}
           <div class="flex-none">
             <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => publishAllDialog?.showModal()}>
               Publish site ({pendingCount})
@@ -349,9 +349,7 @@ identical on every host regardless of the site's own theme.
         <form method="dialog" class="modal-backdrop"><button tabindex="-1" aria-label="Close">close</button></form>
       </dialog>
 
-      <!-- The form action below reads data.concepts[0], so zero configured concepts (with a stray
-           pending ref) must hide the dialog along with its trigger. -->
-      {#if pendingCount > 0 && data.concepts.length > 0}
+      {#if pendingCount > 0}
         <dialog bind:this={publishAllDialog} class="modal" aria-labelledby="cairn-publish-all-title">
           <div class="modal-box">
             <div class="mb-3 flex items-center justify-between">
@@ -367,9 +365,9 @@ identical on every host regardless of the site's own theme.
                 {/each}
               </ul>
             {/each}
-            <!-- The publishAll action is mounted on every concept-list shim; the first concept's
-                 route hosts the site-wide POST so the topbar works from any admin page. -->
-            <form method="POST" action={`/admin/${data.concepts[0].id}?/publishAll`} class="mt-4 flex justify-end gap-2">
+            <!-- The publishAll named action is valid on every authed admin view, so the confirm
+                 posts to the current page and the topbar works from anywhere. -->
+            <form method="POST" action="?/publishAll" class="mt-4 flex justify-end gap-2">
               <CsrfField token={data.csrf} />
               <button type="button" class="btn btn-sm" onclick={() => publishAllDialog?.close()}>Cancel</button>
               <button type="submit" class="btn btn-sm btn-primary">Publish site</button>
@@ -455,7 +453,7 @@ identical on every host regardless of the site's own theme.
               <div class="text-xs capitalize text-[var(--color-subtle)]">{data.user.role}</div>
             </div>
           </div>
-          <form method="POST" action="/admin/auth/logout" class="mt-4">
+          <form method="POST" action="?/logout" class="mt-4">
             <CsrfField token={data.csrf} />
             <button type="submit" class="btn btn-ghost btn-sm btn-block justify-start">
               <LogOutIcon class="h-4 w-4" /> Sign out

package/dist/components/CairnAdmin.svelte

@@ -0,0 +1,67 @@
+<!--
+@component
+The single-mount admin page. A site's catch-all `/admin/[...path]` route renders this one
+component for every admin view, feeding it the discriminated `AdminData` from `createCairnAdmin`'s
+load. It is a pure switcher on `data.view`: the public auth pages mount bare, and the authed views
+mount inside `AdminLayout`. No styling or wrapper elements of its own.
+-->
+<script lang="ts">
+  import AdminLayout from './AdminLayout.svelte';
+  import LoginPage from './LoginPage.svelte';
+  import ConfirmPage from './ConfirmPage.svelte';
+  import ConceptList from './ConceptList.svelte';
+  import EditPage from './EditPage.svelte';
+  import ManageEditors from './ManageEditors.svelte';
+  import NavTree from './NavTree.svelte';
+  import type { AdminData } from '../sveltekit/cairn-admin.js';
+  import type { ContentFormFailure } from '../sveltekit/content-routes.js';
+  import type { ComponentRegistry } from '../render/registry.js';
+  import type { IconSet } from '../render/glyph.js';
+  import type { LinkResolve } from '../content/links.js';
+
+  interface Props {
+    /** The discriminated view data from `createCairnAdmin`'s load. */
+    data: AdminData;
+    /** The last action's result, forwarded to whichever view rendered: the shared content-action
+     *  failure family (every failure carries `error`), merged with the auth and editors results,
+     *  so the route's one `form` export covers every view. */
+    form?:
+      | (ContentFormFailure & {
+          sent?: boolean;
+          status?: 'sent' | 'send_error' | 'throttled';
+          ok?: boolean;
+        })
+      | null;
+    /** The site's design-accurate render pipeline, for the edit view's preview pane. */
+    render?: (md: string, opts?: { stagger?: boolean; resolve?: LinkResolve }) => string | Promise<string>;
+    /** The site's component registry, for the edit view's insert palette. */
+    registry?: ComponentRegistry;
+    /** The site's icon set, for the edit view's guided form fields. */
+    icons?: IconSet;
+  }
+
+  let { data, form = null, render, registry, icons }: Props = $props();
+</script>
+
+{#if data.view === 'login'}
+  <LoginPage data={data.page} {form} />
+{:else if data.view === 'confirm'}
+  <ConfirmPage data={data.page} />
+{:else}
+  <AdminLayout data={data.layout}>
+    {#if data.view === 'list'}
+      <!-- The single mount reuses this component across /admin/posts -> /admin/pages, so the
+           concept id keys the list: crossing concepts remounts it and drops the old query,
+           sort, page, and dialog state. -->
+      {#key data.page.conceptId}
+        <ConceptList data={data.page} {form} />
+      {/key}
+    {:else if data.view === 'edit'}
+      <EditPage data={{ ...data.page, siteName: data.layout.siteName }} {render} {registry} {icons} {form} />
+    {:else if data.view === 'editors'}
+      <ManageEditors data={data.page} {form} />
+    {:else if data.view === 'nav'}
+      <NavTree data={data.page} />
+    {/if}
+  </AdminLayout>
+{/if}

package/dist/components/CairnAdmin.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { AdminData } from '../sveltekit/cairn-admin.js';
+import type { ContentFormFailure } from '../sveltekit/content-routes.js';
+import type { ComponentRegistry } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
+import type { LinkResolve } from '../content/links.js';
+interface Props {
+    /** The discriminated view data from `createCairnAdmin`'s load. */
+    data: AdminData;
+    /** The last action's result, forwarded to whichever view rendered: the shared content-action
+     *  failure family (every failure carries `error`), merged with the auth and editors results,
+     *  so the route's one `form` export covers every view. */
+    form?: (ContentFormFailure & {
+        sent?: boolean;
+        status?: 'sent' | 'send_error' | 'throttled';
+        ok?: boolean;
+    }) | null;
+    /** The site's design-accurate render pipeline, for the edit view's preview pane. */
+    render?: (md: string, opts?: {
+        stagger?: boolean;
+        resolve?: LinkResolve;
+    }) => string | Promise<string>;
+    /** The site's component registry, for the edit view's insert palette. */
+    registry?: ComponentRegistry;
+    /** The site's icon set, for the edit view's guided form fields. */
+    icons?: IconSet;
+}
+/**
+ * The single-mount admin page. A site's catch-all `/admin/[...path]` route renders this one
+ * component for every admin view, feeding it the discriminated `AdminData` from `createCairnAdmin`'s
+ * load. It is a pure switcher on `data.view`: the public auth pages mount bare, and the authed views
+ * mount inside `AdminLayout`. No styling or wrapper elements of its own.
+ */
+declare const CairnAdmin: import("svelte").Component<Props, {}, "">;
+type CairnAdmin = ReturnType<typeof CairnAdmin>;
+export default CairnAdmin;

package/dist/components/ConceptList.svelte

@@ -7,8 +7,7 @@ content sizes. The header New button opens a dialog holding the create form.
 -->
 <script lang="ts">
   import { slugify } from '../content/ids.js';
-  import type { EntrySummary, ListData } from '../sveltekit/content-routes.js';
-  import type { InboundLink } from '../content/manifest.js';
+  import type { DeleteRefusal, EntrySummary, ListData } from '../sveltekit/content-routes.js';
   import CsrfField from './CsrfField.svelte';
   import DeleteDialog from './DeleteDialog.svelte';
   import CairnLogo from './CairnLogo.svelte';
@@ -17,10 +16,10 @@ content sizes. The header New button opens a dialog holding the create form.
   interface Props {
     /** The list load's data: the concept, its entries, and any inline or form errors. */
     data: ListData;
-    /** The `?/delete` action result. A blocked delete returns the refused entry id and the inbound
-     *  links that link to it (the flat `fail(409, { inboundLinks, id })` shape), so the list names
+    /** The `?/delete` action result. A blocked delete returns the `DeleteRefusal` payload (the
+     *  shared `error` summary, the refused entry id, and its inbound linkers), so the list names
      *  the blockers and refuses (block-until-clean). */
-    form?: { id?: string; inboundLinks?: InboundLink[] } | null;
+    form?: Partial<DeleteRefusal> | null;
   }
 
   let { data, form = null }: Props = $props();

package/dist/components/ConceptList.svelte.d.ts

@@ -1,15 +1,11 @@
-import type { ListData } from '../sveltekit/content-routes.js';
-import type { InboundLink } from '../content/manifest.js';
+import type { DeleteRefusal, ListData } from '../sveltekit/content-routes.js';
 interface Props {
     /** The list load's data: the concept, its entries, and any inline or form errors. */
     data: ListData;
-    /** The `?/delete` action result. A blocked delete returns the refused entry id and the inbound
-     *  links that link to it (the flat `fail(409, { inboundLinks, id })` shape), so the list names
+    /** The `?/delete` action result. A blocked delete returns the `DeleteRefusal` payload (the
+     *  shared `error` summary, the refused entry id, and its inbound linkers), so the list names
      *  the blockers and refuses (block-until-clean). */
-    form?: {
-        id?: string;
-        inboundLinks?: InboundLink[];
-    } | null;
+    form?: Partial<DeleteRefusal> | null;
 }
 /**
  * One concept's list view as a DaisyUI data-table: a search filter, a result count, sortable Title and

package/dist/components/ConfirmPage.svelte

@@ -40,7 +40,7 @@ in a hidden field and consumes nothing; only the explicit POST verifies (spec §
     {:else}
       <h1 class="text-lg font-semibold">Almost there</h1>
       <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Confirm to finish signing in to {data.siteName}.</p>
-      <form method="POST">
+      <form method="POST" action="?/confirm">
         <input type="hidden" name="token" value={data.token} />
         <CsrfField token={data.csrf} />
         <button type="submit" class="btn btn-primary btn-block">Confirm sign-in</button>

package/dist/components/EditPage.svelte

@@ -6,13 +6,16 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
 toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
 swap the editing surface for the rendered preview inside the same card; every visit lands on
-Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+carries the breadcrumb, the status badges, the save-state indicator,
 and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
 pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
 transient flashes, and the editor card's footer holds the word count and the Markdown help.
 -->
 <script lang="ts">
-  import { untrack } from 'svelte';
+  import { flushSync, untrack } from 'svelte';
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import CsrfField from './CsrfField.svelte';
@@ -26,10 +29,11 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   import MarkdownHelpDialog from './MarkdownHelpDialog.svelte';
   import { cairnLinkCompletionSource } from './link-completion.js';
   import { unwrapCairnLink, type FormatKind } from './markdown-format.js';
+  import { buildPreviewDoc, deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
   import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
-  import type { EditData } from '../sveltekit/content-routes.js';
+  import type { ContentFormFailure, EditData } from '../sveltekit/content-routes.js';
   import type { TextareaField, TagsField, FreeTagsField } from '../content/types.js';
   import type { LinkResolve } from '../content/links.js';
   import { manifestLinkResolver } from '../content/manifest.js';
@@ -43,9 +47,9 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     render?: (md: string, opts?: { stagger?: boolean; resolve?: LinkResolve }) => string | Promise<string>;
     /** The site's icon set, for the guided form's icon fields. */
     icons?: IconSet;
-    /** The `?/save` or `?/delete` action result. Carries the save guard's broken links when a save was
-     *  blocked, or the delete guard's inbound linkers when a delete was refused. */
-    form?: { brokenLinks?: string[]; body?: string; inboundLinks?: import('../content/manifest.js').InboundLink[]; renameError?: string } | null;
+    /** The last content action's failure: the save guard's broken links, the delete guard's
+     *  inbound linkers, or a rename refusal, each carrying the shared `error` summary. */
+    form?: ContentFormFailure | null;
   }
 
   let { data, registry, render, icons, form }: Props = $props();
@@ -97,6 +101,16 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   // The edit form element, for the Ctrl/Cmd+S shortcut's requestSubmit.
   let editForm = $state<HTMLFormElement | null>(null);
 
+  // A required sidebar field hidden by Preview cannot take the browser's validation report: an
+  // invisible control is unfocusable, so the browser cancels the save silently with no message.
+  // This capture-phase invalid listener flips back to Write first, and flushSync forces the pane
+  // swap inside the event, so the report that follows the invalid events lands on a visible
+  // control and the author sees what blocked the save.
+  function onFormInvalid() {
+    if (mode === 'write') return;
+    flushSync(() => (mode = 'write'));
+  }
+
   // The SvelteKit half of the leave guard. Registered at component init (beforeNavigate wraps
   // onMount, so it must run synchronously here) and auto-unregistered on destroy. A submit's own
   // navigation passes through because busy flips before it starts, and a non-edit POST's because
@@ -150,6 +164,24 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   let previewHtml = $state('');
   // True after a render call threw, so the preview pane can say so instead of going blank.
   let previewFailed = $state(false);
+  // The preview frame's device width, a per-browser preference under its own key (the legacy
+  // 'cairn-admin:preview' key from the removed split-pane preview stays untouched). Desktop is
+  // the default; the storage read sits in an effect so it never runs during SSR, and it tracks
+  // nothing reactive, so it runs once.
+  const deviceStorageKey = 'cairn-editor-preview-device';
+  let device = $state<PreviewDeviceId>('desktop');
+  $effect(() => {
+    const stored = localStorage.getItem(deviceStorageKey);
+    if (previewDevices.some((d) => d.id === stored)) device = stored as PreviewDeviceId;
+  });
+  function setDevice(id: PreviewDeviceId) {
+    device = id;
+    localStorage.setItem(deviceStorageKey, id);
+  }
+  const activeDevice = $derived(previewDevice(device));
+  // The iframe document around the rendered html: the site's stylesheets from the adapter's
+  // preview knob, or a styleless document (behind the hint below) when the site sets none.
+  const previewDoc = $derived(buildPreviewDoc(previewHtml, data.preview));
   let insert = $state.raw<(text: string) => void>(() => {});
   let insertLink = $state.raw<(href: string, title: string) => void>(() => {});
   // The editor's current selection, registered by MarkdownEditor on mount; the web link dialog
@@ -220,8 +252,12 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   // not refused. When set, a delete was blocked by a link that appeared since the page loaded.
   const deleteRefusedLinks = $derived(form?.inboundLinks ?? []);
 
-  // A rename that hit a collision or an invalid slug returns form.renameError.
-  const renameError = $derived(form?.renameError ?? '');
+  // The shared failure summary, rendered only when no richer banner claims the failure: the save
+  // and delete guards get their own banners from brokenLinks and inboundLinks below, so this
+  // surfaces the rest (a rename refusal, today).
+  const formError = $derived(
+    form?.error && !form.brokenLinks?.length && !form.inboundLinks?.length ? form.error : '',
+  );
 
   // The entry this surface is editing. SvelteKit reuses the page component across a same-route
   // navigation (the delete-refused and broken-link banners link entry to entry), so the per-entry
@@ -279,7 +315,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   );
   const assertiveMessage = $derived.by(() => {
     if (data.error) return data.error;
-    if (renameError) return renameError;
+    if (formError) return formError;
     if (deleteRefusedLinks.length) {
       const count = deleteRefusedLinks.length;
       return `This ${data.label.toLowerCase()} could not be deleted. ${count} ${count === 1 ? 'page links' : 'pages link'} to it.`;
@@ -384,7 +420,13 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         }
       }
     }, 150);
-    return () => clearTimeout(handle);
+    return () => {
+      clearTimeout(handle);
+      // Every re-run and the final teardown invalidate the in-flight render. The entry-key reset
+      // above cannot reach this counter, so without the bump a slow render for entry A could
+      // resolve after a same-route hop and write A's html into entry B's pane.
+      previewRun++;
+    };
   });
 
   // Coerce a frontmatter value to a string for text/date/textarea inputs.
@@ -529,8 +571,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
 {#if data.error}
   <div class="alert alert-error mb-4 text-sm">{data.error}</div>
 {/if}
-{#if renameError}
-  <div class="alert alert-error mb-4 text-sm">{renameError}</div>
+{#if formError}
+  <div class="alert alert-error mb-4 text-sm">{formError}</div>
 {/if}
 {#if deleteRefusedLinks.length}
   <div class="alert alert-error mb-4 flex-col items-start text-sm">
@@ -571,7 +613,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   bind:this={editForm}
   onsubmit={onEditSubmit}
   oninput={onFormInput}
-  class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6"
+  oninvalidcapture={onFormInvalid}
+  class={mode === 'preview' ? '' : 'lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6'}
 >
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
@@ -598,7 +641,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       role="group"
       aria-label="Editor"
     >
-      <EditorToolbar {format} {mode} onMode={setMode}>
+      <EditorToolbar {format} {mode} onMode={setMode} {device} onDevice={setDevice}>
         {#snippet insertControls()}
           <!-- Plain triggers only: the dialogs they open hold their own <form> elements, so the
                dialogs themselves mount outside the edit form at the bottom of this component. -->
@@ -664,16 +707,53 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         />
       </div>
       {#if mode === 'preview'}
-        <!-- tabindex 0: the pane holds no focusable content, so it is itself a tab stop (the
-             tabpanel pattern's completeness requirement). -->
-        <div id="cairn-pane-preview" role="tabpanel" aria-labelledby="cairn-tab-preview" tabindex="0" class="prose max-w-none p-4">
-          {#if previewHtml}
-            {@html previewHtml}
-          {:else if previewFailed}
-            <p class="text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
-          {:else}
-            <p class="text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
-          {/if}
+        <!-- The preview ground: recessed under the floating frame card so the page reads as a
+             sheet on the desk. tabindex 0 only while a message shows in place of the iframe;
+             with the iframe up the frame itself is the pane's focusable content (the tabpanel
+             pattern's completeness requirement). -->
+        <div
+          id="cairn-pane-preview"
+          role="tabpanel"
+          aria-labelledby="cairn-tab-preview"
+          tabindex={previewHtml && !previewFailed ? undefined : 0}
+          class="bg-base-200 px-4 py-6 lg:px-8"
+        >
+          <!-- The frame column: centered, sized by the picked device (capped at the pane), with
+               the width eased; the admin sheet's prefers-reduced-motion rule squashes the move. -->
+          <div
+            class="cairn-preview-frame mx-auto max-w-full transition-[width] duration-300"
+            style:width={activeDevice.width === null ? '100%' : `${activeDevice.width}px`}
+          >
+            {#if activeDevice.width !== null}
+              <p class="mb-2 text-right text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">
+                {deviceLabel(activeDevice)}
+              </p>
+            {/if}
+            {#if !data.preview}
+              <p class="mb-2 text-xs text-[var(--color-muted)]">
+                Preview shows unstyled markup until the adapter's preview option names the site's stylesheets.
+              </p>
+            {/if}
+            <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]">
+              {#if previewFailed}
+                <p class="p-4 text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
+              {:else if !previewHtml}
+                <p class="p-4 text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
+              {:else}
+                <!-- The site's render pipeline already sanitized the html (the floor strips
+                     scripts and handlers); the empty sandbox is belt and braces on top. The
+                     frame document's base tag targets every link at a new tab, which the
+                     sandbox (no allow-popups) blocks, so a proofing click never navigates the
+                     admin or the frame itself. tabindex 0 keeps the scrollable preview
+                     keyboard-reachable (an iframe is not a sequential tab stop by itself); on
+                     a link-heavy page that one inert Tab stop is a deliberate tradeoff. The
+                     a11y rule reads any tabindex on a non-interactive element as a smell, but
+                     a scrollable region is the recognized exception. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+                <iframe sandbox="" tabindex="0" title="Page preview" srcdoc={previewDoc} class="block h-[70vh] w-full"></iframe>
+              {/if}
+            </div>
+          </div>
         </div>
       {/if}
       <!-- The card footer, part of the same instrument frame. It stays up in Preview too, so the
@@ -692,7 +772,9 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     </div>
   </div>
 
-  <aside class="lg:order-2 mt-4 lg:mt-0">
+  <!-- Preview takes the full surface: the sidebar hides (never unmounts, so the uncontrolled
+       field edits survive the round trip) and the editor column above spans the whole width. -->
+  <aside class="lg:order-2 mt-4 lg:mt-0" class:hidden={mode === 'preview'}>
     <!-- One sidebar card, three labeled groups. Each group is its own fieldset so its eyebrow is
          a real legend that screen readers announce with the fields it holds. -->
     <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-5 p-4 shadow-[var(--cairn-shadow)]">

package/dist/components/EditPage.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentRegistry } from '../render/registry.js';
 import type { IconSet } from '../render/glyph.js';
-import type { EditData } from '../sveltekit/content-routes.js';
+import type { ContentFormFailure, EditData } from '../sveltekit/content-routes.js';
 import type { LinkResolve } from '../content/links.js';
 interface Props {
     /** The edit load's data, plus the site name for the heading. */
@@ -16,14 +16,9 @@ interface Props {
     }) => string | Promise<string>;
     /** The site's icon set, for the guided form's icon fields. */
     icons?: IconSet;
-    /** The `?/save` or `?/delete` action result. Carries the save guard's broken links when a save was
-     *  blocked, or the delete guard's inbound linkers when a delete was refused. */
-    form?: {
-        brokenLinks?: string[];
-        body?: string;
-        inboundLinks?: import('../content/manifest.js').InboundLink[];
-        renameError?: string;
-    } | null;
+    /** The last content action's failure: the save guard's broken links, the delete guard's
+     *  inbound linkers, or a rename refusal, each carrying the shared `error` summary. */
+    form?: ContentFormFailure | null;
 }
 /**
  * The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the
@@ -32,7 +27,10 @@ interface Props {
  * remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
  * toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
  * swap the editing surface for the rendered preview inside the same card; every visit lands on
- * Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+ * Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+ * adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+ * sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+ * carries the breadcrumb, the status badges, the save-state indicator,
  * and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
  * pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
  * transient flashes, and the editor card's footer holds the word count and the Markdown help.