@superlc/md-vue 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,63 +1,63 @@
-import { defineComponent as A, ref as h, h as f, watch as w, computed as B, onUnmounted as U } from "vue";
-import { parseToHast as P, createStreamingParser as F, OutputRateController as O } from "@superlc/md-core";
-let T = !1, x = null;
-async function D() {
-  if (!T)
-    return x || (x = (async () => {
-      await import("katex/dist/katex.min.css"), T = !0;
-    })(), x);
+import { defineComponent as C, ref as h, h as e, computed as B, onMounted as $, onUnmounted as F, watch as H } from "vue";
+import { detectColorScheme as te, observeColorScheme as ae, MermaidRenderer as ne, downloadAsPng as le, parseToHast as j, createStreamingParser as P, OutputRateController as U } from "@superlc/md-core";
+let O = !1, A = null;
+async function oe() {
+  if (!O)
+    return A || (A = (async () => {
+      await import("katex/dist/katex.min.css"), O = !0;
+    })(), A);
 }
-function ne() {
-  return T;
+function Se() {
+  return O;
 }
-function R() {
-  return D();
+function Y() {
+  return oe();
 }
-async function G(e) {
+async function re(t) {
   try {
-    return await navigator.clipboard.writeText(e), !0;
+    return await navigator.clipboard.writeText(t), !0;
   } catch {
-    return J(e);
+    return se(t);
   }
 }
-function J(e) {
-  const t = document.createElement("textarea");
-  t.value = e, t.style.position = "fixed", t.style.left = "-9999px", document.body.appendChild(t), t.select();
+function se(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(t);
+    document.body.removeChild(n);
   }
 }
-const Q = () => f(
+const ue = () => e(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor"
   },
   [
-    f("path", {
+    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"
     })
   ]
-), X = () => f(
+), ce = () => e(
   "svg",
   {
     viewBox: "0 0 24 24",
     fill: "currentColor"
   },
   [
-    f("path", {
+    e("path", {
       d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
     })
   ]
 );
-function I(e) {
-  return typeof e == "string" ? e : Array.isArray(e) ? e.map((t) => typeof t == "string" ? t : t && typeof t == "object" && "children" in t ? I(t.children) : "").join("") : "";
+function X(t) {
+  return typeof t == "string" ? t : Array.isArray(t) ? t.map((n) => typeof n == "string" ? n : n && typeof n == "object" && "children" in n ? X(n.children) : "").join("") : "";
 }
-const L = A({
+const q = C({
   name: "CodeBlock",
   props: {
     showCopyButton: {
@@ -66,34 +66,690 @@ const L = A({
     }
   },
   emits: ["copy"],
-  setup(e, { slots: t, emit: l }) {
-    const a = h(!1), u = async () => {
-      var o;
-      const r = (o = t.default) == null ? void 0 : o.call(t), n = r ? I(r) : "";
-      await G(n) && (a.value = !0, l("copy", n), setTimeout(() => {
-        a.value = !1;
+  setup(t, { slots: n, emit: l }) {
+    const s = h(!1), o = async () => {
+      var u;
+      const a = (u = n.default) == null ? void 0 : u.call(n), r = a ? X(a) : "";
+      await re(r) && (s.value = !0, l("copy", r), setTimeout(() => {
+        s.value = !1;
       }, 2e3));
     };
     return () => {
-      var n;
-      const r = (n = t.default) == null ? void 0 : n.call(t);
-      return f("div", { class: "md-code-block-wrapper" }, [
-        f("pre", {}, r),
-        e.showCopyButton && f(
+      var r;
+      const a = (r = n.default) == null ? void 0 : r.call(n);
+      return e("div", { class: "md-code-block-wrapper" }, [
+        e("pre", {}, a),
+        t.showCopyButton && e(
           "button",
           {
             type: "button",
-            class: `md-copy-button${a.value ? " md-copy-button--copied" : ""}`,
-            onClick: u,
-            title: a.value ? "已复制" : "复制代码",
-            "aria-label": a.value ? "已复制" : "复制代码"
+            class: `md-copy-button${s.value ? " md-copy-button--copied" : ""}`,
+            onClick: o,
+            title: s.value ? "已复制" : "复制代码",
+            "aria-label": s.value ? "已复制" : "复制代码"
           },
-          [a.value ? f(X) : f(Q)]
+          [s.value ? e(ce) : e(ue)]
         )
       ]);
     };
   }
-}), z = A({
+}), ie = {
+  min: 0.25,
+  max: 4,
+  step: 0.25,
+  default: 1
+};
+function W(t = {}) {
+  const {
+    config: n,
+    enableDrag: l = !1,
+    enableWheelZoom: s = !1
+  } = t, o = { ...ie, ...n }, a = h({
+    scale: o.default,
+    translateX: 0,
+    translateY: 0
+  }), r = h(!1), c = h({ x: 0, y: 0 }), u = h({ x: 0, y: 0 }), d = (g) => Math.max(o.min, Math.min(o.max, g)), v = B(() => a.value.scale < o.max), y = B(() => a.value.scale > o.min), m = () => {
+    a.value = {
+      ...a.value,
+      scale: d(a.value.scale + o.step)
+    };
+  }, i = () => {
+    a.value = {
+      ...a.value,
+      scale: d(a.value.scale - o.step)
+    };
+  }, p = () => {
+    a.value = {
+      scale: o.default,
+      translateX: 0,
+      translateY: 0
+    };
+  }, k = (g) => {
+    a.value = {
+      ...a.value,
+      scale: d(g)
+    };
+  }, f = (g, z) => {
+    const T = g.width / z.width, M = g.height / z.height, V = Math.min(T, M) * 0.95;
+    a.value = {
+      scale: d(V),
+      translateX: 0,
+      translateY: 0
+    };
+  }, I = (g) => {
+    l && (g.preventDefault(), r.value = !0, c.value = { x: g.clientX, y: g.clientY }, u.value = { x: a.value.translateX, y: a.value.translateY });
+  }, x = (g) => {
+    if (!r.value) return;
+    const z = g.clientX - c.value.x, T = g.clientY - c.value.y;
+    a.value = {
+      ...a.value,
+      translateX: u.value.x + z,
+      translateY: u.value.y + T
+    };
+  }, b = () => {
+    r.value = !1;
+  }, w = (g) => {
+    if (!s) return;
+    g.preventDefault();
+    const z = g.deltaY > 0 ? -o.step : o.step;
+    a.value = {
+      ...a.value,
+      scale: d(a.value.scale + z)
+    };
+  }, S = () => {
+    p();
+  }, N = B(() => ({
+    transform: `translate(${a.value.translateX}px, ${a.value.translateY}px) scale(${a.value.scale})`,
+    transformOrigin: "center center",
+    transition: r.value ? "none" : "transform 0.2s ease-out",
+    cursor: l ? r.value ? "grabbing" : "grab" : "default"
+  }));
+  return $(() => {
+    l && (document.addEventListener("mousemove", x), document.addEventListener("mouseup", b));
+  }), F(() => {
+    l && (document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", b));
+  }), {
+    state: a,
+    zoomIn: m,
+    zoomOut: i,
+    reset: p,
+    fitToContainer: f,
+    setScale: k,
+    canZoomIn: v,
+    canZoomOut: y,
+    contentStyle: N,
+    onMouseDown: I,
+    onWheel: w,
+    onDoubleClick: S
+  };
+}
+const de = C({
+  name: "ImageIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), me = C({
+  name: "CodeIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), K = C({
+  name: "ZoomInIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), G = C({
+  name: "ZoomOutIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), _ = C({
+  name: "ResetIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), ve = C({
+  name: "FullscreenIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      e("path", {
+        d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      })
+    );
+  }
+}), fe = C({
+  name: "FullscreenExitIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      e("path", {
+        d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+      })
+    );
+  }
+}), J = C({
+  name: "DownloadIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      e("path", {
+        d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+      })
+    );
+  }
+}), pe = C({
+  name: "CloseIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), he = C({
+  name: "CopyIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      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"
+      })
+    );
+  }
+}), ye = C({
+  name: "CheckIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      e("path", {
+        d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+      })
+    );
+  }
+});
+C({
+  name: "FitIcon",
+  setup() {
+    return () => e(
+      "svg",
+      { viewBox: "0 0 24 24", fill: "currentColor" },
+      e("path", {
+        d: "M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"
+      })
+    );
+  }
+});
+const ge = C({
+  name: "MermaidFullscreenViewer",
+  props: {
+    svg: {
+      type: String,
+      required: !0
+    },
+    open: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["close", "download"],
+  setup(t, { emit: n }) {
+    const l = h(null), s = h(null), o = h(null), a = h(!1), {
+      state: r,
+      zoomIn: c,
+      zoomOut: u,
+      reset: d,
+      fitToContainer: v,
+      canZoomIn: y,
+      canZoomOut: m,
+      contentStyle: i,
+      onMouseDown: p,
+      onWheel: k,
+      onDoubleClick: f
+    } = W({
+      enableDrag: !0,
+      enableWheelZoom: !0
+    }), I = async () => {
+      if (l.value)
+        try {
+          await l.value.requestFullscreen(), a.value = !0;
+        } catch {
+          a.value = !0;
+        }
+    }, x = () => {
+      document.fullscreenElement && document.exitFullscreen().catch(() => {
+      }), a.value = !1, n("close");
+    };
+    H(
+      () => t.open,
+      (N) => {
+        N ? I() : a.value && x();
+      }
+    );
+    const b = () => {
+      !document.fullscreenElement && a.value && (a.value = !1, n("close"));
+    }, w = (N) => {
+      if (a.value)
+        switch (N.key) {
+          case "+":
+          case "=":
+            c();
+            break;
+          case "-":
+            u();
+            break;
+          case "0":
+            d();
+            break;
+        }
+    };
+    $(() => {
+      document.addEventListener("fullscreenchange", b), document.addEventListener("keydown", w);
+    }), F(() => {
+      document.removeEventListener("fullscreenchange", b), document.removeEventListener("keydown", w);
+    });
+    const S = () => {
+      if (!s.value || !o.value) return;
+      const N = s.value.getBoundingClientRect(), g = o.value.querySelector("svg");
+      if (g) {
+        const z = g.getBoundingClientRect();
+        v(N, z);
+      }
+    };
+    return () => e(
+      "div",
+      {
+        ref: l,
+        class: [
+          "md-mermaid-fullscreen-wrapper",
+          a.value && "md-mermaid-fullscreen-wrapper--active"
+        ],
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Mermaid 图表全屏预览",
+        "aria-hidden": !a.value
+      },
+      a.value ? [
+        // 工具栏
+        e("div", { class: "md-mermaid-fullscreen-toolbar" }, [
+          e("div", { class: "md-mermaid-toolbar-group" }, [
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: u,
+                disabled: !m.value,
+                title: "缩小 (-)",
+                "aria-label": "缩小"
+              },
+              e(G)
+            ),
+            e(
+              "span",
+              { class: "md-mermaid-zoom-label" },
+              `${Math.round(r.value.scale * 100)}%`
+            ),
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: c,
+                disabled: !y.value,
+                title: "放大 (+)",
+                "aria-label": "放大"
+              },
+              e(K)
+            ),
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: d,
+                title: "重置 (0)",
+                "aria-label": "重置"
+              },
+              e(_)
+            ),
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: S,
+                title: "适应窗口",
+                "aria-label": "适应窗口"
+              },
+              e(fe)
+            )
+          ]),
+          e("div", { class: "md-mermaid-toolbar-group" }, [
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: () => n("download"),
+                title: "下载 PNG",
+                "aria-label": "下载"
+              },
+              e(J)
+            ),
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: x,
+                title: "退出全屏 (Esc)",
+                "aria-label": "退出全屏"
+              },
+              e(pe)
+            )
+          ])
+        ]),
+        // 内容区域
+        e(
+          "div",
+          {
+            ref: s,
+            class: "md-mermaid-fullscreen-content",
+            onWheel: k
+          },
+          e("div", {
+            ref: o,
+            class: "md-mermaid-fullscreen-svg",
+            style: i.value,
+            onMousedown: p,
+            onDblclick: f,
+            innerHTML: t.svg
+          })
+        )
+      ] : void 0
+    );
+  }
+});
+let E = null;
+function be(t = "auto") {
+  return E ? E.setTheme(t ?? "auto") : E = new ne({ theme: t }), E;
+}
+async function Ce(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 we = C({
+  name: "MermaidBlock",
+  props: {
+    code: {
+      type: String,
+      required: !0
+    },
+    theme: {
+      type: String,
+      default: "auto"
+    },
+    showToolbar: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["copy"],
+  setup(t, { emit: n }) {
+    const l = h("preview"), s = h(null), o = h(!0), a = h(!1), r = h(!1), c = h(te()), {
+      state: u,
+      zoomIn: d,
+      zoomOut: v,
+      reset: y,
+      canZoomIn: m,
+      canZoomOut: i,
+      contentStyle: p
+    } = W(), k = B(
+      () => {
+        var b;
+        return ((b = s.value) == null ? void 0 : b.success) && s.value.svg;
+      }
+    );
+    let f = null;
+    $(() => {
+      t.theme === "auto" && (f = ae((b) => {
+        c.value = b;
+      }));
+    }), F(() => {
+      f == null || f();
+    }), H(
+      () => [t.code, t.theme, c.value],
+      async () => {
+        o.value = !0;
+        const w = await be(t.theme).render(t.code);
+        s.value = w, o.value = !1, w.success || (l.value = "code");
+      },
+      { immediate: !0 }
+    );
+    const I = async () => {
+      await Ce(t.code) && (r.value = !0, n("copy", t.code), setTimeout(() => r.value = !1, 2e3));
+    }, x = async () => {
+      var b, w;
+      if ((b = s.value) != null && b.svg)
+        try {
+          const S = ((w = window.matchMedia) == null ? void 0 : w.call(window, "(prefers-color-scheme: dark)").matches) ?? !1;
+          await le(s.value.svg, {
+            backgroundColor: S ? "#1a1a2e" : "#ffffff",
+            padding: 20,
+            scale: 2
+          });
+        } catch (S) {
+          console.error("Download failed:", S);
+        }
+    };
+    return () => {
+      const b = t.showToolbar ? e("div", { class: "md-mermaid-toolbar" }, [
+        // 模式切换
+        e("div", { class: "md-mermaid-toolbar-group md-mermaid-mode-switch" }, [
+          e(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${l.value === "preview" ? " md-mermaid-toolbar-btn--active" : ""}`,
+              onClick: () => l.value = "preview",
+              disabled: !k.value,
+              title: "图片模式",
+              "aria-label": "图片模式"
+            },
+            e(de)
+          ),
+          e(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${l.value === "code" ? " md-mermaid-toolbar-btn--active" : ""}`,
+              onClick: () => l.value = "code",
+              title: "代码模式",
+              "aria-label": "代码模式"
+            },
+            e(me)
+          )
+        ]),
+        // 缩放控制 - 仅图片模式显示
+        l.value === "preview" && k.value ? e("div", { class: "md-mermaid-toolbar-group" }, [
+          e(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: v,
+              disabled: !i.value,
+              title: "缩小",
+              "aria-label": "缩小"
+            },
+            e(G)
+          ),
+          e(
+            "span",
+            { class: "md-mermaid-zoom-label" },
+            `${Math.round(u.value.scale * 100)}%`
+          ),
+          e(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: d,
+              disabled: !m.value,
+              title: "放大",
+              "aria-label": "放大"
+            },
+            e(K)
+          ),
+          e(
+            "button",
+            {
+              type: "button",
+              class: "md-mermaid-toolbar-btn",
+              onClick: y,
+              title: "重置",
+              "aria-label": "重置缩放"
+            },
+            e(_)
+          )
+        ]) : null,
+        // 操作按钮
+        e("div", { class: "md-mermaid-toolbar-group" }, [
+          l.value === "preview" && k.value ? [
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: () => a.value = !0,
+                title: "全屏",
+                "aria-label": "全屏查看"
+              },
+              e(ve)
+            ),
+            e(
+              "button",
+              {
+                type: "button",
+                class: "md-mermaid-toolbar-btn",
+                onClick: x,
+                title: "下载 PNG",
+                "aria-label": "下载"
+              },
+              e(J)
+            )
+          ] : null,
+          l.value === "code" ? e(
+            "button",
+            {
+              type: "button",
+              class: `md-mermaid-toolbar-btn${r.value ? " md-mermaid-toolbar-btn--success" : ""}`,
+              onClick: I,
+              title: r.value ? "已复制" : "复制代码",
+              "aria-label": r.value ? "已复制" : "复制代码"
+            },
+            r.value ? e(ye) : e(he)
+          ) : null
+        ])
+      ]) : null;
+      let w;
+      return o.value ? w = e("div", { class: "md-mermaid-skeleton" }, [
+        e("div", { class: "md-mermaid-skeleton-box" })
+      ]) : l.value === "preview" && k.value ? w = e("div", { class: "md-mermaid-preview", style: { overflow: "hidden" } }, [
+        e("div", {
+          class: "md-mermaid-svg-container",
+          style: p.value,
+          innerHTML: s.value.svg
+        })
+      ]) : w = e("div", { class: "md-mermaid-code" }, [
+        e("pre", [e("code", { class: "language-mermaid" }, t.code)]),
+        s.value && !s.value.success ? e("div", { class: "md-mermaid-error" }, [
+          e("span", "渲染失败: "),
+          e("span", s.value.error)
+        ]) : null
+      ]), e("div", { class: "md-mermaid-block" }, [
+        b,
+        e("div", { class: "md-mermaid-content" }, [w]),
+        // 全屏查看器
+        k.value ? e(ge, {
+          svg: s.value.svg,
+          open: a.value,
+          onClose: () => a.value = !1,
+          onDownload: x
+        }) : null
+      ]);
+    };
+  }
+});
+function ke(t) {
+  var s;
+  if (t.tagName !== "pre") return !1;
+  const n = t.children.find(
+    (o) => o.type === "element" && o.tagName === "code"
+  );
+  if (!n) return !1;
+  const l = (s = n.properties) == null ? void 0 : s.className;
+  return Array.isArray(l) ? l.some((o) => typeof o == "string" && o.includes("language-mermaid")) : typeof l == "string" && l.includes("language-mermaid");
+}
+function xe(t) {
+  const n = t.children.find(
+    (l) => l.type === "element" && l.tagName === "code"
+  );
+  return n ? n.children.map((l) => l.type === "text" ? l.value : "").join("") : "";
+}
+function Me(t) {
+  return t ? t === !0 ? { enabled: !0 } : t.enabled !== !1 ? t : null : null;
+}
+const Q = C({
   name: "Markdown",
   props: {
     content: {
@@ -131,177 +787,190 @@ const L = A({
     copyButton: {
       type: Boolean,
       default: !0
+    },
+    mermaid: {
+      type: [Boolean, Object],
+      default: !1
     }
   },
   emits: ["codeCopy"],
-  setup(e, { emit: t }) {
-    w(
-      () => e.math,
-      (u) => {
-        u && R();
+  setup(t, { emit: n }) {
+    H(
+      () => t.math,
+      (o) => {
+        o && Y();
       },
       { immediate: !0 }
     );
-    function l(u, r = {}) {
-      if (u.type === "text")
-        return u.value;
-      if (u.type === "comment")
+    function l(o, a = {}, r = null) {
+      if (o.type === "text")
+        return o.value;
+      if (o.type === "comment")
         return null;
-      if (u.type === "root") {
-        const n = u.children.map((s) => l(s, r)).filter((s) => s !== null);
-        return f("div", { class: e.class }, n);
+      if (o.type === "root") {
+        const c = o.children.map((u) => l(u, a, r)).filter((u) => u !== null);
+        return e("div", { class: t.class }, c);
       }
-      if (u.type === "element") {
-        const { tagName: n, properties: s, children: o } = u, m = r[n] || n, d = {};
-        if (s)
-          for (const [i, c] of Object.entries(s))
-            i === "className" ? d.class = Array.isArray(c) ? c.join(" ") : c : d[i] = c;
-        const v = o.map((i) => l(i, r)).filter((i) => i !== null);
-        return typeof m == "string" ? f(m, d, v) : f(m, d, () => v);
+      if (o.type === "element") {
+        const { tagName: c, properties: u, children: d } = o;
+        if (r && ke(o)) {
+          const i = xe(o);
+          return e(we, {
+            code: i,
+            theme: r.theme,
+            onCopy: (p) => n("codeCopy", p)
+          });
+        }
+        const v = a[c] || c, y = {};
+        if (u)
+          for (const [i, p] of Object.entries(u))
+            i === "className" ? y.class = Array.isArray(p) ? p.join(" ") : p : y[i] = p;
+        const m = d.map((i) => l(i, a, r)).filter((i) => i !== null);
+        return typeof v == "string" ? e(v, y, m) : e(v, y, () => m);
       }
       return null;
     }
-    const a = B(() => {
-      if (!e.content) return null;
-      const u = P(e.content, {
-        gfm: e.gfm,
-        highlight: e.highlight,
-        math: e.math,
-        remarkPlugins: e.remarkPlugins,
-        rehypePlugins: e.rehypePlugins
-      }), r = {
-        ...e.copyButton ? {
-          pre: A({
-            setup(n, { slots: s }) {
-              return () => f(
-                L,
+    const s = B(() => {
+      if (!t.content) return null;
+      const o = j(t.content, {
+        gfm: t.gfm,
+        highlight: t.highlight,
+        math: t.math,
+        remarkPlugins: t.remarkPlugins,
+        rehypePlugins: t.rehypePlugins
+      }), a = Me(t.mermaid), r = {
+        ...t.copyButton ? {
+          pre: C({
+            setup(c, { slots: u }) {
+              return () => e(
+                q,
                 {
-                  showCopyButton: e.copyButton,
-                  onCopy: (o) => t("codeCopy", o)
+                  showCopyButton: t.copyButton,
+                  onCopy: (d) => n("codeCopy", d)
                 },
-                s.default
+                u.default
               );
             }
           })
         } : {},
-        ...e.components
+        ...t.components
       };
-      return l(u, r);
+      return l(o, r, a);
     });
-    return () => a.value ? a.value : null;
+    return () => s.value ? s.value : null;
   }
 });
-function j(e, t) {
-  if (e.type === "text")
-    return e.value;
-  if (e.type === "root") {
-    const l = e.children.map((a) => j(a, t)).filter((a) => a !== null);
-    return f("div", {}, l);
+function D(t, n) {
+  if (t.type === "text")
+    return t.value;
+  if (t.type === "root") {
+    const l = t.children.map((s) => D(s, n)).filter((s) => s !== null);
+    return e("div", {}, l);
   }
-  if (e.type === "element") {
-    const l = e, a = l.tagName, u = t == null ? void 0 : t[a], r = { ...l.properties };
-    r.className && (r.class = Array.isArray(r.className) ? r.className.join(" ") : r.className, delete r.className);
-    const n = l.children.map((s) => j(s, t)).filter((s) => s !== null);
-    return u ? f(u, r, () => n) : f(a, r, n);
+  if (t.type === "element") {
+    const l = t, s = l.tagName, o = n == null ? void 0 : n[s], a = { ...l.properties };
+    a.className && (a.class = Array.isArray(a.className) ? a.className.join(" ") : a.className, delete a.className);
+    const r = l.children.map((c) => D(c, n)).filter((c) => c !== null);
+    return o ? e(o, a, () => r) : e(s, a, r);
   }
   return null;
 }
-function ae(e = {}) {
+function Ne(t = {}) {
   const {
-    components: t,
+    components: n,
     minUpdateInterval: l = 16,
-    immediate: a = !1,
-    outputRate: u = "medium",
-    ...r
-  } = e, n = F(r), s = new O(u), o = h(0), m = h(!1), d = h(0), v = h("idle");
-  let i = 0, c = null;
-  const y = () => {
-    const g = performance.now(), N = g - i;
-    a || N >= l ? (i = g, o.value++) : c === null && (c = requestAnimationFrame(() => {
-      c = null, i = performance.now(), o.value++;
+    immediate: s = !1,
+    outputRate: o = "medium",
+    ...a
+  } = t, r = P(a), c = new U(o), u = h(0), d = h(!1), v = h(0), y = h("idle");
+  let m = 0, i = null;
+  const p = () => {
+    const M = performance.now(), V = M - m;
+    s || V >= l ? (m = M, u.value++) : i === null && (i = requestAnimationFrame(() => {
+      i = null, m = performance.now(), u.value++;
     }));
-  }, k = (g) => {
-    n.append(g), y();
-  }, p = (g) => {
-    n.reset(), m.value = !1, d.value = 0, v.value = "running", s.start(
-      g,
-      (N) => {
-        N && n.append(N), d.value = s.progress, y();
+  }, k = (M) => {
+    r.append(M), p();
+  }, f = (M) => {
+    r.reset(), d.value = !1, v.value = 0, y.value = "running", c.start(
+      M,
+      (V) => {
+        V && r.append(V), v.value = c.progress, p();
       },
       () => {
-        n.finish(), m.value = !0, d.value = 1, v.value = "complete", y();
+        r.finish(), d.value = !0, v.value = 1, y.value = "complete", p();
       }
     );
-  }, S = () => {
-    s.pause(), v.value = s.status;
+  }, I = () => {
+    c.pause(), y.value = c.status;
+  }, x = () => {
+    c.resume(), y.value = c.status;
   }, b = () => {
-    s.resume(), v.value = s.status;
-  }, H = () => {
-    s.skipToEnd(), v.value = s.status, d.value = 1;
-  }, q = () => {
-    s.stop(), n.finish(), m.value = !0, v.value = "complete", c !== null && (cancelAnimationFrame(c), c = null), o.value++;
-  }, K = () => {
-    s.stop(), n.reset(), m.value = !1, d.value = 0, v.value = "idle", c !== null && (cancelAnimationFrame(c), c = null), o.value++;
+    c.skipToEnd(), y.value = c.status, v.value = 1;
+  }, w = () => {
+    c.stop(), r.finish(), d.value = !0, y.value = "complete", i !== null && (cancelAnimationFrame(i), i = null), u.value++;
+  }, S = () => {
+    c.stop(), r.reset(), d.value = !1, v.value = 0, y.value = "idle", i !== null && (cancelAnimationFrame(i), i = null), u.value++;
   };
-  U(() => {
-    s.stop(), c !== null && cancelAnimationFrame(c);
+  F(() => {
+    c.stop(), i !== null && cancelAnimationFrame(i);
   });
-  const $ = B(() => (o.value, n.getState().blocks)), W = B(() => (o.value, n.getStats())), _ = B(() => (o.value, n.getContent()));
+  const N = B(() => (u.value, r.getState().blocks)), g = B(() => (u.value, r.getStats())), z = B(() => (u.value, r.getContent()));
   return {
     vnode: B(() => {
-      o.value;
-      const g = n.getState();
-      if (g.blocks.length === 0)
+      u.value;
+      const M = r.getState();
+      if (M.blocks.length === 0)
         return null;
-      const N = g.blocks.map((C) => C.hast ? f(
+      const V = M.blocks.map((L) => L.hast ? e(
         "div",
         {
-          key: C.key,
-          "data-block-key": C.key,
-          "data-pending": !C.stable || void 0
+          key: L.key,
+          "data-block-key": L.key,
+          "data-pending": !L.stable || void 0
         },
-        [j(C.hast, t)]
-      ) : null).filter((C) => C !== null);
-      return f("div", { "data-streaming": !m.value }, N);
+        [D(L.hast, n)]
+      ) : null).filter((L) => L !== null);
+      return e("div", { "data-streaming": !d.value }, V);
     }),
     append: k,
-    start: p,
-    pause: S,
-    resume: b,
-    skipToEnd: H,
-    reset: K,
-    finish: q,
-    blocks: $,
-    stats: W,
-    isComplete: m,
-    content: _,
-    progress: d,
-    outputStatus: v
+    start: f,
+    pause: I,
+    resume: x,
+    skipToEnd: b,
+    reset: S,
+    finish: w,
+    blocks: N,
+    stats: g,
+    isComplete: d,
+    content: z,
+    progress: v,
+    outputStatus: y
   };
 }
-function V(e, t, l, a, u) {
-  if (e.type === "text")
-    return e.value;
-  if (e.type === "root") {
-    const r = e.children.map((n) => V(n, t, l, a, u)).filter((n) => n !== null);
-    return f("div", {}, r);
+function R(t, n, l, s, o) {
+  if (t.type === "text")
+    return t.value;
+  if (t.type === "root") {
+    const a = t.children.map((r) => R(r, n, l, s, o)).filter((r) => r !== null);
+    return e("div", {}, a);
   }
-  if (e.type === "element") {
-    const r = e, n = r.tagName, s = t == null ? void 0 : t[n], o = { ...r.properties };
-    o.className && (o.class = Array.isArray(o.className) ? o.className.join(" ") : o.className, delete o.className);
-    const m = r.children.map((d) => V(d, t, l, a, u)).filter((d) => d !== null);
-    return n === "pre" && l && !s ? f(
-      L,
+  if (t.type === "element") {
+    const a = t, r = a.tagName, c = n == null ? void 0 : n[r], u = { ...a.properties };
+    u.className && (u.class = Array.isArray(u.className) ? u.className.join(" ") : u.className, delete u.className);
+    const d = a.children.map((v) => R(v, n, l, s, o)).filter((v) => v !== null);
+    return r === "pre" && l && !c ? e(
+      q,
       {
-        showCopyButton: u && l,
-        onCopy: a
+        showCopyButton: o && l,
+        onCopy: s
       },
-      () => m
-    ) : s ? f(s, o, () => m) : f(n, o, m);
+      () => d
+    ) : c ? e(c, u, () => d) : e(r, u, d);
   }
   return null;
 }
-const E = A({
+const ee = C({
   name: "StreamingMarkdown",
   props: {
     content: {
@@ -354,139 +1023,142 @@ const E = A({
     }
   },
   emits: ["complete", "blockStable", "progress", "codeCopy"],
-  setup(e, { emit: t }) {
-    w(
-      () => e.math,
-      (i) => {
-        i && R();
+  setup(t, { emit: n }) {
+    H(
+      () => t.math,
+      (m) => {
+        m && Y();
       },
       { immediate: !0 }
     );
-    const l = F({
-      gfm: e.gfm,
-      highlight: e.highlight,
-      math: e.math
-    }), a = new O(e.outputRate), u = h(0), r = h(""), n = h(void 0), s = h([]), o = h(!1);
-    let m = 0, d = null;
-    const v = () => {
-      const i = performance.now();
-      i - m >= e.minUpdateInterval ? (m = i, u.value++) : d === null && (d = requestAnimationFrame(() => {
-        d = null, m = performance.now(), u.value++;
+    const l = P({
+      gfm: t.gfm,
+      highlight: t.highlight,
+      math: t.math
+    }), s = new U(t.outputRate), o = h(0), a = h(""), r = h(void 0), c = h([]), u = h(!1);
+    let d = 0, v = null;
+    const y = () => {
+      const m = performance.now();
+      m - d >= t.minUpdateInterval ? (d = m, o.value++) : v === null && (v = requestAnimationFrame(() => {
+        v = null, d = performance.now(), o.value++;
       }));
     };
-    return w(
-      () => e.source,
-      (i) => {
-        i !== void 0 && i !== n.value && (n.value = i, e.autoStart && i && (l.reset(), r.value = "", o.value = !1, a.start(
-          i,
-          (c) => {
-            c && (l.append(c), r.value += c), t("progress", a.progress), v();
+    return H(
+      () => t.source,
+      (m) => {
+        m !== void 0 && m !== r.value && (r.value = m, t.autoStart && m && (l.reset(), a.value = "", u.value = !1, s.start(
+          m,
+          (i) => {
+            i && (l.append(i), a.value += i), n("progress", s.progress), y();
           },
           () => {
-            l.finish(), o.value = !0, t("complete"), v();
+            l.finish(), u.value = !0, n("complete"), y();
           }
         )));
       },
       { immediate: !0 }
-    ), w(
-      () => e.content,
-      (i) => {
-        if (e.source !== void 0)
+    ), H(
+      () => t.content,
+      (m) => {
+        if (t.source !== void 0)
           return;
-        const c = r.value, y = i || "";
-        if (y !== c) {
-          if (y.startsWith(c)) {
-            const p = y.slice(c.length);
-            p && l.append(p);
+        const i = a.value, p = m || "";
+        if (p !== i) {
+          if (p.startsWith(i)) {
+            const f = p.slice(i.length);
+            f && l.append(f);
           } else
-            l.reset(), y && l.append(y);
-          r.value = y, v();
+            l.reset(), p && l.append(p);
+          a.value = p, y();
           const k = l.getState().blocks;
-          k.forEach((p, S) => {
-            const b = s.value[S];
-            p.stable && (!b || !b.stable) && t("blockStable", p);
-          }), s.value = k;
+          k.forEach((f, I) => {
+            const x = c.value[I];
+            f.stable && (!x || !x.stable) && n("blockStable", f);
+          }), c.value = k;
         }
       },
       { immediate: !0 }
-    ), w(
-      () => e.isComplete,
-      (i) => {
-        e.source === void 0 && i && (l.finish(), d !== null && (cancelAnimationFrame(d), d = null), u.value++, t("complete"));
+    ), H(
+      () => t.isComplete,
+      (m) => {
+        t.source === void 0 && m && (l.finish(), v !== null && (cancelAnimationFrame(v), v = null), o.value++, n("complete"));
       }
-    ), w(
-      () => e.outputRate,
-      (i) => {
-        a.setRate(i);
+    ), H(
+      () => t.outputRate,
+      (m) => {
+        s.setRate(m);
       }
-    ), U(() => {
-      a.stop(), d !== null && cancelAnimationFrame(d);
+    ), F(() => {
+      s.stop(), v !== null && cancelAnimationFrame(v);
     }), () => {
-      u.value;
-      const i = l.getState(), c = e.source !== void 0 ? o.value : e.isComplete, y = (p) => t("codeCopy", p), k = i.blocks.map((p) => p.hast ? f(
+      o.value;
+      const m = l.getState(), i = t.source !== void 0 ? u.value : t.isComplete, p = (f) => n("codeCopy", f), k = m.blocks.map((f) => f.hast ? e(
         "div",
         {
-          key: p.key,
-          "data-block-key": p.key,
-          "data-pending": !p.stable || void 0
+          key: f.key,
+          "data-block-key": f.key,
+          "data-pending": !f.stable || void 0
         },
-        [V(p.hast, e.components, e.copyButton, y, p.stable)]
-      ) : null).filter((p) => p !== null);
-      return f(
+        [R(f.hast, t.components, t.copyButton, p, f.stable)]
+      ) : null).filter((f) => f !== null);
+      return e(
         "div",
         {
-          class: e.class,
-          "data-streaming": !c
+          class: t.class,
+          "data-streaming": !i
         },
         k
       );
     };
   }
 });
-function M(e, t = {}) {
-  if (e.type === "text")
-    return e.value;
-  if (e.type === "comment")
+function Z(t, n = {}) {
+  if (t.type === "text")
+    return t.value;
+  if (t.type === "comment")
     return null;
-  if (e.type === "root") {
-    const l = e.children.map((a) => M(a, t)).filter((a) => a !== null);
-    return f("div", {}, l);
+  if (t.type === "root") {
+    const l = t.children.map((s) => Z(s, n)).filter((s) => s !== null);
+    return e("div", {}, l);
   }
-  if (e.type === "element") {
-    const { tagName: l, properties: a, children: u } = e, r = t[l] || l, n = {};
-    if (a)
-      for (const [o, m] of Object.entries(a))
-        o === "className" ? n.class = Array.isArray(m) ? m.join(" ") : m : n[o] = m;
-    const s = u.map((o) => M(o, t)).filter((o) => o !== null);
-    return f(r, n, () => s);
+  if (t.type === "element") {
+    const { tagName: l, properties: s, children: o } = t, a = n[l] || l, r = {};
+    if (s)
+      for (const [u, d] of Object.entries(s))
+        u === "className" ? r.class = Array.isArray(d) ? d.join(" ") : d : r[u] = d;
+    const c = o.map((u) => Z(u, n)).filter((u) => u !== null);
+    return e(a, r, () => c);
   }
   return null;
 }
-function re(e, t = {}) {
-  const { components: l = {}, ...a } = t;
+function Ve(t, n = {}) {
+  const { components: l = {}, ...s } = n;
   return B(() => {
-    const u = e();
-    if (!u) return null;
-    const r = P(u, a);
-    return M(r, l);
+    const o = t();
+    if (!o) return null;
+    const a = j(o, s);
+    return Z(a, l);
   });
 }
-function Y(e) {
-  e.component("Markdown", z), e.component("StreamingMarkdown", E);
+function ze(t) {
+  t.component("Markdown", Q), t.component("StreamingMarkdown", ee);
 }
-const le = {
-  install: Y,
-  Markdown: z,
-  StreamingMarkdown: E
+const He = {
+  install: ze,
+  Markdown: Q,
+  StreamingMarkdown: ee
 };
 export {
-  L as CodeBlock,
-  z as Markdown,
-  E as StreamingMarkdown,
-  le as default,
-  Y as install,
-  ne as isKatexCssLoaded,
-  R as preloadKatexCss,
-  re as useMarkdown,
-  ae as useStreamingMarkdown
+  q as CodeBlock,
+  Q as Markdown,
+  we as MermaidBlock,
+  ge as MermaidFullscreenViewer,
+  ee as StreamingMarkdown,
+  He as default,
+  ze as install,
+  Se as isKatexCssLoaded,
+  Y as preloadKatexCss,
+  Ve as useMarkdown,
+  Ne as useStreamingMarkdown,
+  W as useZoom
 };