@glw907/cairn-cms 0.41.0 → 0.51.0

package/dist/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/dist/components/EditorToolbar.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { FormatKind } from './markdown-format.js';
+import { type PreviewDeviceId } from './preview-doc.js';
 interface Props {
     /** Apply a markdown transform to the editor's current selection. */
     format: (kind: FormatKind) => void;
@@ -7,6 +8,11 @@ interface Props {
     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;
 }
@@ -14,8 +20,10 @@ interface Props {
  * 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).
  */
 declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
 type EditorToolbar = ReturnType<typeof EditorToolbar>;

package/dist/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/dist/components/LoginPage.svelte.d.ts

@@ -14,7 +14,7 @@ interface Props {
     } | null;
 }
 /**
- * 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).
  */

package/dist/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/dist/components/ManageEditors.svelte.d.ts

@@ -15,7 +15,8 @@ interface Props {
  * 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.
  */
 declare const ManageEditors: import("svelte").Component<Props, {}, "">;
 type ManageEditors = ReturnType<typeof ManageEditors>;

package/dist/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/dist/components/cairn-admin.css

@@ -176,6 +176,14 @@
     outline-offset: -1px;
   }
 
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .menu li > button:not(.btn) {
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    background-color: #0000;
+    border: 0 solid;
+  }
+
   :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) :is(a, button, input, textarea, select, summary, [tabindex]) {
     scroll-margin-top: 8.5rem;
   }
@@ -3400,15 +3408,6 @@
     }
   }
 
-  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:not(:first-child, :disabled, [disabled], .btn-disabled)) {
-    margin-block-start: 0;
-    margin-inline-start: calc(var(--border, 1px) * -1);
-  }
-
-  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:is(:disabled, [disabled], .btn-disabled)) {
-    border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
-  }
-
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .modal-action {
       justify-content: flex-end;
@@ -3503,6 +3502,10 @@
     margin-bottom: calc(var(--spacing) * 7);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .-ml-px {
+    margin-left: -1px;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -3919,6 +3922,10 @@
     height: calc(var(--spacing) * 16);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-\[70vh\] {
+    height: 70vh;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-h-\[60vh\] {
     max-height: 60vh;
   }
@@ -4037,6 +4044,10 @@
     max-width: 30%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-full {
+    max-width: 100%;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-md {
     max-width: var(--container-md);
   }
@@ -4337,6 +4348,16 @@
     border-radius: var(--radius-xl);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4996,6 +5017,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5418,6 +5445,14 @@
   --color-secondary-content: oklch(98% .004 75);
   --color-accent: oklch(54% .16 300);
   --color-accent-content: oklch(98% .012 300);
+  --cairn-directive-band-1: 8%;
+  --cairn-directive-band-2: 14%;
+  --cairn-directive-band-3: 20%;
+  --cairn-directive-ink-2: oklch(50% .16 300);
+  --cairn-directive-ink-3: oklch(48% .16 300);
+  --cairn-directive-rail-1: 75%;
+  --cairn-directive-rail-2: 82%;
+  --cairn-directive-rail-3: 90%;
   --color-neutral: oklch(32% .012 75);
   --color-neutral-content: oklch(96% .004 75);
   --color-info: oklch(52% .12 240);
@@ -5459,6 +5494,14 @@
   --color-secondary-content: oklch(20% .008 75);
   --color-accent: oklch(70% .14 300);
   --color-accent-content: oklch(20% .04 300);
+  --cairn-directive-band-1: 10%;
+  --cairn-directive-band-2: 16%;
+  --cairn-directive-band-3: 22%;
+  --cairn-directive-ink-2: oklch(74% .14 300);
+  --cairn-directive-ink-3: oklch(78% .14 300);
+  --cairn-directive-rail-1: 65%;
+  --cairn-directive-rail-2: 75%;
+  --cairn-directive-rail-3: 85%;
   --color-neutral: oklch(80% .01 75);
   --color-neutral-content: oklch(22% .008 75);
   --color-info: oklch(72% .12 240);
@@ -5487,6 +5530,11 @@
   box-sizing: border-box;
 }
 
+: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;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-theme="cairn-admin"] *, [data-theme="cairn-admin-dark"] * {
     scroll-behavior: auto !important;

package/dist/components/editor-highlight.d.ts

@@ -5,5 +5,6 @@ export declare function cairnHighlightStyle(): HighlightStyle;
 /** Line and mark decorations flagging remark-directive machinery. */
 export declare function cairnDirectivePlugin(): ViewPlugin<{
     decorations: DecorationSet;
+    depths: (number | null)[];
     update(update: ViewUpdate): void;
 }, undefined>;

package/dist/components/editor-highlight.js

@@ -5,7 +5,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { Decoration, ViewPlugin } 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() {
     return HighlightStyle.define([
@@ -24,20 +24,39 @@ export function cairnHighlightStyle() {
 // The machinery lines explain themselves on hover, so an editor who has never seen ::: syntax
 // 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) {
+// 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) {
+    const doc = view.state.doc;
+    const lines = [];
+    for (let n = 1; n <= doc.lines; n++)
+        lines.push(doc.line(n).text);
+    return fenceDepths(lines);
+}
+function buildDirectiveDecorations(view, depths) {
     const builder = new RangeSetBuilder();
     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);
                 }
@@ -51,12 +70,16 @@ function buildDirectiveDecorations(view) {
 export function cairnDirectivePlugin() {
     return ViewPlugin.fromClass(class {
         decorations;
+        depths;
         constructor(view) {
-            this.decorations = buildDirectiveDecorations(view);
+            this.depths = docDepths(view);
+            this.decorations = buildDirectiveDecorations(view, this.depths);
         }
         update(update) {
+            if (update.docChanged)
+                this.depths = docDepths(update.view);
             if (update.docChanged || update.viewportChanged)
-                this.decorations = buildDirectiveDecorations(update.view);
+                this.decorations = buildDirectiveDecorations(update.view, this.depths);
         }
     }, { decorations: (v) => v.decorations });
 }

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+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/dist/components/index.js

@@ -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/dist/components/markdown-directives.d.ts

@@ -1,5 +1,15 @@
 /** Classify a whole line as a container fence, a leaf directive, or neither. */
 export declare function directiveLineKind(line: string): 'fence' | 'leaf' | 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 declare function fenceDepths(lines: string[]): (number | null)[];
 /** Inline directive ranges (`:name[...]{...}`) within a line of text. */
 export declare function findInlineDirectives(text: string): {
     from: number;

package/dist/components/markdown-directives.js

@@ -1,9 +1,17 @@
 // Remark-directive detection for the editor's machinery highlighting (spec: directive syntax is
 // 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) {
     if (FENCE.test(line))
@@ -12,6 +20,51 @@ export function directiveLineKind(line) {
         return 'leaf';
     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) {
+    const depths = [];
+    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 = 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) {
     const out = [];

package/dist/components/markdown-format.d.ts

@@ -22,11 +22,3 @@ export declare function insertInlineLink(doc: string, from: number, to: number,
  * is left in place.
  */
 export declare function unwrapCairnLink(doc: string, href: string): string;
-/**
- * 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 declare function rewriteCairnLink(doc: string, oldHref: string, newHref: string): string;

package/dist/components/markdown-format.js

@@ -157,31 +157,3 @@ export function unwrapCairnLink(doc, href) {
     }
     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, oldHref, newHref) {
-    const tree = unified().use(remarkParse).use(remarkGfm).parse(doc);
-    const spans = [];
-    visit(tree, 'link', (node) => {
-        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;
-}