executable-stories-react 0.8.0 → 0.9.0

package/dist/index.js

@@ -1600,7 +1600,7 @@ function Report(props) {
 
 // src/components/doc/MermaidView.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -1610,21 +1610,38 @@ function prefersDark(el) {
 function MermaidView({ entry, load }) {
   const ref = useRef(null);
   const [svg, setSvg] = useState2(null);
+  const [error, setError] = useState2(null);
   useEffect(() => {
     let cancelled = false;
     const draw = async () => {
+      let mermaid;
+      try {
+        mermaid = await load();
+      } catch {
+        if (!cancelled) {
+          setSvg(null);
+          setError(null);
+        }
+        return;
+      }
       try {
-        const mermaid = await load();
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "strict",
           theme: prefersDark(ref.current) ? "dark" : "default"
         });
+        await mermaid.parse(entry.code);
         const id = `es-mermaid-${Math.random().toString(36).slice(2)}`;
         const { svg: rendered } = await mermaid.render(id, entry.code);
-        if (!cancelled) setSvg(rendered);
-      } catch {
-        if (!cancelled) setSvg(null);
+        if (!cancelled) {
+          setSvg(rendered);
+          setError(null);
+        }
+      } catch (err2) {
+        if (!cancelled) {
+          setSvg(null);
+          setError(err2 instanceof Error ? err2.message : String(err2));
+        }
       }
     };
     void draw();
@@ -1650,7 +1667,21 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx36(MermaidSource, { entry, ref });
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+    error ? /* @__PURE__ */ jsxs23(
+      "p",
+      {
+        role: "alert",
+        "data-es-mermaid-error": true,
+        className: "mt-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          "Diagram failed to render: ",
+          error
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx36(MermaidSource, { entry, ref })
+  ] });
 }
 
 // src/components/doc/MermaidDiagram.tsx