@glw907/cairn-cms 0.52.1 → 0.54.0

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

@@ -24,7 +24,8 @@ interface Props {
  * The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the
  * markdown editor and a live, design-accurate preview. The whole surface is one form posting to the
  * `?/save` action. The title field is hoisted above the editor card as the document title; the
- * remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
+ * remaining fields group behind the Details slide-over (a fixed panel below the band, toggled from
+ * the band's Details trigger or Ctrl+.) under Details, Visibility (the draft boolean as the Hidden
  * toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
  * swap the editing surface for the rendered preview inside the same card; every visit lands on
  * Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
@@ -33,7 +34,8 @@ interface Props {
  * carries the breadcrumb, the status badges, the save-state indicator,
  * and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
  * pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
- * transient flashes, and the editor card's footer holds the word count and the Markdown help.
+ * transient flashes, and the editor card's footer is the writing-environment strip: the word
+ * count, the Prose/Markup posture pair, the focus and typewriter toggles, and the Markdown help.
  */
 declare const EditPage: import("svelte").Component<Props, {}, "">;
 type EditPage = ReturnType<typeof EditPage>;

package/dist/components/EditorToolbar.svelte

@@ -5,9 +5,9 @@ More overflow menu, then the host's Insert controls) and the Write/Preview segme
 right. Format buttons ask the host to transform the editor's current selection; the host supplies the
 Insert group through the `insertControls` snippet so the strip stays free of picker wiring. While
 Preview shows, a device trigger joins the segmented capsule and opens a popover menu of preview
-widths, reported to the host through `onDevice`. The More menu also carries the host's persisted
-writing-mode toggles (focus mode, typewriter scrolling) as pressed-state buttons above the format picks. The glyphs are stroke SVG icons in the admin's
-house style (24x24 viewBox, `currentColor`, round caps).
+widths, reported to the host through `onDevice`. The writing-mode toggles live in the host's card
+footer (the bottom strip carries the writing environment; this strip acts on the text). The glyphs
+are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
@@ -26,14 +26,6 @@ house style (24x24 viewBox, `currentColor`, round caps).
     /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
      *  while Preview shows. */
     onDevice?: (id: PreviewDeviceId) => void;
-    /** Whether focus mode is on; the More menu's toggle reflects it. */
-    focusMode?: boolean;
-    /** Flip focus mode. When set, the toggle joins the More menu. */
-    onFocusMode?: (on: boolean) => void;
-    /** Whether typewriter scrolling is on; the More menu's toggle reflects it. */
-    typewriter?: boolean;
-    /** Flip typewriter scrolling. When set, the toggle joins the More menu. */
-    onTypewriter?: (on: boolean) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
   }
@@ -44,10 +36,6 @@ house style (24x24 viewBox, `currentColor`, round caps).
     onMode,
     device = 'desktop',
     onDevice,
-    focusMode = false,
-    onFocusMode,
-    typewriter = false,
-    onTypewriter,
     insertControls,
   }: Props = $props();
 
@@ -65,12 +53,12 @@ house style (24x24 viewBox, `currentColor`, round caps).
   const structureButtons: ToolButton[] = [
     {
       kind: 'h2',
-      label: 'Heading',
+      label: 'Heading (Ctrl+Alt+2)',
       paths: ['M4 12h8', 'M4 18V6', 'M12 18V6', 'M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1'],
     },
     {
       kind: 'h3',
-      label: 'Smaller heading',
+      label: 'Smaller heading (Ctrl+Alt+3)',
       paths: [
         'M4 12h8',
         'M4 18V6',
@@ -79,32 +67,45 @@ house style (24x24 viewBox, `currentColor`, round caps).
         'M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2',
       ],
     },
-    { kind: 'ul', label: 'Bulleted list', paths: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'] },
+    { kind: 'ul', label: 'Bulleted list (Ctrl+Shift+8)', paths: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'] },
     {
       kind: 'ol',
-      label: 'Numbered list',
+      label: 'Numbered list (Ctrl+Shift+7)',
       paths: ['M10 12h11', 'M10 18h11', 'M10 6h11', 'M4 10h2', 'M4 6h1v4', 'M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'],
     },
     {
       kind: 'quote',
-      label: 'Quote',
+      label: 'Quote (Ctrl+Shift+9)',
       paths: [
         'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
         'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
       ],
     },
+    // The everyday formats promoted out of the More menu onto the strip (after Quote, before
+    // More), per mockup screen 1. They keep the strip's glyph grammar.
+    { kind: 'code', label: 'Inline code (Ctrl+E)', paths: ['m9 8-4 4 4 4', 'm15 8 4 4-4 4'] },
+    {
+      kind: 'strike',
+      label: 'Strikethrough',
+      paths: ['M14 12a4 4 0 0 1 0 8H8', 'M16 4H9.5a3.5 3.5 0 0 0-1.4 6.7', 'M4 12h16'],
+    },
+    {
+      kind: 'table',
+      label: 'Table',
+      paths: ['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', 'M3 10h18', 'M10 3v18'],
+    },
   ];
 
   const ellipsisPaths = ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'];
   // The check glyph marking an active pick, shared by the More menu's toggles and the device list.
   const checkPaths = ['M20 6 9 17l-5-5'];
 
-  const moreItems: { kind: FormatKind; label: string }[] = [
-    { kind: 'strike', label: 'Strikethrough' },
-    { kind: 'code', label: 'Inline code' },
+  // The trimmed overflow: the block formats that stay rare. A divider splits the code block from
+  // the rest (the spec keeps "code block and the rest" behind the ellipsis once inline code,
+  // strikethrough, and table promote into the strip).
+  const moreItems: { kind: FormatKind; label: string; divideBefore?: boolean }[] = [
     { kind: 'codeblock', label: 'Code block' },
-    { kind: 'table', label: 'Table' },
-    { kind: 'hr', label: 'Horizontal rule' },
+    { kind: 'hr', label: 'Horizontal rule', divideBefore: true },
     { kind: 'task', label: 'Task list' },
   ];
 
@@ -265,35 +266,10 @@ house style (24x24 viewBox, `currentColor`, round caps).
     ontoggle={(e) => (moreOpen = e.newState === 'open')}
     class="dropdown menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
   >
-    <!-- The writing modes sit above the format items behind a hairline, persisted by the host.
-         The device list's idiom: plain buttons with aria-pressed carrying the on/off state (this
-         popover list is not an ARIA menu, so a menuitemcheckbox would sit in an invalid context);
-         the check glyph mirrors the state visually. A flip leaves the menu open so the new
-         pressed state is perceivable in place; only a format pick dismisses it. -->
-    {#if onFocusMode}
-      <li>
-        <button type="button" aria-pressed={focusMode} onclick={() => onFocusMode(!focusMode)}>
-          <span class="grow">Focus mode</span>
-          {#if focusMode}
-            {@render strokeIcon(checkPaths)}
-          {/if}
-        </button>
-      </li>
-    {/if}
-    {#if onTypewriter}
-      <li>
-        <button type="button" aria-pressed={typewriter} onclick={() => onTypewriter(!typewriter)}>
-          <span class="grow">Typewriter scrolling</span>
-          {#if typewriter}
-            {@render strokeIcon(checkPaths)}
-          {/if}
-        </button>
-      </li>
-    {/if}
-    {#if onFocusMode || onTypewriter}
-      <li class="my-1 border-t border-[var(--cairn-card-border)]" role="separator"></li>
-    {/if}
     {#each moreItems as item (item.kind)}
+      {#if item.divideBefore}
+        <li class="menu-divider my-1 h-px bg-[var(--cairn-card-border)]" role="separator" aria-hidden="true"></li>
+      {/if}
       <li><button type="button" onclick={() => pickMore(item.kind)}>{item.label}</button></li>
     {/each}
   </ul>

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

@@ -13,14 +13,6 @@ interface Props {
     /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
      *  while Preview shows. */
     onDevice?: (id: PreviewDeviceId) => void;
-    /** Whether focus mode is on; the More menu's toggle reflects it. */
-    focusMode?: boolean;
-    /** Flip focus mode. When set, the toggle joins the More menu. */
-    onFocusMode?: (on: boolean) => void;
-    /** Whether typewriter scrolling is on; the More menu's toggle reflects it. */
-    typewriter?: boolean;
-    /** Flip typewriter scrolling. When set, the toggle joins the More menu. */
-    onTypewriter?: (on: boolean) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
 }
@@ -30,9 +22,9 @@ interface Props {
  * right. Format buttons ask the host to transform the editor's current selection; the host supplies the
  * Insert group through the `insertControls` snippet so the strip stays free of picker wiring. While
  * Preview shows, a device trigger joins the segmented capsule and opens a popover menu of preview
- * widths, reported to the host through `onDevice`. The More menu also carries the host's persisted
- * writing-mode toggles (focus mode, typewriter scrolling) as pressed-state buttons above the format picks. The glyphs are stroke SVG icons in the admin's
- * house style (24x24 viewBox, `currentColor`, round caps).
+ * widths, reported to the host through `onDevice`. The writing-mode toggles live in the host's card
+ * footer (the bottom strip carries the writing environment; this strip acts on the text). The glyphs
+ * are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
  */
 declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
 type EditorToolbar = ReturnType<typeof EditorToolbar>;

package/dist/components/MarkdownEditor.svelte

@@ -31,6 +31,9 @@ through the adapter's render. Swapping the editor stays a one-file change.
     focusMode?: boolean;
     /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
     typewriter?: boolean;
+    /** The surface posture. Prose is the writing instrument (72ch measure, larger type, looser
+     *  leading); markup is the working surface (fills the card, denser). Prose by default. */
+    surface?: 'prose' | 'markup';
   }
 
   let {
@@ -43,6 +46,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     completionSources = [],
     focusMode = false,
     typewriter = false,
+    surface = 'prose',
   }: Props = $props();
 
   let host = $state<HTMLDivElement | null>(null);
@@ -57,6 +61,12 @@ through the adapter's render. Swapping the editor stays a one-file change.
   let modes: typeof import('./editor-modes.js') | null = null;
   let focusCompartment: import('@codemirror/state').Compartment | null = null;
   let typewriterCompartment: import('@codemirror/state').Compartment | null = null;
+  let surfaceCompartment: import('@codemirror/state').Compartment | null = null;
+  // The posture themes, swapped through the surface compartment. Each owns its type step and
+  // leading (the base theme deliberately sets neither on the content node, so the postures never
+  // contest it on adoption order). Built in onMount beside the base theme.
+  let proseTheme: import('@codemirror/state').Extension | null = null;
+  let markupTheme: import('@codemirror/state').Extension | null = null;
 
   onMount(async () => {
     const viewMod = await import('@codemirror/view');
@@ -67,6 +77,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const autocompleteMod = await import('@codemirror/autocomplete');
     const highlightMod = await import('./editor-highlight.js');
     const modesMod = await import('./editor-modes.js');
+    const foldingMod = await import('./editor-folding.js');
 
     if (!host) return;
 
@@ -75,9 +86,9 @@ through the adapter's render. Swapping the editor stays a one-file change.
     // tooltip above all) renders dark-on-dark instead of light-on-dark.
     const isDark = host.closest('[data-theme]')?.getAttribute('data-theme')?.includes('dark') ?? false;
     // The directive machinery treatment: rails, not bands. A row at depth N draws every rail
-    // 1..N as literal nested brackets: 2px accent bars at x offsets 0-2, 6-8, and 12-14 with 4px
-    // of surface between them (a gap of twice the bar weight, the floor for two parallel rules
-    // to read as separate lines rather than one thick one), stacked as inset box shadows (top
+    // 1..N as literal nested brackets: 2px accent bars on an 8px pitch (x offsets 0-2, 8-10,
+    // and 16-18) with 6px of surface between them (three times the bar weight, so nested bars
+    // separate cleanly instead of reading as one thick rule), stacked as inset box shadows (top
     // layer first, so each bar sits over the spacer and deeper bar beneath it). The alphas step through the per-theme vars in
     // cairn-admin.css; the fallbacks are the light values, so the editor still renders sensibly
     // outside an admin theme wrapper. On a fence line the colon runs, brackets, and {attrs}
@@ -87,21 +98,25 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const railFallbacks = ['72%', '82%', '92%'];
     const railColor = (step: number | 'active', fallback: string) =>
       `color-mix(in oklab, var(--color-accent) var(--cairn-directive-rail-${step}, ${fallback}), transparent)`;
-    // With `active`, the row's own (deepest) bar takes the full-strength -active mix and widens
-    // 1px, so the caret's container reads at a glance; a bar-width change shifts no text.
-    const rails = (depth: number, active = false): string => {
+    // With `active`, the row's own (deepest) bar takes the full-strength -active mix at the same
+    // 2px width. The emphasis is strength only: a rail column carrying both an active and a
+    // quiet segment (two sibling containers at one depth) keeps one weight top to bottom.
+    // With `dropInnermost`, the row's own deepest bar is omitted: a fold chevron replaces it on a
+    // paired opener row, so the bar would double the chevron's positional cue. The outer bars and
+    // their spacers stay, so the nesting still reads.
+    const rails = (depth: number, active = false, dropInnermost = false): string => {
       const layers: string[] = [];
       for (let d = 1; d <= depth; d++) {
-        const edge = 6 * d - 4;
+        const edge = 8 * d - 6;
         if (d > 1) layers.push(`inset ${edge - 2}px 0 0 0 var(--color-base-100, oklch(99% 0.004 75))`);
+        if (dropInnermost && d === depth) continue;
         const own = active && d === depth;
         layers.push(
-          own
-            ? `inset ${edge + 1}px 0 0 0 ${railColor('active', '100%')}`
-            : `inset ${edge}px 0 0 0 ${railColor(d, railFallbacks[d - 1] ?? '92%')}`,
+          `inset ${edge}px 0 0 0 ${own ? railColor('active', '100%') : railColor(d, railFallbacks[d - 1] ?? '92%')}`,
         );
       }
-      return layers.join(', ');
+      // A depth-1 opener drops its only bar, so the row paints no rail at all.
+      return layers.length ? layers.join(', ') : 'none';
     };
     const directiveInk = {
       backgroundColor: 'color-mix(in oklab, var(--color-accent) 8%, transparent)',
@@ -117,23 +132,35 @@ through the adapter's render. Swapping the editor stays a one-file change.
         `${prefix}.cm-cairn-directive-fence.cm-cairn-depth-${depth}, ${prefix}.cm-cairn-directive-content.cm-cairn-depth-${depth}`;
       railRules[row('')] = { boxShadow: rails(depth) };
       railRules[row('.cm-cairn-caret-block')] = { boxShadow: rails(depth, true) };
+      // A paired opener row drops its own innermost bar (the fold chevron stands in its place),
+      // both quiet and caret-active. The extra opener class outranks the base fence rule above.
+      railRules[`.cm-cairn-directive-fence.cm-cairn-directive-opener.cm-cairn-depth-${depth}`] = {
+        boxShadow: rails(depth, false, true),
+      };
+      railRules[`.cm-cairn-caret-block.cm-cairn-directive-opener.cm-cairn-depth-${depth}`] = {
+        boxShadow: rails(depth, true, true),
+      };
     }
     const theme = EditorView.theme(
       {
         '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '1rem' },
-        // The 50vh floor keeps a short entry reading as a writing surface, and because the
-        // contenteditable content area carries the height, a click in the empty space below the
-        // text still lands in the editor and focuses it. The 70ch cap with auto margins holds
-        // the manuscript to a readable measure, centered in whatever width the card gives it.
+        // The 60vh floor keeps the surface reading as the page's center stage even when the
+        // entry is short, and because the contenteditable content area carries the height, a
+        // click in the empty space below the text still lands in the editor and focuses it.
+        // No inner measure cap: the surface fills the card the way a code editor fills its
+        // pane, and the card's own width (the host caps it near 89ch of this face) is the one
+        // constraint. The surface carries tables, attributed directives, and long URLs, so the
+        // ceiling leans toward the code-editor end of the ergonomic band rather than the
+        // long-form ideal; paragraphs wrap comfortably below it.
         '.cm-content': {
           // The theme roots set --font-editor to the self-hosted iA Writer Mono; the inline
           // fallback keeps the surface monospace outside an admin theme wrapper.
           fontFamily: "var(--font-editor, ui-monospace, monospace)",
-          padding: '0.875rem 1.25rem',
-          lineHeight: '1.8',
-          minHeight: '50vh',
-          maxWidth: '70ch',
-          margin: '0 auto',
+          // Vertical padding holds at least one line-height of the body (1.8 x 1rem), with a
+          // touch more below than above (the optical center sits high); the sides then read as
+          // gutters rather than letterboxing.
+          padding: '2rem 1.25rem 2.5rem',
+          minHeight: '60vh',
         },
         '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
         // A quiet always-on focus hairline. :focus-visible is no escape here: browsers treat a
@@ -146,10 +173,19 @@ through the adapter's render. Swapping the editor stays a one-file change.
           outlineOffset: '-1px',
         },
         '.cm-line': { padding: '0' },
+        // A quote or list line hangs its wrapped continuation under the content: padding-left
+        // holds the marker width (the --cairn-hang the decoration sets) and the line's own
+        // negative text-indent (set inline) pulls the first line back, so the marker sits in the
+        // indent. This rule sits before the gutter rule so a container content line, which
+        // carries both classes, takes the gutter-plus-hang rule below.
+        '.cm-cairn-hang': { paddingLeft: 'var(--cairn-hang, 0ch)' },
         // The gutter: directive rows pad left so the text clears the deepest rail stack (the
-        // depth-3 bar ends at 14px, the active one at 15px; 1.5rem keeps ~10px of air beyond
-        // it). Static structure (caret-independent), so caret movement shifts no layout.
-        '.cm-cairn-directive-fence, .cm-cairn-directive-content': { paddingLeft: '1.5rem' },
+        // depth-3 bar ends at 18px; 1.75rem keeps 10px of air beyond it). Static structure
+        // (caret-independent), so caret movement shifts no layout. The --cairn-hang term composes
+        // a quote/list marker's hang on top of the gutter; it defaults to 0 on rows without one.
+        '.cm-cairn-directive-fence, .cm-cairn-directive-content': {
+          paddingLeft: 'calc(1.75rem + var(--cairn-hang, 0ch))',
+        },
         ...railRules,
         '.cm-cairn-directive-mark': { color: 'var(--color-muted)' },
         '.cm-cairn-directive-label': { color: 'var(--color-accent)' },
@@ -163,6 +199,68 @@ through the adapter's render. Swapping the editor stays a one-file change.
         },
         '.cm-cairn-directive-leaf': directiveInk,
         '.cm-cairn-directive-inline': directiveInk,
+        // Container folding. The fold band is the 28px gutter click target on an opener row; the
+        // line is the positioning context so the chevron sits over the container's own bar x. The
+        // band is laid over the gutter (a zero-width inline widget at line start, expanded by the
+        // absolute children), so only the gutter shows the pointer cursor, never the opener text.
+        '.cm-line:has(.cm-cairn-fold-band)': { position: 'relative' },
+        '.cm-cairn-fold-band': {
+          position: 'absolute',
+          left: '0',
+          top: '0',
+          width: '28px',
+          height: '100%',
+          cursor: 'pointer',
+          zIndex: '1',
+        },
+        '.cm-cairn-fold-band svg': {
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          width: '11px',
+          height: '11px',
+          // The chevron fades in on rail-band hover; folded and caret-inside states force it on.
+          opacity: '0',
+          transition: 'opacity 120ms ease',
+          color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))',
+        },
+        '.cm-cairn-fold-band:hover svg, .cm-cairn-fold-folded svg, .cm-cairn-fold-active svg': {
+          opacity: '1',
+        },
+        // The chevron steps its ink with the container's depth, matching the label inks; the
+        // caret-inside state takes the strongest ink.
+        '.cm-cairn-fold-depth-1 svg': { color: 'var(--color-accent)' },
+        '.cm-cairn-fold-depth-3 svg': { color: 'var(--cairn-directive-ink-3, oklch(48% 0.16 300))' },
+        '.cm-cairn-fold-active svg': { color: 'var(--cairn-directive-ink-active, oklch(46% 0.16 300))' },
+        // The folded-row wash: a soft accent tint, square and full-row, returning as a STATE signal
+        // so folded spots read in a scan. The rails are inset box-shadows on the same line element
+        // and render above this background, so the rail column runs through the wash unbroken.
+        '.cm-cairn-folded-row': {
+          backgroundColor: 'color-mix(in oklab, var(--color-accent) 7%, transparent)',
+        },
+        // The fold pill: the placeholder widget and the screen-reader story, a real focusable
+        // button counting the hidden lines in accent ink. The 30% accent border lifts on hover.
+        '.cm-cairn-fold-pill': {
+          fontFamily: 'var(--font-body, ui-sans-serif, sans-serif)',
+          fontSize: '0.6875rem',
+          color: 'var(--color-accent)',
+          border: '1px solid color-mix(in oklab, var(--color-accent) 30%, transparent)',
+          borderRadius: '0.375rem',
+          padding: '1px 7px',
+          marginLeft: '10px',
+          verticalAlign: '1px',
+          backgroundColor: 'var(--color-base-100)',
+          cursor: 'pointer',
+        },
+        '.cm-cairn-fold-pill:hover': {
+          borderColor: 'color-mix(in oklab, var(--color-accent) 60%, transparent)',
+        },
+        // The one-time unfold flash: a low-alpha accent background on the revealed lines, removed
+        // after the animation. The transition runs as the field clears the class.
+        '.cm-cairn-fold-flash': {
+          backgroundColor: 'color-mix(in oklab, var(--color-accent) 12%, transparent)',
+          transition: 'background-color 400ms ease',
+        },
         // Focus mode's dim ink, on the lines editor-modes marks outside the caret's paragraph.
         // Last on purpose: a dimmed line's spans (markers, tokens, directive labels) all drop to
         // the dim tone, and spec order breaks the specificity ties with the label rules above.
@@ -176,13 +274,47 @@ through the adapter's render. Swapping the editor stays a one-file change.
           color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
           backgroundColor: 'transparent',
         },
+        // The fold machinery dims with its row: a folded opener row under focus mode drops its
+        // chevron, pill, and wash to the dim tone like any other machinery line.
+        '.cm-cairn-focus-dim .cm-cairn-fold-band svg, .cm-cairn-focus-dim .cm-cairn-fold-pill': {
+          color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
+        },
+        '.cm-cairn-focus-dim.cm-cairn-folded-row': { backgroundColor: 'transparent' },
+        // The rails dim with their text: the rail color-mix reads --cairn-directive-rail-N per
+        // element, so overriding the percentages on dimmed lines re-resolves every bar in place.
+        // Without this the directive block keeps full-strength bars and becomes the one
+        // chromatic object in the dimmed field. The active step needs the override too: focus
+        // mode's lit unit is the caret PARAGRAPH while the caret-block class spans the whole
+        // container, so a container holding a blank line has dimmed rows that still carry the
+        // active rail.
+        '.cm-cairn-focus-dim': {
+          '--cairn-directive-rail-1': 'var(--cairn-focus-dim-rail-1, 24%)',
+          '--cairn-directive-rail-2': 'var(--cairn-focus-dim-rail-2, 28%)',
+          '--cairn-directive-rail-3': 'var(--cairn-focus-dim-rail-3, 32%)',
+          '--cairn-directive-rail-active': 'var(--cairn-focus-dim-rail-active, 36%)',
+        },
+      },
+      { dark: isDark },
+    );
+
+    // The prose posture: the writing instrument. A 72ch measure centered in the card, one type
+    // step up, looser leading. Markup posture (the base theme) keeps the dense fill for tables,
+    // directives, and long URLs. Placed after the base theme in the extension list, so its keys
+    // win the spec-order ties.
+    proseTheme = EditorView.theme(
+      {
+        // Scoped to the content node (not the editor root) so the base theme's root font-size
+        // never contests it, and so the 72ch measure resolves against the prose type step.
+        '.cm-content': { fontSize: '1.0625rem', lineHeight: '1.9', maxWidth: '72ch', margin: '0 auto' },
       },
       { dark: isDark },
     );
+    markupTheme = EditorView.theme({ '.cm-content': { lineHeight: '1.8' } }, { dark: isDark });
 
     modes = modesMod;
     focusCompartment = new stateMod.Compartment();
     typewriterCompartment = new stateMod.Compartment();
+    surfaceCompartment = new stateMod.Compartment();
 
     view = new EditorView({
       parent: host,
@@ -205,8 +337,13 @@ through the adapter's render. Swapping the editor stays a one-file change.
           EditorView.lineWrapping,
           languageMod.syntaxHighlighting(highlightMod.cairnHighlightStyle()),
           highlightMod.cairnDirectivePlugin(),
+          // Container folding: the fold system, the chevron and wash affordance, and the safety
+          // invariant. Placed after the directive plugin so its chevron widget on an opener row
+          // composes with the row's rail and gutter; its keymap is internal to the extension.
+          foldingMod.cairnFolding(),
           EditorView.contentAttributes.of({ spellcheck: 'true', autocorrect: 'on', autocapitalize: 'sentences' }),
           theme,
+          surfaceCompartment.of(surface === 'prose' ? proseTheme : markupTheme),
           EditorView.updateListener.of((update) => {
             if (update.docChanged) value = update.state.doc.toString();
           }),
@@ -239,11 +376,13 @@ through the adapter's render. Swapping the editor stays a one-file change.
   $effect(() => {
     const focus = focusMode;
     const typing = typewriter;
-    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment) return;
+    const posture = surface;
+    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment || !surfaceCompartment) return;
     view.dispatch({
       effects: [
         focusCompartment.reconfigure(focus ? modes.focusMode() : []),
         typewriterCompartment.reconfigure(typing ? modes.typewriterScroll() : []),
+        surfaceCompartment.reconfigure((posture === 'prose' ? proseTheme : markupTheme) ?? []),
       ],
     });
   });

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

@@ -19,6 +19,9 @@ interface Props {
     focusMode?: boolean;
     /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
     typewriter?: boolean;
+    /** The surface posture. Prose is the writing instrument (72ch measure, larger type, looser
+     *  leading); markup is the working surface (fills the card, denser). Prose by default. */
+    surface?: 'prose' | 'markup';
 }
 /**
  * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable

package/dist/components/MarkdownHelpDialog.svelte

@@ -6,6 +6,8 @@ Built on a native <dialog>, the DeleteDialog recipe; the host drives it through
 open(), so the component renders no trigger of its own.
 -->
 <script lang="ts">
+  import ShortcutsGrid from './ShortcutsGrid.svelte';
+
   let dialog = $state<HTMLDialogElement | null>(null);
 
   /** Open the cheat sheet. The trigger lives in the host (the edit page's editor footer). */
@@ -33,6 +35,7 @@ open(), so the component renders no trigger of its own.
       <tbody>
         <tr><td><code>## Heading</code></td><td>A heading</td></tr>
         <tr><td><code>### Heading</code></td><td>A smaller heading</td></tr>
+        <tr><td><code>#### Heading</code></td><td>A fourth-level heading</td></tr>
         <tr><td><code>**bold**</code></td><td>Bold text</td></tr>
         <tr><td><code>*italic*</code></td><td>Italic text</td></tr>
         <tr><td><code>~~text~~</code></td><td>Crossed-out text</td></tr>
@@ -47,6 +50,8 @@ open(), so the component renders no trigger of its own.
         <tr><td><code>---</code></td><td>A horizontal rule</td></tr>
       </tbody>
     </table>
+    <h3 class="mt-4 mb-2 text-sm font-semibold">Keyboard shortcuts</h3>
+    <ShortcutsGrid />
     <p class="mt-3 text-sm">
       Lines starting with <code>:::</code> are layout blocks. Edit the text inside them and leave
       the <code>:::</code> lines alone.

package/dist/components/ShortcutsDialog.svelte

@@ -0,0 +1,37 @@
+<!--
+@component
+The keyboard shortcuts sheet, the third discoverability surface (the toolbar tooltips and the
+Markdown help dialog are the other two). A two-column grid pairs each label with its chord, with a
+closing line that the keys are always conveniences. Built on a native <dialog>, the
+MarkdownHelpDialog recipe; the host (the edit page) drives it through the exported open() and opens
+it on Ctrl+/, so the component renders no trigger of its own. Esc dismisses through the dialog's
+native behavior.
+-->
+<script lang="ts">
+  import { shortcutsClosingLine } from './editor-shortcuts.js';
+  import ShortcutsGrid from './ShortcutsGrid.svelte';
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+
+  /** Open the shortcuts sheet. The trigger lives in the host (the edit page's Ctrl+/ handler). */
+  export function open() {
+    dialog?.showModal();
+  }
+  function close() {
+    dialog?.close();
+  }
+</script>
+
+<dialog class="modal" aria-labelledby="cairn-shortcuts-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-shortcuts-title" class="text-base font-semibold">Keyboard shortcuts</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+    </div>
+    <ShortcutsGrid />
+    <p class="mt-3 text-xs text-[var(--color-muted)]">{shortcutsClosingLine}</p>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

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

@@ -0,0 +1,13 @@
+/**
+ * The keyboard shortcuts sheet, the third discoverability surface (the toolbar tooltips and the
+ * Markdown help dialog are the other two). A two-column grid pairs each label with its chord, with a
+ * closing line that the keys are always conveniences. Built on a native <dialog>, the
+ * MarkdownHelpDialog recipe; the host (the edit page) drives it through the exported open() and opens
+ * it on Ctrl+/, so the component renders no trigger of its own. Esc dismisses through the dialog's
+ * native behavior.
+ */
+declare const ShortcutsDialog: import("svelte").Component<Record<string, never>, {
+    open: () => void;
+}, "">;
+type ShortcutsDialog = ReturnType<typeof ShortcutsDialog>;
+export default ShortcutsDialog;

package/dist/components/ShortcutsGrid.svelte

@@ -0,0 +1,18 @@
+<!--
+@component
+The two-column shortcut grid, the shared body of both discoverability sheets (ShortcutsDialog and
+the Markdown help dialog). Each row pairs a label with its chord, read from the single
+editor-shortcuts source. The host wraps it with its own heading and any closing line.
+-->
+<script lang="ts">
+  import { editorShortcuts } from './editor-shortcuts.js';
+</script>
+
+<div class="grid grid-cols-1 gap-x-8 gap-y-1 text-sm sm:grid-cols-2">
+  {#each editorShortcuts as row (row.label)}
+    <div class="flex items-baseline justify-between gap-4">
+      <span>{row.label}</span>
+      <span class="font-mono text-[0.75rem] text-[var(--color-muted)]">{row.keys}</span>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,23 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * The two-column shortcut grid, the shared body of both discoverability sheets (ShortcutsDialog and
+ * the Markdown help dialog). Each row pairs a label with its chord, read from the single
+ * editor-shortcuts source. The host wraps it with its own heading and any closing line.
+ */
+declare const ShortcutsGrid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ShortcutsGrid = InstanceType<typeof ShortcutsGrid>;
+export default ShortcutsGrid;