@glw907/cairn-cms 0.50.0 → 0.52.0

package/src/lib/components/EditorToolbar.svelte

@@ -3,12 +3,16 @@
 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 More menu also carries the host's persisted
+writing-mode toggles (focus mode, typewriter scrolling) as pressed-state buttons above the format picks. 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 +21,35 @@ 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;
+    /** Whether focus mode is on; the More menu's toggle reflects it. */
+    focusMode?: boolean;
+    /** Flip focus mode. When set, the toggle joins the More menu. */
+    onFocusMode?: (on: boolean) => void;
+    /** Whether typewriter scrolling is on; the More menu's toggle reflects it. */
+    typewriter?: boolean;
+    /** Flip typewriter scrolling. When set, the toggle joins the More menu. */
+    onTypewriter?: (on: boolean) => 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,
+    focusMode = false,
+    onFocusMode,
+    typewriter = false,
+    onTypewriter,
+    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.
@@ -68,6 +96,8 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   ];
 
   const ellipsisPaths = ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'];
+  // The check glyph marking an active pick, shared by the More menu's toggles and the device list.
+  const checkPaths = ['M20 6 9 17l-5-5'];
 
   const moreItems: { kind: FormatKind; label: string }[] = [
     { kind: 'strike', label: 'Strikethrough' },
@@ -83,10 +113,27 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   let moreMenu = $state<HTMLUListElement | null>(null);
   let moreOpen = $state(false);
 
+  // Picking dismisses the menu; hiding returns focus to the trigger, keeping the roving order.
+  function hideMenu(menu: HTMLUListElement | null) {
+    if (menu?.matches(':popover-open')) menu.hidePopover();
+  }
+
   function pickMore(kind: FormatKind) {
     format(kind);
-    // Picking dismisses the menu; hiding returns focus to the trigger, keeping the roving order.
-    if (moreMenu?.matches(':popover-open')) moreMenu.hidePopover();
+    hideMenu(moreMenu);
+  }
+
+  // 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);
+    hideMenu(deviceMenu);
   }
 
   let toolbarEl = $state<HTMLDivElement | null>(null);
@@ -156,13 +203,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}
@@ -211,6 +265,34 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     ontoggle={(e) => (moreOpen = e.newState === 'open')}
     class="dropdown menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
   >
