@glw907/cairn-cms 0.51.0 → 0.52.1

package/src/lib/components/EditorToolbar.svelte

@@ -5,7 +5,8 @@ More overflow menu, then the host's Insert controls) and the Write/Preview segme
 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. 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
+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">
@@ -25,11 +26,30 @@ house style (24x24 viewBox, `currentColor`, round caps).
     /** 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, device = 'desktop', onDevice, 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.
@@ -76,6 +96,8 @@ house style (24x24 viewBox, `currentColor`, round caps).
   ];
 
   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' },
@@ -91,10 +113,14 @@ house style (24x24 viewBox, `currentColor`, round caps).
   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
@@ -107,7 +133,7 @@ house style (24x24 viewBox, `currentColor`, round caps).
 
   function pickDevice(id: PreviewDeviceId) {
     onDevice?.(id);
-    if (deviceMenu?.matches(':popover-open')) deviceMenu.hidePopover();
+    hideMenu(deviceMenu);
   }
 
   let toolbarEl = $state<HTMLDivElement | null>(null);
@@ -239,6 +265,34 @@ house style (24x24 viewBox, `currentColor`, round caps).
     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}
@@ -299,7 +353,7 @@ house style (24x24 viewBox, `currentColor`, round caps).
           <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'])}
+              {@render strokeIcon(checkPaths)}
             {/if}
           </button>
         </li>

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,29 +74,66 @@ 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 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)`;
+    // 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, 6-8, and 12-14 with 4px
+    // of surface between them (a gap of twice the bar weight, the floor for two parallel rules
+    // to read as separate lines rather than one thick one), 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 = 6 * d - 4;
+        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: band(1, '8%'),
+      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
@@ -96,32 +146,57 @@ through the adapter's render. Swapping the editor stays a one-file change.
           outlineOffset: '-1px',
         },
         '.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))',
+        // The gutter: directive rows pad left so the text clears the deepest rail stack (the
+        // depth-3 bar ends at 14px, the active one at 15px; 1.5rem keeps ~10px of air beyond
+        // it). Static structure (caret-independent), so caret movement shifts no layout.
+        '.cm-cairn-directive-fence, .cm-cairn-directive-content': { paddingLeft: '1.5rem' },
+        ...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-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,
+        // 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.
@@ -158,6 +233,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;
@@ -29,22 +32,37 @@
   --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%;
+  /* 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);
-  /* 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%;
+  /* 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: 90%;
+  --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);
 
@@ -87,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;
@@ -107,21 +126,33 @@
   --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%;
+  /* 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 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%;
+  /* 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);
 

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

@@ -5,21 +5,45 @@ 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, fenceDepths, findInlineDirectives } from './markdown-directives.js';
+import {
+  caretContainerRange,
+  directiveLineKind,
+  fenceScan,
+  fenceTokens,
+  findInlineDirectives,
+  type FenceScan,
+} from './markdown-directives.js';
 
 /** Markdown token colors over the admin theme variables. */
 export function cairnHighlightStyle(): HighlightStyle {
+  // Rule order is load-bearing. HighlightStyle emits its CSS in spec order, so on a span that
+  // carries several classes (a marker inherits its heading's or link's class on top of its own
+  // processingInstruction one) the later rule wins the tie. The url and processingInstruction
+  // rules sit last so the URL part of a link and every syntax marker stay muted under the
+  // heading, emphasis, and link inks.
   return HighlightStyle.define([
-    { tag: tags.heading, color: 'var(--color-primary)', fontWeight: '700' },
+    { tag: tags.heading1, fontSize: '1.5em', fontWeight: '700', color: 'var(--color-base-content)' },
+    { tag: tags.heading2, fontSize: '1.3em', fontWeight: '700', color: 'var(--color-base-content)' },
+    { tag: tags.heading3, fontSize: '1.17em', fontWeight: '700', color: 'var(--color-base-content)' },
+    // h4 and deeper share the weight only; body size keeps the low levels from outranking h3.
+    { tag: tags.heading, fontWeight: '700', color: 'var(--color-base-content)' },
     { tag: tags.strong, fontWeight: '700' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.strikethrough, textDecoration: 'line-through' },
-    { tag: tags.link, color: 'var(--color-info)' },
-    { tag: tags.url, color: 'var(--color-info)' },
-    { tag: tags.quote, color: 'var(--color-muted)', fontStyle: 'italic' },
-    { tag: tags.monospace, color: 'var(--color-accent)' },
-    { tag: tags.processingInstruction, color: 'var(--color-muted)' },
+    // Quote TEXT is content, so it keeps the full ink; muted means machinery, and only the >
+    // marker (QuoteMark, under processingInstruction below) recedes to it.
+    { tag: tags.quote, color: 'var(--color-base-content)', fontStyle: 'italic' },
     { tag: tags.list, color: 'var(--color-muted)' },
+    { tag: tags.link, color: 'var(--color-accent)' },
+    { tag: tags.url, color: 'var(--color-muted)' },
+    {
+      tag: tags.monospace,
+      color: 'var(--color-base-content)',
+      backgroundColor: 'var(--cairn-code-chip)',
+      borderRadius: '0.25rem',
+      padding: '0.05em 0.3em',
+    },
+    { tag: tags.processingInstruction, color: 'var(--color-muted)', fontWeight: '400' },
   ]);
 }
 
