zidane-ui 9.0.4 → 9.1.3

package/dist/code/editor/pierre-theme.d.ts

@@ -3,11 +3,11 @@ import { CSSProperties } from "react";
 /** Host-level variables for `<diffs-container>` (PatchDiff / File / FileDiff). */
 declare const DIFFS_HOST_STYLE: CSSProperties & Record<`--${string}`, string>;
 /**
- * Oniguruma (shiki's WASM engine) for every pierre view and the worker pool:
- * the JS regex engine can backtrack for seconds on some grammars and lines,
- * stalling a worker and every highlight queued behind it.
+ * @pierre/highlights for every pierre view and the worker pool: hand-written
+ * WebAssembly lexers, no regex grammars to backtrack for seconds on a line,
+ * and the same lexers the code blocks use (`code/highlights.ts`).
  */
-declare const PREFERRED_HIGHLIGHTER: "shiki-wasm";
+declare const PREFERRED_HIGHLIGHTER: "highlights";
 /**
  * What a pierre Virtualizer renders beyond the viewport. Its defaults (1000px
  * rendered, 4000px observed) mount several screens of lines at once; this
@@ -21,7 +21,7 @@ declare const VIRTUALIZER_CONFIG: {
  * Structural restyle inside the diffs shadow root: compact header, our border colour, edge-bar
  * hover, selection, gutter button, and the link, find and reveal styles other modules rely on.
  */
