@glw907/cairn-cms 0.41.0 → 0.51.0

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/LoginPage.svelte

@@ -1,6 +1,6 @@
 <!--
 @component
-The magic-link sign-in page. A plain form POST to the page's default action (the engine's
+The magic-link sign-in page. A plain form POST to the named `?/request` action (the engine's
 `requestAction`); no client SDK. The success message is identical whether or not the email is on
 the allowlist, so the page never leaks membership (spec §7.1).
 -->
@@ -101,7 +101,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
       {#if data.error && !form?.status}
         <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}
-      <form method="POST" class="flex flex-col gap-3">
+      <form method="POST" action="?/request" class="flex flex-col gap-3">
         <CsrfField token={data.csrf} />
         <label class="flex flex-col gap-1">
           <span class="text-sm font-medium">Email</span>

package/src/lib/components/ManageEditors.svelte

@@ -3,7 +3,8 @@
 The owner-gated editor management surface: a table of editors with role-flip and remove actions,
 and an add-editor form. The acting owner's own row disables its destructive controls; the
 last-owner anti-lockout rule itself is enforced server-side (editors-routes). Actions post to the
-named `?/setRole`, `?/remove`, and `?/add` actions.
+named `?/setRole`, `?/removeEditor`, and `?/addEditor` actions, the names the single-mount
+dispatcher defines.
 -->
 <script lang="ts">
   import CsrfField from './CsrfField.svelte';
@@ -53,7 +54,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
                 {editor.role === 'owner' ? 'Make editor' : 'Make owner'}
               </button>
             </form>
-            <form method="POST" action="?/remove">
+            <form method="POST" action="?/removeEditor">
               <CsrfField />
               <input type="hidden" name="email" value={editor.email} />
               <button type="submit" class="btn btn-ghost btn-xs text-error" disabled={isSelf} aria-label={`Remove ${editor.displayName}`}>
@@ -67,7 +68,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
   </table>
 </div>
 
-<form method="POST" action="?/add" class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 grid gap-3 p-4 shadow-[var(--cairn-shadow)] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+<form method="POST" action="?/addEditor" class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 grid gap-3 p-4 shadow-[var(--cairn-shadow)] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
   <CsrfField />
   <label class="flex flex-col gap-1">
     <span class="text-sm font-medium">Name</span>

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. */

package/src/lib/components/editor-highlight.ts

@@ -5,7 +5,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { Decoration, ViewPlugin, type DecorationSet, type EditorView, type ViewUpdate } from '@codemirror/view';
 import { RangeSetBuilder } from '@codemirror/state';
