@superlc/md-vue 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,19 +1,755 @@
-import { defineComponent as M, watch as S, computed as A, h as p, ref as y, onUnmounted as O } from "vue";
-import { parseToHast as F, createStreamingParser as T, OutputRateController as R } from "@superlc/md-core";
-let B = !1, b = null;
-async function z() {
-  if (!B)
-    return b || (b = (async () => {
-      await import("katex/dist/katex.min.css"), B = !0;
-    })(), b);
+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 X() {
-  return B;
+function Se() {
+  return O;
 }
-function V() {
-  return z();
+function Y() {
+  return oe();
 }
-const q = M({
+async function re(t) {
+  try {
+    return await navigator.clipboard.writeText(t), !0;
+  } catch {
+    return se(t);
+  }
+}
+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(n);
+  }
+}
+const ue = () => 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"
+    })
+  ]
+), ce = () => 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"
+    })
+  ]
+);
+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 q = C({
+  name: "CodeBlock",
+  props: {
+    showCopyButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["copy"],
+  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 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${s.value ? " md-copy-button--copied" : ""}`,
+            onClick: o,
+            title: s.value ? "已复制" : "复制代码",
+            "aria-label": s.value ? "已复制" : "复制代码"
+          },
+          [s.value ? e(ce) : e(ue)]
+        )
+      ]);
+    };
+  }
+}), 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: {
@@ -47,153 +783,194 @@ const q = M({
     rehypePlugins: {
       type: Array,
       default: () => []
+    },
+    copyButton: {
+      type: Boolean,
+      default: !0
+    },
+    mermaid: {
+      type: [Boolean, Object],
+      default: !1
     }
   },
-  setup(e) {
-    S(
-      () => e.math,
-      (t) => {
-        t && V();
+  emits: ["codeCopy"],
+  setup(t, { emit: n }) {
+    H(
+      () => t.math,
+      (o) => {
+        o && Y();
       },
       { immediate: !0 }
     );
-    function r(t, c = {}) {
-      if (t.type === "text")
-        return t.value;
-      if (t.type === "comment")
+    function l(o, a = {}, r = null) {
+      if (o.type === "text")
+        return o.value;
+      if (o.type === "comment")
         return null;
-      if (t.type === "root") {
-        const a = t.children.map((l) => r(l, c)).filter((l) => l !== null);
-        return p("div", { class: e.class }, a);
+      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 (t.type === "element") {
-        const { tagName: a, properties: l, children: i } = t, u = c[a] || a, f = {};
-        if (l)
-          for (const [m, s] of Object.entries(l))
-            m === "className" ? f.class = Array.isArray(s) ? s.join(" ") : s : f[m] = s;
-        const d = i.map((m) => r(m, c)).filter((m) => m !== null);
-        return typeof u == "string" ? p(u, f, d) : p(u, f, () => d);
+      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 n = A(() => {
-      if (!e.content) return null;
-      const t = F(e.content, {
-        gfm: e.gfm,
-        highlight: e.highlight,
-        math: e.math,
-        remarkPlugins: e.remarkPlugins,
-        rehypePlugins: e.rehypePlugins
-      });
-      return r(t, e.components);
+    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: t.copyButton,
+                  onCopy: (d) => n("codeCopy", d)
+                },
+                u.default
+              );
+            }
+          })
+        } : {},
+        ...t.components
+      };
+      return l(o, r, a);
     });
-    return () => n.value ? n.value : null;
+    return () => s.value ? s.value : null;
   }
 });
-function U(e, r) {
-  if (e.type === "text")
-    return e.value;
-  if (e.type === "root") {
-    const n = e.children.map((t) => U(t, r)).filter((t) => t !== null);
-    return p("div", {}, n);
+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 n = e, t = n.tagName, c = r == null ? void 0 : r[t], a = { ...n.properties };
+  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 l = n.children.map((i) => U(i, r)).filter((i) => i !== null);
-    return c ? p(c, a, () => l) : p(t, a, l);
+    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 Y(e = {}) {
+function Ne(t = {}) {
   const {
-    components: r,
-    minUpdateInterval: n = 16,
-    immediate: t = !1,
-    outputRate: c = "medium",
+    components: n,
+    minUpdateInterval: l = 16,
+    immediate: s = !1,
+    outputRate: o = "medium",
     ...a
-  } = e, l = T(a), i = new R(c), u = y(0), f = y(!1), d = y(0), m = y("idle");
-  let s = 0, o = null;
-  const v = () => {
-    const h = performance.now(), C = h - s;
-    t || C >= n ? (s = h, u.value++) : o === null && (o = requestAnimationFrame(() => {
-      o = null, s = performance.now(), u.value++;
+  } = 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++;
     }));
-  }, g = (h) => {
-    l.append(h), v();
-  }, k = (h) => {
-    l.reset(), f.value = !1, d.value = 0, m.value = "running", i.start(
-      h,
-      (C) => {
-        C && l.append(C), d.value = i.progress, v();
+  }, 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();
       },
       () => {
-        l.finish(), f.value = !0, d.value = 1, m.value = "complete", v();
+        r.finish(), d.value = !0, v.value = 1, y.value = "complete", p();
       }
     );
+  }, I = () => {
+    c.pause(), y.value = c.status;
   }, x = () => {
-    i.pause(), m.value = i.status;
+    c.resume(), y.value = c.status;
+  }, b = () => {
+    c.skipToEnd(), y.value = c.status, v.value = 1;
   }, w = () => {
-    i.resume(), m.value = i.status;
-  }, I = () => {
-    i.skipToEnd(), m.value = i.status, d.value = 1;
-  }, K = () => {
-    i.stop(), l.finish(), f.value = !0, m.value = "complete", o !== null && (cancelAnimationFrame(o), o = null), u.value++;
-  }, L = () => {
-    i.stop(), l.reset(), f.value = !1, d.value = 0, m.value = "idle", o !== null && (cancelAnimationFrame(o), o = null), u.value++;
+    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++;
   };
-  O(() => {
-    i.stop(), o !== null && cancelAnimationFrame(o);
+  F(() => {
+    c.stop(), i !== null && cancelAnimationFrame(i);
   });
-  const $ = A(() => (u.value, l.getState().blocks)), H = A(() => (u.value, l.getStats())), W = A(() => (u.value, l.getContent()));
+  const N = B(() => (u.value, r.getState().blocks)), g = B(() => (u.value, r.getStats())), z = B(() => (u.value, r.getContent()));
   return {
-    vnode: A(() => {
+    vnode: B(() => {
       u.value;
-      const h = l.getState();
-      if (h.blocks.length === 0)
+      const M = r.getState();
+      if (M.blocks.length === 0)
         return null;
-      const C = h.blocks.map((N) => N.hast ? p(
+      const V = M.blocks.map((L) => L.hast ? e(
         "div",
         {
-          key: N.key,
-          "data-block-key": N.key,
-          "data-pending": !N.stable || void 0
+          key: L.key,
+          "data-block-key": L.key,
+          "data-pending": !L.stable || void 0
         },
-        [U(N.hast, r)]
-      ) : null).filter((N) => N !== null);
-      return p("div", { "data-streaming": !f.value }, C);
+        [D(L.hast, n)]
+      ) : null).filter((L) => L !== null);
+      return e("div", { "data-streaming": !d.value }, V);
     }),
-    append: g,
-    start: k,
-    pause: x,
-    resume: w,
-    skipToEnd: I,
-    reset: L,
-    finish: K,
-    blocks: $,
-    stats: H,
-    isComplete: f,
-    content: W,
-    progress: d,
-    outputStatus: m
+    append: k,
+    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 j(e, r) {
-  if (e.type === "text")
-    return e.value;
-  if (e.type === "root") {
-    const n = e.children.map((t) => j(t, r)).filter((t) => t !== null);
-    return p("div", {}, n);
+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 n = e, t = n.tagName, c = r == null ? void 0 : r[t], a = { ...n.properties };
-    a.className && (a.class = Array.isArray(a.className) ? a.className.join(" ") : a.className, delete a.className);
-    const l = n.children.map((i) => j(i, r)).filter((i) => i !== null);
-    return c ? p(c, a, () => l) : p(t, a, 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: o && l,
+        onCopy: s
+      },
+      () => d
+    ) : c ? e(c, u, () => d) : e(r, u, d);
   }
   return null;
 }
-const E = M({
+const ee = C({
   name: "StreamingMarkdown",
   props: {
     content: {
@@ -239,141 +1016,149 @@ const E = M({
     math: {
       type: Boolean,
       default: !1
+    },
+    copyButton: {
+      type: Boolean,
+      default: !0
     }
   },
-  emits: ["complete", "blockStable", "progress"],
-  setup(e, { emit: r }) {
-    S(
-      () => e.math,
-      (s) => {
-        s && V();
+  emits: ["complete", "blockStable", "progress", "codeCopy"],
+  setup(t, { emit: n }) {
+    H(
+      () => t.math,
+      (m) => {
+        m && Y();
       },
       { immediate: !0 }
     );
-    const n = T({
-      gfm: e.gfm,
-      highlight: e.highlight,
-      math: e.math
-    }), t = new R(e.outputRate), c = y(0), a = y(""), l = y(void 0), i = y([]), u = y(!1);
-    let f = 0, d = null;
-    const m = () => {
-      const s = performance.now();
-      s - f >= e.minUpdateInterval ? (f = s, c.value++) : d === null && (d = requestAnimationFrame(() => {
-        d = null, f = performance.now(), c.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 S(
-      () => e.source,
-      (s) => {
-        s !== void 0 && s !== l.value && (l.value = s, e.autoStart && s && (n.reset(), a.value = "", u.value = !1, t.start(
-          s,
-          (o) => {
-            o && (n.append(o), a.value += o), r("progress", t.progress), m();
+    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();
           },
           () => {
-            n.finish(), u.value = !0, r("complete"), m();
+            l.finish(), u.value = !0, n("complete"), y();
           }
         )));
       },
       { immediate: !0 }
-    ), S(
-      () => e.content,
-      (s) => {
-        if (e.source !== void 0)
+    ), H(
+      () => t.content,
+      (m) => {
+        if (t.source !== void 0)
           return;
-        const o = a.value, v = s || "";
-        if (v !== o) {
-          if (v.startsWith(o)) {
-            const k = v.slice(o.length);
-            k && n.append(k);
+        const i = a.value, p = m || "";
+        if (p !== i) {
+          if (p.startsWith(i)) {
+            const f = p.slice(i.length);
+            f && l.append(f);
           } else
-            n.reset(), v && n.append(v);
-          a.value = v, m();
-          const g = n.getState().blocks;
-          g.forEach((k, x) => {
-            const w = i.value[x];
-            k.stable && (!w || !w.stable) && r("blockStable", k);
-          }), i.value = g;
+            l.reset(), p && l.append(p);
+          a.value = p, y();
+          const k = l.getState().blocks;
+          k.forEach((f, I) => {
+            const x = c.value[I];
+            f.stable && (!x || !x.stable) && n("blockStable", f);
+          }), c.value = k;
         }
       },
       { immediate: !0 }
-    ), S(
-      () => e.isComplete,
-      (s) => {
-        e.source === void 0 && s && (n.finish(), d !== null && (cancelAnimationFrame(d), d = null), c.value++, r("complete"));
+    ), H(
+      () => t.isComplete,
+      (m) => {
+        t.source === void 0 && m && (l.finish(), v !== null && (cancelAnimationFrame(v), v = null), o.value++, n("complete"));
       }
-    ), S(
-      () => e.outputRate,
-      (s) => {
-        t.setRate(s);
+    ), H(
+      () => t.outputRate,
+      (m) => {
+        s.setRate(m);
       }
-    ), O(() => {
-      t.stop(), d !== null && cancelAnimationFrame(d);
+    ), F(() => {
+      s.stop(), v !== null && cancelAnimationFrame(v);
     }), () => {
-      c.value;
-      const s = n.getState(), o = e.source !== void 0 ? u.value : e.isComplete, v = s.blocks.map((g) => g.hast ? p(
+      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: g.key,
-          "data-block-key": g.key,
-          "data-pending": !g.stable || void 0
+          key: f.key,
+          "data-block-key": f.key,
+          "data-pending": !f.stable || void 0
         },
-        [j(g.hast, e.components)]
-      ) : null).filter((g) => g !== null);
-      return p(
+        [R(f.hast, t.components, t.copyButton, p, f.stable)]
+      ) : null).filter((f) => f !== null);
+      return e(
         "div",
         {
-          class: e.class,
-          "data-streaming": !o
+          class: t.class,
+          "data-streaming": !i
         },
-        v
+        k
       );
     };
   }
 });
-function P(e, r = {}) {
-  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 n = e.children.map((t) => P(t, r)).filter((t) => t !== null);
-    return p("div", {}, n);
+  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: n, properties: t, children: c } = e, a = r[n] || n, l = {};
-    if (t)
-      for (const [u, f] of Object.entries(t))
-        u === "className" ? l.class = Array.isArray(f) ? f.join(" ") : f : l[u] = f;
-    const i = c.map((u) => P(u, r)).filter((u) => u !== null);
-    return p(a, l, () => i);
+  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 Z(e, r = {}) {
-  const { components: n = {}, ...t } = r;
-  return A(() => {
-    const c = e();
-    if (!c) return null;
-    const a = F(c, t);
-    return P(a, n);
+function Ve(t, n = {}) {
+  const { components: l = {}, ...s } = n;
+  return B(() => {
+    const o = t();
+    if (!o) return null;
+    const a = j(o, s);
+    return Z(a, l);
   });
 }
-function D(e) {
-  e.component("Markdown", q), e.component("StreamingMarkdown", E);
+function ze(t) {
+  t.component("Markdown", Q), t.component("StreamingMarkdown", ee);
 }
-const _ = {
-  install: D,
-  Markdown: q,
-  StreamingMarkdown: E
+const He = {
+  install: ze,
+  Markdown: Q,
+  StreamingMarkdown: ee
 };
 export {
-  q as Markdown,
-  E as StreamingMarkdown,
-  _ as default,
-  D as install,
-  X as isKatexCssLoaded,
-  V as preloadKatexCss,
-  Z as useMarkdown,
-  Y 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
 };