@glw907/cairn-cms 0.53.0 → 0.55.0

package/src/lib/components/EditorToolbar.svelte

@@ -53,12 +53,12 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   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',
@@ -67,32 +67,45 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
         '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' },
   ];
 
@@ -254,6 +267,9 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     class="dropdown menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
   >
     {#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/src/lib/components/MarkdownEditor.svelte

@@ -77,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;
 
@@ -85,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}
@@ -97,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)',
@@ -127,6 +132,14 @@ 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(
       {
@@ -160,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)' },
@@ -177,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.
@@ -190,6 +274,12 @@ 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
@@ -247,6 +337,10 @@ 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),

package/src/lib/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/src/lib/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/src/lib/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/src/lib/components/cairn-admin.css

@@ -47,8 +47,9 @@
   --cairn-directive-rail-2: 82%;
   --cairn-directive-rail-3: 92%;
   /* Cursor-aware emphasis: the caret container's own bar steps to a full-strength accent rail
-     (also 1px wider) and an ink one notch past depth 3. Locked pairs on base-100: rail = solid
-     accent (5.28:1, non-text floor 3:1), ink 46% (7.47:1). Do not lighten without re-checking. */
+     at the same 2px width (strength only) and an ink one notch past depth 3. Locked pairs on
+     base-100: rail = solid accent (5.28:1, non-text floor 3:1), ink 46% (7.47:1). Do not
+     lighten without re-checking. */
   --cairn-directive-rail-active: 100%;
   --cairn-directive-ink-active: oklch(46% 0.16 300);
   /* The editor's inline-code chip, a quiet tint beside base-200. Locked pair: base-content ink
@@ -150,10 +151,10 @@
   --cairn-directive-rail-2: 74%;
   --cairn-directive-rail-3: 86%;
   /* Cursor-aware emphasis on dark: the caret container's own bar steps to a solid accent rail
-     (also 1px wider) and an ink one notch past depth 3. Locked pairs on base-100: rail = solid
-     accent (5.86:1, non-text floor 3:1), ink 82% (8.84:1, priced on the gamut-clipped sRGB
-     render; the 0.14 chroma sits outside sRGB at this lightness). Do not darken without
-     re-checking. */
+     at the same 2px width (strength only) and an ink one notch past depth 3. Locked pairs on
+     base-100: rail = solid accent (5.86:1, non-text floor 3:1), ink 82% (8.84:1, priced on the
+     gamut-clipped sRGB render; the 0.14 chroma sits outside sRGB at this lightness). Do not
+     darken without re-checking. */
   --cairn-directive-rail-active: 100%;
   --cairn-directive-ink-active: oklch(82% 0.14 300);
   /* The inline-code chip on dark sits one step above base-100 so it reads raised. Locked pair:
@@ -298,12 +299,24 @@
     text-align: start;
   }
 
-  /* The admin topbar plus the edit page's sticky action header stack about 120px of veil over the
-     top of the content column, and a control the browser scrolls into view could land hidden
-     beneath them (WCAG 2.4.11 Focus Not Obscured). The scroll margin keeps any focus or fragment
-     scroll clear of the whole sticky stack. */
+  /* The same leveling for every bare admin button, not only menu items: a button styled with
+     utilities (the footer's posture segments and mode toggles, a list's sort-column headers, the
+     zen chip's exit) otherwise keeps the UA outset border and gray fill, since the admin omits
+     global Preflight. A .btn keeps its full DaisyUI chrome, and a utility (a bg-*, a border-l for
+     a segment divider) still wins from the utilities layer, so a control opts back into a border
+     or fill by naming it. */
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) button:not(.btn) {
+    border: 0 solid;
+    background-color: transparent;
+    font: inherit;
+    color: inherit;
+  }
+
+  /* The one header band is the 4rem topbar, and a control the browser scrolls into view could land
+     hidden beneath it (WCAG 2.4.11 Focus Not Obscured). The scroll margin keeps any focus or
+     fragment scroll clear of the sticky band, with a little slack. */
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) :is(a, button, input, textarea, select, summary, [tabindex]) {
-    scroll-margin-top: 8.5rem;
+    scroll-margin-top: 5.5rem;
   }
 }