@glw907/cairn-cms 0.52.1 → 0.54.0

package/dist/components/EditPage.svelte

@@ -3,7 +3,8 @@
 The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the
 markdown editor and a live, design-accurate preview. The whole surface is one form posting to the
 `?/save` action. The title field is hoisted above the editor card as the document title; the
-remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
+remaining fields group behind the Details slide-over (a fixed panel below the band, toggled from
+the band's Details trigger or Ctrl+.) 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. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
@@ -12,12 +13,18 @@ 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 PanelRightIcon from '@lucide/svelte/icons/panel-right';
+  import { useTopbar } from './topbar-context.js';
   import CsrfField from './CsrfField.svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
   import EditorToolbar from './EditorToolbar.svelte';
@@ -27,6 +34,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   import DeleteDialog from './DeleteDialog.svelte';
   import RenameDialog from './RenameDialog.svelte';
   import MarkdownHelpDialog from './MarkdownHelpDialog.svelte';
+  import ShortcutsDialog from './ShortcutsDialog.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';
@@ -54,6 +62,25 @@ transient flashes, and the editor card's footer holds the word count and the Mar
 
   let { data, registry, render, icons, form }: Props = $props();
 
+  // The topbar context portal (AdminLayout owns the holder). The desk snippet below carries the
+  // document's status and action clusters; this effect registers it into the band on mount and
+  // nulls it on teardown, so CairnAdmin's view switch (which unmounts EditPage) clears the band.
+  // The holder is absent only when EditPage renders outside AdminLayout (it always renders inside
+  // it in the app); the optional chaining keeps that case inert.
+  const topbar = useTopbar();
+  $effect(() => {
+    if (!topbar) return;
+    topbar.desk = desk;
+    // Zen drops the band: AdminLayout reads this flag to remove the whole topbar element, so the
+    // desk's clusters and AdminLayout's own chrome (the drawer toggle, the breadcrumb) all slide
+    // away together. The effect tracks `zen`, so a toggle reaches the band live.
+    topbar.zen = zen;
+    return () => {
+      topbar.desk = null;
+      topbar.zen = false;
+    };
+  });
+
   // `body` is local editor state seeded once; it diverges as the user types. A blocked save returns
   // the author's edited markdown as form.body, so seed from that when present to keep the edits and
   // the broken link they were told to fix. On the success and delete-refused paths form carries no
@@ -100,13 +127,23 @@ 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);
+  // The header's Publish submitter, for the Ctrl/Cmd+Shift+S shortcut: requesting submit through it
+  // carries the ?/publish formaction and trips the busy flags down the existing submit path. It
+  // exists only while data.pending, so the shortcut no-ops when there is nothing to publish.
+  let publishButton = $state<HTMLButtonElement | 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() {
+  // A required field hidden from the browser's validation report cannot take it: an invisible
+  // control is unfocusable, so the browser cancels the save silently with no message. Two surfaces
+  // can hide a required field, so this capture-phase invalid listener reveals whichever holds the
+  // invalid control before the report that follows fires. A field in the write pane needs Preview
+  // flipped back to Write; a field in the details slide-over needs the panel opened. flushSync
+  // forces the reveal inside the event, so the report lands on a now-visible control.
+  function onFormInvalid(e: Event) {
+    const target = e.target as Element | null;
+    if (target?.closest('aside')) {
+      if (!detailsOpen) flushSync(() => (detailsOpen = true));
+      return;
+    }
     if (mode === 'write') return;
     flushSync(() => (mode = 'write'));
   }
@@ -137,8 +174,73 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     // Guard-clause style on purpose: svelte 5.56.1 misprints `(a || b) && c` by dropping the
     // parentheses, and consumers compile this source with their own svelte.
     const onWindowKeydown = (e: KeyboardEvent) => {
+      // Escape precedence, top to bottom: an open dialog claims Escape natively, so step aside
+      // when one is up. Otherwise the details slide-over closes first (Task 8: it is a region, not
+      // a dialog, so it has no native light-dismiss), and only when no panel is open does Escape
+      // exit zen. So under zen with the panel open, the first Escape closes the panel and the
+      // second exits zen, which keeps the two affordances independent.
+      if (e.key === 'Escape' && (detailsOpen || zen)) {
+        const inDialog = !!(e.target as Element | null)?.closest?.('dialog');
+        if (inDialog) return;
+        e.preventDefault();
+        if (detailsOpen) closeDetails();
+        else setZen(false);
+        return;
+      }
       if (!(e.ctrlKey || e.metaKey)) return;
-      if (e.key.toLowerCase() !== 's') return;
+      const key = e.key.toLowerCase();
+      // The page-wide chords never act on a surface the author cannot see: a save, publish, mode
+      // flip, or focus toggle from inside an open modal is suppressed the same way.
+      const inDialog = !!(e.target as Element | null)?.closest?.('dialog');
+      // Ctrl+/ opens the shortcuts sheet, the third discoverability surface. It reads off e.key so
+      // it survives the shifted glyph differences across layouts, and it stays clear of dialogs the
+      // same way the other chords do (the sheet is itself a dialog, so opening from inside one would
+      // stack modals over a surface the author cannot see).
+      if (!e.shiftKey && !e.altKey && e.key === '/') {
+        e.preventDefault();
+        if (inDialog) return;
+        shortcutsDialog?.open();
+        return;
+      }
+      if (e.shiftKey && key === 's') {
+        // Publish rides the header's Publish submitter so the ?/publish formaction and the busy
+        // flags follow the existing submit path; it exists only while pending, so this no-ops
+        // otherwise.
+        e.preventDefault();
+        if (busy || inDialog || !data.pending) return;
+        editForm?.requestSubmit(publishButton);
+        return;
+      }
+      if (e.altKey && key === 'p') {
+        e.preventDefault();
+        if (inDialog) return;
+        setMode(mode === 'write' ? 'preview' : 'write');
+        return;
+      }
+      if (e.shiftKey && key === 'f') {
+        e.preventDefault();
+        if (inDialog) return;
+        setFocusMode(!focusMode);
+        return;
+      }
+      // Ctrl+Shift+. toggles zen (the bindings' zen key); the period reads off e.key. This sits
+      // before the Ctrl+. panel block so the shifted chord is not mistaken for the panel toggle.
+      if (e.shiftKey && !e.altKey && e.key === '.') {
+        e.preventDefault();
+        if (inDialog) return;
+        setZen(!zen);
+        return;
+      }
+      // Ctrl+. toggles the details slide-over (the bindings' panel key); the period reads off
+      // e.key with no shift or alt.
+      if (!e.shiftKey && !e.altKey && e.key === '.') {
+        e.preventDefault();
+        if (inDialog) return;
+        toggleDetails();
+        return;
+      }
+      if (e.shiftKey || e.altKey) return;
+      if (key !== 's') return;
       // Always claim the shortcut so the browser's save-page dialog never opens over the admin.
       e.preventDefault();
       // Gate the submit itself: an in-flight POST must not race a second one, a clean page has
@@ -146,7 +248,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       // an open modal would act on a surface the author cannot see.
       if (busy) return;
       if (!dirty && !data.isNew) return;
-      if ((e.target as Element | null)?.closest?.('dialog')) return;
+      if (inDialog) return;
       editForm?.requestSubmit();
     };
     window.addEventListener('beforeunload', onBeforeUnload);
@@ -178,16 +280,28 @@ 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';
+  const zenStorageKey = 'cairn-editor-zen';
   let focusMode = $state(false);
   let typewriter = $state(false);
+  // Zen: the manuscript alone on the recessed ground. The band, the document title, the toolbar
+  // strip, and the footer go; the editing surface stays. It joins the editor-preference family on
+  // the same pattern (a localStorage key, read once below, written by the setter), and composes
+  // with focus mode and the postures rather than resetting them.
+  let zen = $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';
+    zen = localStorage.getItem(zenStorageKey) === 'true';
+    if (localStorage.getItem(surfaceStorageKey) === 'markup') surface = 'markup';
   });
   function setFocusMode(on: boolean) {
     focusMode = on;
@@ -197,6 +311,43 @@ 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);
+  }
+  function setZen(on: boolean) {
+    // Entering zen hides the band, the document title, the toolbar strip, and the footer. Focus on
+    // any of those (a band action like Publish, a strip button, the title input, a footer toggle)
+    // would strand on a detached node when its host leaves the DOM, so move focus into the editing
+    // surface first. The surface (.cm-editor) and the exit chip are all that survive, so any focus
+    // outside the surface is about to hide. Reading activeElement before the DOM updates is what
+    // tells a hiding control from the surviving one.
+    const surface = editorCard?.querySelector('.cm-editor');
+    const focusHides = on && !surface?.contains(document.activeElement);
+    zen = on;
+    localStorage.setItem(zenStorageKey, String(on));
+    if (focusHides) {
+      // flushSync applies the zen layout (the strip and footer leave the DOM) before we reach for
+      // the surface, so the focus call lands on the now-sole interactive region.
+      flushSync();
+      (editorCard?.querySelector('.cm-content') as HTMLElement | null)?.focus();
+    }
+  }
+  // The footer controls dress as what they are (the spec's rule). Each helper returns a verbatim
+  // Tailwind class string: the admin CSS build's @source scan reads this file as raw text, so the
+  // utilities must appear whole, never assembled from fragments.
+  //
+  // A segment of the bordered posture control (the mockup's .seg). The shared group border carries
+  // the pick-one semantics, so a segment stays borderless; the active one tints and bolds. The
+  // admin's scoped button reset (cairn-admin.css) already strips the UA border and fill.
+  function segButtonClass(pressed: boolean): string {
+    return `inline-flex items-center gap-1 px-2.5 py-1 text-xs font-normal ${pressed ? 'bg-primary/10 text-primary font-medium' : 'text-[var(--color-muted)]'}`;
+  }
+  // A standalone writing-mode toggle (the mockup's .ftr-toggle): rounded, transparent until hover,
+  // check-and-tint when pressed.
+  function ftrToggleClass(pressed: boolean): string {
+    return `ftr-toggle inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-normal hover:bg-base-content/[0.06] ${pressed ? 'bg-primary/10 text-primary font-medium' : '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.
@@ -221,6 +372,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   let renameDialog = $state<DialogHandle | null>(null);
   // The Markdown cheat sheet, opened from the editor card's footer.
   let helpDialog = $state<DialogHandle | null>(null);
+  // The keyboard shortcuts sheet, opened from anywhere on the desk by Ctrl+/.
+  let shortcutsDialog = $state<DialogHandle | null>(null);
 
   // Whether the registry offers anything insertable, the same condition the insert dialog lists
   // by, so the toolbar trigger and the dialog appear and disappear together.
@@ -238,11 +391,35 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     return 'badge-ghost';
   });
 
-  // The header overflow menu's popover element and its open state, mirrored from the toggle
+  // The band overflow menu's popover element and its open state, mirrored from the toggle
   // event into aria-expanded on the trigger.
   let actionsMenu = $state<HTMLUListElement | null>(null);
   let actionsOpen = $state(false);
 
+  // The details slide-over. The aside below carries the frontmatter groups; it stays physically
+  // inside the edit form (so the uncontrolled fields submit) but presents as a fixed panel under
+  // the band, hidden when closed so it leaves the a11y tree and the tab order while its
+  // display:none fields still post. Focus moves into the panel on open and returns to the trigger
+  // on close, the region-with-focus-management pattern (the a11y reviewer adjudicates region vs
+  // dialog at the pass gate).
+  let detailsOpen = $state(false);
+  let detailsTrigger = $state<HTMLButtonElement | null>(null);
+  let detailsClose = $state<HTMLButtonElement | null>(null);
+  function openDetails() {
+    // flushSync removes the panel's `hidden` attribute synchronously; a hidden element cannot
+    // take focus, so the close button must be visible before we move focus to it.
+    flushSync(() => (detailsOpen = true));
+    detailsClose?.focus();
+  }
+  function closeDetails() {
+    detailsOpen = false;
+    detailsTrigger?.focus();
+  }
+  function toggleDetails() {
+    if (detailsOpen) closeDetails();
+    else openDetails();
+  }
+
   // An overflow-menu pick runs its action, then dismisses the popover menu. Opening a modal
   // dialog already closes an auto popover, so the explicit hide fires only when the menu is
   // still up.
@@ -298,6 +475,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       leaving = false;
       fieldsDirty = false;
       mode = 'write';
+      detailsOpen = false;
       previewHtml = '';
       previewFailed = false;
       removedLinks = [];
@@ -403,7 +581,13 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   function onEditorKeydown(e: KeyboardEvent) {
     if (!(e.ctrlKey || e.metaKey)) return;
     const key = e.key.toLowerCase();
-    if (key === 'b') {
+    // The shifted-digit list trio (Ctrl+Shift+9/8/7) arrives as '('/'*'/'&' for e.key on US
+    // layouts, so the digit identity comes from e.code; the heading pair rides Ctrl+Alt+2/3.
+    const fmt = formatForKeydown(e);
+    if (fmt) {
+      e.preventDefault();
+      format(fmt);
+    } else if (key === 'b') {
       e.preventDefault();
       format('bold');
     } else if (key === 'i') {
@@ -414,6 +598,24 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       webLinkDialog?.open();
     }
   }
+  // Maps the format-key chords to their FormatKind. Inline code is the plain Ctrl+E; quote and the
+  // two lists are Ctrl+Shift with the digit read from e.code (the shifted key glyph is layout
+  // dependent); the headings are the Ctrl+Alt+2/3 Google Docs idiom.
+  function formatForKeydown(e: KeyboardEvent): FormatKind | null {
+    if (e.altKey) {
+      if (e.key === '2') return 'h2';
+      if (e.key === '3') return 'h3';
+      return null;
+    }
+    if (e.shiftKey) {
+      if (e.code === 'Digit9') return 'quote';
+      if (e.code === 'Digit8') return 'ul';
+      if (e.code === 'Digit7') return 'ol';
+      return null;
+    }
+    if (e.key.toLowerCase() === 'e') return 'code';
+    return null;
+  }
 
   // Render the design-accurate preview as the body changes, debounced. The site's render is the
   // floored engine pipeline, so its output is already sanitized; the preview mirrors the page.
@@ -465,48 +667,15 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   const detailFields = $derived(data.fields.filter((f) => f !== titleField && f !== draftField));
 </script>
 
-<!-- The whole edit surface remounts when navigation lands on another entry (see the entryKey
-     reset above); script-level state and the beforeNavigate registration sit outside the block,
-     so only the template rebuilds. -->
-{#key entryKey}
-<!-- The form's default button. The header's Publish (while pending) and Save submit the edit form
-     from outside it, and the default button for implicit submission (Enter in a single-line
-     field) is the FIRST form-owned submit button in tree order, which the header's Publish would
-     otherwise be: Enter in the title would publish a half-finished edit. This sr-only button sits
-     before the header, carries no formaction (so an implicit submit posts ?/save), and mirrors
-     Save's disabled state, so Enter on a clean page submits nothing. -->
-<button
-  type="submit"
-  form="cairn-edit-form"
-  class="sr-only"
-  tabindex="-1"
-  aria-hidden="true"
-  disabled={busy || (!dirty && !data.isNew)}
->
-  Save
-</button>
-
-<!-- The sticky action header, a glass ruler: a translucent base-200 veil with backdrop blur the
-     page scrolls beneath, never a second opaque band (the admin topbar keeps that role). It sticks
-     under the h-16 topbar and bleeds across AdminLayout's content padding (p-4, lg:p-8) with
-     matching negative margins, so the veil spans the whole content column. -->
-<header
-  class="sticky top-16 z-10 -mx-4 mb-6 border-b border-[var(--cairn-card-border)] bg-base-200/90 px-4 py-3 backdrop-blur lg:-mx-8 lg:px-8"
->
-  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
-    <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
-      <a
-        href={`/admin/${data.conceptId}`}
-        class="flex shrink-0 items-center gap-0.5 text-sm text-[var(--color-muted)] transition-colors hover:text-base-content"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 18-6-6 6-6" />
-        </svg>
-        {data.label}
-      </a>
-      <!-- The manuscript heading below is the visible title; repeating it here read as
-           duplication, so the header keeps the h1 for assistive tech only. -->
-      <h1 class="sr-only">{data.title}</h1>
+<!-- The desk controls live in the one header band: AdminLayout renders this snippet through the
+     topbar context portal, to the right of the breadcrumb (the way back). Two clusters: the
+     document status behind a hairline (status badge, save-state) and the actions split by a
+     second hairline into the quiet pair (Details, overflow) and the lifecycle pair
+     (Publish, Save). The breadcrumb itself stays in AdminLayout, so the duplicate is gone. -->
+{#snippet desk()}
+  <div class="ml-2 flex min-w-0 flex-1 items-center gap-3">
+    <!-- The document status, fenced off by a hairline on its left. -->
+    <div class="flex min-w-0 items-center gap-2.5 border-l border-[var(--cairn-card-border)] pl-3">
       <span class="badge badge-sm font-medium {statusBadge}">{status}</span>
       {#if data.frontmatter.draft === true}
         <span class="badge badge-neutral badge-sm font-medium">Hidden</span>
@@ -522,7 +691,39 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         {saveState}
       </span>
     </div>
-    <div class="ml-auto flex items-center gap-2">
+
+    <div class="ml-auto flex items-center gap-2 border-l border-[var(--cairn-card-border)] pl-3">
+      <!-- The form's default button, FIRST in the actions cluster (and so first among the form's
+           submit buttons in tree order, since the band precedes the form). The default button for
+           implicit submission (Enter in a single-line field) is the first form-owned submit button
+           in tree order; without this the Publish button would claim it and Enter in the title
+           would publish a half-finished edit. This sr-only button carries no formaction (so an
+           implicit submit posts ?/save) and mirrors Save's disabled state, so Enter on a clean
+           page submits nothing. -->
+      <button
+        type="submit"
+        form="cairn-edit-form"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        disabled={busy || (!dirty && !data.isNew)}
+      >
+        Save
+      </button>
+
+      <!-- The quiet pair: the Details panel trigger and the overflow menu. The trigger toggles
+           the slide-over; aria-expanded mirrors its state and focus returns here on close. -->
+      <button
+        bind:this={detailsTrigger}
+        type="button"
+        class="btn btn-ghost btn-sm btn-square"
+        aria-label="Details"
+        title="Details"
+        aria-expanded={detailsOpen}
+        onclick={toggleDetails}
+      >
+        <PanelRightIcon class="h-4 w-4" aria-hidden="true" />
+      </button>
       <!-- The overflow menu is a DaisyUI v5 popover dropdown: click to open (never
            focus-in-transit), Escape and light dismiss from the Popover API, and the
            anchor-name/position-anchor pair places the panel under its trigger. -->
@@ -562,26 +763,34 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           </button>
         </li>
       </ul>
-      {#if data.pending}
-        <!-- Outline keeps Save the single solid primary action; Publish reads as its peer. -->
-        <button type="submit" form="cairn-edit-form" formaction="?/publish" class="btn btn-outline btn-primary btn-sm" disabled={busy}>
-          {#if publishing}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Publishing…{:else}Publish{/if}
+
+      <!-- The lifecycle pair, fenced off by their own hairline. -->
+      <div class="flex items-center gap-2 border-l border-[var(--cairn-card-border)] pl-3">
+        {#if data.pending}
+          <!-- Outline keeps Save the single solid primary action; Publish reads as its peer. -->
+          <button bind:this={publishButton} type="submit" form="cairn-edit-form" formaction="?/publish" class="btn btn-outline btn-primary btn-sm" disabled={busy}>
+            {#if publishing}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Publishing…{:else}Publish{/if}
+          </button>
+        {/if}
+        <!-- Save sleeps while the page is clean, agreeing with the band indicator; a new entry
+             stays saveable so it can be created as loaded. -->
+        <button type="submit" form="cairn-edit-form" class="btn btn-primary btn-sm" disabled={busy || (!dirty && !data.isNew)}>
+          {#if saving}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Saving…{:else}Save{/if}
         </button>
-      {/if}
-      <!-- Save sleeps while the page is clean, agreeing with the header indicator; a new entry
-           stays saveable so it can be created as loaded. -->
-      <button type="submit" form="cairn-edit-form" class="btn btn-primary btn-sm" disabled={busy || (!dirty && !data.isNew)}>
-        {#if saving}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Saving…{:else}Save{/if}
-      </button>
+      </div>
     </div>
   </div>
-</header>
+{/snippet}
 
+<!-- The whole edit surface remounts when navigation lands on another entry (see the entryKey
+     reset above); script-level state and the beforeNavigate registration sit outside the block,
+     so only the template rebuilds. -->
+{#key entryKey}
 <div class="sr-only" aria-live="polite">{politeMessage}</div>
 <div class="sr-only" aria-live="assertive">{assertiveMessage}</div>
 
-<!-- The feedback strip slides in just under the header: @starting-style drives the entry, so the
-     motion is pure CSS and the admin sheet's prefers-reduced-motion rule squashes it. -->
+<!-- The feedback strip slides in directly under the one header band: @starting-style drives the
+     entry, so the motion is pure CSS and the admin sheet's prefers-reduced-motion rule squashes it. -->
 {#if flash}
   <div class="cairn-feedback alert alert-success mb-4 text-sm transition-all duration-300 starting:-translate-y-2 starting:opacity-0">
     {flash}
@@ -633,29 +842,39 @@ 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'}
 >
   <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]'}>
-    {#if titleField}
+       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' ? '' : `mx-auto w-full ${surface === 'prose' ? 'max-w-[49rem]' : 'max-w-[56rem]'}`}>
+    <!-- The page's accessible name. The visible title is a borderless input, so a real heading
+         lives here for assistive tech (the band no longer carries one). -->
+    <h1 class="sr-only">{data.title}</h1>
+    {#if titleField && !zen}
       <!-- 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 +884,47 @@ 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}
-      >
+      {#if !zen}
+      <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"
@@ -727,12 +941,14 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           </button>
         {/snippet}
       </EditorToolbar>
+      {/if}
       <!-- The Write pane stays mounted while Preview shows, so CodeMirror keeps its caret, scroll
            position, and undo history across the tab switch. -->
       <div id="cairn-pane-write" role="tabpanel" aria-labelledby="cairn-tab-write" class:hidden={mode === 'preview'}>
         <MarkdownEditor
           bind:value={body}
           name="body"
+          {surface}
           registerInsert={(fn) => (insert = fn)}
           registerInsertLink={(fn) => (insertLink = fn)}
           registerGetSelection={(fn) => (getSelection = fn)}
@@ -793,41 +1009,135 @@ 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. -->
+      {#if !zen}
       <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-3.5">
+          <!-- The posture pair is one bordered segmented control: the shared border carries the
+               pick-one semantics, so no group label is needed (the spec considered and declined
+               them). The pressed check is the non-color state cue (WCAG 1.4.1): the segments share
+               weight outside the active one, so hue alone never carries the state. -->
+          <div
+            role="group"
+            aria-label="Editing surface"
+            class="bg-base-100 inline-flex items-center overflow-hidden rounded-lg border border-[var(--cairn-card-border)]"
+          >
+            <button
+              type="button"
+              class={segButtonClass(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="{segButtonClass(surface === 'markup')} border-l border-[var(--cairn-card-border)]"
+              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>
+          <!-- Focus mode and Typewriter are standalone check-and-tint toggles, no border. -->
+          <div class="flex items-center gap-0.5">
+            <button
+              type="button"
+              class={ftrToggleClass(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={ftrToggleClass(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>
+            <!-- Zen enters from the footer (and Ctrl+Shift+.); it reads as a peer writing-mode
+                 toggle here, but once on it hides the whole footer, so the chip carries the way out. -->
+            <button
+              type="button"
+              class={ftrToggleClass(zen)}
+              aria-pressed={zen}
+              onclick={() => setZen(!zen)}
+            >
+              {#if zen}<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}
+              Zen
+            </button>
+          </div>
+          <!-- Markdown help is a plain underlined link-styled button (a reference, not a control),
+               no border, no fill. -->
+          <button
+            type="button"
+            class="ftr-link cursor-pointer text-[var(--color-muted)] underline [text-decoration-color:color-mix(in_oklab,currentColor_40%,transparent)] [text-underline-offset:2px] hover:text-[var(--color-primary)]"
+            aria-haspopup="dialog"
+            onclick={() => helpDialog?.open()}
+          >
+            Markdown help
+          </button>
+        </div>
       </div>
+      {/if}
     </div>
   </div>
 
-  <!-- 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)]">
+  <!-- The details slide-over: a fixed panel below the band, the frontmatter groups behind a
+       Details/close header. It stays physically inside the edit form so its uncontrolled fields
+       submit; `hidden` when closed takes it out of the a11y tree and the tab order while its
+       display:none fields still post. role="region" with aria-label names it for assistive tech;
+       focus moves to the close button on open and back to the trigger on close (the
+       region-with-focus-management pattern). -->
+  <aside
+    role="region"
+    aria-label="Entry details"
+    hidden={!detailsOpen}
+    class="fixed right-0 top-16 bottom-0 z-30 w-[19rem] overflow-y-auto border-l border-[var(--cairn-card-border)] bg-base-100 p-4 shadow-[var(--cairn-shadow)]"
+  >
+    <!-- The panel header: the Details eyebrow and the close button. The eyebrow is a plain span
+         (not a legend), so the three group legends below still read as the only sidebar legends. -->
+    <div class="mb-3.5 flex items-center justify-between">
+      <span class="text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">Details</span>
+      <button
+        bind:this={detailsClose}
+        type="button"
+        class="btn btn-ghost btn-xs btn-square"
+        aria-label="Close details"
+        onclick={closeDetails}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+      </button>
+    </div>
+    <!-- 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="flex flex-col gap-6">
       {#if detailFields.length}
       <fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
-      <legend class={eyebrowClass}>Details</legend>
+      <!-- The panel header already shows the "Details" eyebrow, so this group's legend stays for
+           the screen-reader grouping but hides visually, the way the mockup carries it once. -->
+      <legend class="sr-only">Details</legend>
       {#each detailFields as field (field.name)}
         {#if field.type === 'textarea'}
           {@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 +1170,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 +1180,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}
@@ -904,6 +1214,27 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   </aside>
 </form>
 
+<!-- The floating zen chip (the mockup's .zen-chip): fixed top-right, it carries the two things the
+     WordPress/Ghost rule says never disappear under zen, the live save state and the way out. The
+     save-state span mirrors the band's, so the warning dot flips with `dirty` live; the Exit button
+     restores the chrome, with the Esc hint as the secondary cue. It renders only under zen. -->
+{#if zen}
+  <div class="cairn-zen-chip fixed right-[1.125rem] top-[0.875rem] z-40 flex items-center gap-2 rounded-xl border border-[var(--cairn-card-border)] bg-base-100 px-2.5 py-[5px] text-xs text-[var(--color-muted)] shadow-[var(--cairn-shadow)]">
+    <span class="cairn-save-state flex items-center gap-1.5" aria-live="off">
+      {#if dirty}<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-warning" aria-hidden="true"></span>{:else}<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-success" aria-hidden="true"></span>{/if}
+      {dirty ? 'Unsaved changes' : 'Saved'}
+    </span>
+    <span class="opacity-50" aria-hidden="true">·</span>
+    <button
+      type="button"
+      class="ftr-link inline-flex items-center cursor-pointer text-[var(--color-muted)] underline [text-decoration-color:color-mix(in_oklab,currentColor_40%,transparent)] [text-underline-offset:2px] hover:text-[var(--color-primary)]"
+      onclick={() => setZen(false)}
+    >
+      Exit zen<kbd class="ml-1.5 inline-block rounded border border-[var(--cairn-card-border)] px-1 text-[0.625rem] no-underline" aria-hidden="true">Esc</kbd>
+    </button>
+  </div>
+{/if}
+
 <!-- The toolbar's insert dialogs, mounted headless outside the edit form: each holds its own
      <form>, and a form nested in a form is invalid HTML the parser repairs by dropping the outer
      tag, which breaks the SSR'd document and hydration. The toolbar snippet's triggers drive them
@@ -924,6 +1255,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   onsubmitting={() => (leaving = true)}
 />
 <MarkdownHelpDialog bind:this={helpDialog} />
+<ShortcutsDialog bind:this={shortcutsDialog} />
 <DeleteDialog
   bind:this={deleteDialog}
   trigger={false}