@glw907/cairn-cms 0.50.0 → 0.52.0

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.52.0
+
+The editor became a quiet writing surface. The manuscript renders in self-hosted iA Writer Mono
+(SIL OFL) at a centered 70-character measure, heading sizes step by level, every syntax marker
+and URL recedes to the muted ink while the content keeps full strength, inline code sits on a
+soft chip, and quote text reads in full ink with only the `>` dimmed. The editor also parses
+GFM now, so the toolbar's strikethrough, tables, and task lists highlight as you type.
+
+Directive machinery trades its row bands for bracket rails: a container draws a depth-stepped
+rail from opener to closer, nested containers draw nested rails, the fence line's name and label
+keep the accent while the colons and braces fade, and the block holding your caret reads one
+step stronger. The treatment is AA-checked in both themes.
+
+Two writing modes join the toolbar's overflow menu, each persisted per browser: focus mode fades
+every paragraph but the caret's (a deliberate, documented sub-AA dim with chip backgrounds
+flattened), and typewriter scrolling holds the caret line at vertical center.
+
+Consumers may: pass the new optional `focusMode` and `typewriter` booleans when embedding
+`MarkdownEditor` directly; sites on the stock `EditPage` get the toggles and persistence for
+free. No action required; the release is additive.
+
+## 0.51.0
+
+The `svelte` peer dependency floor rises from `^5.0.0` to `^5.56.3`, turning the 0.40.0 advisory
+into an enforced range: consumer sites compile the shipped `.svelte` sources, and svelte `5.56.1`
+miscompiles parenthesized boolean groupings. `cairn-doctor` gains a `config.dependency-floors`
+check in its default set, which compares the lockfile's resolved `svelte` and `@sveltejs/kit`
+versions against the peer ranges the installed engine declares.
+
+Consumers must: raise the `svelte` devDependency range to at least `^5.56.3` (and `@sveltejs/kit`
+to `^2.12` where it sits lower) and reinstall so the lockfile re-resolves. A site pinning svelte
+below the floor now draws an npm peer warning or resolution failure on install, and the doctor
+reports the below-floor version as a blocker.
+
+The edit page's preview now renders inside a sandboxed iframe whose document links the site's own
+stylesheets, so an entry proofs in the site's real styling without that CSS ever touching the
+admin document. The adapter gains an optional `preview` member naming the compiled CSS URLs (a
+Vite `?url` import resolves the hashed asset) plus `bodyClass` and `containerClass` for the site's
+body classes and content wrapper, and a `byConcept` map overrides either class per concept for a
+site whose posts and pages wrap content differently. While Preview shows, the sidebar steps aside
+so the document takes the full width, and a width menu on the Preview tab sizes the frame to
+Desktop, Tablet, Phone, or Small phone, persisted per browser.
+
+Consumers should: wire `preview` in the adapter, referencing the sheet only through `?url` and
+linking the same URL from the site layout, the way
+[the adapter guide](docs/guides/define-an-adapter-and-schema.md) shows. Without the knob the
+preview renders unstyled markup behind a one-line hint.
+
+The editor's directive highlighting now recognizes labeled and attributed `:::` openers and fences
+of four or more colons, where before only bare closers matched, and nested containers step their
+band and rail tint by depth. No consumer action.
+
+`cairn-doctor` derives its missing inputs from the repo it runs in: the backend owner and repo
+plus the sender address come from evaluating the site's config module through the manifest bin's
+Vite machinery, and the Cloudflare account id comes from the wrangler config, with flags and
+environment variables taking precedence. A new `--probe <url>` flag runs a zero-side-effect live
+check against the deployed admin's sign-in surface: the login envelope, the CSRF cookie and field,
+and the uniform non-leak answer to a stranger's sign-in request. Consumers may: drop the `--from`
+and `--repo` flags from doctor invocations and run `npx cairn-doctor --probe <url>` after a
+deploy.
+
 ## 0.50.0
 
 The admin now mounts as one catch-all route. A new `createCairnAdmin(runtime, deps)` facade

package/dist/components/EditPage.svelte

@@ -6,13 +6,16 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
 toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
 swap the editing surface for the rendered preview inside the same card; every visit lands on
-Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+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.
 -->
 <script lang="ts">
-  import { untrack } from 'svelte';
+  import { flushSync, untrack } from 'svelte';
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import CsrfField from './CsrfField.svelte';
@@ -26,6 +29,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   import MarkdownHelpDialog from './MarkdownHelpDialog.svelte';
   import { cairnLinkCompletionSource } from './link-completion.js';
   import { unwrapCairnLink, type FormatKind } from './markdown-format.js';
+  import { buildPreviewDoc, deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
   import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
@@ -97,6 +101,16 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   // The edit form element, for the Ctrl/Cmd+S shortcut's requestSubmit.
   let editForm = $state<HTMLFormElement | null>(null);
 
+  // A required sidebar field hidden by Preview cannot take the browser's validation report: an
+  // invisible control is unfocusable, so the browser cancels the save silently with no message.
+  // This capture-phase invalid listener flips back to Write first, and flushSync forces the pane
+  // swap inside the event, so the report that follows the invalid events lands on a visible
+  // control and the author sees what blocked the save.
+  function onFormInvalid() {
+    if (mode === 'write') return;
+    flushSync(() => (mode = 'write'));
+  }
+
   // The SvelteKit half of the leave guard. Registered at component init (beforeNavigate wraps
   // onMount, so it must run synchronously here) and auto-unregistered on destroy. A submit's own
   // navigation passes through because busy flips before it starts, and a non-edit POST's because
@@ -150,6 +164,43 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   let previewHtml = $state('');
   // True after a render call threw, so the preview pane can say so instead of going blank.
   let previewFailed = $state(false);
+  // The preview frame's device width, a per-browser preference under its own key (the legacy
+  // 'cairn-admin:preview' key from the removed split-pane preview stays untouched). Desktop is
+  // the default; the storage read sits in an effect so it never runs during SSR, and it tracks
+  // nothing reactive, so it runs once.
+  const deviceStorageKey = 'cairn-editor-preview-device';
+  let device = $state<PreviewDeviceId>('desktop');
+  $effect(() => {
+    const stored = localStorage.getItem(deviceStorageKey);
+    if (previewDevices.some((d) => d.id === stored)) device = stored as PreviewDeviceId;
+  });
+  function setDevice(id: PreviewDeviceId) {
+    device = id;
+    localStorage.setItem(deviceStorageKey, id);
+  }
+  // The writing modes (focus, typewriter), per-browser preferences on the device pick's pattern:
+  // off by default, read in an effect so SSR never touches localStorage, written by the
+  // toolbar's toggles. The effect tracks nothing reactive, so it runs once.
+  const focusStorageKey = 'cairn-editor-focus-mode';
+  const typewriterStorageKey = 'cairn-editor-typewriter';
+  let focusMode = $state(false);
+  let typewriter = $state(false);
+  $effect(() => {
+    focusMode = localStorage.getItem(focusStorageKey) === 'true';
+    typewriter = localStorage.getItem(typewriterStorageKey) === 'true';
+  });
+  function setFocusMode(on: boolean) {
+    focusMode = on;
+    localStorage.setItem(focusStorageKey, String(on));
+  }
+  function setTypewriter(on: boolean) {
+    typewriter = on;
+    localStorage.setItem(typewriterStorageKey, String(on));
+  }
+  const activeDevice = $derived(previewDevice(device));
+  // The iframe document around the rendered html: the site's stylesheets from the adapter's
+  // preview knob, or a styleless document (behind the hint below) when the site sets none.
+  const previewDoc = $derived(buildPreviewDoc(previewHtml, data.preview));
   let insert = $state.raw<(text: string) => void>(() => {});
   let insertLink = $state.raw<(href: string, title: string) => void>(() => {});
   // The editor's current selection, registered by MarkdownEditor on mount; the web link dialog
@@ -388,7 +439,13 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         }
       }
     }, 150);
-    return () => clearTimeout(handle);
+    return () => {
+      clearTimeout(handle);
+      // Every re-run and the final teardown invalidate the in-flight render. The entry-key reset
+      // above cannot reach this counter, so without the bump a slow render for entry A could
+      // resolve after a same-route hop and write A's html into entry B's pane.
+      previewRun++;
+    };
   });
 
   // Coerce a frontmatter value to a string for text/date/textarea inputs.
