executable-stories-react 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -1694,21 +1694,38 @@ function prefersDark(el) {
 function MermaidView({ entry, load }) {
   const ref = (0, import_react8.useRef)(null);
   const [svg, setSvg] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
   (0, import_react8.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();
@@ -1734,7 +1751,21 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MermaidSource, { entry, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "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__ */ (0, import_jsx_runtime36.jsx)(MermaidSource, { entry, ref })
+  ] });
 }
 
 // src/components/doc/MermaidDiagram.tsx