@glw907/cairn-cms 0.52.1 → 0.53.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.53.0
+
+An iterative design session on the editor-as-home direction, shipped as one window.
+
+The admin's UI face is now IBM Plex Sans (self-hosted, SIL OFL), replacing Figtree: the editor
+writes in iA Writer Mono, which descends from IBM Plex Mono, so the chrome and the manuscript
+share one type skeleton. The brand display face (Bricolage Grotesque) is unchanged.
+
+The editor gains two surface postures, persisted and toggled from the card footer: Prose (the
+default) is the writing instrument, a 72ch centered measure at a larger type step; Markup is the
+working surface, a wide dense fill for tables, attributed directives, and long URLs. The footer
+is now the writing-environment strip (word count, postures, focus mode, typewriter, help), the
+insert actions joined the toolbar as icons, and the document title sits on the manuscript's left
+edge. Focus mode now also eases the directive rails and the title back with the dimmed field.
+
+The chrome cedes the stage: a narrower nav sidebar and details column, a wider gutter around the
+editor, a quieter details card, rebalanced surface margins, and the topbar pinned to the brand
+band's height so the header hairline meets across the seam.
+
+Consumers may: pass the new optional `surface` prop ('prose' | 'markup') when embedding
+`MarkdownEditor` directly. No action required; the release is additive.
+
 ## 0.52.1
 
 Two field reports from the first 0.52.0 session, both in-editor polish with no consumer action.

package/dist/components/AdminLayout.svelte

@@ -244,8 +244,10 @@ identical on every host regardless of the site's own theme.
 
     <div class="drawer-content flex flex-col">
       <!-- The topbar is a flat, opaque continuation of the sidebar's brand band: same surface and the
-           same hairline, no shadow, so the two form one clean header strip across the sidebar seam. -->
-      <div class="navbar bg-base-100 border-b border-[var(--cairn-card-border)] sticky top-0 z-30 gap-2 px-4 lg:px-8">
+           same hairline, no shadow, so the two form one clean header strip across the sidebar seam.
+           The height is pinned to the brand band's h-16 (a content-driven navbar drifts with font
+           metrics, and the two border-bottoms stop meeting at the seam). -->
+      <div class="navbar bg-base-100 border-b border-[var(--cairn-card-border)] sticky top-0 z-30 h-16 min-h-16 gap-2 px-4 py-0 lg:px-8">
         <div class="flex-none lg:hidden">
           <label for="cairn-drawer" aria-label="Open menu" class="btn btn-square btn-ghost">
             <MenuIcon class="h-5 w-5" />
@@ -293,7 +295,7 @@ identical on every host regardless of the site's own theme.
         </div>
       </div>
 
-      <main class="flex-1 p-4 lg:p-8">
+      <main class="flex-1 p-4 lg:px-10 lg:py-8">
         {@render children()}
       </main>
 
@@ -380,7 +382,7 @@ identical on every host regardless of the site's own theme.
 
     <div class="drawer-side">
       <label for="cairn-drawer" aria-label="Close menu" class="drawer-overlay"></label>
-      <nav class="bg-base-100 flex min-h-full w-64 flex-col border-r border-[var(--cairn-card-border)]" aria-label="Site content">
+      <nav class="bg-base-100 flex min-h-full w-56 flex-col border-r border-[var(--cairn-card-border)]" aria-label="Site content">
         <!-- Brand band, the same height as the topbar. The mark sits in a filled "app-icon" tile, which
              anchors the corner as a deliberate brand object rather than a washed box. The logo and
              wordmark link to the admin home. -->

package/dist/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,29 +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}
 
   <!-- 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]'}>
+       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. -->
@@ -665,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"
@@ -733,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)}
@@ -793,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>
@@ -813,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>
@@ -822,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">
@@ -860,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}
@@ -870,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/dist/components/EditPage.svelte.d.ts

@@ -33,7 +33,8 @@ interface Props {
  * 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.
  */
 declare const EditPage: import("svelte").Component<Props, {}, "">;
 type EditPage = ReturnType<typeof EditPage>;

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

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

package/dist/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');
@@ -121,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
@@ -176,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,
@@ -207,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();
           }),
@@ -239,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/dist/components/MarkdownEditor.svelte.d.ts

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