@superlc/md-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,347 +1,953 @@
-import { jsxs as B, jsx as o, Fragment as E } from "react/jsx-runtime";
-import Q, { useMemo as P, memo as F, useRef as d, useState as T, useCallback as N, useEffect as y, useLayoutEffect as ee } from "react";
-import { parseToHast as te, createStreamingParser as V, OutputRateController as J } from "@superlc/md-core";
+import { jsxs as C, jsx as e, Fragment as H } from "react/jsx-runtime";
+import U, { useState as E, useCallback as p, useRef as k, useEffect as z, useMemo as O, memo as P, useLayoutEffect as me } from "react";
+import { detectColorScheme as fe, observeColorScheme as he, downloadAsPng as pe, MermaidRenderer as be, parseToHast as J, createStreamingParser as Q, OutputRateController as ee } from "@superlc/md-core";
 import { toJsxRuntime as W } from "hast-util-to-jsx-runtime";
-function re(e, t = {}) {
-  const { components: c = {}, ...a } = t;
-  return P(() => {
-    if (!e) return null;
-    const r = te(e, a);
-    return W(r, {
-      Fragment: E,
-      jsx: o,
-      jsxs: B,
-      components: c
+async function ve(t) {
+  try {
+    return await navigator.clipboard.writeText(t), !0;
+  } catch {
+    return ge(t);
+  }
+}
+function ge(t) {
+  const n = document.createElement("textarea");
+  n.value = t, n.style.position = "fixed", n.style.left = "-9999px", document.body.appendChild(n), n.select();
+  try {
+    return document.execCommand("copy"), !0;
+  } catch {
+    return !1;
+  } finally {
+    document.body.removeChild(n);
+  }
+}
+const ye = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }), we = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }), K = ({
+  children: t,
+  showCopyButton: n = !0,
+  onCopy: c,
+  className: l
+}) => {
+  const [a, i] = E(!1), o = p(async () => {
+    const r = j(t);
+    await ve(r) && (i(!0), c == null || c(r), setTimeout(() => i(!1), 2e3));
+  }, [t, c]);
+  return /* @__PURE__ */ C("div", { className: `md-code-block-wrapper${l ? ` ${l}` : ""}`, children: [
+    /* @__PURE__ */ e("pre", { children: t }),
+    n && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: `md-copy-button${a ? " md-copy-button--copied" : ""}`,
+        onClick: o,
+        title: a ? "已复制" : "复制代码",
+        "aria-label": a ? "已复制" : "复制代码",
+        children: a ? /* @__PURE__ */ e(we, {}) : /* @__PURE__ */ e(ye, {})
+      }
+    )
+  ] });
+};
+function j(t) {
+  return typeof t == "string" ? t : typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(j).join("") : U.isValidElement(t) ? j(t.props.children) : "";
+}
+K.displayName = "CodeBlock";
+const ke = {
+  min: 0.25,
+  max: 4,
+  step: 0.25,
+  default: 1
+};
+function te(t = {}) {
+  const {
+    config: n,
+    enableDrag: c = !1,
+    enableWheelZoom: l = !1
+  } = t, a = { ...ke, ...n }, i = k(null), o = k(!1), r = k({ x: 0, y: 0 }), b = k({ x: 0, y: 0 }), [u, f] = E({
+    scale: a.default,
+    translateX: 0,
+    translateY: 0
+  }), d = p(
+    (s) => Math.max(a.min, Math.min(a.max, s)),
+    [a.min, a.max]
+  ), v = p(() => {
+    f((s) => ({
+      ...s,
+      scale: d(s.scale + a.step)
+    }));
+  }, [d, a.step]), h = p(() => {
+    f((s) => ({
+      ...s,
+      scale: d(s.scale - a.step)
+    }));
+  }, [d, a.step]), g = p(() => {
+    f({
+      scale: a.default,
+      translateX: 0,
+      translateY: 0
     });
-  }, [e, c, a]);
+  }, [a.default]), x = p(
+    (s) => {
+      f((w) => ({
+        ...w,
+        scale: d(s)
+      }));
+    },
+    [d]
+  ), V = p(
+    (s, w) => {
+      const L = s.width / w.width, D = s.height / w.height, F = Math.min(L, D) * 0.95;
+      f({
+        scale: d(F),
+        translateX: 0,
+        translateY: 0
+      });
+    },
+    [d]
+  ), y = p(
+    (s) => {
+      c && (s.preventDefault(), o.current = !0, r.current = { x: s.clientX, y: s.clientY }, b.current = { x: u.translateX, y: u.translateY });
+    },
+    [c, u.translateX, u.translateY]
+  );
+  z(() => {
+    if (!c) return;
+    const s = (L) => {
+      if (!o.current) return;
+      const D = L.clientX - r.current.x, F = L.clientY - r.current.y;
+      f((m) => ({
+        ...m,
+        translateX: b.current.x + D,
+        translateY: b.current.y + F
+      }));
+    }, w = () => {
+      o.current = !1;
+    };
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", w), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", w);
+    };
+  }, [c]);
+  const I = p(
+    (s) => {
+      if (!l) return;
+      s.preventDefault();
+      const w = s.deltaY > 0 ? -a.step : a.step;
+      f((L) => ({
+        ...L,
+        scale: d(L.scale + w)
+      }));
+    },
+    [l, a.step, d]
+  ), B = p(() => {
+    g();
+  }, [g]), T = {
+    transform: `translate(${u.translateX}px, ${u.translateY}px) scale(${u.scale})`,
+    transformOrigin: "center center",
+    transition: o.current ? "none" : "transform 0.2s ease-out",
+    cursor: c ? o.current ? "grabbing" : "grab" : "default"
+  };
+  return {
+    state: u,
+    zoomIn: v,
+    zoomOut: h,
+    reset: g,
+    fitToContainer: V,
+    setScale: x,
+    canZoomIn: u.scale < a.max,
+    canZoomOut: u.scale > a.min,
+    containerRef: i,
+    contentStyle: T,
+    handlers: {
+      onMouseDown: y,
+      onWheel: I,
+      onDoubleClick: B
+    }
+  };
+}
+const Ce = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), xe = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }), ne = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z" }) }), re = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7V9z" }) }), ae = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }), Ne = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) }), Me = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }), ce = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }), Se = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }), ze = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }), Le = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }), se = ({
+  svg: t,
+  open: n,
+  onClose: c,
+  onDownload: l
+}) => {
+  const a = k(null), i = k(null), o = k(null), [r, b] = E(!1), {
+    state: u,
+    zoomIn: f,
+    zoomOut: d,
+    reset: v,
+    fitToContainer: h,
+    canZoomIn: g,
+    canZoomOut: x,
+    contentStyle: V,
+    handlers: y
+  } = te({
+    enableDrag: !0,
+    enableWheelZoom: !0
+  }), I = p(async () => {
+    if (a.current)
+      try {
+        await a.current.requestFullscreen(), b(!0);
+      } catch {
+        b(!0);
+      }
+  }, []), B = p(() => {
+    document.fullscreenElement && document.exitFullscreen().catch(() => {
+    }), b(!1), c();
+  }, [c]);
+  z(() => {
+    n ? I() : r && B();
+  }, [n, I, B, r]), z(() => {
+    const s = () => {
+      !document.fullscreenElement && r && (b(!1), c());
+    };
+    return document.addEventListener("fullscreenchange", s), () => document.removeEventListener("fullscreenchange", s);
+  }, [r, c]), z(() => {
+    if (!r) return;
+    const s = (w) => {
+      switch (w.key) {
+        case "+":
+        case "=":
+          f();
+          break;
+        case "-":
+          d();
+          break;
+        case "0":
+          v();
+          break;
+      }
+    };
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [r, f, d, v]);
+  const T = p(() => {
+    if (!i.current || !o.current) return;
+    const s = i.current.getBoundingClientRect(), w = o.current.querySelector("svg");
+    if (w) {
+      const L = w.getBoundingClientRect();
+      h(s, L);
+    }
+  }, [h]);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: `md-mermaid-fullscreen-wrapper${r ? " md-mermaid-fullscreen-wrapper--active" : ""}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Mermaid 图表全屏预览",
+      "aria-hidden": !r,
+      children: r && /* @__PURE__ */ C(H, { children: [
+        /* @__PURE__ */ C("div", { className: "md-mermaid-fullscreen-toolbar", children: [
+          /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar-group", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: d,
+                disabled: !x,
+                title: "缩小 (-)",
+                "aria-label": "缩小",
+                children: /* @__PURE__ */ e(re, {})
+              }
+            ),
+            /* @__PURE__ */ C("span", { className: "md-mermaid-zoom-label", children: [
+              Math.round(u.scale * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: f,
+                disabled: !g,
+                title: "放大 (+)",
+                "aria-label": "放大",
+                children: /* @__PURE__ */ e(ne, {})
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "md-mermaid-toolbar-divider" }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: v,
+                title: "重置 (0)",
+                "aria-label": "重置",
+                children: /* @__PURE__ */ e(ae, {})
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: T,
+                title: "适应窗口",
+                "aria-label": "适应窗口",
+                children: /* @__PURE__ */ e(Me, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar-group", children: [
+            l && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: l,
+                title: "下载 PNG",
+                "aria-label": "下载",
+                children: /* @__PURE__ */ e(ce, {})
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "md-mermaid-toolbar-btn",
+                onClick: B,
+                title: "退出全屏 (Esc)",
+                "aria-label": "退出全屏",
+                children: /* @__PURE__ */ e(Se, {})
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            ref: i,
+            className: "md-mermaid-fullscreen-content",
+            onWheel: y.onWheel,
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                ref: o,
+                className: "md-mermaid-fullscreen-svg",
+                style: V,
+                onMouseDown: y.onMouseDown,
+                onDoubleClick: y.onDoubleClick,
+                dangerouslySetInnerHTML: { __html: t }
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+se.displayName = "MermaidFullscreenViewer";
+let Z = null;
+function Ie(t = "auto") {
+  return Z ? Z.setTheme(t ?? "auto") : Z = new be({ theme: t }), Z;
 }
-const ne = ({
-  children: e,
-  components: t,
+async function Ee(t) {
+  try {
+    return await navigator.clipboard.writeText(t), !0;
+  } catch {
+    const n = document.createElement("textarea");
+    n.value = t, n.style.position = "fixed", n.style.left = "-9999px", document.body.appendChild(n), n.select();
+    try {
+      return document.execCommand("copy"), !0;
+    } catch {
+      return !1;
+    } finally {
+      document.body.removeChild(n);
+    }
+  }
+}
+const oe = ({
+  code: t,
+  theme: n = "auto",
+  showToolbar: c = !0,
+  onCopy: l,
+  className: a
+}) => {
+  const [i, o] = E("preview"), [r, b] = E(null), [u, f] = E(!0), [d, v] = E(!1), [h, g] = E(!1), x = k(null), [V, y] = E(() => fe()), {
+    state: I,
+    zoomIn: B,
+    zoomOut: T,
+    reset: s,
+    canZoomIn: w,
+    canZoomOut: L,
+    contentStyle: D
+  } = te();
+  z(() => {
+    if (n === "auto")
+      return he((S) => {
+        y(S);
+      });
+  }, [n]), z(() => {
+    let S = !1;
+    return (async () => {
+      f(!0);
+      const $ = await Ie(n).render(t);
+      S || (b($), f(!1), $.success || o("code"));
+    })(), () => {
+      S = !0;
+    };
+  }, [t, n, V]);
+  const F = p(async () => {
+    await Ee(t) && (g(!0), l == null || l(t), setTimeout(() => g(!1), 2e3));
+  }, [t, l]), m = p(async () => {
+    var S;
+    if (r != null && r.svg)
+      try {
+        const A = ((S = window.matchMedia) == null ? void 0 : S.call(window, "(prefers-color-scheme: dark)").matches) ?? !1;
+        await pe(r.svg, {
+          backgroundColor: A ? "#1a1a2e" : "#ffffff",
+          padding: 20,
+          scale: 2
+        });
+      } catch (A) {
+        console.error("Download failed:", A);
+      }
+  }, [r]), N = p(() => {
+    v((S) => !S);
+  }, []), M = (r == null ? void 0 : r.success) && r.svg;
+  return /* @__PURE__ */ C("div", { className: `md-mermaid-block${a ? ` ${a}` : ""}`, children: [
+    c && /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar", children: [
+      /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar-group md-mermaid-mode-switch", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: `md-mermaid-toolbar-btn${i === "preview" ? " md-mermaid-toolbar-btn--active" : ""}`,
+            onClick: () => o("preview"),
+            disabled: !M,
+            title: "图片模式",
+            "aria-label": "图片模式",
+            children: /* @__PURE__ */ e(Ce, {})
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: `md-mermaid-toolbar-btn${i === "code" ? " md-mermaid-toolbar-btn--active" : ""}`,
+            onClick: () => o("code"),
+            title: "代码模式",
+            "aria-label": "代码模式",
+            children: /* @__PURE__ */ e(xe, {})
+          }
+        )
+      ] }),
+      i === "preview" && M && /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar-group", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "md-mermaid-toolbar-btn",
+            onClick: T,
+            disabled: !L,
+            title: "缩小",
+            "aria-label": "缩小",
+            children: /* @__PURE__ */ e(re, {})
+          }
+        ),
+        /* @__PURE__ */ C("span", { className: "md-mermaid-zoom-label", children: [
+          Math.round(I.scale * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "md-mermaid-toolbar-btn",
+            onClick: B,
+            disabled: !w,
+            title: "放大",
+            "aria-label": "放大",
+            children: /* @__PURE__ */ e(ne, {})
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "md-mermaid-toolbar-btn",
+            onClick: s,
+            title: "重置",
+            "aria-label": "重置缩放",
+            children: /* @__PURE__ */ e(ae, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ C("div", { className: "md-mermaid-toolbar-group", children: [
+        i === "preview" && M && /* @__PURE__ */ C(H, { children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "md-mermaid-toolbar-btn",
+              onClick: N,
+              title: "全屏",
+              "aria-label": "全屏查看",
+              children: /* @__PURE__ */ e(Ne, {})
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "md-mermaid-toolbar-btn",
+              onClick: m,
+              title: "下载 PNG",
+              "aria-label": "下载",
+              children: /* @__PURE__ */ e(ce, {})
+            }
+          )
+        ] }),
+        i === "code" && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: `md-mermaid-toolbar-btn${h ? " md-mermaid-toolbar-btn--success" : ""}`,
+            onClick: F,
+            title: h ? "已复制" : "复制代码",
+            "aria-label": h ? "已复制" : "复制代码",
+            children: h ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(ze, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "md-mermaid-content", ref: x, children: u ? (
+      // Loading 骨架屏
+      /* @__PURE__ */ e("div", { className: "md-mermaid-skeleton", children: /* @__PURE__ */ e("div", { className: "md-mermaid-skeleton-box" }) })
+    ) : i === "preview" && M && (r != null && r.svg) ? (
+      // 图片模式
+      /* @__PURE__ */ e("div", { className: "md-mermaid-preview", style: { overflow: "hidden" }, children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "md-mermaid-svg-container",
+          style: D,
+          dangerouslySetInnerHTML: { __html: r.svg }
+        }
+      ) })
+    ) : (
+      // 代码模式
+      /* @__PURE__ */ C("div", { className: "md-mermaid-code", children: [
+        /* @__PURE__ */ e("pre", { children: /* @__PURE__ */ e("code", { className: "language-mermaid", children: t }) }),
+        r && !r.success && /* @__PURE__ */ C("div", { className: "md-mermaid-error", children: [
+          /* @__PURE__ */ e("span", { children: "渲染失败: " }),
+          /* @__PURE__ */ e("span", { children: r.error })
+        ] })
+      ] })
+    ) }),
+    M && (r == null ? void 0 : r.svg) && /* @__PURE__ */ e(
+      se,
+      {
+        svg: r.svg,
+        open: d,
+        onClose: () => v(!1),
+        onDownload: m
+      }
+    )
+  ] });
+};
+oe.displayName = "MermaidBlock";
+function Ve(t) {
+  const n = t.children;
+  if (!U.isValidElement(n)) return !1;
+  const c = n.props, l = c == null ? void 0 : c.className;
+  return typeof l == "string" ? l.includes("language-mermaid") : !1;
+}
+function Re(t) {
+  if (!U.isValidElement(t)) return "";
+  const n = t.props, c = n == null ? void 0 : n.children;
+  return typeof c == "string" ? c : Array.isArray(c) ? c.map((l) => typeof l == "string" ? l : "").join("") : "";
+}
+function Be(t) {
+  return t ? t === !0 ? { enabled: !0 } : t.enabled !== !1 ? t : null : null;
+}
+const Te = ({
+  children: t,
+  components: n,
   className: c,
-  ...a
+  copyButton: l = !0,
+  onCodeCopy: a,
+  mermaid: i,
+  ...o
 }) => {
-  const r = re(e, { components: t, ...a });
-  return /* @__PURE__ */ o("div", { className: c, children: r });
+  const r = Be(i), b = O(() => {
+    if (!t) return null;
+    const u = J(t, o), d = {
+      pre: (v) => {
+        if (r && Ve(v)) {
+          const h = Re(v.children);
+          return /* @__PURE__ */ e(
+            oe,
+            {
+              code: h,
+              theme: r.theme,
+              onCopy: a
+            }
+          );
+        }
+        return l ? /* @__PURE__ */ e(K, { showCopyButton: l, onCopy: a, ...v }) : /* @__PURE__ */ e("pre", { ...v });
+      },
+      ...n
+    };
+    return W(u, {
+      Fragment: H,
+      jsx: e,
+      jsxs: C,
+      components: d
+    });
+  }, [t, n, l, a, r, o]);
+  return /* @__PURE__ */ e("div", { className: c, children: b });
 };
-ne.displayName = "Markdown";
-const X = F(
-  ({ block: e, components: t }) => {
-    if (!e.hast) return null;
+Te.displayName = "Markdown";
+function We(t, n = {}) {
+  const { components: c = {}, ...l } = n;
+  return O(() => {
+    if (!t) return null;
+    const a = J(t, l);
+    return W(a, {
+      Fragment: H,
+      jsx: e,
+      jsxs: C,
+      components: c
+    });
+  }, [t, c, l]);
+}
+const le = P(
+  ({ block: t, components: n }) => {
+    if (!t.hast) return null;
     try {
-      return W(e.hast, {
-        jsx: o,
-        jsxs: B,
-        Fragment: E,
-        components: t
+      return W(t.hast, {
+        jsx: e,
+        jsxs: C,
+        Fragment: H,
+        components: n
       });
     } catch {
       return null;
     }
   },
-  (e, t) => e.block.key === t.block.key && e.block.stable && t.block.stable
+  (t, n) => t.block.key === n.block.key && t.block.stable && n.block.stable
 );
-X.displayName = "StableBlock";
-function ge(e = {}) {
+le.displayName = "StableBlock";
+function _e(t = {}) {
   const {
-    components: t,
+    components: n,
     minUpdateInterval: c = 16,
-    immediate: a = !1,
-    outputRate: r = "medium",
-    ...g
-  } = e, s = d(V(g)), n = d(new J(r)), [x, p] = T(0), [b, k] = T(!1), [u, l] = T(0), [L, v] = T("idle"), A = d(0), m = d(null), S = N(() => {
-    const h = performance.now(), D = h - A.current;
-    a || D >= c ? (A.current = h, p((H) => H + 1)) : m.current === null && (m.current = window.requestAnimationFrame(() => {
-      m.current = null, A.current = performance.now(), p((H) => H + 1);
+    immediate: l = !1,
+    outputRate: a = "medium",
+    ...i
+  } = t, o = k(Q(i)), r = k(new ee(a)), [b, u] = E(0), [f, d] = E(!1), [v, h] = E(0), [g, x] = E("idle"), V = k(0), y = k(null), I = p(() => {
+    const R = performance.now(), $ = R - V.current;
+    l || $ >= c ? (V.current = R, u((_) => _ + 1)) : y.current === null && (y.current = window.requestAnimationFrame(() => {
+      y.current = null, V.current = performance.now(), u((_) => _ + 1);
     }));
-  }, [c, a]), R = N(
-    (h) => {
-      s.current.append(h), S();
+  }, [c, l]), B = p(
+    (R) => {
+      o.current.append(R), I();
     },
-    [S]
-  ), M = N(
-    (h) => {
-      s.current.reset(), k(!1), l(0), v("running"), n.current.start(
-        h,
-        (D) => {
-          D && s.current.append(D), l(n.current.progress), S();
+    [I]
+  ), T = p(
+    (R) => {
+      o.current.reset(), d(!1), h(0), x("running"), r.current.start(
+        R,
+        ($) => {
+          $ && o.current.append($), h(r.current.progress), I();
         },
         () => {
-          s.current.finish(), k(!0), l(1), v("complete"), S();
+          o.current.finish(), d(!0), h(1), x("complete"), I();
         }
       );
     },
-    [S]
-  ), I = N(() => {
-    n.current.pause(), v(n.current.status);
-  }, []), j = N(() => {
-    n.current.resume(), v(n.current.status);
-  }, []), $ = N(() => {
-    n.current.skipToEnd(), v(n.current.status), l(1);
-  }, []), i = N(() => {
-    n.current.stop(), s.current.finish(), k(!0), v("complete"), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), p((h) => h + 1);
-  }, []), f = N(() => {
-    n.current.stop(), s.current.reset(), k(!1), l(0), v("idle"), m.current !== null && (cancelAnimationFrame(m.current), m.current = null), p((h) => h + 1);
+    [I]
+  ), s = p(() => {
+    r.current.pause(), x(r.current.status);
+  }, []), w = p(() => {
+    r.current.resume(), x(r.current.status);
+  }, []), L = p(() => {
+    r.current.skipToEnd(), x(r.current.status), h(1);
+  }, []), D = p(() => {
+    r.current.stop(), o.current.finish(), d(!0), x("complete"), y.current !== null && (cancelAnimationFrame(y.current), y.current = null), u((R) => R + 1);
+  }, []), F = p(() => {
+    r.current.stop(), o.current.reset(), d(!1), h(0), x("idle"), y.current !== null && (cancelAnimationFrame(y.current), y.current = null), u((R) => R + 1);
   }, []);
-  y(() => {
-    n.current.setRate(r);
-  }, [r]), y(() => () => {
-    n.current.stop(), m.current !== null && cancelAnimationFrame(m.current);
+  z(() => {
+    r.current.setRate(a);
+  }, [a]), z(() => () => {
+    r.current.stop(), y.current !== null && cancelAnimationFrame(y.current);
   }, []);
-  const w = s.current.getState(), z = s.current.getStats(), C = s.current.getContent(), _ = P(() => w.blocks.map(
-    (h) => o(
-      X,
+  const m = o.current.getState(), N = o.current.getStats(), M = o.current.getContent(), S = O(() => m.blocks.map(
+    (R) => e(
+      le,
       {
-        block: h,
-        components: t
+        block: R,
+        components: n
       },
-      h.key
+      R.key
     )
-  ), [w.blocks, t, x]);
+  ), [m.blocks, n, b]);
   return {
-    element: P(() => w.blocks.length === 0 ? null : o(E, { children: _ }), [_, w.blocks.length]),
-    append: R,
-    start: M,
-    pause: I,
-    resume: j,
-    skipToEnd: $,
-    reset: f,
-    finish: i,
-    blocks: w.blocks,
-    stats: z,
-    isComplete: b,
-    content: C,
-    progress: u,
-    outputStatus: L
+    element: O(() => m.blocks.length === 0 ? null : e(H, { children: S }), [S, m.blocks.length]),
+    append: B,
+    start: T,
+    pause: s,
+    resume: w,
+    skipToEnd: L,
+    reset: F,
+    finish: D,
+    blocks: m.blocks,
+    stats: N,
+    isComplete: f,
+    content: M,
+    progress: v,
+    outputStatus: g
   };
 }
-const se = 16, ce = "data:image/svg+xml,", ae = () => /* @__PURE__ */ B("svg", { width: "48", height: "36", viewBox: "0 0 48 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ o("rect", { x: "0", y: "0", width: "48", height: "36", rx: "3", className: "md-image-skeleton-icon" }),
-  /* @__PURE__ */ o("circle", { cx: "12", cy: "10", r: "5", className: "md-image-skeleton-icon-detail" }),
-  /* @__PURE__ */ o("path", { d: "M0 36 L0 24 L16 16 L28 26 L48 12 L48 36 Z", className: "md-image-skeleton-icon-detail" })
-] }), Y = F(({
-  src: e,
-  alt: t,
+const De = 16, Fe = "data:image/svg+xml,", He = () => /* @__PURE__ */ C("svg", { width: "48", height: "36", viewBox: "0 0 48 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "0", y: "0", width: "48", height: "36", rx: "3", className: "md-image-skeleton-icon" }),
+  /* @__PURE__ */ e("circle", { cx: "12", cy: "10", r: "5", className: "md-image-skeleton-icon-detail" }),
+  /* @__PURE__ */ e("path", { d: "M0 36 L0 24 L16 16 L28 26 L48 12 L48 36 Z", className: "md-image-skeleton-icon-detail" })
+] }), ie = P(({
+  src: t,
+  alt: n,
   className: c,
-  "data-width": a,
-  "data-height": r,
-  ...g
+  "data-width": l,
+  "data-height": a,
+  ...i
 }) => {
-  const n = (e == null ? void 0 : e.startsWith(ce)) ? void 0 : e, x = a ? Number(a) : 200, p = r ? Number(r) : 120, [b, k] = T(!0), u = d(null), l = d(null);
-  ee(() => {
-    u.current && n && u.current.complete && u.current.naturalWidth > 0 && k(!1);
-  }, [n]);
-  const L = N(() => {
-    l.current && clearTimeout(l.current), l.current = setTimeout(() => {
-      k(!1);
-    }, se);
+  const r = (t == null ? void 0 : t.startsWith(Fe)) ? void 0 : t, b = l ? Number(l) : 200, u = a ? Number(a) : 120, [f, d] = E(!0), v = k(null), h = k(null);
+  me(() => {
+    v.current && r && v.current.complete && v.current.naturalWidth > 0 && d(!1);
+  }, [r]);
+  const g = p(() => {
+    h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      d(!1);
+    }, De);
   }, []);
-  return /* @__PURE__ */ B(
+  return /* @__PURE__ */ C(
     "span",
     {
       className: `md-image-container ${c || ""}`,
-      style: { width: x, height: p },
+      style: { width: b, height: u },
       children: [
-        n && /* @__PURE__ */ o(
+        r && /* @__PURE__ */ e(
           "img",
           {
-            ref: u,
-            src: n,
-            alt: t,
-            onLoad: L,
+            ref: v,
+            src: r,
+            alt: n,
+            onLoad: g,
             className: "md-image",
-            ...g
+            ...i
           }
         ),
-        b && /* @__PURE__ */ o("span", { className: "md-image-skeleton", children: /* @__PURE__ */ o(ae, {}) })
+        f && /* @__PURE__ */ e("span", { className: "md-image-skeleton", children: /* @__PURE__ */ e(He, {}) })
       ]
     }
   );
 });
-Y.displayName = "StreamingImage";
-let K = !1, O = null;
-async function Z() {
-  if (!K)
-    return O || (O = (async () => {
-      await import("katex/dist/katex.min.css"), K = !0;
-    })(), O);
+ie.displayName = "StreamingImage";
+let q = !1, Y = null;
+async function ue() {
+  if (!q)
+    return Y || (Y = (async () => {
+      await import("katex/dist/katex.min.css"), q = !0;
+    })(), Y);
 }
-const ie = F(({ children: e }) => (y(() => {
-  K || Z();
-}, []), /* @__PURE__ */ o(E, { children: e })));
-ie.displayName = "MathProvider";
-function oe() {
-  return Z();
+const Ae = P(({ children: t }) => (z(() => {
+  q || ue();
+}, []), /* @__PURE__ */ e(H, { children: t })));
+Ae.displayName = "MathProvider";
+function $e() {
+  return ue();
 }
-const G = F(
-  ({ block: e, components: t }) => {
-    if (!e.hast) return null;
+const de = P(
+  ({ block: t, components: n }) => {
+    if (!t.hast) return null;
     try {
-      return W(e.hast, {
-        jsx: o,
-        jsxs: B,
-        Fragment: E,
-        components: t
+      return W(t.hast, {
+        jsx: e,
+        jsxs: C,
+        Fragment: H,
+        components: n
       });
     } catch {
-      return /* @__PURE__ */ o("div", { className: "parse-error", children: e.source });
+      return /* @__PURE__ */ e("div", { className: "parse-error", children: t.source });
     }
   },
-  (e, t) => e.block.key === t.block.key && e.block.stable && t.block.stable
+  (t, n) => t.block.key === n.block.key && t.block.stable && n.block.stable
 );
-G.displayName = "StableBlock";
-const ue = ({
-  content: e,
-  source: t,
+de.displayName = "StableBlock";
+const Oe = ({
+  content: t,
+  source: n,
   outputRate: c = "medium",
-  isComplete: a = !1,
-  onComplete: r,
-  onBlockStable: g,
-  onProgress: s,
-  components: n,
-  className: x,
-  minUpdateInterval: p = 16,
-  autoStart: b = !0,
-  ...k
+  isComplete: l = !1,
+  onComplete: a,
+  onBlockStable: i,
+  onProgress: o,
+  components: r,
+  className: b,
+  minUpdateInterval: u = 16,
+  autoStart: f = !0,
+  copyButton: d = !0,
+  onCodeCopy: v,
+  ...h
 }) => {
-  y(() => {
-    k.math && oe();
-  }, [k.math]);
-  const u = d(V(k)), l = d(new J(c)), L = d(""), v = d(void 0), A = d([]), [, m] = Q.useReducer((i) => i + 1, 0), S = d(0), R = d(null), M = () => {
-    const i = performance.now();
-    i - S.current >= p ? (S.current = i, m()) : R.current === null && (R.current = window.requestAnimationFrame(() => {
-      R.current = null, S.current = performance.now(), m();
+  z(() => {
+    h.math && $e();
+  }, [h.math]);
+  const g = k(Q(h)), x = k(new ee(c)), V = k(""), y = k(void 0), I = k([]), [, B] = U.useReducer((m) => m + 1, 0), T = k(0), s = k(null), w = () => {
+    const m = performance.now();
+    m - T.current >= u ? (T.current = m, B()) : s.current === null && (s.current = window.requestAnimationFrame(() => {
+      s.current = null, T.current = performance.now(), B();
     }));
   };
-  y(() => {
-    t !== void 0 && t !== v.current && (v.current = t, b && t && (u.current.reset(), L.current = "", l.current.start(
-      t,
-      (i) => {
-        i && (u.current.append(i), L.current += i), s == null || s(l.current.progress), M();
+  z(() => {
+    n !== void 0 && n !== y.current && (y.current = n, f && n && (g.current.reset(), V.current = "", x.current.start(
+      n,
+      (m) => {
+        m && (g.current.append(m), V.current += m), o == null || o(x.current.progress), w();
       },
       () => {
-        u.current.finish(), r == null || r(), M();
+        g.current.finish(), a == null || a(), w();
       }
     )));
-  }, [t, b, r, s]), y(() => {
-    if (t !== void 0)
+  }, [n, f, a, o]), z(() => {
+    if (n !== void 0)
       return;
-    const i = L.current, f = e || "";
-    if (f !== i) {
-      if (f.startsWith(i)) {
-        const w = f.slice(i.length);
-        w && u.current.append(w);
+    const m = V.current, N = t || "";
+    if (N !== m) {
+      if (N.startsWith(m)) {
+        const M = N.slice(m.length);
+        M && g.current.append(M);
       } else
-        u.current.reset(), f && u.current.append(f);
-      L.current = f, M();
+        g.current.reset(), N && g.current.append(N);
+      V.current = N, w();
     }
-  }, [e, t]), y(() => {
-    t === void 0 && a && (u.current.finish(), R.current !== null && (cancelAnimationFrame(R.current), R.current = null), m(), r == null || r());
-  }, [a, r, t]), y(() => {
-    l.current.setRate(c);
-  }, [c]), y(() => {
-    if (g) {
-      const i = u.current.getState().blocks, f = A.current;
-      i.forEach((w, z) => {
-        const C = f[z];
-        w.stable && (!C || !C.stable) && g(w);
-      }), A.current = i;
+  }, [t, n]), z(() => {
+    n === void 0 && l && (g.current.finish(), s.current !== null && (cancelAnimationFrame(s.current), s.current = null), B(), a == null || a());
+  }, [l, a, n]), z(() => {
+    x.current.setRate(c);
+  }, [c]), z(() => {
+    if (i) {
+      const m = g.current.getState().blocks, N = I.current;
+      m.forEach((M, S) => {
+        const A = N[S];
+        M.stable && (!A || !A.stable) && i(M);
+      }), I.current = m;
     }
-  }), y(() => () => {
-    l.current.stop(), R.current !== null && cancelAnimationFrame(R.current);
+  }), z(() => () => {
+    x.current.stop(), s.current !== null && cancelAnimationFrame(s.current);
   }, []);
-  const I = u.current.getState(), j = t !== void 0 ? l.current.status === "complete" : a, $ = P(() => {
-    const i = {
-      img: Y,
-      ...n
+  const L = g.current.getState(), D = n !== void 0 ? x.current.status === "complete" : l, F = O(() => {
+    const m = (N) => {
+      if (d)
+        return (M) => /* @__PURE__ */ e(
+          K,
+          {
+            showCopyButton: N.stable && d,
+            onCopy: v,
+            ...M
+          }
+        );
     };
-    return I.blocks.map((f) => /* @__PURE__ */ o(
-      G,
-      {
-        block: f,
-        components: i
-      },
-      f.key
-    ));
-  }, [I.blocks, n]);
-  return /* @__PURE__ */ o("div", { className: x, "data-streaming": !j, children: $ });
+    return L.blocks.map((N) => {
+      const M = m(N), S = {
+        img: ie,
+        ...M ? { pre: M } : {},
+        ...r
+      };
+      return /* @__PURE__ */ e(
+        de,
+        {
+          block: N,
+          components: S
+        },
+        N.key
+      );
+    });
+  }, [L.blocks, r, d, v]);
+  return /* @__PURE__ */ e("div", { className: b, "data-streaming": !D, children: F });
 };
-ue.displayName = "StreamingMarkdown";
-const le = F((e) => {
-  const { text: t, animationConfig: c } = e, { fadeDuration: a = 200, easing: r = "ease-in-out" } = c || {}, [g, s] = T([]), n = d("");
-  y(() => {
-    if (t === n.current) return;
-    if (!(n.current && t.indexOf(n.current) === 0)) {
-      s([t]), n.current = t;
+Oe.displayName = "StreamingMarkdown";
+const Pe = P((t) => {
+  const { text: n, animationConfig: c } = t, { fadeDuration: l = 200, easing: a = "ease-in-out" } = c || {}, [i, o] = E([]), r = k("");
+  z(() => {
+    if (n === r.current) return;
+    if (!(r.current && n.indexOf(r.current) === 0)) {
+      o([n]), r.current = n;
       return;
     }
-    const p = t.slice(n.current.length);
-    p && (s((b) => [...b, p]), n.current = t);
-  }, [t]);
-  const x = `md-fade-in ${a}ms ${r} forwards`;
-  return /* @__PURE__ */ o(E, { children: g.map((p, b) => /* @__PURE__ */ o(
+    const u = n.slice(r.current.length);
+    u && (o((f) => [...f, u]), r.current = n);
+  }, [n]);
+  const b = `md-fade-in ${l}ms ${a} forwards`;
+  return /* @__PURE__ */ e(H, { children: i.map((u, f) => /* @__PURE__ */ e(
     "span",
     {
       className: "md-animation-text",
-      style: { animation: x },
-      children: p
+      style: { animation: b },
+      children: u
     },
-    `animation-text-${b}`
+    `animation-text-${f}`
   )) });
 });
-le.displayName = "AnimationText";
-let U = null;
+Pe.displayName = "AnimationText";
+let X = null;
 try {
-  U = require("dompurify");
+  X = require("dompurify");
 } catch {
 }
-function ke() {
-  return U !== null;
+function je() {
+  return X !== null;
 }
-function we(e, t) {
-  if (!U)
-    return e;
+function qe(t, n) {
+  if (!X)
+    return t;
   const c = {
     ADD_ATTR: ["target", "rel", "data-block-key", "data-pending", "data-predicted"],
-    ...t
+    ...n
   };
-  return U.default.sanitize(e, c);
+  return X.default.sanitize(t, c);
 }
-function q(e) {
-  if (e.type === "root")
+function G(t) {
+  if (t.type === "root")
     return {
-      ...e,
+      ...t,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      children: e.children.map((r) => r.type === "element" ? q(r) : r)
+      children: t.children.map((a) => a.type === "element" ? G(a) : a)
     };
-  const t = ["onclick", "onerror", "onload", "onmouseover", "onfocus", "onblur"], c = ["javascript:", "vbscript:", "data:text/html"], a = {};
-  if (e.properties)
-    for (const [r, g] of Object.entries(e.properties)) {
-      const s = r.toLowerCase();
-      if (!(t.includes(s) || s.startsWith("on"))) {
-        if ((s === "href" || s === "src") && typeof g == "string") {
-          const n = g.toLowerCase().trim();
-          if (c.some((x) => n.startsWith(x)))
+  const n = ["onclick", "onerror", "onload", "onmouseover", "onfocus", "onblur"], c = ["javascript:", "vbscript:", "data:text/html"], l = {};
+  if (t.properties)
+    for (const [a, i] of Object.entries(t.properties)) {
+      const o = a.toLowerCase();
+      if (!(n.includes(o) || o.startsWith("on"))) {
+        if ((o === "href" || o === "src") && typeof i == "string") {
+          const r = i.toLowerCase().trim();
+          if (c.some((b) => r.startsWith(b)))
             continue;
         }
-        a[r] = g;
+        l[a] = i;
       }
     }
   return {
-    ...e,
-    properties: a,
+    ...t,
+    properties: l,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    children: e.children.map((r) => r.type === "element" ? q(r) : r)
+    children: t.children.map((a) => a.type === "element" ? G(a) : a)
   };
 }
 export {
-  le as AnimationText,
-  ne as Markdown,
-  Y as StreamingImage,
-  ue as StreamingMarkdown,
-  ke as isDOMPurifyAvailable,
-  q as sanitizeHast,
-  we as sanitizeHtml,
-  re as useMarkdown,
-  ge as useStreamingMarkdown
+  Pe as AnimationText,
+  K as CodeBlock,
+  Te as Markdown,
+  oe as MermaidBlock,
+  se as MermaidFullscreenViewer,
+  ie as StreamingImage,
+  Oe as StreamingMarkdown,
+  je as isDOMPurifyAvailable,
+  G as sanitizeHast,
+  qe as sanitizeHtml,
+  We as useMarkdown,
+  _e as useStreamingMarkdown,
+  te as useZoom
 };