@glw907/cairn-cms 0.41.0 → 0.51.0

package/dist/vite/index.js

@@ -30,17 +30,17 @@ const built = buildSiteManifest(cairn, siteConfig, globs);
 export const result = ${resultExpr};
 `;
 }
-/** Evaluate the virtual module in the given mode inside the consumer's own Vite resolution, then
- *  return the module's `result`. It reuses the consumer's loaded config (so `$lib`, the config
- *  module, `import.meta.glob`, and `?raw` resolve exactly as the build does) and strips the
- *  cairnManifest plugin from the nested server's plugin list, so its buildStart never recurses.
- *  This runs at build time and in the bin, never in the request lifecycle. */
-async function evalVirtual(opts, mode, root) {
+/** Evaluate a virtual module source inside the consumer's own Vite resolution, then return the
+ *  module's `result`. It reuses the consumer's loaded config (so `$lib`, the config module,
+ *  `import.meta.glob`, and `?raw` resolve exactly as the build does) and strips the cairnManifest
+ *  plugin from the nested server's plugin list, so its buildStart never recurses. This runs at
+ *  build time and in the bins, never in the request lifecycle. */
+async function evalVirtual(source, root) {
     const { createServer, loadConfigFromFile } = await import('vite');
     // Load the consumer's real Vite config so the nested server inherits SvelteKit's resolution
     // (the $lib alias, the app root, the ?raw and import.meta.glob handling). Drop cairnManifest from
     // it so the nested server's buildStart does not recurse, and add a plugin that serves only the
-    // virtual module in the requested mode.
+    // given virtual module source.
     const loaded = await loadConfigFromFile({ command: 'build', mode: 'production' }, undefined, root);
     const inlineConfig = loaded?.config ?? {};
     const server = await createServer({
@@ -49,7 +49,7 @@ async function evalVirtual(opts, mode, root) {
         configFile: false,
         logLevel: 'silent',
         server: { middlewareMode: true, hmr: false, watch: null },
-        plugins: [...stripCairnManifest(inlineConfig.plugins ?? []), cairnVirtualOnly(opts, mode)],
+        plugins: [...stripCairnManifest(inlineConfig.plugins ?? []), cairnVirtualOnly(source)],
     });
     try {
         const mod = (await server.ssrLoadModule(VIRTUAL_ID));
@@ -80,12 +80,12 @@ export function stripCairnManifest(plugins) {
 /** Verify the committed manifest against the corpus from a Vite context, throwing on drift. The bin
  *  and the plugin share this; the spike proved it runs cleanly inside the consumer's config. */
 export async function verifyManifestFromVite(opts, root) {
-    await evalVirtual(opts, 'verify', root);
+    await evalVirtual(virtualSource(opts, 'verify'), root);
 }
 /** Regenerate the serialized manifest from the corpus in a Vite context, sharing the build's
  *  resolution. The cairn-manifest bin (a later task) will call this and write the result. */
 export async function buildManifestFromVite(opts, root) {
-    return evalVirtual(opts, 'write', root);
+    return evalVirtual(virtualSource(opts, 'write'), root);
 }
 /** The cairnManifest plugin. It serves the verify virtual module to the app graph and, in
  *  buildStart, evaluates it through a nested Vite SSR load so a manifest drift fails the build. */
@@ -161,9 +161,9 @@ function findCairnOptions(plugins) {
     }
     return null;
 }
-/** A minimal plugin that serves only the virtual module in one mode, for the nested SSR load. It
+/** A minimal plugin that serves only the given virtual module source, for the nested SSR load. It
  *  carries no buildStart, so the nested server never recurses into the verify. */
-function cairnVirtualOnly(opts, mode) {
+function cairnVirtualOnly(source) {
     return {
         name: 'cairn-manifest-virtual',
         resolveId(id) {
@@ -172,7 +172,51 @@ function cairnVirtualOnly(opts, mode) {
         },
         load(id) {
             if (id === RESOLVED_ID)
-                return virtualSource(opts, mode);
+                return source;
         },
     };
 }
+/** Build the virtual module that reads only the adapter facts the doctor derives. It imports the
+ *  configured config module and exports the string-typed `owner`, `repo`, and `from` as JSON, so
+ *  nothing else of the adapter (least of all a secret) crosses the boundary. */
+function adapterFactsSource(opts) {
+    return `
+import { cairn } from ${JSON.stringify(opts.configModule)};
+const backend = cairn?.backend ?? {};
+const sender = cairn?.sender ?? {};
+const facts = {};
+if (typeof backend.owner === 'string') facts.owner = backend.owner;
+if (typeof backend.repo === 'string') facts.repo = backend.repo;
+if (typeof sender.from === 'string') facts.from = sender.from;
+export const result = JSON.stringify(facts);
+`;
+}
+/** Read `{ owner, repo, from }` off the consumer's adapter by evaluating a tiny virtual module
+ *  through the consumer's own Vite resolution, the same machinery the cairn-manifest bin uses.
+ *  cairn-doctor calls this to fill inputs the operator did not pass. Derivation is best-effort:
+ *  any failure (no Vite config, no cairnManifest plugin, a config module that throws) returns
+ *  null, so the doctor degrades to flags instead of crashing. This runs only on the bin path,
+ *  never in a Worker. */
+export async function readAdapterFacts(cwd = process.cwd()) {
+    try {
+        const { loadConfigFromFile } = await import('vite');
+        const loaded = await loadConfigFromFile({ command: 'build', mode: 'production' }, undefined, cwd, 'silent');
+        if (!loaded)
+            return null;
+        const opts = findCairnOptions(loaded.config.plugins);
+        if (!opts)
+            return null;
+        const parsed = JSON.parse(await evalVirtual(adapterFactsSource(opts), cwd));
+        const facts = {};
+        if (typeof parsed.owner === 'string')
+            facts.owner = parsed.owner;
+        if (typeof parsed.repo === 'string')
+            facts.repo = parsed.repo;
+        if (typeof parsed.from === 'string')
+            facts.from = parsed.from;
+        return facts;
+    }
+    catch {
+        return null;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.41.0",
+  "version": "0.51.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -80,6 +80,10 @@
       "types": "./dist/vite/index.d.ts",
       "default": "./dist/vite/index.js"
     },
+    "./ambient": {
+      "types": "./dist/ambient.d.ts",
+      "default": "./dist/ambient.js"
+    },
     "./package.json": "./package.json"
   },
   "bin": {
@@ -93,7 +97,7 @@
   ],
   "peerDependencies": {
     "@sveltejs/kit": "^2.12",
-    "svelte": "^5.0.0"
+    "svelte": "^5.56.3"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.2",

package/src/lib/ambient.ts

@@ -0,0 +1,19 @@
+// The one-line App.Locals augmentation a consumer site imports from src/app.d.ts:
+//
+//   import '@glw907/cairn-cms/ambient';
+//
+// The guard sets `event.locals.editor`, and this declaration types it, so a site no longer
+// hand-writes the `declare global` block. The field is optional: the engine's own structural
+// event types read it as `editor?: Editor | null`, and a request the guard has not touched
+// carries no editor at all.
+import type { Editor } from './auth/types.js';
+
+declare global {
+  namespace App {
+    interface Locals {
+      editor?: Editor | null;
+    }
+  }
+}
+
+export {};

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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)]">