@voithos-labs/aragonite 0.10.4 → 0.10.7

package/dist/plugins/mermaid/mermaid-renderer.js

@@ -1,35 +1,16 @@
 /**
- * The renderer-adapter seam: this module holds the injected renderer slot and the
- * memo, never the engine, which is confined to the `/renderer` subpath so it never
- * rides the core bundle. The engine travels by module because `MermaidBlock` mounts
- * with standard block props. No default: absent a renderer the code renders statically.
+ * Where the mermaid renderer is plugged in: `mermaidSlot` holds it and its cache, never mermaid
+ * itself, which stays behind the `/renderer` subpath so it never lands in the main bundle.
+ * `MermaidBlock` mounts with the standard block props, so it reads the renderer from here.
  */
-import { createBoundedMemo } from '../../plugin';
-/** Exported so the eviction test derives its churn count from the real bound. */
-export const MERMAID_MEMO_CAP = 256;
-const newMemo = () => createBoundedMemo({ cap: MERMAID_MEMO_CAP });
-let activeRenderer = null;
-// The primitive owns no reset, so re-instantiation is how a renderer swap clears it.
-let memo = newMemo();
+import { createAsyncRendererSlot } from '../../plugin';
+export const mermaidSlot = createAsyncRendererSlot({
+    key: (code) => code,
+    missing: () => ({ error: 'renderer not configured' }),
+    failed: (_code, error) => ({ error: error instanceof Error ? error.message : String(error) })
+});
 let renderSeq = 0;
