@glw907/cairn-cms 0.53.0 → 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
@@ -22,6 +23,8 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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';
@@ -31,6 +34,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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';
@@ -58,6 +62,25 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
 
   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
@@ -104,13 +127,23 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
 
   // 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'));
   }
@@ -141,8 +174,73 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     // 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
@@ -150,7 +248,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
       // 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);
@@ -188,14 +286,21 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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) {
@@ -210,10 +315,38 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     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)]'}`;
+  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
@@ -239,6 +372,8 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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.
@@ -256,11 +391,35 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     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.
@@ -316,6 +475,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
       leaving = false;
       fieldsDirty = false;
       mode = 'write';
+      detailsOpen = false;
       previewHtml = '';
       previewFailed = false;
       removedLinks = [];
@@ -421,7 +581,13 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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') {
@@ -432,6 +598,24 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
       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.
@@ -483,48 +667,15 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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>
@@ -540,7 +691,39 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
         {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. -->
@@ -580,26 +763,34 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
           </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}
@@ -651,7 +842,6 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   onsubmit={onEditSubmit}
   oninput={onFormInput}
   oninvalidcapture={onFormInvalid}
-  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}
@@ -662,8 +852,11 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
        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}
+  <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).
@@ -691,6 +884,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
       role="group"
       aria-label="Editor"
     >
+      {#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
@@ -747,6 +941,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
           </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'}>
@@ -818,15 +1013,22 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
            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>
-        <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">
+        <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={footerToggleClass(surface === 'prose')}
+              class={segButtonClass(surface === 'prose')}
               aria-pressed={surface === 'prose'}
               onclick={() => setSurface('prose')}
             >
@@ -835,7 +1037,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
             </button>
             <button
               type="button"
-              class={footerToggleClass(surface === 'markup')}
+              class="{segButtonClass(surface === 'markup')} border-l border-[var(--cairn-card-border)]"
               aria-pressed={surface === 'markup'}
               onclick={() => setSurface('markup')}
             >
@@ -843,29 +1045,43 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
               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>
+          <!-- 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="btn btn-ghost btn-xs font-normal text-[var(--color-muted)]"
+            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()}
           >
@@ -873,20 +1089,44 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
           </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. -->
-    <!-- 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">
+  <!-- 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}
@@ -974,6 +1214,27 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   </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
@@ -994,6 +1255,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   onsubmitting={() => (leaving = true)}
 />
 <MarkdownHelpDialog bind:this={helpDialog} />
+<ShortcutsDialog bind:this={shortcutsDialog} />
 <DeleteDialog
   bind:this={deleteDialog}
   trigger={false}