-import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
+import { directiveLineKind, fenceDepths, findInlineDirectives } from './markdown-directives.js';
 
 /** Markdown token colors over the admin theme variables. */
 export function cairnHighlightStyle(): HighlightStyle {
@@ -27,19 +27,40 @@ export function cairnHighlightStyle(): HighlightStyle {
 // learns what the line is without leaving the page.
 const MACHINERY_HINT = 'Layout marker. Edit the text between these lines and leave this line as it is.';
 
-const fenceLine = Decoration.line({ class: 'cm-cairn-directive-fence', attributes: { title: MACHINERY_HINT } });
+// Nesting deeper than three steps shares the third visual step; the depth model itself is unbounded.
+const DEPTH_STEPS = [1, 2, 3];
+
+const fenceLines = DEPTH_STEPS.map((d) =>
+  Decoration.line({ class: `cm-cairn-directive-fence cm-cairn-depth-${d}`, attributes: { title: MACHINERY_HINT } }),
+);
+const contentLines = DEPTH_STEPS.map((d) => Decoration.line({ class: `cm-cairn-directive-content cm-cairn-depth-${d}` }));
 const leafLine = Decoration.line({ class: 'cm-cairn-directive-leaf', attributes: { title: MACHINERY_HINT } });
 const inlineMark = Decoration.mark({ class: 'cm-cairn-directive-inline' });
 
-function buildDirectiveDecorations(view: EditorView): DecorationSet {
+// Depth needs the whole document, since a visible line's containers can open above the viewport.
+// One regex pass per line, linear in the document; at admin entry sizes (tens of kilobytes) that
+// is well under a millisecond. The plugin caches the result, so the scan reruns only when the
+// document changes and a scroll rebuilds the viewport decorations from the cached array.
+function docDepths(view: EditorView): (number | null)[] {
+  const doc = view.state.doc;
+  const lines: string[] = [];
+  for (let n = 1; n <= doc.lines; n++) lines.push(doc.line(n).text);
+  return fenceDepths(lines);
+}
+
+function buildDirectiveDecorations(view: EditorView, depths: (number | null)[]): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>();
   for (const { from, to } of view.visibleRanges) {
     for (let pos = from; pos <= to; ) {
       const line = view.state.doc.lineAt(pos);
       const kind = directiveLineKind(line.text);
-      if (kind === 'fence') builder.add(line.from, line.from, fenceLine);
+      const depth = Math.min(depths[line.number - 1] ?? 0, DEPTH_STEPS.length);
+      // A fence-shaped line at depth 0 is one the depth scan disowned (a documented example
+      // inside a code block, outside any container); it gets no machinery treatment.
+      if (kind === 'fence' && depth > 0) builder.add(line.from, line.from, fenceLines[depth - 1]);
       else if (kind === 'leaf') builder.add(line.from, line.from, leafLine);
-      else {
+      else if (kind === null) {
+        if (depth > 0) builder.add(line.from, line.from, contentLines[depth - 1]);
         for (const r of findInlineDirectives(line.text)) {
           builder.add(line.from + r.from, line.from + r.to, inlineMark);
         }
@@ -55,11 +76,15 @@ export function cairnDirectivePlugin() {
   return ViewPlugin.fromClass(
     class {
       decorations: DecorationSet;
+      depths: (number | null)[];
       constructor(view: EditorView) {
-        this.decorations = buildDirectiveDecorations(view);
+        this.depths = docDepths(view);
+        this.decorations = buildDirectiveDecorations(view, this.depths);
       }
       update(update: ViewUpdate) {
-        if (update.docChanged || update.viewportChanged) this.decorations = buildDirectiveDecorations(update.view);
+        if (update.docChanged) this.depths = docDepths(update.view);
+        if (update.docChanged || update.viewportChanged)
+          this.decorations = buildDirectiveDecorations(update.view, this.depths);
       }
     },
     { decorations: (v) => v.decorations },

package/src/lib/components/index.ts

@@ -1,5 +1,6 @@
 // Admin Svelte components (Plan 05). The Warm Stone theme ships as a CSS side effect imported
 // by the components that set `data-theme="cairn-admin"`.
+export { default as CairnAdmin } from './CairnAdmin.svelte';
 export { default as AdminLayout } from './AdminLayout.svelte';
 export { default as LoginPage } from './LoginPage.svelte';
 export { default as ConfirmPage } from './ConfirmPage.svelte';

package/src/lib/components/markdown-directives.ts

@@ -2,10 +2,19 @@
 // styled distinctly so an editor can tell component scaffolding from prose). Pure functions; the
 // CodeMirror decoration plugin wraps them.
 
-const FENCE = /^\s{0,3}:::+\s*[\w-]*\s*(\{[^}]*\})?\s*$/;
+// A container fence: three or more colons, then an optional name, an optional [label], and
+// optional {attrs}, in remark-directive order. The name is captured so the depth scan below can
+// tell an opener (named) from a closer (bare colons). Matching is tolerant of stray whitespace,
+// the same posture as the leaf form: a slightly off fence should still read as machinery.
+const FENCE = /^\s{0,3}:{3,}\s*([\w-]*)\s*(\[[^\]]*\])?\s*(\{[^}]*\})?\s*$/;
 const LEAF = /^\s{0,3}::[\w-]+(\[[^\]]*\])?(\{[^}]*\})?\s*$/;
 const INLINE = /(?<![:\w]):[\w-]+\[[^\]]*\](\{[^}]*\})?/g;
 
+// A fenced code block's delimiter: three or more backticks or tildes, indent-tolerant like the
+// directive forms. The depth scan tracks these so a documented ::: example inside a code block
+// never opens a real container.
+const CODE_FENCE = /^\s{0,3}(`{3,}|~{3,})/;
+
 /** Classify a whole line as a container fence, a leaf directive, or neither. */
 export function directiveLineKind(line: string): 'fence' | 'leaf' | null {
   if (FENCE.test(line)) return 'fence';
@@ -13,6 +22,47 @@ export function directiveLineKind(line: string): 'fence' | 'leaf' | null {
   return null;
 }
 
+/**
+ * The 1-based container depth each line sits at, or null outside any container. A named fence
+ * opens a container; a bare fence closes the most recent one (colon counts are not trusted for
+ * pairing, since authors vary them). An opener and its closer share the opener's depth, and a
+ * line between them carries the depth of its innermost container. Lines inside a fenced code
+ * block are plain content, so a documented ::: example cannot open a phantom container running
+ * to end of document. Author errors are tolerated: an unmatched closer reads as depth 1 and the
+ * count never goes below zero.
+ */
+export function fenceDepths(lines: string[]): (number | null)[] {
+  const depths: (number | null)[] = [];
+  let open = 0;
+  // The marker character that opened the current code block, or null outside one. Only a line
+  // opening with the same character closes it, so tildes inside a backtick block stay literal.
+  let codeMarker: string | null = null;
+  for (const line of lines) {
+    const code = CODE_FENCE.exec(line);
+    if (code) {
+      if (codeMarker === null) codeMarker = code[1][0];
+      else if (code[1][0] === codeMarker) codeMarker = null;
+      depths.push(open > 0 ? open : null);
+      continue;
+    }
+    if (codeMarker !== null) {
+      depths.push(open > 0 ? open : null);
+      continue;
+    }
+    const fence = FENCE.exec(line);
+    if (!fence) {
+      depths.push(open > 0 ? open : null);
+    } else if (fence[1]) {
+      open += 1;
+      depths.push(open);
+    } else {
+      depths.push(Math.max(open, 1));
+      if (open > 0) open -= 1;
+    }
+  }
+  return depths;
+}
+
 /** Inline directive ranges (`:name[...]{...}`) within a line of text. */
 export function findInlineDirectives(text: string): { from: number; to: number }[] {
   const out: { from: number; to: number }[] = [];

package/src/lib/components/markdown-format.ts

@@ -197,30 +197,3 @@ export function unwrapCairnLink(doc: string, href: string): string {
   }
   return out;
 }
-
-/**
- * Rewrite every cairn: link whose href is exactly `oldHref` so its href becomes `newHref`, keeping
- * the display text and any link title byte-for-byte. Rename calls this to repoint a renamed entry's
- * inbound tokens. Parsed with the same remark pipeline as extractCairnLinks, so a token inside a code
- * span is not a link node and is never touched. Each matching node's source span is rewritten from
- * last to first, replacing only the `](oldHref` run so the label and title stay exact.
- */
-export function rewriteCairnLink(doc: string, oldHref: string, newHref: string): string {
-  const tree = unified().use(remarkParse).use(remarkGfm).parse(doc);
-  const spans: { start: number; end: number }[] = [];
-  visit(tree, 'link', (node: Link) => {
-    if (node.url !== oldHref) return;
-    const start = node.position?.start?.offset;
-    const end = node.position?.end?.offset;
-    if (start == null || end == null) return;
-    spans.push({ start, end });
-  });
-  spans.sort((a, b) => b.start - a.start);
-  let out = doc;
-  for (const span of spans) {
-    const src = out.slice(span.start, span.end);
-    const rewritten = src.replace(`](${oldHref}`, `](${newHref}`);
-    out = out.slice(0, span.start) + rewritten + out.slice(span.end);
-  }
-  return out;
-}

package/src/lib/components/preview-doc.ts

@@ -0,0 +1,82 @@
+// cairn-cms: the edit page's preview-frame document. The admin's chrome isolation keeps the
+// site's CSS out of the admin document, so EditPage renders the preview inside a sandboxed
+// iframe whose document links the site's own stylesheets from the adapter's preview knob. This
+// module builds that iframe's srcdoc as one pure string, so its shape is unit-testable, and it
+// carries the device table the frame's width control offers.
+
+import { escapeHtml } from '../escape.js';
+import type { ResolvedPreview } from '../content/types.js';
+
+/** One width the preview frame can take. */
+export interface PreviewDevice {
+  id: 'desktop' | 'tablet' | 'phone' | 'small';
+  /** The device menu label, also the frame caption's first half. */
+  label: string;
+  /** Frame width in CSS pixels; null fills the pane (Desktop). */
+  width: number | null;
+}
+
+/** A preview device's id, the value the page persists. */
+export type PreviewDeviceId = PreviewDevice['id'];
+
+/** The four widths the device menu offers, in menu order. Desktop leads as the default. */
+export const previewDevices: PreviewDevice[] = [
+  { id: 'desktop', label: 'Desktop', width: null },
+  { id: 'tablet', label: 'Tablet', width: 768 },
+  { id: 'phone', label: 'Phone', width: 390 },
+  { id: 'small', label: 'Small phone', width: 320 },
+];
+
+/** The table row for a device id. The id type makes a miss impossible; the fallback satisfies find. */
+export function previewDevice(id: PreviewDeviceId): PreviewDevice {
+  return previewDevices.find((d) => d.id === id) ?? previewDevices[0];
+}
+
+/** A device's user-facing text, shared by the toolbar's menu items and the frame caption: the
+ *  label with its width when one is fixed, so the value reaches assistive tech at pick time. */
+export function deviceLabel(d: PreviewDevice): string {
+  return d.width === null ? d.label : `${d.label} · ${d.width} px`;
+}
+
+/**
+ * Build the preview iframe's srcdoc: a complete document linking the site's stylesheets around
+ * the rendered entry html. The html comes from the site's floored render pipeline, which already
+ * stripped scripts and event handlers, so it embeds unescaped; the frame's empty `sandbox` is
+ * belt and braces over that floor. The parameter is the flat `ResolvedPreview` shape `editLoad`
+ * ships, so the per-concept map can never reach the frame document by construction.
+ * `preview` null (a site without the adapter knob) yields a styleless but complete document.
+ */
+export function buildPreviewDoc(html: string, preview: ResolvedPreview | null): string {
+  const links = (preview?.stylesheets ?? [])
+    .map((href) => `<link rel="stylesheet" href="${escapeHtml(href)}">`)
+    .join('\n');
+  const bodyAttrs = preview?.bodyClass ? ` class="${escapeHtml(preview.bodyClass)}"` : '';
+  const content = preview?.containerClass
+    ? `<div class="${escapeHtml(preview.containerClass)}">${html}</div>`
+    : html;
+  // The reset sits BEFORE the site links so the site's CSS wins every collision: it only clears
+  // the default body margin and pins a white ground for sheets that assume one.
+  //
+  // The base tag is what makes links inert. The empty sandbox alone does not: a sandboxed
+  // context may still navigate itself, and a srcdoc document resolves relative hrefs against the
+  // parent's base URL, so a clicked fragment or root link could render the admin login inside
+  // the frame. Targeting every link at a new tab turns each click into a popup, and the sandbox
+  // (which grants no allow-popups) blocks it, so a proofing click goes nowhere.
+  return [
+    '<!doctype html>',
+    '<html>',
+    '<head>',
+    '<meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    '<base target="_blank">',
+    '<style>body{margin:0;background:#fff}</style>',
+    links,
+    '</head>',
+    `<body${bodyAttrs}>`,
+    content,
+    '</body>',
+    '</html>',
+  ]
+    .filter((line) => line !== '')
+    .join('\n');
+}

package/src/lib/content/compose.ts

@@ -44,6 +44,7 @@ export function composeRuntime({ adapter, siteConfig, extensions = [] }: Compose
     registry: adapter.registry,
     icons: adapter.icons,
     navMenu: adapter.navMenu,
+    preview: adapter.preview,
     assets: adapter.assets,
     adminPanels,
     fieldTypes,

package/src/lib/content/links.ts

@@ -6,6 +6,7 @@ import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkGfm from 'remark-gfm';
 import { visit } from 'unist-util-visit';
+import type { Link } from 'mdast';
 import { isValidId } from './ids.js';
 
 /** A resolved reference to a content entry by its concept and permanent id. */
@@ -59,3 +60,30 @@ export function extractCairnLinks(body: string): CairnRef[] {
   });
   return refs;
 }
+
+/**
+ * Rewrite every cairn: link whose href is exactly `oldHref` so its href becomes `newHref`, keeping
+ * the display text and any link title byte-for-byte. Rename calls this to repoint a renamed entry's
+ * inbound tokens. Parsed with the same remark pipeline as extractCairnLinks, so a token inside a code
+ * span is not a link node and is never touched. Each matching node's source span is rewritten from
+ * last to first, replacing only the `](oldHref` run so the label and title stay exact.
+ */
+export function rewriteCairnLink(doc: string, oldHref: string, newHref: string): string {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(doc);
+  const spans: { start: number; end: number }[] = [];
+  visit(tree, 'link', (node: Link) => {
+    if (node.url !== oldHref) return;
+    const start = node.position?.start?.offset;
+    const end = node.position?.end?.offset;
+    if (start == null || end == null) return;
+    spans.push({ start, end });
+  });
+  spans.sort((a, b) => b.start - a.start);
+  let out = doc;
+  for (const span of spans) {
+    const src = out.slice(span.start, span.end);
+    const rewritten = src.replace(`](${oldHref}`, `](${newHref}`);
+    out = out.slice(0, span.start) + rewritten + out.slice(span.end);
+  }
+  return out;
+}