-declare const DIFFS_UNSAFE_CSS = "\n  /* One hover surface: findings ride in our HoverCard; keep pierre's squiggles, drop its popover. */\n  [data-marker-popover] { display: none !important; }\n  [data-diffs-header] {\n    min-height: 32px;\n    padding-inline: 10px 12px;\n    font-size: var(--zg-font-size-label);\n    border-bottom: 1px solid var(--zg-hairline);\n    background: var(--zg-tray);\n  }\n  [data-separator] { color: var(--zg-text-subtle); }\n  [data-line]:hover { box-shadow: inset 3px 0 var(--zg-border-strong); }\n  [data-selected-line] { box-shadow: inset 3px 0 var(--zg-accent); }\n  [data-column-number] { cursor: pointer; user-select: none; }\n  [data-line] { cursor: text; }\n  /* Text selection. Read-only: the native highlight (pierre's default is an\n     8% mix, invisible on our surface). Editor: pierre paints selection ranges\n     under the line background at z-index -10; our opaque line background hid\n     them, so lift them above the background and under the text. */\n  ::selection { background-color: color-mix(in srgb, var(--zg-accent) 32%, transparent) !important; }\n  [data-selection-range] {\n    z-index: 1 !important;\n    mix-blend-mode: screen;\n    background-color: color-mix(in srgb, var(--zg-accent) 28%, transparent) !important;\n  }\n  /* Gutter \"+\" (comment on hover / on the selection end): lives in its own\n     lane at the left of the gutter, so it neither covers the line number\n     (which stays clickable for selection) nor the first characters. */\n  [data-column-number] { padding-left: calc(1lh + 6px); }\n  [data-gutter-utility-slot] {\n    justify-content: flex-start;\n    left: 3px;\n    right: auto;\n  }\n  [data-utility-button] {\n    margin-right: 0;\n    width: calc(1lh - 2px);\n    height: calc(1lh - 2px);\n    background-color: var(--zg-accent-fill);\n    color: var(--zg-accent-fill-fg);\n    border-radius: var(--zg-radius-xs);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);\n  }\n  [data-utility-button]:hover { background-color: var(--zg-accent-fill-hover); }\n  /* Cmd-hover over a symbol with a language server: link affordance on\n     the symbol as the server delimits it, an identifier or a whole import\n     path (a CSS custom highlight, see FileView LINK_HIGHLIGHT). */\n  ::highlight(zg-link) { text-decoration: underline; text-decoration-color: var(--zg-accent); }\n  /* Find (code/find): every match, and the current one stronger. Same tones as the transcript's find. */\n  ::highlight(zg-find) { background-color: color-mix(in srgb, var(--zg-accent) 30%, transparent); }\n  ::highlight(zg-find-current) { background-color: color-mix(in srgb, var(--zg-accent) 65%, transparent); }\n  :host-context([data-zg-linking]) [data-char] { cursor: pointer; }\n  /* A body that mounts before its tokens is held back, then eases in once\n     they land (code/reveal.ts), so it never shows plain and re-colors; one\n     that mounts highlighted shows at once, and a tab coming back from hidden\n     replays nothing. Opacity only: pierre owns the geometry. The fade motion\n     (its vars inherit into the shadow root): brief under reduced motion,\n     instant with motion off. */\n  :host([data-zg-held]) :is([data-diff], [data-file]) { transition: opacity var(--zg-motion-fade); }\n  :host([data-zg-pending]) :is([data-diff], [data-file]) { opacity: 0; }\n  /* A column that scrolls sideways takes focus (code/scroll-reach.ts): the kit's ring, inside it. */\n  code[data-code][tabindex]:focus-visible { outline: 2px solid var(--zg-ring); outline-offset: -2px; }\n";
+declare const DIFFS_UNSAFE_CSS = "\n  /* One hover surface: findings ride in our HoverCard; keep pierre's squiggles, drop its popover. */\n  [data-marker-popover] { display: none !important; }\n  [data-diffs-header] {\n    min-height: 32px;\n    /* A host lines the icon up with its own column (the Diffs tab, under its file tree). */\n    padding-inline: var(--zg-diff-header-inset, 10px) 12px;\n    font-size: var(--zg-font-size-label);\n    border-bottom: 1px solid var(--zg-hairline);\n    background: var(--zg-tray);\n  }\n  [data-separator] { color: var(--zg-text-subtle); }\n  [data-line]:hover { box-shadow: inset 3px 0 var(--zg-border-strong); }\n  [data-selected-line] { box-shadow: inset 3px 0 var(--zg-accent); }\n  [data-column-number] { cursor: pointer; user-select: none; }\n  [data-line] { cursor: text; }\n  /* Text selection. Read-only: the native highlight (pierre's default is an\n     8% mix, invisible on our surface). Editor: pierre paints selection ranges\n     under the line background at z-index -10; our opaque line background hid\n     them, so lift them above the background and under the text. */\n  ::selection { background-color: color-mix(in srgb, var(--zg-accent) 32%, transparent) !important; }\n  [data-selection-range] {\n    z-index: 1 !important;\n    mix-blend-mode: screen;\n    background-color: color-mix(in srgb, var(--zg-accent) 28%, transparent) !important;\n  }\n  /* Gutter \"+\" (comment on hover / on the selection end): lives in its own\n     lane at the left of the gutter, so it neither covers the line number\n     (which stays clickable for selection) nor the first characters. */\n  [data-column-number] { padding-left: calc(1lh + 6px); }\n  [data-gutter-utility-slot] {\n    justify-content: flex-start;\n    left: 3px;\n    right: auto;\n  }\n  [data-utility-button] {\n    margin-right: 0;\n    width: calc(1lh - 2px);\n    height: calc(1lh - 2px);\n    background-color: var(--zg-accent-fill);\n    color: var(--zg-accent-fill-fg);\n    border-radius: var(--zg-radius-xs);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);\n  }\n  [data-utility-button]:hover { background-color: var(--zg-accent-fill-hover); }\n  /* Cmd-hover over a symbol with a language server: link affordance on\n     the symbol as the server delimits it, an identifier or a whole import\n     path (a CSS custom highlight, see FileView LINK_HIGHLIGHT). */\n  ::highlight(zg-link) { text-decoration: underline; text-decoration-color: var(--zg-accent); }\n  /* Find (code/find): every match, and the current one stronger. Same tones as the transcript's find. */\n  ::highlight(zg-find) { background-color: color-mix(in srgb, var(--zg-accent) 30%, transparent); }\n  ::highlight(zg-find-current) { background-color: color-mix(in srgb, var(--zg-accent) 65%, transparent); }\n  :host-context([data-zg-linking]) [data-char] { cursor: pointer; }\n  /* A body that mounts before its tokens is held back, then eases in once\n     they land (code/reveal.ts), so it never shows plain and re-colors; one\n     that mounts highlighted shows at once, and a tab coming back from hidden\n     replays nothing. Opacity only: pierre owns the geometry. The fade motion\n     (its vars inherit into the shadow root): brief under reduced motion,\n     instant with motion off. */\n  :host([data-zg-held]) :is([data-diff], [data-file]) { transition: opacity var(--zg-motion-fade); }\n  :host([data-zg-pending]) :is([data-diff], [data-file]) { opacity: 0; }\n  /* A column that scrolls sideways takes focus (code/scroll-reach.ts): the kit's ring, inside it. */\n  code[data-code][tabindex]:focus-visible { outline: 2px solid var(--zg-ring); outline-offset: -2px; }\n";
 /** Host-level variables for `<file-tree-container>`. */
 declare const TREES_HOST_STYLE: CSSProperties & Record<`--${string}`, string>;
 /** Structural restyle inside the file tree's shadow root: rounded rows, no fill behind truncation markers. */

