@agent-native/core 0.39.2 → 0.40.1

package/dist/client/blocks/library/HighlightedCode.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../utils.js";
+let highlighterLoader = null;
+function loadHighlighter() {
+    if (!highlighterLoader) {
+        highlighterLoader = (async () => {
+            const [{ createHighlighterCore }, { createOnigurumaEngine }] = await Promise.all([
+                import("shiki/core"),
+                import("shiki/engine/oniguruma"),
+            ]);
+            return createHighlighterCore({
+                themes: [
+                    import("shiki/themes/github-light-default.mjs"),
+                    import("shiki/themes/github-dark-default.mjs"),
+                ],
+                langs: [
+                    import("shiki/langs/javascript.mjs"),
+                    import("shiki/langs/typescript.mjs"),
+                    import("shiki/langs/jsx.mjs"),
+                    import("shiki/langs/tsx.mjs"),
+                    import("shiki/langs/json.mjs"),
+                    import("shiki/langs/css.mjs"),
+                    import("shiki/langs/html.mjs"),
+                    import("shiki/langs/markdown.mjs"),
+                    import("shiki/langs/bash.mjs"),
+                    import("shiki/langs/shellscript.mjs"),
+                    import("shiki/langs/python.mjs"),
+                    import("shiki/langs/yaml.mjs"),
+                    import("shiki/langs/sql.mjs"),
+                ],
+                engine: createOnigurumaEngine(import("shiki/wasm")),
+            });
+        })().catch((error) => {
+            highlighterLoader = null;
+            throw error;
+        });
+    }
+    return highlighterLoader;
+}
+const LANG_ALIASES = {
+    js: "javascript",
+    ts: "typescript",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    py: "python",
+    yml: "yaml",
+    md: "markdown",
+    bq: "sql",
+    bigquery: "sql",
+};
+export function HighlightedCode({ code, language, }) {
+    const [html, setHtml] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        loadHighlighter()
+            .then((highlighter) => {
+            const requested = (language || "text").toLowerCase();
+            const resolved = LANG_ALIASES[requested] ?? requested;
+            const loaded = highlighter.getLoadedLanguages();
+            const lang = loaded.includes(resolved) ? resolved : "text";
+            return highlighter.codeToHtml(code, {
+                lang,
+                themes: {
+                    light: "github-light-default",
+                    dark: "github-dark-default",
+                },
+                defaultColor: false,
+            });
+        })
+            .then((out) => {
+            if (!cancelled)
+                setHtml(out);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setHtml(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code, language]);
+    if (html) {
+        return (_jsx("div", { className: "plan-shiki", dangerouslySetInnerHTML: { __html: html } }));
+    }
+    return (_jsx("pre", { children: _jsx("code", { className: language ? `language-${language}` : undefined, children: code }) }));
+}
+export function CodeSurface({ code, language, className, }) {
+    return (_jsx("div", { className: cn("plan-code-surface", className ?? "mt-5"), children: _jsx(HighlightedCode, { code: code, language: language }) }));
+}
+//# sourceMappingURL=HighlightedCode.js.map

package/dist/client/blocks/library/HighlightedCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedCode.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/HighlightedCode.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { cn } from \"../../utils.js\";\n\ntype ShikiHighlighter = {\n  codeToHtml: (\n    code: string,\n    options: {\n      lang: string;\n      themes: { light: string; dark: string };\n      defaultColor?: false | \"light\" | \"dark\";\n    },\n  ) => string | Promise<string>;\n  getLoadedLanguages: () => string[];\n};\n\nlet highlighterLoader: Promise<ShikiHighlighter> | null = null;\nfunction loadHighlighter(): Promise<ShikiHighlighter> {\n  if (!highlighterLoader) {\n    highlighterLoader = (async () => {\n      const [{ createHighlighterCore }, { createOnigurumaEngine }] =\n        await Promise.all([\n          import(\"shiki/core\"),\n          import(\"shiki/engine/oniguruma\"),\n        ]);\n      return createHighlighterCore({\n        themes: [\n          import(\"shiki/themes/github-light-default.mjs\"),\n          import(\"shiki/themes/github-dark-default.mjs\"),\n        ],\n        langs: [\n          import(\"shiki/langs/javascript.mjs\"),\n          import(\"shiki/langs/typescript.mjs\"),\n          import(\"shiki/langs/jsx.mjs\"),\n          import(\"shiki/langs/tsx.mjs\"),\n          import(\"shiki/langs/json.mjs\"),\n          import(\"shiki/langs/css.mjs\"),\n          import(\"shiki/langs/html.mjs\"),\n          import(\"shiki/langs/markdown.mjs\"),\n          import(\"shiki/langs/bash.mjs\"),\n          import(\"shiki/langs/shellscript.mjs\"),\n          import(\"shiki/langs/python.mjs\"),\n          import(\"shiki/langs/yaml.mjs\"),\n          import(\"shiki/langs/sql.mjs\"),\n        ],\n        engine: createOnigurumaEngine(import(\"shiki/wasm\")),\n      }) as unknown as Promise<ShikiHighlighter>;\n    })().catch((error) => {\n      highlighterLoader = null;\n      throw error;\n    });\n  }\n  return highlighterLoader;\n}\n\nconst LANG_ALIASES: Record<string, string> = {\n  js: \"javascript\",\n  ts: \"typescript\",\n  sh: \"bash\",\n  shell: \"bash\",\n  zsh: \"bash\",\n  py: \"python\",\n  yml: \"yaml\",\n  md: \"markdown\",\n  bq: \"sql\",\n  bigquery: \"sql\",\n};\n\nexport function HighlightedCode({\n  code,\n  language,\n}: {\n  code: string;\n  language?: string;\n}) {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadHighlighter()\n      .then((highlighter) => {\n        const requested = (language || \"text\").toLowerCase();\n        const resolved = LANG_ALIASES[requested] ?? requested;\n        const loaded = highlighter.getLoadedLanguages();\n        const lang = loaded.includes(resolved) ? resolved : \"text\";\n        return highlighter.codeToHtml(code, {\n          lang,\n          themes: {\n            light: \"github-light-default\",\n            dark: \"github-dark-default\",\n          },\n          defaultColor: false,\n        });\n      })\n      .then((out) => {\n        if (!cancelled) setHtml(out as string);\n      })\n      .catch(() => {\n        if (!cancelled) setHtml(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  if (html) {\n    return (\n      <div className=\"plan-shiki\" dangerouslySetInnerHTML={{ __html: html }} />\n    );\n  }\n  return (\n    <pre>\n      <code className={language ? `language-${language}` : undefined}>\n        {code}\n      </code>\n    </pre>\n  );\n}\n\nexport function CodeSurface({\n  code,\n  language,\n  className,\n}: {\n  code: string;\n  language?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"plan-code-surface\", className ?? \"mt-5\")}>\n      <HighlightedCode code={code} language={language} />\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/JsonExplorerBlock.d.ts

@@ -1,5 +1,5 @@
 import type { BlockEditProps, BlockReadProps } from "../types.js";
-import type { JsonExplorerData } from "./json-explorer.config.js";
+import { type JsonExplorerData } from "./json-explorer.config.js";
 /**
  * Read-only renderer for a `json-explorer` block. Parses `data.json` defensively
  * and renders the collapsible tree; on a parse error it shows the raw payload in
@@ -7,13 +7,18 @@ import type { JsonExplorerData } from "./json-explorer.config.js";
  * all" control toggles every node at once via a global pulse counter.
  */
 export declare function JsonExplorerRead({ data, blockId, title, summary, }: BlockReadProps<JsonExplorerData>): import("react/jsx-runtime").JSX.Element;
+export declare function JsonExplorerSurface({ data, className, label, }: {
+    data: Pick<JsonExplorerData, "json" | "collapsedDepth">;
+    className?: string;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * Panel editor for a `json-explorer` block: a monospace textarea bound to the
  * raw `json`, a "Format" button that pretty-prints via `JSON.parse` →
  * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never
- * `window.alert`), a `collapsedDepth` number input, and a `title` input. Renders
- * BARE content (no `<section>`); the registry's panel surface supplies the
- * popover chrome.
+ * `window.alert`), an auto-expand depth picker/input, and a `title` input.
+ * Renders BARE content (no `<section>`); the registry's panel surface supplies
+ * the popover chrome.
  */
 export declare function JsonExplorerEdit({ data, onChange, editable, }: BlockEditProps<JsonExplorerData>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JsonExplorerBlock.d.ts.map

package/dist/client/blocks/library/JsonExplorerBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonExplorerBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAwOlE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CA4ElC;AAID;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CA+FlC"}
+{"version":3,"file":"JsonExplorerBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AA2QnC;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CAUlC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,KAAc,GACf,EAAE;IACD,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,gBAAgB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CA6EA;AAID;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CA6HlC"}

package/dist/client/blocks/library/JsonExplorerBlock.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState } from "react";
+import { useId, useMemo, useState, } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
 import { cn } from "../../utils.js";
+import { JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH, JSON_EXPLORER_MAX_COLLAPSED_DEPTH, } from "./json-explorer.config.js";
 import { DevInput, DevLabel, DevTextarea } from "./dev-doc-ui.js";
 /**
  * Read + Edit renderers for a `json-explorer` block — a browser-devtools /
@@ -35,6 +36,15 @@ const NULL_CLASS = "text-plan-muted italic";
 const KEY_CLASS = "text-rose-700 dark:text-rose-300";
 /** Structural punctuation (braces, brackets, commas, colons). */
 const PUNCT_CLASS = "text-plan-muted";
+const JSON_EXPLORER_DEPTH_PRESETS = [
+    { label: "Off", value: 0 },
+    { label: "2 levels", value: JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH },
+    { label: "3 levels", value: 3 },
+    { label: "All", value: JSON_EXPLORER_MAX_COLLAPSED_DEPTH },
+];
+function clampCollapsedDepth(value) {
+    return Math.max(0, Math.min(JSON_EXPLORER_MAX_COLLAPSED_DEPTH, value));
+}
 function parseJson(raw) {
     const trimmed = raw.trim();
     if (!trimmed) {
@@ -82,17 +92,29 @@ function LeafValue({ value }) {
  * "pulse" (`forceOpen`) flips. Leaves render inline with their type color.
  */
 function JsonNode({ label, value, depth, collapsedDepth, forceOpen, trailingComma, }) {
-    const seededOpen = depth < collapsedDepth;
+    const seededOpen = forceOpen?.open ?? depth < collapsedDepth;
     // `forceOpen` is the global pulse: when the user hits expand/collapse all we
-    // flip every node, but per-node toggles still win afterward (the pulse is part
-    // of the state key via `useMemo` reseed below).
-    const [open, setOpen] = useState(seededOpen);
-    // Re-seed when the global pulse changes. Keyed by `forceOpen` identity.
-    useMemo(() => {
-        if (forceOpen !== null)
-            setOpen(forceOpen);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [forceOpen]);
+    // flip every node, but per-node toggles still win afterward.
+    const [openState, setOpenState] = useState({ forceOpen, open: seededOpen });
+    const [subtreePulse, setSubtreePulse] = useState(null);
+    let open = openState.open;
+    if (forceOpen !== openState.forceOpen) {
+        open = forceOpen?.open ?? openState.open;
+        setOpenState({ forceOpen, open });
+    }
+    const handleToggle = (event) => {
+        const nextOpen = !open;
+        setOpenState((prev) => ({ ...prev, open: nextOpen }));
+        if (event.altKey) {
+            setSubtreePulse((prev) => ({
+                open: nextOpen,
+                nonce: (prev?.nonce ?? 0) + 1,
+            }));
+        }
+        else {
+            setSubtreePulse(null);
+        }
+    };
     const keyEl = label !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: KEY_CLASS, children: typeof label === "number" ? label : JSON.stringify(label) }), _jsx("span", { className: PUNCT_CLASS, children: ": " })] })) : null;
     if (!isContainer(value)) {
         return (_jsxs("div", { className: "flex items-start py-0.5 leading-relaxed", children: [_jsx("span", { className: "select-none whitespace-pre", children: keyEl }), _jsx(LeafValue, { value: value }), trailingComma && _jsx("span", { className: PUNCT_CLASS, children: "," })] }));
@@ -104,7 +126,9 @@ function JsonNode({ label, value, depth, collapsedDepth, forceOpen, trailingComm
     const openBrace = isArray ? "[" : "{";
     const closeBrace = isArray ? "]" : "}";
     const empty = entries.length === 0;
-    return (_jsxs("div", { className: "leading-relaxed", children: [_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": open, disabled: empty, onClick: () => setOpen((value) => !value), className: cn("group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors", !empty && "hover:bg-accent/40", empty && "cursor-default"), children: [_jsx(IconChevronRight, { className: cn("mt-1 size-3.5 shrink-0 text-plan-muted transition-transform", open && "rotate-90", empty && "opacity-0") }), _jsxs("span", { className: "min-w-0 whitespace-pre-wrap break-words", children: [keyEl, _jsx("span", { className: PUNCT_CLASS, children: openBrace }), !open && !empty && (_jsx("span", { className: "ml-1 text-plan-muted", children: containerSummary(value) })), (!open || empty) && (_jsxs("span", { className: PUNCT_CLASS, children: [empty ? "" : "…", closeBrace, trailingComma ? "," : ""] }))] })] }), open && !empty && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ml-[7px] border-l border-plan-line pl-3.5", children: entries.map(([entryKey, entryValue], index) => (_jsx(JsonNode, { label: entryKey, value: entryValue, depth: depth + 1, collapsedDepth: collapsedDepth, forceOpen: forceOpen, trailingComma: index < entries.length - 1 }, String(entryKey)))) }), _jsx("div", { className: "flex items-start", children: _jsxs("span", { className: "ml-[18px] whitespace-pre", children: [_jsx("span", { className: PUNCT_CLASS, children: closeBrace }), trailingComma && _jsx("span", { className: PUNCT_CLASS, children: "," })] }) })] }))] }));
+    const childForceOpen = subtreePulse ?? forceOpen;
+    const childPulseNonce = childForceOpen?.nonce ?? 0;
+    return (_jsxs("div", { className: "leading-relaxed", children: [_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": open, disabled: empty, onClick: handleToggle, className: cn("group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors", !empty && "hover:bg-accent/40", empty && "cursor-default"), children: [_jsx(IconChevronRight, { className: cn("mt-1 size-3.5 shrink-0 text-plan-muted transition-transform", open && "rotate-90", empty && "opacity-0") }), _jsxs("span", { className: "min-w-0 whitespace-pre-wrap break-words", children: [keyEl, _jsx("span", { className: PUNCT_CLASS, children: openBrace }), !open && !empty && (_jsx("span", { className: "ml-1 text-plan-muted", children: containerSummary(value) })), (!open || empty) && (_jsxs("span", { className: PUNCT_CLASS, children: [empty ? "" : "…", closeBrace, trailingComma ? "," : ""] }))] })] }), open && !empty && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ml-[7px] border-l border-plan-line pl-3.5", children: entries.map(([entryKey, entryValue], index) => (_jsx(JsonNode, { label: entryKey, value: entryValue, depth: depth + 1, collapsedDepth: collapsedDepth, forceOpen: childForceOpen, trailingComma: index < entries.length - 1 }, `${String(entryKey)}:${childPulseNonce}`))) }), _jsx("div", { className: "flex items-start", children: _jsxs("span", { className: "ml-[18px] whitespace-pre", children: [_jsx("span", { className: PUNCT_CLASS, children: closeBrace }), trailingComma && _jsx("span", { className: PUNCT_CLASS, children: "," })] }) })] }))] }));
 }
 /* ── Read (collapsible devtools tree) ──────────────────────────────────────── */
 /**
@@ -114,37 +138,44 @@ function JsonNode({ label, value, depth, collapsedDepth, forceOpen, trailingComm
  * all" control toggles every node at once via a global pulse counter.
  */
 export function JsonExplorerRead({ data, blockId, title, summary, }) {
+    const heading = data.title ?? title;
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [heading && _jsx("div", { className: "plan-block-label", children: heading }), _jsx(JsonExplorerSurface, { data: data }), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+}
+export function JsonExplorerSurface({ data, className, label = "JSON", }) {
     const parsed = useMemo(() => parseJson(data.json), [data.json]);
-    const collapsedDepth = data.collapsedDepth ?? 1;
+    const collapsedDepth = data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;
     // `pulse` carries a boolean (expand/collapse) plus a nonce so repeated clicks
     // of the same action still re-fire the reseed in each node.
     const [pulse, setPulse] = useState(null);
-    const heading = data.title ?? title;
-    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [heading && _jsx("div", { className: "plan-block-label", children: heading }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-plan-line bg-plan-code", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-wide text-plan-muted", children: "JSON" }), parsed.ok && isContainer(parsed.value) && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "data-plan-interactive": true, onClick: () => setPulse((prev) => ({
-                                            open: true,
-                                            nonce: (prev?.nonce ?? 0) + 1,
-                                        })), className: "rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text", children: "Expand all" }), _jsx("span", { className: "text-plan-muted", children: "\u00B7" }), _jsx("button", { type: "button", "data-plan-interactive": true, onClick: () => setPulse((prev) => ({
-                                            open: false,
-                                            nonce: (prev?.nonce ?? 0) + 1,
-                                        })), className: "rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text", children: "Collapse all" })] }))] }), _jsx("div", { className: "overflow-auto px-3 py-2.5 font-mono text-sm text-plan-code-text", children: parsed.ok ? (_jsx(JsonNode
-                        // Remount the whole tree when the global pulse fires so every node
-                        // re-seeds from the new open/closed state cleanly.
-                        , { value: parsed.value, depth: 0, collapsedDepth: collapsedDepth, forceOpen: pulse?.open ?? null }, pulse?.nonce ?? 0)) : (_jsxs("div", { className: "space-y-2", children: [_jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words text-plan-code-text", children: data.json || "—" }), _jsxs("p", { className: "text-xs text-red-600 dark:text-red-300", children: ["Could not parse JSON: ", parsed.error] })] })) })] }), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+    return (_jsxs("div", { className: cn("overflow-hidden rounded-xl border border-plan-line bg-plan-code", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-wide text-plan-muted", children: label }), parsed.ok && isContainer(parsed.value) && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "data-plan-interactive": true, onClick: () => setPulse((prev) => ({
+                                    open: true,
+                                    nonce: (prev?.nonce ?? 0) + 1,
+                                })), className: "rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text", children: "Expand all" }), _jsx("span", { className: "text-plan-muted", children: "\u00B7" }), _jsx("button", { type: "button", "data-plan-interactive": true, onClick: () => setPulse((prev) => ({
+                                    open: false,
+                                    nonce: (prev?.nonce ?? 0) + 1,
+                                })), className: "rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text", children: "Collapse all" })] }))] }), _jsx("div", { className: "overflow-auto px-3 py-2.5 font-mono text-sm text-plan-code-text", children: parsed.ok ? (_jsx(JsonNode
+                // Remount the whole tree when the global pulse fires so every node
+                // re-seeds from the new open/closed state cleanly.
+                , { value: parsed.value, depth: 0, collapsedDepth: collapsedDepth, forceOpen: pulse }, pulse?.nonce ?? 0)) : (_jsxs("div", { className: "space-y-2", children: [_jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words text-plan-code-text", children: data.json || "—" }), _jsxs("p", { className: "text-xs text-red-600 dark:text-red-300", children: ["Could not parse JSON: ", parsed.error] })] })) })] }));
 }
 /* ── Edit (panel form) ─────────────────────────────────────────────────────── */
 /**
  * Panel editor for a `json-explorer` block: a monospace textarea bound to the
  * raw `json`, a "Format" button that pretty-prints via `JSON.parse` →
  * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never
- * `window.alert`), a `collapsedDepth` number input, and a `title` input. Renders
- * BARE content (no `<section>`); the registry's panel surface supplies the
- * popover chrome.
+ * `window.alert`), an auto-expand depth picker/input, and a `title` input.
+ * Renders BARE content (no `<section>`); the registry's panel surface supplies
+ * the popover chrome.
  */
 export function JsonExplorerEdit({ data, onChange, editable, }) {
     const jsonId = useId();
     const titleId = useId();
     const depthId = useId();
     const [formatError, setFormatError] = useState(null);
+    const collapsedDepth = data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;
+    const setCollapsedDepth = (value) => {
+        onChange({ ...data, collapsedDepth: clampCollapsedDepth(value) });
+    };
     const handleFormat = () => {
         try {
             const formatted = JSON.stringify(JSON.parse(data.json), null, 2);
@@ -158,14 +189,19 @@ export function JsonExplorerEdit({ data, onChange, editable, }) {
     return (_jsxs("div", { className: "grid gap-3", "data-plan-interactive": true, children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(DevLabel, { htmlFor: titleId, children: "Title" }), _jsx(DevInput, { id: titleId, value: data.title ?? "", readOnly: !editable, onChange: (event) => onChange({ ...data, title: event.target.value || undefined }), placeholder: "Optional heading" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(DevLabel, { htmlFor: jsonId, children: "JSON payload" }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, onClick: handleFormat, className: "inline-flex h-7 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: "Format" }))] }), _jsx(DevTextarea, { id: jsonId, value: data.json, readOnly: !editable, spellCheck: false, onChange: (event) => {
                             setFormatError(null);
                             onChange({ ...data, json: event.target.value });
-                        }, className: "min-h-56 font-mono text-xs", placeholder: '{\n  "id": "abc123",\n  "active": true\n}' }), formatError && (_jsx("p", { className: "text-xs text-red-600 dark:text-red-300", children: formatError })), _jsx("p", { className: "text-xs text-muted-foreground", children: "Raw JSON text is the source of truth. Use Format to pretty-print it." })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(DevLabel, { htmlFor: depthId, children: "Collapsed depth" }), _jsx(DevInput, { id: depthId, type: "number", min: 0, max: 20, value: data.collapsedDepth ?? 1, readOnly: !editable, onChange: (event) => {
+                        }, className: "min-h-56 font-mono text-xs", placeholder: '{\n  "id": "abc123",\n  "active": true\n}' }), formatError && (_jsx("p", { className: "text-xs text-red-600 dark:text-red-300", children: formatError })), _jsx("p", { className: "text-xs text-muted-foreground", children: "Raw JSON text is the source of truth. Use Format to pretty-print it." })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(DevLabel, { htmlFor: depthId, children: "Auto expand" }), _jsx("div", { className: "flex flex-wrap gap-1", children: JSON_EXPLORER_DEPTH_PRESETS.map((preset) => {
+                            const active = collapsedDepth === preset.value;
+                            return (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-pressed": active, disabled: !editable, onClick: () => setCollapsedDepth(preset.value), className: cn("inline-flex h-7 items-center justify-center rounded-md border px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", active
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : "border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground"), children: preset.label }, preset.label));
+                        }) }), _jsx(DevInput, { id: depthId, type: "number", min: 0, max: JSON_EXPLORER_MAX_COLLAPSED_DEPTH, value: collapsedDepth, readOnly: !editable, onChange: (event) => {
                             const next = Number.parseInt(event.target.value, 10);
                             onChange({
                                 ...data,
                                 collapsedDepth: Number.isFinite(next)
-                                    ? Math.max(0, Math.min(20, next))
+                                    ? clampCollapsedDepth(next)
                                     : undefined,
                             });
-                        }, className: "w-24" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Nodes deeper than this start collapsed (default 1)." })] })] }));
+                        }, className: "w-24" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Levels open automatically. Use 0 to start collapsed,", " ", JSON_EXPLORER_MAX_COLLAPSED_DEPTH, " for all."] })] })] }));
 }
 //# sourceMappingURL=JsonExplorerBlock.js.map

package/dist/client/blocks/library/JsonExplorerBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonExplorerBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type { JsonExplorerData } from \"./json-explorer.config.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `json-explorer` block — a browser-devtools /\n * Postman-style collapsible JSON tree. The raw JSON TEXT (`data.json`) is the\n * source of truth; the Read renderer parses it defensively and, on any parse\n * error, falls back to the raw text plus the error message (it never throws).\n * Lives in core so any app can register the dev-doc block (no shadcn import).\n *\n * Progressive disclosure is the whole point: object/array nodes show a chevron\n * and a one-line summary (\"{…} 3 keys\" / \"[…] 5 items\"); each node tracks its\n * own open/closed state (`useState`) seeded by `collapsedDepth` so deep payloads\n * stay scannable. Leaf values are type-colored (string = green, number = blue,\n * boolean = violet, null = muted); keys use a stable accent color; subtle indent\n * guide lines mark nesting.\n *\n * DARK/LIGHT: the plan editor toggles a `.dark` class on <html>. Every color\n * token — value types, keys, guide lines, chrome — uses Tailwind `dark:` variants\n * or the theme-aware plan CSS-var utilities, so the tree reads correctly in BOTH\n * modes (no hardcoded dark-only palette).\n */\n\n/* ── Theme-aware value-type color tokens ───────────────────────────────────── */\n\n/** String leaves: green in both modes. */\nconst STRING_CLASS = \"text-emerald-700 dark:text-emerald-300\";\n/** Number leaves: blue in both modes. */\nconst NUMBER_CLASS = \"text-blue-700 dark:text-blue-300\";\n/** Boolean leaves: violet in both modes. */\nconst BOOLEAN_CLASS = \"text-violet-700 dark:text-violet-300\";\n/** `null`/`undefined` leaves: muted (theme-aware plan var). */\nconst NULL_CLASS = \"text-plan-muted italic\";\n/** Object keys: a stable, saturated accent that reads in both modes. */\nconst KEY_CLASS = \"text-rose-700 dark:text-rose-300\";\n/** Structural punctuation (braces, brackets, commas, colons). */\nconst PUNCT_CLASS = \"text-plan-muted\";\n\ntype JsonValue =\n  | string\n  | number\n  | boolean\n  | null\n  | JsonValue[]\n  | { [key: string]: JsonValue };\ntype JsonObject = { [key: string]: JsonValue };\n\ninterface ParseResult {\n  ok: boolean;\n  value?: JsonValue;\n  error?: string;\n}\n\nfunction parseJson(raw: string): ParseResult {\n  const trimmed = raw.trim();\n  if (!trimmed) {\n    return { ok: false, error: \"Empty payload — add some JSON to explore.\" };\n  }\n  try {\n    return { ok: true, value: JSON.parse(trimmed) as JsonValue };\n  } catch (error) {\n    return {\n      ok: false,\n      error: error instanceof Error ? error.message : \"Invalid JSON\",\n    };\n  }\n}\n\nfunction isContainer(value: JsonValue): value is JsonValue[] | JsonObject {\n  return value !== null && typeof value === \"object\";\n}\n\n/** One-line summary for a collapsed container, devtools style. */\nfunction containerSummary(value: JsonValue[] | JsonObject): string {\n  if (Array.isArray(value)) {\n    const count = value.length;\n    return `[…] ${count} ${count === 1 ? \"item\" : \"items\"}`;\n  }\n  const count = Object.keys(value).length;\n  return `{…} ${count} ${count === 1 ? \"key\" : \"keys\"}`;\n}\n\n/** Render a leaf (primitive) value with its type color. */\nfunction LeafValue({ value }: { value: string | number | boolean | null }) {\n  if (value === null) {\n    return <span className={NULL_CLASS}>null</span>;\n  }\n  if (typeof value === \"string\") {\n    return <span className={STRING_CLASS}>{JSON.stringify(value)}</span>;\n  }\n  if (typeof value === \"number\") {\n    return <span className={NUMBER_CLASS}>{String(value)}</span>;\n  }\n  // boolean\n  return <span className={BOOLEAN_CLASS}>{String(value)}</span>;\n}\n\ninterface JsonNodeProps {\n  /** The object key or array index label for this node (root has none). */\n  label?: string | number;\n  value: JsonValue;\n  depth: number;\n  /** Depth beyond which nodes start collapsed. */\n  collapsedDepth: number;\n  /** Global expand/collapse pulse — overrides per-node seed when changed. */\n  forceOpen: boolean | null;\n  /** True when this node is followed by a sibling (renders a trailing comma). */\n  trailingComma?: boolean;\n}\n\n/**\n * A single tree node. Containers (object/array) get their own collapse state,\n * seeded from `collapsedDepth` and re-seeded whenever the global expand/collapse\n * \"pulse\" (`forceOpen`) flips. Leaves render inline with their type color.\n */\nfunction JsonNode({\n  label,\n  value,\n  depth,\n  collapsedDepth,\n  forceOpen,\n  trailingComma,\n}: JsonNodeProps) {\n  const seededOpen = depth < collapsedDepth;\n  // `forceOpen` is the global pulse: when the user hits expand/collapse all we\n  // flip every node, but per-node toggles still win afterward (the pulse is part\n  // of the state key via `useMemo` reseed below).\n  const [open, setOpen] = useState(seededOpen);\n  // Re-seed when the global pulse changes. Keyed by `forceOpen` identity.\n  useMemo(() => {\n    if (forceOpen !== null) setOpen(forceOpen);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [forceOpen]);\n\n  const keyEl =\n    label !== undefined ? (\n      <>\n        <span className={KEY_CLASS}>\n          {typeof label === \"number\" ? label : JSON.stringify(label)}\n        </span>\n        <span className={PUNCT_CLASS}>: </span>\n      </>\n    ) : null;\n\n  if (!isContainer(value)) {\n    return (\n      <div className=\"flex items-start py-0.5 leading-relaxed\">\n        <span className=\"select-none whitespace-pre\">{keyEl}</span>\n        <LeafValue value={value} />\n        {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(value);\n  const entries: Array<[string | number, JsonValue]> = isArray\n    ? (value as JsonValue[]).map((item, index) => [index, item])\n    : Object.entries(value as JsonObject);\n  const openBrace = isArray ? \"[\" : \"{\";\n  const closeBrace = isArray ? \"]\" : \"}\";\n  const empty = entries.length === 0;\n\n  return (\n    <div className=\"leading-relaxed\">\n      <button\n        type=\"button\"\n        data-plan-interactive\n        aria-expanded={open}\n        disabled={empty}\n        onClick={() => setOpen((value) => !value)}\n        className={cn(\n          \"group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors\",\n          !empty && \"hover:bg-accent/40\",\n          empty && \"cursor-default\",\n        )}\n      >\n        <IconChevronRight\n          className={cn(\n            \"mt-1 size-3.5 shrink-0 text-plan-muted transition-transform\",\n            open && \"rotate-90\",\n            empty && \"opacity-0\",\n          )}\n        />\n        <span className=\"min-w-0 whitespace-pre-wrap break-words\">\n          {keyEl}\n          <span className={PUNCT_CLASS}>{openBrace}</span>\n          {!open && !empty && (\n            <span className=\"ml-1 text-plan-muted\">\n              {containerSummary(value)}\n            </span>\n          )}\n          {(!open || empty) && (\n            <span className={PUNCT_CLASS}>\n              {empty ? \"\" : \"…\"}\n              {closeBrace}\n              {trailingComma ? \",\" : \"\"}\n            </span>\n          )}\n        </span>\n      </button>\n\n      {open && !empty && (\n        <>\n          {/* Indent guide: a subtle vertical rule marks the nesting level. */}\n          <div className=\"ml-[7px] border-l border-plan-line pl-3.5\">\n            {entries.map(([entryKey, entryValue], index) => (\n              <JsonNode\n                key={String(entryKey)}\n                label={entryKey}\n                value={entryValue}\n                depth={depth + 1}\n                collapsedDepth={collapsedDepth}\n                forceOpen={forceOpen}\n                trailingComma={index < entries.length - 1}\n              />\n            ))}\n          </div>\n          <div className=\"flex items-start\">\n            {/* Align the closing brace under the chevron column. */}\n            <span className=\"ml-[18px] whitespace-pre\">\n              <span className={PUNCT_CLASS}>{closeBrace}</span>\n              {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── Read (collapsible devtools tree) ──────────────────────────────────────── */\n\n/**\n * Read-only renderer for a `json-explorer` block. Parses `data.json` defensively\n * and renders the collapsible tree; on a parse error it shows the raw payload in\n * a monospace block plus the error (never throws). An \"Expand all / Collapse\n * all\" control toggles every node at once via a global pulse counter.\n */\nexport function JsonExplorerRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<JsonExplorerData>) {\n  const parsed = useMemo(() => parseJson(data.json), [data.json]);\n  const collapsedDepth = data.collapsedDepth ?? 1;\n  // `pulse` carries a boolean (expand/collapse) plus a nonce so repeated clicks\n  // of the same action still re-fire the reseed in each node.\n  const [pulse, setPulse] = useState<{ open: boolean; nonce: number } | null>(\n    null,\n  );\n  const heading = data.title ?? title;\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {heading && <div className=\"plan-block-label\">{heading}</div>}\n      <div className=\"overflow-hidden rounded-xl border border-plan-line bg-plan-code\">\n        <div className=\"flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5\">\n          <span className=\"font-mono text-xs uppercase tracking-wide text-plan-muted\">\n            JSON\n          </span>\n          {parsed.ok && isContainer(parsed.value as JsonValue) && (\n            <div className=\"flex items-center gap-1\">\n              <button\n                type=\"button\"\n                data-plan-interactive\n                onClick={() =>\n                  setPulse((prev) => ({\n                    open: true,\n                    nonce: (prev?.nonce ?? 0) + 1,\n                  }))\n                }\n                className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n              >\n                Expand all\n              </button>\n              <span className=\"text-plan-muted\">·</span>\n              <button\n                type=\"button\"\n                data-plan-interactive\n                onClick={() =>\n                  setPulse((prev) => ({\n                    open: false,\n                    nonce: (prev?.nonce ?? 0) + 1,\n                  }))\n                }\n                className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n              >\n                Collapse all\n              </button>\n            </div>\n          )}\n        </div>\n        <div className=\"overflow-auto px-3 py-2.5 font-mono text-sm text-plan-code-text\">\n          {parsed.ok ? (\n            <JsonNode\n              // Remount the whole tree when the global pulse fires so every node\n              // re-seeds from the new open/closed state cleanly.\n              key={pulse?.nonce ?? 0}\n              value={parsed.value as JsonValue}\n              depth={0}\n              collapsedDepth={collapsedDepth}\n              forceOpen={pulse?.open ?? null}\n            />\n          ) : (\n            <div className=\"space-y-2\">\n              <pre className=\"overflow-auto whitespace-pre-wrap break-words text-plan-code-text\">\n                {data.json || \"—\"}\n              </pre>\n              <p className=\"text-xs text-red-600 dark:text-red-300\">\n                Could not parse JSON: {parsed.error}\n              </p>\n            </div>\n          )}\n        </div>\n      </div>\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel form) ─────────────────────────────────────────────────────── */\n\n/**\n * Panel editor for a `json-explorer` block: a monospace textarea bound to the\n * raw `json`, a \"Format\" button that pretty-prints via `JSON.parse` →\n * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never\n * `window.alert`), a `collapsedDepth` number input, and a `title` input. Renders\n * BARE content (no `<section>`); the registry's panel surface supplies the\n * popover chrome.\n */\nexport function JsonExplorerEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<JsonExplorerData>) {\n  const jsonId = useId();\n  const titleId = useId();\n  const depthId = useId();\n  const [formatError, setFormatError] = useState<string | null>(null);\n\n  const handleFormat = () => {\n    try {\n      const formatted = JSON.stringify(JSON.parse(data.json), null, 2);\n      setFormatError(null);\n      onChange({ ...data, json: formatted });\n    } catch (error) {\n      setFormatError(\n        error instanceof Error ? error.message : \"Invalid JSON — cannot format\",\n      );\n    }\n  };\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={titleId}>Title</DevLabel>\n        <DevInput\n          id={titleId}\n          value={data.title ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({ ...data, title: event.target.value || undefined })\n          }\n          placeholder=\"Optional heading\"\n        />\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel htmlFor={jsonId}>JSON payload</DevLabel>\n          {editable && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={handleFormat}\n              className=\"inline-flex h-7 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            >\n              Format\n            </button>\n          )}\n        </div>\n        <DevTextarea\n          id={jsonId}\n          value={data.json}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) => {\n            setFormatError(null);\n            onChange({ ...data, json: event.target.value });\n          }}\n          className=\"min-h-56 font-mono text-xs\"\n          placeholder={'{\\n  \"id\": \"abc123\",\\n  \"active\": true\\n}'}\n        />\n        {formatError && (\n          <p className=\"text-xs text-red-600 dark:text-red-300\">\n            {formatError}\n          </p>\n        )}\n        <p className=\"text-xs text-muted-foreground\">\n          Raw JSON text is the source of truth. Use Format to pretty-print it.\n        </p>\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={depthId}>Collapsed depth</DevLabel>\n        <DevInput\n          id={depthId}\n          type=\"number\"\n          min={0}\n          max={20}\n          value={data.collapsedDepth ?? 1}\n          readOnly={!editable}\n          onChange={(event) => {\n            const next = Number.parseInt(event.target.value, 10);\n            onChange({\n              ...data,\n              collapsedDepth: Number.isFinite(next)\n                ? Math.max(0, Math.min(20, next))\n                : undefined,\n            });\n          }}\n          className=\"w-24\"\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Nodes deeper than this start collapsed (default 1).\n        </p>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"JsonExplorerBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,OAAO,EACP,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EACL,qCAAqC,EACrC,iCAAiC,GAElC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AAEH,kFAAkF;AAElF,0CAA0C;AAC1C,MAAM,YAAY,GAAG,wCAAwC,CAAC;AAC9D,yCAAyC;AACzC,MAAM,YAAY,GAAG,kCAAkC,CAAC;AACxD,4CAA4C;AAC5C,MAAM,aAAa,GAAG,sCAAsC,CAAC;AAC7D,+DAA+D;AAC/D,MAAM,UAAU,GAAG,wBAAwB,CAAC;AAC5C,wEAAwE;AACxE,MAAM,SAAS,GAAG,kCAAkC,CAAC;AACrD,iEAAiE;AACjE,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAEtC,MAAM,2BAA2B,GAAG;IAClC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IAC1B,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,qCAAqC,EAAE;IACnE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE;IAC/B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,iCAAiC,EAAE;CAClD,CAAC;AAEX,SAAS,mBAAmB,CAAC,KAAa;IACxC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC,CAAC;AACzE,CAAC;AAsBD,SAAS,SAAS,CAAC,GAAW;IAC5B,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC;IAC3B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,2CAA2C,EAAE,CAAC;IAC3E,CAAC;IACD,IAAI,CAAC;QACH,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAc,EAAE,CAAC;IAC/D,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO;YACL,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc;SAC/D,CAAC;IACJ,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,KAAgB;IACnC,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AACrD,CAAC;AAED,kEAAkE;AAClE,SAAS,gBAAgB,CAAC,KAA+B;IACvD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC3B,OAAO,OAAO,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IAC1D,CAAC;IACD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,OAAO,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AACxD,CAAC;AAED,2DAA2D;AAC3D,SAAS,SAAS,CAAC,EAAE,KAAK,EAA+C;IACvE,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,OAAO,eAAM,SAAS,EAAE,UAAU,qBAAa,CAAC;IAClD,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,eAAM,SAAS,EAAE,YAAY,YAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAQ,CAAC;IACvE,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,eAAM,SAAS,EAAE,YAAY,YAAG,MAAM,CAAC,KAAK,CAAC,GAAQ,CAAC;IAC/D,CAAC;IACD,UAAU;IACV,OAAO,eAAM,SAAS,EAAE,aAAa,YAAG,MAAM,CAAC,KAAK,CAAC,GAAQ,CAAC;AAChE,CAAC;AAeD;;;;GAIG;AACH,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,cAAc,EACd,SAAS,EACT,aAAa,GACC;IACd,MAAM,UAAU,GAAG,SAAS,EAAE,IAAI,IAAI,KAAK,GAAG,cAAc,CAAC;IAC7D,6EAA6E;IAC7E,6DAA6D;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAGvC,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACpC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAuB,IAAI,CAAC,CAAC;IAE7E,IAAI,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;IAC1B,IAAI,SAAS,KAAK,SAAS,CAAC,SAAS,EAAE,CAAC;QACtC,IAAI,GAAG,SAAS,EAAE,IAAI,IAAI,SAAS,CAAC,IAAI,CAAC;QACzC,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,YAAY,GAAG,CAAC,KAAyC,EAAE,EAAE;QACjE,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC;QACvB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;QACtD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBACzB,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;aAC9B,CAAC,CAAC,CAAC;QACN,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GACT,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,8BACE,eAAM,SAAS,EAAE,SAAS,YACvB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GACrD,EACP,eAAM,SAAS,EAAE,WAAW,mBAAW,IACtC,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,eAAK,SAAS,EAAC,yCAAyC,aACtD,eAAM,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAQ,EAC3D,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,EAC1B,aAAa,IAAI,eAAM,SAAS,EAAE,WAAW,kBAAU,IACpD,CACP,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,OAAO,GAAwC,OAAO;QAC1D,CAAC,CAAE,KAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC5D,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAmB,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACtC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACvC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;IACnC,MAAM,cAAc,GAAG,YAAY,IAAI,SAAS,CAAC;IACjD,MAAM,eAAe,GAAG,cAAc,EAAE,KAAK,IAAI,CAAC,CAAC;IAEnD,OAAO,CACL,eAAK,SAAS,EAAC,iBAAiB,aAC9B,kBACE,IAAI,EAAC,QAAQ,kDAEE,IAAI,EACnB,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,CAAC,KAAK,IAAI,oBAAoB,EAC9B,KAAK,IAAI,gBAAgB,CAC1B,aAED,KAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CACX,6DAA6D,EAC7D,IAAI,IAAI,WAAW,EACnB,KAAK,IAAI,WAAW,CACrB,GACD,EACF,gBAAM,SAAS,EAAC,yCAAyC,aACtD,KAAK,EACN,eAAM,SAAS,EAAE,WAAW,YAAG,SAAS,GAAQ,EAC/C,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAClB,eAAM,SAAS,EAAC,sBAAsB,YACnC,gBAAgB,CAAC,KAAK,CAAC,GACnB,CACR,EACA,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CACnB,gBAAM,SAAS,EAAE,WAAW,aACzB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAChB,UAAU,EACV,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IACpB,CACR,IACI,IACA,EAER,IAAI,IAAI,CAAC,KAAK,IAAI,CACjB,8BAEE,cAAK,SAAS,EAAC,2CAA2C,YACvD,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,KAAC,QAAQ,IAEP,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,GAAG,CAAC,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,cAAc,EACzB,aAAa,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IANpC,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,eAAe,EAAE,CAO7C,CACH,CAAC,GACE,EACN,cAAK,SAAS,EAAC,kBAAkB,YAE/B,gBAAM,SAAS,EAAC,0BAA0B,aACxC,eAAM,SAAS,EAAE,WAAW,YAAG,UAAU,GAAQ,EAChD,aAAa,IAAI,eAAM,SAAS,EAAE,WAAW,kBAAU,IACnD,GACH,IACL,CACJ,IACG,CACP,CAAC;AACJ,CAAC;AAED,kFAAkF;AAElF;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GAC0B;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;IAEpC,OAAO,CACL,mBAAS,SAAS,EAAC,YAAY,mBAAgB,OAAO,aACnD,OAAO,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,OAAO,GAAO,EAC7D,KAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,GAAI,EAClC,OAAO,IAAI,YAAG,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAK,IACrD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,KAAK,GAAG,MAAM,GAKf;IACC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,cAAc,GAClB,IAAI,CAAC,cAAc,IAAI,qCAAqC,CAAC;IAC/D,8EAA8E;IAC9E,4DAA4D;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,IAAI,CACL,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,SAAS,CACV,aAED,eAAK,SAAS,EAAC,+EAA+E,aAC5F,eAAM,SAAS,EAAC,2DAA2D,YACxE,KAAK,GACD,EACN,MAAM,CAAC,EAAE,IAAI,WAAW,CAAC,MAAM,CAAC,KAAkB,CAAC,IAAI,CACtD,eAAK,SAAS,EAAC,yBAAyB,aACtC,iBACE,IAAI,EAAC,QAAQ,iCAEb,OAAO,EAAE,GAAG,EAAE,CACZ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oCAClB,IAAI,EAAE,IAAI;oCACV,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;iCAC9B,CAAC,CAAC,EAEL,SAAS,EAAC,yGAAyG,2BAG5G,EACT,eAAM,SAAS,EAAC,iBAAiB,uBAAS,EAC1C,iBACE,IAAI,EAAC,QAAQ,iCAEb,OAAO,EAAE,GAAG,EAAE,CACZ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oCAClB,IAAI,EAAE,KAAK;oCACX,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;iCAC9B,CAAC,CAAC,EAEL,SAAS,EAAC,yGAAyG,6BAG5G,IACL,CACP,IACG,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC7E,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ;gBACP,mEAAmE;gBACnE,mDAAmD;oBAEnD,KAAK,EAAE,MAAM,CAAC,KAAkB,EAChC,KAAK,EAAE,CAAC,EACR,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,KAAK,IAJX,KAAK,EAAE,KAAK,IAAI,CAAC,CAKtB,CACH,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,mEAAmE,YAC/E,IAAI,CAAC,IAAI,IAAI,GAAG,GACb,EACN,aAAG,SAAS,EAAC,wCAAwC,uCAC5B,MAAM,CAAC,KAAK,IACjC,IACA,CACP,GACG,IACF,CACP,CAAC;AACJ,CAAC;AAED,kFAAkF;AAElF;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACyB;IACjC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACpE,MAAM,cAAc,GAClB,IAAI,CAAC,cAAc,IAAI,qCAAqC,CAAC;IAE/D,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC;YACH,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACjE,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QACzC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,cAAc,CACZ,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,8BAA8B,CACxE,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,4CACzB,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,sBAAkB,EAC5C,KAAC,QAAQ,IACP,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EACvB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC,EAE/D,WAAW,EAAC,kBAAkB,GAC9B,IACE,EAEN,eAAK,SAAS,EAAC,cAAc,aAC3B,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,6BAAyB,EACjD,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,iCAEb,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,qYAAqY,uBAGxY,CACV,IACG,EACN,KAAC,WAAW,IACV,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAE,CAAC,QAAQ,EACnB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,cAAc,CAAC,IAAI,CAAC,CAAC;4BACrB,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;wBAClD,CAAC,EACD,SAAS,EAAC,4BAA4B,EACtC,WAAW,EAAE,2CAA2C,GACxD,EACD,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,wCAAwC,YAClD,WAAW,GACV,CACL,EACD,YAAG,SAAS,EAAC,+BAA+B,qFAExC,IACA,EAEN,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,4BAAwB,EAClD,cAAK,SAAS,EAAC,sBAAsB,YAClC,2BAA2B,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4BAC1C,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC,KAAK,CAAC;4BAC/C,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,iDAEC,MAAM,EACpB,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,SAAS,EAAE,EAAE,CACX,+PAA+P,EAC/P,MAAM;oCACJ,CAAC,CAAC,mDAAmD;oCACrD,CAAC,CAAC,+FAA+F,CACpG,YAEA,MAAM,CAAC,KAAK,IAbR,MAAM,CAAC,KAAK,CAcV,CACV,CAAC;wBACJ,CAAC,CAAC,GACE,EACN,KAAC,QAAQ,IACP,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;4BACrD,QAAQ,CAAC;gCACP,GAAG,IAAI;gCACP,cAAc,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;oCACnC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC;oCAC3B,CAAC,CAAC,SAAS;6BACd,CAAC,CAAC;wBACL,CAAC,EACD,SAAS,EAAC,MAAM,GAChB,EACF,aAAG,SAAS,EAAC,+BAA+B,qEACW,GAAG,EACvD,iCAAiC,iBAChC,IACA,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {\n  useId,\n  useMemo,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport {\n  JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH,\n  JSON_EXPLORER_MAX_COLLAPSED_DEPTH,\n  type JsonExplorerData,\n} from \"./json-explorer.config.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `json-explorer` block — a browser-devtools /\n * Postman-style collapsible JSON tree. The raw JSON TEXT (`data.json`) is the\n * source of truth; the Read renderer parses it defensively and, on any parse\n * error, falls back to the raw text plus the error message (it never throws).\n * Lives in core so any app can register the dev-doc block (no shadcn import).\n *\n * Progressive disclosure is the whole point: object/array nodes show a chevron\n * and a one-line summary (\"{…} 3 keys\" / \"[…] 5 items\"); each node tracks its\n * own open/closed state (`useState`) seeded by `collapsedDepth` so deep payloads\n * stay scannable. Leaf values are type-colored (string = green, number = blue,\n * boolean = violet, null = muted); keys use a stable accent color; subtle indent\n * guide lines mark nesting.\n *\n * DARK/LIGHT: the plan editor toggles a `.dark` class on <html>. Every color\n * token — value types, keys, guide lines, chrome — uses Tailwind `dark:` variants\n * or the theme-aware plan CSS-var utilities, so the tree reads correctly in BOTH\n * modes (no hardcoded dark-only palette).\n */\n\n/* ── Theme-aware value-type color tokens ───────────────────────────────────── */\n\n/** String leaves: green in both modes. */\nconst STRING_CLASS = \"text-emerald-700 dark:text-emerald-300\";\n/** Number leaves: blue in both modes. */\nconst NUMBER_CLASS = \"text-blue-700 dark:text-blue-300\";\n/** Boolean leaves: violet in both modes. */\nconst BOOLEAN_CLASS = \"text-violet-700 dark:text-violet-300\";\n/** `null`/`undefined` leaves: muted (theme-aware plan var). */\nconst NULL_CLASS = \"text-plan-muted italic\";\n/** Object keys: a stable, saturated accent that reads in both modes. */\nconst KEY_CLASS = \"text-rose-700 dark:text-rose-300\";\n/** Structural punctuation (braces, brackets, commas, colons). */\nconst PUNCT_CLASS = \"text-plan-muted\";\n\nconst JSON_EXPLORER_DEPTH_PRESETS = [\n  { label: \"Off\", value: 0 },\n  { label: \"2 levels\", value: JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH },\n  { label: \"3 levels\", value: 3 },\n  { label: \"All\", value: JSON_EXPLORER_MAX_COLLAPSED_DEPTH },\n] as const;\n\nfunction clampCollapsedDepth(value: number): number {\n  return Math.max(0, Math.min(JSON_EXPLORER_MAX_COLLAPSED_DEPTH, value));\n}\n\ntype JsonValue =\n  | string\n  | number\n  | boolean\n  | null\n  | JsonValue[]\n  | { [key: string]: JsonValue };\ntype JsonObject = { [key: string]: JsonValue };\n\ninterface ParseResult {\n  ok: boolean;\n  value?: JsonValue;\n  error?: string;\n}\n\ninterface JsonTreePulse {\n  open: boolean;\n  nonce: number;\n}\n\nfunction parseJson(raw: string): ParseResult {\n  const trimmed = raw.trim();\n  if (!trimmed) {\n    return { ok: false, error: \"Empty payload — add some JSON to explore.\" };\n  }\n  try {\n    return { ok: true, value: JSON.parse(trimmed) as JsonValue };\n  } catch (error) {\n    return {\n      ok: false,\n      error: error instanceof Error ? error.message : \"Invalid JSON\",\n    };\n  }\n}\n\nfunction isContainer(value: JsonValue): value is JsonValue[] | JsonObject {\n  return value !== null && typeof value === \"object\";\n}\n\n/** One-line summary for a collapsed container, devtools style. */\nfunction containerSummary(value: JsonValue[] | JsonObject): string {\n  if (Array.isArray(value)) {\n    const count = value.length;\n    return `[…] ${count} ${count === 1 ? \"item\" : \"items\"}`;\n  }\n  const count = Object.keys(value).length;\n  return `{…} ${count} ${count === 1 ? \"key\" : \"keys\"}`;\n}\n\n/** Render a leaf (primitive) value with its type color. */\nfunction LeafValue({ value }: { value: string | number | boolean | null }) {\n  if (value === null) {\n    return <span className={NULL_CLASS}>null</span>;\n  }\n  if (typeof value === \"string\") {\n    return <span className={STRING_CLASS}>{JSON.stringify(value)}</span>;\n  }\n  if (typeof value === \"number\") {\n    return <span className={NUMBER_CLASS}>{String(value)}</span>;\n  }\n  // boolean\n  return <span className={BOOLEAN_CLASS}>{String(value)}</span>;\n}\n\ninterface JsonNodeProps {\n  /** The object key or array index label for this node (root has none). */\n  label?: string | number;\n  value: JsonValue;\n  depth: number;\n  /** Depth beyond which nodes start collapsed. */\n  collapsedDepth: number;\n  /** Global or parent expand/collapse pulse — overrides per-node seed when changed. */\n  forceOpen: JsonTreePulse | null;\n  /** True when this node is followed by a sibling (renders a trailing comma). */\n  trailingComma?: boolean;\n}\n\n/**\n * A single tree node. Containers (object/array) get their own collapse state,\n * seeded from `collapsedDepth` and re-seeded whenever the global expand/collapse\n * \"pulse\" (`forceOpen`) flips. Leaves render inline with their type color.\n */\nfunction JsonNode({\n  label,\n  value,\n  depth,\n  collapsedDepth,\n  forceOpen,\n  trailingComma,\n}: JsonNodeProps) {\n  const seededOpen = forceOpen?.open ?? depth < collapsedDepth;\n  // `forceOpen` is the global pulse: when the user hits expand/collapse all we\n  // flip every node, but per-node toggles still win afterward.\n  const [openState, setOpenState] = useState<{\n    forceOpen: JsonTreePulse | null;\n    open: boolean;\n  }>({ forceOpen, open: seededOpen });\n  const [subtreePulse, setSubtreePulse] = useState<JsonTreePulse | null>(null);\n\n  let open = openState.open;\n  if (forceOpen !== openState.forceOpen) {\n    open = forceOpen?.open ?? openState.open;\n    setOpenState({ forceOpen, open });\n  }\n\n  const handleToggle = (event: ReactMouseEvent<HTMLButtonElement>) => {\n    const nextOpen = !open;\n    setOpenState((prev) => ({ ...prev, open: nextOpen }));\n    if (event.altKey) {\n      setSubtreePulse((prev) => ({\n        open: nextOpen,\n        nonce: (prev?.nonce ?? 0) + 1,\n      }));\n    } else {\n      setSubtreePulse(null);\n    }\n  };\n\n  const keyEl =\n    label !== undefined ? (\n      <>\n        <span className={KEY_CLASS}>\n          {typeof label === \"number\" ? label : JSON.stringify(label)}\n        </span>\n        <span className={PUNCT_CLASS}>: </span>\n      </>\n    ) : null;\n\n  if (!isContainer(value)) {\n    return (\n      <div className=\"flex items-start py-0.5 leading-relaxed\">\n        <span className=\"select-none whitespace-pre\">{keyEl}</span>\n        <LeafValue value={value} />\n        {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(value);\n  const entries: Array<[string | number, JsonValue]> = isArray\n    ? (value as JsonValue[]).map((item, index) => [index, item])\n    : Object.entries(value as JsonObject);\n  const openBrace = isArray ? \"[\" : \"{\";\n  const closeBrace = isArray ? \"]\" : \"}\";\n  const empty = entries.length === 0;\n  const childForceOpen = subtreePulse ?? forceOpen;\n  const childPulseNonce = childForceOpen?.nonce ?? 0;\n\n  return (\n    <div className=\"leading-relaxed\">\n      <button\n        type=\"button\"\n        data-plan-interactive\n        aria-expanded={open}\n        disabled={empty}\n        onClick={handleToggle}\n        className={cn(\n          \"group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors\",\n          !empty && \"hover:bg-accent/40\",\n          empty && \"cursor-default\",\n        )}\n      >\n        <IconChevronRight\n          className={cn(\n            \"mt-1 size-3.5 shrink-0 text-plan-muted transition-transform\",\n            open && \"rotate-90\",\n            empty && \"opacity-0\",\n          )}\n        />\n        <span className=\"min-w-0 whitespace-pre-wrap break-words\">\n          {keyEl}\n          <span className={PUNCT_CLASS}>{openBrace}</span>\n          {!open && !empty && (\n            <span className=\"ml-1 text-plan-muted\">\n              {containerSummary(value)}\n            </span>\n          )}\n          {(!open || empty) && (\n            <span className={PUNCT_CLASS}>\n              {empty ? \"\" : \"…\"}\n              {closeBrace}\n              {trailingComma ? \",\" : \"\"}\n            </span>\n          )}\n        </span>\n      </button>\n\n      {open && !empty && (\n        <>\n          {/* Indent guide: a subtle vertical rule marks the nesting level. */}\n          <div className=\"ml-[7px] border-l border-plan-line pl-3.5\">\n            {entries.map(([entryKey, entryValue], index) => (\n              <JsonNode\n                key={`${String(entryKey)}:${childPulseNonce}`}\n                label={entryKey}\n                value={entryValue}\n                depth={depth + 1}\n                collapsedDepth={collapsedDepth}\n                forceOpen={childForceOpen}\n                trailingComma={index < entries.length - 1}\n              />\n            ))}\n          </div>\n          <div className=\"flex items-start\">\n            {/* Align the closing brace under the chevron column. */}\n            <span className=\"ml-[18px] whitespace-pre\">\n              <span className={PUNCT_CLASS}>{closeBrace}</span>\n              {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── Read (collapsible devtools tree) ──────────────────────────────────────── */\n\n/**\n * Read-only renderer for a `json-explorer` block. Parses `data.json` defensively\n * and renders the collapsible tree; on a parse error it shows the raw payload in\n * a monospace block plus the error (never throws). An \"Expand all / Collapse\n * all\" control toggles every node at once via a global pulse counter.\n */\nexport function JsonExplorerRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<JsonExplorerData>) {\n  const heading = data.title ?? title;\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {heading && <div className=\"plan-block-label\">{heading}</div>}\n      <JsonExplorerSurface data={data} />\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\nexport function JsonExplorerSurface({\n  data,\n  className,\n  label = \"JSON\",\n}: {\n  data: Pick<JsonExplorerData, \"json\" | \"collapsedDepth\">;\n  className?: string;\n  label?: string;\n}) {\n  const parsed = useMemo(() => parseJson(data.json), [data.json]);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n  // `pulse` carries a boolean (expand/collapse) plus a nonce so repeated clicks\n  // of the same action still re-fire the reseed in each node.\n  const [pulse, setPulse] = useState<{ open: boolean; nonce: number } | null>(\n    null,\n  );\n\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-xl border border-plan-line bg-plan-code\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5\">\n        <span className=\"font-mono text-xs uppercase tracking-wide text-plan-muted\">\n          {label}\n        </span>\n        {parsed.ok && isContainer(parsed.value as JsonValue) && (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: true,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Expand all\n            </button>\n            <span className=\"text-plan-muted\">·</span>\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: false,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Collapse all\n            </button>\n          </div>\n        )}\n      </div>\n      <div className=\"overflow-auto px-3 py-2.5 font-mono text-sm text-plan-code-text\">\n        {parsed.ok ? (\n          <JsonNode\n            // Remount the whole tree when the global pulse fires so every node\n            // re-seeds from the new open/closed state cleanly.\n            key={pulse?.nonce ?? 0}\n            value={parsed.value as JsonValue}\n            depth={0}\n            collapsedDepth={collapsedDepth}\n            forceOpen={pulse}\n          />\n        ) : (\n          <div className=\"space-y-2\">\n            <pre className=\"overflow-auto whitespace-pre-wrap break-words text-plan-code-text\">\n              {data.json || \"—\"}\n            </pre>\n            <p className=\"text-xs text-red-600 dark:text-red-300\">\n              Could not parse JSON: {parsed.error}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ── Edit (panel form) ─────────────────────────────────────────────────────── */\n\n/**\n * Panel editor for a `json-explorer` block: a monospace textarea bound to the\n * raw `json`, a \"Format\" button that pretty-prints via `JSON.parse` →\n * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never\n * `window.alert`), an auto-expand depth picker/input, and a `title` input.\n * Renders BARE content (no `<section>`); the registry's panel surface supplies\n * the popover chrome.\n */\nexport function JsonExplorerEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<JsonExplorerData>) {\n  const jsonId = useId();\n  const titleId = useId();\n  const depthId = useId();\n  const [formatError, setFormatError] = useState<string | null>(null);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n\n  const setCollapsedDepth = (value: number) => {\n    onChange({ ...data, collapsedDepth: clampCollapsedDepth(value) });\n  };\n\n  const handleFormat = () => {\n    try {\n      const formatted = JSON.stringify(JSON.parse(data.json), null, 2);\n      setFormatError(null);\n      onChange({ ...data, json: formatted });\n    } catch (error) {\n      setFormatError(\n        error instanceof Error ? error.message : \"Invalid JSON — cannot format\",\n      );\n    }\n  };\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={titleId}>Title</DevLabel>\n        <DevInput\n          id={titleId}\n          value={data.title ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({ ...data, title: event.target.value || undefined })\n          }\n          placeholder=\"Optional heading\"\n        />\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel htmlFor={jsonId}>JSON payload</DevLabel>\n          {editable && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={handleFormat}\n              className=\"inline-flex h-7 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            >\n              Format\n            </button>\n          )}\n        </div>\n        <DevTextarea\n          id={jsonId}\n          value={data.json}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) => {\n            setFormatError(null);\n            onChange({ ...data, json: event.target.value });\n          }}\n          className=\"min-h-56 font-mono text-xs\"\n          placeholder={'{\\n  \"id\": \"abc123\",\\n  \"active\": true\\n}'}\n        />\n        {formatError && (\n          <p className=\"text-xs text-red-600 dark:text-red-300\">\n            {formatError}\n          </p>\n        )}\n        <p className=\"text-xs text-muted-foreground\">\n          Raw JSON text is the source of truth. Use Format to pretty-print it.\n        </p>\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={depthId}>Auto expand</DevLabel>\n        <div className=\"flex flex-wrap gap-1\">\n          {JSON_EXPLORER_DEPTH_PRESETS.map((preset) => {\n            const active = collapsedDepth === preset.value;\n            return (\n              <button\n                key={preset.label}\n                type=\"button\"\n                data-plan-interactive\n                aria-pressed={active}\n                disabled={!editable}\n                onClick={() => setCollapsedDepth(preset.value)}\n                className={cn(\n                  \"inline-flex h-7 items-center justify-center rounded-md border px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n                  active\n                    ? \"border-primary bg-primary text-primary-foreground\"\n                    : \"border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground\",\n                )}\n              >\n                {preset.label}\n              </button>\n            );\n          })}\n        </div>\n        <DevInput\n          id={depthId}\n          type=\"number\"\n          min={0}\n          max={JSON_EXPLORER_MAX_COLLAPSED_DEPTH}\n          value={collapsedDepth}\n          readOnly={!editable}\n          onChange={(event) => {\n            const next = Number.parseInt(event.target.value, 10);\n            onChange({\n              ...data,\n              collapsedDepth: Number.isFinite(next)\n                ? clampCollapsedDepth(next)\n                : undefined,\n            });\n          }}\n          className=\"w-24\"\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Levels open automatically. Use 0 to start collapsed,{\" \"}\n          {JSON_EXPLORER_MAX_COLLAPSED_DEPTH} for all.\n        </p>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/MermaidBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAyJvD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,WAAW,CAAC,2CAW7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwC7B"}
+{"version":3,"file":"MermaidBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA4OvD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,WAAW,CAAC,2CAW7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwC7B"}

package/dist/client/blocks/library/MermaidBlock.js

@@ -1,30 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useState } from "react";
 import { DevInput, DevLabel } from "./dev-doc-ui.js";
-/**
- * Read + Edit renderers for a `mermaid` block — a Mermaid diagram definition
- * (flowchart, sequence, etc.) edited as raw text and rendered with Mermaid's
- * `handDrawn` look so it matches the plan's hand-drawn / sketchy house style.
- * Lives in core so any app can register the dev-doc block; it stays app-agnostic
- * (no shadcn / next-themes import).
- *
- * `mermaid` is a browser-only runtime (it touches `document`/DOM measurement),
- * so the Read renderer SSR-guards: it renders a lightweight placeholder until a
- * `useEffect` confirms it is mounted, then dynamically imports `mermaid` and
- * injects the rendered SVG. Parse errors never throw — they fall back to the raw
- * source in a styled monospace block plus the error message. (The dynamic import
- * uses a runtime specifier so this module never forces `mermaid` into the core
- * package's own dependency graph — the host app provides it.)
- *
- * Dark mode: the plan editor toggles a `.dark` class on <html>. The Read renderer
- * reads `document.documentElement.classList.contains("dark")` (re-checking on a
- * `MutationObserver` of the html class) and re-renders the diagram with Mermaid's
- * `dark` theme (vs `neutral` in light) — the resolved theme is in the render
- * effect's deps so toggling dark/light updates the SVG live.
- */
-/** Module specifier kept in a variable so the bundler/tsc treats it as a runtime
- * import (core does not depend on `mermaid`; the host app provides it). */
-const MERMAID_MODULE = "mermaid";
+function errorMessage(error) {
+    return error instanceof Error ? error.message : "Failed to render diagram";
+}
+function sanitizeSvgMarkup(svg) {
+    if (typeof DOMParser === "undefined")
+        return svg;
+    const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+    doc
+        .querySelectorAll("script, foreignObject")
+        .forEach((node) => node.remove());
+    for (const element of Array.from(doc.querySelectorAll("*"))) {
+        for (const attr of Array.from(element.attributes)) {
+            const name = attr.name.toLowerCase();
+            const value = attr.value.trim().toLowerCase();
+            if (name.startsWith("on") ||
+                ((name === "href" || name.endsWith(":href")) &&
+                    value.startsWith("javascript:"))) {
+                element.removeAttribute(attr.name);
+            }
+        }
+    }
+    return doc.documentElement.outerHTML;
+}
+async function renderExcalidrawSvg(source, isDark) {
+    const [{ parseMermaidToExcalidraw }, excalidraw] = await Promise.all([
+        import("@excalidraw/mermaid-to-excalidraw"),
+        import("@excalidraw/excalidraw"),
+    ]);
+    const { elements, files } = await parseMermaidToExcalidraw(source);
+    const excalidrawElements = excalidraw.convertToExcalidrawElements(elements);
+    const svg = await excalidraw.exportToSvg({
+        elements: excalidrawElements,
+        appState: {
+            theme: isDark ? "dark" : "light",
+            viewBackgroundColor: "transparent",
+            exportWithDarkMode: isDark,
+        },
+        files: files ?? {},
+    });
+    return sanitizeSvgMarkup(svg.outerHTML);
+}
+async function renderMermaidSvg(source, id, isDark) {
+    const mermaid = (await import("mermaid")).default;
+    mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        look: "handDrawn",
+        theme: isDark ? "dark" : "neutral",
+    });
+    const { svg } = await mermaid.render(id, source);
+    return sanitizeSvgMarkup(svg);
+}
 /** Read the live dark-mode flag from the document root (next-themes-free). */
 function useIsDark() {
     const [isDark, setIsDark] = useState(false);
@@ -62,27 +90,28 @@ function MermaidDiagram({ source, idSeed, }) {
         }
         (async () => {
             try {
-                const mermaid = (await import(MERMAID_MODULE))
-                    .default;
-                mermaid.initialize({
-                    startOnLoad: false,
-                    securityLevel: "strict",
-                    look: "handDrawn",
-                    theme: isDark ? "dark" : "neutral",
-                });
-                // Unique id per render pass so re-renders (theme/source change) never
-                // collide with a stale, still-mounted SVG node id.
-                const { svg } = await mermaid.render(`${renderId}-${isDark ? "d" : "l"}`, trimmed);
+                const svg = await renderExcalidrawSvg(trimmed, isDark);
                 if (!cancelled)
                     setState({ svg });
             }
-            catch (error) {
-                if (!cancelled) {
-                    setState({
-                        error: error instanceof Error
-                            ? error.message
-                            : "Failed to render diagram",
-                    });
+            catch (excalidrawError) {
+                try {
+                    // Fallback keeps diagrams usable if a Mermaid feature is not supported
+                    // by the Excalidraw converter in a given host app.
+                    const svg = await renderMermaidSvg(trimmed, `${renderId}-${isDark ? "d" : "l"}`, isDark);
+                    if (!cancelled)
+                        setState({ svg });
+                }
+                catch (mermaidError) {
+                    const excalidrawMessage = errorMessage(excalidrawError);
+                    const mermaidMessage = errorMessage(mermaidError);
+                    if (!cancelled) {
+                        setState({
+                            error: excalidrawMessage === mermaidMessage
+                                ? mermaidMessage
+                                : `Excalidraw: ${excalidrawMessage}; Mermaid fallback: ${mermaidMessage}`,
+                        });
+                    }
                 }
             }
         })();
@@ -101,8 +130,8 @@ function MermaidDiagram({ source, idSeed, }) {
     if (!state.svg) {
         return (_jsx("div", { className: "mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted", children: "Add a diagram definition to render it." }));
     }
-    return (_jsx("div", { className: "mt-2 flex justify-center overflow-auto [&_svg]:max-w-full [&_svg]:h-auto", 
-        // Mermaid output is already sanitized under `securityLevel: "strict"`.
+    return (_jsx("div", { className: "mt-2 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full", 
+        // Excalidraw and Mermaid output are sanitized before injection.
         dangerouslySetInnerHTML: { __html: state.svg } }));
 }
 /**