@@ -36,29 +60,55 @@ const fenceLines = DEPTH_STEPS.map((d) =>
 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' });
+// Within a fence line, machinery (colons, brackets, braces) dims to the marker tone while the
+// directive name and label keep a depth-stepped ink: meaning over machinery.
+const fenceMark = Decoration.mark({ class: 'cm-cairn-directive-mark' });
+const fenceLabels = DEPTH_STEPS.map((d) => Decoration.mark({ class: `cm-cairn-directive-label cm-cairn-depth-${d}` }));
+// Cursor-aware emphasis: every row of the container the caret sits inside, fence and content
+// alike, carries this class on top of its depth classes; the theme steps that block's rail and
+// label ink up one notch while the other containers sit quieter.
+const caretBlockLine = Decoration.line({ class: 'cm-cairn-caret-block' });
 
 // 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)[] {
+// is well under a millisecond. The plugin caches the fence scan, so it reruns only when the
+// document changes; a scroll or a caret move rebuilds the viewport decorations from the cached
+// scan.
+function docLines(view: EditorView): string[] {
   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);
+  return lines;
 }
 
-function buildDirectiveDecorations(view: EditorView, depths: (number | null)[]): DecorationSet {
+function buildDirectiveDecorations(view: EditorView, scan: FenceScan): DecorationSet {
+  const { depths } = scan;
   const builder = new RangeSetBuilder<Decoration>();
+  // The caret's container, one helper call over the cached scan per rebuild. Line decorations
+  // at the same position must enter the builder in add order, so the caret-block class goes in
+  // as its own line decoration just ahead of the row's depth decoration.
+  const caretLine = view.state.doc.lineAt(view.state.selection.main.head).number - 1;
+  const caret = caretContainerRange(scan, caretLine);
   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);
       const depth = Math.min(depths[line.number - 1] ?? 0, DEPTH_STEPS.length);
+      if (caret && line.number - 1 >= caret.fromLine && line.number - 1 <= caret.toLine) {
+        builder.add(line.from, line.from, caretBlockLine);
+      }
       // 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);
+      if (kind === 'fence' && depth > 0) {
+        builder.add(line.from, line.from, fenceLines[depth - 1]);
+        for (const token of fenceTokens(line.text)) {
+          builder.add(
+            line.from + token.from,
+            line.from + token.to,
+            token.kind === 'mark' ? fenceMark : fenceLabels[depth - 1],
+          );
+        }
+      } else if (kind === 'leaf') builder.add(line.from, line.from, leafLine);
       else if (kind === null) {
         if (depth > 0) builder.add(line.from, line.from, contentLines[depth - 1]);
         for (const r of findInlineDirectives(line.text)) {
@@ -76,15 +126,17 @@ export function cairnDirectivePlugin() {
   return ViewPlugin.fromClass(
     class {
       decorations: DecorationSet;
-      depths: (number | null)[];
+      scan: FenceScan;
       constructor(view: EditorView) {
-        this.depths = docDepths(view);
-        this.decorations = buildDirectiveDecorations(view, this.depths);
+        this.scan = fenceScan(docLines(view));
+        this.decorations = buildDirectiveDecorations(view, this.scan);
       }
       update(update: ViewUpdate) {
-        if (update.docChanged) this.depths = docDepths(update.view);
-        if (update.docChanged || update.viewportChanged)
-          this.decorations = buildDirectiveDecorations(update.view, this.depths);
+        if (update.docChanged) this.scan = fenceScan(docLines(update.view));
+        // A selection change rebuilds too, so the caret-block emphasis follows the cursor; the
+        // fence scan stays cached, keeping a caret move at viewport cost.
+        if (update.docChanged || update.viewportChanged || update.selectionSet)
+          this.decorations = buildDirectiveDecorations(update.view, this.scan);
       }
     },
     { decorations: (v) => v.decorations },