@@ -575,7 +632,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   bind:this={editForm}
   onsubmit={onEditSubmit}
   oninput={onFormInput}
-  class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6"
+  oninvalidcapture={onFormInvalid}
+  class={mode === 'preview' ? '' : 'lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6'}
 >
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
@@ -602,7 +660,17 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       role="group"
       aria-label="Editor"
     >
-      <EditorToolbar {format} {mode} onMode={setMode}>
+      <EditorToolbar
+        {format}
+        {mode}
+        onMode={setMode}
+        {device}
+        onDevice={setDevice}
+        {focusMode}
+        onFocusMode={setFocusMode}
+        {typewriter}
+        onTypewriter={setTypewriter}
+      >
         {#snippet insertControls()}
           <!-- Plain triggers only: the dialogs they open hold their own <form> elements, so the
                dialogs themselves mount outside the edit form at the bottom of this component. -->
@@ -665,19 +733,58 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           registerGetSelection={(fn) => (getSelection = fn)}
           registerFormat={(fn) => (format = fn)}
           {completionSources}
+          {focusMode}
+          {typewriter}
         />
       </div>
       {#if mode === 'preview'}
-        <!-- tabindex 0: the pane holds no focusable content, so it is itself a tab stop (the
-             tabpanel pattern's completeness requirement). -->
-        <div id="cairn-pane-preview" role="tabpanel" aria-labelledby="cairn-tab-preview" tabindex="0" class="prose max-w-none p-4">
-          {#if previewHtml}
-            {@html previewHtml}
-          {:else if previewFailed}
-            <p class="text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
-          {:else}
-            <p class="text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
-          {/if}
+        <!-- The preview ground: recessed under the floating frame card so the page reads as a
+             sheet on the desk. tabindex 0 only while a message shows in place of the iframe;
+             with the iframe up the frame itself is the pane's focusable content (the tabpanel
+             pattern's completeness requirement). -->
+        <div
+          id="cairn-pane-preview"
+          role="tabpanel"
+          aria-labelledby="cairn-tab-preview"
+          tabindex={previewHtml && !previewFailed ? undefined : 0}
+          class="bg-base-200 px-4 py-6 lg:px-8"
+        >
+          <!-- The frame column: centered, sized by the picked device (capped at the pane), with
+               the width eased; the admin sheet's prefers-reduced-motion rule squashes the move. -->
+          <div
+            class="cairn-preview-frame mx-auto max-w-full transition-[width] duration-300"
+            style:width={activeDevice.width === null ? '100%' : `${activeDevice.width}px`}
+          >
+            {#if activeDevice.width !== null}
+              <p class="mb-2 text-right text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">
+                {deviceLabel(activeDevice)}
+              </p>
+            {/if}
+            {#if !data.preview}
+              <p class="mb-2 text-xs text-[var(--color-muted)]">
+                Preview shows unstyled markup until the adapter's preview option names the site's stylesheets.
+              </p>
+            {/if}
+            <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]">
+              {#if previewFailed}
+                <p class="p-4 text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
+              {:else if !previewHtml}
+                <p class="p-4 text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
+              {:else}
+                <!-- The site's render pipeline already sanitized the html (the floor strips
+                     scripts and handlers); the empty sandbox is belt and braces on top. The
+                     frame document's base tag targets every link at a new tab, which the
+                     sandbox (no allow-popups) blocks, so a proofing click never navigates the
+                     admin or the frame itself. tabindex 0 keeps the scrollable preview
+                     keyboard-reachable (an iframe is not a sequential tab stop by itself); on
+                     a link-heavy page that one inert Tab stop is a deliberate tradeoff. The
+                     a11y rule reads any tabindex on a non-interactive element as a smell, but
+                     a scrollable region is the recognized exception. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+                <iframe sandbox="" tabindex="0" title="Page preview" srcdoc={previewDoc} class="block h-[70vh] w-full"></iframe>
+              {/if}
+            </div>
+          </div>
         </div>
       {/if}
       <!-- The card footer, part of the same instrument frame. It stays up in Preview too, so the
@@ -696,7 +803,9 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     </div>
   </div>
 
-  <aside class="lg:order-2 mt-4 lg:mt-0">
+  <!-- Preview takes the full surface: the sidebar hides (never unmounts, so the uncontrolled
+       field edits survive the round trip) and the editor column above spans the whole width. -->
+  <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)]">

package/dist/components/EditPage.svelte.d.ts

@@ -27,7 +27,10 @@ interface Props {
  * remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
  * toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
  * swap the editing surface for the rendered preview inside the same card; every visit lands on
- * Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+ * Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+ * adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+ * sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+ * 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.

package/dist/components/EditorToolbar.svelte

@@ -3,12 +3,16 @@
 The editor card's instrument strip. Three button groups divided by hairlines (Text, Structure with a
 More overflow menu, then the host's Insert controls) and the Write/Preview segmented control pinned
 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. The glyphs
-are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
+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).
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { FormatKind } from './markdown-format.js';
+  import { deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
 
   interface Props {
     /** Apply a markdown transform to the editor's current selection. */
@@ -17,11 +21,35 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     mode: 'write' | 'preview';
     /** Ask the host to switch panes. */
     onMode: (m: 'write' | 'preview') => void;
+    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
+    device?: PreviewDeviceId;
+    /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
+     *  while Preview shows. */
+    onDevice?: (id: PreviewDeviceId) => void;
+    /** Whether focus mode is on; the More menu's toggle reflects it. */
+    focusMode?: boolean;
+    /** Flip focus mode. When set, the toggle joins the More menu. */
+    onFocusMode?: (on: boolean) => void;
+    /** Whether typewriter scrolling is on; the More menu's toggle reflects it. */
+    typewriter?: boolean;
+    /** Flip typewriter scrolling. When set, the toggle joins the More menu. */
+    onTypewriter?: (on: boolean) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
   }
 
-  let { format, mode, onMode, insertControls }: Props = $props();
+  let {
+    format,
+    mode,
+    onMode,
+    device = 'desktop',
+    onDevice,
+    focusMode = false,
+    onFocusMode,
+    typewriter = false,
+    onTypewriter,
+    insertControls,
+  }: Props = $props();
 
   // Each icon is a set of stroke `<path>` d-strings rendered into the shared 24x24 svg below, so the
   // markup stays declarative (no per-icon raw html). Paths follow the house outline style.
@@ -68,6 +96,8 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   ];
 
   const ellipsisPaths = ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'];
+  // The check glyph marking an active pick, shared by the More menu's toggles and the device list.
+  const checkPaths = ['M20 6 9 17l-5-5'];
 
   const moreItems: { kind: FormatKind; label: string }[] = [
     { kind: 'strike', label: 'Strikethrough' },
@@ -83,10 +113,27 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   let moreMenu = $state<HTMLUListElement | null>(null);
   let moreOpen = $state(false);
 
+  // Picking dismisses the menu; hiding returns focus to the trigger, keeping the roving order.
+  function hideMenu(menu: HTMLUListElement | null) {
+    if (menu?.matches(':popover-open')) menu.hidePopover();
+  }
+
   function pickMore(kind: FormatKind) {
     format(kind);
-    // Picking dismisses the menu; hiding returns focus to the trigger, keeping the roving order.
-    if (moreMenu?.matches(':popover-open')) moreMenu.hidePopover();
+    hideMenu(moreMenu);
+  }
+
+  // The device menu's popover element and its open state, mirrored from the toggle event into
+  // aria-expanded on the trigger (the More menu's pattern).
+  let deviceMenu = $state<HTMLUListElement | null>(null);
+  let deviceOpen = $state(false);
+  const activeDevice = $derived(previewDevice(device));
+  // Whether the device trigger renders as the capsule's third segment.
+  const showDeviceTrigger = $derived(mode === 'preview' && !!onDevice);
+
+  function pickDevice(id: PreviewDeviceId) {
+    onDevice?.(id);
+    hideMenu(deviceMenu);
   }
 
   let toolbarEl = $state<HTMLDivElement | null>(null);
@@ -156,13 +203,20 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
 {/snippet}
 
 {#snippet tab(m: 'write' | 'preview', label: string)}
+  <!-- The capsule look is manual rounding, not daisyUI's .join: join radii follow direct
+       children, and the device trigger must sit outside the tablist (ARIA required children),
+       so the segments square their shared edges themselves. Preview squares its right edge only
+       while the trigger extends the capsule. -->
   <button
     type="button"
     role="tab"
     id={`cairn-tab-${m}`}
     aria-selected={mode === m}
     aria-controls={`cairn-pane-${m}`}
-    class="join-item btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class="btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class:rounded-r-none={m === 'write' || showDeviceTrigger}
+    class:rounded-l-none={m === 'preview'}
+    class:-ml-px={m === 'preview'}
     onclick={() => onMode(m)}
   >
     {label}
@@ -211,6 +265,34 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     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}
@@ -230,9 +312,52 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   {/if}
 
   <!-- The host renders the matching tabpanels (#cairn-pane-write and #cairn-pane-preview) below
-       the strip inside the same editor card. -->
-  <div class="join ml-auto" role="tablist" aria-label="Editor view">
-    {@render tab('write', 'Write')}
-    {@render tab('preview', 'Preview')}
+       the strip inside the same editor card. The tablist wrapper holds ONLY the two tabs (ARIA
+       required children: anything else in a tablist makes assistive tech miscount the tabs).
+       While Preview shows, the device trigger reads as the capsule's third segment from the
+       flex row right after the wrapper; it is a plain button, not a tab. -->
+  <div class="ml-auto flex items-center">
+    <div role="tablist" aria-label="Editor view" class="flex items-center">
+      {@render tab('write', 'Write')}
+      {@render tab('preview', 'Preview')}
+    </div>
+    {#if showDeviceTrigger}
+      <button
+        type="button"
+        class="btn btn-sm btn-ghost gap-1 rounded-l-none -ml-px"
+        title="Preview width"
+        aria-expanded={deviceOpen}
+        popovertarget="cairn-preview-device-menu"
+        style="anchor-name:--cairn-preview-device"
+      >
+        <span class="sr-only">Preview width:</span>
+        {activeDevice.label}
+        {@render strokeIcon(['m6 9 6 6 6-6'])}
+      </button>
+    {/if}
   </div>
+  {#if showDeviceTrigger}
+    <!-- The device list mirrors the More menu exactly: a DaisyUI v5 popover dropdown of plain
+         buttons, with the active pick carried by aria-pressed and the check glyph. Deliberately
+         NOT the ARIA menu pattern: menu roles promise interactions this list does not have. -->
+    <ul
+      bind:this={deviceMenu}
+      popover="auto"
+      id="cairn-preview-device-menu"
+      style="position-anchor:--cairn-preview-device"
+      ontoggle={(e) => (deviceOpen = e.newState === 'open')}
+      class="dropdown dropdown-end menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
+    >
+      {#each previewDevices as d (d.id)}
+        <li>
+          <button type="button" aria-pressed={device === d.id} onclick={() => pickDevice(d.id)}>
+            <span class="grow">{deviceLabel(d)}</span>
+            {#if device === d.id}
+              {@render strokeIcon(checkPaths)}
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
 </div>

package/dist/components/EditorToolbar.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { FormatKind } from './markdown-format.js';
+import { type PreviewDeviceId } from './preview-doc.js';
 interface Props {
     /** Apply a markdown transform to the editor's current selection. */
     format: (kind: FormatKind) => void;
@@ -7,6 +8,19 @@ interface Props {
     mode: 'write' | 'preview';
     /** Ask the host to switch panes. */
     onMode: (m: 'write' | 'preview') => void;
+    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
+    device?: PreviewDeviceId;
+    /** 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;
 }
@@ -14,8 +28,11 @@ interface Props {
  * The editor card's instrument strip. Three button groups divided by hairlines (Text, Structure with a
  * More overflow menu, then the host's Insert controls) and the Write/Preview segmented control pinned
  * 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. The glyphs
- * are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
+ * 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).
  */
 declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
 type EditorToolbar = ReturnType<typeof EditorToolbar>;