@simon_he/vue-tui 1.1.4 → 1.1.6

package/dist/mermaid.cjs

@@ -41,6 +41,7 @@ __export(mermaid_exports, {
   markMermaidRenderErrorFatal: () => markMermaidRenderErrorFatal,
   normalizeMermaidImageOptions: () => normalizeMermaidImageOptions,
   resolveMermaidImageColor: () => resolveMermaidImageColor,
+  resolveMermaidSvgForResvg: () => resolveMermaidSvgForResvg,
   setMermaidImageRasterizer: () => setMermaidImageRasterizer,
   subscribeMermaidImage: () => subscribeMermaidImage
 });
@@ -1597,127 +1598,10 @@ var tMermaidTextProps = {
 });
 
 // src/vue/mermaid/beautiful-mermaid.ts
-var import_vue9 = require("vue");
-var BEAUTIFUL_MERMAID_INSTALL_HINT = "Install beautiful-mermaid and use TMermaidText from @simon_he/vue-tui/mermaid or @simon_he/vue-tui/agent/mermaid, or pass a custom renderer prop.", MISSING_BEAUTIFUL_MERMAID_ERROR_CODE = "VUE_TUI_MISSING_BEAUTIFUL_MERMAID", INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE = "VUE_TUI_INVALID_BEAUTIFUL_MERMAID_EXPORT", cachedBeautifulMermaid = null;
-function functionValue(value) {
-  return typeof value == "function" ? value : null;
-}
-function functionProp(target, key) {
-  if (!target || typeof target != "object" || !(key in target))
-    return null;
-  let value = target[key];
-  return typeof value == "function" ? value : null;
-}
-function errorMessage(error) {
-  return error instanceof Error ? error.message : String(error);
-}
-function codedError(message, code) {
-  let error = new Error(message);
-  return error.code = code, error;
-}
-function missingBeautifulMermaidError(error) {
-  if (error && typeof error == "object" && errorCode(error) === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE)
-    return markMermaidRenderErrorFatal(error);
-  let detail = errorMessage(error);
-  return markMermaidRenderErrorFatal(
-    codedError(
-      `${BEAUTIFUL_MERMAID_INSTALL_HINT} (${detail})`,
-      MISSING_BEAUTIFUL_MERMAID_ERROR_CODE
-    )
-  );
-}
-function errorCode(error) {
-  if (!error || typeof error != "object")
-    return "";
-  let value = error.code;
-  return typeof value == "string" ? value : "";
-}
-function errorCause(error) {
-  if (!(!error || typeof error != "object"))
-    return error.cause;
-}
-function isMissingBeautifulMermaid(error) {
-  return isMissingBeautifulMermaidWithSeen(error, /* @__PURE__ */ new WeakSet());
-}
-function isMissingBeautifulMermaidWithSeen(error, seen) {
-  if (error && typeof error == "object") {
-    if (seen.has(error))
-      return !1;
-    seen.add(error);
-  }
-  let message = errorMessage(error), code = errorCode(error);
-  if (code === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE || (/Cannot find package ['"]beautiful-mermaid['"]/.test(message) || /Cannot find module ['"]beautiful-mermaid['"]/.test(message) || /Cannot resolve module ['"]beautiful-mermaid['"]/.test(message) || /Can't resolve ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve module specifier ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve import ['"]beautiful-mermaid['"]/.test(message) || /Could not resolve ['"]beautiful-mermaid['"]/.test(message)) && (code === "" || code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND" || code === "UNRESOLVED_IMPORT"))
-    return !0;
-  let cause = errorCause(error);
-  return cause !== void 0 && isMissingBeautifulMermaidWithSeen(cause, seen);
-}
-function resolveBeautifulMermaidRenderer(mod) {
-  let renderer = functionProp(mod, "renderMermaidASCII") ?? functionProp(mod, "renderMermaidAscii") ?? functionValue(mod.default) ?? functionProp(mod.default, "renderMermaidASCII") ?? functionProp(mod.default, "renderMermaidAscii");
-  if (!renderer)
-    throw markMermaidRenderErrorFatal(
-      codedError(
-        "beautiful-mermaid is installed but does not export renderMermaidASCII.",
-        INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE
-      )
-    );
-  return renderer;
-}
-function hasErrorCode(error, code, seen = /* @__PURE__ */ new WeakSet()) {
-  if (!error || typeof error != "object" || seen.has(error))
-    return !1;
-  if (seen.add(error), errorCode(error) === code)
-    return !0;
-  let cause = errorCause(error);
-  return cause !== void 0 && hasErrorCode(cause, code, seen);
-}
-function isBeautifulMermaidExportError(error) {
-  return hasErrorCode(error, INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE);
-}
-var isTransientBeautifulMermaidRenderError = (error) => !(isMissingBeautifulMermaid(error) || isBeautifulMermaidExportError(error));
-async function loadBeautifulMermaid() {
-  return cachedBeautifulMermaid || (cachedBeautifulMermaid = import("beautiful-mermaid").then((mod) => mod).catch((error) => {
-    throw cachedBeautifulMermaid = null, isMissingBeautifulMermaid(error) ? missingBeautifulMermaidError(error) : markMermaidRenderErrorFatal(error);
-  })), cachedBeautifulMermaid;
-}
-var beautifulMermaidRenderer = async (code, options) => {
-  try {
-    let mod = await loadBeautifulMermaid();
-    return await resolveBeautifulMermaidRenderer(mod)(code, options);
-  } catch (error) {
-    throw isMissingBeautifulMermaid(error) ? missingBeautifulMermaidError(error) : error;
-  }
-};
-function createBeautifulMermaidRenderer() {
-  return beautifulMermaidRenderer;
-}
-var TMermaidText2 = (0, import_vue9.defineComponent)({
-  name: "TMermaidText",
-  inheritAttrs: !1,
-  props: tMermaidTextProps,
-  emits: {
-    copy: (_payload) => !0
-  },
-  setup(props, { attrs, emit, slots }) {
-    return () => {
-      let renderer = props.renderer ?? beautifulMermaidRenderer, shouldRenderSource = props.shouldRenderSource ?? isSimpleMermaidFlowchartSource;
-      return (0, import_vue9.h)(
-        TMermaidText,
-        {
-          ...attrs,
-          ...props,
-          renderer,
-          shouldRenderSource,
-          isTransientError: props.isTransientError ?? isTransientBeautifulMermaidRenderError,
-          onCopy: (payload) => emit("copy", payload)
-        },
-        slots
-      );
-    };
-  }
-}), TMermaid = TMermaidText2, TBeautifulMermaidText = TMermaidText2, TBeautifulMermaid = TMermaidText2;
+var import_vue10 = require("vue");
 
 // src/vue/components/TMermaidImage.ts
-var import_vue10 = require("vue");
+var import_vue9 = require("vue");
 
 // src/core/terminal/create-terminal.ts
 var TERMINAL_PLANE_INTERNALS = Symbol.for("@simon_he/vue-tui:v1:terminal-plane-internals"), TERMINAL_ROOT = Symbol.for("@simon_he/vue-tui:v1:terminal-root");
