@glw907/cairn-cms 0.50.0 → 0.52.0

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

@@ -15,6 +15,10 @@ interface Props {
     /** 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;
 }
 /**
  * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable

package/dist/components/cairn-admin.css

@@ -1,5 +1,9 @@
 @font-face{font-family:'Figtree Variable';font-style:normal;font-display:swap;font-weight:300 900;src:url('./fonts/figtree.woff2') format('woff2')}
 @font-face{font-family:'Bricolage Grotesque Variable';font-style:normal;font-display:swap;font-weight:400 800;src:url('./fonts/bricolage-grotesque.woff2') format('woff2')}
+@font-face{font-family:'iA Writer Mono';font-style:normal;font-display:swap;font-weight:400;src:url('./fonts/ia-writer-mono-latin-400-normal.woff2') format('woff2')}
+@font-face{font-family:'iA Writer Mono';font-style:normal;font-display:swap;font-weight:700;src:url('./fonts/ia-writer-mono-latin-700-normal.woff2') format('woff2')}
+@font-face{font-family:'iA Writer Mono';font-style:italic;font-display:swap;font-weight:400;src:url('./fonts/ia-writer-mono-latin-400-italic.woff2') format('woff2')}
+@font-face{font-family:'iA Writer Mono';font-style:italic;font-display:swap;font-weight:700;src:url('./fonts/ia-writer-mono-latin-700-italic.woff2') format('woff2')}
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
@@ -176,6 +180,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;
   }
@@ -3282,6 +3294,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .breadcrumbs {
       max-width: 100%;
@@ -3400,15 +3416,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 +3510,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 +3930,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 +4052,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 +4356,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 +5025,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));
@@ -5405,6 +5440,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);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -5418,6 +5454,15 @@
   --color-secondary-content: oklch(98% .004 75);
   --color-accent: oklch(54% .16 300);
   --color-accent-content: oklch(98% .012 300);
+  --cairn-directive-ink-2: oklch(50% .16 300);
+  --cairn-directive-ink-3: oklch(48% .16 300);
+  --cairn-directive-rail-1: 72%;
+  --cairn-directive-rail-2: 82%;
+  --cairn-directive-rail-3: 92%;
+  --cairn-directive-rail-active: 100%;
+  --cairn-directive-ink-active: oklch(46% .16 300);
+  --cairn-code-chip: oklch(94.5% .008 75);
+  --cairn-focus-dim-ink: oklch(66% .01 75);
   --color-neutral: oklch(32% .012 75);
   --color-neutral-content: oklch(96% .004 75);
   --color-info: oklch(52% .12 240);
@@ -5446,6 +5491,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);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -5459,6 +5505,15 @@
   --color-secondary-content: oklch(20% .008 75);
   --color-accent: oklch(70% .14 300);
   --color-accent-content: oklch(20% .04 300);
+  --cairn-directive-ink-2: oklch(74% .14 300);
+  --cairn-directive-ink-3: oklch(78% .14 300);
+  --cairn-directive-rail-1: 62%;
+  --cairn-directive-rail-2: 74%;
+  --cairn-directive-rail-3: 86%;
+  --cairn-directive-rail-active: 100%;
+  --cairn-directive-ink-active: oklch(82% .14 300);
+  --cairn-code-chip: oklch(29.5% .012 75);
+  --cairn-focus-dim-ink: oklch(53% .01 75);
   --color-neutral: oklch(80% .01 75);
   --color-neutral-content: oklch(22% .008 75);
   --color-info: oklch(72% .12 240);
@@ -5487,6 +5542,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

@@ -1,9 +1,11 @@
 import { HighlightStyle } from '@codemirror/language';
 import { ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
+import { type FenceScan } from './markdown-directives.js';
 /** Markdown token colors over the admin theme variables. */
 export declare function cairnHighlightStyle(): HighlightStyle;
 /** Line and mark decorations flagging remark-directive machinery. */
 export declare function cairnDirectivePlugin(): ViewPlugin<{
     decorations: DecorationSet;
+    scan: FenceScan;
     update(update: ViewUpdate): void;
 }, undefined>;

package/dist/components/editor-highlight.js

@@ -5,39 +5,97 @@ 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 { caretContainerRange, directiveLineKind, fenceScan, fenceTokens, findInlineDirectives, } from './markdown-directives.js';
 /** Markdown token colors over the admin theme variables. */
 export function cairnHighlightStyle() {
+    // 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' },
     ]);
 }
 // 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) {
