@glw907/cairn-cms 0.52.0 → 0.53.0

package/src/lib/components/EditPage.svelte

@@ -12,12 +12,16 @@ sizes to a persisted device width picked from the toolbar's capsule. A sticky gl
 carries the breadcrumb, the status badges, the save-state indicator,
 and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
 pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
-transient flashes, and the editor card's footer holds the word count and the Markdown help.
+transient flashes, and the editor card's footer is the writing-environment strip: the word
+count, the Prose/Markup posture pair, the focus and typewriter toggles, and the Markdown help.
 -->
 <script lang="ts">
   import { flushSync, untrack } from 'svelte';
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
+  import BlocksIcon from '@lucide/svelte/icons/blocks';
+  import LinkIcon from '@lucide/svelte/icons/link';
+  import FileSymlinkIcon from '@lucide/svelte/icons/file-symlink';
   import CsrfField from './CsrfField.svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
   import EditorToolbar from './EditorToolbar.svelte';
@@ -178,16 +182,21 @@ 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.
+  // The writing modes (focus, typewriter) and the surface posture, per-browser preferences on
+  // the device pick's pattern: read in an effect so SSR never touches localStorage, written by
+  // the card footer's toggles. The effect tracks nothing reactive, so it runs once.
   const focusStorageKey = 'cairn-editor-focus-mode';
   const typewriterStorageKey = 'cairn-editor-typewriter';
+  const surfaceStorageKey = 'cairn-editor-surface';
   let focusMode = $state(false);
   let typewriter = $state(false);
+  // The surface posture: prose (the writing instrument) by default; markup is the dense
+  // working surface.
+  let surface = $state<'prose' | 'markup'>('prose');
   $effect(() => {
     focusMode = localStorage.getItem(focusStorageKey) === 'true';
     typewriter = localStorage.getItem(typewriterStorageKey) === 'true';
+    if (localStorage.getItem(surfaceStorageKey) === 'markup') surface = 'markup';
   });
   function setFocusMode(on: boolean) {
     focusMode = on;
@@ -197,6 +206,15 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     typewriter = on;
     localStorage.setItem(typewriterStorageKey, String(on));
   }
+  function setSurface(posture: 'prose' | 'markup') {
+    surface = posture;
+    localStorage.setItem(surfaceStorageKey, posture);
+  }
+  // One source for the footer toggles' pressed/idle styling. The class names must stay verbatim
+  // string literals: the admin CSS build's @source scan reads this file as raw text.
+  function footerToggleClass(pressed: boolean): string {
+    return `btn btn-ghost btn-xs font-normal ${pressed ? 'bg-primary/10 text-primary' : 'text-[var(--color-muted)]'}`;
+  }
   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.
@@ -633,24 +651,37 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   onsubmit={onEditSubmit}
   oninput={onFormInput}
   oninvalidcapture={onFormInvalid}
-  class={mode === 'preview' ? '' : 'lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6'}
+  class={mode === 'preview' ? '' : 'lg:grid lg:grid-cols-[1fr_17rem] lg:gap-10'}
 >
   <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. The cap follows the surface posture: prose hugs its 72ch