package/dist/code/editor/pierre-theme.js

@@ -25,11 +25,11 @@ const DIFFS_HOST_STYLE = {
 	"--diffs-line-height": "calc(var(--zg-font-size-code) * 1.65)"
 };
 /**
-* Oniguruma (shiki's WASM engine) for every pierre view and the worker pool:
-* the JS regex engine can backtrack for seconds on some grammars and lines,
-* stalling a worker and every highlight queued behind it.
+* @pierre/highlights for every pierre view and the worker pool: hand-written
+* WebAssembly lexers, no regex grammars to backtrack for seconds on a line,
+* and the same lexers the code blocks use (`code/highlights.ts`).
 */
-const PREFERRED_HIGHLIGHTER = "shiki-wasm";
+const PREFERRED_HIGHLIGHTER = "highlights";
 /**
 * What a pierre Virtualizer renders beyond the viewport. Its defaults (1000px
 * rendered, 4000px observed) mount several screens of lines at once; this
@@ -48,7 +48,8 @@ const DIFFS_UNSAFE_CSS = `
   [data-marker-popover] { display: none !important; }
   [data-diffs-header] {
     min-height: 32px;
-    padding-inline: 10px 12px;
+    /* A host lines the icon up with its own column (the Diffs tab, under its file tree). */
+    padding-inline: var(--zg-diff-header-inset, 10px) 12px;
     font-size: var(--zg-font-size-label);
     border-bottom: 1px solid var(--zg-hairline);
     background: var(--zg-tray);

package/dist/code/highlight-lines.d.ts

@@ -0,0 +1,24 @@
+//#region src/code/highlight-lines.d.ts
+/**
+ * Highlighted HTML split into lines of colored tokens, for views that draw
+ * code one line at a time (each line its own element: a gutter, a state).
+ * The highlighter wraps no line in an element of its own (a newline sits
+ * inside a token), so the split walks its text. Internal to the kit.
+ */
+/** A run of text in one style. */
+interface CodeToken {
+  text: string;
+  color?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+}
+/**
+ * The tokens of each line of highlighted HTML, or `null` where HTML cannot be
+ * parsed (no `DOMParser`: a server render) or holds no code.
+ *
+ * @param html - The highlighter's `<pre><code>…</code></pre>`.
+ * @param lineCount - Lines the code has: a closing newline adds none.
+ */
+declare function highlightedLines(html: string, lineCount: number): CodeToken[][] | null;
+//#endregion
+export { CodeToken, highlightedLines };

package/dist/code/highlight-lines.js

