@glw907/cairn-cms 0.50.0 → 0.51.0

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.51.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,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
@@ -388,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.
@@ -575,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}
@@ -602,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. -->
@@ -668,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
@@ -696,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/src/lib/components/EditorToolbar.svelte

@@ -3,12 +3,15 @@
 The editor card's instrument strip. Three button groups divided by hairlines (Text, Structure with a
 More overflow menu, then the host's Insert controls) and the Write/Preview segmented control pinned
 right. Format buttons ask the host to transform the editor's current selection; the host supplies the
-Insert group through the `insertControls` snippet so the strip stays free of picker wiring. The glyphs
-are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
+Insert group through the `insertControls` snippet so the strip stays free of picker wiring. While
+Preview shows, a device trigger joins the segmented capsule and opens a popover menu of preview
+widths, reported to the host through `onDevice`. The glyphs are stroke SVG icons in the admin's
+house style (24x24 viewBox, `currentColor`, round caps).
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { FormatKind } from './markdown-format.js';
+  import { deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
 
   interface Props {
     /** Apply a markdown transform to the editor's current selection. */
@@ -17,11 +20,16 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     mode: 'write' | 'preview';
     /** Ask the host to switch panes. */
     onMode: (m: 'write' | 'preview') => void;
+    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
+    device?: PreviewDeviceId;
+    /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
+     *  while Preview shows. */
+    onDevice?: (id: PreviewDeviceId) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
   }
 
-  let { format, mode, onMode, insertControls }: Props = $props();
+  let { format, mode, onMode, device = 'desktop', onDevice, insertControls }: Props = $props();
 
   // Each icon is a set of stroke `<path>` d-strings rendered into the shared 24x24 svg below, so the
   // markup stays declarative (no per-icon raw html). Paths follow the house outline style.
@@ -89,6 +97,19 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     if (moreMenu?.matches(':popover-open')) moreMenu.hidePopover();
   }
 
+  // The device menu's popover element and its open state, mirrored from the toggle event into
+  // aria-expanded on the trigger (the More menu's pattern).
+  let deviceMenu = $state<HTMLUListElement | null>(null);
+  let deviceOpen = $state(false);
+  const activeDevice = $derived(previewDevice(device));
+  // Whether the device trigger renders as the capsule's third segment.
+  const showDeviceTrigger = $derived(mode === 'preview' && !!onDevice);
+
+  function pickDevice(id: PreviewDeviceId) {
+    onDevice?.(id);
+    if (deviceMenu?.matches(':popover-open')) deviceMenu.hidePopover();
+  }
+
   let toolbarEl = $state<HTMLDivElement | null>(null);
   // The roving tab stop's position among the strip's enabled top-level controls. The Write/Preview
   // tabs join the toolbar's roving order instead of managing their own arrow keys: the ARIA toolbar
