@glw907/cairn-cms 0.51.0 → 0.52.1

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.52.1
+
+Two field reports from the first 0.52.0 session, both in-editor polish with no consumer action.
+In Write mode the editor card now hugs the manuscript (the column caps at 48rem and centers), so
+a wide window no longer frames empty space inside the card; Preview keeps the full column for
+its device widths. The directive rails take a 4px gap between nested bars (twice the bar
+weight, so two rails read as two lines), and directive text gains a matching step of gutter.
+
+## 0.52.0
+
+The editor became a quiet writing surface. The manuscript renders in self-hosted iA Writer Mono
+(SIL OFL) at a centered 70-character measure, heading sizes step by level, every syntax marker
+and URL recedes to the muted ink while the content keeps full strength, inline code sits on a
+soft chip, and quote text reads in full ink with only the `>` dimmed. The editor also parses
+GFM now, so the toolbar's strikethrough, tables, and task lists highlight as you type.
+
+Directive machinery trades its row bands for bracket rails: a container draws a depth-stepped
+rail from opener to closer, nested containers draw nested rails, the fence line's name and label
+keep the accent while the colons and braces fade, and the block holding your caret reads one
+step stronger. The treatment is AA-checked in both themes.
+
+Two writing modes join the toolbar's overflow menu, each persisted per browser: focus mode fades
+every paragraph but the caret's (a deliberate, documented sub-AA dim with chip backgrounds
+flattened), and typewriter scrolling holds the caret line at vertical center.
+
+Consumers may: pass the new optional `focusMode` and `typewriter` booleans when embedding
+`MarkdownEditor` directly; sites on the stock `EditPage` get the toggles and persistence for
+free. No action required; the release is additive.
+
 ## 0.51.0
 
 The `svelte` peer dependency floor rises from `^5.0.0` to `^5.56.3`, turning the 0.40.0 advisory

package/dist/components/EditPage.svelte

@@ -178,6 +178,25 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     device = id;
     localStorage.setItem(deviceStorageKey, id);
   }
+  // The writing modes (focus, typewriter), per-browser preferences on the device pick's pattern:
+  // off by default, read in an effect so SSR never touches localStorage, written by the
+  // toolbar's toggles. The effect tracks nothing reactive, so it runs once.
+  const focusStorageKey = 'cairn-editor-focus-mode';
+  const typewriterStorageKey = 'cairn-editor-typewriter';
+  let focusMode = $state(false);
+  let typewriter = $state(false);
+  $effect(() => {
+    focusMode = localStorage.getItem(focusStorageKey) === 'true';
+    typewriter = localStorage.getItem(typewriterStorageKey) === 'true';
+  });
+  function setFocusMode(on: boolean) {
+    focusMode = on;
+    localStorage.setItem(focusStorageKey, String(on));
+  }
+  function setTypewriter(on: boolean) {
+    typewriter = on;
+    localStorage.setItem(typewriterStorageKey, String(on));
+  }
   const activeDevice = $derived(previewDevice(device));
   // The iframe document around the rendered html: the site's stylesheets from the adapter's
   // preview knob, or a styleless document (behind the hint below) when the site sets none.
@@ -619,7 +638,12 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
-  <div class="lg:order-1">
+  <!-- In Write mode the card hugs the manuscript: the column caps near the 70ch measure and
+       centers, so the card frame never spans emptiness on a wide window. Preview keeps the full
+       column for its device frames. 48rem = the measure (70ch of the editor face at 1rem is
+       about 42rem) plus the surface padding and the card borders, with enough left over that
+       the toolbar keeps its single row. -->
+  <div class={mode === 'preview' ? 'lg:order-1' : 'lg:order-1 mx-auto w-full max-w-[48rem]'}>
     {#if titleField}
       <!-- The hoisted document title: large, borderless, in the display face, so the manuscript
            reads as the protagonist. It submits as name="title", the same field as before. The
@@ -641,7 +665,17 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       role="group"
       aria-label="Editor"
     >
-      <EditorToolbar {format} {mode} onMode={setMode} {device} onDevice={setDevice}>
+      <EditorToolbar
+        {format}
+        {mode}
+        onMode={setMode}
+        {device}
+        onDevice={setDevice}
+        {focusMode}
+        onFocusMode={setFocusMode}
+        {typewriter}
+        onTypewriter={setTypewriter}
+      >
         {#snippet insertControls()}
           <!-- Plain triggers only: the dialogs they open hold their own <form> elements, so the
                dialogs themselves mount outside the edit form at the bottom of this component. -->
@@ -704,6 +738,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           registerGetSelection={(fn) => (getSelection = fn)}
           registerFormat={(fn) => (format = fn)}
           {completionSources}
+          {focusMode}
+          {typewriter}
         />
       </div>
       {#if mode === 'preview'}

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

@@ -13,6 +13,14 @@ interface Props {
     /** 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;
 }
@@ -22,7 +30,8 @@ interface Props {
  * 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).
  */
 declare const EditorToolbar: import("svelte").Component<Props, {}, "">;

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,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/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)))) {
@@ -3290,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%;
@@ -4044,6 +4052,10 @@
     max-width: 30%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-\[48rem\] {
+    max-width: 48rem;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-full {
     max-width: 100%;
   }
@@ -5432,6 +5444,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;
@@ -5445,14 +5458,15 @@
   --color-secondary-content: oklch(98% .004 75);
   --color-accent: oklch(54% .16 300);
   --color-accent-content: oklch(98% .012 300);
-  --cairn-directive-band-1: 8%;
-  --cairn-directive-band-2: 14%;
-  --cairn-directive-band-3: 20%;
   --cairn-directive-ink-2: oklch(50% .16 300);
   --cairn-directive-ink-3: oklch(48% .16 300);
-  --cairn-directive-rail-1: 75%;
+  --cairn-directive-rail-1: 72%;
   --cairn-directive-rail-2: 82%;
-  --cairn-directive-rail-3: 90%;
+  --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);
@@ -5481,6 +5495,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;
@@ -5494,14 +5509,15 @@
   --color-secondary-content: oklch(20% .008 75);
   --color-accent: oklch(70% .14 300);
   --color-accent-content: oklch(20% .04 300);
-  --cairn-directive-band-1: 10%;
-  --cairn-directive-band-2: 16%;
-  --cairn-directive-band-3: 22%;
   --cairn-directive-ink-2: oklch(74% .14 300);
   --cairn-directive-ink-3: oklch(78% .14 300);
-  --cairn-directive-rail-1: 65%;
-  --cairn-directive-rail-2: 75%;
-  --cairn-directive-rail-3: 85%;
+  --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);

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

@@ -1,10 +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;
-    depths: (number | null)[];
+    scan: FenceScan;
     update(update: ViewUpdate): void;
 }, undefined>;