@@ -1928,6 +1812,10 @@ function createTerminalGraphicPngSequence(options) {
       );
       crop && (placement = { ...placement, ...crop });
     }
+    let transmissionPlacement = options.cropTransmission !== !1 ? placement : {
+      columns: options.transmissionColumns ?? options.placementColumns,
+      rows: options.transmissionRows ?? options.placementRows
+    };
     return {
       type: "sequence",
       protocol: "kitty",
@@ -1935,7 +1823,7 @@ function createTerminalGraphicPngSequence(options) {
         imageId: options.imageId,
         placementId: options.placementId,
         zIndex: options.zIndex,
-        ...placement
+        ...transmissionPlacement
       }),
       resizeSequence: createKittyPlacementSequence({
         imageId: options.imageId,
@@ -2154,6 +2042,177 @@ function svgRenderFunction(mod) {
       return candidate;
   return null;
 }
+function resolveMermaidSvgForResvg(svg, fallbackBg, fallbackFg) {
+  let { bg, fg } = extractSvgRootStyleColors(svg, fallbackBg, fallbackFg), variables = extractSvgCssVariables(svg), root = { bg, fg }, resolved = svg, guard = 0;
+  for (; (resolved.includes("var(") || resolved.includes("color-mix(")) && guard++ < 500; ) {
+    let varIndex = resolved.lastIndexOf("var("), mixIndex = resolved.lastIndexOf("color-mix("), at = Math.max(varIndex, mixIndex);
+    if (at < 0)
+      break;
+    let open = resolved.indexOf("(", at), close = findMatchingSvgParen(resolved, open);
+    if (open < 0 || close < 0)
+      break;
+    let expr = resolved.slice(at, close + 1), color = resolveSvgColorExpr(expr, root, variables);
+    resolved = resolved.slice(0, at) + color + resolved.slice(close + 1);
+  }
+  return stripSvgStyleBlocks(resolved);
+}
+function extractSvgRootStyleColors(svg, fallbackBg, fallbackFg) {
+  let bg = fallbackBg, fg = fallbackFg, styleMatch = /<svg\b[^>]*\bstyle="([^"]*)"/i.exec(svg);
+  if (styleMatch?.[1]) {
+    let bgMatch = /(?:^|;)\s*--bg\s*:\s*([^;]+)/i.exec(styleMatch[1]), fgMatch = /(?:^|;)\s*--fg\s*:\s*([^;]+)/i.exec(styleMatch[1]);
+    bgMatch?.[1] && (bg = bgMatch[1].trim()), fgMatch?.[1] && (fg = fgMatch[1].trim());
+  }
+  return { bg, fg };
+}
+function isSvgVarNameChar(ch) {
+  let code = ch.charCodeAt(0);
+  return code >= 48 && code <= 57 || // 0-9
+  code >= 65 && code <= 90 || // A-Z
+  code >= 97 && code <= 122 || // a-z
+  ch === "_" || ch === "-";
+}
+function isSvgWhitespace(ch) {
+  return ch === " " || ch === "	" || ch === `
+` || ch === "\r" || ch === "\f";
+}
+function findSvgStyleBlock(svg, from = 0) {
+  let lower = svg.toLowerCase(), open = lower.indexOf("<style", from);
+  if (open < 0)
+    return null;
+  let tagEnd = svg.indexOf(">", open);
+  if (tagEnd < 0)
+    return null;
+  let close = lower.indexOf("</style", tagEnd + 1);
+  if (close < 0)
+    return null;
+  let closeEnd = svg.indexOf(">", close);
+  return closeEnd < 0 ? null : { start: open, contentStart: tagEnd + 1, contentEnd: close, end: closeEnd + 1 };
+}
+function extractSvgCssVariables(svg) {
+  let map = /* @__PURE__ */ new Map(), block = findSvgStyleBlock(svg);
+  if (!block)
+    return map;
+  let content = svg.slice(block.contentStart, block.contentEnd), cursor = 0;
+  for (; cursor < content.length; ) {
+    let semi = content.indexOf(";", cursor);
+    if (semi < 0)
+      break;
+    let statement = content.slice(cursor, semi), pos = 0;
+    for (; pos < statement.length; ) {
+      let open = statement.indexOf("--", pos);
+      if (open < 0)
+        break;
+      let nameEnd = open + 2;
+      for (; nameEnd < statement.length && isSvgVarNameChar(statement[nameEnd]); )
+        nameEnd++;
+      if (nameEnd === open + 2) {
+        pos = open + 2;
+        continue;
+      }
+      let colonAt = nameEnd;
+      for (; colonAt < statement.length && isSvgWhitespace(statement[colonAt]); )
+        colonAt++;
+      if (statement[colonAt] !== ":") {
+        pos = open + 2;
+        continue;
+      }
+      let value = statement.slice(colonAt + 1).trim();
+      value !== "" && !value.includes("{") && !value.includes("}") && map.set(statement.slice(open, nameEnd), value);
+      break;
+    }
+    cursor = semi + 1;
+  }
+  return map;
+}
+function isSvgStyleOpener(svg, open) {
+  let after = svg[open + 6];
+  return after === ">" || after === "/" || isSvgWhitespace(after);
+}
+function stripSvgStyleBlocks(svg) {
+  let result = svg, block = findSvgStyleBlock(result);
+  for (; block; )
+    result = result.slice(0, block.start) + result.slice(block.end), block = findSvgStyleBlock(result, block.start);
+  let open = result.toLowerCase().indexOf("<style");
+  for (; open >= 0; ) {
+    if (!isSvgStyleOpener(result, open)) {
+      open = result.toLowerCase().indexOf("<style", open + 6);
+      continue;
+    }
+    let nextLt = result.indexOf("<", open + 6), tagEnd = result.indexOf(">", open);
+    if (tagEnd < 0 || nextLt >= 0 && nextLt < tagEnd) {
+      open = result.toLowerCase().indexOf("<style", open + 6);
+      continue;
+    }
+    result = result.slice(0, open) + result.slice(tagEnd + 1), open = result.toLowerCase().indexOf("<style", open);
+  }
+  return result;
+}
+function findMatchingSvgParen(input, openIndex) {
+  let depth = 0;
+  for (let i = openIndex; i < input.length; i++) {
+    let ch = input[i];
+    if (ch === "(")
+      depth++;
+    else if (ch === ")" && (depth--, depth === 0))
+      return i;
+  }
+  return -1;
+}
+function findTopLevelSvgComma(input) {
+  let depth = 0;
+  for (let i = 0; i < input.length; i++) {
+    let ch = input[i];
+    if (ch === "(")
+      depth++;
+    else if (ch === ")")
+      depth--;
+    else if (ch === "," && depth === 0)
+      return i;
+  }
+  return -1;
+}
+function normalizeHexColor(value) {
+  let match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
+  if (!match)
+    return null;
+  let hex = match[1];
+  return hex.length === 3 && (hex = hex.split("").map((ch) => ch + ch).join("")), `#${hex.toLowerCase()}`;
+}
+function mixSrgbColors(aHex, bHex, percent) {
+  let a = parseHexRgb(aHex), b = parseHexRgb(bHex), p = Math.max(0, Math.min(100, percent)) / 100, mix = (x, y) => Math.round(x * p + y * (1 - p)), toHex = (value) => value.toString(16).padStart(2, "0");
+  return `#${toHex(mix(a[0], b[0]))}${toHex(mix(a[1], b[1]))}${toHex(mix(a[2], b[2]))}`;
+}
+function parseHexRgb(hex) {
+  return [
+    parseInt(hex.slice(1, 3), 16),
+    parseInt(hex.slice(3, 5), 16),
+    parseInt(hex.slice(5, 7), 16)
+  ];
+}
+function resolveSvgColorExpr(expr, root, variables) {
+  let value = expr.trim();
+  if (value.startsWith("var(")) {
+    let close = findMatchingSvgParen(value, 3);
+    if (close < 0)
+      return value;
+    let inner = value.slice(4, close).trim(), comma = findTopLevelSvgComma(inner), name = (comma < 0 ? inner : inner.slice(0, comma)).trim(), fallback = comma < 0 ? "" : inner.slice(comma + 1).trim(), direct = name === "--fg" ? root.fg : name === "--bg" ? root.bg : variables.get(name);
+    return direct != null ? resolveSvgColorExpr(direct, root, variables) : fallback ? resolveSvgColorExpr(fallback, root, variables) : value;
+  }
+  if (value.startsWith("color-mix(")) {
+    let close = findMatchingSvgParen(value, 9);
+    if (close < 0)
+      return value;
+    let afterMethod = value.slice(10, close).trim().replace(/^in\s+srgb\s*,\s*/i, ""), comma = findTopLevelSvgComma(afterMethod);
+    if (comma < 0)
+      return value;
+    let left = afterMethod.slice(0, comma).trim(), right = afterMethod.slice(comma + 1).trim(), leftMatch = /^([^%\s]+)\s+([\d.]+)%$/.exec(left) ?? /^([\d.]+)%\s+([^%\s]+)$/.exec(left);
+    if (!leftMatch)
+      return value;
+    let a = normalizeHexColor(resolveSvgColorExpr(leftMatch[1], root, variables)), b = normalizeHexColor(resolveSvgColorExpr(right, root, variables));
+    return !a || !b ? value : mixSrgbColors(a, b, Number(leftMatch[2]));
+  }
+  return normalizeHexColor(value) ?? value;
+}
 function loadBuiltinMermaidRasterizer() {
   return builtinRasterizerLoad || (builtinRasterizerLoad = (async () => {
     try {
@@ -2176,7 +2235,7 @@ function loadBuiltinMermaidRasterizer() {
         }), svgText = String(svg ?? "");
         if (!svgText.includes("<svg"))
           return null;
-        let rendered = new Resvg(svgText, {
+        let resolvedSvg = resolveMermaidSvgForResvg(svgText, options.bg, options.fg), rendered = new Resvg(resolvedSvg, {
           background: "rgba(0,0,0,0)"
         }).render(), naturalWidth = positiveInt(rendered?.width), naturalHeight = positiveInt(rendered?.height), png = typeof rendered?.asPng == "function" ? rendered.asPng() : void 0;
         if (!png || png.length < 8 || naturalWidth == null || naturalHeight == null)
@@ -2290,6 +2349,25 @@ var tMermaidImageProps = {
   maxWidthCells: { type: Number, default: void 0 },
   maxHeightCells: { type: Number, default: void 0 },
   padding: { type: Number, default: void 0 },
+  // Adaptive ANSI fallback. When the terminal has no graphics protocol (or the
+  // image rasterizer fails for this source), the component renders the diagram
+  // as ASCII text through a text renderer before falling back to the raw
+  // source. Without a textRenderer the component stays image-or-raw.
+  textRenderer: {
+    type: Function,
+    default: void 0
+  },
+  // Eligibility guard for the ANSI fallback; returning false keeps the raw
+  // source visible (e.g. only render simple flowcharts as ASCII).
+  shouldRenderSource: {
+    type: Function,
+    default: void 0
+  },
+  // Spacing/theme options forwarded to the ANSI text renderer.
+  textOptions: {
+    type: Object,
+    default: void 0
+  },
   // Box chrome (mirrors TMermaidText).
   box: { type: Boolean, default: !0 },
   title: { type: String, default: "mermaid" },
@@ -2302,15 +2380,28 @@ var tMermaidImageProps = {
   maxRenderSourceLines: { type: Number, default: DEFAULT_MERMAID_IMAGE_MAX_RENDER_SOURCE_LINES },
   // Clicking the diagram (or the copy button) copies the full raw mermaid source.
   copyOnClick: { type: Boolean, default: !0 },
-  ascii: { type: Boolean, default: !1 }
-}, TMermaidImage = (0, import_vue10.defineComponent)({
+  ascii: { type: Boolean, default: !1 },
+  // Wheel zoom (Kitty graphics only): with the zoom modifier held, wheel over
+  // the image zooms centered on the mouse, clamped to the container area.
+  // Without the modifier the wheel passes through to the surrounding scroll
+  // container (historical-message scrolling is never blocked). iTerm2 has no
+  // in-place resize sequence, so zoom stays disabled there.
+  zoomOnWheel: { type: Boolean, default: !0 },
+  zoomModifier: {
+    type: String,
+    default: "metaCtrl"
+  },
+  minZoom: { type: Number, default: 1 },
+  maxZoom: { type: Number, default: 6 },
+  zoomSensitivity: { type: Number, default: 2e-3 }
+}, TMermaidImage = (0, import_vue9.defineComponent)({
   name: "TMermaidImage",
   props: tMermaidImageProps,
   emits: {
     copy: (_payload) => !0
   },
   setup(props, { emit }) {
-    let instance = (0, import_vue10.getCurrentInstance)(), terminalContext = useTerminal(), { terminal, defaultStyle, scheduler, widthProvider } = terminalContext, layout = useLayout(), { visible, rootProps } = useVisibility(), parentEventZ = (0, import_vue10.inject)(EventZIndexContextKey, (0, import_vue10.computed)(() => 0)), imageCells = (0, import_vue10.shallowRef)(null), documentVersion = (0, import_vue10.shallowRef)(0), copied = (0, import_vue10.shallowRef)(!1), builtOnce = !1, renderVersion = 0, alive = !0, frameTaskId = `TMermaidImage:${instance?.uid ?? "unknown"}:mermaid-image`, uid = instance?.uid ?? 0, copiedTimer = null, copyRequestVersion = 0, activeGraphicId = null, source = (0, import_vue10.computed)(() => props.code ?? props.content ?? ""), waitingForStreamingSourceToFinish = (0, import_vue10.computed)(() => props.streaming && !props.final), graphicsOutputVersion = (0, import_vue10.shallowRef)(getTerminalGraphicsOutputVersion(terminal)), graphicsOutput = (0, import_vue10.computed)(() => (graphicsOutputVersion.value, getTerminalGraphicsOutput(terminal))), graphicsProtocol = (0, import_vue10.computed)(() => {
+    let instance = (0, import_vue9.getCurrentInstance)(), terminalContext = useTerminal(), { terminal, defaultStyle, scheduler, widthProvider } = terminalContext, layout = useLayout(), { visible, rootProps } = useVisibility(), parentEventZ = (0, import_vue9.inject)(EventZIndexContextKey, (0, import_vue9.computed)(() => 0)), imageCells = (0, import_vue9.shallowRef)(null), textSnapshot = (0, import_vue9.shallowRef)(null), zoomScale = (0, import_vue9.shallowRef)(1), panX = (0, import_vue9.shallowRef)(0), panY = (0, import_vue9.shallowRef)(0), documentVersion = (0, import_vue9.shallowRef)(0), copied = (0, import_vue9.shallowRef)(!1), dragState = null, dragMoved = !1, lastDragAt = 0, DRAG_CLICK_SUPPRESS_MS = 250, builtOnce = !1, renderVersion = 0, alive = !0, frameTaskId = `TMermaidImage:${instance?.uid ?? "unknown"}:mermaid-image`, uid = instance?.uid ?? 0, copiedTimer = null, copyRequestVersion = 0, activeGraphicId = null, activeImageSignature = "", source = (0, import_vue9.computed)(() => props.code ?? props.content ?? ""), waitingForStreamingSourceToFinish = (0, import_vue9.computed)(() => props.streaming && !props.final), graphicsOutputVersion = (0, import_vue9.shallowRef)(getTerminalGraphicsOutputVersion(terminal)), graphicsOutput = (0, import_vue9.computed)(() => (graphicsOutputVersion.value, getTerminalGraphicsOutput(terminal))), graphicsProtocol = (0, import_vue9.computed)(() => {
       let output = graphicsOutput.value;
       if (!output?.capabilities.supported)
         return null;
@@ -2353,15 +2444,51 @@ var tMermaidImageProps = {
       } catch {
       }
     }
-    let hasBox = (0, import_vue10.computed)(() => props.box !== !1), normalizedWidth = (0, import_vue10.computed)(() => {
+    function clampZoom(zoom) {
+      let min = Number.isFinite(Number(props.minZoom)) ? Math.max(0.05, Number(props.minZoom)) : 1, max = Number.isFinite(Number(props.maxZoom)) ? Math.max(min, Number(props.maxZoom)) : Math.max(min, 6);
+      return Math.min(max, Math.max(min, zoom));
+    }
+    function zoomSensitivity() {
+      let value = Number(props.zoomSensitivity);
+      return Number.isFinite(value) && value > 0 ? value : 2e-3;
+    }
+    function wheelZoomFactor(deltaY, deltaMode) {
+      let sign = deltaY > 0 ? -1 : 1, sensitivity = zoomSensitivity(), abs = Math.abs(deltaY), magnitude = (deltaMode ?? 0) === 1 || abs > 0 && abs <= 3 && Number.isInteger(deltaY) ? 100 : abs;
+      return Math.exp(sign * magnitude * sensitivity);
+    }
+    function resetZoomState() {
+      zoomScale.value === 1 && panX.value === 0 && panY.value === 0 || (zoomScale.value = 1, panX.value = 0, panY.value = 0, dragState = null);
+    }
+    function hasZoomModifier(event) {
+      let modifier = props.zoomModifier ?? "metaCtrl";
+      return modifier === "none" ? !0 : modifier === "meta" ? event.metaKey === !0 : modifier === "ctrl" ? event.ctrlKey === !0 : event.ctrlKey === !0 || event.metaKey === !0;
+    }
+    function clampPan() {
+      let inner = innerRectFrom(fullRect.value), fit = displayFit.value;
+      if (!fit || inner.w <= 0 || inner.h <= 0)
+        return;
+      let zoom = clampZoom(zoomScale.value), fullW = fit.displayW * zoom, fullH = fit.displayH * zoom, fitOriginX = inner.x + (inner.w > fit.displayW ? Math.floor((inner.w - fit.displayW) / 2) : 0), nextX = panX.value, nextY = panY.value;
+      fullW <= inner.w ? nextX = 0 : nextX = Math.min(
+        inner.x - fitOriginX,
+        Math.max(inner.x + inner.w - fullW - fitOriginX, nextX)
+      ), fullH <= inner.h ? nextY = 0 : nextY = Math.min(0, Math.max(inner.h - fullH, nextY)), nextX !== panX.value && (panX.value = nextX), nextY !== panY.value && (panY.value = nextY);
+    }
+    function setImageCells(cells) {
+      let signature = cells ? cells.base64 : "";
+      signature !== activeImageSignature && (activeImageSignature = signature, resetZoomState()), imageCells.value = cells;
+    }
+    let hasBox = (0, import_vue9.computed)(() => props.box !== !1), normalizedWidth = (0, import_vue9.computed)(() => {
       let width = Math.floor(Number(props.w));
       return Number.isFinite(width) ? Math.max(0, width) : 0;
-    }), reservesBoxRows = (0, import_vue10.computed)(() => hasBox.value && normalizedWidth.value >= 2), boxChars = (0, import_vue10.computed)(
+    }), reservesBoxRows = (0, import_vue9.computed)(() => hasBox.value && normalizedWidth.value >= 2), boxChars = (0, import_vue9.computed)(
       () => props.ascii ? ASCII_MERMAID_IMAGE_BOX_CHARS : UNICODE_MERMAID_IMAGE_BOX_CHARS
-    ), sourceLines = (0, import_vue10.computed)(() => splitRenderedOutput2(source.value)), currentStyle = (0, import_vue10.computed)(() => props.style ?? defaultStyle.value), innerWidth = (0, import_vue10.computed)(() => {
+    ), sourceLines = (0, import_vue9.computed)(() => splitRenderedOutput2(source.value)), displayLines = (0, import_vue9.computed)(() => {
+      let snapshot = textSnapshot.value;
+      return snapshot && snapshot.source === source.value && hasVisibleTextOutput(snapshot.lines) ? snapshot.lines : sourceLines.value;
+    }), currentStyle = (0, import_vue9.computed)(() => props.style ?? defaultStyle.value), innerWidth = (0, import_vue9.computed)(() => {
       let w = normalizedWidth.value;
       return reservesBoxRows.value ? Math.max(0, w - 2) : w;
-    }), fixedInnerHeight = (0, import_vue10.computed)(() => {
+    }), fixedInnerHeight = (0, import_vue9.computed)(() => {
       if (props.h == null)
         return 0;
       let h4 = Math.floor(Number(props.h));
@@ -2369,23 +2496,23 @@ var tMermaidImageProps = {
         return 0;
       let value = Math.max(0, h4);
       return reservesBoxRows.value ? Math.max(0, value - 2) : value;
-    }), autoHeight = (0, import_vue10.computed)(() => props.h == null), displayFit = (0, import_vue10.computed)(() => {
+    }), autoHeight = (0, import_vue9.computed)(() => props.h == null), displayFit = (0, import_vue9.computed)(() => {
       let cells = imageCells.value;
       return cells ? autoHeight.value ? fitImageCells(cells, innerWidth.value, Number.MAX_SAFE_INTEGER) : fitImageCells(cells, innerWidth.value, fixedInnerHeight.value) : null;
-    }), contentHeight = (0, import_vue10.computed)(() => autoHeight.value ? displayFit.value?.displayH ?? Math.max(1, sourceLines.value.length) : fixedInnerHeight.value), fullHeight = (0, import_vue10.computed)(() => {
+    }), contentHeight = (0, import_vue9.computed)(() => autoHeight.value ? displayFit.value?.displayH ?? Math.max(1, displayLines.value.length) : fixedInnerHeight.value), fullHeight = (0, import_vue9.computed)(() => {
       if (props.h != null) {
         let h4 = Math.floor(Number(props.h));
         return Number.isFinite(h4) ? Math.max(0, h4) : 0;
       }
       return reservesBoxRows.value ? contentHeight.value + 2 : contentHeight.value;
-    }), fullRect = (0, import_vue10.computed)(() => translateRect(
+    }), fullRect = (0, import_vue9.computed)(() => translateRect(
       { x: props.x, y: props.y, w: props.w, h: fullHeight.value },
       layout.originX,
       layout.originY
-    )), absRect = (0, import_vue10.computed)(() => {
+    )), absRect = (0, import_vue9.computed)(() => {
       let translated = fullRect.value;
       return layout.clipRect ? intersectRect(translated, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 } : translated;
-    }), copyLabel = (0, import_vue10.computed)(() => copied.value ? props.copiedText : props.copyText);
+    }), copyLabel = (0, import_vue9.computed)(() => copied.value ? props.copiedText : props.copyText);
     function cellWidth(value) {
       return withTextWidthProvider(widthProvider, () => textCellWidth(value));
     }
@@ -2414,6 +2541,60 @@ var tMermaidImageProps = {
         padding: props.padding
       });
     }
+    function hasVisibleTextOutput(lines) {
+      return lines.some((line) => line.trim().length > 0);
+    }
+    function resolveTextOptions() {
+      return {
+        ...props.textOptions ?? {},
+        useAscii: props.ascii,
+        colorMode: "none"
+      };
+    }
+    function textRenderSignature(code) {
+      return [
+        code,
+        props.ascii ? "a" : "",
+        JSON.stringify(props.textOptions ?? null),
+        props.textRenderer != null ? "r" : "",
+        props.shouldRenderSource != null ? "g" : ""
+      ].join("");
+    }
+    async function renderTextWithTimeout(renderer, code, options) {
+      let timeoutMs = normalizeNonNegativeInt2(props.renderTimeoutMs, 0);
+      if (timeoutMs <= 0)
+        return await renderer(code, options);
+      let timer = null;
+      try {
+        return await Promise.race([
+          Promise.resolve().then(() => renderer(code, options)),
+          new Promise((_resolve, reject) => {
+            timer = setTimeout(() => reject(new Error("Mermaid text render timeout")), timeoutMs);
+          })
+        ]);
+      } finally {
+        timer != null && clearTimeout(timer);
+      }
+    }
+    async function runCustomRasterizer(code, options) {
+      let renderer = props.renderer;
+      if (!renderer)
+        return null;
+      let timeoutMs = normalizeNonNegativeInt2(props.renderTimeoutMs, 0), run = () => renderer(code, options);
+      if (timeoutMs <= 0)
+        return await run() ?? null;
+      let timer = null;
+      try {
+        return await Promise.race([
+          run(),
+          new Promise((resolve) => {
+            timer = setTimeout(() => resolve(null), timeoutMs);
+          })
+        ]) ?? null;
+      } finally {
+        timer != null && clearTimeout(timer);
+      }
+    }
     function shouldSkipRenderForSize(code) {
       let maxChars = normalizeNonNegativeInt2(
         props.maxRenderSourceChars,
@@ -2443,46 +2624,87 @@ var tMermaidImageProps = {
         timer != null && clearTimeout(timer);
       }
     }
-    async function renderImage(version) {
+    async function renderTextFallback(version) {
+      let code = source.value, renderer = props.textRenderer;
+      if (!renderer)
+        return;
+      let guard = props.shouldRenderSource;
+      if (guard) {
+        let eligible = !1;
+        try {
+          eligible = guard(code, { final: props.final, streaming: props.streaming });
+        } catch {
+          eligible = !1;
+        }
+        if (!eligible)
+          return;
+      }
+      try {
+        let rendered = await renderTextWithTimeout(renderer, code, resolveTextOptions());
+        if (!alive || version !== renderVersion)
+          return;
+        let lines = splitRenderedOutput2(rendered);
+        if (!hasVisibleTextOutput(lines))
+          return;
+        textSnapshot.value = (0, import_vue9.markRaw)({
+          source: code,
+          signature: textRenderSignature(code),
+          lines: (0, import_vue9.markRaw)(lines)
+        }), bump();
+      } catch {
+      }
+    }
+    async function renderPresentation(version) {
       let code = source.value;
       if (!code.trim()) {
         if (!alive || version !== renderVersion)
           return;
-        imageCells.value = null, bump();
+        setImageCells(null), textSnapshot.value = null, bump();
         return;
       }
       if (waitingForStreamingSourceToFinish.value || shouldSkipRenderForSize(code)) {
         if (!alive || version !== renderVersion)
           return;
-        imageCells.value = null, bump();
+        setImageCells(null), textSnapshot.value = null, bump();
         return;
       }
-      if (imageCells.value = null, bump(), !graphicsProtocol.value)
-        return;
-      let options = resolveImageOptions(), cached = getCachedMermaidImage(code, options);
+      let protocol = graphicsProtocol.value, options = resolveImageOptions(), cached = protocol && !props.renderer ? getCachedMermaidImage(code, options) : null;
       if (cached) {
         if (!alive || version !== renderVersion)
           return;
-        imageCells.value = cached, bump();
+        setImageCells(cached), textSnapshot.value = null, bump();
         return;
       }
-      if (!isMermaidImageRendererReady()) {
-        loadMermaidImageRenderer().then((ready) => {
-          !alive || version !== renderVersion || !ready || renderImage(version);
-        });
-        return;
+      let currentSignature = textRenderSignature(code), keepText = textSnapshot.value != null && textSnapshot.value.source === code && textSnapshot.value.signature === currentSignature;
+      if (keepText || (setImageCells(null), textSnapshot.value = null, bump()), protocol) {
+        let result = null;
+        if (props.renderer)
+          result = await runCustomRasterizer(code, options);
+        else if (isMermaidImageRendererReady())
+          result = await rasterizeWithTimeout(code, options);
+        else {
+          loadMermaidImageRenderer().then((ready) => {
+            !alive || version !== renderVersion || !ready || renderPresentation(version);
+          });
+          return;
+        }
+        if (!alive || version !== renderVersion)
+          return;
+        if (result) {
+          setImageCells(result), textSnapshot.value = null, bump();
+          return;
+        }
       }
-      let result = await rasterizeWithTimeout(code, options);
-      !alive || version !== renderVersion || (imageCells.value = result, bump());
+      keepText || await renderTextFallback(version);
     }
     function scheduleRender() {
       let version = ++renderVersion;
-      if (resetCopyFeedback(!1), imageCells.value = null, waitingForStreamingSourceToFinish.value) {
+      if (resetCopyFeedback(!1), setImageCells(null), waitingForStreamingSourceToFinish.value) {
         builtOnce = !0, scheduler.cancelFrameTask?.(frameTaskId), bump();
         return;
       }
       if (!builtOnce || !props.streaming) {
-        builtOnce = !0, renderImage(version);
+        builtOnce = !0, renderPresentation(version);
         return;
       }
       scheduler.queueFrameTask({
@@ -2491,11 +2713,11 @@ var tMermaidImageProps = {
         priority: "low",
         sync: !1,
         run: () => {
-          alive && version === renderVersion && renderImage(version);
+          alive && version === renderVersion && renderPresentation(version);
         }
-      }) === !1 && renderImage(version);
+      }) === !1 && renderPresentation(version);
     }
-    (0, import_vue10.watch)(
+    (0, import_vue9.watch)(
       [
         source,
         () => props.renderer,
@@ -2511,7 +2733,11 @@ var tMermaidImageProps = {
         () => props.final,
         () => props.maxRenderSourceChars,
         () => props.maxRenderSourceLines,
-        graphicsOutputVersion
+        () => props.textRenderer,
+        () => props.shouldRenderSource,
+        () => props.textOptions,
+        () => props.ascii,
+        () => props.zoomModifier
       ],
       () => {
         scheduleRender();
@@ -2519,11 +2745,14 @@ var tMermaidImageProps = {
       { immediate: !0, deep: !0 }
     );
     let unsubscribeMermaidImage = subscribeMermaidImage(() => {
-      alive && scheduleRender();
+      if (!alive || !graphicsProtocol.value || props.renderer)
+        return;
+      let cached = getCachedMermaidImage(source.value, resolveImageOptions());
+      cached && alive && (setImageCells(cached), textSnapshot.value = null, bump());
     }), unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
       alive && (graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal), scheduleRender());
     });
-    (0, import_vue10.onBeforeUnmount)(() => {
+    (0, import_vue9.onBeforeUnmount)(() => {
       alive = !1, renderVersion++, clearCopiedTimer(), queueClearGraphic(), unsubscribeMermaidImage(), unsubscribeGraphicsOutput(), scheduler.cancelFrameTask?.(frameTaskId);
     });
     function canDrawBox(width, height) {
@@ -2583,7 +2812,7 @@ var tMermaidImageProps = {
       return rowIndex === rowHeight - 1 ? `${chars.bl}${repeatChar(chars.h, innerW)}${chars.br}` : `${chars.v}${contentLine(rowIndex - 1, innerW, !0)}${chars.v}`;
     }
     function contentLine(rowIndex, width, pad) {
-      let src = imageCells.value != null && displayFit.value != null && graphicsProtocol.value != null ? spaces(width) : sourceLines.value[rowIndex] ?? "", clipped = sliceCells(src, width);
+      let src = imageCells.value != null && displayFit.value != null && graphicsProtocol.value != null ? spaces(width) : displayLines.value[rowIndex] ?? "", clipped = sliceCells(src, width);
       return pad ? padCells(clipped, width) : clipped;
     }
     function innerRectFrom(full) {
@@ -2601,11 +2830,21 @@ var tMermaidImageProps = {
         queueClearGraphic();
         return;
       }
-      let offsetX = inner.w > fit.displayW ? Math.floor((inner.w - fit.displayW) / 2) : 0, rect = {
-        x: inner.x + offsetX,
-        y: inner.y,
-        w: fit.displayW,
-        h: fit.displayH
+      let zoom = clampZoom(zoomScale.value), fitW = fit.displayW, fitH = fit.displayH, fullRect2 = {
+        x: inner.x + (inner.w > fitW ? Math.floor((inner.w - fitW) / 2) : 0) + panX.value,
+        y: inner.y + panY.value,
+        w: fitW * zoom,
+        h: fitH * zoom
+      }, visible2 = intersectRect(fullRect2, inner);
+      if (!visible2 || visible2.w < 1 || visible2.h < 1) {
+        queueClearGraphic();
+        return;
+      }
+      let rectX = Math.max(inner.x, Math.round(visible2.x)), rectY = Math.max(inner.y, Math.round(visible2.y)), rect = {
+        x: rectX,
+        y: rectY,
+        w: Math.max(1, Math.min(inner.x + inner.w, rectX + Math.round(visible2.w)) - rectX),
+        h: Math.max(1, Math.min(inner.y + inner.h, rectY + Math.round(visible2.h)) - rectY)
       }, imageId = stableTerminalGraphicNumericId(`mermaid-image:${uid}:${renderVersion}:img`), placementId = stableTerminalGraphicNumericId(
         `mermaid-image:${uid}:${renderVersion}:plc`
       ), built = createTerminalGraphicPngSequence({
@@ -2617,10 +2856,16 @@ var tMermaidImageProps = {
         rows: cells.heightCells,
         sourceWidth: cells.naturalWidth,
         sourceHeight: cells.naturalHeight,
-        placementColumns: fit.displayW,
-        placementRows: fit.displayH,
+        placementColumns: rect.w,
+        placementRows: rect.h,
+        // Keep the initial transmission stable at the fit size without a
+        // source crop so wheel zoom can replace the placement (a=p) without
+        // re-sending the PNG, and every placement references the full image.
+        transmissionColumns: fitW,
+        transmissionRows: fitH,
+        cropTransmission: !1,
         rect,
-        fullRect: rect,
+        fullRect: fullRect2,
         zIndex: -1,
         fallback: source.value
       });
@@ -2644,16 +2889,19 @@ var tMermaidImageProps = {
         id,
         x: rect.x,
         y: rect.y,
-        w: fit.displayW,
-        h: fit.displayH,
+        w: rect.w,
+        h: rect.h,
         protocol,
         sequence: built.sequence,
         resizeSequence: built.resizeSequence,
         clearSequence: built.clearSequence,
-        fallbackText: source.value
+        fallbackText: source.value,
+        // Same image data + placement id: let the stdout renderer replace the
+        // placement with the resize sequence instead of re-sending the PNG.
+        placementMoveWithoutClear: protocol === "kitty"
       }) ? activeGraphicId = id : queueClearGraphic();
     }
-    let copyHitRect = (0, import_vue10.computed)(() => {
+    let copyHitRect = (0, import_vue9.computed)(() => {
       let full = fullRect.value;
       if (!visible.value || !props.copyButton || !canDrawBox(full.w, full.h))
         return { x: 0, y: 0, w: 0, h: 0 };
@@ -2667,8 +2915,8 @@ var tMermaidImageProps = {
         h: 1
       };
       return layout.clipRect ? intersectRect(raw, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 } : raw;
-    }), contentHitRect = (0, import_vue10.computed)(() => {
-      if (!visible.value || !props.copyOnClick)
+    }), contentHitRect = (0, import_vue9.computed)(() => {
+      if (!visible.value)
         return { x: 0, y: 0, w: 0, h: 0 };
       let full = fullRect.value;
       if (full.w <= 0 || full.h <= 0)
@@ -2706,12 +2954,52 @@ var tMermaidImageProps = {
       requestVersion === copyRequestVersion && source.value === text && (ok ? showCopiedFeedback() : setCopied(!1)), emit("copy", ok ? { text, ok } : { text, ok, error: copyError });
     }
     function onCopyClick(event) {
-      event.preventDefault(), event.stopPropagation(), copySource();
+      event.preventDefault(), event.stopPropagation(), !(Date.now() - lastDragAt < DRAG_CLICK_SUPPRESS_MS) && copySource();
     }
     function onCopyKeydown(event) {
       event.key !== "Enter" && event.key !== " " || (event.preventDefault(), event.stopPropagation(), copySource());
     }
-    let copyNodeActive = (0, import_vue10.computed)(
+    let zoomEnabled = (0, import_vue9.computed)(
+      () => props.zoomOnWheel !== !1 && imageCells.value != null && displayFit.value != null && graphicsProtocol.value === "kitty" && contentHitRect.value.w > 0 && contentHitRect.value.h > 0
+    ), dragEnabled = (0, import_vue9.computed)(
+      () => props.zoomOnWheel !== !1 && imageCells.value != null && displayFit.value != null && graphicsProtocol.value === "kitty" && zoomScale.value > 1 && contentHitRect.value.w > 0 && contentHitRect.value.h > 0
+    );
+    function onWheel(event) {
+      if (!zoomEnabled.value || !hasZoomModifier(event))
+        return;
+      event.preventDefault(), event.stopPropagation();
+      let deltaY = event.deltaY ?? 0;
+      if (!Number.isFinite(deltaY) || deltaY === 0)
+        return;
+      let inner = innerRectFrom(fullRect.value), fit = displayFit.value;
+      if (!fit || inner.w <= 0 || inner.h <= 0)
+        return;
+      let currentZoom = clampZoom(zoomScale.value), fitW = fit.displayW, fitH = fit.displayH, fitOriginX = inner.x + (inner.w > fitW ? Math.floor((inner.w - fitW) / 2) : 0), fullX = fitOriginX + panX.value, fullY = inner.y + panY.value, mouseX = event.cellX, mouseY = event.cellY, fx = currentZoom > 0 ? (mouseX - fullX) / (fitW * currentZoom) : 0.5, fy = currentZoom > 0 ? (mouseY - fullY) / (fitH * currentZoom) : 0.5, nextZoom = clampZoom(currentZoom * wheelZoomFactor(deltaY, event.deltaMode));
+      if (nextZoom === currentZoom)
+        return;
+      let nextW = fitW * nextZoom, nextH = fitH * nextZoom, nextX = mouseX - fx * nextW, nextY = mouseY - fy * nextH;
+      nextW <= inner.w ? nextX = inner.x + (inner.w - nextW) / 2 : nextX = Math.min(inner.x, Math.max(inner.x + inner.w - nextW, nextX)), nextH <= inner.h ? nextY = inner.y + (inner.h - nextH) / 2 : nextY = Math.min(inner.y, Math.max(inner.y + inner.h - nextH, nextY)), zoomScale.value = nextZoom, panX.value = nextX - fitOriginX, panY.value = nextY - inner.y, clampPan(), bump();
+    }
+    function onPointerDown(event) {
+      dragEnabled.value && (event.preventDefault(), event.stopPropagation(), dragState = {
+        startX: event.cellX,
+        startY: event.cellY,
+        panStartX: panX.value,
+        panStartY: panY.value
+      }, dragMoved = !1);
+    }
+    function onPointerMove(event) {
+      let drag = dragState;
+      if (!drag)
+        return;
+      event.preventDefault(), event.stopPropagation();
+      let dx = event.cellX - drag.startX, dy = event.cellY - drag.startY;
+      !dragMoved && Math.abs(dx) + Math.abs(dy) >= 1 && (dragMoved = !0), dragMoved && (panX.value = drag.panStartX + dx, panY.value = drag.panStartY + dy, clampPan(), bump());
+    }
+    function onPointerUp(event) {
+      dragState && (event.preventDefault(), event.stopPropagation(), dragState = null, dragMoved && (lastDragAt = Date.now()));
+    }
+    let copyNodeActive = (0, import_vue9.computed)(
       () => visible.value && props.copyButton && copyHitRect.value.w > 0 && copyHitRect.value.h > 0
     );
     useTerminalNode(() => ({
@@ -2725,8 +3013,8 @@ var tMermaidImageProps = {
         keydown: onCopyKeydown
       } : {}
     }));
-    let contentNodeActive = (0, import_vue10.computed)(
-      () => visible.value && props.copyOnClick && contentHitRect.value.w > 0 && contentHitRect.value.h > 0
+    let contentNodeActive = (0, import_vue9.computed)(
+      () => visible.value && (props.copyOnClick || zoomEnabled.value || dragEnabled.value) && contentHitRect.value.w > 0 && contentHitRect.value.h > 0
     );
     return useTerminalNode(() => ({
       rect: contentHitRect.value,
@@ -2735,7 +3023,11 @@ var tMermaidImageProps = {
       focusable: !1,
       selectable: !1,
       handlers: contentNodeActive.value ? {
-        click: onCopyClick
+        click: props.copyOnClick ? onCopyClick : void 0,
+        wheel: zoomEnabled.value ? onWheel : void 0,
+        pointerdown: dragEnabled.value ? onPointerDown : void 0,
+        pointermove: dragEnabled.value ? onPointerMove : void 0,
+        pointerup: dragEnabled.value ? onPointerUp : void 0
       } : {}
     })), useRenderNode(() => ({
       zIndex: props.zIndex,
@@ -2746,6 +3038,11 @@ var tMermaidImageProps = {
         fullRect.value,
         imageCells.value,
         displayFit.value,
+        zoomScale.value,
+        panX.value,
+        panY.value,
+        textSnapshot.value,
+        displayLines.value,
         sourceLines.value,
         currentStyle.value,
         props.clear,
@@ -2788,6 +3085,148 @@ var tMermaidImageProps = {
             paintRow(y);
         });
       }
-    })), () => (0, import_vue10.h)("span", rootProps);
+    })), () => (0, import_vue9.h)("span", rootProps);
   }
 });
+
+// src/vue/mermaid/beautiful-mermaid.ts
+var BEAUTIFUL_MERMAID_INSTALL_HINT = "Install beautiful-mermaid and use TMermaidText from @simon_he/vue-tui/mermaid or @simon_he/vue-tui/agent/mermaid, or pass a custom renderer prop.", MISSING_BEAUTIFUL_MERMAID_ERROR_CODE = "VUE_TUI_MISSING_BEAUTIFUL_MERMAID", INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE = "VUE_TUI_INVALID_BEAUTIFUL_MERMAID_EXPORT", cachedBeautifulMermaid = null;
+function functionValue(value) {
+  return typeof value == "function" ? value : null;
+}
+function functionProp(target, key) {
+  if (!target || typeof target != "object" || !(key in target))
+    return null;
+  let value = target[key];
+  return typeof value == "function" ? value : null;
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function codedError(message, code) {
+  let error = new Error(message);
+  return error.code = code, error;
+}
+function missingBeautifulMermaidError(error) {
+  if (error && typeof error == "object" && errorCode(error) === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE)
+    return markMermaidRenderErrorFatal(error);
+  let detail = errorMessage(error);
+  return markMermaidRenderErrorFatal(
+    codedError(
+      `${BEAUTIFUL_MERMAID_INSTALL_HINT} (${detail})`,
+      MISSING_BEAUTIFUL_MERMAID_ERROR_CODE
+    )
+  );
+}
+function errorCode(error) {
+  if (!error || typeof error != "object")
+    return "";
+  let value = error.code;
+  return typeof value == "string" ? value : "";
+}
+function errorCause(error) {
+  if (!(!error || typeof error != "object"))
+    return error.cause;
+}
+function isMissingBeautifulMermaid(error) {
+  return isMissingBeautifulMermaidWithSeen(error, /* @__PURE__ */ new WeakSet());
+}
+function isMissingBeautifulMermaidWithSeen(error, seen) {
+  if (error && typeof error == "object") {
+    if (seen.has(error))
+      return !1;
+    seen.add(error);
+  }
+  let message = errorMessage(error), code = errorCode(error);
+  if (code === MISSING_BEAUTIFUL_MERMAID_ERROR_CODE || (/Cannot find package ['"]beautiful-mermaid['"]/.test(message) || /Cannot find module ['"]beautiful-mermaid['"]/.test(message) || /Cannot resolve module ['"]beautiful-mermaid['"]/.test(message) || /Can't resolve ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve module specifier ['"]beautiful-mermaid['"]/.test(message) || /Failed to resolve import ['"]beautiful-mermaid['"]/.test(message) || /Could not resolve ['"]beautiful-mermaid['"]/.test(message)) && (code === "" || code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND" || code === "UNRESOLVED_IMPORT"))
+    return !0;
+  let cause = errorCause(error);
+  return cause !== void 0 && isMissingBeautifulMermaidWithSeen(cause, seen);
+}
+function resolveBeautifulMermaidRenderer(mod) {
+  let renderer = functionProp(mod, "renderMermaidASCII") ?? functionProp(mod, "renderMermaidAscii") ?? functionValue(mod.default) ?? functionProp(mod.default, "renderMermaidASCII") ?? functionProp(mod.default, "renderMermaidAscii");
+  if (!renderer)
+    throw markMermaidRenderErrorFatal(
+      codedError(
+        "beautiful-mermaid is installed but does not export renderMermaidASCII.",
+        INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE
+      )
+    );
+  return renderer;
+}
+function hasErrorCode(error, code, seen = /* @__PURE__ */ new WeakSet()) {
+  if (!error || typeof error != "object" || seen.has(error))
+    return !1;
+  if (seen.add(error), errorCode(error) === code)
+    return !0;
+  let cause = errorCause(error);
+  return cause !== void 0 && hasErrorCode(cause, code, seen);
+}
+function isBeautifulMermaidExportError(error) {
+  return hasErrorCode(error, INVALID_BEAUTIFUL_MERMAID_EXPORT_ERROR_CODE);
+}
+var isTransientBeautifulMermaidRenderError = (error) => !(isMissingBeautifulMermaid(error) || isBeautifulMermaidExportError(error));
+async function loadBeautifulMermaid() {
+  return cachedBeautifulMermaid || (cachedBeautifulMermaid = import("beautiful-mermaid").then((mod) => mod).catch((error) => {
+    throw cachedBeautifulMermaid = null, isMissingBeautifulMermaid(error) ? missingBeautifulMermaidError(error) : markMermaidRenderErrorFatal(error);
+  })), cachedBeautifulMermaid;
+}
+var beautifulMermaidRenderer = async (code, options) => {
+  try {
+    let mod = await loadBeautifulMermaid();
+    return await resolveBeautifulMermaidRenderer(mod)(code, options);
+  } catch (error) {
+    throw isMissingBeautifulMermaid(error) ? missingBeautifulMermaidError(error) : error;
+  }
+};
+function createBeautifulMermaidRenderer() {
+  return beautifulMermaidRenderer;
+}
+var TMermaidText2 = (0, import_vue10.defineComponent)({
+  name: "TMermaidText",
+  inheritAttrs: !1,
+  props: tMermaidTextProps,
+  emits: {
+    copy: (_payload) => !0
+  },
+  setup(props, { attrs, emit, slots }) {
+    return () => {
+      let renderer = props.renderer ?? beautifulMermaidRenderer, shouldRenderSource = props.shouldRenderSource ?? isSimpleMermaidFlowchartSource;
+      return (0, import_vue10.h)(
+        TMermaidText,
+        {
+          ...attrs,
+          ...props,
+          renderer,
+          shouldRenderSource,
+          isTransientError: props.isTransientError ?? isTransientBeautifulMermaidRenderError,
+          onCopy: (payload) => emit("copy", payload)
+        },
+        slots
+      );
+    };
+  }
+}), TMermaid = (0, import_vue10.defineComponent)({
+  name: "TMermaid",
+  inheritAttrs: !1,
+  props: tMermaidImageProps,
+  emits: {
+    copy: (_payload) => !0
+  },
+  setup(props, { attrs, emit, slots }) {
+    return () => {
+      let { renderer: _legacyTextRenderer, ...rest } = props, textRenderer = props.textRenderer ?? props.renderer ?? beautifulMermaidRenderer;
+      return (0, import_vue10.h)(
+        TMermaidImage,
+        {
+          ...attrs,
+          ...rest,
+          textRenderer,
+          shouldRenderSource: props.shouldRenderSource ?? isSimpleMermaidFlowchartSource,
+          onCopy: (payload) => emit("copy", payload)
+        },
+        slots
+      );
+    };
+  }
+}), TBeautifulMermaidText = TMermaidText2, TBeautifulMermaid = TMermaid;