@glw907/cairn-cms 0.50.0 → 0.51.0

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.51.0
+
+The `svelte` peer dependency floor rises from `^5.0.0` to `^5.56.3`, turning the 0.40.0 advisory
+into an enforced range: consumer sites compile the shipped `.svelte` sources, and svelte `5.56.1`
+miscompiles parenthesized boolean groupings. `cairn-doctor` gains a `config.dependency-floors`
+check in its default set, which compares the lockfile's resolved `svelte` and `@sveltejs/kit`
+versions against the peer ranges the installed engine declares.
+
+Consumers must: raise the `svelte` devDependency range to at least `^5.56.3` (and `@sveltejs/kit`
+to `^2.12` where it sits lower) and reinstall so the lockfile re-resolves. A site pinning svelte
+below the floor now draws an npm peer warning or resolution failure on install, and the doctor
+reports the below-floor version as a blocker.
+
+The edit page's preview now renders inside a sandboxed iframe whose document links the site's own
+stylesheets, so an entry proofs in the site's real styling without that CSS ever touching the
+admin document. The adapter gains an optional `preview` member naming the compiled CSS URLs (a
+Vite `?url` import resolves the hashed asset) plus `bodyClass` and `containerClass` for the site's
+body classes and content wrapper, and a `byConcept` map overrides either class per concept for a
+site whose posts and pages wrap content differently. While Preview shows, the sidebar steps aside
+so the document takes the full width, and a width menu on the Preview tab sizes the frame to
+Desktop, Tablet, Phone, or Small phone, persisted per browser.
+
+Consumers should: wire `preview` in the adapter, referencing the sheet only through `?url` and
+linking the same URL from the site layout, the way
+[the adapter guide](docs/guides/define-an-adapter-and-schema.md) shows. Without the knob the
+preview renders unstyled markup behind a one-line hint.
+
+The editor's directive highlighting now recognizes labeled and attributed `:::` openers and fences
+of four or more colons, where before only bare closers matched, and nested containers step their
+band and rail tint by depth. No consumer action.
+
+`cairn-doctor` derives its missing inputs from the repo it runs in: the backend owner and repo
+plus the sender address come from evaluating the site's config module through the manifest bin's
+Vite machinery, and the Cloudflare account id comes from the wrangler config, with flags and
+environment variables taking precedence. A new `--probe <url>` flag runs a zero-side-effect live
+check against the deployed admin's sign-in surface: the login envelope, the CSRF cookie and field,
+and the uniform non-leak answer to a stranger's sign-in request. Consumers may: drop the `--from`
+and `--repo` flags from doctor invocations and run `npx cairn-doctor --probe <url>` after a
+deploy.
+
 ## 0.50.0
 
 The admin now mounts as one catch-all route. A new `createCairnAdmin(runtime, deps)` facade

package/dist/components/EditPage.svelte

@@ -6,13 +6,16 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
 toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
 swap the editing surface for the rendered preview inside the same card; every visit lands on
-Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+carries the breadcrumb, the status badges, the save-state indicator,
 and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
 pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
 transient flashes, and the editor card's footer holds the word count and the Markdown help.
 -->
 <script lang="ts">
-  import { untrack } from 'svelte';
+  import { flushSync, untrack } from 'svelte';
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import CsrfField from './CsrfField.svelte';
@@ -26,6 +29,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   import MarkdownHelpDialog from './MarkdownHelpDialog.svelte';
   import { cairnLinkCompletionSource } from './link-completion.js';
   import { unwrapCairnLink, type FormatKind } from './markdown-format.js';
+  import { buildPreviewDoc, deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
   import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
@@ -97,6 +101,16 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   // The edit form element, for the Ctrl/Cmd+S shortcut's requestSubmit.
   let editForm = $state<HTMLFormElement | null>(null);
 
+  // A required sidebar field hidden by Preview cannot take the browser's validation report: an
+  // invisible control is unfocusable, so the browser cancels the save silently with no message.
+  // This capture-phase invalid listener flips back to Write first, and flushSync forces the pane
+  // swap inside the event, so the report that follows the invalid events lands on a visible
+  // control and the author sees what blocked the save.
+  function onFormInvalid() {
+    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
@@ -150,6 +164,24 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   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);
+  }
+  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>(() => {});
   let insertLink = $state.raw<(href: string, title: string) => void>(() => {});
   // The editor's current selection, registered by MarkdownEditor on mount; the web link dialog
@@ -388,7 +420,13 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         }
       }
     }, 150);
-    return () => clearTimeout(handle);
+    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.
@@ -575,7 +613,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   bind:this={editForm}
   onsubmit={onEditSubmit}
   oninput={onFormInput}