@@ -156,13 +177,20 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
 {/snippet}
 
 {#snippet tab(m: 'write' | 'preview', label: string)}
+  <!-- The capsule look is manual rounding, not daisyUI's .join: join radii follow direct
+       children, and the device trigger must sit outside the tablist (ARIA required children),
+       so the segments square their shared edges themselves. Preview squares its right edge only
+       while the trigger extends the capsule. -->
   <button
     type="button"
     role="tab"
     id={`cairn-tab-${m}`}
     aria-selected={mode === m}
     aria-controls={`cairn-pane-${m}`}
-    class="join-item btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class="btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class:rounded-r-none={m === 'write' || showDeviceTrigger}
+    class:rounded-l-none={m === 'preview'}
+    class:-ml-px={m === 'preview'}
     onclick={() => onMode(m)}
   >
     {label}
@@ -230,9 +258,52 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   {/if}
 
   <!-- The host renders the matching tabpanels (#cairn-pane-write and #cairn-pane-preview) below
-       the strip inside the same editor card. -->
-  <div class="join ml-auto" role="tablist" aria-label="Editor view">
-    {@render tab('write', 'Write')}
-    {@render tab('preview', 'Preview')}
+       the strip inside the same editor card. The tablist wrapper holds ONLY the two tabs (ARIA
+       required children: anything else in a tablist makes assistive tech miscount the tabs).
+       While Preview shows, the device trigger reads as the capsule's third segment from the
+       flex row right after the wrapper; it is a plain button, not a tab. -->
+  <div class="ml-auto flex items-center">
+    <div role="tablist" aria-label="Editor view" class="flex items-center">
+      {@render tab('write', 'Write')}
+      {@render tab('preview', 'Preview')}
+    </div>
+    {#if showDeviceTrigger}
+      <button
+        type="button"
+        class="btn btn-sm btn-ghost gap-1 rounded-l-none -ml-px"
+        title="Preview width"
+        aria-expanded={deviceOpen}
+        popovertarget="cairn-preview-device-menu"
+        style="anchor-name:--cairn-preview-device"
+      >
+        <span class="sr-only">Preview width:</span>
+        {activeDevice.label}
+        {@render strokeIcon(['m6 9 6 6 6-6'])}
+      </button>
+    {/if}
   </div>
+  {#if showDeviceTrigger}
+    <!-- The device list mirrors the More menu exactly: a DaisyUI v5 popover dropdown of plain
+         buttons, with the active pick carried by aria-pressed and the check glyph. Deliberately
+         NOT the ARIA menu pattern: menu roles promise interactions this list does not have. -->
+    <ul
+      bind:this={deviceMenu}
+      popover="auto"
+      id="cairn-preview-device-menu"
+      style="position-anchor:--cairn-preview-device"
+      ontoggle={(e) => (deviceOpen = e.newState === 'open')}
+      class="dropdown dropdown-end menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
+    >
+      {#each previewDevices as d (d.id)}
+        <li>
+          <button type="button" aria-pressed={device === d.id} onclick={() => pickDevice(d.id)}>
+            <span class="grow">{deviceLabel(d)}</span>
+            {#if device === d.id}
+              {@render strokeIcon(['M20 6 9 17l-5-5'])}
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
 </div>

package/src/lib/components/MarkdownEditor.svelte

@@ -61,9 +61,16 @@ through the adapter's render. Swapping the editor stays a one-file change.
     // Mirror the admin theme into CodeMirror's own dark flag, so its base chrome (the autocomplete
     // tooltip above all) renders dark-on-dark instead of light-on-dark.
     const isDark = host.closest('[data-theme]')?.getAttribute('data-theme')?.includes('dark') ?? false;
-    // The directive machinery ink, one rule for the fence, leaf, and inline decorations.
+    // The directive machinery treatment. The fence bands and content rails step their alpha by
+    // nesting depth through the per-theme vars in cairn-admin.css; the fallbacks are the light
+    // values, so the editor still renders sensibly outside an admin theme wrapper. The deeper
+    // bands swap in a darker ink (--cairn-directive-ink-N) to hold AA on their own tint.
+    const band = (depth: number, fallback: string) =>
+      `color-mix(in oklab, var(--color-accent) var(--cairn-directive-band-${depth}, ${fallback}), transparent)`;
+    const rail = (depth: number, fallback: string) =>
+      `inset 2px 0 0 0 color-mix(in oklab, var(--color-accent) var(--cairn-directive-rail-${depth}, ${fallback}), transparent)`;
     const directiveInk = {
-      backgroundColor: 'color-mix(in oklab, var(--color-accent) 8%, transparent)',
+      backgroundColor: band(1, '8%'),
       color: 'var(--color-accent)',
     };
     const theme = EditorView.theme(
@@ -90,6 +97,17 @@ through the adapter's render. Swapping the editor stays a one-file change.
         },
         '.cm-line': { padding: '0' },
         '.cm-cairn-directive-fence': directiveInk,
+        '.cm-cairn-directive-fence.cm-cairn-depth-2': {
+          backgroundColor: band(2, '14%'),
+          color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))',
+        },
+        '.cm-cairn-directive-fence.cm-cairn-depth-3': {
+          backgroundColor: band(3, '20%'),
+          color: 'var(--cairn-directive-ink-3, oklch(48% 0.16 300))',
+        },
+        '.cm-cairn-directive-content.cm-cairn-depth-1': { boxShadow: rail(1, '75%') },
+        '.cm-cairn-directive-content.cm-cairn-depth-2': { boxShadow: rail(2, '82%') },
+        '.cm-cairn-directive-content.cm-cairn-depth-3': { boxShadow: rail(3, '90%') },
         '.cm-cairn-directive-leaf': directiveInk,
         '.cm-cairn-directive-inline': directiveInk,
       },

package/src/lib/components/cairn-admin.css

@@ -28,6 +28,23 @@
      tint (4.75:1); 58% failed the tint at 4.04:1. A locked margin, like the dark nav pair. */
   --color-accent: oklch(54% 0.16 300);
   --color-accent-content: oklch(98% 0.012 300);
+
+  /* The editor's nested-directive depth scale: machinery bands step the accent tint by nesting
+     depth, content lines carry an accent rail at the same steps, and the deeper bands darken
+     their ink so it keeps AA on its own tint. Locked pairs (ink on band, computed against
+     base-100): depth 1 = 54% on 8% (4.75:1), depth 2 = 50% on 14% (5.20:1), depth 3 = 48% on
+     20% (5.21:1). Do not raise a band or lighten its ink without re-checking. */
+  --cairn-directive-band-1: 8%;
+  --cairn-directive-band-2: 14%;
+  --cairn-directive-band-3: 20%;
+  --cairn-directive-ink-2: oklch(50% 0.16 300);
+  --cairn-directive-ink-3: oklch(48% 0.16 300);
+  /* The content rail is a 2px non-text cue, so its composited color must clear the 3:1 floor
+     against base-100 (WCAG 1.4.11). Locked margins (rail vs base-100): depth 1 = 75% (3.25:1),
+     depth 2 = 82% (3.71:1), depth 3 = 90% (4.34:1). Do not lower an alpha without re-checking. */
+  --cairn-directive-rail-1: 75%;
+  --cairn-directive-rail-2: 82%;
+  --cairn-directive-rail-3: 90%;
   --color-neutral: oklch(32% 0.012 75);
   --color-neutral-content: oklch(96% 0.004 75);
 
@@ -89,6 +106,22 @@
   --color-secondary-content: oklch(20% 0.008 75);
   --color-accent: oklch(70% 0.14 300);
   --color-accent-content: oklch(20% 0.04 300);
+
+  /* The nested-directive depth scale on dark: slightly stronger bands (a tint reads quieter on a
+     dark base), with the deeper inks lightened to keep AA on their own tint. Locked pairs (ink on
+     band, computed against base-100): depth 1 = 70% on 10% (5.03:1), depth 2 = 74% on 16%
+     (5.27:1), depth 3 = 78% on 22% (5.42:1). Do not raise a band or darken its ink without
+     re-checking. */
+  --cairn-directive-band-1: 10%;
+  --cairn-directive-band-2: 16%;
+  --cairn-directive-band-3: 22%;
+  --cairn-directive-ink-2: oklch(74% 0.14 300);
+  --cairn-directive-ink-3: oklch(78% 0.14 300);
+  /* The content rails hold the same 3:1 non-text floor on dark. Locked margins (rail vs
+     base-100): depth 1 = 65% (3.27:1), depth 2 = 75% (3.90:1), depth 3 = 85% (4.62:1). */
+  --cairn-directive-rail-1: 65%;
+  --cairn-directive-rail-2: 75%;
+  --cairn-directive-rail-3: 85%;
   --color-neutral: oklch(80% 0.01 75);
   --color-neutral-content: oklch(22% 0.008 75);
 
@@ -196,6 +229,20 @@
     outline-offset: -1px;
   }
 
+  /* Menu items come as anchors or buttons, and the omitted Preflight is what made them match:
+     without it a button keeps the UA chrome (outset border, gray fill, centered system-font
+     text) while its anchor siblings render flat. This scoped substitute levels the buttons to
+     the anchor baseline. The components layer still beats the UA stylesheet, so daisyUI's
+     utilities-layer menu rules (the hover tint, the menu-sm sizing) and any text utility such
+     as text-error keep winning. A .btn inside a menu keeps its full DaisyUI chrome. */
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .menu li > button:not(.btn) {
+    border: 0 solid;
+    background-color: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+  }
+
   /* The admin topbar plus the edit page's sticky action header stack about 120px of veil over the
      top of the content column, and a control the browser scrolls into view could land hidden
      beneath them (WCAG 2.4.11 Focus Not Obscured). The scroll margin keeps any focus or fragment
@@ -205,6 +252,18 @@
   }
 }
 
+/* DaisyUI v5's .menu quiets keyboard focus on its items (`outline-style: none` on
+   :focus-visible), and the compiled sheet carries that rule in the utilities layer, where it
+   beats the components-layer focus ring above: cascade layers resolve before specificity, and
+   utilities is the last layer. This override is deliberately UNLAYERED (the same mechanism that
+   lets the theme blocks win), because no layered rule can outrank a later layer; it restores a
+   visible focus indicator on the popover and nav menu items. The negative offset draws the ring
+   inside the item, clear of the menu panel's clipped corners. */
+:where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .menu li > :is(button, a):focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 /* Respect a reduced-motion preference inside the admin. DaisyUI's modal, drawer, and the admin's
    own hover transitions otherwise animate regardless. Scoped to the admin roots, so it never
    reaches the host's pages. */