@glw907/cairn-cms 0.59.0 → 0.60.1

package/dist/components/EditPage.svelte

@@ -16,953 +16,705 @@ pending), and an overflow menu for Discard and Delete. One feedback strip under
 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 SquarePenIcon from '@lucide/svelte/icons/square-pen';
-  import LinkIcon from '@lucide/svelte/icons/link';
-  import FileSymlinkIcon from '@lucide/svelte/icons/file-symlink';
-  import PanelRightIcon from '@lucide/svelte/icons/panel-right';
-  import ImageIcon from '@lucide/svelte/icons/image';
-  import { useTopbar } from './topbar-context.js';
-  import CsrfField from './CsrfField.svelte';
-  import MarkdownEditor from './MarkdownEditor.svelte';
-  import EditorToolbar from './EditorToolbar.svelte';
-  import ComponentInsertDialog, { insertableDefs, hasSchema } from './ComponentInsertDialog.svelte';
-  import LinkPicker from './LinkPicker.svelte';
-  import WebLinkDialog from './WebLinkDialog.svelte';
-  import MediaInsertPopover from './MediaInsertPopover.svelte';
-  import MediaHeroField from './MediaHeroField.svelte';
-  import MediaFigureControl from './MediaFigureControl.svelte';
-  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 {
-    findMediaImagesNeedingAlt,
-    unwrapCairnLink,
-    unwrapFigure,
-    updateFigure,
-    wrapImageInFigure,
-    type FigureAtImage,
-    type FigureRole,
-    type FormatKind,
-  } from './markdown-format.js';
-  import { buildPreviewDoc, deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
-  import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
-  import type { ComponentRegistry, ComponentDef } from '../render/registry.js';
-  import { parseComponent, componentRoundTripSafety } from '../render/component-grammar.js';
-  import type { IconSet } from '../render/glyph.js';
-  import type { ContentFormFailure, EditData } from '../sveltekit/content-routes.js';
-  import type { TextareaField, TagsField, FreeTagsField, ImageValue } from '../content/types.js';
-  import type { LinkResolve } from '../content/links.js';
-  import { manifestLinkResolver } from '../content/manifest.js';
-  import type { MediaResolve } from '../render/resolve-media.js';
-  import { manifestMediaResolver } from '../render/resolve-media.js';
-  import type { MediaEntry } from '../media/manifest.js';
-  import { mediaLibraryEntry } from '../media/library-entry.js';
-
-  interface Props {
-    /** The edit load's data, plus the site name for the heading. */
-    data: EditData & { siteName: string };
-    /** The site's component registry, for the insert palette. */
-    registry?: ComponentRegistry;
-    /** The site's design-accurate render pipeline; the preview pane renders its output, which the floored pipeline already sanitized. */
-    render?: (
-      md: string,
-      opts?: { stagger?: boolean; resolve?: LinkResolve; resolveMedia?: MediaResolve },
-    ) => string | Promise<string>;
-    /** The site's icon set, for the guided form's icon fields. */
-    icons?: IconSet;
-    /** The last content action's failure: the save guard's broken links, the delete guard's
-     *  inbound linkers, or a rename refusal, each carrying the shared `error` summary. */
-    form?: ContentFormFailure | null;
-  }
-
-  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
-  // body, so it falls back to the committed data.body. untrack() captures the initial value without
-  // subscribing to future prop changes.
-  let body = $state(untrack(() => form?.body ?? data.body));
-  // 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);
-  // 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;
+<script lang="ts">import { flushSync, untrack, getContext } from "svelte";
+import { beforeNavigate } from "$app/navigation";
+import { deserialize } from "$app/forms";
+import { page } from "$app/state";
+import BlocksIcon from "@lucide/svelte/icons/blocks";
+import SquarePenIcon from "@lucide/svelte/icons/square-pen";
+import LinkIcon from "@lucide/svelte/icons/link";
+import FileSymlinkIcon from "@lucide/svelte/icons/file-symlink";
+import PanelRightIcon from "@lucide/svelte/icons/panel-right";
+import ImageIcon from "@lucide/svelte/icons/image";
+import { useTopbar } from "./topbar-context.js";
+import CsrfField from "./CsrfField.svelte";
+import MarkdownEditor from "./MarkdownEditor.svelte";
+import EditorToolbar from "./EditorToolbar.svelte";
+import ComponentInsertDialog, { insertableDefs, hasSchema } from "./ComponentInsertDialog.svelte";
+import LinkPicker from "./LinkPicker.svelte";
+import WebLinkDialog from "./WebLinkDialog.svelte";
+import MediaInsertPopover from "./MediaInsertPopover.svelte";
+import MediaHeroField from "./MediaHeroField.svelte";
+import MediaFigureControl from "./MediaFigureControl.svelte";
+import DeleteDialog from "./DeleteDialog.svelte";
+import RenameDialog from "./RenameDialog.svelte";
+import MarkdownHelpDialog from "./MarkdownHelpDialog.svelte";
+import ShortcutsDialog from "./ShortcutsDialog.svelte";
+import TidyReview from "./TidyReview.svelte";
+import SparklesIcon from "@lucide/svelte/icons/sparkles";
+import { validateTidy, TIDY_REJECTION_MESSAGE } from "./tidy-validate.js";
+import { cairnLinkCompletionSource } from "./link-completion.js";
+import {
+  findMediaImagesNeedingAlt,
+  unwrapCairnLink,
+  unwrapFigure,
+  updateFigure,
+  wrapImageInFigure
+} from "./markdown-format.js";
+import { buildPreviewDoc, deviceLabel, previewDevice, previewDevices } from "./preview-doc.js";
+import { directiveLineKind, findInlineDirectives } from "./markdown-directives.js";
+import { parseComponent, componentRoundTripSafety } from "../render/component-grammar.js";
+import { manifestLinkResolver } from "../content/manifest.js";
+import { manifestMediaResolver } from "../render/resolve-media.js";
+import { mediaLibraryEntry } from "../media/library-entry.js";
+import { CSRF_CONTEXT_KEY } from "./csrf-context.js";
+let { data, registry, render, icons, form } = $props();
+const TIDY_CLIENT_TIMEOUT_MS = 45e3;
+const topbar = useTopbar();
+$effect(() => {
+  if (!topbar) return;
+  topbar.desk = desk;
+  topbar.zen = zen;
+  return () => {
+    topbar.desk = null;
+    topbar.zen = false;
+  };
+});
+let body = $state(untrack(() => form?.body ?? data.body));
+let saving = $state(false);
+let publishing = $state(false);
+function onEditSubmit(e) {
+  const formaction = e.submitter?.getAttribute("formaction");
+  if (formaction === "?/publish") publishing = true;
+  else saving = true;
+  void commitPendingDictionary();
+}
+const busy = $derived(saving || publishing);
+let leaving = $state(false);
+const bodyDirty = $derived(body !== (form?.body ?? data.body));
+let fieldsDirty = $state(false);
+const dirty = $derived(bodyDirty || fieldsDirty);
+const saveState = $derived(dirty ? "Unsaved changes" : data.saved ? "Saved" : "");
+function onFormInput(e) {
+  const target = e.target;
+  if (target?.closest("dialog, #cairn-pane-write")) return;
+  fieldsDirty = true;
+}
+function markFieldsDirty() {
+  fieldsDirty = true;
+}
+let editForm = $state(null);
+let publishButton = $state(null);
+function onFormInvalid(e) {
+  const target = e.target;
+  if (target?.closest("aside")) {
+    if (!detailsOpen) flushSync(() => detailsOpen = true);
+    return;
   }
-  // Mark the details fields dirty without a form input event. The hero field writes its value to
-  // hidden inputs, whose programmatic value changes do not fire the form's oninput, so it signals
-  // dirty through this helper instead.
-  function markFieldsDirty() {
-    fieldsDirty = true;
+  if (mode === "write") return;
+  flushSync(() => mode = "write");
+}
+beforeNavigate((navigation) => {
+  if (navigation.willUnload) {
+    if (dirty && !busy && !leaving) navigation.cancel();
+    return;
   }
-
-  // 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 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));
+  if (dirty && !busy && !leaving && !confirm("You have unsaved changes. Leave anyway?"))
+    navigation.cancel();
+});
+$effect(() => {
+  const onBeforeUnload = (e) => {
+    if (dirty && !busy && !leaving) e.preventDefault();
+  };
+  const onWindowKeydown = (e) => {
+    if (e.key === "Escape" && (detailsOpen || zen)) {
+      const inDialog2 = !!e.target?.closest?.("dialog");
+      if (inDialog2) return;
+      e.preventDefault();
+      if (detailsOpen) closeDetails();
+      else setZen(false);
       return;
     }
-    if (mode === 'write') return;
-    flushSync(() => (mode = 'write'));
-  }
-
-  // The SvelteKit half of the leave guard. Registered at component init (beforeNavigate wraps
-  // onMount, so it must run synchronously here) and auto-unregistered on destroy. A submit's own
-  // navigation passes through because busy flips before it starts, and a non-edit POST's because
-  // leaving does.
-  beforeNavigate((navigation) => {
-    // A full-page unload (refresh, tab close, external link): per SvelteKit semantics, cancel()
-    // on a leave navigation is what asks the browser for its native dialog, so no confirm()
-    // here or two prompts would stack. The beforeunload listener below is deliberate
-    // belt-and-braces, not the dialog's source.
-    if (navigation.willUnload) {
-      if (dirty && !busy && !leaving) navigation.cancel();
+    if (!(e.ctrlKey || e.metaKey)) return;
+    const key = e.key.toLowerCase();
+    const inDialog = !!e.target?.closest?.("dialog");
+    if (!e.shiftKey && !e.altKey && e.key === "/") {
+      e.preventDefault();
+      if (inDialog) return;
+      shortcutsDialog?.open();
       return;
     }
-    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) => {
-      // 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;
-      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.
+    if (e.shiftKey && key === "s") {
+      e.preventDefault();
+      if (busy || inDialog || !data.pending) return;
+      editForm?.requestSubmit(publishButton);
+      return;
+    }
+    if (e.altKey && key === "p") {
       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 (inDialog) 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');
-  // Preview is read-only, so the insert controls the page renders into the toolbar disable with the
-  // strip's own format buttons. Declared here (above the Edit-block derivations that read it) so it
-  // is in scope before its first use.
-  const insertDisabled = $derived(mode === 'preview');
-  let previewHtml = $state('');
-  // True after a render call threw, so the preview pane can say so instead of going blank.
-  let previewFailed = $state(false);
-  // The preview frame's device width, a per-browser preference under its own key (the legacy
-  // 'cairn-admin:preview' key from the removed split-pane preview stays untouched). Desktop is
-  // the default; the storage read sits in an effect so it never runs during SSR, and it tracks
-  // nothing reactive, so it runs once.
-  const deviceStorageKey = 'cairn-editor-preview-device';
-  let device = $state<PreviewDeviceId>('desktop');
-  $effect(() => {
-    const stored = localStorage.getItem(deviceStorageKey);
-    if (previewDevices.some((d) => d.id === stored)) device = stored as PreviewDeviceId;
-  });
-  function setDevice(id: PreviewDeviceId) {
-    device = id;
-    localStorage.setItem(deviceStorageKey, id);
-  }
-  // The writing modes (focus, typewriter) 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;
-    localStorage.setItem(focusStorageKey, String(on));
-  }
-  function setTypewriter(on: boolean) {
-    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();
+      setMode(mode === "write" ? "preview" : "write");
+      return;
     }
+    if (e.shiftKey && key === "f") {
+      e.preventDefault();
+      if (inDialog) return;
+      setFocusMode(!focusMode);
+      return;
+    }
+    if (e.shiftKey && !e.altKey && e.key === ".") {
+      e.preventDefault();
+      if (inDialog) return;
+      setZen(!zen);
+      return;
+    }
+    if (!e.shiftKey && !e.altKey && e.key === ".") {
+      e.preventDefault();
+      if (inDialog) return;
+      toggleDetails();
+      return;
+    }
+    if (e.shiftKey || e.altKey) return;
+    if (key !== "s") return;
+    e.preventDefault();
+    if (busy) return;
+    if (!dirty && !data.isNew) return;
+    if (inDialog) return;
+    editForm?.requestSubmit();
+  };
+  window.addEventListener("beforeunload", onBeforeUnload);
+  window.addEventListener("keydown", onWindowKeydown);
+  return () => {
+    window.removeEventListener("beforeunload", onBeforeUnload);
+    window.removeEventListener("keydown", onWindowKeydown);
+  };
+});
+let discardDialog = $state(null);
+let mode = $state("write");
+let tidyMode = $state(false);
+let tidyBusy = $state(false);
+const insertDisabled = $derived(mode === "preview" || tidyMode);
+let previewHtml = $state("");
+let previewFailed = $state(false);
+const deviceStorageKey = "cairn-editor-preview-device";
+let device = $state("desktop");
+$effect(() => {
+  const stored = localStorage.getItem(deviceStorageKey);
+  if (previewDevices.some((d) => d.id === stored)) device = stored;
+});
+function setDevice(id) {
+  device = id;
+  localStorage.setItem(deviceStorageKey, id);
+}
+const focusStorageKey = "cairn-editor-focus-mode";
+const typewriterStorageKey = "cairn-editor-typewriter";
+const surfaceStorageKey = "cairn-editor-surface";
+const zenStorageKey = "cairn-editor-zen";
+const spellcheckStorageKey = "cairn-editor-spellcheck";
+let focusMode = $state(false);
+let typewriter = $state(false);
+let spellcheck = $state(true);
+let zen = $state(false);
+let surface = $state("prose");
+$effect(() => {
+  focusMode = localStorage.getItem(focusStorageKey) === "true";
+  typewriter = localStorage.getItem(typewriterStorageKey) === "true";
+  zen = localStorage.getItem(zenStorageKey) === "true";
+  if (localStorage.getItem(surfaceStorageKey) === "markup") surface = "markup";
+  spellcheck = localStorage.getItem(spellcheckStorageKey) !== "false";
+});
+function setFocusMode(on) {
+  focusMode = on;
+  localStorage.setItem(focusStorageKey, String(on));
+}
+function setTypewriter(on) {
+  typewriter = on;
+  localStorage.setItem(typewriterStorageKey, String(on));
+}
+function setSpellcheck(on) {
+  spellcheck = on;
+  localStorage.setItem(spellcheckStorageKey, String(on));
+}
+const pendingAdditions = /* @__PURE__ */ new Set();
+const csrf = getContext(CSRF_CONTEXT_KEY);
+async function commitPendingDictionary() {
+  if (pendingAdditions.size === 0) return;
+  const words = [...pendingAdditions];
+  try {
+    const res = await fetch(`/admin/${data.conceptId}/${data.id}?/addDictionaryWord`, {
+      method: "POST",
+      redirect: "manual",
+      headers: { "Content-Type": "text/plain", "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: JSON.stringify({ words })
+    });
+    if (res.type === "opaqueredirect" || res.status === 0) return;
+    const result = deserialize(await res.text());
+    if (result.type !== "success") return;
+    const merged = result.data?.words;
+    if (!Array.isArray(merged)) return;
+    const committed = new Set(merged.filter((w) => typeof w === "string").map((w) => w.toLowerCase()));
+    for (const w of words) if (committed.has(w.toLowerCase())) pendingAdditions.delete(w);
+  } catch {
   }
-  // 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)]'}`;
+}
+function setSurface(posture) {
+  surface = posture;
+  localStorage.setItem(surfaceStorageKey, posture);
+}
+function setZen(on) {
+  const surface2 = editorCard?.querySelector(".cm-editor");
+  const focusHides = on && !surface2?.contains(document.activeElement);
+  zen = on;
+  localStorage.setItem(zenStorageKey, String(on));
+  if (focusHides) {
+    flushSync();
+    editorCard?.querySelector(".cm-content")?.focus();
   }
-  const activeDevice = $derived(previewDevice(device));
-  // The iframe document around the rendered html: the site's stylesheets from the adapter's
-  // preview knob, or a styleless document (behind the hint below) when the site sets none.
-  const previewDoc = $derived(buildPreviewDoc(previewHtml, data.preview));
-  let insert = $state.raw<(text: string) => void>(() => {});
-  // The editor's range-replace seam, registered by MarkdownEditor on mount; the dialog's Update
-  // routes through it to overwrite an edited block's source span. A no-op until then.
-  let replaceRange = $state.raw<(from: number, to: number, text: string) => void>(() => {});
-  // The editor's select-range seam, registered by MarkdownEditor on mount; the needs-alt notice's
-  // jump control routes through it to land the author on an image that lacks alt. A no-op until then.
-  let selectRange = $state.raw<(from: number, to: number) => 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>(() => {});
-
-  // The media insert seams, registered by MarkdownEditor on mount, mirroring the range holders
-  // above. The popover drives the optimistic upload loop through them: the caret anchor, the focus
-  // restore, the placeholder api, and the direct-insert path for a picked image. The placeholder
-  // api type is referenced inline (import('...').Type), never a static `import type ... from`, so
-  // no static edge to the dynamically-imported editor-placeholder module sits in this component
-  // (the editor-boundary test bars that edge by a textual `from` scan).
-  let caretCoords = $state.raw<() => { left: number; right: number; top: number; bottom: number } | null>(
-    () => null,
-  );
-  let focusEditor = $state.raw<() => void>(() => {});
-  let placeholders = $state.raw<import('./editor-placeholder.js').ImagePlaceholderApi | null>(null);
-  let insertImageFn = $state.raw<(alt: string, ref: string) => void>(() => {});
-
-  // A no-op placeholder api so the editor object handed to the popover is never null before the
-  // editor registers its real one on mount.
-  const noopPlaceholders: import('./editor-placeholder.js').ImagePlaceholderApi = {
-    begin: () => 0,
-    progress: () => {},
-    resolveTo: () => {},
-    cancel: () => {},
-  };
-
-  // The editor object the popover drives, delegating through the holders so the latest registered
-  // function is always used (the holders start as no-ops and are replaced on mount).
-  const editorApi = $derived({
-    caretCoords: () => caretCoords(),
-    focusEditor: () => focusEditor(),
-    placeholders: placeholders ?? noopPlaceholders,
-    insertImage: (alt: string, ref: string) => insertImageFn(alt, ref),
-  });
-
-  // The headless media insert popover, opened from the toolbar control, paste, or drop.
-  let mediaPopover = $state<MediaInsertPopover | null>(null);
-
-  // The rendered hero fields' refs (for the needs-alt notice's "Add alt text" action, which focuses
-  // the field's own alt input) and their reported needs-alt signals, keyed by field name. A hero is
-  // a frontmatter value with no body offset, so its needs-alt signal comes from the field, not the
-  // body scanner (findMediaImagesNeedingAlt), and its remediation focuses the alt input, never a
-  // source range (selectRange). The records are keyed by field name; `data.fields` is static for the
-  // page's lifetime, so a key never goes stale (no per-key cleanup on unmount is needed).
-  let heroFieldRefs = $state<Record<string, MediaHeroField>>({});
-  let heroNeedsAlt = $state<Record<string, boolean>>({});
-
-  // The server-owned records from each successful upload this session. They ride the save form as
-  // the hidden `media` field, so the save action merges them into media.json.
-  let uploadedRecords = $state<MediaEntry[]>([]);
-  // 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);
-  // The insert dialog binds the full instance, not the bare DialogHandle: the Edit-block control
-  // drives editComponent(def, values, range) on it, beyond the shared open().
-  let insertDialog = $state<ComponentInsertDialog | 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);
-  // 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.
-  const hasComponents = $derived(insertableDefs(registry).length > 0);
-
-  // The directive container at the editor caret, reported by MarkdownEditor whenever it changes
-  // (null outside any container). The Edit-block control resolves it against the registry and the
-  // round-trip safety gate below; its identity is the key the async gate guards against a stale
-  // result. The reporter's name+markdown+from+to shape; declared locally because MarkdownEditor's
-  // matching interface is not exported.
-  type CaretComponent = { name: string | null; markdown: string; from: number; to: number };
-  let caretComponent = $state<CaretComponent | null>(null);
-
-  // The media image at the editor caret, reported by MarkdownEditor whenever it changes (null off any
-  // media image). The Figure control reads it to wrap a bare image or edit an existing figure; it
-  // writes source through the replaceRange seam. The figure dialog is mounted headless below.
-  let mediaAtCaret = $state<FigureAtImage | null>(null);
-  // The figure control's host <dialog>, opened by the toolbar control. Mounted outside the edit form
-  // (a form nested in a form is invalid HTML), the Edit-block dialog pattern.
-  let figureDialog = $state<HTMLDialogElement | null>(null);
-  // Whether the Figure control is available: a media image sits at the caret and Preview is not
-  // showing (the insert controls disable together with the Write surface). The control is always
-  // rendered (it never mounts on caret move); only its enabled state changes.
-  const figureAvailable = $derived(mediaAtCaret != null && !insertDisabled);
-  const figureLabel = $derived(
-    figureAvailable
-      ? mediaAtCaret?.figure
-        ? 'Edit the figure at the cursor'
-        : 'Wrap the image at the cursor in a figure'
-      : 'Place the cursor on an image to add a figure',
-  );
-  // Whether the image at the caret is decorative (empty or whitespace-only alt). The token came from
-  // a parsed image node, so the alt is the source between `![` and the closing `]` before `](`. An
-  // empty alt is the needs-alt signal; the figure control surfaces it and the decorative-plus-caption
-  // warning. Derived from the reported token so it tracks the caret.
-  const figureDecorative = $derived.by(() => {
-    if (!mediaAtCaret) return false;
-    const token = body.slice(mediaAtCaret.imageFrom, mediaAtCaret.imageTo);
-    const match = /^!\[([\s\S]*?)\]\(/.exec(token);
-    return (match?.[1] ?? '').trim() === '';
-  });
-  // A def is actionable for guided edit when it has a schema (the same notion the insert catalog
-  // lists by): a template-only def has no form to re-open into. Reuses the dialog's exported
-  // hasSchema so the two surfaces can never drift on what counts as editable.
-  function editableDef(name: string | null): ComponentDef | undefined {
-    if (!name) return undefined;
-    const def = registry?.get(name);
-    if (!def) return undefined;
-    return hasSchema(def) ? def : undefined;
+}
+function segButtonClass(pressed) {
+  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)]"}`;
+}
+function ftrToggleClass(pressed) {
+  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));
+const previewDoc = $derived(buildPreviewDoc(previewHtml, data.preview));
+let insert = $state.raw(() => {
+});
+let replaceRange = $state.raw(() => {
+});
+let selectRange = $state.raw(() => {
+});
+let insertLink = $state.raw(() => {
+});
+let getSelection = $state.raw(() => "");
+let getSelectionRange = $state.raw(() => null);
+let format = $state.raw(() => {
+});
+let tidyApi = $state.raw(null);
+let undoEditor = $state.raw(() => {
+});
+let tidyReview = $state.raw(null);
+let tidyMessage = $state(null);
+let tidyNoop = $state(false);
+let tidyApplied = $state(false);
+let tidyController = null;
+let tidyWorkingDialog = $state(null);
+let tidyNoopDialog = $state(null);
+let tidyMessageDialog = $state(null);
+$effect(() => {
+  if (tidyBusy) tidyWorkingDialog?.showModal();
+});
+$effect(() => {
+  if (tidyNoop) tidyNoopDialog?.showModal();
+});
+$effect(() => {
+  if (tidyMessage) tidyMessageDialog?.showModal();
+});
+const tidyEnabled = $derived(data.tidy?.enabled ?? false);
+async function runTidy() {
+  if (!tidyEnabled || tidyBusy || tidyMode) return;
+  tidyMessage = null;
+  tidyNoop = false;
+  tidyApplied = false;
+  const selected = getSelection();
+  const range = getSelectionRange();
+  const useSelection = selected.length > 0;
+  let offset = 0;
+  if (range) {
+    offset = range.from;
+  } else if (useSelection) {
+    offset = Math.max(body.indexOf(selected), 0);
   }
-  // The resolved editability: the def, the source range, and the validated markdown when the caret
-  // sits on a known, schema-bearing component whose round-trip safety check passed for the CURRENT
-  // caret; null otherwise. The def, range, and markdown are captured from one caretComponent
-  // snapshot, so editBlock() never mixes a newer markdown with an older range. The Edit-block
-  // control enables only when this is set.
-  let editable = $state<{ def: ComponentDef; range: { from: number; to: number }; markdown: string } | null>(null);
-  // Why edit is unavailable, distinguishing "not on a component" from "on an unsafe one" so the
-  // disabled tooltip is honest. 'none' covers both no-caret-component and an unknown/template-only
-  // one (no guided form either way); 'unsafe' is a known component the safety gate refused.
-  let editReason = $state<'none' | 'unsafe'>('none');
-  // Resolve editability when the caret-component changes, async-safe. componentRoundTripSafety is
-  // async, so a slow check could resolve after a newer caret move; guard latest-wins on the
-  // caretComponent identity (the EditPage preview-debounce pattern), only applying a result when
-  // the caret has not moved since the check started. A block whose check did not pass for the
-  // current caret never enables edit.
-  $effect(() => {
-    const current = caretComponent;
-    const def = editableDef(current?.name ?? null);
-    if (!current || !def) {
-      editable = null;
-      editReason = 'none';
+  const text = useSelection ? selected : body;
+  tidyBusy = true;
+  tidyController = new AbortController();
+  const timer = setTimeout(() => tidyController?.abort(), TIDY_CLIENT_TIMEOUT_MS);
+  try {
+    const res = await fetch(`/admin/${data.conceptId}/${data.id}?/tidy`, {
+      method: "POST",
+      redirect: "manual",
+      headers: { "Content-Type": "text/plain", "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: JSON.stringify({ text, scope: useSelection ? "selection" : "document" }),
+      signal: tidyController.signal
+    });
+    if (res.type === "opaqueredirect" || res.status === 0) {
+      tidyMessage = "Your session expired. Sign in again to tidy.";
       return;
     }
-    let stale = false;
-    void componentRoundTripSafety(current.markdown, def)
-      .then((result) => {
-        if (stale || caretComponent !== current) return;
-        if (result.safe) {
-          editable = { def, range: { from: current.from, to: current.to }, markdown: current.markdown };
-          editReason = 'none';
-        } else {
-          editable = null;
-          editReason = 'unsafe';
-        }
-      })
-      .catch(() => {
-        // A parse throw during the safety check must never leave a stale block enabled. Guarded by
-        // the same latest-wins identity, fall back to the safe default of no editable block.
-        if (stale || caretComponent !== current) return;
-        editable = null;
-        editReason = 'none';
-      });
-    return () => {
-      stale = true;
-    };
-  });
-  // The Edit-block control's accessible label and tooltip: a plain reason in each state. Enabled
-  // names the action; the two disabled reasons are honest about why.
-  const editBlockLabel = $derived(
-    editable
-      ? 'Edit the component at the cursor'
-      : editReason === 'unsafe'
-        ? "This block can't be edited in the form. Edit it as markdown."
-        : 'Place the cursor in a component to edit it',
-  );
-  // Whether the Edit-block control is unavailable: either Preview hides the Write surface, or the
-  // caret is not on a safe, schema-bearing component. The control stays focusable and announced in
-  // this state (aria-disabled, not the native disabled attribute), so its reason reaches assistive
-  // technology; the dead click is made inert in editBlock().
-  const editBlockUnavailable = $derived(insertDisabled || !editable);
-  // Activate edit: parse the block into form values, then open the dialog in edit mode over the
-  // stored source range. Guarded by editable AND the preview-mode disable, so the control is inert
-  // unless the gate passed and the editor is on the Write tab. The def, range, and markdown all come
-  // from the one editable snapshot, so a newer caret markdown is never paired with an older range.
-  async function editBlock() {
-    if (insertDisabled || !editable) return;
-    const values = await parseComponent(editable.markdown, editable.def);
-    insertDialog?.editComponent(editable.def, values, editable.range);
-  }
-
-  // The figure dialog's pre-fill, snapshotted when the control opens so the form never mixes a newer
-  // caret with the values it opened on. Captured from mediaAtCaret at open time: edit mode with the
-  // figure's caption/role when a figure wraps the image, else wrap mode with empty caption and the
-  // measure default. decorative rides the snapshot too. Null while the dialog is closed.
-  let figurePrefill = $state<{
-    mode: 'wrap' | 'edit';
-    caption: string;
-    role: FigureRole | null;
-    decorative: boolean;
-    image: { from: number; to: number };
-    figureRange: { from: number; to: number } | null;
-  } | null>(null);
-
-  // Open the figure control over the media image at the caret. Inert unless a media image sits there
-  // and the Write surface is up, the same gate the toolbar control shows. The snapshot is the source
-  // of truth for the apply handlers, so a caret move while the dialog is open never re-targets it.
-  function openFigure() {
-    if (!figureAvailable || !mediaAtCaret) return;
-    const at = mediaAtCaret;
-    figurePrefill = {
-      mode: at.figure ? 'edit' : 'wrap',
-      caption: at.figure?.caption ?? '',
-      role: at.figure?.role ?? null,
-      decorative: figureDecorative,
-      image: { from: at.imageFrom, to: at.imageTo },
-      figureRange: at.figure ? { from: at.figure.from, to: at.figure.to } : null,
-    };
-    figureDialog?.showModal();
+    const result = deserialize(await res.text());
+    if (result.type !== "success") {
+      tidyMessage = result.type === "failure" && typeof result.data?.error === "string" && result.data.error !== "csrf" ? result.data.error : "Tidy could not finish. Try again.";
+      return;
+    }
+    const corrected = typeof result.data?.corrected === "string" ? result.data.corrected : "";
+    const model = typeof result.data?.model === "string" ? result.data.model : data.tidy.model;
+    if (corrected.length === 0 || corrected === text) {
+      tidyNoop = true;
+      return;
+    }
+    const validation = validateTidy(text, corrected);
+    if (!validation.ok) {
+      tidyMessage = TIDY_REJECTION_MESSAGE;
+      return;
+    }
+    if (validation.changes.length === 0) {
+      tidyNoop = true;
+      return;
+    }
+    const changes = validation.changes.map((c) => ({
+      ...c,
+      from: c.from + offset,
+      to: c.to + offset
+    }));
+    tidyReview = { changes, original: body, model };
+    tidyMode = true;
+    tidyApi?.enter(changes);
+  } catch {
+    tidyMessage = tidyController?.signal.aborted ? null : "Tidy could not finish. Try again.";
+  } finally {
+    clearTimeout(timer);
+    tidyController = null;
+    tidyBusy = false;
   }
-
-  // Apply the control's choice through the replaceRange seam, then close. Wrap a bare image or update
-  // an existing figure, off the snapshot the dialog opened on. The pure transform owns the source
-  // shape and keeps the media token byte-intact; the preview stays read-only.
-  function applyFigure(choice: { caption: string; role: FigureRole | null }) {
-    const pre = figurePrefill;
-    if (!pre) return;
-    const result =
-      pre.mode === 'edit' && pre.figureRange
-        ? updateFigure(body, pre.figureRange, choice.caption, choice.role)
-        : wrapImageInFigure(body, pre.image.from, pre.image.to, choice.caption, choice.role);
-    writeFigureResult(result);
+}
+function cancelTidy() {
+  tidyController?.abort();
+  tidyBusy = false;
+  tidyMessage = null;
+}
+function closeTidyReview(applied) {
+  tidyMode = false;
+  tidyReview = null;
+  tidyApplied = applied;
+  tidyAppliedBody = applied ? body : null;
+}
+let tidyAppliedBody = $state(null);
+$effect(() => {
+  const current = body;
+  if (tidyApplied && tidyAppliedBody !== null && current !== tidyAppliedBody) {
+    tidyApplied = false;
+    tidyAppliedBody = null;
   }
-
-  // Unwrap the figure back to its bare image, then close. Edit mode only (the snapshot carries the
-  // figure range). The bare image token is restored verbatim by the pure transform.
-  function unwrapFigureAction() {
-    const pre = figurePrefill;
-    if (!pre || !pre.figureRange) return;
-    writeFigureResult(unwrapFigure(body, pre.figureRange));
+});
+function undoTidy() {
+  undoEditor();
+  tidyApplied = false;
+  tidyAppliedBody = null;
+}
+let caretCoords = $state.raw(
+  () => null
+);
+let focusEditor = $state.raw(() => {
+});
+let placeholders = $state.raw(null);
+let insertImageFn = $state.raw(() => {
+});
+const noopPlaceholders = {
+  begin: () => 0,
+  progress: () => {
+  },
+  resolveTo: () => {
+  },
+  cancel: () => {
   }
-
-  // Write a figure transform's result back to the editor: overwrite the whole doc through the
-  // replaceRange seam, then place the selection the transform chose (the seam alone drops the caret
-  // at the end). replaceRange dispatches the doc change and focuses the surface; selectRange then
-  // dispatches a selection-only transaction, which CodeMirror's history does not record as its own
-  // undoable event, so one undo reverts the whole figure write. Close the dialog last.
-  function writeFigureResult(result: { doc: string; from: number; to: number }) {
-    replaceRange(0, body.length, result.doc);
-    selectRange(result.from, result.to);
-    figureDialog?.close();
+};
+const editorApi = $derived({
+  caretCoords: () => caretCoords(),
+  focusEditor: () => focusEditor(),
+  placeholders: placeholders ?? noopPlaceholders,
+  insertImage: (alt, ref) => insertImageFn(alt, ref)
+});
+let mediaPopover = $state(null);
+let heroFieldRefs = $state({});
+let heroNeedsAlt = $state({});
+let uploadedRecords = $state([]);
+let webLinkDialog = $state(null);
+let linkPicker = $state(null);
+let insertDialog = $state(null);
+let deleteDialog = $state(null);
+let renameDialog = $state(null);
+let helpDialog = $state(null);
+let shortcutsDialog = $state(null);
+const hasComponents = $derived(insertableDefs(registry).length > 0);
+let caretComponent = $state(null);
+let mediaAtCaret = $state(null);
+let figureDialog = $state(null);
+const figureAvailable = $derived(mediaAtCaret != null && !insertDisabled);
+const figureLabel = $derived(
+  figureAvailable ? mediaAtCaret?.figure ? "Edit the figure at the cursor" : "Wrap the image at the cursor in a figure" : "Place the cursor on an image to add a figure"
+);
+const figureDecorative = $derived.by(() => {
+  if (!mediaAtCaret) return false;
+  const token = body.slice(mediaAtCaret.imageFrom, mediaAtCaret.imageTo);
+  const match = /^!\[([\s\S]*?)\]\(/.exec(token);
+  return (match?.[1] ?? "").trim() === "";
+});
+function editableDef(name) {
+  if (!name) return void 0;
+  const def = registry?.get(name);
+  if (!def) return void 0;
+  return hasSchema(def) ? def : void 0;
+}
+let editable = $state(null);
+let editReason = $state("none");
+$effect(() => {
+  const current = caretComponent;
+  const def = editableDef(current?.name ?? null);
+  if (!current || !def) {
+    editable = null;
+    editReason = "none";
+    return;
   }
-
-  // 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';
+  let stale = false;
+  void componentRoundTripSafety(current.markdown, def).then((result) => {
+    if (stale || caretComponent !== current) return;
+    if (result.safe) {
+      editable = { def, range: { from: current.from, to: current.to }, markdown: current.markdown };
+      editReason = "none";
+    } else {
+      editable = null;
+      editReason = "unsafe";
+    }
+  }).catch(() => {
+    if (stale || caretComponent !== current) return;
+    editable = null;
+    editReason = "none";
   });
-
-  // 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();
+  return () => {
+    stale = true;
+  };
+});
+const editBlockLabel = $derived(
+  editable ? "Edit the component at the cursor" : editReason === "unsafe" ? "This block can't be edited in the form. Edit it as markdown." : "Place the cursor in a component to edit it"
+);
+const editBlockUnavailable = $derived(insertDisabled || !editable);
+async function editBlock() {
+  if (insertDisabled || !editable) return;
+  const values = await parseComponent(editable.markdown, editable.def);
+  insertDialog?.editComponent(editable.def, values, editable.range);
+}
+let figurePrefill = $state(null);
+function openFigure() {
+  if (!figureAvailable || !mediaAtCaret) return;
+  const at = mediaAtCaret;
+  figurePrefill = {
+    mode: at.figure ? "edit" : "wrap",
+    caption: at.figure?.caption ?? "",
+    role: at.figure?.role ?? null,
+    decorative: figureDecorative,
+    image: { from: at.imageFrom, to: at.imageTo },
+    figureRange: at.figure ? { from: at.figure.from, to: at.figure.to } : null
+  };
+  figureDialog?.showModal();
+}
+function applyFigure(choice) {
+  const pre = figurePrefill;
+  if (!pre) return;
+  const result = pre.mode === "edit" && pre.figureRange ? updateFigure(body, pre.figureRange, choice.caption, choice.role) : wrapImageInFigure(body, pre.image.from, pre.image.to, choice.caption, choice.role);
+  writeFigureResult(result);
+}
+function unwrapFigureAction() {
+  const pre = figurePrefill;
+  if (!pre || !pre.figureRange) return;
+  writeFigureResult(unwrapFigure(body, pre.figureRange));
+}
+function writeFigureResult(result) {
+  replaceRange(0, body.length, result.doc);
+  selectRange(result.from, result.to);
+  figureDialog?.close();
+}
+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";
+});
+let actionsMenu = $state(null);
+let actionsOpen = $state(false);
+let detailsOpen = $state(false);
+let detailsTrigger = $state(null);
+let detailsClose = $state(null);
+function openDetails() {
+  flushSync(() => detailsOpen = true);
+  detailsClose?.focus();
+}
+function closeDetails() {
+  detailsOpen = false;
+  detailsTrigger?.focus();
+}
+function toggleDetails() {
+  if (detailsOpen) closeDetails();
+  else openDetails();
+}
+function pickAction(action) {
+  action();
+  if (actionsMenu?.matches(":popover-open")) actionsMenu.hidePopover();
+}
+const brokenLinks = $derived(form?.brokenLinks ?? []);
+let removedLinks = $state([]);
+const visibleBrokenLinks = $derived(brokenLinks.filter((h) => !removedLinks.includes(h)));
+function removeBrokenLink(href) {
+  const next = unwrapCairnLink(body, href);
+  if (next !== body) {
+    body = next;
+    removedLinks = [...removedLinks, href];
   }
-  function closeDetails() {
+}
+const needsAlt = $derived(findMediaImagesNeedingAlt(body));
+const imageFields = $derived(
+  data.fields.filter((f) => f.type === "image").map((f) => ({ name: f.name, label: f.label }))
+);
+const heroRows = $derived(imageFields.filter((f) => heroNeedsAlt[f.name]));
+const needsAltCount = $derived(needsAlt.length + heroRows.length);
+const deleteRefusedLinks = $derived(form?.inboundLinks ?? []);
+const formError = $derived(
+  form?.error && !form.brokenLinks?.length && !form.inboundLinks?.length ? form.error : ""
+);
+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";
     detailsOpen = false;
-    detailsTrigger?.focus();
+    previewHtml = "";
+    previewFailed = false;
+    removedLinks = [];
+  });
+});
+const draftWarning = $derived.by(() => {
+  const drafts = page.url.searchParams.get("drafts");
+  return drafts ? drafts.split(",").filter(Boolean).join(", ") : "";
+});
+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 "";
+});
+const politeMessage = $derived(
+  draftWarning ? `Saved. This page links to unpublished pages: ${draftWarning}.` : flash
+);
+const assertiveMessage = $derived.by(() => {
+  if (data.error) return data.error;
+  if (formError) return formError;
+  if (deleteRefusedLinks.length) {
+    const count = deleteRefusedLinks.length;
+    return `This ${data.label.toLowerCase()} could not be deleted. ${count} ${count === 1 ? "page links" : "pages link"} to it.`;
   }
-  function toggleDetails() {
-    if (detailsOpen) closeDetails();
-    else openDetails();
+  if (visibleBrokenLinks.length) {
+    const count = visibleBrokenLinks.length;
+    return `This page links to ${count} missing ${count === 1 ? "page" : "pages"}.`;
   }
-
-  // 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();
+  return "";
+});
+function proseOnly(line) {
+  let out = "";
+  let cursor = 0;
+  for (const { from, to } of findInlineDirectives(line)) {
+    out += line.slice(cursor, from);
+    cursor = to;
   }
-
-  // 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.
-  const brokenLinks = $derived(form?.brokenLinks ?? []);
-  // Track the hrefs the author has already fixed this session. The banner reads the immutable action
-  // result, so without this a fixed row would linger and "Remove link" would read as a no-op.
-  let removedLinks = $state<string[]>([]);
-  const visibleBrokenLinks = $derived(brokenLinks.filter((h) => !removedLinks.includes(h)));
-  function removeBrokenLink(href: string) {
-    // Hide the row only when the unwrap changed the body. A genuine no-op keeps the row honest.
-    const next = unwrapCairnLink(body, href);
-    if (next !== body) {
-      body = next;
-      removedLinks = [...removedLinks, href];
-    }
+  out += line.slice(cursor);
+  return out.replace(/[*_~`[\]()#]/g, " ");
+}
+const countedBody = $derived(
+  body.split("\n").filter((line) => directiveLineKind(line) === null && !/^\s*\|/.test(line)).map(proseOnly).join("\n")
+);
+const wordCount = $derived(countedBody.trim() ? countedBody.trim().split(/\s+/).length : 0);
+const wordLabel = $derived(wordCount === 1 ? "1 word" : `${wordCount} words`);
+const resolveLink = $derived(manifestLinkResolver(data.linkTargets));
+const resolveMediaTargets = $derived({
+  ...data.mediaTargets,
+  ...Object.fromEntries(
+    uploadedRecords.map((r) => [r.hash, { slug: r.slug, ext: r.ext, contentType: r.contentType }])
+  )
+});
+const resolveMedia = $derived(manifestMediaResolver(resolveMediaTargets));
+const mediaLibrary = $derived({
+  ...data.mediaLibrary,
+  ...Object.fromEntries(uploadedRecords.map((r) => [r.hash, mediaLibraryEntry(r)]))
+});
+const completionSources = $derived([cairnLinkCompletionSource(data.linkTargets)]);
+function setMode(m) {
+  mode = m;
+}
+let editorCard = $state(null);
+$effect(() => {
+  const card = editorCard;
+  if (!card) return;
+  card.addEventListener("keydown", onEditorKeydown);
+  return () => card.removeEventListener("keydown", onEditorKeydown);
+});
+function onEditorKeydown(e) {
+  if (!(e.ctrlKey || e.metaKey)) return;
+  const key = e.key.toLowerCase();
+  const fmt = formatForKeydown(e);
+  if (fmt) {
+    e.preventDefault();
+    format(fmt);
+  } else if (key === "b") {
+    e.preventDefault();
+    format("bold");
+  } else if (key === "i") {
+    e.preventDefault();
+    format("italic");
+  } else if (key === "k") {
+    e.preventDefault();
+    webLinkDialog?.open();
   }
-
-  // The media images in the live body that carry no alt text, recomputed as the author types. Alt is
-  // accessibility debt, never a render or publish failure, so this drives a non-blocking warning the
-  // author can act on or leave; the count drops and the notice clears as each alt is filled.
-  const needsAlt = $derived(findMediaImagesNeedingAlt(body));
-
-  // The declared image (hero) fields, for labelling the needs-alt notice's frontmatter rows.
-  const imageFields = $derived(
-    data.fields.filter((f) => f.type === 'image').map((f) => ({ name: f.name, label: f.label })),
-  );
-  // The frontmatter-hero needs-alt rows: each image field whose hero reports a needs-alt signal. The
-  // row's action focuses the field's alt input (the body scanner and its source-range jump cannot
-  // reach a frontmatter value). The headline count sums these with the body scanner's hits.
-  const heroRows = $derived(imageFields.filter((f) => heroNeedsAlt[f.name]));
-  const needsAltCount = $derived(needsAlt.length + heroRows.length);
-
-  // The delete guard's inbound linkers, from a refused delete (fail 409). Empty when the delete was
-  // not refused. When set, a delete was blocked by a link that appeared since the page loaded.
-  const deleteRefusedLinks = $derived(form?.inboundLinks ?? []);
-
-  // The shared failure summary, rendered only when no richer banner claims the failure: the save
-  // and delete guards get their own banners from brokenLinks and inboundLinks below, so this
-  // surfaces the rest (a rename refusal, today).
-  const formError = $derived(
-    form?.error && !form.brokenLinks?.length && !form.inboundLinks?.length ? form.error : '',
-  );
-
-  // 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';
-      detailsOpen = false;
-      previewHtml = '';
-      previewFailed = false;
-      removedLinks = [];
-    });
-  });
-
-  // After a save that links to a draft target, the redirect carries ?drafts=<tokens>. page.url
-  // is reactive kit state, so a client-side navigation that swaps the search string re-derives
-  // this, and the read is SSR-safe.
-  const draftWarning = $derived.by(() => {
-    const drafts = page.url.searchParams.get('drafts');
-    return drafts ? drafts.split(',').filter(Boolean).join(', ') : '';
-  });
-
-  // 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 (formError) return formError;
-    if (deleteRefusedLinks.length) {
-      const count = deleteRefusedLinks.length;
-      return `This ${data.label.toLowerCase()} could not be deleted. ${count} ${count === 1 ? 'page links' : 'pages link'} to it.`;
-    }
-    if (visibleBrokenLinks.length) {
-      const count = visibleBrokenLinks.length;
-      return `This page links to ${count} missing ${count === 1 ? 'page' : 'pages'}.`;
-    }
-    return '';
-  });
-
-  // One line of body text reduced to its prose: inline directives drop wholesale, then the
-  // markdown marker characters become spaces. Spacing rather than deleting keeps "[text](url)"
-  // as two words instead of mashing the link text into its destination, so a link counts its
-  // text plus its URL and the count never undercounts prose.
-  function proseOnly(line: string): string {
-    let out = '';
-    let cursor = 0;
-    for (const { from, to } of findInlineDirectives(line)) {
-      out += line.slice(cursor, from);
-      cursor = to;
-    }
-    out += line.slice(cursor);
-    return out.replace(/[*_~`[\]()#]/g, ' ');
-  }
-
-  // The editor footer's word count, over the local body so it tracks every keystroke. Directive
-  // machinery lines and table rows are dropped first and the inline syntax stripped, so the
-  // count reads as the author's prose.
-  const countedBody = $derived(
-    body
-      .split('\n')
-      .filter((line) => directiveLineKind(line) === null && !/^\s*\|/.test(line))
-      .map(proseOnly)
-      .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));
-
-  // The media analog: it turns a media: reference into its /media delivery path in the preview, and
-  // returns undefined for a missing target so the render step marks it cairn-broken-media. The
-  // committed mediaTargets projection is merged with this session's uploaded records (the same
-  // override the picker's library does), so a just-uploaded image renders its thumbnail in the live
-  // preview before the next save commits it, rather than reading as a broken reference.
-  const resolveMediaTargets = $derived({
-    ...data.mediaTargets,
-    ...Object.fromEntries(
-      uploadedRecords.map((r) => [r.hash, { slug: r.slug, ext: r.ext, contentType: r.contentType }]),
-    ),
-  });
-  const resolveMedia = $derived(manifestMediaResolver(resolveMediaTargets));
-
-  // The picker's library, the committed projection merged with this session's uploaded records,
-  // keyed by content hash. An uploaded record overrides a committed entry on a hash match (the same
-  // hash is the same bytes, so the override is harmless). This is what the editor decorates with, so
-  // a just-uploaded image carries its source chip before the next save commits it.
-  const mediaLibrary = $derived({
-    ...data.mediaLibrary,
-    ...Object.fromEntries(uploadedRecords.map((r) => [r.hash, mediaLibraryEntry(r)])),
-  });
-
-  // The [[ autocomplete source over the same link targets, handed to the editor's generic seam.
-  const completionSources = $derived([cairnLinkCompletionSource(data.linkTargets)]);
-
-  function setMode(m: 'write' | 'preview') {
-    mode = m;
-  }
-
-  // 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(() => {
-    const card = editorCard;
-    if (!card) return;
-    card.addEventListener('keydown', onEditorKeydown);
-    return () => card.removeEventListener('keydown', onEditorKeydown);
-  });
-  function onEditorKeydown(e: KeyboardEvent) {
-    if (!(e.ctrlKey || e.metaKey)) return;
-    const key = e.key.toLowerCase();
-    // 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') {
-      e.preventDefault();
-      format('italic');
-    } else if (key === 'k') {
-      e.preventDefault();
-      webLinkDialog?.open();
-    }
+}
+function formatForKeydown(e) {
+  if (e.altKey) {
+    if (e.key === "2") return "h2";
+    if (e.key === "3") return "h3";
+    return null;
   }
-  // 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';
+  if (e.shiftKey) {
+    if (e.code === "Digit9") return "quote";
+    if (e.code === "Digit8") return "ul";
+    if (e.code === "Digit7") return "ol";
     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.
-  // previewRun is a plain counter (not reactive state) used as a latest-wins guard: if a slow earlier
-  // async render call resolves after a newer one has started, the stale result is discarded.
-  let previewRun = 0;
-  $effect(() => {
-    if (mode !== 'preview' || !render) return;
-    const md = body;
-    const resolve = resolveLink; // tracked read in the effect body
-    const resolveMediaRef = resolveMedia; // tracked read in the effect body
-    const run = ++previewRun;
-    const handle = setTimeout(async () => {
-      try {
-        const html = await render(md, { resolve, resolveMedia: resolveMediaRef });
-        if (run === previewRun) {
-          previewHtml = html;
-          previewFailed = false;
-        }
-      } catch {
-        if (run === previewRun) {
-          previewHtml = '';
-          previewFailed = true;
-        }
+  if (e.key.toLowerCase() === "e") return "code";
+  return null;
+}
+let previewRun = 0;
+$effect(() => {
+  if (mode !== "preview" || !render) return;
+  const md = body;
+  const resolve = resolveLink;
+  const resolveMediaRef = resolveMedia;
+  const run = ++previewRun;
+  const handle = setTimeout(async () => {
+    try {
+      const html = await render(md, { resolve, resolveMedia: resolveMediaRef });
+      if (run === previewRun) {
+        previewHtml = html;
+        previewFailed = false;
       }
-    }, 150);
-    return () => {
-      clearTimeout(handle);
-      // Every re-run and the final teardown invalidate the in-flight render. The entry-key reset
-      // above cannot reach this counter, so without the bump a slow render for entry A could
-      // resolve after a same-route hop and write A's html into entry B's pane.
-      previewRun++;
-    };
-  });
-
-  // Coerce a frontmatter value to a string for text/date/textarea inputs.
-  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));
+    } catch {
+      if (run === previewRun) {
+        previewHtml = "";
+        previewFailed = true;
+      }
+    }
+  }, 150);
+  return () => {
+    clearTimeout(handle);
+    previewRun++;
+  };
+});
+function str(v) {
+  return v == null ? "" : String(v);
+}
+const eyebrowClass = "mb-2 text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]";
+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>
 
 <!-- The desk controls live in the one header band: AdminLayout renders this snippet through the
@@ -988,6 +740,15 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
         {#if dirty}<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-warning" aria-hidden="true"></span>{/if}
         {saveState}
       </span>
+      {#if tidyApplied}
+        <!-- The session-level Undo tidy (graft 6): surfaced right after Apply, dismissed on the next
+             edit. Ordinary editor Undo covers it mechanically (the apply is one history entry); this
+             chip names it so the author knows the whole tidy is one move back. -->
+        <span class="flex items-center gap-2 border-l border-[var(--cairn-card-border)] pl-3 text-xs text-[var(--color-muted)]" data-testid="tidy-undo-chip">
+          <span class="inline-flex items-center gap-1 font-semibold text-[var(--color-positive-ink)]">Tidy applied</span>
+          <button type="button" class="underline decoration-[color-mix(in_oklab,currentColor_40%,transparent)] underline-offset-2 hover:text-primary" onclick={undoTidy}>Undo tidy</button>
+        </span>
+      {/if}
     </div>
 
     <div class="ml-auto flex items-center gap-2 border-l border-[var(--cairn-card-border)] pl-3">
@@ -1295,6 +1056,21 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
               <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>
+          {#if tidyEnabled}
+            <!-- Tidy (spec 2.1): the single desk entry point for the light copy-edit. A labelled
+                 accent-quiet action (something you invoke, not a format you toggle). Disabled in
+                 Preview, while a review is open, and while a request is in flight. -->
+            <button
+              type="button"
+              class="btn btn-sm btn-ghost gap-1.5"
+              aria-label="Tidy"
+              title="Tidy: a light copy-edit you review before it lands"
+              disabled={insertDisabled || tidyBusy}
+              onclick={runTidy}
+            >
+              <SparklesIcon class="h-4 w-4" aria-hidden="true" />Tidy
+            </button>
+          {/if}
           <!-- The Figure control: always rendered, enabled only when the caret sits on a media image
                (and the Write surface is up). It never mounts or unmounts on caret movement; only its
                enabled state changes (the Edit-block pattern). The unavailable state uses aria-disabled,
@@ -1332,7 +1108,11 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
           registerSelectRange={(fn) => (selectRange = fn)}
           registerInsertLink={(fn) => (insertLink = fn)}
           registerGetSelection={(fn) => (getSelection = fn)}
+          registerGetSelectionRange={(fn) => (getSelectionRange = fn)}
           registerFormat={(fn) => (format = fn)}
+          registerTidy={(api) => (tidyApi = api)}
+          registerUndo={(fn) => (undoEditor = fn)}
+          {tidyMode}
           registerCaretCoords={(fn) => (caretCoords = fn)}
           registerFocusEditor={(fn) => (focusEditor = fn)}
           registerImagePlaceholders={(api) => (placeholders = api)}
@@ -1342,6 +1122,10 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
           {mediaLibrary}
           {focusMode}
           {typewriter}
+          {spellcheck}
+          spellcheckDictionary={data.spellcheckDictionary}
+          siteDictionary={data.siteDictionary}
+          {pendingAdditions}
         />
         <!-- The accumulated uploaded records ride the save form alongside the body. The save action
              reads `media` and merges these records into media.json (publish submits the same form). -->
@@ -1454,6 +1238,17 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
               {#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>
+            <!-- Spellcheck: the markdown-aware lint underlines. Off reconfigures the lint compartment
+                 to empty and idles the Worker. Same check-and-tint grammar as the modes beside it. -->
+            <button
+              type="button"
+              class={ftrToggleClass(spellcheck)}
+              aria-pressed={spellcheck}
+              onclick={() => setSpellcheck(!spellcheck)}
+            >
+              {#if spellcheck}<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}
+              Spellcheck
+            </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
@@ -1719,6 +1514,79 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
 />
 <MarkdownHelpDialog bind:this={helpDialog} />
 <ShortcutsDialog bind:this={shortcutsDialog} />
+
+<!-- The tidy review surface (spec 2.5). Mounted only while a review is open, keyed by the validated
+     change set so a fresh review remounts. It drives the in-buffer decorations and the batched apply
+     through tidyApi; the host clears tidy mode on close. -->
+{#if tidyReview && tidyApi}
+  <TidyReview
+    changes={tidyReview.changes}
+    original={tidyReview.original}
+    conventions={data.tidy.conventions}
+    model={tidyReview.model}
+    title={data.title}
+    api={tidyApi}
+    onclose={closeTidyReview}
+    onshow={(from, to) => selectRange(from, to)}
+  />
+{/if}
+
+<!-- The tidy working state: a cancelable dialog wired to the real abort (Task 11's AbortController
+     plus the bounded client timeout). Shown while the model call is in flight. -->
+{#if tidyBusy}
+  <dialog
+    class="modal"
+    aria-labelledby="cairn-tidy-working-title"
+    data-testid="tidy-working"
+    bind:this={tidyWorkingDialog}
+    onclose={cancelTidy}
+  >
+    <div class="modal-box flex flex-col items-center gap-3 text-center">
+      <span class="loading loading-spinner loading-lg text-primary" aria-hidden="true"></span>
+      <h2 id="cairn-tidy-working-title" class="text-base font-semibold">Tidying your text</h2>
+      <p class="max-w-prose text-sm text-[var(--color-muted)]">
+        Claude is reading your draft for a light copy-edit. You will review every change before it lands.
+      </p>
+      <button type="button" class="btn btn-sm" onclick={() => tidyWorkingDialog?.close()}>Cancel</button>
+    </div>
+  </dialog>
+{/if}
+
+<!-- The no-op confirmation: tidy found nothing to fix. Quiet, never an empty review. -->
+{#if tidyNoop}
+  <dialog
+    class="modal"
+    aria-labelledby="cairn-tidy-noop-title"
+    data-testid="tidy-noop"
+    bind:this={tidyNoopDialog}
+    onclose={() => (tidyNoop = false)}
+  >
+    <div class="modal-box flex flex-col items-center gap-3 text-center">
+      <h2 id="cairn-tidy-noop-title" class="text-base font-semibold">Nothing to fix</h2>
+      <p class="max-w-prose text-sm text-[var(--color-muted)]">Tidy read your text and found nothing to change.</p>
+      <button type="button" class="btn btn-sm btn-primary" onclick={() => tidyNoopDialog?.close()}>Close</button>
+    </div>
+  </dialog>
+{/if}
+
+<!-- A refused, failed, or rejected tidy: the honest message; the document is unchanged. -->
+{#if tidyMessage}
+  <dialog
+    class="modal"
+    aria-labelledby="cairn-tidy-message-title"
+    data-testid="tidy-message"
+    bind:this={tidyMessageDialog}
+    onclose={() => (tidyMessage = null)}
+  >
+    <div class="modal-box flex flex-col gap-3">
+      <h2 id="cairn-tidy-message-title" class="text-base font-semibold">Tidy could not run</h2>
+      <p class="text-sm text-[var(--color-muted)]">{tidyMessage}</p>
+      <div class="flex justify-end">
+        <button type="button" class="btn btn-sm btn-primary" onclick={() => tidyMessageDialog?.close()}>Close</button>
+      </div>
+    </div>
+  </dialog>
+{/if}
 <DeleteDialog
   bind:this={deleteDialog}
   trigger={false}