@glw907/cairn-cms 0.37.1 → 0.40.0

package/dist/components/EditPage.svelte

@@ -2,18 +2,30 @@
 @component
 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 preview toggle persists per user in localStorage (spec §7.6).
+`?/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
+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,
+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 { beforeNavigate } from '$app/navigation';
   import CsrfField from './CsrfField.svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
-  import ComponentInsertDialog from './ComponentInsertDialog.svelte';
+  import EditorToolbar from './EditorToolbar.svelte';
+  import ComponentInsertDialog, { insertableDefs } from './ComponentInsertDialog.svelte';
   import LinkPicker from './LinkPicker.svelte';
+  import WebLinkDialog from './WebLinkDialog.svelte';
   import DeleteDialog from './DeleteDialog.svelte';
   import RenameDialog from './RenameDialog.svelte';
+  import MarkdownHelpDialog from './MarkdownHelpDialog.svelte';
   import { cairnLinkCompletionSource } from './link-completion.js';
-  import { unwrapCairnLink } from './markdown-format.js';
+  import { unwrapCairnLink, type FormatKind } from './markdown-format.js';
+  import { directiveLineKind } from './markdown-directives.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
   import type { EditData } from '../sveltekit/content-routes.js';
@@ -46,10 +58,138 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   // True from the moment the save form submits until the navigation it triggers replaces the page,
   // so the Save button shows a calm "Saving…" state instead of looking inert.
   let saving = $state(false);
-  let showPreview = $state(false);
+  // The same working state for the Publish button, which rides the edit form via formaction. The
+  // submit handler reads the submitter to flip the right one, so Save never reads "Saving…" while
+  // a publish is in flight.
+  let publishing = $state(false);
+  function onEditSubmit(e: SubmitEvent) {
+    const formaction = (e.submitter as HTMLButtonElement | null)?.getAttribute('formaction');
+    if (formaction === '?/publish') publishing = true;
+    else saving = true;
+  }
+  // Either in-flight submit disables both buttons, so a second click cannot fire a second POST
+  // while the first navigation is still pending.
+  const busy = $derived(saving || publishing);
+  // True once a non-edit POST (discard, delete, rename) submits. Those forms navigate the
+  // document without flipping busy, so without this the leave guard would fire mid-discard while
+  // the page is still dirty, which is the primary discard scenario.
+  let leaving = $state(false);
+
+  // Dirty tracking. The body compares against the text the page loaded with (or the edited body a
+  // blocked save returned, which seeded the editor); the uncontrolled sidebar fields flip a flag
+  // on any input event, and the navigation a save triggers reloads the page, which resets both.
+  const bodyDirty = $derived(body !== (form?.body ?? data.body));
+  let fieldsDirty = $state(false);
+  const dirty = $derived(bodyDirty || fieldsDirty);
+  // What the header's save-state indicator says.
+  const saveState = $derived(dirty ? 'Unsaved changes' : data.saved ? 'Saved' : '');
+  function onFormInput(e: Event) {
+    const target = e.target as Element | null;
+    // Two kinds of input event bubble through the form without being frontmatter edits: the link
+    // picker's search box (its dialog sits in the toolbar snippet) and the editing surface's
+    // contenteditable. Skipping the surface keeps body edits owned by bodyDirty, so undoing back
+    // to the committed text reads clean again.
+    if (target?.closest('dialog, #cairn-pane-write')) return;
+    fieldsDirty = true;
+  }
+
+  // The edit form element, for the Ctrl/Cmd+S shortcut's requestSubmit.
+  let editForm = $state<HTMLFormElement | null>(null);
+
+  // 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
+  // leaving does.
+  beforeNavigate((navigation) => {
+    if (dirty && !busy && !leaving && !confirm('You have unsaved changes. Leave anyway?'))
+      navigation.cancel();
+  });
+
+  // The browser half of the leave guard plus the page-wide save shortcut. The handlers read the
+  // current dirty and busy values at event time, so the effect itself tracks nothing and runs once.
+  $effect(() => {
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (dirty && !busy && !leaving) e.preventDefault();
+    };
+    // 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) => {
+      if (!(e.ctrlKey || e.metaKey)) return;
+      if (e.key.toLowerCase() !== '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
+      // nothing to save (a no-op save would still cut a pending branch), and a save from inside
+      // 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;
+      editForm?.requestSubmit();
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    window.addEventListener('keydown', onWindowKeydown);
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUnload);
+      window.removeEventListener('keydown', onWindowKeydown);
+    };
+  });
+  // The discard confirm, on the DeleteDialog pattern: a native <dialog> holding the POST form.
+  let discardDialog = $state<HTMLDialogElement | null>(null);
+  // Which pane the editor card shows. The toolbar's tablist drives it; Write is always the
+  // landing tab.
+  let mode = $state<'write' | 'preview'>('write');
   let previewHtml = $state('');
+  // True after a render call threw, so the preview pane can say so instead of going blank.
+  let previewFailed = $state(false);
   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
+  // reads it for the Text field's default.
+  let getSelection = $state.raw<() => string>(() => '');
+  // The editor's selection transform, registered by MarkdownEditor on mount; a no-op until then.
+  let format = $state.raw<(kind: FormatKind) => void>(() => {});
+  // A headless dialog instance, typed structurally over its exported open() (the linkPicker idiom).
+  type DialogHandle = { open: () => void };
+  // The toolbar's insert dialogs. Each holds its own <form>, so they mount outside the edit form
+  // (a form nested in a form is invalid HTML the parser repairs by dropping the outer tag, which
+  // breaks SSR and hydration); the toolbar snippet renders plain triggers that open them here.
+  let webLinkDialog = $state<DialogHandle | null>(null);
+  let linkPicker = $state<DialogHandle | null>(null);
+  let insertDialog = $state<DialogHandle | null>(null);
+  // The lifecycle dialogs, opened from the header's overflow menu.
+  let deleteDialog = $state<DialogHandle | null>(null);
+  let renameDialog = $state<DialogHandle | null>(null);
+  // The Markdown cheat sheet, opened from the editor card's footer.
+  let helpDialog = $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.
+  const hasComponents = $derived(insertableDefs(registry).length > 0);
+
+  // The header's status badge, in ConceptList's vocabulary: a pending entry reads Edited (or New
+  // when it has never been published); otherwise the live site matches and it reads Published.
+  const status = $derived.by(() => {
+    if (!data.pending) return 'Published';
+    return data.published ? 'Edited' : 'New';
+  });
+  const statusBadge = $derived.by(() => {
+    if (status === 'Edited') return 'badge-warning';
+    if (status === 'New') return 'badge-info';
+    return 'badge-ghost';
+  });
+
+  // The header 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);
+
+  // 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.
+  function pickAction(action: () => void) {
+    action();
+    if (actionsMenu?.matches(':popover-open')) actionsMenu.hidePopover();
+  }
 
   // The save guard's broken links, from the blocked action result. The fix unwraps a link in the
   // local body, which the bound editor reconciles, so the author re-saves clean.
@@ -74,24 +214,62 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   // A rename that hit a collision or an invalid slug returns form.renameError.
   const renameError = $derived(form?.renameError ?? '');
 
-  // After a save that links to a draft target, the redirect carries ?drafts=<tokens>.
+  // The entry this surface is editing. SvelteKit reuses the page component across a same-route
+  // navigation (the delete-refused and broken-link banners link entry to entry), so the per-entry
+  // state seeded at init would survive the hop and show entry A's body over entry B's data with
+  // the dirty indicator armed. When the identity changes, re-seed the state here; the {#key}
+  // block around the template remounts the DOM to match (CodeMirror with its undo history, the
+  // uncontrolled sidebar fields, any open dialog). The leave guard still protects the hop:
+  // beforeNavigate runs before the navigation completes, so it reads the old dirty value.
+  const entryKey = $derived(data.conceptId + '/' + data.id);
+  let seededKey = untrack(() => entryKey);
+  $effect.pre(() => {
+    const key = entryKey;
+    if (key === seededKey) return;
+    seededKey = key;
+    untrack(() => {
+      body = form?.body ?? data.body;
+      saving = false;
+      publishing = false;
+      leaving = false;
+      fieldsDirty = false;
+      mode = 'write';
+      previewHtml = '';
+      previewFailed = false;
+      removedLinks = [];
+    });
+  });
+
+  // After a save that links to a draft target, the redirect carries ?drafts=<tokens>. Re-read on
+  // an entry change too, since a client-side navigation swaps the search string under this effect.
   let draftWarning = $state('');
   $effect(() => {
+    void entryKey;
     const search = typeof location === 'undefined' ? '' : location.search;
     const drafts = new URLSearchParams(search).get('drafts');
     draftWarning = drafts ? drafts.split(',').filter(Boolean).join(', ') : '';
   });
 
-  // One persistent live region announces the current message, since a {#if}-gated role element
-  // inserted fresh is announced inconsistently. A polite region carries the success and draft
-  // notices; an assertive region carries the errors. The visible banners below keep their styling
-  // but drop their roles, so a message is announced once.
-  const politeMessage = $derived.by(() => {
-    if (draftWarning) return `Saved. This page links to unpublished pages: ${draftWarning}.`;
-    if (data.saved) return 'Saved.';
+  // The one transient feedback strip under the sticky header. The redirect flags are mutually
+  // exclusive in practice; the chain picks one so a surprise overlap still renders a single strip.
+  // A saved flash with a draft warning yields to the warning alert below, the prior behavior.
+  const flash = $derived.by(() => {
+    if (data.saved && !draftWarning)
+      return 'Saved. Your site keeps showing the published version until you publish.';
+    if (data.publishedFlash) return 'Published. The live site is rebuilding.';
+    if (data.discardedFlash) return 'Changes discarded.';
     if (data.renamed) return `The URL is now ${data.slug}.`;
     return '';
   });
+
+  // One persistent live region announces the current message, since a {#if}-gated role element
+  // inserted fresh is announced inconsistently. A polite region carries the success and draft
+  // notices (the flash, plus the draft notice the strip yields to); an assertive region carries
+  // the errors. The visible banners below keep their styling but drop their roles, so a message
+  // is announced once.
+  const politeMessage = $derived(
+    draftWarning ? `Saved. This page links to unpublished pages: ${draftWarning}.` : flash,
+  );
   const assertiveMessage = $derived.by(() => {
     if (data.error) return data.error;
     if (renameError) return renameError;
@@ -106,6 +284,17 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     return '';
   });
 
+  // The editor footer's word count, over the local body so it tracks every keystroke. Directive
+  // machinery lines and table rows are dropped first, so the count reads as the author's prose.
+  const countedBody = $derived(
+    body
+      .split('\n')
+      .filter((line) => directiveLineKind(line) === null && !/^\s*\|/.test(line))
+      .join('\n'),
+  );
+  const wordCount = $derived(countedBody.trim() ? countedBody.trim().split(/\s+/).length : 0);
+  const wordLabel = $derived(wordCount === 1 ? '1 word' : `${wordCount} words`);
+
   // The manifest-backed resolver turns a cairn: link into its live permalink in the preview, and
   // returns undefined for a missing target so the render step marks it cairn-broken-link.
   const resolveLink = $derived(manifestLinkResolver(data.linkTargets));
@@ -113,16 +302,38 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   // The [[ autocomplete source over the same link targets, handed to the editor's generic seam.
   const completionSources = $derived([cairnLinkCompletionSource(data.linkTargets)]);
 
-  const PREVIEW_KEY = 'cairn-admin:preview';
+  function setMode(m: 'write' | 'preview') {
+    mode = m;
+  }
+
+  // Preview is read-only, so the insert controls the page renders into the toolbar disable with
+  // the strip's own format buttons.
+  const insertDisabled = $derived(mode === 'preview');
 
+  // The editor card's keyboard shortcuts. Bound to the card so they fire wherever focus sits in the
+  // strip or the surface, without claiming the keys page-wide. The listener attaches
+  // programmatically: it is event delegation, not an interaction affordance, which Svelte's a11y
+  // rule cannot tell apart on a declarative handler.
+  let editorCard = $state<HTMLDivElement | null>(null);
   $effect(() => {
-    // Restore the per-user preference once, on mount.
-    showPreview = localStorage.getItem(PREVIEW_KEY) === '1';
+    const card = editorCard;
+    if (!card) return;
+    card.addEventListener('keydown', onEditorKeydown);
+    return () => card.removeEventListener('keydown', onEditorKeydown);
   });
-
-  function togglePreview() {
-    showPreview = !showPreview;
-    localStorage.setItem(PREVIEW_KEY, showPreview ? '1' : '0');
+  function onEditorKeydown(e: KeyboardEvent) {
+    if (!(e.ctrlKey || e.metaKey)) return;
+    const key = e.key.toLowerCase();
+    if (key === 'b') {
+      e.preventDefault();
+      format('bold');
+    } else if (key === 'i') {
+      e.preventDefault();
+      format('italic');
+    } else if (key === 'k') {
+      e.preventDefault();
+      webLinkDialog?.open();
+    }
   }
 
   // Render the design-accurate preview as the body changes, debounced. The site's render is the
@@ -131,16 +342,22 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   // async render call resolves after a newer one has started, the stale result is discarded.
   let previewRun = 0;
   $effect(() => {
-    if (!showPreview || !render) return;
+    if (mode !== 'preview' || !render) return;
     const md = body;
     const resolve = resolveLink; // tracked read in the effect body
     const run = ++previewRun;
     const handle = setTimeout(async () => {
       try {
         const html = await render(md, { resolve });
-        if (run === previewRun) previewHtml = html;
+        if (run === previewRun) {
+          previewHtml = html;
+          previewFailed = false;
+        }
       } catch {
-        if (run === previewRun) previewHtml = '';
+        if (run === previewRun) {
+          previewHtml = '';
+          previewFailed = true;
+        }
       }
     }, 150);
     return () => clearTimeout(handle);
@@ -150,38 +367,140 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   function str(v: unknown): string {
     return v == null ? '' : String(v);
   }
+
+  // The eyebrow legend each sidebar group opens with, one class string for all three.
+  const eyebrowClass =
+    'mb-2 text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
+
+  // The sidebar's grouping. The title field hoists above the editor card as the document title,
+  // and a boolean named draft becomes the Visibility group's Hidden toggle (both production
+  // adapters use that name); everything else is a Details field.
+  const titleField = $derived(data.fields.find((f) => f.name === 'title'));
+  const draftField = $derived(data.fields.find((f) => f.type === 'boolean' && f.name === 'draft'));
+  const detailFields = $derived(data.fields.filter((f) => f !== titleField && f !== draftField));
 </script>
 
-<header class="mb-6 flex items-center justify-between gap-2">
-  <div>
-    <h1 class="text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.title}</h1>
-    <p class="text-xs text-[var(--color-muted)]">{data.label}: {data.id}</p>
-  </div>
-  <div class="flex items-center gap-2">
-    <ComponentInsertDialog {registry} {insert} {icons} />
-    <LinkPicker linkTargets={data.linkTargets} insert={insertLink} />
-    <RenameDialog conceptId={data.conceptId} id={data.id} label={data.label} slug={data.slug} />
-    <DeleteDialog conceptId={data.conceptId} id={data.id} label={data.label} inboundLinks={data.inboundLinks} />
-    <button
-      type="button"
-      class="btn btn-sm btn-ghost"
-      aria-expanded={showPreview}
-      aria-controls="cairn-preview"
-      onclick={togglePreview}
-    >
-      {showPreview ? 'Hide preview' : 'Show preview'}
-    </button>
+<!-- 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>
+      <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>
+      {/if}
+      <!-- The save-state indicator eases in and out; the admin sheet's prefers-reduced-motion rule
+           squashes the transition for editors who asked for that. The dot is the quiet unsaved cue. -->
+      <span
+        class="cairn-save-state flex items-center gap-1.5 text-xs text-[var(--color-muted)] transition-opacity duration-300"
+        class:opacity-0={!saveState}
+        aria-live="off"
+      >
+        {#if dirty}<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-warning" aria-hidden="true"></span>{/if}
+        {saveState}
+      </span>
+    </div>
+    <div class="ml-auto flex items-center gap-2">
+      <!-- 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. -->
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-square"
+        aria-label="More actions"
+        title="More actions"
+        aria-expanded={actionsOpen}
+        popovertarget="cairn-edit-actions-menu"
+        style="anchor-name:--cairn-edit-actions"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12h.01" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12h.01" />
+        </svg>
+      </button>
+      <ul
+        bind:this={actionsMenu}
+        popover="auto"
+        id="cairn-edit-actions-menu"
+        style="position-anchor:--cairn-edit-actions"
+        ontoggle={(e) => (actionsOpen = 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)]"
+      >
+        {#if data.pending}
+          <li>
+            <button type="button" aria-haspopup="dialog" onclick={() => pickAction(() => discardDialog?.showModal())}>
+              Discard changes
+            </button>
+          </li>
+        {/if}
+        <li>
+          <button type="button" class="text-error" aria-haspopup="dialog" onclick={() => pickAction(() => deleteDialog?.open())}>
+            Delete
+          </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}
+        </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>
 </header>
 
 <div class="sr-only" aria-live="polite">{politeMessage}</div>
 <div class="sr-only" aria-live="assertive">{assertiveMessage}</div>
 
-{#if data.saved && !draftWarning}
-  <div class="alert alert-success mb-4 text-sm">Saved.</div>
-{/if}
-{#if data.renamed}
-  <div class="alert alert-success mb-4 text-sm">The URL is now {data.slug}.</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. -->
+{#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}
+  </div>
 {/if}
 {#if data.error}
   <div class="alert alert-error mb-4 text-sm">{data.error}</div>
@@ -221,35 +540,142 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   </div>
 {/if}
 
-<form method="POST" action="?/save" onsubmit={() => (saving = true)} class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
+<form
+  method="POST"
+  action="?/save"
+  id="cairn-edit-form"
+  bind:this={editForm}
+  onsubmit={onEditSubmit}
+  oninput={onFormInput}
+  class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6"
+>
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
   <div class="lg:order-1">
-    <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]">
-      <MarkdownEditor
-        bind:value={body}
-        name="body"
-        registerInsert={(fn) => (insert = fn)}
-        registerInsertLink={(fn) => (insertLink = fn)}
-        {completionSources}
+    {#if titleField}
+      <!-- The hoisted document title: large, borderless, in the display face, so the manuscript
+           reads as the protagonist. It submits as name="title", the same field as before. The
+           admin sheet gives it the editor's quiet focus hairline (see .cairn-doc-title there). -->
+      <input
+        class="cairn-doc-title mb-4 w-full border-0 bg-transparent text-3xl font-bold tracking-tight font-[family-name:var(--font-display)] placeholder:text-[var(--color-muted)]"
+        name="title"
+        value={str(data.frontmatter.title)}
+        placeholder={titleField.label}
+        aria-label={titleField.label}
+        required={titleField.required}
       />
-    </div>
-    {#if showPreview}
-      <section
-        id="cairn-preview"
-        aria-label="Preview"
-        class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 prose mt-4 max-w-none p-4 shadow-[var(--cairn-shadow)]"
-      >
-        {@html previewHtml}
-      </section>
     {/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. -->
+    <div
+      bind:this={editorCard}
+      class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]"
+      role="group"
+      aria-label="Editor"
+    >
+      <EditorToolbar {format} {mode} onMode={setMode}>
+        {#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. -->
+          {#if hasComponents}
+            <button
+              type="button"
+              class="btn btn-sm btn-ghost"
+              aria-haspopup="dialog"
+              aria-label="Insert block"
+              disabled={insertDisabled}
+              onclick={() => insertDialog?.open()}
+            >
+              Insert block
+            </button>
+          {/if}
+          <button
+            type="button"
+            class="btn btn-sm btn-ghost"
+            aria-haspopup="dialog"
+            aria-label="Web link (Ctrl+K)"
+            title="Web link (Ctrl+K)"
+            disabled={insertDisabled}
+            onclick={() => webLinkDialog?.open()}
+          >
+            Web link
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-ghost"
+            aria-haspopup="dialog"
+            aria-label="Link to page"
+            disabled={insertDisabled}
+            onclick={() => linkPicker?.open()}
+          >
+            Link to page
+          </button>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm btn-square"
+            disabled
+            aria-label="Image (coming soon)"
+            title="Image (coming soon)"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+            </svg>
+          </button>
+        {/snippet}
+      </EditorToolbar>
+      <!-- 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"
+          registerInsert={(fn) => (insert = fn)}
+          registerInsertLink={(fn) => (insertLink = fn)}
+          registerGetSelection={(fn) => (getSelection = fn)}
+          registerFormat={(fn) => (format = fn)}
+          {completionSources}
+        />
+      </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}
+        </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. -->
+      <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>
+    </div>
   </div>
 
   <aside class="lg:order-2 mt-4 lg:mt-0">
-    <fieldset class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-3 p-4 shadow-[var(--cairn-shadow)]">
-      <legend class="sr-only">Frontmatter</legend>
-      {#each data.fields as field (field.name)}
+    <!-- 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)]">
+      {#if detailFields.length}
+      <fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
+      <legend class={eyebrowClass}>Details</legend>
+      {#each detailFields as field (field.name)}
         {#if field.type === 'textarea'}
           {@const f = field as TextareaField}
           <label class="flex flex-col gap-1">
@@ -306,9 +732,88 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
           </label>
         {/if}
       {/each}
-      <button type="submit" class="btn btn-primary mt-3" disabled={saving}>
-        {#if saving}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Saving…{:else}Save{/if}
-      </button>
-    </fieldset>
+      </fieldset>
+      {/if}
+      {#if draftField}
+      <fieldset class="m-0 flex min-w-0 flex-col gap-1 border-0 p-0">
+      <legend class={eyebrowClass}>Visibility</legend>
+        <label class="label cursor-pointer justify-start gap-2">
+          <input class="checkbox checkbox-sm" type="checkbox" name="draft" checked={data.frontmatter.draft === true} />
+          <span class="text-sm">Hidden</span>
+        </label>
+        <p class="text-xs text-[var(--color-muted)]">Hidden entries stay off the site's lists and feeds, even when published.</p>
+      </fieldset>
+      {/if}
+      <fieldset class="m-0 flex min-w-0 flex-col gap-1 border-0 p-0">
+      <legend class={eyebrowClass}>Address</legend>
+        <div class="flex items-center justify-between gap-2">
+          <code class="min-w-0 break-all text-xs text-[var(--color-muted)]">/{data.slug}</code>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm shrink-0"
+            aria-haspopup="dialog"
+            onclick={() => renameDialog?.open()}
+          >
+            Change URL
+          </button>
+        </div>
+      </fieldset>
+    </div>
   </aside>
 </form>
+
+<!-- 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
+     through their exported open(). -->
+<ComponentInsertDialog bind:this={insertDialog} trigger={false} {registry} {insert} {icons} />
+<WebLinkDialog bind:this={webLinkDialog} trigger={false} insert={insertLink} selection={getSelection} />
+<LinkPicker bind:this={linkPicker} trigger={false} linkTargets={data.linkTargets} insert={insertLink} />
+
+<!-- The lifecycle dialogs, mounted headless: the header's overflow menu drives them through their
+     exported open(). Their POST forms flip the leaving flag so the leave guard stands down. -->
+<RenameDialog
+  bind:this={renameDialog}
+  trigger={false}
+  conceptId={data.conceptId}
+  id={data.id}
+  label={data.label}
+  slug={data.slug}
+  onsubmitting={() => (leaving = true)}
+/>
+<MarkdownHelpDialog bind:this={helpDialog} />
+<DeleteDialog
+  bind:this={deleteDialog}
+  trigger={false}
+  conceptId={data.conceptId}
+  id={data.id}
+  label={data.label}
+  inboundLinks={data.inboundLinks}
+  pending={data.pending}
+  onsubmitting={() => (leaving = true)}
+/>
+
+{#if data.pending}
+  <dialog class="modal" aria-labelledby="cairn-discard-dialog-title" bind:this={discardDialog}>
+    <div class="modal-box">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 id="cairn-discard-dialog-title" class="text-base font-semibold">Discard the unpublished changes?</h2>
+        <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={() => discardDialog?.close()}>✕</button>
+      </div>
+      {#if data.published}
+        <p class="mb-3 text-sm">This restores the live version. The changes cannot be recovered.</p>
+      {:else}
+        <p class="mb-3 text-sm">This entry has never been published, so discarding deletes it. Nothing can be recovered.</p>
+      {/if}
+      <form method="POST" action="?/discard" class="flex justify-end gap-2" onsubmit={() => (leaving = true)}>
+        <CsrfField />
+        <button type="button" class="btn btn-sm" onclick={() => discardDialog?.close()}>Cancel</button>
+        <button type="submit" class="btn btn-sm btn-error">Discard</button>
+      </form>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button tabindex="-1" aria-label="Close">close</button>
+    </form>
+  </dialog>
+{/if}
+{/key}