@orz/ui-mermaid 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright 2026 the orzui team
+Copyright 2026 the todou team
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
+# @orz/ui-mermaid
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Mermaid](https://www.npmjs.com/package/mermaid) diagrams drawn in the active `@orz/ui` theme. The
+package contributes a renderer to `@orz/ui-content`'s registry, so a ```` ```mermaid ```` fence in
+`@orz/ui-markdown` and a `.mmd` file in a viewer both become diagrams without importing this package
+from either.
+
+## Install
+
+```bash
+pnpm add @orz/ui-mermaid @orz/ui-content @orz/ui react
+```
+
+`mermaid` is a regular dependency: installing this package is the whole setup.
+`@orz/ui-content` is a peer dependency so that the app and every content package share one registry.
+
+## CSS
+
+```css
+@import "tailwindcss";
+@import "@orz/ui/styles.css";
+@import "@orz/ui-mermaid/styles.css";
+```
+
+Import it after `@orz/ui/styles.css`. It holds the diagram's fit rule: a diagram shrinks to its
+column down to 75% of its natural width, then scrolls, and is never enlarged. Like `@orz/ui`'s
+stylesheet, it registers `@source "./dist"` on its own.
+
+## `mermaidContent`
+
+```tsx
+import { ContentRenderers } from "@orz/ui-content";
+import { mermaidContent } from "@orz/ui-mermaid";
+
+const RENDERERS = [mermaidContent, markdownContent(), codeContent];
+
+<ContentRenderers renderers={RENDERERS}>{app}</ContentRenderers>;
+```
+
+It accepts inline sources whose `lang` is `mermaid` (any case), which is what a markdown fence
+becomes, and files named `*.mmd` or `*.mermaid`, in either placement. Register it before any
+renderer that takes every inline source, such as a code renderer, since the first renderer that
+accepts wins.
+
+The source shows until the first render lands, in place of a diagram that does not parse (with a
+one-line summary of the parser's message under it), and behind the Source toggle. That source view
+is `Next`: the renderers registered after this one draw it, so it is highlighted when a code
+renderer is registered and a plain `<pre><code>` when none is. A file is loaded once: the source view gets its text as an inline
+source tagged `mermaid`. A file that fails to load shows the message and a Retry button.
+
+## `MermaidBlock`
+
+For a surface that draws a diagram outside the registry:
+
+```tsx
+import { MermaidBlock } from "@orz/ui-mermaid";
+
+<MermaidBlock source={text} />
+<MermaidBlock source={text} sourceView={<MySourceView text={text} />} className="my-4" />
+```
+
+`sourceView` defaults to a plain `<pre><code>`.
+
+## Theme
+
+A diagram is drawn in the theme tokens in effect on its element (`--background`, `--foreground`,
+`--muted`, `--muted-foreground`, `--border`), so every `@orz/ui` theme gets its own colours with no
+table to maintain. The palette is baked into the SVG, so the diagram is drawn again whenever
+`@orz/ui`'s `useTheme()` reports a new theme, color scheme or variant. Outside a `ThemeProvider` a diagram keeps the colours
+present when it was drawn and does not follow a later switch.
+
+## Loading
+
+mermaid is only reached through `import("mermaid")`, so a bundler splits it into chunks of its own,
+fetched the first time a page holds a diagram. A chunk that fails to load leaves the diagram on its
+source, and the next render tries the import again; whether that refetches is the browser's call,
+since some cache a failed module fetch for the life of the page. Labels go through mermaid's
+`securityLevel: "strict"`, which sanitises them: markup survives, scripts and handlers do not.
+
+## Entry points
+
+| Import | Contents |
+|---|---|
+| `@orz/ui-mermaid` | `mermaidContent`, `MermaidBlock` |
+| `@orz/ui-mermaid/styles.css` | the `.mermaid-diagram` fit rule |

package/dist/content.d.ts

@@ -0,0 +1,8 @@
+import { type ContentRenderer } from "@orz/ui-content";
+/**
+ * The registry entry for mermaid: a source tagged `mermaid` (a fenced block) and a `.mmd` or
+ * `.mermaid` file, in either placement. Register it before any renderer that takes every inline
+ * source, such as a code renderer, which then draws the diagram's source view through `Next`.
+ */
+export declare const mermaidContent: ContentRenderer;
+//# sourceMappingURL=content.d.ts.map

package/dist/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../src/content.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,eAAe,EAGrB,MAAM,iBAAiB,CAAC;AAmEzB;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,eAK5B,CAAC"}

package/dist/content.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@orz/ui/components/button";
+import { ContentFallback, useSourceText, } from "@orz/ui-content";
+import { MermaidBlock } from "./mermaid-block.js";
+function isMermaid(source) {
+    if (source.kind === "inline")
+        return source.lang?.toLowerCase() === "mermaid";
+    return /\.(mmd|mermaid)$/i.test(source.name);
+}
+function MermaidFile({ source, placement, className, Next }) {
+    const text = useSourceText(source);
+    if (text.status === "loading") {
+        return (_jsx(ContentFallback, { source: source, placement: placement, className: className }));
+    }
+    if (text.status === "error") {
+        return (_jsxs("div", { className: className, children: [_jsx(ContentFallback, { source: source, placement: placement }), " ", _jsx("span", { children: text.error.message }), " ", _jsx(Button, { size: "xs", variant: "outline", onClick: text.retry, children: "Retry" })] }));
+    }
+    // Handed on as inline text, not as the file: the code renderer below would
+    // load the file a second time, while the diagram is still rendering. Inline
+    // text is spelled as a fence's contents, without the file's final newline,
+    // which a code view would draw as an empty last line.
+    return (_jsx(MermaidBlock, { source: text.text, className: className, sourceView: _jsx(Next, { source: {
+                kind: "inline",
+                text: text.text.replace(/\r?\n$/, ""),
+                lang: "mermaid",
+            }, placement: placement }) }));
+}
+function Mermaid(props) {
+    const { source, placement, className, Next } = props;
+    if (source.kind === "file")
+        return _jsx(MermaidFile, { ...props });
+    return (_jsx(MermaidBlock, { source: source.text, className: className, sourceView: _jsx(Next, { source: source, placement: placement }) }));
+}
+/**
+ * The registry entry for mermaid: a source tagged `mermaid` (a fenced block) and a `.mmd` or
+ * `.mermaid` file, in either placement. Register it before any renderer that takes every inline
+ * source, such as a code renderer, which then draws the diagram's source view through `Next`.
+ */
+export const mermaidContent = {
+    name: "mermaid",
+    accepts: isMermaid,
+    display: "block",
+    Component: Mermaid,
+};
+//# sourceMappingURL=content.js.map

package/dist/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../src/content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EACL,eAAe,EAIf,aAAa,GACd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAqB,CAAC;AAInD,SAAS,SAAS,CAAC,MAAqB;IACtC,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,SAAS,CAAC;IAC9E,OAAO,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAgB;IACvE,MAAM,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,CACL,KAAC,eAAe,IACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IACJ,CAAC;IACD,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,EAAC,GAAG,EAC7D,yBAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,EAAC,GAAG,EACrC,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,sBAE9C,IACL,CACP,CAAC;IACJ,CAAC;IACD,2EAA2E;IAC3E,4EAA4E;IAC5E,2EAA2E;IAC3E,sDAAsD;IACtD,OAAO,CACL,KAAC,YAAY,IACX,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,SAAS,EAAE,SAAS,EACpB,UAAU,EACR,KAAC,IAAI,IACH,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACrC,IAAI,EAAE,SAAS;aAChB,EACD,SAAS,EAAE,SAAS,GACpB,GAEJ,CACH,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,KAAmB;IAClC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC;IAC9D,OAAO,CACL,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,CAAC,IAAI,EACnB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,KAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,GAC1D,CACH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC7C,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { mermaidContent } from "./content.tsx";
+export { MermaidBlock } from "./mermaid-block.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { mermaidContent } from "./content.js";
+export { MermaidBlock } from "./mermaid-block.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAqB,CAAC"}

package/dist/mermaid-block.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+/**
+ * Mermaid source drawn as its diagram (T-523). `sourceView` shows until the
+ * first render lands — the renderer is a lazy chunk — and stays one click
+ * away afterwards. A diagram that does not parse keeps its source on screen
+ * with the parser's complaint under it.
+ *
+ * The colors are the theme tokens in effect on this element. The diagram is
+ * drawn again whenever `useTheme()` reports a new theme, color scheme or
+ * variant; outside a ThemeProvider it keeps the colors present when it was
+ * drawn.
+ */
+export declare function MermaidBlock({ source, sourceView, className, }: {
+    source: string;
+    /** Shown in place of the diagram. Default: a plain `<pre><code>`. */
+    sourceView?: ReactNode;
+    /** On the outer element, which also carries the probe the palette is read from. */
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=mermaid-block.d.ts.map

package/dist/mermaid-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid-block.d.ts","sourceRoot":"","sources":["../src/mermaid-block.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAsDf;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyEA"}

package/dist/mermaid-block.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@orz/ui/components/button";
+import { cn } from "@orz/ui/lib/utils";
+import { useTheme } from "@orz/ui/theme";
+import { useEffect, useRef, useState, } from "react";
+import { errorSummary, renderDiagram, } from "./render.js";
+let canvas;
+/**
+ * Any CSS color → `#rrggbb`, composited over `under` so translucent tokens
+ * (the dark themes' borders) come out as the color they actually paint.
+ */
+function toHex(color, under) {
+    canvas ??= document.createElement("canvas").getContext("2d", {
+        willReadFrequently: true,
+    });
+    if (canvas == null)
+        return color;
+    canvas.clearRect(0, 0, 1, 1);
+    canvas.fillStyle = under;
+    canvas.fillRect(0, 0, 1, 1);
+    canvas.fillStyle = color;
+    canvas.fillRect(0, 0, 1, 1);
+    const [r = 0, g = 0, b = 0] = canvas.getImageData(0, 0, 1, 1).data;
+    return `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+/** WCAG relative luminance of a `#rrggbb` color. */
+function luminance(hex) {
+    const [r = 0, g = 0, b = 0] = [1, 3, 5].map((at) => {
+        const c = Number.parseInt(hex.slice(at, at + 2), 16) / 255;
+        return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function readPalette(el) {
+    const style = getComputedStyle(el);
+    const token = (name) => style.getPropertyValue(name).trim();
+    const background = toHex(token("--background") || "#fff", "#fff");
+    const hex = (name) => toHex(token(name), background);
+    return {
+        // Read off the painted background rather than `.dark` on <html>: the
+        // theme root can be any element, and there may be no ThemeProvider at all.
+        dark: luminance(background) < 0.5,
+        background,
+        foreground: hex("--foreground"),
+        muted: hex("--muted"),
+        mutedForeground: hex("--muted-foreground"),
+        border: hex("--border"),
+    };
+}
+/**
+ * Mermaid source drawn as its diagram (T-523). `sourceView` shows until the
+ * first render lands — the renderer is a lazy chunk — and stays one click
+ * away afterwards. A diagram that does not parse keeps its source on screen
+ * with the parser's complaint under it.
+ *
+ * The colors are the theme tokens in effect on this element. The diagram is
+ * drawn again whenever `useTheme()` reports a new theme, color scheme or
+ * variant; outside a ThemeProvider it keeps the colors present when it was
+ * drawn.
+ */
+export function MermaidBlock({ source, sourceView, className, }) {
+    const { theme, colorScheme, variant } = useTheme();
+    const probe = useRef(null);
+    const [result, setResult] = useState(null);
+    const [showSource, setShowSource] = useState(false);
+    useEffect(() => {
+        // Read only as a trigger: the colors come off the computed style below,
+        // which the store has already switched by the time it notifies.
+        void [theme, colorScheme, variant];
+        const el = probe.current;
+        if (el === null)
+            return;
+        let live = true;
+        renderDiagram(source, readPalette(el), getComputedStyle(el).fontFamily).then((next) => {
+            if (live)
+                setResult(next);
+        });
+        return () => {
+            live = false;
+        };
+    }, [source, theme, colorScheme, variant]);
+    const diagram = result?.ok === true ? result : null;
+    const sourceShown = sourceView ?? (_jsx("pre", { children: _jsx("code", { children: source }) }));
+    return (_jsxs("div", { ref: probe, className: cn(diagram === null ? undefined : "relative pt-7", className), children: [diagram !== null && !showSource ? (_jsx("div", { className: "mermaid-diagram overflow-x-auto", style: { "--diagram-width": `${diagram.width}px` }, 
+                // mermaid's own output under securityLevel "strict", which runs
+                // labels through DOMPurify: markup survives, scripts and handlers
+                // do not.
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized by mermaid, see above
+                dangerouslySetInnerHTML: { __html: diagram.svg } })) : (sourceShown), result?.ok === false && (_jsx("p", { className: "mt-1 truncate text-destructive text-xs", title: result.error, children: errorSummary(result.error) })), diagram !== null && (_jsx(Button, { type: "button", size: "xs", variant: "ghost", className: "absolute top-0 right-0", "aria-pressed": showSource, onClick: () => setShowSource((shown) => !shown), children: showSource ? "Diagram" : "Source" }))] }));
+}
+//# sourceMappingURL=mermaid-block.js.map

package/dist/mermaid-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid-block.js","sourceRoot":"","sources":["../src/mermaid-block.tsx"],"names":[],"mappings":"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"}

package/dist/render.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Colors a diagram is drawn in, already resolved to `#rrggbb`: mermaid's
+ * color math (khroma) cannot parse the app's oklch() custom properties.
+ */
+export type DiagramPalette = {
+    dark: boolean;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+};
+export type DiagramResult = {
+    ok: true;
+    svg: string;
+    width: number;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function renderDiagram(source: string, palette: DiagramPalette, fontFamily: string): Promise<DiagramResult>;
+/** The diagram's natural width, which the fit rule in styles.css scales from. */
+export declare function viewBoxWidth(svg: string): number;
+/**
+ * mermaid's parse errors quote the offending line and draw a caret under it,
+ * which only lines up in the monospace block the error came from. One line
+ * is what fits under the source: where it failed, and what it got there.
+ */
+export declare function errorSummary(message: string): string;
+//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GACrB;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAkBjC,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,aAAa,CAAC,CAqCxB;AA2BD,iFAAiF;AACjF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGhD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAUpD"}

package/dist/render.js

@@ -0,0 +1,99 @@
+// mermaid is heavy (T-523); it is only ever reached through this dynamic
+// import, so its chunks are fetched the first time a page actually holds a
+// diagram.
+let loaded;
+function loadMermaid() {
+    loaded ??= import("mermaid").then((m) => m.default);
+    return loaded;
+}
+// `initialize` is global state, so a render for one palette must not
+// interleave with a render for another: every call waits for the last.
+let queue = Promise.resolve();
+let sequence = 0;
+export function renderDiagram(source, palette, fontFamily) {
+    const run = queue.then(async () => {
+        try {
+            let mermaid;
+            try {
+                mermaid = await loadMermaid();
+            }
+            catch (error) {
+                // A chunk that failed once (a dropped connection) would stay rejected
+                // in the memo and leave every later diagram on its source for the
+                // life of the page: forget it so the next render imports again.
+                // Whether that refetches is the browser's call; some still cache a
+                // failed module fetch.
+                loaded = undefined;
+                throw error;
+            }
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: "strict",
+                layout: "elk",
+                theme: "base",
+                fontFamily,
+                themeVariables: themeVariables(palette, fontFamily),
+            });
+            // parse() first: it throws the readable error without touching the
+            // DOM, where a failing render() can leave its scratch node behind.
+            await mermaid.parse(source);
+            const { svg } = await mermaid.render(`mermaid-${++sequence}`, source);
+            return { ok: true, svg, width: viewBoxWidth(svg) };
+        }
+        catch (error) {
+            return {
+                ok: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    });
+    queue = run.catch(() => undefined);
+    return run;
+}
+function themeVariables(p, fontFamily) {
+    return {
+        darkMode: p.dark,
+        fontFamily,
+        background: p.background,
+        primaryColor: p.muted,
+        primaryTextColor: p.foreground,
+        primaryBorderColor: p.mutedForeground,
+        secondaryColor: p.muted,
+        tertiaryColor: p.background,
+        mainBkg: p.muted,
+        nodeBorder: p.mutedForeground,
+        textColor: p.foreground,
+        nodeTextColor: p.foreground,
+        lineColor: p.mutedForeground,
+        clusterBkg: p.background,
+        clusterBorder: p.border,
+        edgeLabelBackground: p.background,
+        titleColor: p.foreground,
+        noteBkgColor: p.muted,
+        noteTextColor: p.foreground,
+        noteBorderColor: p.border,
+    };
+}
+/** The diagram's natural width, which the fit rule in styles.css scales from. */
+export function viewBoxWidth(svg) {
+    const match = /viewBox="[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)/.exec(svg);
+    return match ? Number(match[1]) : 0;
+}
+/**
+ * mermaid's parse errors quote the offending line and draw a caret under it,
+ * which only lines up in the monospace block the error came from. One line
+ * is what fits under the source: where it failed, and what it got there.
+ */
+export function errorSummary(message) {
+    const lines = message
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean);
+    if (lines.length <= 1)
+        return lines[0] ?? "";
+    const got = lines.at(-1) ?? "";
+    return /^Parse error/.test(lines[0] ?? "") && /got /.test(got)
+        ? `${lines[0]} ${got}`
+        : (lines[0] ?? "");
+}
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@orz/ui-mermaid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Mermaid diagrams drawn in the active @orz/ui theme, contributed to the @orz/ui-content registry",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orzFly/ui.git",
+    "directory": "packages/ui-mermaid"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "@orz/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@orz/ui-content": "^0.1.0",
+    "@orz/ui": "^0.1.0"
+  },
+  "dependencies": {
+    "mermaid": "^12.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "happy-dom": "^21.0.3",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "vitest": "^5.0.5",
+    "@orz/themes": "0.1.0",
+    "@orz/ui": "0.1.0",
+    "@orz/ui-content": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }

package/styles.css

@@ -0,0 +1,22 @@
+/* Tailwind resolves an imported file's @source against that file, so a
+   consumer importing this stylesheet scans the classes in the package's
+   shipped JS without writing an @source of its own. */
+@source "./dist";
+
+@layer components {
+  /* A diagram shrinks to the column, but never below 75% of its natural
+     width — past that its labels stop being readable, so it scrolls instead
+     (T-523). Never enlarged. `!important` beats the width attribute and the
+     inline max-width mermaid writes onto its own <svg>. */
+  /* biome-ignore-start lint/complexity/noImportantStyles: mermaid's inline style, see above */
+  .mermaid-diagram > svg {
+    display: block;
+    width: min(
+      var(--diagram-width),
+      max(100%, calc(var(--diagram-width) * 0.75))
+    ) !important;
+    max-width: none !important;
+    height: auto;
+  }
+  /* biome-ignore-end lint/complexity/noImportantStyles: mermaid's inline style, see above */
+}