+// 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 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) {
+    const doc = view.state.doc;
+    const lines = [];
+    for (let n = 1; n <= doc.lines; n++)
+        lines.push(doc.line(n).text);
+    return lines;
+}
+function buildDirectiveDecorations(view, scan) {
+    const { depths } = scan;
     const builder = new RangeSetBuilder();
+    // 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);
-            if (kind === 'fence')
-                builder.add(line.from, line.from, fenceLine);
+            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]);
+                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 {
+            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 +109,18 @@ function buildDirectiveDecorations(view) {
 export function cairnDirectivePlugin() {
     return ViewPlugin.fromClass(class {
         decorations;
+        scan;
         constructor(view) {
-            this.decorations = buildDirectiveDecorations(view);
+            this.scan = fenceScan(docLines(view));
+            this.decorations = buildDirectiveDecorations(view, this.scan);
         }
         update(update) {
-            if (update.docChanged || update.viewportChanged)
-                this.decorations = buildDirectiveDecorations(update.view);
+            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 });
 }

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

@@ -0,0 +1,26 @@
+import { type Extension } from '@codemirror/state';
+/** An inclusive 0-based line range. */
+export interface LineRange {
+    fromLine: number;
+    toLine: number;
+}
+/**
+ * The contiguous non-blank block around the caret line, the unit focus mode keeps at full ink.
+ * On a blank line the caret stands alone; the walk clamps at the document edges, and an
+ * out-of-range caret clamps into the document first.
+ */
+export declare function paragraphRange(lines: string[], caretLine: number): LineRange;
+/**
+ * Focus mode: a line class (`cm-cairn-focus-dim`) on every line outside the caret's paragraph.
+ * The class only marks the lines; the dim ink itself lives in the editor theme so the per-theme
+ * `--cairn-focus-dim-ink` variable resolves it.
+ */
+export declare function focusMode(): Extension;
+/**
+ * Typewriter scroll: on every doc change, recenter the selection head vertically. An update
+ * listener may not dispatch while its update runs, so the recenter is queued as a microtask:
+ * it fires as soon as the update finishes, still ahead of the next paint, where an animation
+ * frame would trail the edit by a frame. The isConnected guard skips a view destroyed in the
+ * queue window.
+ */
+export declare function typewriterScroll(): Extension;

package/dist/components/editor-modes.js

@@ -0,0 +1,92 @@
+// The iA writing modes: focus mode dims every line outside the caret's paragraph, and typewriter
+// scroll holds the cursor line at vertical center while typing. Client-only, like editor-highlight:
+// MarkdownEditor reaches this module through a dynamic import, so the static @codemirror imports
+// here never enter a server bundle (guarded by the editor-boundary test).
+import { Decoration, EditorView, ViewPlugin, } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+const isBlank = (line) => !line || /^\s*$/.test(line);
+/**
+ * The contiguous non-blank block around the caret line, the unit focus mode keeps at full ink.
+ * On a blank line the caret stands alone; the walk clamps at the document edges, and an
+ * out-of-range caret clamps into the document first.
+ */
+export function paragraphRange(lines, caretLine) {
+    const last = Math.max(lines.length - 1, 0);
+    const caret = Math.min(Math.max(caretLine, 0), last);
+    if (isBlank(lines[caret]))
+        return { fromLine: caret, toLine: caret };
+    let fromLine = caret;
+    while (fromLine > 0 && !isBlank(lines[fromLine - 1]))
+        fromLine--;
+    let toLine = caret;
+    while (toLine < last && !isBlank(lines[toLine + 1]))
+        toLine++;
+    return { fromLine, toLine };
+}
+const dimLine = Decoration.line({ class: 'cm-cairn-focus-dim' });
+// The line cache mirrors editor-highlight's: one full-document read per doc change, so a caret
+// move or scroll rebuilds the viewport decorations from the cached array.
+function docLines(view) {
+    const doc = view.state.doc;
+    const lines = [];
+    for (let n = 1; n <= doc.lines; n++)
+        lines.push(doc.line(n).text);
+    return lines;
+}
+function buildFocusDecorations(view, lines) {
+    const builder = new RangeSetBuilder();
+    const caretLine = view.state.doc.lineAt(view.state.selection.main.head).number - 1;
+    const paragraph = paragraphRange(lines, caretLine);
+    for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to;) {
+            const line = view.state.doc.lineAt(pos);
+            const n = line.number - 1;
+            if (n < paragraph.fromLine || n > paragraph.toLine)
+                builder.add(line.from, line.from, dimLine);
+            pos = line.to + 1;
+        }
+    }
+    return builder.finish();
+}
+/**
+ * Focus mode: a line class (`cm-cairn-focus-dim`) on every line outside the caret's paragraph.
+ * The class only marks the lines; the dim ink itself lives in the editor theme so the per-theme
+ * `--cairn-focus-dim-ink` variable resolves it.
+ */
+export function focusMode() {
+    return ViewPlugin.fromClass(class {
+        decorations;
+        lines;
+        constructor(view) {
+            this.lines = docLines(view);
+            this.decorations = buildFocusDecorations(view, this.lines);
+        }
+        update(update) {
+            if (update.docChanged)
+                this.lines = docLines(update.view);
+            if (update.docChanged || update.viewportChanged || update.selectionSet)
+                this.decorations = buildFocusDecorations(update.view, this.lines);
+        }
+    }, { decorations: (v) => v.decorations });
+}
+/**
+ * Typewriter scroll: on every doc change, recenter the selection head vertically. An update
+ * listener may not dispatch while its update runs, so the recenter is queued as a microtask:
+ * it fires as soon as the update finishes, still ahead of the next paint, where an animation
+ * frame would trail the edit by a frame. The isConnected guard skips a view destroyed in the
+ * queue window.
+ */
+export function typewriterScroll() {
+    return EditorView.updateListener.of((update) => {
+        if (!update.docChanged)
+            return;
+        const view = update.view;
+        queueMicrotask(() => {
+            if (!view.dom.isConnected)
+                return;
+            view.dispatch({
+                effects: EditorView.scrollIntoView(view.state.selection.main.head, { y: 'center' }),
+            });
+        });
+    });
+}