@@ -0,0 +1,41 @@
+//#region src/code/highlight-lines.ts
+/**
+* The tokens of each line of highlighted HTML, or `null` where HTML cannot be
+* parsed (no `DOMParser`: a server render) or holds no code.
+*
+* @param html - The highlighter's `<pre><code>…</code></pre>`.
+* @param lineCount - Lines the code has: a closing newline adds none.
+*/
+function highlightedLines(html, lineCount) {
+	if (typeof DOMParser === "undefined") return null;
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	const root = doc.querySelector("pre code") ?? doc.querySelector("pre");
+	if (!root) return null;
+	const lines = [[]];
+	const push = (text, style) => {
+		text.split("\n").forEach((part, i) => {
+			if (i > 0) lines.push([]);
+			if (part !== "") lines[lines.length - 1].push({
+				text: part,
+				...style
+			});
+		});
+	};
+	const walk = (node, style) => {
+		for (const child of Array.from(node.childNodes)) if (child.nodeType === 3) push(child.textContent ?? "", style);
+		else if (child.nodeType === 1) {
+			const css = child.style;
+			walk(child, {
+				...style,
+				...css?.color ? { color: css.color } : {},
+				...css?.fontStyle ? { fontStyle: css.fontStyle } : {},
+				...css?.fontWeight ? { fontWeight: css.fontWeight } : {}
+			});
+		}
+	};
+	walk(root, {});
+	while (lines.length > lineCount && lines[lines.length - 1].length === 0) lines.pop();
+	return lines.length === lineCount ? lines : null;
+}
+//#endregion
+export { highlightedLines };

package/dist/code/highlight.worker.js

@@ -1,20 +1,8 @@
-import { codeToHtml } from "shiki";
+import { highlightToHtml } from "./highlights.js";
 //#region src/code/highlight.worker.ts