-  class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6"
+  oninvalidcapture={onFormInvalid}
+  class={mode === 'preview' ? '' : 'lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6'}
 >
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
@@ -602,7 +641,7 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       role="group"
       aria-label="Editor"
     >
-      <EditorToolbar {format} {mode} onMode={setMode}>
+      <EditorToolbar {format} {mode} onMode={setMode} {device} onDevice={setDevice}>
         {#snippet insertControls()}
           <!-- Plain triggers only: the dialogs they open hold their own <form> elements, so the
                dialogs themselves mount outside the edit form at the bottom of this component. -->
@@ -668,16 +707,53 @@ transient flashes, and the editor card's footer holds the word count and the Mar
         />
       </div>
       {#if mode === 'preview'}
-        <!-- tabindex 0: the pane holds no focusable content, so it is itself a tab stop (the
-             tabpanel pattern's completeness requirement). -->
-        <div id="cairn-pane-preview" role="tabpanel" aria-labelledby="cairn-tab-preview" tabindex="0" class="prose max-w-none p-4">
-          {#if previewHtml}
-            {@html previewHtml}
-          {:else if previewFailed}
-            <p class="text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
-          {:else}
-            <p class="text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
-          {/if}
+        <!-- The preview ground: recessed under the floating frame card so the page reads as a
+             sheet on the desk. tabindex 0 only while a message shows in place of the iframe;
+             with the iframe up the frame itself is the pane's focusable content (the tabpanel
+             pattern's completeness requirement). -->
+        <div
+          id="cairn-pane-preview"
+          role="tabpanel"
+          aria-labelledby="cairn-tab-preview"
+          tabindex={previewHtml && !previewFailed ? undefined : 0}
+          class="bg-base-200 px-4 py-6 lg:px-8"
+        >
+          <!-- The frame column: centered, sized by the picked device (capped at the pane), with
+               the width eased; the admin sheet's prefers-reduced-motion rule squashes the move. -->
+          <div
+            class="cairn-preview-frame mx-auto max-w-full transition-[width] duration-300"
+            style:width={activeDevice.width === null ? '100%' : `${activeDevice.width}px`}
+          >
+            {#if activeDevice.width !== null}
+              <p class="mb-2 text-right text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">
+                {deviceLabel(activeDevice)}
+              </p>
+            {/if}
+            {#if !data.preview}
+              <p class="mb-2 text-xs text-[var(--color-muted)]">
+                Preview shows unstyled markup until the adapter's preview option names the site's stylesheets.
+              </p>
+            {/if}
+            <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]">
+              {#if previewFailed}
+                <p class="p-4 text-sm text-[var(--color-muted)]">The preview could not render this content.</p>
+              {:else if !previewHtml}
+                <p class="p-4 text-sm text-[var(--color-muted)]">Nothing to preview yet.</p>
+              {:else}
+                <!-- The site's render pipeline already sanitized the html (the floor strips
+                     scripts and handlers); the empty sandbox is belt and braces on top. The
+                     frame document's base tag targets every link at a new tab, which the
+                     sandbox (no allow-popups) blocks, so a proofing click never navigates the
+                     admin or the frame itself. tabindex 0 keeps the scrollable preview
+                     keyboard-reachable (an iframe is not a sequential tab stop by itself); on
+                     a link-heavy page that one inert Tab stop is a deliberate tradeoff. The
+                     a11y rule reads any tabindex on a non-interactive element as a smell, but
+                     a scrollable region is the recognized exception. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+                <iframe sandbox="" tabindex="0" title="Page preview" srcdoc={previewDoc} class="block h-[70vh] w-full"></iframe>
+              {/if}
+            </div>
+          </div>
         </div>
       {/if}
       <!-- The card footer, part of the same instrument frame. It stays up in Preview too, so the
@@ -696,7 +772,9 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     </div>
   </div>
 
-  <aside class="lg:order-2 mt-4 lg:mt-0">
+  <!-- Preview takes the full surface: the sidebar hides (never unmounts, so the uncontrolled
+       field edits survive the round trip) and the editor column above spans the whole width. -->
+  <aside class="lg:order-2 mt-4 lg:mt-0" class:hidden={mode === 'preview'}>
     <!-- One sidebar card, three labeled groups. Each group is its own fieldset so its eyebrow is
          a real legend that screen readers announce with the fields it holds. -->
     <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-5 p-4 shadow-[var(--cairn-shadow)]">

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

@@ -27,7 +27,10 @@ interface Props {
  * remaining fields group in the sidebar under Details, Visibility (the draft boolean as the Hidden
  * toggle), and Address (the slug with the Change URL trigger). The toolbar's Write/Preview tabs
  * swap the editing surface for the rendered preview inside the same card; every visit lands on
- * Write. A sticky glass header carries the breadcrumb, the status badges, the save-state indicator,
+ * Write. Preview renders inside a sandboxed iframe that links the site's own stylesheets (the
+ * adapter's `preview` knob), takes the full content width (the sidebar hides until Write), and
+ * sizes to a persisted device width picked from the toolbar's capsule. A sticky glass header
+ * carries the breadcrumb, the status badges, the save-state indicator,
  * and the lifecycle actions: Save, Publish (riding the same form via formaction while edits are
  * pending), and an overflow menu for Discard and Delete. One feedback strip under the header carries the
  * transient flashes, and the editor card's footer holds the word count and the Markdown help.

package/dist/components/EditorToolbar.svelte

@@ -3,12 +3,15 @@
 The editor card's instrument strip. Three button groups divided by hairlines (Text, Structure with a
 More overflow menu, then the host's Insert controls) and the Write/Preview segmented control pinned
 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. The glyphs
-are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
+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 glyphs are stroke SVG icons in the admin's
+house style (24x24 viewBox, `currentColor`, round caps).
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { FormatKind } from './markdown-format.js';
+  import { deviceLabel, previewDevice, previewDevices, type PreviewDeviceId } from './preview-doc.js';
 
   interface Props {
     /** Apply a markdown transform to the editor's current selection. */
@@ -17,11 +20,16 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     mode: 'write' | 'preview';
     /** Ask the host to switch panes. */
     onMode: (m: 'write' | 'preview') => void;
+    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
+    device?: PreviewDeviceId;
+    /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
+     *  while Preview shows. */
+    onDevice?: (id: PreviewDeviceId) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
   }
 
-  let { format, mode, onMode, insertControls }: Props = $props();
+  let { format, mode, onMode, device = 'desktop', onDevice, insertControls }: Props = $props();
 
   // Each icon is a set of stroke `<path>` d-strings rendered into the shared 24x24 svg below, so the
   // markup stays declarative (no per-icon raw html). Paths follow the house outline style.
@@ -89,6 +97,19 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
     if (moreMenu?.matches(':popover-open')) moreMenu.hidePopover();
   }
 
+  // The device menu's popover element and its open state, mirrored from the toggle event into
+  // aria-expanded on the trigger (the More menu's pattern).
+  let deviceMenu = $state<HTMLUListElement | null>(null);
+  let deviceOpen = $state(false);
+  const activeDevice = $derived(previewDevice(device));
+  // Whether the device trigger renders as the capsule's third segment.
+  const showDeviceTrigger = $derived(mode === 'preview' && !!onDevice);
+
+  function pickDevice(id: PreviewDeviceId) {
+    onDevice?.(id);
+    if (deviceMenu?.matches(':popover-open')) deviceMenu.hidePopover();
+  }
+
   let toolbarEl = $state<HTMLDivElement | null>(null);
   // The roving tab stop's position among the strip's enabled top-level controls. The Write/Preview
   // tabs join the toolbar's roving order instead of managing their own arrow keys: the ARIA toolbar
@@ -156,13 +177,20 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
 {/snippet}
 
 {#snippet tab(m: 'write' | 'preview', label: string)}
+  <!-- The capsule look is manual rounding, not daisyUI's .join: join radii follow direct
+       children, and the device trigger must sit outside the tablist (ARIA required children),
+       so the segments square their shared edges themselves. Preview squares its right edge only
+       while the trigger extends the capsule. -->
   <button
     type="button"
     role="tab"
     id={`cairn-tab-${m}`}
     aria-selected={mode === m}
     aria-controls={`cairn-pane-${m}`}
-    class="join-item btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class="btn btn-sm {mode === m ? 'btn-active' : 'btn-ghost'}"
+    class:rounded-r-none={m === 'write' || showDeviceTrigger}
+    class:rounded-l-none={m === 'preview'}
+    class:-ml-px={m === 'preview'}
     onclick={() => onMode(m)}
   >
     {label}
@@ -230,9 +258,52 @@ are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`,
   {/if}
 
   <!-- The host renders the matching tabpanels (#cairn-pane-write and #cairn-pane-preview) below
-       the strip inside the same editor card. -->
-  <div class="join ml-auto" role="tablist" aria-label="Editor view">
-    {@render tab('write', 'Write')}
-    {@render tab('preview', 'Preview')}
+       the strip inside the same editor card. The tablist wrapper holds ONLY the two tabs (ARIA
+       required children: anything else in a tablist makes assistive tech miscount the tabs).
+       While Preview shows, the device trigger reads as the capsule's third segment from the
+       flex row right after the wrapper; it is a plain button, not a tab. -->
+  <div class="ml-auto flex items-center">
+    <div role="tablist" aria-label="Editor view" class="flex items-center">
+      {@render tab('write', 'Write')}
+      {@render tab('preview', 'Preview')}
+    </div>
+    {#if showDeviceTrigger}
+      <button
+        type="button"
+        class="btn btn-sm btn-ghost gap-1 rounded-l-none -ml-px"
+        title="Preview width"
+        aria-expanded={deviceOpen}
+        popovertarget="cairn-preview-device-menu"
+        style="anchor-name:--cairn-preview-device"
+      >
+        <span class="sr-only">Preview width:</span>
+        {activeDevice.label}
+        {@render strokeIcon(['m6 9 6 6 6-6'])}
+      </button>
+    {/if}
   </div>
+  {#if showDeviceTrigger}
+    <!-- The device list mirrors the More menu exactly: a DaisyUI v5 popover dropdown of plain
+         buttons, with the active pick carried by aria-pressed and the check glyph. Deliberately
+         NOT the ARIA menu pattern: menu roles promise interactions this list does not have. -->
+    <ul
+      bind:this={deviceMenu}
+      popover="auto"
+      id="cairn-preview-device-menu"
+      style="position-anchor:--cairn-preview-device"
+      ontoggle={(e) => (deviceOpen = e.newState === 'open')}
+      class="dropdown dropdown-end menu menu-sm bg-base-100 rounded-box w-44 border border-[var(--cairn-card-border)] p-1 shadow-[var(--cairn-shadow)]"
+    >
+      {#each previewDevices as d (d.id)}
+        <li>
+          <button type="button" aria-pressed={device === d.id} onclick={() => pickDevice(d.id)}>
+            <span class="grow">{deviceLabel(d)}</span>
+            {#if device === d.id}
+              {@render strokeIcon(['M20 6 9 17l-5-5'])}
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
 </div>

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { FormatKind } from './markdown-format.js';
+import { type PreviewDeviceId } from './preview-doc.js';
 interface Props {
     /** Apply a markdown transform to the editor's current selection. */
     format: (kind: FormatKind) => void;
@@ -7,6 +8,11 @@ interface Props {
     mode: 'write' | 'preview';
     /** Ask the host to switch panes. */
     onMode: (m: 'write' | 'preview') => void;
+    /** The active preview-frame device, shown on the device trigger. Desktop when absent. */
+    device?: PreviewDeviceId;
+    /** Pick a preview-frame width. When set, a device trigger joins the Write/Preview capsule
+     *  while Preview shows. */
+    onDevice?: (id: PreviewDeviceId) => void;
     /** The host's Insert controls (link picker, component insert, image), rendered in the Insert group. */
     insertControls?: Snippet;
 }
@@ -14,8 +20,10 @@ interface Props {
  * The editor card's instrument strip. Three button groups divided by hairlines (Text, Structure with a
  * More overflow menu, then the host's Insert controls) and the Write/Preview segmented control pinned
  * 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. The glyphs
- * are stroke SVG icons in the admin's house style (24x24 viewBox, `currentColor`, round caps).
+ * 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 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

@@ -61,9 +61,16 @@ through the adapter's render. Swapping the editor stays a one-file change.
     // Mirror the admin theme into CodeMirror's own dark flag, so its base chrome (the autocomplete
     // 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 ink, one rule for the fence, leaf, and inline decorations.
+    // The directive machinery treatment. The fence bands and content rails step their alpha by
+    // nesting depth 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. The deeper
+    // bands swap in a darker ink (--cairn-directive-ink-N) to hold AA on their own tint.
+    const band = (depth: number, fallback: string) =>
+      `color-mix(in oklab, var(--color-accent) var(--cairn-directive-band-${depth}, ${fallback}), transparent)`;
+    const rail = (depth: number, fallback: string) =>
+      `inset 2px 0 0 0 color-mix(in oklab, var(--color-accent) var(--cairn-directive-rail-${depth}, ${fallback}), transparent)`;
     const directiveInk = {
-      backgroundColor: 'color-mix(in oklab, var(--color-accent) 8%, transparent)',
+      backgroundColor: band(1, '8%'),
       color: 'var(--color-accent)',
     };
     const theme = EditorView.theme(
@@ -90,6 +97,17 @@ through the adapter's render. Swapping the editor stays a one-file change.
         },
         '.cm-line': { padding: '0' },
         '.cm-cairn-directive-fence': directiveInk,
+        '.cm-cairn-directive-fence.cm-cairn-depth-2': {
+          backgroundColor: band(2, '14%'),
+          color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))',
+        },
+        '.cm-cairn-directive-fence.cm-cairn-depth-3': {
+          backgroundColor: band(3, '20%'),
+          color: 'var(--cairn-directive-ink-3, oklch(48% 0.16 300))',
+        },
+        '.cm-cairn-directive-content.cm-cairn-depth-1': { boxShadow: rail(1, '75%') },
+        '.cm-cairn-directive-content.cm-cairn-depth-2': { boxShadow: rail(2, '82%') },
+        '.cm-cairn-directive-content.cm-cairn-depth-3': { boxShadow: rail(3, '90%') },
         '.cm-cairn-directive-leaf': directiveInk,
         '.cm-cairn-directive-inline': directiveInk,
       },

package/dist/components/cairn-admin.css

@@ -176,6 +176,14 @@
     outline-offset: -1px;
   }
 
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .menu li > button:not(.btn) {
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    background-color: #0000;
+    border: 0 solid;
+  }
+
   :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) :is(a, button, input, textarea, select, summary, [tabindex]) {
     scroll-margin-top: 8.5rem;
   }
@@ -3400,15 +3408,6 @@
     }
   }
 
-  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:not(:first-child, :disabled, [disabled], .btn-disabled)) {
-    margin-block-start: 0;
-    margin-inline-start: calc(var(--border, 1px) * -1);
-  }
-
-  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:is(:disabled, [disabled], .btn-disabled)) {
-    border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
-  }
-
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .modal-action {
       justify-content: flex-end;
@@ -3503,6 +3502,10 @@
     margin-bottom: calc(var(--spacing) * 7);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .-ml-px {
+    margin-left: -1px;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -3919,6 +3922,10 @@
     height: calc(var(--spacing) * 16);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-\[70vh\] {
+    height: 70vh;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-h-\[60vh\] {
     max-height: 60vh;
   }
@@ -4037,6 +4044,10 @@
     max-width: 30%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-full {
+    max-width: 100%;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-md {
     max-width: var(--container-md);
   }
@@ -4337,6 +4348,16 @@
     border-radius: var(--radius-xl);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4996,6 +5017,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5418,6 +5445,14 @@
   --color-secondary-content: oklch(98% .004 75);
   --color-accent: oklch(54% .16 300);
   --color-accent-content: oklch(98% .012 300);
+  --cairn-directive-band-1: 8%;
+  --cairn-directive-band-2: 14%;
+  --cairn-directive-band-3: 20%;
+  --cairn-directive-ink-2: oklch(50% .16 300);
+  --cairn-directive-ink-3: oklch(48% .16 300);
+  --cairn-directive-rail-1: 75%;
+  --cairn-directive-rail-2: 82%;
+  --cairn-directive-rail-3: 90%;
   --color-neutral: oklch(32% .012 75);
   --color-neutral-content: oklch(96% .004 75);
   --color-info: oklch(52% .12 240);
@@ -5459,6 +5494,14 @@
   --color-secondary-content: oklch(20% .008 75);
   --color-accent: oklch(70% .14 300);
   --color-accent-content: oklch(20% .04 300);
+  --cairn-directive-band-1: 10%;
+  --cairn-directive-band-2: 16%;
+  --cairn-directive-band-3: 22%;
+  --cairn-directive-ink-2: oklch(74% .14 300);
+  --cairn-directive-ink-3: oklch(78% .14 300);
+  --cairn-directive-rail-1: 65%;
+  --cairn-directive-rail-2: 75%;
+  --cairn-directive-rail-3: 85%;
   --color-neutral: oklch(80% .01 75);
   --color-neutral-content: oklch(22% .008 75);
   --color-info: oklch(72% .12 240);
@@ -5487,6 +5530,11 @@
   box-sizing: border-box;
 }
 
+:where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .menu li > :is(button, a):focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-theme="cairn-admin"] *, [data-theme="cairn-admin-dark"] * {
     scroll-behavior: auto !important;

package/dist/components/editor-highlight.d.ts

@@ -5,5 +5,6 @@ export declare function cairnHighlightStyle(): HighlightStyle;
 /** Line and mark decorations flagging remark-directive machinery. */
 export declare function cairnDirectivePlugin(): ViewPlugin<{
     decorations: DecorationSet;
+    depths: (number | null)[];
     update(update: ViewUpdate): void;
 }, undefined>;