@hejiayue/x-markdown-test 0.0.1-beta.107

package/dist/index-Ys7-7uFi.js

@@ -0,0 +1,1856 @@
+import { h, toValue, computed, defineComponent, toRefs, shallowRef, watch, shallowReadonly, getCurrentScope, onScopeDispose, readonly, getCurrentInstance, onMounted, unref, toRaw, ref, isRef, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, toDisplayString, normalizeClass, createTextVNode, Fragment, renderList, createCommentVNode, renderSlot, createBlock, resolveDynamicComponent, createVNode, defineAsyncComponent } from "vue";
+import { find, svg, html } from "property-information";
+import deepmerge from "deepmerge";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import { visit } from "unist-util-visit";
+import { flow, throttle } from "lodash-es";
+function render(hast, attrs, slots, customAttrs) {
+  const keyCounter = {};
+  return h(
+    "div",
+    attrs,
+    renderChildren(
+      hast.children,
+      { listDepth: -1, listOrdered: false, listItemIndex: -1, svg: false },
+      hast,
+      slots ?? {},
+      toValue(customAttrs) ?? {},
+      keyCounter
+    )
+  );
+}
+function renderChildren(nodeList, ctx, parent, slots, customAttrs, keyCounter) {
+  return nodeList.map((node) => {
+    switch (node.type) {
+      case "text":
+        return node.value;
+      case "raw":
+        return node.value;
+      case "root":
+        return renderChildren(node.children, ctx, parent, slots, customAttrs, keyCounter);
+      case "element": {
+        const { attrs, context, aliasList, vnodeProps } = getVNodeInfos(node, parent, ctx, keyCounter, customAttrs);
+        for (let i = aliasList.length - 1; i >= 0; i--) {
+          const targetSlot = slots[aliasList[i]];
+          if (typeof targetSlot === "function") {
+            return targetSlot({
+              ...vnodeProps,
+              ...attrs,
+              children: () => renderChildren(node.children, context, node, slots, customAttrs, keyCounter)
+            });
+          }
+        }
+        return h(node.tagName, attrs, renderChildren(node.children, context, node, slots, customAttrs, keyCounter));
+      }
+      default:
+        return null;
+    }
+  });
+}
+function getVNodeInfos(node, parent, context, keyCounter, customAttrs) {
+  const aliasList = [];
+  let attrs = {};
+  const vnodeProps = {};
+  const ctx = { ...context };
+  if (node.type === "element") {
+    aliasList.push(node.tagName);
+    keyCounter[node.tagName] = node.tagName in keyCounter ? keyCounter[node.tagName] + 1 : 0;
+    vnodeProps.key = `${node.tagName}-${keyCounter[node.tagName]}`;
+    node.properties = node.properties || {};
+    if (node.tagName === "svg") {
+      ctx.svg = true;
+    }
+    attrs = Object.entries(node.properties).reduce((acc, [hastKey, value]) => {
+      const attrInfo = find(ctx.svg ? svg : html, hastKey);
+      acc[attrInfo.attribute] = value;
+      return acc;
+    }, {});
+    switch (node.tagName) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        vnodeProps.level = Number.parseFloat(node.tagName.slice(1));
+        aliasList.push("heading");
+        break;
+      case "code":
+        vnodeProps.languageOriginal = Array.isArray(attrs.class) ? attrs.class.find((cls) => cls.startsWith("language-")) : "";
+        vnodeProps.language = vnodeProps.languageOriginal ? vnodeProps.languageOriginal.replace("language-", "") : "";
+        vnodeProps.inline = "tagName" in parent && parent.tagName !== "pre";
+        vnodeProps.content = node.children[0]?.value ?? "";
+        aliasList.push(vnodeProps.inline ? "inline-code" : "block-code");
+        break;
+      case "thead":
+      case "tbody":
+        ctx.currentContext = node.tagName;
+        break;
+      case "td":
+      case "th":
+      case "tr":
+        vnodeProps.isHead = context.currentContext === "thead";
+        break;
+      case "ul":
+      case "ol":
+        ctx.listDepth = context.listDepth + 1;
+        ctx.listOrdered = node.tagName === "ol";
+        ctx.listItemIndex = -1;
+        vnodeProps.ordered = ctx.listOrdered;
+        vnodeProps.depth = ctx.listDepth;
+        aliasList.push("list");
+        break;
+      case "li":
+        ctx.listItemIndex++;
+        vnodeProps.ordered = ctx.listOrdered;
+        vnodeProps.depth = ctx.listDepth;
+        vnodeProps.index = ctx.listItemIndex;
+        aliasList.push("list-item");
+        break;
+      case "slot":
+        if (typeof node.properties["slot-name"] === "string") {
+          aliasList.push(`${node.properties["slot-name"]}`);
+          delete node.properties["slot-name"];
+        }
+        break;
+    }
+    attrs = computeAttrs(
+      node,
+      aliasList,
+      vnodeProps,
+      { ...attrs },
+      // TODO: fix this
+      customAttrs
+    );
+  }
+  return {
+    attrs,
+    context: ctx,
+    aliasList,
+    vnodeProps
+  };
+}
+function computeAttrs(node, aliasList, vnodeProps, attrs, customAttrs) {
+  const result = {
+    ...attrs
+  };
+  for (let i = aliasList.length - 1; i >= 0; i--) {
+    const name = aliasList[i];
+    if (name in customAttrs) {
+      const customAttr = customAttrs[name];
+      return {
+        ...result,
+        ...typeof customAttr === "function" ? customAttr(node, { ...attrs, ...vnodeProps }) : customAttr
+      };
+    }
+  }
+  return result;
+}
+function useMarkdownProcessor(options) {
+  const processor = computed(() => {
+    return createProcessor({
+      prePlugins: [remarkParse, ...toValue(options?.remarkPlugins) ?? []],
+      rehypePlugins: toValue(options?.rehypePlugins),
+      rehypeOptions: toValue(options?.rehypeOptions),
+      sanitize: toValue(options?.sanitize),
+      sanitizeOptions: toValue(options?.sanitizeOptions)
+    });
+  });
+  return { processor };
+}
+function createProcessor(options) {
+  return unified().use(options?.prePlugins ?? []).use(remarkRehype, {
+    allowDangerousHtml: true,
+    ...options?.rehypeOptions || {}
+  }).use(options?.rehypePlugins ?? []).use(
+    options?.sanitize ? [
+      [
+        rehypeSanitize,
+        deepmerge(
+          defaultSchema,
+          options?.sanitizeOptions?.sanitizeOptions || {},
+          options?.sanitizeOptions?.mergeOptions || {}
+        )
+      ]
+    ] : []
+  );
+}
+const sharedProps = {
+  markdown: {
+    type: String,
+    default: ""
+  },
+  customAttrs: {
+    type: Object,
+    default: () => ({})
+  },
+  remarkPlugins: {
+    type: Array,
+    default: () => []
+  },
+  rehypePlugins: {
+    type: Array,
+    default: () => []
+  },
+  rehypeOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  sanitize: {
+    type: Boolean,
+    default: false
+  },
+  sanitizeOptions: {
+    type: Object,
+    default: () => ({})
+  }
+};
+const vueMarkdownImpl = defineComponent({
+  name: "VueMarkdown",
+  props: sharedProps,
+  setup(props, { slots, attrs }) {
+    const { markdown, remarkPlugins, rehypePlugins, rehypeOptions, sanitize, sanitizeOptions, customAttrs } = toRefs(props);
+    const { processor } = useMarkdownProcessor({
+      remarkPlugins,
+      rehypePlugins,
+      rehypeOptions,
+      sanitize,
+      sanitizeOptions
+    });
+    return () => {
+      const mdast = processor.value.parse(markdown.value);
+      const hast = processor.value.runSync(mdast);
+      return render(hast, attrs, slots, customAttrs.value);
+    };
+  }
+});
+const vueMarkdownAsyncImpl = defineComponent({
+  name: "VueMarkdownAsync",
+  props: sharedProps,
+  async setup(props, { slots, attrs }) {
+    const { markdown, remarkPlugins, rehypePlugins, rehypeOptions, sanitize, sanitizeOptions, customAttrs } = toRefs(props);
+    const { processor } = useMarkdownProcessor({
+      remarkPlugins,
+      rehypePlugins,
+      rehypeOptions,
+      sanitize,
+      sanitizeOptions
+    });
+    const hast = shallowRef(null);
+    const process = async () => {
+      const mdast = processor.value.parse(markdown.value);
+      hast.value = await processor.value.run(mdast);
+    };
+    watch(() => [markdown.value, processor.value], process, { flush: "sync" });
+    await process();
+    return () => {
+      return hast.value ? render(hast.value, attrs, slots, customAttrs.value) : null;
+    };
+  }
+});
+const VueMarkdown = vueMarkdownImpl;
+const VueMarkdownAsync = vueMarkdownAsyncImpl;
+function tryOnScopeDispose(fn, failSilently) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn, failSilently);
+    return true;
+  }
+  return false;
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function createSingletonPromise(fn) {
+  let _promise;
+  function wrapper() {
+    if (!_promise) _promise = fn();
+    return _promise;
+  }
+  wrapper.reset = async () => {
+    const _prev = _promise;
+    _promise = void 0;
+    if (_prev) await _prev;
+  };
+  return wrapper;
+}
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function useTimeoutFn(cb, interval, options = {}) {
+  const { immediate = true, immediateCallback = false } = options;
+  const isPending = shallowRef(false);
+  let timer;
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  }
+  function stop() {
+    isPending.value = false;
+    clear();
+  }
+  function start(...args) {
+    if (immediateCallback) cb();
+    clear();
+    isPending.value = true;
+    timer = setTimeout(() => {
+      isPending.value = false;
+      timer = void 0;
+      cb(...args);
+    }, toValue(interval));
+  }
+  if (immediate) {
+    isPending.value = true;
+    if (isClient) start();
+  }
+  tryOnScopeDispose(stop);
+  return {
+    isPending: shallowReadonly(isPending),
+    start,
+    stop
+  };
+}
+function watchImmediate(source, cb, options) {
+  return watch(source, cb, {
+    ...options,
+    immediate: true
+  });
+}
+const defaultWindow = isClient ? window : void 0;
+const defaultNavigator = isClient ? window.navigator : void 0;
+function unrefElement(elRef) {
+  var _$el;
+  const plain = toValue(elRef);
+  return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
+}
+function useEventListener(...args) {
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = computed(() => {
+    const test = toArray(toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  return watchImmediate(() => {
+    var _firstParamTargets$va, _firstParamTargets$va2;
+    return [
+      (_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
+      toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+      toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+      toValue(firstParamTargets.value ? args[3] : args[2])
+    ];
+  }, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
+    if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
+    const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+    const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
+    onCleanup(() => {
+      cleanups.forEach((fn) => fn());
+    });
+  }, { flush: "post" });
+}
+// @__NO_SIDE_EFFECTS__
+function useMounted() {
+  const isMounted = shallowRef(false);
+  const instance = getCurrentInstance();
+  if (instance) onMounted(() => {
+    isMounted.value = true;
+  }, instance);
+  return isMounted;
+}
+// @__NO_SIDE_EFFECTS__
+function useSupported(callback) {
+  const isMounted = /* @__PURE__ */ useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+// @__NO_SIDE_EFFECTS__
+function usePermission(permissionDesc, options = {}) {
+  const { controls = false, navigator: navigator$1 = defaultNavigator } = options;
+  const isSupported = /* @__PURE__ */ useSupported(() => navigator$1 && "permissions" in navigator$1);
+  const permissionStatus = shallowRef();
+  const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
+  const state = shallowRef();
+  const update = () => {
+    var _permissionStatus$val, _permissionStatus$val2;
+    state.value = (_permissionStatus$val = (_permissionStatus$val2 = permissionStatus.value) === null || _permissionStatus$val2 === void 0 ? void 0 : _permissionStatus$val2.state) !== null && _permissionStatus$val !== void 0 ? _permissionStatus$val : "prompt";
+  };
+  useEventListener(permissionStatus, "change", update, { passive: true });
+  const query = createSingletonPromise(async () => {
+    if (!isSupported.value) return;
+    if (!permissionStatus.value) try {
+      permissionStatus.value = await navigator$1.permissions.query(desc);
+    } catch (_unused) {
+      permissionStatus.value = void 0;
+    } finally {
+      update();
+    }
+    if (controls) return toRaw(permissionStatus.value);
+  });
+  query();
+  if (controls) return {
+    state,
+    isSupported,
+    query
+  };
+  else return state;
+}
+function useClipboard(options = {}) {
+  const { navigator: navigator$1 = defaultNavigator, read = false, source, copiedDuring = 1500, legacy = false } = options;
+  const isClipboardApiSupported = /* @__PURE__ */ useSupported(() => navigator$1 && "clipboard" in navigator$1);
+  const permissionRead = /* @__PURE__ */ usePermission("clipboard-read");
+  const permissionWrite = /* @__PURE__ */ usePermission("clipboard-write");
+  const isSupported = computed(() => isClipboardApiSupported.value || legacy);
+  const text = shallowRef("");
+  const copied = shallowRef(false);
+  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false });
+  async function updateText() {
+    let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionRead.value));
+    if (!useLegacy) try {
+      text.value = await navigator$1.clipboard.readText();
+    } catch (_unused) {
+      useLegacy = true;
+    }
+    if (useLegacy) text.value = legacyRead();
+  }
+  if (isSupported.value && read) useEventListener(["copy", "cut"], updateText, { passive: true });
+  async function copy(value = toValue(source)) {
+    if (isSupported.value && value != null) {
+      let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionWrite.value));
+      if (!useLegacy) try {
+        await navigator$1.clipboard.writeText(value);
+      } catch (_unused2) {
+        useLegacy = true;
+      }
+      if (useLegacy) legacyCopy(value);
+      text.value = value;
+      copied.value = true;
+      timeout.start();
+    }
+  }
+  function legacyCopy(value) {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.style.position = "absolute";
+    ta.style.opacity = "0";
+    ta.setAttribute("readonly", "");
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    ta.remove();
+  }
+  function legacyRead() {
+    var _document$getSelectio, _document, _document$getSelectio2;
+    return (_document$getSelectio = (_document = document) === null || _document === void 0 || (_document$getSelectio2 = _document.getSelection) === null || _document$getSelectio2 === void 0 || (_document$getSelectio2 = _document$getSelectio2.call(_document)) === null || _document$getSelectio2 === void 0 ? void 0 : _document$getSelectio2.toString()) !== null && _document$getSelectio !== void 0 ? _document$getSelectio : "";
+  }
+  function isAllowed(status) {
+    return status === "granted" || status === "prompt";
+  }
+  return {
+    isSupported,
+    text: readonly(text),
+    copied: readonly(copied),
+    copy
+  };
+}
+const SHIKI_PKG = "shiki";
+const SHIKI_STREAM_PKG = "shiki-stream";
+let shikiModulePromise = null;
+let shikiStreamModulePromise = null;
+let hasShownDependencyHint = false;
+const showDependencyHint = () => {
+  if (hasShownDependencyHint) return;
+  hasShownDependencyHint = true;
+  console.log(
+    "%c[x-markdown]%c 代码高亮功能已降级为纯文本模式",
+    "font-weight: bold; color: #0066cc;",
+    "color: #666;"
+  );
+  console.log(
+    "%c如需语法高亮功能，请安装以下依赖：",
+    "color: #666; font-weight: bold;"
+  );
+  console.log(
+    "%c  pnpm add shiki shiki-stream",
+    "color: #00aa00; font-family: monospace;"
+  );
+  console.log(
+    "%c安装后请重启开发服务器",
+    "color: #999; font-size: 12px;"
+  );
+};
+const loadShiki = () => {
+  if (!shikiModulePromise) {
+    shikiModulePromise = import(SHIKI_PKG).catch(() => {
+      showDependencyHint();
+      return null;
+    });
+  }
+  return shikiModulePromise;
+};
+const loadShikiStream = () => {
+  if (!shikiStreamModulePromise) {
+    shikiStreamModulePromise = import(SHIKI_STREAM_PKG).catch(() => {
+      showDependencyHint();
+      return null;
+    });
+  }
+  return shikiStreamModulePromise;
+};
+const tokensToLineTokens = (tokens) => {
+  if (!tokens.length) return [[]];
+  const lines = [[]];
+  let currentLine = lines[0];
+  const startNewLine = () => {
+    currentLine = [];
+    lines.push(currentLine);
+  };
+  tokens.forEach((token) => {
+    const content = token.content ?? "";
+    if (content === "\n") {
+      startNewLine();
+      return;
+    }
+    if (!content.includes("\n")) {
+      currentLine.push(token);
+      return;
+    }
+    const segments = content.split("\n");
+    segments.forEach((segment, index) => {
+      if (segment) {
+        currentLine.push({
+          ...token,
+          content: segment
+        });
+      }
+      if (index < segments.length - 1) {
+        startNewLine();
+      }
+    });
+  });
+  return lines.length === 0 ? [[]] : lines;
+};
+const createPreStyle = (bg, fg) => {
+  if (!bg && !fg) return void 0;
+  return {
+    backgroundColor: bg,
+    color: fg
+  };
+};
+function useHighlight(text, options) {
+  const streaming = ref();
+  const isLoading = ref(false);
+  const error = ref(null);
+  let tokenizer = null;
+  let previousText = "";
+  let highlighter = null;
+  let currentUsedLang = "";
+  let lastRequestedLang = "";
+  const effectiveTheme = computed(() => {
+    const theme = isRef(options.theme) ? options.theme.value : options.theme;
+    return theme || "slack-dark";
+  });
+  const effectiveLanguage = computed(() => {
+    return toValue(options.language) || "text";
+  });
+  const lines = computed(() => streaming.value?.lines || [[]]);
+  const preStyle = computed(() => streaming.value?.preStyle);
+  const updateTokens = async (nextText, forceReset = false) => {
+    if (!tokenizer) return;
+    if (forceReset) {
+      tokenizer.clear();
+      previousText = "";
+    }
+    const canAppend = !forceReset && nextText.startsWith(previousText);
+    let chunk = nextText;
+    if (canAppend) {
+      chunk = nextText.slice(previousText.length);
+    } else if (!forceReset) {
+      tokenizer.clear();
+    }
+    previousText = nextText;
+    if (!chunk) {
+      const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable];
+      streaming.value = {
+        colorReplacements: options.colorReplacements,
+        lines: mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]],
+        preStyle: streaming.value?.preStyle
+      };
+      return;
+    }
+    try {
+      await tokenizer.enqueue(chunk);
+      const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable];
+      streaming.value = {
+        colorReplacements: options.colorReplacements,
+        lines: tokensToLineTokens(mergedTokens),
+        preStyle: streaming.value?.preStyle
+      };
+    } catch (err) {
+      console.error("[x-markdown] Streaming highlighting failed:", err);
+      error.value = err;
+    }
+  };
+  const initHighlighter = async () => {
+    isLoading.value = true;
+    error.value = null;
+    let currentLang = effectiveLanguage.value;
+    const currentTheme = effectiveTheme.value;
+    try {
+      const mod = await loadShiki();
+      if (!mod) {
+        console.warn("[x-markdown] Shiki not available, falling back to plain text mode");
+        streaming.value = {
+          colorReplacements: options.colorReplacements,
+          lines: [[{ content: text.value }]],
+          preStyle: void 0
+        };
+        return;
+      }
+      highlighter = await mod.getSingletonHighlighter({
+        langs: [],
+        themes: [currentTheme]
+      });
+      lastRequestedLang = currentLang;
+      try {
+        await highlighter.loadLanguage(currentLang);
+        currentUsedLang = currentLang;
+      } catch {
+        console.warn(`[x-markdown] Failed to load language: ${currentLang}, falling back to plaintext`);
+        currentLang = "plaintext";
+        currentUsedLang = "plaintext";
+      }
+      const StreamMod = await loadShikiStream();
+      if (!StreamMod) {
+        console.warn("[x-markdown] shiki-stream not available, using non-streaming mode");
+        const tokens = highlighter.codeToThemedTokens(text.value, currentLang, currentTheme);
+        streaming.value = {
+          colorReplacements: options.colorReplacements,
+          lines: tokensToLineTokens(tokens),
+          preStyle: createPreStyle(
+            highlighter.getTheme(currentTheme)?.bg,
+            highlighter.getTheme(currentTheme)?.fg
+          )
+        };
+        return;
+      }
+      const ShikiStreamTokenizer = StreamMod.ShikiStreamTokenizer || StreamMod.default;
+      tokenizer = new ShikiStreamTokenizer({
+        highlighter,
+        lang: currentLang,
+        theme: currentTheme
+      });
+      previousText = "";
+      const themeInfo = highlighter.getTheme(currentTheme);
+      const preStyleValue = createPreStyle(themeInfo?.bg, themeInfo?.fg);
+      if (text.value) {
+        await updateTokens(text.value, true);
+        if (streaming.value) {
+          streaming.value.preStyle = preStyleValue;
+        }
+      } else {
+        streaming.value = {
+          colorReplacements: options.colorReplacements,
+          lines: [[]],
+          preStyle: preStyleValue
+        };
+      }
+    } catch (err) {
+      console.error("[x-markdown] Highlighter initialization failed:", err);
+      error.value = err;
+      streaming.value = {
+        colorReplacements: options.colorReplacements,
+        lines: [[{ content: text.value }]],
+        preStyle: void 0
+      };
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  watch(
+    () => [effectiveLanguage.value, effectiveTheme.value],
+    async ([newLang]) => {
+      const requestedLang = newLang;
+      if (highlighter && currentUsedLang === "plaintext" && requestedLang !== lastRequestedLang && requestedLang !== "plaintext") {
+        try {
+          await highlighter.loadLanguage(requestedLang);
+          initHighlighter();
+          return;
+        } catch {
+          lastRequestedLang = requestedLang;
+          return;
+        }
+      }
+      initHighlighter();
+    },
+    { immediate: true }
+  );
+  watch(text, async (newText) => {
+    const requestedLang = effectiveLanguage.value;
+    if (highlighter && currentUsedLang === "plaintext" && requestedLang !== lastRequestedLang && requestedLang !== "plaintext") {
+      try {
+        await highlighter.loadLanguage(requestedLang);
+        await initHighlighter();
+        return;
+      } catch {
+        lastRequestedLang = requestedLang;
+      }
+    }
+    if (tokenizer) {
+      updateTokens(newText);
+    } else if (!highlighter) {
+      streaming.value = {
+        colorReplacements: options.colorReplacements,
+        lines: [[{ content: newText }]],
+        preStyle: streaming.value?.preStyle
+      };
+    }
+  });
+  onUnmounted(() => {
+    tokenizer?.clear();
+    tokenizer = null;
+    previousText = "";
+  });
+  return {
+    streaming,
+    lines,
+    preStyle,
+    isLoading,
+    error
+  };
+}
+const _hoisted_1$1 = { class: "x-md-syntax-code-block" };
+const _hoisted_2$1 = { class: "x-md-code-content" };
+const _hoisted_3$1 = { key: 0 };
+const SHIKI_CORE_PKG$1 = "@shikijs/core";
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SyntaxCodeBlock"
+  },
+  __name: "SyntaxCodeBlock",
+  props: {
+    code: {},
+    language: {},
+    lightTheme: { default: "vitesse-light" },
+    darkTheme: { default: "vitesse-dark" },
+    isDark: { type: Boolean, default: false },
+    colorReplacements: {},
+    codeMaxHeight: {},
+    enableAnimate: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    let getTokenStyleObjectFn = null;
+    onMounted(async () => {
+      const mod = await Function(`return import('${SHIKI_CORE_PKG$1}')`)().catch(() => {
+        return { getTokenStyleObject: () => ({}) };
+      });
+      getTokenStyleObjectFn = mod.getTokenStyleObject;
+    });
+    const props = __props;
+    const code = computed(() => props.code.trim());
+    const language = computed(() => props.language || "text");
+    const actualTheme = computed(() => props.isDark ? props.darkTheme : props.lightTheme);
+    const { lines, preStyle } = useHighlight(code, {
+      language,
+      theme: actualTheme,
+      colorReplacements: props.colorReplacements
+    });
+    const applyColorReplacement = (color, replacements) => {
+      if (!replacements) return color;
+      return replacements[color.toLowerCase()] || color;
+    };
+    const normalizeStyleKeys = (style) => {
+      const normalized = {};
+      Object.entries(style).forEach(([key, value]) => {
+        const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        normalized[camelKey] = value;
+      });
+      return normalized;
+    };
+    const getTokenStyle = (token) => {
+      if (token.htmlStyle) {
+        const baseStyle2 = normalizeStyleKeys(token.htmlStyle);
+        if (!props.colorReplacements) return baseStyle2;
+        const style2 = { ...baseStyle2 };
+        if (style2.color && typeof style2.color === "string") {
+          style2.color = applyColorReplacement(style2.color, props.colorReplacements);
+        }
+        if (style2.backgroundColor && typeof style2.backgroundColor === "string") {
+          style2.backgroundColor = applyColorReplacement(style2.backgroundColor, props.colorReplacements);
+        }
+        return style2;
+      }
+      if (!getTokenStyleObjectFn) {
+        return {};
+      }
+      const rawStyle = getTokenStyleObjectFn(token);
+      const baseStyle = normalizeStyleKeys(rawStyle);
+      if (!props.colorReplacements) return baseStyle;
+      const style = { ...baseStyle };
+      if (style.color && typeof style.color === "string") {
+        style.color = applyColorReplacement(style.color, props.colorReplacements);
+      }
+      if (style.backgroundColor && typeof style.backgroundColor === "string") {
+        style.backgroundColor = applyColorReplacement(style.backgroundColor, props.colorReplacements);
+      }
+      return style;
+    };
+    const showFallback = computed(() => !lines.value?.length);
+    const codeContainerStyle = computed(() => ({
+      ...preStyle.value,
+      maxHeight: props.codeMaxHeight
+    }));
+    __expose({
+      lines,
+      code,
+      language,
+      actualTheme
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        showFallback.value ? (openBlock(), createElementBlock("pre", {
+          key: 0,
+          style: normalizeStyle(codeContainerStyle.value)
+        }, [
+          createElementVNode("code", null, toDisplayString(code.value), 1)
+        ], 4)) : (openBlock(), createElementBlock("pre", {
+          key: 1,
+          class: normalizeClass(["shiki", actualTheme.value]),
+          style: normalizeStyle(codeContainerStyle.value),
+          tabindex: "0"
+        }, [
+          _cache[4] || (_cache[4] = createTextVNode("      ", -1)),
+          createElementVNode("code", _hoisted_2$1, [
+            _cache[2] || (_cache[2] = createTextVNode("\n        ", -1)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(lines), (line, i) => {
+              return openBlock(), createElementBlock("span", {
+                key: i,
+                class: "x-md-code-line"
+              }, [
+                _cache[0] || (_cache[0] = createTextVNode("\n          ", -1)),
+                !line.length ? (openBlock(), createElementBlock("span", _hoisted_3$1, " ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(line, (token, j) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: j,
+                    style: normalizeStyle(getTokenStyle(token)),
+                    class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
+                  }, toDisplayString(token.content), 7);
+                }), 128)),
+                _cache[1] || (_cache[1] = createTextVNode("\n        ", -1))
+              ]);
+            }), 128)),
+            _cache[3] || (_cache[3] = createTextVNode("\n      ", -1))
+          ]),
+          _cache[5] || (_cache[5] = createTextVNode("\n    ", -1))
+        ], 6))
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const SyntaxCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7cbaa1d1"]]);
+const _hoisted_1 = { class: "x-md-code-header" };
+const _hoisted_2 = { class: "x-md-code-header__left" };
+const _hoisted_3 = ["title"];
+const _hoisted_4 = { class: "x-md-code-lang" };
+const _hoisted_5 = { class: "x-md-code-header__right" };
+const _hoisted_6 = ["title", "disabled", "onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "x-md-copy-icon",
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "x-md-copy-icon",
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CodeBlock"
+  },
+  __name: "index",
+  props: {
+    code: {},
+    language: {},
+    lightTheme: { default: "vitesse-light" },
+    darkTheme: { default: "vitesse-dark" },
+    isDark: { type: Boolean, default: false },
+    colorReplacements: {},
+    codeMaxHeight: {},
+    showCodeBlockHeader: { type: Boolean, default: true },
+    enableAnimate: { type: Boolean, default: false },
+    codeBlockActions: { default: void 0 },
+    stickyCodeBlockHeader: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const { copy, copied } = useClipboard({ copiedDuring: 2e3 });
+    const collapsed = ref(false);
+    const syntaxCodeBlockRef = ref(null);
+    const toggleCollapse = () => {
+      collapsed.value = !collapsed.value;
+    };
+    const props = __props;
+    const code = computed(() => props.code.trim());
+    const language = computed(() => props.language || "text");
+    const normalizedActions = computed(() => {
+      return props.codeBlockActions || [];
+    });
+    const filteredActions = computed(() => {
+      return normalizedActions.value.filter((action) => {
+        if (!action.show) return true;
+        return action.show(slotProps.value);
+      });
+    });
+    const slotProps = computed(() => ({
+      language: language.value,
+      code: code.value,
+      copy,
+      copied: copied.value,
+      collapsed: collapsed.value,
+      toggleCollapse
+    }));
+    function renderActionIcon(action) {
+      if (!action.icon) return null;
+      if (typeof action.icon === "string") {
+        return h("span", {
+          class: "x-md-action-icon",
+          innerHTML: action.icon
+        });
+      }
+      if (typeof action.icon === "function") {
+        try {
+          const result = action.icon(slotProps.value);
+          if (result && typeof result === "object" && "__v_isVNode" in result) {
+            return result;
+          }
+        } catch {
+        }
+        return h(action.icon);
+      }
+      return h(action.icon);
+    }
+    function handleActionClick(action) {
+      if (action.disabled) return;
+      action.onClick?.(slotProps.value);
+    }
+    __expose({
+      copy,
+      copied,
+      collapsed,
+      toggleCollapse,
+      syntaxCodeBlockRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["x-md-code-block", { "x-md-code-block--dark": props.isDark }])
+      }, [
+        __props.showCodeBlockHeader ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["x-md-code-header-wrapper", [{ "x-md-code-header-wrapper--sticky": props.stickyCodeBlockHeader }, { "x-md-code-header-wrapper--collapsed": collapsed.value }]])
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "codeHeader", {
+              language: language.value,
+              code: code.value,
+              copy: unref(copy),
+              copied: unref(copied),
+              collapsed: collapsed.value,
+              toggleCollapse
+            }, () => [
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("button", {
+                  class: normalizeClass(["x-md-collapse-btn", { "x-md-collapse-btn--collapsed": collapsed.value }]),
+                  onClick: toggleCollapse,
+                  title: collapsed.value ? "展开代码" : "折叠代码"
+                }, [..._cache[1] || (_cache[1] = [
+                  createElementVNode("svg", {
+                    class: "x-md-collapse-icon",
+                    viewBox: "0 0 24 24",
+                    width: "14",
+                    height: "14",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }, [
+                    createElementVNode("polyline", { points: "6 9 12 15 18 9" })
+                  ], -1)
+                ])], 10, _hoisted_3),
+                createElementVNode("span", _hoisted_4, toDisplayString(language.value), 1)
+              ]),
+              createElementVNode("div", _hoisted_5, [
+                renderSlot(_ctx.$slots, "codeActions", {
+                  code: code.value,
+                  copy: unref(copy),
+                  copied: unref(copied)
+                }, () => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(filteredActions.value, (action) => {
+                    return openBlock(), createElementBlock("button", {
+                      key: action.key,
+                      class: normalizeClass(["x-md-action-btn", [action.class, { "x-md-action-btn--disabled": action.disabled }]]),
+                      style: normalizeStyle(action.style),
+                      title: action.title,
+                      disabled: action.disabled,
+                      onClick: ($event) => handleActionClick(action)
+                    }, [
+                      action.icon ? (openBlock(), createBlock(resolveDynamicComponent(renderActionIcon(action)), { key: 0 })) : createCommentVNode("", true)
+                    ], 14, _hoisted_6);
+                  }), 128)),
+                  createElementVNode("button", {
+                    class: normalizeClass(["x-md-copy-btn", { "x-md-copy-btn--copied": unref(copied) }]),
+                    onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(code.value))
+                  }, [
+                    unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[2] || (_cache[2] = [
+                      createElementVNode("path", {
+                        fill: "currentColor",
+                        d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
+                      }, null, -1)
+                    ])])) : (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[3] || (_cache[3] = [
+                      createElementVNode("path", {
+                        fill: "currentColor",
+                        d: "M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z"
+                      }, null, -1),
+                      createElementVNode("path", {
+                        fill: "currentColor",
+                        d: "M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64"
+                      }, null, -1)
+                    ])]))
+                  ], 2)
+                ], true)
+              ])
+            ], true)
+          ])
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["x-md-code-body", { "x-md-code-body--collapsed": collapsed.value }])
+        }, [
+          createVNode(SyntaxCodeBlock, {
+            ref_key: "syntaxCodeBlockRef",
+            ref: syntaxCodeBlockRef,
+            code: code.value,
+            language: language.value,
+            "light-theme": props.lightTheme,
+            "dark-theme": props.darkTheme,
+            "is-dark": props.isDark,
+            "color-replacements": props.colorReplacements,
+            "code-max-height": props.codeMaxHeight,
+            "enable-animate": props.enableAnimate
+          }, null, 8, ["code", "language", "light-theme", "dark-theme", "is-dark", "color-replacements", "code-max-height", "enable-animate"])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const CodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-8b0fb0b9"]]);
+const SHIKI_CORE_PKG = "@shikijs/core";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    raw: { default: () => ({}) },
+    isDark: { type: Boolean, default: false },
+    shikiTheme: { default: () => ["vitesse-light", "vitesse-dark"] },
+    enableAnimate: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    let getTokenStyleObjectFn = null;
+    onMounted(async () => {
+      const mod = await Function(`return import('${SHIKI_CORE_PKG}')`)().catch(() => {
+        return { getTokenStyleObject: () => ({}) };
+      });
+      getTokenStyleObjectFn = mod.getTokenStyleObject;
+    });
+    const props = __props;
+    const content = computed(() => props.raw?.content ?? "");
+    const language = computed(() => props.raw?.language || "ts");
+    const actualTheme = computed(() => props.isDark ? props.shikiTheme[1] : props.shikiTheme[0]);
+    const { lines, preStyle } = useHighlight(content, {
+      language,
+      theme: actualTheme
+    });
+    const flatTokens = computed(() => lines.value.flat());
+    const codeStyle = computed(() => preStyle.value || {});
+    const normalizeStyleKeys = (style) => {
+      const normalized = {};
+      Object.entries(style).forEach(([key, value]) => {
+        const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        normalized[camelKey] = value;
+      });
+      return normalized;
+    };
+    const getTokenStyle = (token) => {
+      if (token.htmlStyle) {
+        return normalizeStyleKeys(token.htmlStyle);
+      }
+      if (!getTokenStyleObjectFn) {
+        return {};
+      }
+      const rawStyle = getTokenStyleObjectFn(token);
+      return normalizeStyleKeys(rawStyle);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["x-md-inline-code", {
+          "x-md-inline-code--dark": props.isDark,
+          "x-md-animated-word": props.enableAnimate
+        }])
+      }, [
+        createElementVNode("code", {
+          style: normalizeStyle(codeStyle.value)
+        }, [
+          !flatTokens.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(content.value), 1)
+          ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(flatTokens.value, (token, i) => {
+            return openBlock(), createElementBlock("span", {
+              key: i,
+              style: normalizeStyle(getTokenStyle(token)),
+              class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
+            }, toDisplayString(token.content), 7);
+          }), 128))
+        ], 4)
+      ], 2);
+    };
+  }
+});
+const CodeLine = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-97166d5b"]]);
+const Mermaid = defineAsyncComponent(() => import("./index-BjeepIV6.js"));
+const _sfc_main = defineComponent({
+  props: {
+    raw: { type: Object, default: () => ({}) },
+    codeXRender: { type: Object, default: () => ({}) },
+    isDark: { type: Boolean, default: false },
+    shikiTheme: {
+      type: Array,
+      default: () => ["vitesse-light", "vitesse-dark"]
+    },
+    showCodeBlockHeader: { type: Boolean, default: true },
+    stickyCodeBlockHeader: { type: Boolean, default: true },
+    codeMaxHeight: { type: String, default: void 0 },
+    enableAnimate: { type: Boolean, default: false },
+    codeBlockActions: { type: Array, default: void 0 },
+    mermaidActions: { type: Array, default: void 0 },
+    mermaidConfig: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { codeXRender } = props;
+    return () => {
+      if (props.raw.inline) {
+        if (codeXRender && codeXRender.inline) {
+          const renderer = codeXRender.inline;
+          if (typeof renderer === "function") {
+            return renderer(props);
+          }
+          return h(renderer, props);
+        }
+        return h(CodeLine, {
+          raw: props.raw,
+          isDark: props.isDark,
+          shikiTheme: props.shikiTheme,
+          enableAnimate: props.enableAnimate
+        });
+      }
+      const { language } = props.raw;
+      if (codeXRender && codeXRender[language]) {
+        const renderer = codeXRender[language];
+        if (typeof renderer === "function") {
+          return renderer(props);
+        }
+        return h(renderer, props);
+      }
+      if (language === "mermaid") {
+        const mermaidSlots = {};
+        Object.keys(slots).forEach((key) => {
+          if (key.startsWith("mermaid")) {
+            mermaidSlots[key] = slots[key];
+          }
+        });
+        return h(
+          Mermaid,
+          {
+            raw: props.raw,
+            isDark: props.isDark,
+            shikiTheme: props.shikiTheme,
+            mermaidActions: props.mermaidActions,
+            config: props.mermaidConfig
+          },
+          mermaidSlots
+        );
+      }
+      return h(
+        CodeBlock,
+        {
+          code: props.raw.content || "",
+          language: props.raw.language || "text",
+          isDark: props.isDark,
+          lightTheme: props.shikiTheme[0],
+          darkTheme: props.shikiTheme[1],
+          showCodeBlockHeader: props.showCodeBlockHeader,
+          stickyCodeBlockHeader: props.stickyCodeBlockHeader,
+          codeMaxHeight: props.codeMaxHeight,
+          enableAnimate: props.enableAnimate,
+          codeBlockActions: props.codeBlockActions
+        },
+        slots
+      );
+    };
+  }
+});
+function useComponents(props) {
+  const components = {
+    code: (raw) => h(_sfc_main, {
+      raw,
+      codeXRender: props?.codeXRender,
+      isDark: props?.isDark,
+      shikiTheme: props?.shikiTheme,
+      enableAnimate: props?.enableAnimate,
+      showCodeBlockHeader: props?.showCodeBlockHeader,
+      stickyCodeBlockHeader: props?.stickyCodeBlockHeader,
+      codeMaxHeight: props?.codeMaxHeight,
+      codeBlockActions: props?.codeBlockActions,
+      mermaidActions: props?.mermaidActions,
+      mermaidConfig: props?.mermaidConfig
+    })
+  };
+  return components;
+}
+function useProcessMarkdown(markdown) {
+  return preprocessLaTeX(markdown);
+}
+function preprocessLaTeX(markdown) {
+  if (typeof markdown !== "string") return markdown;
+  const codeBlockRegex = /```[\s\S]*?```/g;
+  const codeBlocks = markdown.match(codeBlockRegex) || [];
+  const escapeReplacement = (str) => str.replace(/\$/g, "_ELX_DOLLAR_");
+  let processedMarkdown = markdown.replace(codeBlockRegex, "ELX_CODE_BLOCK_PLACEHOLDER");
+  processedMarkdown = flow([
+    (str) => str.replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation}$$`),
+    (str) => str.replace(/\\\[([\s\S]*?)\\\]/g, (_, equation) => `$$${equation}$$`),
+    (str) => str.replace(/\\\((.*?)\\\)/g, (_, equation) => `$$${equation}$$`),
+    (str) => str.replace(/(^|[^\\])\$(.+?)\$/g, (_, prefix, equation) => `${prefix}$${equation}$`)
+  ])(processedMarkdown);
+  codeBlocks.forEach((block) => {
+    processedMarkdown = processedMarkdown.replace("ELX_CODE_BLOCK_PLACEHOLDER", escapeReplacement(block));
+  });
+  processedMarkdown = processedMarkdown.replace(/_ELX_DOLLAR_/g, "$");
+  return processedMarkdown;
+}
+function downloadSvgAsPng(svg2) {
+  if (!svg2) return;
+  try {
+    const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg2)}`;
+    const img = new Image();
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d", { willReadFrequently: false });
+        if (!ctx) return;
+        const scale = 2;
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-");
+        try {
+          canvas.toBlob(
+            (blob) => {
+              if (!blob) return;
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = `mermaid-diagram-${timestamp}.png`;
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+              URL.revokeObjectURL(url);
+            },
+            "image/png",
+            0.95
+          );
+        } catch (toBlobError) {
+          console.error("Failed to convert canvas to blob:", toBlobError);
+          try {
+            const dataUrl = canvas.toDataURL("image/png", 0.95);
+            const link = document.createElement("a");
+            link.href = dataUrl;
+            link.download = `mermaid-diagram-${timestamp}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          } catch (dataUrlError) {
+            console.error("Failed to convert canvas to data URL:", dataUrlError);
+          }
+        }
+      } catch (canvasError) {
+        console.error("Canvas operation failed:", canvasError);
+      }
+    };
+    img.onerror = (error) => {
+      console.error("Failed to load image:", error);
+    };
+    img.src = svgDataUrl;
+  } catch (error) {
+    console.error("Failed to download SVG:", error);
+  }
+}
+const MERMAID_PKG = "mermaid";
+let mermaidPromise = null;
+let hasShownMermaidHint = false;
+const showMermaidHint = () => {
+  if (hasShownMermaidHint) return;
+  hasShownMermaidHint = true;
+  console.log(
+    "%c[x-markdown]%c Mermaid 图表功能已降级为代码块显示",
+    "font-weight: bold; color: #9333ea;",
+    "color: #666;"
+  );
+  console.log(
+    "%c如需 Mermaid 图表渲染功能，请安装：",
+    "color: #666; font-weight: bold;"
+  );
+  console.log(
+    "%c  pnpm add mermaid",
+    "color: #9333ea; font-family: monospace;"
+  );
+  console.log(
+    "%c安装后请重启开发服务器",
+    "color: #999; font-size: 12px;"
+  );
+};
+async function loadMermaid() {
+  if (typeof window === "undefined") return null;
+  if (!mermaidPromise) {
+    mermaidPromise = import(MERMAID_PKG).then((m) => m.default).catch(() => {
+      showMermaidHint();
+      return null;
+    });
+  }
+  return mermaidPromise;
+}
+const renderQueue = [];
+let isProcessingQueue = false;
+async function processRenderQueue() {
+  if (isProcessingQueue) return;
+  isProcessingQueue = true;
+  while (renderQueue.length > 0) {
+    const task = renderQueue.shift();
+    if (task) {
+      try {
+        await task();
+      } catch (err) {
+        console.error("Mermaid render queue error:", err);
+      }
+    }
+  }
+  isProcessingQueue = false;
+}
+function addToRenderQueue(task) {
+  renderQueue.push(task);
+  processRenderQueue();
+}
+function useMermaid(content, options = {}) {
+  const optionsRef = computed(() => typeof options === "object" && "value" in options ? options.value : options);
+  const mermaidConfig = computed(() => ({
+    suppressErrorRendering: true,
+    startOnLoad: false,
+    securityLevel: "loose",
+    theme: optionsRef.value.theme || "default",
+    ...optionsRef.value.config || {}
+  }));
+  const data = ref("");
+  const error = ref(null);
+  const isLoading = ref(false);
+  let isUnmounted = false;
+  const getRenderContainer = () => {
+    const containerOption = optionsRef.value.container;
+    if (containerOption) {
+      return typeof containerOption === "object" && "value" in containerOption ? containerOption.value : containerOption;
+    }
+    return null;
+  };
+  const throttledRender = throttle(
+    () => {
+      const contentValue = typeof content === "string" ? content : content.value;
+      if (!contentValue?.trim()) {
+        data.value = "";
+        error.value = null;
+        isLoading.value = false;
+        return;
+      }
+      isLoading.value = true;
+      addToRenderQueue(async () => {
+        if (isUnmounted) return;
+        try {
+          const mermaidInstance = await loadMermaid();
+          if (!mermaidInstance) {
+            data.value = contentValue;
+            error.value = null;
+            isLoading.value = false;
+            return;
+          }
+          mermaidInstance.initialize(mermaidConfig.value);
+          const isValid = await mermaidInstance.parse(contentValue.trim());
+          if (!isValid) {
+            data.value = "";
+            error.value = new Error("Mermaid parse error: Invalid syntax");
+            isLoading.value = false;
+            return;
+          }
+          const renderId = `${optionsRef.value.id || "mermaid"}-${Math.random().toString(36).substring(2, 11)}`;
+          const container = getRenderContainer();
+          if (!container) {
+            isLoading.value = false;
+            return;
+          }
+          const { svg: svg2 } = await mermaidInstance.render(renderId, contentValue, container);
+          data.value = svg2;
+          error.value = null;
+          isLoading.value = false;
+        } catch (err) {
+          data.value = "";
+          error.value = err;
+          isLoading.value = false;
+        }
+      });
+    },
+    100,
+    { leading: false, trailing: true }
+  );
+  watch(
+    [() => typeof content === "string" ? content : content.value, () => mermaidConfig.value],
+    () => {
+      throttledRender();
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    isUnmounted = true;
+  });
+  return {
+    data,
+    error,
+    isLoading
+  };
+}
+function useMermaidZoom(options) {
+  const { container } = options;
+  const scale = ref(1);
+  const posX = ref(0);
+  const posY = ref(0);
+  const isDragging = ref(false);
+  let removeEvents = null;
+  const getSvg = () => container.value?.querySelector(".syntax-mermaid__content svg");
+  const updateTransform = (svg2) => {
+    svg2.style.transformOrigin = "center center";
+    svg2.style.transform = `translate(${posX.value}px, ${posY.value}px) scale(${scale.value})`;
+  };
+  const resetState = () => {
+    scale.value = 1;
+    posX.value = 0;
+    posY.value = 0;
+    isDragging.value = false;
+  };
+  const addInteractionEvents = (containerEl) => {
+    let startX = 0;
+    let startY = 0;
+    let isInteractingWithMermaid = false;
+    const onStart = (clientX, clientY) => {
+      isDragging.value = true;
+      startX = clientX - posX.value;
+      startY = clientY - posY.value;
+      document.body.style.userSelect = "none";
+    };
+    const onMove = (clientX, clientY) => {
+      if (isDragging.value && isInteractingWithMermaid) {
+        posX.value = clientX - startX;
+        posY.value = clientY - startY;
+        const svg2 = getSvg();
+        if (svg2) {
+          updateTransform(svg2);
+        }
+      }
+    };
+    const onEnd = () => {
+      isDragging.value = false;
+      isInteractingWithMermaid = false;
+      document.body.style.userSelect = "";
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      if (e.target === containerEl || containerEl.contains(e.target)) {
+        e.preventDefault();
+        isInteractingWithMermaid = true;
+        onStart(e.clientX, e.clientY);
+      }
+    };
+    const onMouseMove = (e) => {
+      if (isInteractingWithMermaid) {
+        onMove(e.clientX, e.clientY);
+      }
+    };
+    const handleWheelZoom = (e) => {
+      const svg2 = getSvg();
+      if (!svg2) return;
+      const containerRect = containerEl.getBoundingClientRect();
+      const svgRect = svg2.getBoundingClientRect();
+      const mouseX = e.clientX - containerRect.left;
+      const mouseY = e.clientY - containerRect.top;
+      const svgCenterX = svgRect.left - containerRect.left + svgRect.width / 2;
+      const svgCenterY = svgRect.top - containerRect.top + svgRect.height / 2;
+      const offsetX = (mouseX - svgCenterX - posX.value) / scale.value;
+      const offsetY = (mouseY - svgCenterY - posY.value) / scale.value;
+      const delta = e.deltaY > 0 ? -0.05 : 0.05;
+      const newScale = Math.min(Math.max(scale.value + delta, 0.1), 10);
+      if (newScale === scale.value) return;
+      scale.value = newScale;
+      posX.value = mouseX - svgCenterX - offsetX * scale.value;
+      posY.value = mouseY - svgCenterY - offsetY * scale.value;
+      updateTransform(svg2);
+    };
+    const throttledWheelZoom = throttle(handleWheelZoom, 20, { leading: true, trailing: true });
+    const onWheel = (e) => {
+      if (e.target === containerEl || containerEl.contains(e.target)) {
+        e.preventDefault();
+        throttledWheelZoom(e);
+      }
+    };
+    const onTouchStart = (e) => {
+      if (e.target === containerEl || containerEl.contains(e.target)) {
+        if (e.touches.length === 1) {
+          e.preventDefault();
+          isInteractingWithMermaid = true;
+          onStart(e.touches[0].clientX, e.touches[0].clientY);
+        }
+      }
+    };
+    const onTouchMove = (e) => {
+      if (isInteractingWithMermaid) {
+        e.preventDefault();
+        onMove(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    };
+    containerEl.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onEnd);
+    containerEl.addEventListener("wheel", onWheel, { passive: false });
+    containerEl.addEventListener("touchstart", onTouchStart, { passive: false });
+    containerEl.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onEnd);
+    return () => {
+      containerEl.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onEnd);
+      containerEl.removeEventListener("wheel", onWheel);
+      containerEl.removeEventListener("touchstart", onTouchStart);
+      containerEl.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onEnd);
+      document.body.style.userSelect = "";
+    };
+  };
+  const zoomIn = () => {
+    const svg2 = getSvg();
+    if (svg2) {
+      scale.value = Math.min(scale.value + 0.2, 10);
+      updateTransform(svg2);
+    }
+  };
+  const zoomOut = () => {
+    const svg2 = getSvg();
+    if (svg2) {
+      scale.value = Math.max(scale.value - 0.2, 0.1);
+      updateTransform(svg2);
+    }
+  };
+  const reset = () => {
+    const svg2 = getSvg();
+    if (svg2) {
+      resetState();
+      updateTransform(svg2);
+    }
+  };
+  const fullscreen = () => {
+    if (!container.value) return;
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      container.value.requestFullscreen?.();
+    }
+  };
+  const initialize = () => {
+    if (!container.value) return;
+    resetState();
+    removeEvents = addInteractionEvents(container.value);
+    const svg2 = getSvg();
+    if (svg2) {
+      updateTransform(svg2);
+    }
+  };
+  const destroy = () => {
+    removeEvents?.();
+    removeEvents = null;
+    resetState();
+  };
+  watch(
+    () => container.value,
+    () => {
+      destroy();
+      resetState();
+    }
+  );
+  onUnmounted(destroy);
+  return {
+    zoomIn,
+    zoomOut,
+    reset,
+    fullscreen,
+    destroy,
+    initialize
+  };
+}
+function rehypeAnimatedPlugin() {
+  return (tree) => {
+    visit(tree, "element", (node) => {
+      if (["p", "h1", "h2", "h3", "h4", "h5", "h6", "li", "strong", "th", "td"].includes(node.tagName) && node.children) {
+        const newChildren = [];
+        for (const child of node.children) {
+          if (child.type === "text") {
+            const segmenter = new Intl.Segmenter("zh", { granularity: "word" });
+            const segments = segmenter.segment(child.value);
+            const words = [...segments].map((segment) => segment.segment).filter(Boolean);
+            words.forEach((word) => {
+              newChildren.push({
+                children: [{ type: "text", value: word }],
+                properties: {
+                  className: "x-md-animated-word"
+                },
+                tagName: "span",
+                type: "element"
+              });
+            });
+          } else {
+            newChildren.push(child);
+          }
+        }
+        node.children = newChildren;
+      }
+    });
+  };
+}
+function usePlugins(props) {
+  const {
+    allowHtml,
+    enableAnimate,
+    enableLatex,
+    enableBreaks,
+    enableGfm,
+    rehypePlugins,
+    remarkPlugins,
+    rehypePluginsAhead,
+    remarkPluginsAhead
+  } = toRefs(props);
+  const rehype = computed(() => {
+    return [
+      ...rehypePluginsAhead.value,
+      allowHtml.value && rehypeRaw,
+      enableLatex.value && rehypeKatex,
+      enableAnimate.value && rehypeAnimatedPlugin,
+      ...rehypePlugins.value
+    ].filter(Boolean);
+  });
+  const remark = computed(() => {
+    const base = [
+      enableLatex.value && remarkMath,
+      enableGfm.value !== false && [remarkGfm, { singleTilde: false }],
+      enableBreaks.value && remarkBreaks
+    ].filter(Boolean);
+    return [
+      ...remarkPluginsAhead.value,
+      ...base,
+      ...remarkPlugins.value
+    ];
+  });
+  return {
+    rehypePlugins: rehype,
+    remarkPlugins: remark
+  };
+}
+const themeMap = {
+  light: "vitesse-light",
+  dark: "vitesse-dark"
+};
+function useTheme(options = {}) {
+  const { lightTheme = themeMap.light, darkTheme = themeMap.dark } = options;
+  const internalMode = ref(isRef(options.mode) ? options.mode.value : options.mode || "auto");
+  const mode = computed({
+    get: () => isRef(options.mode) ? options.mode.value : internalMode.value,
+    set: (val) => {
+      internalMode.value = val;
+    }
+  });
+  const systemIsDark = ref(false);
+  if (typeof window !== "undefined") {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    systemIsDark.value = mediaQuery.matches;
+    mediaQuery.addEventListener("change", (e) => {
+      systemIsDark.value = e.matches;
+    });
+  }
+  const isDark = computed(() => {
+    if (mode.value === "auto") {
+      return systemIsDark.value;
+    }
+    return mode.value === "dark";
+  });
+  const actualTheme = computed(() => {
+    const customTheme = isRef(options.theme) ? options.theme.value : options.theme;
+    if (customTheme) return customTheme;
+    return isDark.value ? darkTheme : lightTheme;
+  });
+  const setMode = (newMode) => {
+    internalMode.value = newMode;
+  };
+  const toggleMode = () => {
+    const modes = ["light", "dark", "auto"];
+    const currentIndex = modes.indexOf(mode.value);
+    internalMode.value = modes[(currentIndex + 1) % modes.length];
+  };
+  return {
+    mode,
+    isDark,
+    actualTheme,
+    setMode,
+    toggleMode
+  };
+}
+const markdownRendererProps = {
+  markdown: { type: String, default: "" },
+  allowHtml: { type: Boolean, default: false },
+  enableLatex: { type: Boolean, default: true },
+  enableAnimate: { type: Boolean, default: false },
+  enableBreaks: { type: Boolean, default: true },
+  enableGfm: { type: Boolean, default: true },
+  isDark: { type: Boolean, default: false },
+  shikiTheme: {
+    type: Array,
+    default: () => ["vitesse-light", "vitesse-dark"]
+  },
+  showCodeBlockHeader: { type: Boolean, default: true },
+  stickyCodeBlockHeader: { type: Boolean, default: false },
+  codeMaxHeight: { type: String, default: void 0 },
+  codeBlockActions: { type: Array, default: void 0 },
+  mermaidActions: { type: Array, default: void 0 },
+  mermaidConfig: { type: Object, default: void 0 },
+  codeXRender: { type: Object, default: () => ({}) },
+  customAttrs: { type: Object, default: () => ({}) },
+  remarkPlugins: { type: Array, default: () => [] },
+  remarkPluginsAhead: { type: Array, default: () => [] },
+  rehypePlugins: { type: Array, default: () => [] },
+  rehypePluginsAhead: { type: Array, default: () => [] },
+  rehypeOptions: { type: Object, default: () => ({}) },
+  sanitize: { type: Boolean, default: false },
+  sanitizeOptions: { type: Object, default: () => ({}) }
+};
+function createMarkdownRenderer(name, coreComponent) {
+  return defineComponent({
+    name,
+    props: markdownRendererProps,
+    setup(props, { slots, attrs }) {
+      const { rehypePlugins, remarkPlugins } = usePlugins(props);
+      const components = useComponents(props);
+      const markdown = computed(() => {
+        return props.markdown;
+      });
+      const renderProps = computed(() => ({
+        // markdown 内容
+        markdown: markdown.value,
+        // 自定义属性对象
+        customAttrs: props.customAttrs,
+        // remark 插件列表
+        remarkPlugins: toValue(remarkPlugins),
+        // rehype 插件列表
+        rehypePlugins: toValue(rehypePlugins),
+        // rehype 配置项
+        rehypeOptions: props.rehypeOptions,
+        // 是否启用内容清洗
+        sanitize: props.sanitize,
+        // 清洗选项
+        sanitizeOptions: props.sanitizeOptions
+      }));
+      return () => h(
+        "div",
+        {
+          // 外层容器 class，支持深色模式
+          class: ["x-md-renderer", { "is-dark": props.isDark }],
+          // 外层容器样式，根据深色模式设置背景色和文字颜色
+          style: {
+            backgroundColor: props.isDark ? "#1e1e1e" : "#ffffff",
+            color: props.isDark ? "#e5e5e5" : "#333333",
+            padding: "16px"
+          },
+          // 透传外部传入的 attrs
+          ...attrs
+        },
+        // 渲染核心组件
+        h(
+          coreComponent,
+          { ...renderProps.value, class: "x-md-core" },
+          {
+            // 合并自定义组件和外部插槽
+            ...components,
+            ...slots
+          }
+        )
+      );
+    }
+  });
+}
+const MarkdownRenderer = createMarkdownRenderer("MarkdownRenderer", VueMarkdown);
+const MarkdownRendererAsync = createMarkdownRenderer("MarkdownRendererAsync", VueMarkdownAsync);
+export {
+  CodeBlock as C,
+  MarkdownRenderer as M,
+  VueMarkdown as V,
+  useMermaidZoom as a,
+  useClipboard as b,
+  VueMarkdownAsync as c,
+  downloadSvgAsPng as d,
+  MarkdownRendererAsync as e,
+  renderChildren as f,
+  getVNodeInfos as g,
+  createProcessor as h,
+  useMarkdownProcessor as i,
+  useComponents as j,
+  useHighlight as k,
+  useProcessMarkdown as l,
+  usePlugins as m,
+  useTheme as n,
+  preprocessLaTeX as p,
+  render as r,
+  useMermaid as u
+};
+//# sourceMappingURL=index-Ys7-7uFi.js.map