-/**
-* Code highlighting off the main thread: the module a consumer builds into
-* a worker and hands to `createCodeHighlighter({ createWorker })`.
-* Tokenising is the expensive part of a code block (the oniguruma scanner,
-* plus compiling each grammar on first use); here it never competes with
-* scrolling or the stream. One request in, one HTML string (or null: unknown
-* language) out. Shiki is a static import: the worker is the lazy chunk, and
-* a classic (iife) worker build cannot split.
-*/
 self.onmessage = (event) => {
 	const { id, code, lang, theme } = event.data;
-	codeToHtml(code, {
-		lang,
-		theme
-	}).then((html) => self.postMessage({
+	highlightToHtml(code, lang, theme).then((html) => self.postMessage({
 		id,
 		html
 	})).catch(() => self.postMessage({

package/dist/code/highlighter.d.ts

@@ -1,20 +1,35 @@
 //#region src/code/highlighter.d.ts
+/**
+ * `createCodeHighlighter()`: highlighted HTML for code blocks, memoised, and off
+ * the main thread when the app gives it a worker.
+ *
+ * The kit cannot build a worker for its consumers (each bundler has its own
+ * syntax), so the app passes a factory that starts one running
+ * `highlight.worker.ts` (`?worker` under Vite, `new Worker(new URL(…))`).
+ * Without one, or where workers are unavailable (server rendering, jsdom),
+ * or when the worker fails to start, it highlights on the main thread.
+ *
+ * Results are memoised: a block scrolled away and back, a remounted row, or
+ * the same snippet in two rows is highlighted once. The memo is bounded by
+ * size as well as by count: a streaming fence leaves an entry per longer
+ * prefix, each holding its code and HTML several times that size.
+ */
 /** A request to the highlighting worker. */
 interface HighlightRequest {
   /** Correlates the response. */
   id: number;
   /** The code. */
   code: string;
-  /** A shiki language id. */
+  /** A language name or alias. */
   lang: string;
-  /** A bundled shiki theme id. */
+  /** A bundled code theme id. */
   theme: string;
 }
 /** The highlighting worker's answer to a {@link HighlightRequest}. */
 interface HighlightResponse {
   /** The request's id. */
   id: number;
-  /** The highlighted HTML, or `null` for a language shiki does not know. */
+  /** The highlighted HTML, or `null` for a language with no lexer. */
   html: string | null;
 }
 /** Options of {@link createCodeHighlighter}. */
@@ -25,15 +40,15 @@ interface CodeHighlighterOptions {
    */
   createWorker?: () => Worker;
 }
-/** Highlights code to shiki HTML, with a result cache. Create one per app with {@link createCodeHighlighter}. */
+/** Highlights code to HTML, with a result cache. Create one per app with {@link createCodeHighlighter}. */
 interface CodeHighlighter {
   /**
    * Highlights code, or returns the cached result.
    *
    * @param code - The code.
-   * @param lang - A shiki language id.
-   * @param theme - A bundled shiki theme id.
-   * @returns The HTML, or `null` when shiki cannot highlight the language.
+   * @param lang - A language name or alias.
+   * @param theme - A bundled code theme id.
+   * @returns The HTML, or `null` when no lexer highlights the language.
    */
   highlight(code: string, lang: string, theme: string): Promise<string | null>;
   /**
@@ -41,8 +56,8 @@ interface CodeHighlighter {
    * block highlighted before paints colored on its first frame.
    *
    * @param code - The code.
-   * @param lang - A shiki language id.
-   * @param theme - A bundled shiki theme id.
+   * @param lang - A language name or alias.
+   * @param theme - A bundled code theme id.
    * @returns The HTML, `null` for an unknown language, or `undefined` when not highlighted yet.
    */
   cached(code: string, lang: string, theme: string): string | null | undefined;

package/dist/code/highlighter.js

@@ -1,9 +1,6 @@
 //#region src/code/highlighter.ts
 function highlightHere(code, lang, theme) {
-	return import("shiki").then(({ codeToHtml }) => codeToHtml(code, {
-		lang,
-		theme
-	})).catch(() => null);
+	return import("./highlights.js").then(({ highlightToHtml }) => highlightToHtml(code, lang, theme)).catch(() => null);
 }
 /** Entries: a long session's blocks fit, a runaway one cannot grow without bound. */
 const CACHE_LIMIT = 400;

package/dist/code/highlights.d.ts

@@ -0,0 +1,12 @@
+//#region src/code/highlights.d.ts
+/**
+ * Highlights code to a `<pre class="highlights">` fragment.
+ *
+ * @param code - The code.
+ * @param lang - A language name or alias, such as `ts` or `shellscript`.
+ * @param themeId - A bundled code theme id (`code-themes.ts`).
+ * @returns The HTML, or `null` for a language with no lexer or an unknown theme.
+ */
+declare function highlightToHtml(code: string, lang: string, themeId: string): Promise<string | null>;
+//#endregion
+export { highlightToHtml };

package/dist/code/highlights.js

@@ -0,0 +1,47 @@
+import { mermaidToHtml } from "./mermaid-lexer.js";
+import { codeToHtml, isSupportedLanguage } from "@pierre/highlights";
+import { themes } from "@pierre/highlights/themes/loader";
+//#region src/code/highlights.ts
+/**
+* Code to HTML with @pierre/highlights: the one tokeniser behind the code
+* blocks, here or in the highlighting worker (`highlight.worker.ts`). Its
+* WebAssembly starts when this module is imported: the worker imports it
+* statically, the main thread on its first block (`highlighter.ts`).
+*
+* A theme loads the first time a block names it, then stays. Mermaid, which
+* the highlighter has no grammar for, goes through `mermaid-lexer.ts` in the
+* same theme.
+*/
+const loaded = /* @__PURE__ */ new Map();
+function loadTheme(id) {
+	let theme = loaded.get(id);
+	if (!theme) {
+		const load = Object.hasOwn(themes, id) ? themes[id] : void 0;
+		theme = load ? load().then((m) => m.default).catch(() => null) : Promise.resolve(null);
+		loaded.set(id, theme);
+	}
+	return theme;
+}
+const decoder = new TextDecoder();
+/**
+* Highlights code to a `<pre class="highlights">` fragment.
+*
+* @param code - The code.
+* @param lang - A language name or alias, such as `ts` or `shellscript`.
+* @param themeId - A bundled code theme id (`code-themes.ts`).
+* @returns The HTML, or `null` for a language with no lexer or an unknown theme.
+*/
+async function highlightToHtml(code, lang, themeId) {
+	if (lang === "mermaid" || lang === "mmd") {
+		const theme = await loadTheme(themeId);
+		return theme ? mermaidToHtml(code, theme) : null;
+	}
+	if (!isSupportedLanguage(lang)) return null;
+	const theme = await loadTheme(themeId);
+	return theme ? decoder.decode(codeToHtml(code, {
+		lang,
+		theme
+	})) : null;
+}
+//#endregion
+export { highlightToHtml };

package/dist/code/mermaid-lexer.d.ts

@@ -0,0 +1,26 @@
+import { Theme } from "@pierre/highlights";
+//#region src/code/mermaid-lexer.d.ts
+/** What a span of Mermaid source is. Each names the theme syntax scope it is drawn with. */
+type MermaidTokenKind = 'plain' | 'comment' | 'keyword' | 'operator' | 'string' | 'number' | 'variable' | 'type' | 'bracket' | 'delimiter';
+/** A span of Mermaid source and its kind. */
+interface MermaidToken {
+  text: string;
+  kind: MermaidTokenKind;
+}
+/**
+ * Splits Mermaid source into tokens. Adjacent tokens of one kind are merged; the texts joined give the source back.
+ *
+ * @param code - The Mermaid source.
+ * @returns The tokens, line breaks included as plain text.
+ */
+declare function tokenizeMermaid(code: string): MermaidToken[];
+/**
+ * Mermaid source as the highlighter's `<pre class="highlights">` markup, in a code theme's colors.
+ *
+ * @param code - The Mermaid source.
+ * @param theme - The code theme.
+ * @returns The HTML.
+ */
+declare function mermaidToHtml(code: string, theme: Theme): string;
+//#endregion
+export { MermaidToken, MermaidTokenKind, mermaidToHtml, tokenizeMermaid };

package/dist/code/mermaid-lexer.js

@@ -0,0 +1,303 @@
+//#region src/code/mermaid-lexer.ts
+const KEYWORDS = /* @__PURE__ */ new Set([
+	"graph",
+	"flowchart",
+	"flowchart-elk",
+	"sequenceDiagram",
+	"classDiagram",
+	"classDiagram-v2",
+	"stateDiagram",
+	"stateDiagram-v2",
+	"erDiagram",
+	"journey",
+	"gantt",
+	"pie",
+	"quadrantChart",
+	"requirementDiagram",
+	"gitGraph",
+	"mindmap",
+	"timeline",
+	"sankey-beta",
+	"xychart-beta",
+	"block-beta",
+	"packet-beta",
+	"kanban",
+	"architecture-beta",
+	"radar-beta",
+	"treemap-beta",
+	"C4Context",
+	"C4Container",
+	"C4Component",
+	"C4Dynamic",
+	"C4Deployment",
+	"TB",
+	"TD",
+	"BT",
+	"RL",
+	"LR",
+	"subgraph",
+	"end",
+	"direction",
+	"participant",
+	"actor",
+	"as",
+	"Note",
+	"note",
+	"over",
+	"left",
+	"right",
+	"of",
+	"loop",
+	"alt",
+	"else",
+	"opt",
+	"par",
+	"and",
+	"critical",
+	"break",
+	"rect",
+	"box",
+	"autonumber",
+	"activate",
+	"deactivate",
+	"create",
+	"destroy",
+	"title",
+	"section",
+	"dateFormat",
+	"axisFormat",
+	"tickInterval",
+	"excludes",
+	"includes",
+	"todayMarker",
+	"weekday",
+	"state",
+	"class",
+	"classDef",
+	"style",
+	"linkStyle",
+	"click",
+	"call",
+	"href",
+	"callback",
+	"namespace",
+	"accTitle",
+	"accDescr",
+	"showData",
+	"commit",
+	"branch",
+	"checkout",
+	"merge",
+	"cherry-pick",
+	"x-axis",
+	"y-axis",
+	"line",
+	"bar",
+	"quadrant-1",
+	"quadrant-2",
+	"quadrant-3",
+	"quadrant-4"
+]);
+const ARROW = /(?:<<|<\||\|\||\}\||\|o|\}o|[<*|}])?(?:-{2,}|={2,}|-\.+-?|~{3,}|\.{2,}|-(?=>|x(?![\w])|\)))(?:>>|\|>|o\{|\|\{|o\||\|\||[>*)]|[ox](?![\w])|[|{])?/y;
+const WORD = /[A-Za-z_][\w]*(?:-(?![-.>=x)])[\w]+)*/y;
+const NUMBER = /\d+(?:\.\d+)?%?/y;
+const SPACE = /\s+/y;
+const CLASS_REF = /:::[\w-]+/y;
+const CLOSER = {
+	"[": "]",
+	"(": ")",
+	"{": "}",
+	"/": "/",
+	"\\": "\\",
+	">": "]"
+};
+function at(re, line, i) {
+	re.lastIndex = i;
+	const m = re.exec(line);
+	return m && m[0] ? m[0] : null;
+}
+/** The tokens of one line, appended to `out`. */
+function lexLine(line, out) {
+	const push = (text, kind) => {
+		if (text) out.push({
+			text,
+			kind
+		});
+	};
+	let i = 0;
+	while (i < line.length) {
+		const ch = line[i];
+		if (line.startsWith("%%", i)) {
+			push(line.slice(i), "comment");
+			return;
+		}
+		const space = at(SPACE, line, i);
+		if (space) {
+			push(space, "plain");
+			i += space.length;
+			continue;
+		}
+		if (ch === "\"") {
+			const end = line.indexOf("\"", i + 1);
+			const stop = end < 0 ? line.length : end + 1;
+			push(line.slice(i, stop), "string");
+			i = stop;
+			continue;
+		}
+		const classRef = at(CLASS_REF, line, i);
+		if (classRef) {
+			push(classRef, "type");
+			i += classRef.length;
+			continue;
+		}
+		const arrow = at(ARROW, line, i);
+		if (arrow) {
+			push(arrow, "operator");
+			i += arrow.length;
+			continue;
+		}
+		if (ch === "[" || ch === "(" || ch === "{") {
+			let open = ch;
+			while (i + open.length < line.length && "[({/\\".includes(line[i + open.length]) && open.length < 3) open += line[i + open.length];
+			const close = [...open].reverse().map((c) => CLOSER[c]).join("");
+			const end = line.indexOf(close, i + open.length);
+			push(open, "bracket");
+			if (end < 0) {
+				push(line.slice(i + open.length), "string");
+				return;
+			}
+			push(line.slice(i + open.length, end), "string");
+			push(close, "bracket");
+			i = end + close.length;
+			continue;
+		}
+		if (ch === "|") {
+			const end = line.indexOf("|", i + 1);
+			push("|", "bracket");
+			if (end < 0) {
+				push(line.slice(i + 1), "string");
+				return;
+			}
+			push(line.slice(i + 1, end), "string");
+			push("|", "bracket");
+			i = end + 1;
+			continue;
+		}
+		if (ch === ":") {
+			push(":", "delimiter");
+			const rest = line.slice(i + 1);
+			push(rest, /^\s*-?\d+(?:\.\d+)?%?\s*$/.test(rest) ? "number" : "string");
+			return;
+		}
+		const number = at(NUMBER, line, i);
+		if (number) {
+			push(number, "number");
+			i += number.length;
+			continue;
+		}
+		const word = at(WORD, line, i);
+		if (word) {
+			push(word, KEYWORDS.has(word) ? "keyword" : "variable");
+			i += word.length;
+			continue;
+		}
+		push(ch, ch === ";" || ch === "," || ch === "&" ? "delimiter" : "plain");
+		i += 1;
+	}
+}
+/**
+* Splits Mermaid source into tokens. Adjacent tokens of one kind are merged; the texts joined give the source back.
+*
+* @param code - The Mermaid source.
+* @returns The tokens, line breaks included as plain text.
+*/
+function tokenizeMermaid(code) {
+	const raw = [];
+	const lines = code.split("\n");
+	lines.forEach((line, n) => {
+		lexLine(line, raw);
+		if (n < lines.length - 1) raw.push({
+			text: "\n",
+			kind: "plain"
+		});
+	});
+	const merged = [];
+	for (const token of raw) {
+		const last = merged[merged.length - 1];
+		if (last && last.kind === token.kind) last.text += token.text;
+		else merged.push({ ...token });
+	}
+	return merged;
+}
+const SCOPES = {
+	comment: ["comment"],
+	keyword: ["keyword"],
+	operator: [
+		"operator",
+		"keyword.operator",
+		"keyword"
+	],
+	string: ["string"],
+	number: ["number", "constant"],
+	variable: ["variable"],
+	type: ["type", "title"],
+	bracket: [
+		"punctuation.bracket",
+		"punctuation",
+		"operator"
+	],
+	delimiter: [
+		"punctuation.delimiter",
+		"punctuation",
+		"operator"
+	]
+};
+const COLOR = /^#[0-9a-f]{3,8}$/i;
+/** A scope's style, inherited from its parent scopes (`keyword.operator` → `keyword`). */
+function scopeStyle(syntax, name) {
+	for (let scope = name; scope; scope = scope.includes(".") ? scope.slice(0, scope.lastIndexOf(".")) : "") {
+		const value = syntax[scope];
+		if (value) return typeof value === "string" ? { color: value } : value;
+	}
+}
+function css(settings) {
+	if (!settings) return "";
+	const parts = [];
+	if (settings.color && COLOR.test(settings.color)) parts.push(`color:${settings.color}`);
+	if (settings.font_style === "italic") parts.push("font-style:italic");
+	if (typeof settings.font_weight === "number") parts.push(`font-weight:${settings.font_weight}`);
+	return parts.join(";");
+}
+const escape = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/**
+* Mermaid source as the highlighter's `<pre class="highlights">` markup, in a code theme's colors.
+*
+* @param code - The Mermaid source.
+* @param theme - The code theme.
+* @returns The HTML.
+*/
+function mermaidToHtml(code, theme) {
+	const style = theme.style;
+	const syntax = style.syntax ?? {};
+	const styles = /* @__PURE__ */ new Map();
+	const styleOf = (kind) => {
+		let value = styles.get(kind);
+		if (value === void 0) {
+			value = kind === "plain" ? "" : css(SCOPES[kind].map((s) => scopeStyle(syntax, s)).find(Boolean));
+			styles.set(kind, value);
+		}
+		return value;
+	};
+	const fg = [
+		style["editor.foreground"],
+		style.text,
+		style.foreground
+	].find((c) => typeof c === "string" && COLOR.test(c));
+	const body = tokenizeMermaid(code).map(({ text, kind }) => {
+		const s = styleOf(kind);
+		return s ? `<span style="${s}">${escape(text)}</span>` : escape(text);
+	}).join("");
+	return `<pre class="highlights"${fg ? ` style="color:${fg}"` : ""}><code>${body}</code></pre>`;
+}
+//#endregion
+export { mermaidToHtml, tokenizeMermaid };

package/dist/code/shiki-theme.d.ts

@@ -1,21 +1,21 @@
 import { Appearance } from "../theme/derive.js";
-import { BundledTheme } from "shiki";
+import { CodeThemeId } from "./code-themes.js";
 //#region src/code/shiki-theme.d.ts
 /**
- * The neutral shiki theme for an appearance: what a theme without a designed counterpart uses.
+ * The neutral code theme for an appearance: what a theme without a designed counterpart uses.
  *
  * @param appearance - `'dark'` or `'light'`.
  * @returns `github-dark-default` or `github-light-default`.
  */
-declare function defaultShikiTheme(appearance: Appearance): BundledTheme;
+declare function defaultShikiTheme(appearance: Appearance): CodeThemeId;
 /**
- * The bundled shiki theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
+ * The bundled code theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
  * the neutral theme of its appearance.
  *
  * @param themeId - The kit theme's id (`BUILTIN_THEMES` key or an extension theme's id).
  * @param appearance - The theme's appearance, for the fallback.
- * @returns A shiki theme id.
+ * @returns A code theme id.
  */
-declare function shikiThemeFor(themeId: string, appearance: Appearance): BundledTheme;
+declare function shikiThemeFor(themeId: string, appearance: Appearance): CodeThemeId;
 //#endregion
 export { defaultShikiTheme, shikiThemeFor };