@glw907/cairn-cms 0.52.0 → 0.53.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.
+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

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,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/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>;