+       measure (49rem covers it at the prose type step), markup puts the ceiling near 89ch of
+       the base face for tables, attributed directives, and long URLs. The toggle lives in the
+       card footer with the other writing preferences. -->
+  <div class={mode === 'preview' ? 'lg:order-1' : `lg:order-1 mx-auto w-full ${surface === 'prose' ? 'max-w-[49rem]' : 'max-w-[56rem]'}`}>
     {#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
-           admin sheet gives it the editor's quiet focus hairline (see .cairn-doc-title there). -->
-      <input
-        class="cairn-doc-title mb-4 w-full border-0 bg-transparent text-3xl font-bold tracking-tight font-[family-name:var(--font-display)] placeholder:text-[var(--color-muted)]"
-        name="title"
-        value={str(data.frontmatter.title)}
-        placeholder={titleField.label}
-        aria-label={titleField.label}
-        required={titleField.required}
-      />
+           admin sheet gives it the editor's quiet focus hairline (see .cairn-doc-title there).
+           In markup posture the surface fills the card, so shared inline padding is the whole
+           alignment; in prose posture the manuscript centers on its measure, so the wrapper
+           mirrors that geometry (the editor face at the prose size, the measure, auto margins).
+           Under focus mode the title eases back with the rest of the context unless it holds
+           focus itself. -->
+      <div class={surface === 'prose' ? 'mb-4 mx-auto w-full max-w-[72ch] px-5 text-[1.0625rem] font-[family-name:var(--font-editor,ui-monospace,monospace)]' : 'mb-4 w-full px-5'}>
+        <input
+          class="cairn-doc-title w-full border-0 bg-transparent text-3xl font-bold tracking-tight font-[family-name:var(--font-display)] placeholder:text-[var(--color-muted)] {focusMode ? 'cairn-doc-title-dim' : ''}"
+          name="title"
+          value={str(data.frontmatter.title)}
+          placeholder={titleField.label}
+          aria-label={titleField.label}
+          required={titleField.required}
+        />
+      </div>
     {/if}
     <!-- The editor card: the toolbar strip and the editing surface share one frame, so the editor
          reads as a single object. The card carries the formatting shortcuts for everything in it. -->
@@ -660,52 +691,46 @@ 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}
-        {focusMode}
-        onFocusMode={setFocusMode}
-        {typewriter}
-        onTypewriter={setTypewriter}
-      >
+      <EditorToolbar {format} {mode} onMode={setMode} {device} onDevice={setDevice}>
         {#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. -->
+               dialogs themselves mount outside the edit form at the bottom of this component.
+               Icon buttons like the format strip beside them: the labels live in aria-label and
+               the title tooltip, so the Insert group reads as part of one instrument strip. -->
           {#if hasComponents}
             <button
               type="button"
-              class="btn btn-sm btn-ghost"
+              class="btn btn-sm btn-ghost btn-square"
               aria-haspopup="dialog"
               aria-label="Insert block"
+              title="Insert block"
               disabled={insertDisabled}
               onclick={() => insertDialog?.open()}
             >
-              Insert block
+              <BlocksIcon class="h-4 w-4" aria-hidden="true" />
             </button>
           {/if}
           <button
             type="button"
-            class="btn btn-sm btn-ghost"
+            class="btn btn-sm btn-ghost btn-square"
             aria-haspopup="dialog"
             aria-label="Web link (Ctrl+K)"
             title="Web link (Ctrl+K)"
             disabled={insertDisabled}
             onclick={() => webLinkDialog?.open()}
           >
-            Web link
+            <LinkIcon class="h-4 w-4" aria-hidden="true" />
           </button>
           <button
             type="button"
-            class="btn btn-sm btn-ghost"
+            class="btn btn-sm btn-ghost btn-square"
             aria-haspopup="dialog"
             aria-label="Link to page"
+            title="Link to page"
             disabled={insertDisabled}
             onclick={() => linkPicker?.open()}
           >
-            Link to page
+            <FileSymlinkIcon class="h-4 w-4" aria-hidden="true" />
           </button>
           <button
             type="button"
@@ -728,6 +753,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         <MarkdownEditor
           bind:value={body}
           name="body"
+          {surface}
           registerInsert={(fn) => (insert = fn)}
           registerInsertLink={(fn) => (insertLink = fn)}
           registerGetSelection={(fn) => (getSelection = fn)}
@@ -788,17 +814,64 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         </div>
       {/if}
       <!-- The card footer, part of the same instrument frame. It stays up in Preview too, so the
-           frame never jumps between tabs and the count keeps reading while proofing. -->
+           frame never jumps between tabs and the count keeps reading while proofing. The strip
+           carries the writing environment (the count, the persisted writing modes, help) while
+           the top toolbar acts on the text; the toggles live here visible rather than buried in
+           an overflow menu. -->
       <div class="flex items-center justify-between border-t border-[var(--cairn-card-border)] px-3 py-1 text-xs text-[var(--color-muted)]">
         <span>{wordLabel}</span>
-        <button
-          type="button"
-          class="btn btn-ghost btn-xs font-normal text-[var(--color-muted)]"
-          aria-haspopup="dialog"
-          onclick={() => helpDialog?.open()}
-        >
-          Markdown help
-        </button>
+        <div class="flex items-center gap-1">
+          <!-- The pressed check is the non-color state cue (WCAG 1.4.1): pressed and idle
+               toggles share weight and size, so hue alone must not carry the state. -->
+          <div role="group" aria-label="Editing surface" class="flex items-center gap-1">
+            <button
+              type="button"
+              class={footerToggleClass(surface === 'prose')}
+              aria-pressed={surface === 'prose'}
+              onclick={() => setSurface('prose')}
+            >
+              {#if surface === 'prose'}<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{/if}
+              Prose
+            </button>
+            <button
+              type="button"
+              class={footerToggleClass(surface === 'markup')}
+              aria-pressed={surface === 'markup'}
+              onclick={() => setSurface('markup')}
+            >
+              {#if surface === 'markup'}<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{/if}
+              Markup
+            </button>
+          </div>
+          <div class="mx-1 h-4 w-px bg-[var(--cairn-card-border)]" aria-hidden="true"></div>
+          <button
+            type="button"
+            class={footerToggleClass(focusMode)}
+            aria-pressed={focusMode}
+            onclick={() => setFocusMode(!focusMode)}
+          >
+            {#if focusMode}<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{/if}
+            Focus mode
+          </button>
+          <button
+            type="button"
+            class={footerToggleClass(typewriter)}
+            aria-pressed={typewriter}
+            onclick={() => setTypewriter(!typewriter)}
+          >
+            {#if typewriter}<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{/if}
+            Typewriter
+          </button>
+          <div class="mx-1 h-4 w-px bg-[var(--cairn-card-border)]" aria-hidden="true"></div>
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs font-normal text-[var(--color-muted)]"
+            aria-haspopup="dialog"
+            onclick={() => helpDialog?.open()}
+          >
+            Markdown help
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -808,7 +881,9 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   <aside class="lg:order-2 mt-4 lg:mt-0" class:hidden={mode === 'preview'}>
     <!-- One sidebar card, three labeled groups. Each group is its own fieldset so its eyebrow is
          a real legend that screen readers announce with the fields it holds. -->
-    <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-5 p-4 shadow-[var(--cairn-shadow)]">
+    <!-- Quieter than the editor card on purpose (hairline, no shadow): the editor is the one
+         floating object on the page, and the details read as margin furniture beside it. -->
+    <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-6 p-4">
       {#if detailFields.length}
       <fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
       <legend class={eyebrowClass}>Details</legend>
@@ -817,12 +892,12 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           {@const f = field as TextareaField}
           <label class="flex flex-col gap-1">
             <span class="text-sm font-medium">{f.label}</span>
-            <textarea class="textarea" name={f.name} aria-label={f.label} rows={f.rows ?? 3}>{str(data.frontmatter[f.name])}</textarea>
+            <textarea class="textarea textarea-sm" name={f.name} aria-label={f.label} rows={f.rows ?? 3}>{str(data.frontmatter[f.name])}</textarea>
           </label>
         {:else if field.type === 'date'}
           <label class="flex flex-col gap-1">
             <span class="text-sm font-medium">{field.label}</span>
-            <input class="input" type="date" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} />
+            <input class="input input-sm" type="date" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} />
           </label>
         {:else if field.type === 'boolean'}
           <label class="label cursor-pointer justify-start gap-2">
@@ -855,7 +930,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           <label class="flex flex-col gap-1">
             <span class="text-sm font-medium">{f.label}</span>
             <input
-              class="input"
+              class="input input-sm"
               name={f.name}
               aria-label={f.label}
               placeholder={f.placeholder}
@@ -865,7 +940,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         {:else}
           <label class="flex flex-col gap-1">
             <span class="text-sm font-medium">{field.label}</span>
-            <input class="input" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} required={field.required} />
+            <input class="input input-sm" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} required={field.required} />
           </label>
         {/if}
       {/each}

package/src/lib/components/EditorToolbar.svelte

@@ -5,9 +5,9 @@ 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 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).
+widths, reported to the host through `onDevice`. The writing-mode toggles live in the host's card
+footer (the bottom strip carries the writing environment; this strip acts on the text). The glyphs
+are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
@@ -26,14 +26,6 @@ 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;
   }
@@ -44,10 +36,6 @@ house style (24x24 viewBox, `currentColor`, round caps).
     onMode,
     device = 'desktop',
     onDevice,
-    focusMode = false,
-    onFocusMode,
-    typewriter = false,
-    onTypewriter,
     insertControls,
   }: Props = $props();
 
