@glw907/cairn-cms 0.50.0 → 0.52.0

package/dist/sveltekit/content-routes.js

@@ -16,12 +16,19 @@ import { emptyManifest, manifestEntryFromFile, parseManifest, serializeManifest,
 import { isConflict } from '../github/types.js';
 import { log } from '../log/index.js';
 import { issueCsrfToken } from './csrf.js';
-/** The signed-in editor the guard resolved, or a login redirect. Kept local to decouple event shapes. */
-function sessionOf(event) {
-    const editor = event.locals.editor;
-    if (!editor)
-        throw redirect(303, '/admin/login');
-    return editor;
+import { requireSession } from './guard.js';
+/** Resolve the effective preview for one concept: its `byConcept` override wins per key, with
+ *  nullish coalescing so an override key that is present but undefined keeps the top-level value.
+ *  Stylesheets are always shared, and the `byConcept` map never reaches the client. */
+function resolvePreview(preview, conceptId) {
+    if (!preview)
+        return null;
+    const override = preview.byConcept?.[conceptId];
+    return {
+        stylesheets: preview.stylesheets,
+        bodyClass: override?.bodyClass ?? preview.bodyClass,
+        containerClass: override?.containerClass ?? preview.containerClass,
+    };
 }
 /** Look up the concept named by the `[concept]` route param, or a 404. */
 function conceptOf(runtime, params) {
@@ -53,7 +60,7 @@ export function createContentRoutes(runtime, deps = {}) {
     /** Layout load for every admin page: the nav, the user, the active path, the resolved theme,
      *  and the pending entries behind the topbar's publish-all action. */
     async function layoutLoad(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const cookieTheme = event.cookies?.get('cairn-admin-theme');
         const theme = cookieTheme === 'cairn-admin-dark' ? 'cairn-admin-dark' : 'cairn-admin';
         const cookieCollapsed = event.cookies?.get('cairn-admin-nav-collapsed');
@@ -137,7 +144,7 @@ export function createContentRoutes(runtime, deps = {}) {
      *  with no manifest row appends a `new` row read from its branch. A listing failure degrades
      *  to an inline error, not a thrown 500. */
     async function listLoad(event) {
-        sessionOf(event);
+        requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const formError = event.url.searchParams.get('error');
         const publishedAllRaw = event.url.searchParams.get('publishedAll');
@@ -181,7 +188,7 @@ export function createContentRoutes(runtime, deps = {}) {
     }
     /** Create a new entry: validate the slug, compose a dated id when the concept is dated, refuse to clobber. */
     async function createAction(event) {
-        sessionOf(event);
+        requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const form = await event.request.formData();
         const slug = String(form.get('slug') ?? '').trim() || slugify(String(form.get('title') ?? ''));
@@ -228,7 +235,7 @@ export function createContentRoutes(runtime, deps = {}) {
     }
     /** Open a file for editing. A `?new=1` miss yields a blank document; any other miss is a 404. */
     async function editLoad(event) {
-        sessionOf(event);
+        requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         if (!isValidId(id))
@@ -289,6 +296,7 @@ export function createContentRoutes(runtime, deps = {}) {
             published,
             publishedFlash: event.url.searchParams.get('published') === '1',
             discardedFlash: event.url.searchParams.get('discarded') === '1',
+            preview: resolvePreview(runtime.preview, concept.id),
         };
     }
     /** Log a failed commit: a conflict is the expected last-writer-wins outcome, so it warns with a
@@ -386,7 +394,7 @@ export function createContentRoutes(runtime, deps = {}) {
     /** Save an edit: validate, then commit to the entry's pending branch with the session editor
      *  as author. Main and its manifest stay untouched until publish. Fails safe on 409. */
     async function saveAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         // Confine the commit path to the concept dir, built from a validated id (the App token can
@@ -408,7 +416,7 @@ export function createContentRoutes(runtime, deps = {}) {
      *  The branch is deleted only when its head still matches the commit this action made; a
      *  concurrent save moved it, so the entry stays pending and the next publish picks it up. */
     async function publishAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         if (!isValidId(id))
@@ -442,7 +450,7 @@ export function createContentRoutes(runtime, deps = {}) {
      *  Mounted on the concept list shim, but the topbar posts here from anywhere, so the route's
      *  concept param is ignored and the redirect lands on the first configured concept. */
     async function publishAllAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const first = runtime.concepts[0];
         if (!first)
             throw error(404, 'No content types configured');
@@ -521,7 +529,7 @@ export function createContentRoutes(runtime, deps = {}) {
     /** Discard an entry's pending edits: delete the branch (tolerant of already-gone) and return to
      *  the edit page when the entry lives on main, else to the list (the entry is gone entirely). */
     async function discardAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         if (!isValidId(id))
@@ -588,7 +596,7 @@ export function createContentRoutes(runtime, deps = {}) {
     }
     /** Delete an entry from its editor. The id comes from the route param. */
     async function deleteAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         if (!isValidId(id))
@@ -597,7 +605,7 @@ export function createContentRoutes(runtime, deps = {}) {
     }
     /** Delete an entry from the concept list. The id comes from the form body. */
     async function listDeleteAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const form = await event.request.formData();
         const id = String(form.get('id') ?? '');
@@ -610,7 +618,7 @@ export function createContentRoutes(runtime, deps = {}) {
      *  are the authoritative gate. The same last-writer-wins manifest race as save and delete applies,
      *  caught by the build's fail-closed backstop. */
     async function renameAction(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const concept = conceptOf(runtime, event.params);
         const id = event.params.id ?? '';
         if (!isValidId(id))

package/dist/sveltekit/guard.d.ts

@@ -2,7 +2,13 @@ import type { Editor } from '../auth/types.js';
 import type { HandleInput, RequestContext } from './types.js';
 /** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
 export declare function createAuthGuard(): ({ event, resolve }: HandleInput) => Promise<Response>;
-/** For a protected load/action: the session the guard already resolved, or a login redirect. */
-export declare function requireSession(event: RequestContext): Editor;
+/** For a protected load/action: the session the guard already resolved, or a login redirect.
+ *  The parameter is the minimal structural need (just `locals`), so every engine event shape
+ *  (RequestContext, the content routes' ContentEvent) and a real RequestEvent all satisfy it. */
+export declare function requireSession(event: {
+    locals: {
+        editor?: Editor | null;
+    };
+}): Editor;
 /** For the management surface: a signed-in owner, or 403 for an editor. */
 export declare function requireOwner(event: RequestContext): Editor;

package/dist/sveltekit/guard.js

@@ -80,7 +80,9 @@ export function createAuthGuard() {
         return response;
     };
 }
-/** For a protected load/action: the session the guard already resolved, or a login redirect. */
+/** For a protected load/action: the session the guard already resolved, or a login redirect.
+ *  The parameter is the minimal structural need (just `locals`), so every engine event shape
+ *  (RequestContext, the content routes' ContentEvent) and a real RequestEvent all satisfy it. */
 export function requireSession(event) {
     const editor = event.locals.editor;
     if (!editor)

package/dist/sveltekit/nav-routes.js

@@ -8,13 +8,7 @@ import { listMarkdown, readRaw, commitFile } from '../github/repo.js';
 import { isConflict } from '../github/types.js';
 import { log } from '../log/index.js';
 import { parseSiteConfig, extractMenu, validateNavTree, setMenu } from '../nav/site-config.js';
-/** The signed-in editor the guard resolved, or a login redirect. */
-function sessionOf(event) {
-    const editor = event.locals.editor;
-    if (!editor)
-        throw redirect(303, '/admin/login');
-    return editor;
-}
+import { requireSession } from './guard.js';
 export function createNavRoutes(runtime, deps = {}) {
     const mintToken = deps.mintToken ?? ((env) => cachedInstallationToken(appCredentials(runtime.backend, env)));
     /** List page-like concepts (routable, not dated) for the URL picker. Best-effort per concept. */
@@ -33,7 +27,7 @@ export function createNavRoutes(runtime, deps = {}) {
     }
     /** Load the nav editor. A missing or unparsable config degrades to an empty tree so it still opens. */
     async function navLoad(event) {
-        sessionOf(event);
+        requireSession(event);
         const config = runtime.navMenu;
         if (!config)
             throw error(404, 'No navigation menu configured');
@@ -79,7 +73,7 @@ export function createNavRoutes(runtime, deps = {}) {
     }
     /** Save the nav tree: validate, then read-modify-commit the one menu with the session editor as author. */
     async function navSave(event) {
-        const editor = sessionOf(event);
+        const editor = requireSession(event);
         const config = runtime.navMenu;
         if (!config)
             throw error(404, 'No navigation menu configured');

package/dist/vite/index.d.ts

@@ -30,3 +30,19 @@ export declare function cairnManifest(opts: CairnManifestOptions): Plugin;
  *  resolution, and writes the serialized manifest. The cairn-manifest bin calls this; it is exported
  *  so the write logic is testable apart from the CLI shell. */
 export declare function writeManifest(cwd?: string): Promise<void>;
+/** The repo and sender facts cairn-doctor derives off the consumer's adapter. */
+export interface AdapterFacts {
+    /** `cairn.backend.owner`. */
+    owner?: string;
+    /** `cairn.backend.repo`. */
+    repo?: string;
+    /** `cairn.sender.from`. */
+    from?: string;
+}
+/** 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 declare function readAdapterFacts(cwd?: string): Promise<AdapterFacts | null>;

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.50.0",
+  "version": "0.52.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -97,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/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,6 +29,7 @@ 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';
@@ -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,43 @@ 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);
+  }
+  // The writing modes (focus, typewriter), per-browser preferences on the device pick's pattern:
+  // off by default, read in an effect so SSR never touches localStorage, written by the
+  // toolbar's toggles. The effect tracks nothing reactive, so it runs once.
+  const focusStorageKey = 'cairn-editor-focus-mode';
+  const typewriterStorageKey = 'cairn-editor-typewriter';
+  let focusMode = $state(false);
+  let typewriter = $state(false);
+  $effect(() => {
+    focusMode = localStorage.getItem(focusStorageKey) === 'true';
+    typewriter = localStorage.getItem(typewriterStorageKey) === 'true';
+  });
+  function setFocusMode(on: boolean) {
+    focusMode = on;
+    localStorage.setItem(focusStorageKey, String(on));
+  }
+  function setTypewriter(on: boolean) {
+    typewriter = on;
+    localStorage.setItem(typewriterStorageKey, String(on));
+  }
+  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
@@ -388,7 +439,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.
@@ -575,7 +632,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}
@@ -602,7 +660,17 @@ 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}
+        {focusMode}
+        onFocusMode={setFocusMode}
+        {typewriter}
+        onTypewriter={setTypewriter}
+      >
         {#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. -->
@@ -665,19 +733,58 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           registerGetSelection={(fn) => (getSelection = fn)}
           registerFormat={(fn) => (format = fn)}
           {completionSources}
+          {focusMode}
+          {typewriter}
         />
       </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
@@ -696,7 +803,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)]">