@brett_lamy/docstream 1.14.1 → 1.15.0

package/README.md

@@ -13,7 +13,7 @@ GitBook-aware markdown rendering for React applications and AI streaming surface
   Markdown vs HTML images, blank lines between blocks, list markers, fences, table layout and tag lines as written).
   Layout-only fields (`gap`, `raw`, `opening`, …) are recorded only where the source differs from the default
   output, and are ignored once they no longer fit an edited node.
-- Syntax-highlighted code blocks through `gpu-lexer`; Mermaid diagrams and KaTeX math load on first use.
+- Syntax-highlighted code blocks through `gpu-lexer`; Mermaid diagrams (drawn by [Pele](https://pele.run)) and KaTeX math load on first use.
 - GitBook block support for hints, tabs, expandables, steppers, embeds, content refs, columns, figures, tables, math, dividers, updates, and OpenAPI operations.
 - Embed blocks render YouTube/direct video URLs through the built-in `VideoEmbed` and public Loop QA task, journey, exploration, or test-run URLs through `ReplayPreview`.
 - CSS exported as a stable package entrypoint so host apps can theme with CSS variables or shadcn-style design tokens.
@@ -31,8 +31,20 @@ pnpm add @brett_lamy/docstream
 React and React DOM are peer dependencies and must be provided by your app.
 Nothing in docstream's dependency tree runs an install script, so
 `pnpm add` succeeds with no build-script prompts (no `ERR_PNPM_IGNORED_BUILDS`).
-Heavy renderers are loaded only when a page needs them: Mermaid for
-` ```mermaid ` fences, KaTeX for math blocks, rrweb for replay event lists.
+Heavy renderers are loaded only when a page needs them: Pele for
+` ```mermaid ` fences (only the diagram types the page uses), KaTeX for math
+blocks, rrweb for replay event lists.
+
+` ```mermaid ` fences are drawn by [Pele](https://pele.run), which turns Mermaid
+text into SVG synchronously, without Mermaid or a browser layout pass. Each
+diagram is a card: the source on the left (with a copy button), the drawing on
+the right with **Open in Playground** and the render time; the panes stack on a
+narrow page. Pele reads its colors from `--pele-*` variables, which docstream
+maps to its theme on `.docs-mermaid-preview`. `PeleDiagram` (the drawing pane)
+and `usePele(code, ref)` are exported for hosts that show the source
+themselves, as the editor does. Pele supports every diagram type built into
+Mermaid, though its layout is its own. A diagram it can't draw shows Pele's
+error as text.
 
 Two features are opt-in, each behind its own entry and an **optional** peer
 dependency that the rest of the package never references:
@@ -840,7 +852,7 @@ import { ReactDemo } from "@brett_lamy/docstream/playground"
 
 Since 1.4 the package ships compiled ES modules (ES2022, `react-jsx`) with type
 declarations and declaration maps — one file per source module in `dist/`,
-dependencies left as imports, lazy features (Mermaid, KaTeX, rrweb, the
+dependencies left as imports, lazy features (Pele, KaTeX, rrweb, the
 playground's almost-node) still behind dynamic `import()`:
 
 ```json

package/dist/docs/Mermaid.d.ts

@@ -1,7 +1,25 @@
+import { type ReactNode, type RefObject } from "react";
 export interface MermaidProps {
     code: string;
+    /** Accepted for compatibility with older documents; the source pane always shows the whole diagram. */
     collapsedCodeLines?: number;
     expandedCodeLines?: number;
 }
-export declare function Mermaid({ code, collapsedCodeLines, expandedCodeLines }: MermaidProps): import("react").JSX.Element;
+/** Pele's playground, opened on this source. Long sources don't fit in a link. */
+export declare function pelePlaygroundUrl(code: string): string | null;
+export interface PeleDrawing {
+    svg?: string;
+    error?: string;
+    /** How long Pele took to draw it. */
+    ms?: number;
+}
+/** Draws `code` with Pele: the SVG (or the error) and the render time; null until it's drawn. */
+export declare function usePele(code: string, host: RefObject<HTMLElement | null>): PeleDrawing | null;
+/** The drawing pane: "Pele", the playground link, the diagram and its render time. */
+export declare function PeleDiagram({ code, className, children }: {
+    code: string;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Mermaid({ code }: MermaidProps): import("react").JSX.Element;
 //# sourceMappingURL=Mermaid.d.ts.map

package/dist/docs/Mermaid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Mermaid.d.ts","sourceRoot":"","sources":["../../src/docs/Mermaid.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAMD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,kBAAsB,EAAE,iBAAsB,EAAE,EAAE,YAAY,+BA0D7F"}
+{"version":3,"file":"Mermaid.d.ts","sourceRoot":"","sources":["../../src/docs/Mermaid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAU1F,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,uGAAuG;IACvG,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG7D;AAED,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,iGAAiG;AACjG,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAiC7F;AAID,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA2BpH;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,YAAY,+BAkB7C"}

package/dist/docs/Mermaid.js

@@ -1,39 +1,65 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Play } from "lucide-react";
 import { HighlightedCode } from "./HighlightedCode.js";
-let seq = 0;
-function positiveLineCount(value, fallback) {
-    return value !== undefined && Number.isFinite(value) && value > 0 ? Math.floor(value) : fallback;
+import { CopyIcon, useCopied } from "./copy.js";
+/** Pele's playground, opened on this source. Long sources don't fit in a link. */
+export function pelePlaygroundUrl(code) {
+    const hash = new URLSearchParams({ source: code }).toString();
+    return hash.length > 8000 ? null : `https://pele.run/playground#${hash}`;
 }
-export function Mermaid({ code, collapsedCodeLines = 3, expandedCodeLines = 30 }) {
-    const [svg, setSvg] = useState(null);
-    const [error, setError] = useState(null);
-    const [codeExpanded, setCodeExpanded] = useState(false);
-    const codePanelId = useId();
-    const collapsedLines = positiveLineCount(collapsedCodeLines, 3);
-    const expandedLines = Math.max(collapsedLines, positiveLineCount(expandedCodeLines, 30));
+/** Draws `code` with Pele: the SVG (or the error) and the render time; null until it's drawn. */
+export function usePele(code, host) {
+    const [drawn, setDrawn] = useState(null);
+    const idPrefix = `pele-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}-`;
     useEffect(() => {
         let cancelled = false;
-        import("mermaid")
-            .then(async ({ default: mermaid }) => {
-            mermaid.initialize({ startOnLoad: false, securityLevel: "strict" });
-            // A fresh id per render: mermaid.render removes any element with the id it is given,
-            // so reusing one (StrictMode's double effect, a code change) deleted the diagram an
-            // earlier render had already mounted.
-            const { svg } = await mermaid.render(`mermaid-${++seq}`, code);
-            if (!cancelled)
-                setSvg(svg);
+        import("pele/lazy")
+            .then(async (pele) => {
+            await pele.load(pele.detectType(code));
+            if (cancelled)
+                return;
+            // Pele measures text itself, so it needs the font the diagram is shown in.
+            const style = host.current ? getComputedStyle(host.current) : null;
+            const font = style ? style.getPropertyValue("--pele-font").trim() || style.fontFamily : "";
+            // …and the SVG draws in `--pele-font`, so measure and draw with the same one.
+            if (font && host.current && !style?.getPropertyValue("--pele-font").trim())
+                host.current.style.setProperty("--pele-font", font);
+            const start = performance.now();
+            try {
+                // The pane's width: a wide left-to-right chart turns top-down in a narrow pane rather than shrinking.
+                const width = host.current ? host.current.clientWidth - parseFloat(style?.paddingLeft ?? "0") - parseFloat(style?.paddingRight ?? "0") : 0;
+                const { svg } = pele.render(code, { idPrefix, ...(font ? { fontFamily: font } : {}), ...(width > 0 ? { maxWidth: width } : {}) });
+                setDrawn({ svg, ms: performance.now() - start });
+            }
+            catch (e) {
+                if (!(e instanceof pele.PeleError))
+                    throw e;
+                setDrawn({ error: e.message });
+            }
         })
             .catch((e) => {
             if (!cancelled)
-                setError(String(e.message ?? e));
+                setDrawn({ error: String(e?.message ?? e) });
         });
         return () => {
             cancelled = true;
         };
-    }, [code]);
-    return (_jsxs("section", { className: "docs-mermaid-preview", "data-docstream-mermaid": "", children: [error ? (_jsxs("pre", { className: "docs-mermaid-error", children: ["mermaid error: ", error] })) : svg ? (_jsx("div", { className: "docs-mermaid", dangerouslySetInnerHTML: { __html: svg } })) : (_jsx("div", { className: "docs-mermaid", children: "Rendering diagram\u2026" })), _jsxs("div", { className: "docs-react-demo-code docs-mermaid-code", children: [_jsx("pre", { id: codePanelId, className: codeExpanded ? "docs-react-demo-code-body docs-react-demo-code-body-expanded" : "docs-react-demo-code-body", style: {
-                            "--docs-react-demo-code-lines": codeExpanded ? expandedLines : collapsedLines,
-                        }, children: _jsx(HighlightedCode, { code: code, language: "mermaid", lineNumbers: true }) }), _jsx("button", { type: "button", className: "docs-react-demo-code-toggle", "aria-controls": codePanelId, "aria-expanded": codeExpanded, onClick: () => setCodeExpanded((value) => !value), children: codeExpanded ? "Hide Code" : "View Code" })] })] }));
+    }, [code, idPrefix, host]);
+    return drawn;
+}
+const formatMs = (ms) => (ms < 10 ? `${ms.toFixed(1)} ms` : `${Math.round(ms)} ms`);
+/** The drawing pane: "Pele", the playground link, the diagram and its render time. */
+export function PeleDiagram({ code, className, children }) {
+    const host = useRef(null);
+    const drawn = usePele(code, host);
+    const playground = pelePlaygroundUrl(code);
+    return (_jsxs("div", { ref: host, className: `docs-pele-pane docs-pele-diagram-pane${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "docs-pele-head", children: [_jsx("span", { className: "docs-pele-label", children: "Pele" }), playground ? (_jsxs("a", { className: "docs-pele-action", href: playground, target: "_blank", rel: "noreferrer", children: [_jsx(Play, { width: 14, height: 14, strokeWidth: 2, "aria-hidden": "true" }), "Open in Playground"] })) : null] }), drawn?.error !== undefined ? (
+            // The message quotes the diagram source: text, never markup.
+            _jsx("pre", { className: "docs-mermaid-error", role: "alert", children: drawn.error })) : drawn?.svg ? (_jsx("div", { className: "docs-mermaid", dangerouslySetInnerHTML: { __html: drawn.svg } })) : (_jsx("div", { className: "docs-mermaid docs-mermaid-pending", children: "Drawing\u2026" })), drawn?.ms !== undefined ? _jsx("span", { className: "docs-pele-time", children: formatMs(drawn.ms) }) : null, children] }));
+}
+export function Mermaid({ code }) {
+    const { copied, copy } = useCopied();
+    return (_jsxs("section", { className: "docs-mermaid-preview", "data-docstream-mermaid": "", children: [_jsxs("div", { className: "docs-pele-pane docs-pele-source-pane", children: [_jsxs("div", { className: "docs-pele-head", children: [_jsx("span", { className: "docs-pele-label", children: "Mermaid" }), _jsx("button", { type: "button", className: "docs-pele-action docs-pele-copy", "aria-label": copied ? "Copied" : "Copy Mermaid source", onClick: () => void copy(code), children: _jsx(CopyIcon, { copied: copied, size: 16 }) })] }), _jsx("pre", { className: "docs-pele-source", children: _jsx(HighlightedCode, { code: code, language: "mermaid" }) })] }), _jsx(PeleDiagram, { code: code })] }));
 }
 //# sourceMappingURL=Mermaid.js.map

package/dist/docs/Mermaid.js.map

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

package/dist/index.d.ts

@@ -28,6 +28,8 @@ export type { VideoEmbedProps } from "./video/index.js";
 export { StlViewer, isStlUrl, parseStl } from "./stl/index.js";
 export type { StlMesh, StlViewerProps } from "./stl/index.js";
 export { StrudelPlayer } from "./strudel/StrudelPlayer.js";
+export { Mermaid, PeleDiagram, pelePlaygroundUrl, usePele } from "./docs/Mermaid.js";
+export type { MermaidProps, PeleDrawing } from "./docs/Mermaid.js";
 export { isStrudelFile, isStrudelLanguage } from "./strudel/url.js";
 export type { StrudelPlayerProps } from "./strudel/StrudelPlayer.js";
 export { OpenApiOperation } from "./openapi/OpenApiOperation.js";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -17,6 +17,7 @@ export { isReplayQaUrl, normalizeReplayEmbedUrl } from "./replay/url.js";
 export { VideoEmbed } from "./video/index.js";
 export { StlViewer, isStlUrl, parseStl } from "./stl/index.js";
 export { StrudelPlayer } from "./strudel/StrudelPlayer.js";
+export { Mermaid, PeleDiagram, pelePlaygroundUrl, usePele } from "./docs/Mermaid.js";
 export { isStrudelFile, isStrudelLanguage } from "./strudel/url.js";
 export { OpenApiOperation } from "./openapi/OpenApiOperation.js";
 export { createInlineDemoProject, createReactDemoFiles } from "./playground/project.js";

package/dist/index.js.map

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

package/dist/styles.css

@@ -1545,34 +1545,136 @@
 }
 
 .docs-mermaid-preview {
+  /* Pele draws with these; they follow the theme without a redraw. */
+  --pele-bg: transparent;
+  --pele-fg: var(--gb-panel-foreground);
+  --pele-muted: var(--gb-muted-foreground);
+  --pele-line: var(--gb-muted-foreground);
+  --pele-surface: var(--gb-hover);
+  --pele-surface-alt: var(--gb-code-bg);
+  --pele-border: var(--gb-border);
+  --pele-accent: var(--gb-primary);
+  --pele-error: var(--gb-danger);
+  --pele-radius: 6px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
   border: 1px solid var(--gb-border);
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
+  background: var(--gb-panel);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-pele-pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 14px 18px 18px;
+}
+
+/* Side by side, a hairline between; stacked, a hairline above the drawing. */
+.docs-pele-source-pane {
+  box-shadow: 1px 0 0 var(--gb-border), 0 1px 0 var(--gb-border);
+}
+
+.docs-pele-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  margin-bottom: 10px;
+}
+
+.docs-pele-label {
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-pele-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  margin-right: -6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  font: inherit;
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.docs-mermaid-preview a.docs-pele-action {
+  color: var(--gb-muted-foreground);
+  text-decoration: none;
+}
+
+.docs-pele-action:hover,
+.docs-mermaid-preview a.docs-pele-action:hover {
+  background: var(--gb-hover);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-pele-action:focus-visible {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: 1px;
+}
+
+.docs-pele-source {
+  margin: 0;
+  overflow: auto;
+  font-size: 13px;
+  line-height: 1.7;
+  white-space: pre;
+}
+
+.docs-mermaid-preview .docs-pele-source code {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
 }
 
 .docs-mermaid {
   display: flex;
+  flex: 1;
+  align-items: center;
   justify-content: center;
-  padding: 16px;
-  background: var(--background, #ffffff);
+  min-height: 120px;
+  padding: 8px 0 18px;
 }
 
 .docs-mermaid svg {
   max-width: 100%;
+  height: auto;
+}
+
+.docs-mermaid-pending {
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-pele-time {
+  position: absolute;
+  right: 18px;
+  bottom: 12px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--gb-muted-foreground);
 }
 
 .docs-mermaid-error {
   margin: 0;
   font-size: 12px;
   color: var(--gb-danger);
-  padding: 10px;
   white-space: pre-wrap;
 }
 
-.docs-mermaid-code {
-  border-top: 1px solid var(--gb-border);
-}
-
 .docs-inline-img {
   display: inline-block;
   vertical-align: middle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"
@@ -145,7 +145,7 @@
     "gpu-lexer": "^0.0.2",
     "katex": "^0.18.5",
     "lucide-react": "^1.17.0",
-    "mermaid": "^11.15.0",
+    "pele": "1.6.0",
     "react-aria": "^3.52.1",
     "rrweb": "2.0.0-alpha.20",
     "yaml": "^2.9.0"

package/src/docs/Mermaid.tsx

@@ -1,74 +1,117 @@
-import { useEffect, useId, useState, type CSSProperties } from "react"
+import { useEffect, useId, useRef, useState, type ReactNode, type RefObject } from "react"
+import { Play } from "lucide-react"
 import { HighlightedCode } from "./HighlightedCode"
+import { CopyIcon, useCopied } from "./copy"
 
-let seq = 0
+/* Mermaid diagrams, drawn by Pele (https://pele.run): Mermaid text in, SVG out, synchronously and with no
+   browser layout pass. A diagram is a card of two panes — the source on the left, the drawing on the right with
+   an "Open in Playground" link and how long it took — that stack on a narrow page. Pele loads on first use, and only
+   the diagram types a page uses. */
 
 export interface MermaidProps {
   code: string
+  /** Accepted for compatibility with older documents; the source pane always shows the whole diagram. */
   collapsedCodeLines?: number
   expandedCodeLines?: number
 }
 
-function positiveLineCount(value: number | undefined, fallback: number): number {
-  return value !== undefined && Number.isFinite(value) && value > 0 ? Math.floor(value) : fallback
+/** Pele's playground, opened on this source. Long sources don't fit in a link. */
+export function pelePlaygroundUrl(code: string): string | null {
+  const hash = new URLSearchParams({ source: code }).toString()
+  return hash.length > 8000 ? null : `https://pele.run/playground#${hash}`
 }
 
-export function Mermaid({ code, collapsedCodeLines = 3, expandedCodeLines = 30 }: MermaidProps) {
-  const [svg, setSvg] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [codeExpanded, setCodeExpanded] = useState(false)
-  const codePanelId = useId()
-  const collapsedLines = positiveLineCount(collapsedCodeLines, 3)
-  const expandedLines = Math.max(collapsedLines, positiveLineCount(expandedCodeLines, 30))
+export interface PeleDrawing {
+  svg?: string
+  error?: string
+  /** How long Pele took to draw it. */
+  ms?: number
+}
 
+/** Draws `code` with Pele: the SVG (or the error) and the render time; null until it's drawn. */
+export function usePele(code: string, host: RefObject<HTMLElement | null>): PeleDrawing | null {
+  const [drawn, setDrawn] = useState<PeleDrawing | null>(null)
+  const idPrefix = `pele-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}-`
   useEffect(() => {
     let cancelled = false
-    import("mermaid")
-      .then(async ({ default: mermaid }) => {
-        mermaid.initialize({ startOnLoad: false, securityLevel: "strict" })
-        // A fresh id per render: mermaid.render removes any element with the id it is given,
-        // so reusing one (StrictMode's double effect, a code change) deleted the diagram an
-        // earlier render had already mounted.
-        const { svg } = await mermaid.render(`mermaid-${++seq}`, code)
-        if (!cancelled) setSvg(svg)
+    import("pele/lazy")
+      .then(async (pele) => {
+        await pele.load(pele.detectType(code))
+        if (cancelled) return
+        // Pele measures text itself, so it needs the font the diagram is shown in.
+        const style = host.current ? getComputedStyle(host.current) : null
+        const font = style ? style.getPropertyValue("--pele-font").trim() || style.fontFamily : ""
+        // …and the SVG draws in `--pele-font`, so measure and draw with the same one.
+        if (font && host.current && !style?.getPropertyValue("--pele-font").trim()) host.current.style.setProperty("--pele-font", font)
+        const start = performance.now()
+        try {
+          // The pane's width: a wide left-to-right chart turns top-down in a narrow pane rather than shrinking.
+          const width = host.current ? host.current.clientWidth - parseFloat(style?.paddingLeft ?? "0") - parseFloat(style?.paddingRight ?? "0") : 0
+          const { svg } = pele.render(code, { idPrefix, ...(font ? { fontFamily: font } : {}), ...(width > 0 ? { maxWidth: width } : {}) })
+          setDrawn({ svg, ms: performance.now() - start })
+        } catch (e) {
+          if (!(e instanceof pele.PeleError)) throw e
+          setDrawn({ error: e.message })
+        }
       })
-      .catch((e) => {
-        if (!cancelled) setError(String(e.message ?? e))
+      .catch((e: unknown) => {
+        if (!cancelled) setDrawn({ error: String((e as Error)?.message ?? e) })
       })
     return () => {
       cancelled = true
     }
-  }, [code])
+  }, [code, idPrefix, host])
+  return drawn
+}
+
+const formatMs = (ms: number) => (ms < 10 ? `${ms.toFixed(1)} ms` : `${Math.round(ms)} ms`)
 
+/** The drawing pane: "Pele", the playground link, the diagram and its render time. */
+export function PeleDiagram({ code, className, children }: { code: string; className?: string; children?: ReactNode }) {
+  const host = useRef<HTMLDivElement>(null)
+  const drawn = usePele(code, host)
+  const playground = pelePlaygroundUrl(code)
   return (
-    <section className="docs-mermaid-preview" data-docstream-mermaid="">
-      {error ? (
-        <pre className="docs-mermaid-error">mermaid error: {error}</pre>
-      ) : svg ? (
-        <div className="docs-mermaid" dangerouslySetInnerHTML={{ __html: svg }} />
+    <div ref={host} className={`docs-pele-pane docs-pele-diagram-pane${className ? ` ${className}` : ""}`}>
+      <div className="docs-pele-head">
+        <span className="docs-pele-label">Pele</span>
+        {playground ? (
+          <a className="docs-pele-action" href={playground} target="_blank" rel="noreferrer">
+            <Play width={14} height={14} strokeWidth={2} aria-hidden="true" />
+            Open in Playground
+          </a>
+        ) : null}
+      </div>
+      {drawn?.error !== undefined ? (
+        // The message quotes the diagram source: text, never markup.
+        <pre className="docs-mermaid-error" role="alert">{drawn.error}</pre>
+      ) : drawn?.svg ? (
+        <div className="docs-mermaid" dangerouslySetInnerHTML={{ __html: drawn.svg }} />
       ) : (
-        <div className="docs-mermaid">Rendering diagram…</div>
+        <div className="docs-mermaid docs-mermaid-pending">Drawing…</div>
       )}
-      <div className="docs-react-demo-code docs-mermaid-code">
-        <pre
-          id={codePanelId}
-          className={codeExpanded ? "docs-react-demo-code-body docs-react-demo-code-body-expanded" : "docs-react-demo-code-body"}
-          style={{
-            "--docs-react-demo-code-lines": codeExpanded ? expandedLines : collapsedLines,
-          } as CSSProperties}
-        >
-          <HighlightedCode code={code} language="mermaid" lineNumbers />
+      {drawn?.ms !== undefined ? <span className="docs-pele-time">{formatMs(drawn.ms)}</span> : null}
+      {children}
+    </div>
+  )
+}
+
+export function Mermaid({ code }: MermaidProps) {
+  const { copied, copy } = useCopied()
+  return (
+    <section className="docs-mermaid-preview" data-docstream-mermaid="">
+      <div className="docs-pele-pane docs-pele-source-pane">
+        <div className="docs-pele-head">
+          <span className="docs-pele-label">Mermaid</span>
+          <button type="button" className="docs-pele-action docs-pele-copy" aria-label={copied ? "Copied" : "Copy Mermaid source"} onClick={() => void copy(code)}>
+            <CopyIcon copied={copied} size={16} />
+          </button>
+        </div>
+        <pre className="docs-pele-source">
+          <HighlightedCode code={code} language="mermaid" />
         </pre>
-        <button
-          type="button"
-          className="docs-react-demo-code-toggle"
-          aria-controls={codePanelId}
-          aria-expanded={codeExpanded}
-          onClick={() => setCodeExpanded((value) => !value)}
-        >
-          {codeExpanded ? "Hide Code" : "View Code"}
-        </button>
       </div>
+      <PeleDiagram code={code} />
     </section>
   )
 }

package/src/index.ts

@@ -91,6 +91,8 @@ export type { VideoEmbedProps } from "./video"
 export { StlViewer, isStlUrl, parseStl } from "./stl"
 export type { StlMesh, StlViewerProps } from "./stl"
 export { StrudelPlayer } from "./strudel/StrudelPlayer"
+export { Mermaid, PeleDiagram, pelePlaygroundUrl, usePele } from "./docs/Mermaid"
+export type { MermaidProps, PeleDrawing } from "./docs/Mermaid"
 export { isStrudelFile, isStrudelLanguage } from "./strudel/url"
 export type { StrudelPlayerProps } from "./strudel/StrudelPlayer"
 export { OpenApiOperation } from "./openapi/OpenApiOperation"

package/src/styles.css

@@ -1545,34 +1545,136 @@
 }
 
 .docs-mermaid-preview {
+  /* Pele draws with these; they follow the theme without a redraw. */
+  --pele-bg: transparent;
+  --pele-fg: var(--gb-panel-foreground);
+  --pele-muted: var(--gb-muted-foreground);
+  --pele-line: var(--gb-muted-foreground);
+  --pele-surface: var(--gb-hover);
+  --pele-surface-alt: var(--gb-code-bg);
+  --pele-border: var(--gb-border);
+  --pele-accent: var(--gb-primary);
+  --pele-error: var(--gb-danger);
+  --pele-radius: 6px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
   border: 1px solid var(--gb-border);
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
+  background: var(--gb-panel);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-pele-pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 14px 18px 18px;
+}
+
+/* Side by side, a hairline between; stacked, a hairline above the drawing. */
+.docs-pele-source-pane {
+  box-shadow: 1px 0 0 var(--gb-border), 0 1px 0 var(--gb-border);
+}
+
+.docs-pele-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  margin-bottom: 10px;
+}
+
+.docs-pele-label {
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-pele-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  margin-right: -6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  font: inherit;
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.docs-mermaid-preview a.docs-pele-action {
+  color: var(--gb-muted-foreground);
+  text-decoration: none;
+}
+
+.docs-pele-action:hover,
+.docs-mermaid-preview a.docs-pele-action:hover {
+  background: var(--gb-hover);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-pele-action:focus-visible {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: 1px;
+}
+
+.docs-pele-source {
+  margin: 0;
+  overflow: auto;
+  font-size: 13px;
+  line-height: 1.7;
+  white-space: pre;
+}
+
+.docs-mermaid-preview .docs-pele-source code {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
 }
 
 .docs-mermaid {
   display: flex;
+  flex: 1;
+  align-items: center;
   justify-content: center;
-  padding: 16px;
-  background: var(--background, #ffffff);
+  min-height: 120px;
+  padding: 8px 0 18px;
 }
 
 .docs-mermaid svg {
   max-width: 100%;
+  height: auto;
+}
+
+.docs-mermaid-pending {
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-pele-time {
+  position: absolute;
+  right: 18px;
+  bottom: 12px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--gb-muted-foreground);
 }
 
 .docs-mermaid-error {
   margin: 0;
   font-size: 12px;
   color: var(--gb-danger);
-  padding: 10px;
   white-space: pre-wrap;
 }
 
-.docs-mermaid-code {
-  border-top: 1px solid var(--gb-border);
-}
-
 .docs-inline-img {
   display: inline-block;
   vertical-align: middle;