-export function setMermaidRenderer(renderer) {
-    activeRenderer = renderer;
-    memo = newMemo();
-}
-export function hasMermaidRenderer() {
-    return activeRenderer !== null;
-}
-/**
- * Theme belongs in the memo key rather than in a cache reset, so flipping back is a hit; an
- * SVG string needs no per-caller clone. A parse failure resolves to an `error` and caches
- * like a success. `theme` is required, so a caller cannot forget it and still compile.
- */
-export function renderMermaid(code, theme) {
-    // NUL-joined so no (theme, code) pair can concatenate into another's key.
-    return memo(`${theme}\0${code}`, () => {
-        const renderer = activeRenderer;
-        return renderer
-            ? renderer(code, `aragonite-mermaid-${renderSeq++}`, { theme }).then((svg) => ({ svg }), (reason) => ({ error: reason instanceof Error ? reason.message : String(reason) }))
-            : Promise.resolve({ error: 'renderer not configured' });
-    });
+/** Mermaid needs a fresh element id per render, which the slot's `(code, ctx)` call leaves out. */
+export function adaptMermaidRenderer(renderer) {
+    return (code, { theme }) => renderer(code, `aragonite-mermaid-${renderSeq++}`, { theme }).then((svg) => ({ svg }));
 }

package/dist/plugins/mermaid/register.d.ts

@@ -1,7 +1,7 @@
 /**
- * The renderer is injected because the engine is the consumer's dependency; absent
- * one the block renders its code statically. The plugin unit installs this setup once
- * per process, so it runs unguarded.
+ * The renderer is passed in because mermaid is the consumer's dependency; without one the
+ * block shows its code as plain text. The plugin installs this setup once per process, so it
+ * runs unguarded.
  */
 import { type EditorPlugin } from '../../plugin';
 import { type MermaidRenderer } from './mermaid-renderer';

package/dist/plugins/mermaid/register.js

@@ -1,11 +1,11 @@
 /**
- * The renderer is injected because the engine is the consumer's dependency; absent
- * one the block renders its code statically. The plugin unit installs this setup once
- * per process, so it runs unguarded.
+ * The renderer is passed in because mermaid is the consumer's dependency; without one the
+ * block shows its code as plain text. The plugin installs this setup once per process, so it
+ * runs unguarded.
  */
 import { definePluginBlock } from '../../plugin';
 import { registerMermaidKind, MERMAID } from './mermaid-kind';
-import { setMermaidRenderer } from './mermaid-renderer';
+import { adaptMermaidRenderer, mermaidSlot } from './mermaid-renderer';
 import MermaidBlock from './MermaidBlock.svelte';
 export function mermaidPlugin(options) {
     return definePluginBlock({
@@ -13,7 +13,7 @@ export function mermaidPlugin(options) {
         kind: MERMAID,
         component: MermaidBlock,
         register() {
-            setMermaidRenderer(options?.renderer ?? null);
+            mermaidSlot.set(options?.renderer ? adaptMermaidRenderer(options.renderer) : null);
             registerMermaidKind();
         }
     });

package/dist/plugins/mermaid/renderer.d.ts

@@ -1,11 +1,11 @@
 /**
- * The engine adapter behind the `@voithos-labs/aragonite/plugins/mermaid/renderer` subpath, the
- * consumer half of the injection seam. The dynamic import keeps the engine off module
- * eval, so nothing touches `document` until a diagram actually renders.
+ * The mermaid adapter behind the `@voithos-labs/aragonite/plugins/mermaid/renderer` subpath,
+ * the half a consumer supplies. The dynamic import keeps mermaid out of module evaluation, so
+ * nothing touches `document` until a diagram actually renders.
  */
 import type { MermaidRenderer } from './mermaid-renderer';
 /**
- * Chained, not concurrent: the site config is process-global, so two renders straddling a
- * theme flip would interleave and one diagram would come back half-themed.
+ * One after another, not together: the config is global to the process, so two renders either
+ * side of a theme change would interleave and one diagram would come back half-themed.
  */
 export declare const mermaidRenderer: MermaidRenderer;

package/dist/plugins/mermaid/renderer.js

@@ -1,7 +1,7 @@
 /**
- * The engine adapter behind the `@voithos-labs/aragonite/plugins/mermaid/renderer` subpath, the
- * consumer half of the injection seam. The dynamic import keeps the engine off module
- * eval, so nothing touches `document` until a diagram actually renders.
+ * The mermaid adapter behind the `@voithos-labs/aragonite/plugins/mermaid/renderer` subpath,
+ * the half a consumer supplies. The dynamic import keeps mermaid out of module evaluation, so
+ * nothing touches `document` until a diagram actually renders.
  */
 /** Respread on every re-initialize, because mermaid's `initialize` replaces the site
  *  config rather than patching it. */
@@ -13,11 +13,8 @@ const BASE_CONFIG = {
     suppressErrorRendering: true
 };
 const MERMAID_THEMES = new Set(['default', 'base', 'dark', 'forest', 'neutral']);
-/**
- * Mermaid's own names pass through, so a consumer can name its editor theme `'forest'` and
- * get it; anything else falls to mermaid's light palette. Wrapping this injected renderer to
- * rewrite `context.theme` is how a custom theme maps.
- */
+/** Mermaid's own theme names pass through (an editor theme named `'forest'` gets it) and anything
+ *  else gets its light palette; wrap the renderer to map a custom theme onto one of mermaid's. */
 function toMermaidTheme(editorTheme) {
     return (MERMAID_THEMES.has(editorTheme) ? editorTheme : 'default');
 }
@@ -41,11 +38,11 @@ async function renderThemed(code, id, theme) {
     return svg;
 }
 /**
- * Chained, not concurrent: the site config is process-global, so two renders straddling a
- * theme flip would interleave and one diagram would come back half-themed.
+ * One after another, not together: the config is global to the process, so two renders either
+ * side of a theme change would interleave and one diagram would come back half-themed.
  */
 export const mermaidRenderer = (code, id, context) => {
-    const theme = toMermaidTheme(context?.theme ?? 'dark');
+    const theme = toMermaidTheme(context.theme);
     const svg = queue.then(() => renderThemed(code, id, theme));
     // The chain must survive a rejection, or one bad diagram strands every later render.
     queue = svg.then(() => { }, () => { });

package/dist/plugins/parrot/ParrotBlock.svelte

@@ -1,6 +1,6 @@
 <!-- ParrotBlock.svelte -->
 <script lang="ts">
-	import { createEditableLeaf, type NodeView } from '../../plugin';
+	import { createEditableLeaf, trimWhitespace, type NodeView } from '../../plugin';
 
 	let { node, index, myPath = [] }: { node: NodeView; index: number; myPath?: number[] } = $props();
 	let sourceEl: HTMLDivElement | undefined = $state();
@@ -220,13 +220,21 @@ Ol;......................................;l'
 cNd.........................................;lOc
 `
 	];
-	// One strip the CSS scrolls a frame at a time. The closing newline is load-bearing: a `pre`
+	// One strip the CSS scrolls a frame at a time. The closing newline matters: a `pre`
 	// drops a trailing blank line, and a strip a row short steps a fraction off every frame.
 	const REEL = FRAMES.join('\n') + '\n';
 	// The clip window's height, which is why every frame has to be the same number of rows.
 	const FRAME_ROWS = FRAMES[0].split('\n').length;
 
-	const caption = $derived(node.raw.slice('%%parrot'.length).trim());
+	// The caption is the rest of the marker line, trimmed, and `start` is where it sits in the
+	// source: `parrotCaretAtPoint` reads it off the element to map a press back to a byte.
+	function parrotCaption(raw: string): { text: string; start: number } {
+		const rest = raw.slice('%%parrot'.length);
+		const text = trimWhitespace(rest);
+		return { text, start: '%%parrot'.length + rest.indexOf(text) };
+	}
+
+	const caption = $derived(parrotCaption(node.raw));
 
 	export const editable = true;
 	export const focusable = true;
@@ -237,8 +245,8 @@ cNd.........................................;lOc
 	export const getSelectedText = leaf.getSelectedText;
 	export const setSelection = leaf.setSelection;
 	export const measurePartialRects = leaf.measurePartialRects;
-	export const runCommand = leaf.runCommand;
 	export const insertMarkdown = leaf.insertMarkdown;
+	export const afterSourceCommit = leaf.afterSourceCommit;
 </script>
 
 <div
@@ -258,11 +266,12 @@ cNd.........................................;lOc
 	{:else}
 		<div
 			class="parrot-caption"
+			data-caption-start={caption.start}
 			role="button"
 			tabindex="-1"
 			aria-label="Party parrot caption (click to edit)"
 		>
-			{caption}
+			{caption.text}
 		</div>
 	{/if}
 </div>
@@ -282,7 +291,7 @@ cNd.........................................;lOc
 		overflow-x: auto;
 		overflow-y: hidden;
 		scrollbar-width: none;
-		/* chrome, not content: every frame is in the DOM and none of them belong in a copy */
+		/* decoration, not content: every frame is in the DOM and none of them belong in a copy */
 		user-select: none;
 		animation: parrot-hue 0.49s step-end infinite;
 	}

package/dist/plugins/parrot/ParrotBlock.svelte.d.ts

@@ -14,8 +14,8 @@ declare const ParrotBlock: import("svelte").Component<$$ComponentProps, {
     getSelectedText: () => string;
     setSelection: (start: number, end: number) => void;
     measurePartialRects: (startOffset: number, endOffset: number) => DOMRect[];
-    runCommand: (id: import("../../plugin").CommandId) => boolean;
-    insertMarkdown: (md: string) => boolean;
+    insertMarkdown: (md: string) => Promise<boolean>;
+    afterSourceCommit: (run: () => void) => void;
 }, "">;
 type ParrotBlock = ReturnType<typeof ParrotBlock>;
 export default ParrotBlock;

package/dist/plugins/parrot/parrot-plugin.js

@@ -2,15 +2,15 @@
 import { caretOffsetAtPoint, declarePluginKind, definePluginBlock, registerBlockKind, registerBlockOpener, simpleLeafClosure } from '../../plugin';
 import ParrotBlock from './ParrotBlock.svelte';
 export const PARROT = 'parrot';
-/** Where a press in the block puts the caret. The caption renders the bytes after `%%parrot `,
- *  so an offset in it sits that far along the source; the revealed source IS the source. */
+/** Where a click in the block puts the caret. The caption says where it starts in the source,
+ *  so an offset in it sits that far along; the shown source is the source itself. */
 function parrotCaretAtPoint(blockEl, clientX, clientY) {
     const source = blockEl.querySelector('.parrot-source');
     const view = source ?? blockEl.querySelector('.parrot-caption');
     if (!view)
         return null;
     const offset = caretOffsetAtPoint(view, clientX, clientY) ?? 0;
-    return { path: [], offset: source ? offset : offset + '%%parrot '.length };
+    return { path: [], offset: source ? offset : offset + Number(view.dataset.captionStart) };
 }
 function registerParrotBlock() {
     const parrot = declarePluginKind(PARROT);

package/dist/plugins/slash-commands/filter.d.ts

@@ -0,0 +1,23 @@
+/**
+ * How a `/` query picks rows: a prefix match on the label or a keyword, and at most one argument
+ * after the first space. Pure, so the list's narrowing is testable without an editor.
+ */
+export interface FilterableEntry {
+    readonly label: string;
+    readonly keywords: readonly string[];
+    readonly takesArgument: boolean;
+}
+export interface SplitQuery {
+    /** The words before the first space: what names the entry. */
+    head: string;
+    /** What follows the first space, or null when the query has none. */
+    argument: string | null;
+}
+export declare function splitQuery(query: string): SplitQuery;
+/** The entries whose label or a keyword starts with `head`, ignoring case, in their given order. */
+export declare function filterEntries<T extends FilterableEntry>(entries: readonly T[], head: string): T[];
+/**
+ * Whether the session outlives this query. A space ends it unless the words before it name
+ * exactly one entry that takes an argument, so `and / or` stays text; the argument is one word.
+ */
+export declare function acceptsQuery(entries: readonly FilterableEntry[], query: string): boolean;

package/dist/plugins/slash-commands/filter.js

@@ -0,0 +1,31 @@
+/**
+ * How a `/` query picks rows: a prefix match on the label or a keyword, and at most one argument
+ * after the first space. Pure, so the list's narrowing is testable without an editor.
+ */
+export function splitQuery(query) {
+    const space = query.search(/\s/);
+    if (space === -1)
+        return { head: query, argument: null };
+    return { head: query.slice(0, space), argument: query.slice(space + 1) };
+}
+/** The entries whose label or a keyword starts with `head`, ignoring case, in their given order. */
+export function filterEntries(entries, head) {
+    const wanted = head.toLowerCase();
+    return entries.filter((entry) => entry.label.toLowerCase().startsWith(wanted) ||
+        entry.keywords.some((keyword) => keyword.toLowerCase().startsWith(wanted)));
+}
+/**
+ * Whether the session outlives this query. A space ends it unless the words before it name
+ * exactly one entry that takes an argument, so `and / or` stays text; the argument is one word.
+ */
+export function acceptsQuery(entries, query) {
+    if (/[\r\n]/.test(query))
+        return false;
+    const { head, argument } = splitQuery(query);
+    if (argument === null)
+        return true;
+    if (/\s/.test(argument))
+        return false;
+    const named = filterEntries(entries, head);
+    return named.length === 1 && named[0].takesArgument;
+}

package/dist/plugins/slash-commands/index.d.ts

@@ -0,0 +1,2 @@
+export { slashCommandsPlugin, SLASH_COMMANDS_OPEN } from './slash-commands-plugin';
+export { SLASH_COMMANDS_MENU, type SlashCommandEntry, type SlashCommandsOptions } from './slash-source';

package/dist/plugins/slash-commands/index.js

@@ -0,0 +1,2 @@
+export { slashCommandsPlugin, SLASH_COMMANDS_OPEN } from './slash-commands-plugin';
+export { SLASH_COMMANDS_MENU } from './slash-source';

package/dist/plugins/slash-commands/slash-commands-plugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Slash commands: `/` at the start of a line or after a space lists the blocks to insert, three
+ * heading levels and the host's own rows. Built on public API alone: an inline-menu source, the
+ * insert catalogue, and a global command (`Mod+/`) that types the `/` for a keyboard or touch user.
+ */
+import { type EditorPlugin } from '../../plugin';
+import { type SlashCommandsOptions } from './slash-source';
+/** `runCommand(SLASH_COMMANDS_OPEN, 'table')` opens the list already narrowed to its argument. */
+export declare const SLASH_COMMANDS_OPEN = "slashCommands.open";
+/** `options` are every editor's defaults; an editor's `{ plugin, options }` entry replaces them
+ *  field by field, so passing `exclude` alone keeps these `entries`. */
+export declare function slashCommandsPlugin(options?: SlashCommandsOptions): EditorPlugin;

package/dist/plugins/slash-commands/slash-commands-plugin.js

@@ -0,0 +1,40 @@
+/**
+ * Slash commands: `/` at the start of a line or after a space lists the blocks to insert, three
+ * heading levels and the host's own rows. Built on public API alone: an inline-menu source, the
+ * insert catalogue, and a global command (`Mod+/`) that types the `/` for a keyboard or touch user.
+ */
+import { definePlugin, registerGlobalCommand } from '../../plugin';
+import { createSlashSource, SLASH_COMMANDS_MENU } from './slash-source';
+/** `runCommand(SLASH_COMMANDS_OPEN, 'table')` opens the list already narrowed to its argument. */
+export const SLASH_COMMANDS_OPEN = 'slashCommands.open';
+/** `options` are every editor's defaults; an editor's `{ plugin, options }` entry replaces them
+ *  field by field, so passing `exclude` alone keeps these `entries`. */
+export function slashCommandsPlugin(options = {}) {
+    checkEntries(options.entries);
+    return definePlugin({
+        name: 'slash-commands',
+        defaults: options,
+        parseOptions(raw) {
+            const { entries, exclude } = (raw ?? {});
+            checkEntries(entries);
+            return { entries, exclude };
+        },
+        setup(ctx) {
+            registerGlobalCommand(SLASH_COMMANDS_OPEN, (editor, arg) => editor.inlineMenus.open(SLASH_COMMANDS_MENU, {
+                query: typeof arg === 'string' ? arg : undefined
+            }), { chord: 'Mod+/' });
+            ctx.onEditor((editor) => {
+                const handle = editor.inlineMenus.addSource(createSlashSource(editor));
+                return () => handle.dispose();
+            });
+        }
+    });
+}
+/** A row that neither inserts nor runs would do nothing when picked, so it is refused up front. */
+function checkEntries(entries) {
+    for (const entry of entries ?? []) {
+        if ((entry.insert === undefined) === (entry.run === undefined)) {
+            throw new Error(`slashCommandsPlugin: entry '${entry.id}' needs exactly one of insert and run`);
+        }
+    }
+}

package/dist/plugins/slash-commands/slash-source.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The `/` list: the insert catalogue, three heading rows and the host's own entries, read fresh
+ * from the editor on every keystroke. A pick removes the `/query` bytes first (its `insert` is
+ * empty), then `onCommit` does the row's work through the editor's own entry points.
+ */
+import { type EditorContext, type InlineMenuSource, type MenuIconName } from '../../plugin';
+export declare const SLASH_COMMANDS_MENU = "slash-commands";
+interface SlashCommandEntryBase {
+    /** Unique among host rows; a built-in id here replaces that built-in row. */
+    id: string;
+    label: string;
+    icon?: MenuIconName;
+    /** Other words the query finds the row by. */
+    keywords?: readonly string[];
+}
+/** A host's own row: Markdown to insert, or a function to run. Never both, never neither. */
+export type SlashCommandEntry = SlashCommandEntryBase & ({
+    insert: string;
+    run?: never;
+    takesArgument?: never;
+} | {
+    /** Runs after the `/query` bytes are gone, with the argument typed after a space. */
+    run: (editor: EditorContext, argument?: string) => void;
+    /** Lets the list survive a space, so `/name word` hands `word` to `run`. */
+    takesArgument?: boolean;
+    insert?: never;
+});
+export interface SlashCommandsOptions {
+    /** Rows added after the built-in ones. */
+    entries?: readonly SlashCommandEntry[];
+    /** Built-in row ids to leave out: an insert catalogue id, or `h1`, `h2`, `h3`. */
+    exclude?: readonly string[];
+}
+/** The `/` source for one editor: its rows come from `editor.options` and the live catalogue. */
+export declare function createSlashSource(editor: EditorContext<SlashCommandsOptions>): InlineMenuSource;
+export {};

package/dist/plugins/slash-commands/slash-source.js

@@ -0,0 +1,108 @@
+/**
+ * The `/` list: the insert catalogue, three heading rows and the host's own entries, read fresh
+ * from the editor on every keystroke. A pick removes the `/query` bytes first (its `insert` is
+ * empty), then `onCommit` does the row's work through the editor's own entry points.
+ */
+import { blockNodeAt, isBlankText } from '../../plugin';
+import { acceptsQuery, filterEntries, splitQuery } from './filter';
+export const SLASH_COMMANDS_MENU = 'slash-commands';
+const HEADING_LEVELS = [1, 2, 3];
+/** The `/` source for one editor: its rows come from `editor.options` and the live catalogue. */
+export function createSlashSource(editor) {
+    function rows() {
+        const { entries = [], exclude = [] } = editor.options;
+        const hidden = new Set([...exclude, ...entries.map((entry) => entry.id)]);
+        const builtIn = [
+            ...editor.insertCatalogue.map(catalogueRow),
+            ...HEADING_LEVELS.map(headingRow)
+        ];
+        return [...builtIn.filter((row) => !hidden.has(row.id)), ...entries.map(hostRow)];
+    }
+    return {
+        name: SLASH_COMMANDS_MENU,
+        trigger: '/',
+        // A slash inside a word (`and/or`, `9/22`) is text.
+        opensAt: (raw, pos) => pos === 0 || /\s/.test(raw[pos - 1]),
+        accepts: (query) => acceptsQuery(rows(), query),
+        items: ({ query }) => {
+            const { head, argument } = splitQuery(query);
+            return filterEntries(rows(), head).map((row) => ({
+                id: row.id,
+                label: row.label,
+                icon: row.icon,
+                detail: argument === null ? undefined : argumentDetail(row, argument),
+                insert: ''
+            }));
+        },
+        onCommit: async (item, range) => {
+            const row = rows().find((candidate) => candidate.id === item.id);
+            if (!row)
+                return;
+            const { argument } = splitQuery(range.query);
+            const action = row.action;
+            if (action.kind === 'heading') {
+                editor.runCommand('heading.cycle', action.level);
+            }
+            else if (action.kind === 'run') {
+                action.run(editor, argument ?? undefined);
+            }
+            else {
+                // An empty line becomes the block; a line with text keeps it and gets the block below.
+                // Copied because `blockNodeAt` takes a mutable path and the range's is readonly.
+                const empty = isBlankText(blockNodeAt(editor.document, [...range.path])?.raw ?? '');
+                // Awaited, so the block lands inside the pick's undo entry.
+                await editor.insertMarkdown(action.build(argument).markdown, {
+                    placement: empty ? 'caret' : 'below'
+                });
+            }
+        }
+    };
+}
+// ── Rows ─────────────────────────────────────────────────────────────────────
+function catalogueRow(entry) {
+    const { withArgument } = entry;
+    return {
+        id: entry.id,
+        label: entry.label,
+        icon: entry.icon,
+        keywords: entry.keywords,
+        takesArgument: withArgument !== undefined,
+        action: {
+            kind: 'insert',
+            // A space with no word after it yet is no argument, so `withArgument` only sees a word.
+            build: (argument) => argument && withArgument ? withArgument(argument) : { markdown: entry.markdown }
+        }
+    };
+}
+function headingRow(level) {
+    return {
+        id: `h${level}`,
+        label: `Heading ${level}`,
+        icon: 'heading',
+        keywords: [`h${level}`, 'heading', 'title'],
+        takesArgument: false,
+        action: { kind: 'heading', level }
+    };
+}
+function hostRow(entry) {
+    const base = {
+        id: entry.id,
+        label: entry.label,
+        icon: entry.icon,
+        keywords: entry.keywords ?? []
+    };
+    if (entry.run) {
+        return {
+            ...base,
+            takesArgument: !!entry.takesArgument,
+            action: { kind: 'run', run: entry.run }
+        };
+    }
+    const markdown = entry.insert ?? '';
+    return { ...base, takesArgument: false, action: { kind: 'insert', build: () => ({ markdown }) } };
+}
+function argumentDetail(row, argument) {
+    if (row.action.kind === 'insert')
+        return row.action.build(argument).detail;
+    return argument === '' ? undefined : argument;
+}

package/dist/plugins/toc/TocBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	// Render-primary editable leaf: all editing behavior lives in `createEditableLeaf`,
-	// so this component owns only the list↔source swap and navigation.
+	// A render-primary editable block: all editing behavior lives in `createEditableLeaf`, so
+	// this component owns only the swap between the list and the source, and navigation.
 	import {
 		createEditableLeaf,
 		type BlockComponent,
@@ -8,23 +8,22 @@
 		type EditorRects,
 		type NodeView
 	} from '../../plugin';
-	import { collectHeadings, resolveMaxDepth } from './heading-outline';
+	import { collectHeadings, MAX_HEADING_DEPTH } from './heading-outline';
 	import { createNavigationQueue } from './navigation-queue';
+	import type { TocOptions } from './toc-plugin';
 
 	let {
 		node,
 		index,
 		myPath = [],
 		document,
-		rects,
-		maxDepth = 6
+		rects
 	}: {
 		node: NodeView;
 		index: number;
 		myPath?: number[];
 		document?: DocumentView;
 		rects?: EditorRects;
-		maxDepth?: number;
 	} = $props();
 
 	let sourceEl: HTMLDivElement | undefined = $state();
@@ -42,22 +41,24 @@
 		}
 	});
 
-	// Instance options win; the `maxDepth` prop is the factory argument, which a bare install
-	// (and only a bare install) is configured by.
-	const depth = $derived(resolveMaxDepth(leaf.getOptions(), maxDepth));
+	// Undefined only for a block mounted with no editor, as the unit tests mount it.
+	const options = leaf.getOptions() as Required<TocOptions> | undefined;
+	const depth = options?.maxDepth ?? MAX_HEADING_DEPTH;
 
-	// The walk reads heading bytes through the prop, subscribing to the CST's $state proxy, so
-	// an edit above re-runs it; it stays uncached to keep the derived reactive-safe.
-	const headings = $derived(collectHeadings(document, depth));
+	// This reads heading bytes through the prop, subscribing to the CST's $state proxy, so an
+	// edit above re-runs it; left uncached so the derived stays reactive.
+	const headings = $derived(
+		collectHeadings(document, depth, leaf.getEditor()?.computeInlineContent)
+	);
 
-	// Serialized per block (see `navigation-queue.ts` for why). `navigateTo` lands the caret as
-	// well as scrolling, so focus never stays where the editor's chords cannot reach it.
+	// One navigation at a time per block (`navigation-queue.ts` says why). `navigateTo` moves
+	// the caret as well as scrolling, so focus never stays somewhere the keyboard cannot reach.
 	const navigation = createNavigationQueue({
 		navigateTo: (path) => rects?.navigateTo(path) ?? Promise.resolve()
 	});
 
-	// Suppresses the leaf's reveal-on-pointerdown so an entry activation navigates
-	// instead of folding the block open. View-only, so it works in reading mode too.
+	// Stops the block showing its source on pointerdown, so clicking an entry navigates instead
+	// of opening the source. It only reads, so it works in reading mode too.
 	function onEntryPointerDown(e: PointerEvent): void {
 		e.stopPropagation();
 	}
@@ -74,8 +75,8 @@
 	export const getSelectedText = leaf.getSelectedText;
 	export const setSelection = leaf.setSelection;
 	export const measurePartialRects = leaf.measurePartialRects;
-	export const runCommand = leaf.runCommand;
 	export const insertMarkdown = leaf.insertMarkdown;
+	export const afterSourceCommit = leaf.afterSourceCommit;
 
 	void ({
 		editable,
@@ -87,8 +88,8 @@
 		getSelectedText,
 		setSelection,
 		measurePartialRects,
-		runCommand,
-		insertMarkdown
+		insertMarkdown,
+		afterSourceCommit
 	} satisfies BlockComponent);
 </script>
 
@@ -131,7 +132,7 @@
 {/if}
 
 <style>
-	/* Deltas over the shared .md-source-surface (editor.css). */
+	/* Only the differences from the shared .md-source-surface (editor.css). */
 	.toc-block-source {
 		outline: none;
 		padding: 8px 12px;
@@ -157,8 +158,8 @@
 		list-style: none;
 	}
 
-	/* Native button chrome reset to a plain full-row entry: the accent hover and focus
-	   ring are the only affordances. */
+	/* The browser's button styling is reset to a plain full-width row: the accent hover and
+	   the focus ring are the only cues. */
 	.toc-block-item {
 		display: block;
 		width: 100%;

package/dist/plugins/toc/TocBlock.svelte.d.ts

@@ -5,7 +5,6 @@ type $$ComponentProps = {
     myPath?: number[];
     document?: DocumentView;
     rects?: EditorRects;
-    maxDepth?: number;
 };
 declare const TocBlock: import("svelte").Component<$$ComponentProps, {
     editable: true;
@@ -17,8 +16,8 @@ declare const TocBlock: import("svelte").Component<$$ComponentProps, {
     getSelectedText: () => string;
     setSelection: (start: number, end: number) => void;
     measurePartialRects: (startOffset: number, endOffset: number) => DOMRect[];
-    runCommand: (id: import("../../plugin").CommandId) => boolean;
-    insertMarkdown: (md: string) => boolean;
+    insertMarkdown: (md: string) => Promise<boolean>;
+    afterSourceCommit: (run: () => void) => void;
 }, "">;
 type TocBlock = ReturnType<typeof TocBlock>;
 export default TocBlock;