@bendyline/squisq-react 2.2.0 → 2.3.0

package/dist/chunk-TT6ENR6T.js

@@ -0,0 +1,26 @@
+// src/hooks/useAutoSurface.ts
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var getServerSnapshot = () => LIGHT_SURFACE;
+function useAutoSurface(enabled) {
+  const mql = useMemo(
+    () => enabled && typeof window !== "undefined" ? window.matchMedia(DARK_QUERY) : null,
+    [enabled]
+  );
+  const subscribe = useCallback(
+    (cb) => {
+      if (!mql) return () => {
+      };
+      mql.addEventListener("change", cb);
+      return () => mql.removeEventListener("change", cb);
+    },
+    [mql]
+  );
+  const getSnapshot = useCallback(() => mql?.matches ? DARK_SURFACE : LIGHT_SURFACE, [mql]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export {
+  useAutoSurface
+};

package/dist/chunk-WLUZTUNZ.js

@@ -0,0 +1,111 @@
+// src/mermaid/MermaidDiagram.tsx
+import { useEffect, useState } from "react";
+import { DEFAULT_THEME as DEFAULT_THEME2 } from "@bendyline/squisq/doc";
+
+// src/mermaid/mermaidRuntime.ts
+import { buildMermaidThemeVariables } from "@bendyline/squisq/schemas";
+import { DEFAULT_THEME } from "@bendyline/squisq/doc";
+var mermaidPromise = null;
+var MERMAID_BASE_CONFIG = {
+  startOnLoad: false,
+  securityLevel: "strict",
+  suppressErrorRendering: true,
+  deterministicIds: false,
+  logLevel: "error"
+};
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then(({ default: mermaid }) => mermaid).catch((error) => {
+      mermaidPromise = null;
+      throw error;
+    });
+  }
+  return mermaidPromise;
+}
+function enqueue(run) {
+  const host = globalThis;
+  const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
+  const result = previous.then(run, run);
+  host.__squisqMermaidWorkQueue = result.then(
+    () => void 0,
+    () => void 0
+  );
+  return result;
+}
+function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
+  return enqueue(async () => {
+    const mermaid = await loadMermaid();
+    mermaid.initialize({
+      ...MERMAID_BASE_CONFIG,
+      theme: "base",
+      themeVariables: buildMermaidThemeVariables(theme)
+    });
+    const { svg, diagramType } = await mermaid.render(id, source, container);
+    return { svg, diagramType };
+  });
+}
+function mermaidRenderErrorMessage(error) {
+  const raw = error instanceof Error ? error.message : String(error);
+  return raw.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(0, 6).join("\n") || "Unknown Mermaid rendering error.";
+}
+
+// src/mermaid/MermaidDiagram.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderSequence = 0;
+function MermaidDiagram({
+  source,
+  className,
+  ariaLabel = "Mermaid diagram",
+  theme = DEFAULT_THEME2
+}) {
+  const [svg, setSvg] = useState("");
+  const [error, setError] = useState("");
+  const [rendering, setRendering] = useState(true);
+  useEffect(() => {
+    let current = true;
+    const id = `squisq-rich-mermaid-${++renderSequence}`;
+    setRendering(true);
+    setError("");
+    void renderMermaidSvg(id, source, void 0, theme).then((result) => {
+      if (!current) return;
+      setSvg(result.svg);
+    }).catch((caught) => {
+      if (!current) return;
+      setSvg("");
+      setError(mermaidRenderErrorMessage(caught));
+    }).finally(() => {
+      if (current) setRendering(false);
+    });
+    return () => {
+      current = false;
+    };
+  }, [source, theme]);
+  const classes = ["squisq-mermaid-rendered", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "img",
+      "aria-label": ariaLabel,
+      style: { background: theme.colors.backgroundLight, color: theme.colors.text },
+      children: [
+        rendering && /* @__PURE__ */ jsx("div", { className: "squisq-mermaid-render-status", children: "Rendering diagram\u2026" }),
+        !rendering && error && /* @__PURE__ */ jsxs("div", { className: "squisq-mermaid-render-error", role: "alert", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Mermaid could not render this diagram." }),
+          /* @__PURE__ */ jsx("pre", { children: error })
+        ] }),
+        !rendering && !error && svg && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "squisq-mermaid-render-svg",
+            dangerouslySetInnerHTML: { __html: svg }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  MermaidDiagram
+};