@@ -265,34 +253,6 @@ 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}

package/src/lib/components/MarkdownEditor.svelte

@@ -31,6 +31,9 @@ through the adapter's render. Swapping the editor stays a one-file change.
     focusMode?: boolean;
     /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
     typewriter?: boolean;
+    /** The surface posture. Prose is the writing instrument (72ch measure, larger type, looser
+     *  leading); markup is the working surface (fills the card, denser). Prose by default. */
+    surface?: 'prose' | 'markup';
   }
 
   let {
@@ -43,6 +46,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     completionSources = [],
     focusMode = false,
     typewriter = false,
+    surface = 'prose',
   }: Props = $props();
 
   let host = $state<HTMLDivElement | null>(null);
@@ -57,6 +61,12 @@ through the adapter's render. Swapping the editor stays a one-file change.
   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;
+  let surfaceCompartment: import('@codemirror/state').Compartment | null = null;
+  // The posture themes, swapped through the surface compartment. Each owns its type step and
+  // leading (the base theme deliberately sets neither on the content node, so the postures never
+  // contest it on adoption order). Built in onMount beside the base theme.
+  let proseTheme: import('@codemirror/state').Extension | null = null;
+  let markupTheme: import('@codemirror/state').Extension | null = null;
 
   onMount(async () => {
     const viewMod = await import('@codemirror/view');
@@ -75,9 +85,10 @@ through the adapter's render. Swapping the editor stays a one-file change.
     // 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: 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
+    // 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
@@ -91,7 +102,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const rails = (depth: number, active = false): string => {
       const layers: string[] = [];
       for (let d = 1; d <= depth; d++) {
-        const edge = 4 * d - 2;
+        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(
@@ -120,19 +131,23 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const theme = EditorView.theme(
       {
         '&': { 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. The 70ch cap with auto margins holds
-        // the manuscript to a readable measure, centered in whatever width the card gives it.
+        // The 60vh floor keeps the surface reading as the page's center stage even when the
+        // entry is short, 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.
+        // No inner measure cap: the surface fills the card the way a code editor fills its
+        // pane, and the card's own width (the host caps it near 89ch of this face) is the one
+        // constraint. The surface carries tables, attributed directives, and long URLs, so the
+        // ceiling leans toward the code-editor end of the ergonomic band rather than the
+        // long-form ideal; paragraphs wrap comfortably below it.
         '.cm-content': {
           // 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',
+          // Vertical padding holds at least one line-height of the body (1.8 x 1rem), with a
+          // touch more below than above (the optical center sits high); the sides then read as
+          // gutters rather than letterboxing.
+          padding: '2rem 1.25rem 2.5rem',
+          minHeight: '60vh',
         },
         '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
         // A quiet always-on focus hairline. :focus-visible is no escape here: browsers treat a
@@ -145,9 +160,10 @@ through the adapter's render. Swapping the editor stays a one-file change.
           outlineOffset: '-1px',
         },
         '.cm-line': { padding: '0' },
-        // 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' },
+        // 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)' },
@@ -174,13 +190,41 @@ through the adapter's render. Swapping the editor stays a one-file change.
           color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
           backgroundColor: 'transparent',
         },
+        // The rails dim with their text: the rail color-mix reads --cairn-directive-rail-N per
+        // element, so overriding the percentages on dimmed lines re-resolves every bar in place.
+        // Without this the directive block keeps full-strength bars and becomes the one
+        // chromatic object in the dimmed field. The active step needs the override too: focus
+        // mode's lit unit is the caret PARAGRAPH while the caret-block class spans the whole
+        // container, so a container holding a blank line has dimmed rows that still carry the
+        // active rail.
+        '.cm-cairn-focus-dim': {
+          '--cairn-directive-rail-1': 'var(--cairn-focus-dim-rail-1, 24%)',
+          '--cairn-directive-rail-2': 'var(--cairn-focus-dim-rail-2, 28%)',
+          '--cairn-directive-rail-3': 'var(--cairn-focus-dim-rail-3, 32%)',
+          '--cairn-directive-rail-active': 'var(--cairn-focus-dim-rail-active, 36%)',
+        },
+      },
+      { dark: isDark },
+    );
+
+    // The prose posture: the writing instrument. A 72ch measure centered in the card, one type
+    // step up, looser leading. Markup posture (the base theme) keeps the dense fill for tables,
+    // directives, and long URLs. Placed after the base theme in the extension list, so its keys
+    // win the spec-order ties.
+    proseTheme = EditorView.theme(
+      {
+        // Scoped to the content node (not the editor root) so the base theme's root font-size
+        // never contests it, and so the 72ch measure resolves against the prose type step.
+        '.cm-content': { fontSize: '1.0625rem', lineHeight: '1.9', maxWidth: '72ch', margin: '0 auto' },
       },
       { dark: isDark },
     );
+    markupTheme = EditorView.theme({ '.cm-content': { lineHeight: '1.8' } }, { dark: isDark });
 
     modes = modesMod;
     focusCompartment = new stateMod.Compartment();
     typewriterCompartment = new stateMod.Compartment();
+    surfaceCompartment = new stateMod.Compartment();
 
     view = new EditorView({
       parent: host,
@@ -205,6 +249,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
           highlightMod.cairnDirectivePlugin(),
           EditorView.contentAttributes.of({ spellcheck: 'true', autocorrect: 'on', autocapitalize: 'sentences' }),
           theme,
+          surfaceCompartment.of(surface === 'prose' ? proseTheme : markupTheme),
           EditorView.updateListener.of((update) => {
             if (update.docChanged) value = update.state.doc.toString();
           }),
@@ -237,11 +282,13 @@ through the adapter's render. Swapping the editor stays a one-file change.
   $effect(() => {
     const focus = focusMode;
     const typing = typewriter;
-    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment) return;
+    const posture = surface;
+    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment || !surfaceCompartment) return;
     view.dispatch({
       effects: [
         focusCompartment.reconfigure(focus ? modes.focusMode() : []),
         typewriterCompartment.reconfigure(typing ? modes.typewriterScroll() : []),
+        surfaceCompartment.reconfigure((posture === 'prose' ? proseTheme : markupTheme) ?? []),
       ],
     });
   });

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

@@ -1,4 +1,4 @@
-/* Cairn's own typefaces, self-hosted so the admin needs no external font request. Figtree carries
+/* Cairn's own typefaces, self-hosted so the admin needs no external font request. IBM Plex Sans 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
@@ -10,7 +10,7 @@
    of use, so this fully overrides the host's theme with no @plugin and no host build step. */
 [data-theme='cairn-admin'] {
   color-scheme: light;
-  --font-body: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-body: 'IBM Plex Sans 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);
@@ -63,6 +63,14 @@
      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);
+  /* Focus mode's rail percentages: the directive bars dim with their text (about a third of the
+     quiet 72/82/92 ramp), so a dimmed block keeps its structure without staying the one
+     chromatic object in the field. Deliberately sub-3:1, the same transient-state call as the
+     dim ink; the quiet ramp is one toggle away. */
+  --cairn-focus-dim-rail-1: 24%;
+  --cairn-focus-dim-rail-2: 28%;
+  --cairn-focus-dim-rail-3: 32%;
+  --cairn-focus-dim-rail-active: 36%;
   --color-neutral: oklch(32% 0.012 75);
   --color-neutral-content: oklch(96% 0.004 75);
 
@@ -103,7 +111,7 @@
    >= 4.5:1 contrast on the dark bases. The polish pass tunes these values against the reference. */
 [data-theme='cairn-admin-dark'] {
   color-scheme: dark;
-  --font-body: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-body: 'IBM Plex Sans 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);
@@ -119,6 +127,9 @@
   --color-base-300: oklch(30% 0.014 75);
   --color-base-content: oklch(93% 0.006 75);
 
+  /* Locked pair: pressed footer-toggle text (text-primary on the bg-primary/10 plate over
+     dark base-100) measures 4.66:1, only 0.16 above the AA floor. Do not darken dark
+     --color-primary without re-checking that pair. */
   --color-primary: oklch(68% 0.18 293);
   --color-primary-content: oklch(20% 0.04 293);
   --color-secondary: oklch(72% 0.02 75);
@@ -153,6 +164,12 @@
      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);
+  /* Focus mode's rail percentages on dark, a third of the quiet 62/74/86 ramp; the same
+     deliberate sub-3:1 transient-state call as the dim ink. */
+  --cairn-focus-dim-rail-1: 21%;
+  --cairn-focus-dim-rail-2: 25%;
+  --cairn-focus-dim-rail-3: 29%;
+  --cairn-focus-dim-rail-active: 33%;
   --color-neutral: oklch(80% 0.01 75);
   --color-neutral-content: oklch(22% 0.008 75);
 
@@ -260,6 +277,13 @@
     outline-offset: -1px;
   }
 
+  /* Under focus mode the document title eases back with the rest of the context: at 30px bold
+     it would otherwise be the strongest ink on the page and pull the eye off the lit
+     paragraph. Its own focus restores full ink, so editing the title is never dimmed. */
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .cairn-doc-title-dim:not(:focus) {
+    color: var(--cairn-focus-dim-ink);
+  }
+
   /* Menu items come as anchors or buttons, and the omitted Preflight is what made them match:
      without it a button keeps the UA chrome (outset border, gray fill, centered system-font
      text) while its anchor siblings render flat. This scoped substitute levels the buttons to

package/src/lib/components/fonts/{Figtree-OFL.txt → IBMPlexSans-OFL.txt}

@@ -1,4 +1,4 @@
-Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
@@ -18,7 +18,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
+fonts, including any derivative works, can be bundled, embedded,
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The