+    <!-- The writing modes sit above the format items behind a hairline, persisted by the host.
+         The device list's idiom: plain buttons with aria-pressed carrying the on/off state (this
+         popover list is not an ARIA menu, so a menuitemcheckbox would sit in an invalid context);
+         the check glyph mirrors the state visually. A flip leaves the menu open so the new
+         pressed state is perceivable in place; only a format pick dismisses it. -->
+    {#if onFocusMode}
+      <li>
+        <button type="button" aria-pressed={focusMode} onclick={() => onFocusMode(!focusMode)}>
+          <span class="grow">Focus mode</span>
+          {#if focusMode}
+            {@render strokeIcon(checkPaths)}
+          {/if}
+        </button>
+      </li>
+    {/if}
+    {#if onTypewriter}
+      <li>
+        <button type="button" aria-pressed={typewriter} onclick={() => onTypewriter(!typewriter)}>
+          <span class="grow">Typewriter scrolling</span>
+          {#if typewriter}
+            {@render strokeIcon(checkPaths)}
+          {/if}
+        </button>
+      </li>
+    {/if}
+    {#if onFocusMode || onTypewriter}
+      <li class="my-1 border-t border-[var(--cairn-card-border)]" role="separator"></li>
+    {/if}
     {#each moreItems as item (item.kind)}
       <li><button type="button" onclick={() => pickMore(item.kind)}>{item.label}</button></li>
     {/each}
@@ -230,9 +312,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(checkPaths)}
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
 </div>

package/src/lib/components/MarkdownEditor.svelte

@@ -27,6 +27,10 @@ through the adapter's render. Swapping the editor stays a one-file change.
     /** Generic CodeMirror completion sources wired into the editor; the link autocomplete is one. The
      *  type is referenced inline so no static `@codemirror/*` import sits in this client-only file. */
     completionSources?: import('@codemirror/autocomplete').CompletionSource[];
+    /** Focus mode: dim every line outside the caret's paragraph. Off by default. */
+    focusMode?: boolean;
+    /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
+    typewriter?: boolean;
   }
 
   let {
@@ -37,6 +41,8 @@ through the adapter's render. Swapping the editor stays a one-file change.
     registerGetSelection,
     registerFormat,
     completionSources = [],
+    focusMode = false,
+    typewriter = false,
   }: Props = $props();
 
   let host = $state<HTMLDivElement | null>(null);
@@ -45,6 +51,12 @@ through the adapter's render. Swapping the editor stays a one-file change.
   // browser. The type-only `import(...)` annotation is erased; the value import is dynamic in onMount,
   // so the server bundle never pulls CodeMirror (guarded by the editor-boundary test).
   let view: import('@codemirror/view').EditorView | null = null;
+  // The writing-mode extensions live in their own compartments so the toolbar toggles swap them
+  // in and out of the mounted editor without rebuilding it. Assigned in onMount with the rest of
+  // the dynamic editor modules.
+  let modes: typeof import('./editor-modes.js') | null = null;
+  let focusCompartment: import('@codemirror/state').Compartment | null = null;
+  let typewriterCompartment: import('@codemirror/state').Compartment | null = null;
 
   onMount(async () => {
     const viewMod = await import('@codemirror/view');
@@ -54,6 +66,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const languageMod = await import('@codemirror/language');
     const autocompleteMod = await import('@codemirror/autocomplete');
     const highlightMod = await import('./editor-highlight.js');
+    const modesMod = await import('./editor-modes.js');
 
     if (!host) return;
 
@@ -61,22 +74,65 @@ 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: rails, not bands. A row at depth N draws every rail
+    // 1..N as literal nested brackets: 2px accent bars at x offsets 0-2, 4-6, and 8-10 with 2px
+    // of surface between them, stacked as inset box shadows (top layer first, so each bar sits
+    // over the spacer and deeper bar beneath it). The alphas step 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. On a fence line the colon runs, brackets, and {attrs}
+    // braces dim to the marker tone while the name and label keep a depth-stepped ink. Leaf and
+    // inline directives keep a fixed 8% accent chip; the accent ink holds AA on it (4.75:1
+    // light, 5.20:1 dark).
+    const railFallbacks = ['72%', '82%', '92%'];
+    const railColor = (step: number | 'active', fallback: string) =>
+      `color-mix(in oklab, var(--color-accent) var(--cairn-directive-rail-${step}, ${fallback}), transparent)`;
+    // With `active`, the row's own (deepest) bar takes the full-strength -active mix and widens
+    // 1px, so the caret's container reads at a glance; a bar-width change shifts no text.
+    const rails = (depth: number, active = false): string => {
+      const layers: string[] = [];
+      for (let d = 1; d <= depth; d++) {
+        const edge = 4 * d - 2;
+        if (d > 1) layers.push(`inset ${edge - 2}px 0 0 0 var(--color-base-100, oklch(99% 0.004 75))`);
+        const own = active && d === depth;
+        layers.push(
+          own
+            ? `inset ${edge + 1}px 0 0 0 ${railColor('active', '100%')}`
+            : `inset ${edge}px 0 0 0 ${railColor(d, railFallbacks[d - 1] ?? '92%')}`,
+        );
+      }
+      return layers.join(', ');
+    };
     const directiveInk = {
       backgroundColor: 'color-mix(in oklab, var(--color-accent) 8%, transparent)',
       color: 'var(--color-accent)',
     };
+    // The rail rules, one quiet and one caret-active pair per visual depth step (deeper nesting
+    // shares the third step). Fence and content rows at a depth share a rule, so a fence and its
+    // body rail identically. The caret-active selector adds the caret-block class, so it outranks
+    // its quiet twin on any contested row and the caret's container reads one step stronger.
+    const railRules: Record<string, { boxShadow: string }> = {};
+    for (const depth of [1, 2, 3]) {
+      const row = (prefix: string) =>
+        `${prefix}.cm-cairn-directive-fence.cm-cairn-depth-${depth}, ${prefix}.cm-cairn-directive-content.cm-cairn-depth-${depth}`;
+      railRules[row('')] = { boxShadow: rails(depth) };
+      railRules[row('.cm-cairn-caret-block')] = { boxShadow: rails(depth, true) };
+    }
     const theme = EditorView.theme(
       {
-        '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '0.9375rem' },
+        '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '1rem' },
         // The 50vh floor keeps a short entry reading as a writing surface, and because the
         // contenteditable content area carries the height, a click in the empty space below the
-        // text still lands in the editor and focuses it.
+        // text still lands in the editor and focuses it. The 70ch cap with auto margins holds
+        // the manuscript to a readable measure, centered in whatever width the card gives it.
         '.cm-content': {
-          fontFamily: 'ui-monospace, monospace',
+          // The theme roots set --font-editor to the self-hosted iA Writer Mono; the inline
+          // fallback keeps the surface monospace outside an admin theme wrapper.
+          fontFamily: "var(--font-editor, ui-monospace, monospace)",
           padding: '0.875rem 1.25rem',
           lineHeight: '1.8',
           minHeight: '50vh',
+          maxWidth: '70ch',
+          margin: '0 auto',
         },
         '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
         // A quiet always-on focus hairline. :focus-visible is no escape here: browsers treat a
@@ -89,21 +145,56 @@ through the adapter's render. Swapping the editor stays a one-file change.
           outlineOffset: '-1px',
         },
         '.cm-line': { padding: '0' },
-        '.cm-cairn-directive-fence': directiveInk,
+        // The gutter: directive rows pad left so the text clears the deepest rail stack. It is
+        // static structure (caret-independent), so caret movement shifts no layout.
+        '.cm-cairn-directive-fence, .cm-cairn-directive-content': { paddingLeft: '1.25rem' },
+        ...railRules,
+        '.cm-cairn-directive-mark': { color: 'var(--color-muted)' },
+        '.cm-cairn-directive-label': { color: 'var(--color-accent)' },
+        '.cm-cairn-directive-label.cm-cairn-depth-2': { color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))' },
+        '.cm-cairn-directive-label.cm-cairn-depth-3': { color: 'var(--cairn-directive-ink-3, oklch(48% 0.16 300))' },
+        // Cursor-aware emphasis for the label ink: the caret's container takes the strongest
+        // ink, through the -active variable in cairn-admin.css. This selector TIES the depth
+        // rules above at two classes, so its place after them breaks the tie in its favor.
+        '.cm-cairn-caret-block .cm-cairn-directive-label': {
+          color: 'var(--cairn-directive-ink-active, oklch(46% 0.16 300))',
+        },
         '.cm-cairn-directive-leaf': directiveInk,
         '.cm-cairn-directive-inline': directiveInk,
+        // Focus mode's dim ink, on the lines editor-modes marks outside the caret's paragraph.
+        // Last on purpose: a dimmed line's spans (markers, tokens, directive labels) all drop to
+        // the dim tone, and spec order breaks the specificity ties with the label rules above.
+        // The fallback is the light theme's value, like the rail fallbacks. Backgrounds flatten
+        // along with the ink: the dim tone on the code chip or an 8% accent chip measures under
+        // the design's 3:1 floor, so a dimmed line keeps no tinted chip behind its text. The
+        // span arm outranks the chip rules on specificity (the highlight style's generated
+        // class, the inline-directive mark); the line arm covers the leaf chip, where spec
+        // order breaks the tie.
+        '.cm-cairn-focus-dim, .cm-cairn-focus-dim span, .cm-cairn-focus-dim .cm-cairn-directive-label': {
+          color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
+          backgroundColor: 'transparent',
+        },
       },
       { dark: isDark },
     );
 
+    modes = modesMod;
+    focusCompartment = new stateMod.Compartment();
+    typewriterCompartment = new stateMod.Compartment();
+
     view = new EditorView({
       parent: host,
       state: stateMod.EditorState.create({
         doc: value,
         extensions: [
+          focusCompartment.of(focusMode ? modesMod.focusMode() : []),
+          typewriterCompartment.of(typewriter ? modesMod.typewriterScroll() : []),
           commandsMod.history(),
           keymap.of([...autocompleteMod.completionKeymap, ...commandsMod.defaultKeymap, ...commandsMod.historyKeymap]),
-          markdownMod.markdown(),
+          // The GFM base (strikethrough, tables, task lists, autolink) over the commonmark
+          // default. markdown() also wires markdownKeymap (Enter continues a list, Backspace
+          // removes an empty marker) at high precedence through its addKeymap default.
+          markdownMod.markdown({ base: markdownMod.markdownLanguage }),
           ...(completionSources.length
             ? // interactionDelay 0: the popup opens only on an explicit `[[` trigger, so the default
               // accidental-accept guard adds no value and would swallow an immediate Enter into a newline.
@@ -140,6 +231,21 @@ through the adapter's render. Swapping the editor stays a one-file change.
     view.dispatch({ changes: { from: 0, to: current.length, insert: incoming } });
   });
 
+  // Reconfigure the writing-mode compartments when their props change. Reading `mounted` re-runs
+  // the effect once the editor exists, so a preference arriving between render and mount still
+  // applies; the reconfigure is idempotent, so the extra pass after mount costs nothing.
+  $effect(() => {
+    const focus = focusMode;
+    const typing = typewriter;
+    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment) return;
+    view.dispatch({
+      effects: [
+        focusCompartment.reconfigure(focus ? modes.focusMode() : []),
+        typewriterCompartment.reconfigure(typing ? modes.typewriterScroll() : []),
+      ],
+    });
+  });
+
   function insertAtCursor(text: string) {
     if (!view) {
       value = value ? `${value}\n\n${text}` : text;

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

@@ -1,8 +1,10 @@
-/* Cairn's own typeface, self-hosted so the admin needs no external font request. Figtree carries the
-   body and UI (friendly, highly legible at small sizes); Bricolage Grotesque gives the brand and the
-   page headings a distinct voice. Both are variable (one file spans the weight range) and licensed
-   under the SIL Open Font License. The `@font-face` rules are added by scripts/build-admin-css.mjs
-   after compile (so the woff2 url stays relative to the shipped sheet, not the source tree). */
+/* Cairn's own typefaces, self-hosted so the admin needs no external font request. Figtree carries
+   the body and UI (friendly, highly legible at small sizes); Bricolage Grotesque gives the brand and
+   the page headings a distinct voice; iA Writer Mono is the editor writing surface. The first two are
+   variable (one file spans the weight range), the editor face ships four static files, and all three
+   are licensed under the SIL Open Font License. The `@font-face` rules are added by
+   scripts/build-admin-css.mjs after compile (so the woff2 url stays relative to the shipped sheet,
+   not the source tree). */
 
 /* Warm Stone: the cairn admin theme. Self-contained, since DaisyUI v5 reads these vars at point
    of use, so this fully overrides the host's theme with no @plugin and no host build step. */
@@ -10,6 +12,7 @@
   color-scheme: light;
   --font-body: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --font-display: 'Bricolage Grotesque Variable', var(--font-body);
+  --font-editor: 'iA Writer Mono', ui-monospace, monospace;
   font-family: var(--font-body);
   /* Crisper, lighter glyph rendering for the variable fonts. */
   -webkit-font-smoothing: antialiased;
@@ -28,6 +31,38 @@
      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: fence and content rows share a 2px inset accent
+     rail stepped by nesting depth, and a fence line's name and label take a depth-stepped ink
+     on plain base-100 (the tinted bands are gone). Locked pairs (label ink on base-100):
+     depth 1 = accent 54% (5.28:1), depth 2 = 50% (6.28:1), depth 3 = 48% (6.85:1). Do not
+     lighten an ink without re-checking. */
+  --cairn-directive-ink-2: oklch(50% 0.16 300);
+  --cairn-directive-ink-3: oklch(48% 0.16 300);
+  /* Each rail bar is a 2px non-text cue, so its composited color must clear the 3:1 floor
+     against base-100 (WCAG 1.4.11); 71% is the measured floor, which caps how far the ramp can
+     spread below the active 100%. Locked margins (rail vs base-100): depth 1 = 72% (3.08:1),
+     depth 2 = 82% (3.71:1), depth 3 = 92% (4.51:1). Do not lower an alpha without re-checking. */
+  --cairn-directive-rail-1: 72%;
+  --cairn-directive-rail-2: 82%;
+  --cairn-directive-rail-3: 92%;
+  /* Cursor-aware emphasis: the caret container's own bar steps to a full-strength accent rail
+     (also 1px wider) and an ink one notch past depth 3. Locked pairs on base-100: rail = solid
+     accent (5.28:1, non-text floor 3:1), ink 46% (7.47:1). Do not lighten without re-checking. */
+  --cairn-directive-rail-active: 100%;
+  --cairn-directive-ink-active: oklch(46% 0.16 300);
+  /* The editor's inline-code chip, a quiet tint beside base-200. Locked pair: base-content ink
+     on the chip measures 13.2:1 (AA). Do not darken the chip without re-checking. */
+  --cairn-code-chip: oklch(94.5% 0.008 75);
+  /* Focus mode's dim ink for the lines outside the caret's paragraph. A color, not opacity, so
+     the contrast is checkable. Deliberately sub-AA: the dim is a transient writing state the
+     editor opts into, and an AA-grade dim (the old 54%, 4.92:1) sat so close to muted that the
+     mode read as nothing. Locked pair on base-100: 3.03:1, the transient-state floor. The
+     editor's dim rule also flattens chip backgrounds (the code chip and the 8% accent
+     directive chips) to transparent on dimmed lines, so base-100 is the only surface this ink
+     ever sits on; on the chips it measured as low as 2.63:1. Do not lighten without
+     re-checking. */
+  --cairn-focus-dim-ink: oklch(66% 0.01 75);
   --color-neutral: oklch(32% 0.012 75);
   --color-neutral-content: oklch(96% 0.004 75);
 
@@ -70,6 +105,7 @@
   color-scheme: dark;
   --font-body: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --font-display: 'Bricolage Grotesque Variable', var(--font-body);
+  --font-editor: 'iA Writer Mono', ui-monospace, monospace;
   font-family: var(--font-body);
   /* Crisper, lighter glyph rendering for the variable fonts. */
   -webkit-font-smoothing: antialiased;
@@ -89,6 +125,34 @@
   --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 label inks on dark lighten with depth so a deeper fence's name reads
+     stronger on base-100 (the tinted bands are gone). Locked pairs (label ink on base-100):
+     depth 1 = accent 70% (5.86:1), depth 2 = 74% (6.81:1), depth 3 = 78% (7.82:1). Do not
+     darken an ink without re-checking. */
+  --cairn-directive-ink-2: oklch(74% 0.14 300);
+  --cairn-directive-ink-3: oklch(78% 0.14 300);
+  /* The rail bars hold the same 3:1 non-text floor on dark; 61% is the measured floor, which
+     caps the ramp's spread. Locked margins (rail vs base-100): depth 1 = 62% (3.09:1),
+     depth 2 = 74% (3.83:1), depth 3 = 86% (4.69:1). */
+  --cairn-directive-rail-1: 62%;
+  --cairn-directive-rail-2: 74%;
+  --cairn-directive-rail-3: 86%;
+  /* Cursor-aware emphasis on dark: the caret container's own bar steps to a solid accent rail
+     (also 1px wider) and an ink one notch past depth 3. Locked pairs on base-100: rail = solid
+     accent (5.86:1, non-text floor 3:1), ink 82% (8.84:1, priced on the gamut-clipped sRGB
+     render; the 0.14 chroma sits outside sRGB at this lightness). Do not darken without
+     re-checking. */
+  --cairn-directive-rail-active: 100%;
+  --cairn-directive-ink-active: oklch(82% 0.14 300);
+  /* The inline-code chip on dark sits one step above base-100 so it reads raised. Locked pair:
+     base-content ink on the chip measures 11.3:1 (AA). Do not lighten the chip without
+     re-checking. */
+  --cairn-code-chip: oklch(29.5% 0.012 75);
+  /* Focus mode's dim ink on dark, the same deliberate sub-AA transient-state call as light;
+     the proposed 50% measured 2.74:1, under the 3:1 floor, so it sits at 53%. Locked pair on
+     base-100: 3.12:1. Do not darken without re-checking. */
+  --cairn-focus-dim-ink: oklch(53% 0.01 75);
   --color-neutral: oklch(80% 0.01 75);
   --color-neutral-content: oklch(22% 0.008 75);
 
@@ -196,6 +260,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 +283,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. */