@turingpaper/ui 0.0.1-test.8 → 0.0.1

package/dist/components/mermaid-diagram.d.ts

@@ -0,0 +1,8 @@
+import { RenderOptions } from 'beautiful-mermaid';
+export interface MermaidDiagramProps {
+    className?: string;
+    code: string;
+    filename?: string;
+    options?: RenderOptions;
+}
+export declare const MermaidDiagram: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof MermaidDiagramProps> & MermaidDiagramProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/mermaid-diagram.mjs

@@ -0,0 +1,144 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { cn as b } from "./utils.mjs";
+import { forwardRef as p, useMemo as f, useState as x, useCallback as h } from "react";
+import { THEMES as S, renderMermaidSVG as w } from "beautiful-mermaid";
+import { TransformWrapper as C, TransformComponent as k, useControls as E } from "react-zoom-pan-pinch";
+import { ZoomIn as N, ZoomOut as O, RotateCcw as T, Check as y, Copy as I, Download as z } from "lucide-react";
+const R = "script, foreignObject, iframe, object, embed", M = /^on/i;
+function j(e) {
+  let t;
+  try {
+    t = new DOMParser().parseFromString(e, "image/svg+xml");
+  } catch {
+    return null;
+  }
+  const o = t.documentElement;
+  if (o.tagName !== "svg" || t.querySelector("parsererror") || o.querySelectorAll(R).length > 0) return null;
+  const n = o.querySelectorAll("*");
+  for (const s of n)
+    for (const a of s.attributes)
+      if (M.test(a.name)) return null;
+  return e;
+}
+const L = {
+  ...S["github-light"],
+  transparent: !0
+};
+function _(e) {
+  if (!e) return "mermaid-diagram.svg";
+  const t = Math.max(e.lastIndexOf("/"), e.lastIndexOf("\\")), o = t >= 0 ? e.substring(t + 1) : e, n = o.lastIndexOf(".");
+  return `${(n > 0 ? o.substring(0, n) : o).replace(/[^a-zA-Z0-9_-]/g, "") || "mermaid-diagram"}.svg`;
+}
+const G = p(({ className: e, code: t, filename: o, options: n, ...s }, a) => {
+  const i = f(() => _(o), [o]), { svg: l, error: u } = f(() => {
+    if (!t.trim())
+      return { svg: null, error: "Empty diagram" };
+    let d;
+    try {
+      d = w(t, { ...L, ...n });
+    } catch (c) {
+      return {
+        svg: null,
+        error: c instanceof Error ? c.message : "Invalid diagram"
+      };
+    }
+    return j(d) ? { svg: d, error: null } : { svg: null, error: "Invalid SVG" };
+  }, [t, n]);
+  return u ? /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: b(
+        "flex items-center justify-center text-muted-foreground text-sm",
+        e
+      ),
+      ...s,
+      children: u
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: b("relative w-full h-full overflow-hidden", e),
+      ...s,
+      children: /* @__PURE__ */ v(
+        C,
+        {
+          initialScale: 1,
+          minScale: 0.25,
+          maxScale: 4,
+          centerOnInit: !0,
+          children: [
+            /* @__PURE__ */ r(A, { code: t, svg: l, svgFilename: i }),
+            /* @__PURE__ */ r(
+              k,
+              {
+                wrapperClass: "!w-full !h-full",
+                contentClass: "!w-full",
+                children: /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "w-full [&>svg]:w-full [&>svg]:h-auto",
+                    dangerouslySetInnerHTML: { __html: l }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}), A = ({ code: e, svg: t, svgFilename: o }) => {
+  const { zoomIn: n, zoomOut: s, resetTransform: a } = E(), [i, l] = x(!1), u = h(async () => {
+    await navigator.clipboard.writeText(e), l(!0), setTimeout(() => l(!1), 2e3);
+  }, [e]), d = h(() => {
+    const g = new Blob([t], { type: "image/svg+xml" }), c = URL.createObjectURL(g), m = document.createElement("a");
+    m.href = c, m.download = o, m.click(), URL.revokeObjectURL(c);
+  }, [t, o]);
+  return /* @__PURE__ */ v("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: () => n(),
+        className: "p-1.5 rounded-md bg-background/80 border border-border hover:bg-muted text-foreground",
+        children: /* @__PURE__ */ r(N, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: () => s(),
+        className: "p-1.5 rounded-md bg-background/80 border border-border hover:bg-muted text-foreground",
+        children: /* @__PURE__ */ r(O, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: () => a(),
+        className: "p-1.5 rounded-md bg-background/80 border border-border hover:bg-muted text-foreground",
+        children: /* @__PURE__ */ r(T, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: u,
+        className: "p-1.5 rounded-md bg-background/80 border border-border hover:bg-muted text-foreground",
+        children: i ? /* @__PURE__ */ r(y, { size: 16 }) : /* @__PURE__ */ r(I, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: d,
+        className: "p-1.5 rounded-md bg-background/80 border border-border hover:bg-muted text-foreground",
+        children: /* @__PURE__ */ r(z, { size: 16 })
+      }
+    )
+  ] });
+};
+export {
+  G as MermaidDiagram
+};