@simon_he/vue-tui 1.1.3 → 1.1.4

package/dist/agent.cjs

@@ -6152,6 +6152,91 @@ function formatItermDimension(value) {
   let raw = String(value ?? "").trim();
   return validateIterm2Dimension(raw) ? raw : "auto";
 }
+function resolveKittyPngSourceCrop(rect, fullRect, sourceWidth, sourceHeight) {
+  if (fullRect.w <= 0 || fullRect.h <= 0)
+    return null;
+  let offsetX = Math.max(0, rect.x - fullRect.x), offsetY = Math.max(0, rect.y - fullRect.y), visibleW = Math.max(0, Math.min(rect.w, fullRect.w - offsetX)), visibleH = Math.max(0, Math.min(rect.h, fullRect.h - offsetY));
+  if (offsetX <= 0 && offsetY <= 0 && visibleW >= fullRect.w && visibleH >= fullRect.h)
+    return null;
+  let sourceX = Math.max(
+    0,
+    Math.min(sourceWidth - 1, Math.floor(offsetX * sourceWidth / fullRect.w))
+  ), sourceY = Math.max(
+    0,
+    Math.min(sourceHeight - 1, Math.floor(offsetY * sourceHeight / fullRect.h))
+  ), sourceRight = Math.max(
+    sourceX + 1,
+    Math.min(sourceWidth, Math.ceil((offsetX + visibleW) * sourceWidth / fullRect.w))
+  ), sourceBottom = Math.max(
+    sourceY + 1,
+    Math.min(sourceHeight, Math.ceil((offsetY + visibleH) * sourceHeight / fullRect.h))
+  );
+  return {
+    sourceX,
+    sourceY,
+    sourceWidth: sourceRight - sourceX,
+    sourceHeight: sourceBottom - sourceY
+  };
+}
+function createTerminalGraphicPngSequence(options) {
+  if (options.protocol === "kitty") {
+    let placement = {
+      columns: options.placementColumns,
+      rows: options.placementRows
+    };
+    if (options.rect && options.fullRect && options.sourceWidth && options.sourceHeight) {
+      let crop = resolveKittyPngSourceCrop(
+        options.rect,
+        options.fullRect,
+        options.sourceWidth,
+        options.sourceHeight
+      );
+      crop && (placement = { ...placement, ...crop });
+    }
+    return {
+      type: "sequence",
+      protocol: "kitty",
+      sequence: createKittyGraphicsSequence(options.base64, {
+        imageId: options.imageId,
+        placementId: options.placementId,
+        zIndex: options.zIndex,
+        ...placement
+      }),
+      resizeSequence: createKittyPlacementSequence({
+        imageId: options.imageId,
+        placementId: options.placementId,
+        zIndex: options.zIndex,
+        ...placement
+      }),
+      clearSequence: createKittyDeleteGraphicsSequence({
+        imageId: options.imageId,
+        placementId: options.placementId,
+        freeImageData: options.freeImageData
+      }),
+      ...options.fallback != null ? { fallback: options.fallback } : {},
+      ...options.cols != null ? { cols: options.cols } : {},
+      ...options.rows != null ? { rows: options.rows } : {},
+      ...options.sourceWidth != null ? { sourceWidth: options.sourceWidth } : {},
+      ...options.sourceHeight != null ? { sourceHeight: options.sourceHeight } : {},
+      ...options.zIndex != null ? { zIndex: options.zIndex } : {}
+    };
+  }
+  return options.protocol === "iterm2" ? {
+    type: "sequence",
+    protocol: "iterm2",
+    sequence: createIterm2InlineImageSequence(options.base64, {
+      width: options.cols,
+      height: options.rows,
+      preserveAspectRatio: !0,
+      doNotMoveCursor: !0
+    }),
+    ...options.fallback != null ? { fallback: options.fallback } : {},
+    ...options.cols != null ? { cols: options.cols } : {},
+    ...options.rows != null ? { rows: options.rows } : {},
+    ...options.sourceWidth != null ? { sourceWidth: options.sourceWidth } : {},
+    ...options.sourceHeight != null ? { sourceHeight: options.sourceHeight } : {}
+  } : null;
+}
 
 // src/vue/components/TAgentTerminalGraphic.ts
 var NO_GRAPHICS_CAPABILITIES = Object.freeze({
@@ -14790,185 +14875,236 @@ function readMarkdownImageDimensions(base64) {
   return null;
 }
 
-// src/vue/markdown/math.ts
-var loadedKatex = null, katexLoad = null, katexListeners = /* @__PURE__ */ new Set();
-function resolveKatexRenderer(value) {
-  if (!value || typeof value != "object")
-    return null;
-  let renderToString = value.renderToString;
-  return typeof renderToString == "function" ? { renderToString } : null;
+// src/vue/markdown/math-image.ts
+var DEFAULT_MATH_IMAGE_OPTIONS = Object.freeze({
+  cellWidthPx: 8,
+  cellHeightPx: 16,
+  scale: 2,
+  color: "#f8f8f2",
+  maxWidthCells: 0,
+  baselineRatio: 0.78
+}), MAX_CACHE_ENTRIES = 64, MAX_FAILED_ENTRIES = 128, mathImageCache = /* @__PURE__ */ new Map(), mathImageFailed = /* @__PURE__ */ new Set(), mathImageInflight = /* @__PURE__ */ new Map(), mathImageListeners = /* @__PURE__ */ new Set(), customRasterizer = null, builtinRasterizerLoad = null, builtinRasterizerReady = !1, NAMED_STYLE_FG_HEX = Object.freeze({
+  black: "#000000",
+  red: "#e53935",
+  green: "#43a047",
+  yellow: "#fdd835",
+  blue: "#1e88e5",
+  magenta: "#d81b60",
+  cyan: "#00acc1",
+  white: "#ffffff",
+  gray: "#9e9e9e",
+  grey: "#9e9e9e",
+  blackBright: "#4a4a4a",
+  redBright: "#ff6e6e",
+  greenBright: "#69db7c",
+  yellowBright: "#ffe066",
+  blueBright: "#74c0fc",
+  magentaBright: "#f783ac",
+  cyanBright: "#3bc9db",
+  whiteBright: "#f8f8f2",
+  grayBright: "#bdbdbd",
+  greyBright: "#bdbdbd"
+});
+function resolveMarkdownMathColor(fg) {
+  if (typeof fg != "string" || !fg)
+    return;
+  let trimmed = fg.trim();
+  return trimmed.startsWith("#") && /^#[0-9a-f]{3,8}$/i.test(trimmed) ? trimmed.toLowerCase() : NAMED_STYLE_FG_HEX[trimmed.toLowerCase()];
 }
-function subscribeMarkdownMathRenderer(listener) {
-  return katexListeners.add(listener), () => katexListeners.delete(listener);
+function normalizeMathImageOptions(options) {
+  return {
+    cellWidthPx: Math.max(
+      1,
+      Math.floor(options?.cellWidthPx ?? DEFAULT_MATH_IMAGE_OPTIONS.cellWidthPx)
+    ),
+    cellHeightPx: Math.max(
+      1,
+      Math.floor(options?.cellHeightPx ?? DEFAULT_MATH_IMAGE_OPTIONS.cellHeightPx)
+    ),
+    scale: Math.max(1, Math.floor(options?.scale ?? DEFAULT_MATH_IMAGE_OPTIONS.scale)),
+    color: options?.color ?? DEFAULT_MATH_IMAGE_OPTIONS.color,
+    maxWidthCells: Math.max(0, Math.floor(options?.maxWidthCells ?? 0)),
+    baselineRatio: clamp01(options?.baselineRatio ?? DEFAULT_MATH_IMAGE_OPTIONS.baselineRatio)
+  };
 }
-async function loadMarkdownMathRenderer() {
-  return loadedKatex ? !0 : (katexLoad || (katexLoad = import("katex").then((mod) => {
-    let renderer = resolveKatexRenderer(mod.default) ?? resolveKatexRenderer(mod);
-    if (!renderer)
-      return !1;
-    loadedKatex = renderer;
-    for (let listener of katexListeners)
-      listener();
-    return !0;
-  }).catch(() => !1)), katexLoad);
+function clamp01(value) {
+  return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0.78;
 }
-var KATEX_TEXT_OPTIONS = Object.freeze({
-  output: "mathml",
-  throwOnError: !1,
-  strict: "ignore",
-  trust: !1,
-  maxSize: 20,
-  maxExpand: 200
-}), KATEX_VALIDATE_OPTIONS = Object.freeze({
-  ...KATEX_TEXT_OPTIONS,
-  throwOnError: !0
-}), TEX_SYMBOLS = Object.freeze({
-  alpha: "\u03B1",
-  beta: "\u03B2",
-  gamma: "\u03B3",
-  delta: "\u03B4",
-  epsilon: "\u03B5",
-  theta: "\u03B8",
-  lambda: "\u03BB",
-  mu: "\u03BC",
-  pi: "\u03C0",
-  rho: "\u03C1",
-  sigma: "\u03C3",
-  tau: "\u03C4",
-  phi: "\u03C6",
-  omega: "\u03C9",
-  Gamma: "\u0393",
-  Delta: "\u0394",
-  Theta: "\u0398",
-  Lambda: "\u039B",
-  Pi: "\u03A0",
-  Sigma: "\u03A3",
-  Phi: "\u03A6",
-  Omega: "\u03A9",
-  int: "\u222B",
-  sum: "\u2211",
-  prod: "\u220F",
-  infty: "\u221E",
-  infinity: "\u221E",
-  pm: "\xB1",
-  times: "\xD7",
-  cdot: "\xB7",
-  div: "\xF7",
-  le: "\u2264",
-  leq: "\u2264",
-  ge: "\u2265",
-  geq: "\u2265",
-  neq: "\u2260",
-  ne: "\u2260",
-  approx: "\u2248",
-  equiv: "\u2261",
-  to: "\u2192",
-  rightarrow: "\u2192",
-  leftarrow: "\u2190",
-  leftrightarrow: "\u2194",
-  partial: "\u2202",
-  nabla: "\u2207",
-  sqrt: "\u221A"
-}), SUPPORTED_COMMANDS = /* @__PURE__ */ new Set([...Object.keys(TEX_SYMBOLS), "frac", "sqrt"]);
-function decodeXmlEntities(value) {
-  return value.replace(/&(?:#(\d+)|#x([0-9a-f]+)|([a-z]+));/gi, (match, dec, hex, named) => {
-    if (dec)
-      return String.fromCodePoint(Number(dec));
-    if (hex)
-      return String.fromCodePoint(Number.parseInt(hex, 16));
-    switch (String(named).toLowerCase()) {
-      case "amp":
-        return "&";
-      case "lt":
-        return "<";
-      case "gt":
-        return ">";
-      case "quot":
-        return '"';
-      case "apos":
-        return "'";
-      default:
-        return match;
-    }
-  });
+function subscribeMarkdownMathImage(listener) {
+  return mathImageListeners.add(listener), () => mathImageListeners.delete(listener);
 }
-function mathmlTagName(tag) {
-  let start = tag.startsWith("/") ? 1 : 0, end = start;
-  for (; end < tag.length; ) {
-    let ch = tag[end];
-    if (ch === " " || ch === "	" || ch === `
-` || ch === "\r" || ch === "/")
-      break;
-    end++;
-  }
-  return tag.slice(start, end).toLowerCase();
+function isMarkdownMathImageRendererReady() {
+  return customRasterizer != null || builtinRasterizerReady;
 }
-function textFromKatexMathml(html) {
-  let readable = "", offset = 0, lowerHtml = html.toLowerCase();
-  for (; offset < html.length; ) {
-    let tagStart = html.indexOf("<", offset);
-    if (tagStart < 0) {
-      readable += html.slice(offset);
-      break;
-    }
-    readable += html.slice(offset, tagStart);
-    let tagEnd = html.indexOf(">", tagStart + 1);
-    if (tagEnd < 0)
-      break;
-    let tag = html.slice(tagStart + 1, tagEnd).trim(), tagName = mathmlTagName(tag), closing = tag.startsWith("/");
-    if (!closing && tagName === "annotation") {
-      let annotationEnd = lowerHtml.indexOf("</annotation>", tagEnd + 1);
-      offset = annotationEnd < 0 ? tagEnd + 1 : annotationEnd + 13;
-      continue;
-    }
-    !closing && tagName === "mfrac" ? readable += "(" : closing && tagName === "mfrac" ? readable += ")" : !closing && tagName === "mspace" && (readable += " "), offset = tagEnd + 1;
-  }
-  return sanitizeInlineText(
-    decodeXmlEntities(readable).replace(/[<>]/g, "").replace(/\s+/g, " ").trim()
+async function loadMarkdownMathImageRenderer() {
+  return isMarkdownMathImageRendererReady() ? !0 : (builtinRasterizerReady = (customRasterizer ?? await loadBuiltinMathRasterizer()) != null, builtinRasterizerReady);
+}
+function hashMathImageKey(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++)
+    hash ^= value.charCodeAt(i), hash = Math.imul(hash, 16777619);
+  return (hash >>> 0).toString(36);
+}
+function mathImageCacheKey(tex, mode, options) {
+  return hashMathImageKey(
+    [
+      mode,
+      tex,
+      options.cellWidthPx,
+      options.cellHeightPx,
+      options.scale,
+      options.maxWidthCells,
+      options.color,
+      options.baselineRatio
+    ].join("")
   );
 }
-function approximateTexToUnicode(tex) {
-  let out = String(tex ?? "");
-  return out = out.replace(/\\frac\s*\{([^{}]*)\}\s*\{([^{}]*)\}/g, "$1/$2"), out = out.replace(/\\sqrt\s*\{([^{}]*)\}/g, "\u221A($1)"), out = out.replace(
-    /\\([A-Za-z]+)\b/g,
-    (_match, command) => TEX_SYMBOLS[command] ?? command
-  ), out = out.replace(/\\([^A-Za-z])/g, "$1"), out = out.replace(/[{}]/g, ""), out = out.replace(/\s+/g, " ").trim(), sanitizeInlineText(out.replace(/[<>]/g, ""));
+function notifyMathImageListeners() {
+  for (let listener of mathImageListeners)
+    try {
+      listener();
+    } catch {
+    }
+}
+function getCachedMarkdownMathImage(tex, mode, options) {
+  return mathImageCache.get(mathImageCacheKey(tex, mode, normalizeMathImageOptions(options))) ?? null;
+}
+function evictOldestMathImageEntry() {
+  let oldest = mathImageCache.keys().next().value;
+  oldest != null && mathImageCache.delete(oldest);
 }
-function canRenderTerminalMath(tex, katex) {
+async function getMarkdownMathImage(tex, mode, options) {
   let source = String(tex ?? "").trim();
-  if (!source || source.length > 160 || /\\(?:begin|end|left|right|matrix|cases|array|align|color|href|html|includegraphics|class|style|tag|text|operatorname)\b/.test(
-    source
-  ))
-    return !1;
-  let commands = source.matchAll(/\\([A-Za-z]+)\b/g);
-  for (let match of commands)
-    if (!SUPPORTED_COMMANDS.has(match[1] ?? ""))
-      return !1;
-  try {
-    katex.renderToString(source, KATEX_VALIDATE_OPTIONS);
-  } catch {
-    return !1;
+  if (!source)
+    return null;
+  let normalized = normalizeMathImageOptions(options), key = mathImageCacheKey(source, mode, normalized), cached = mathImageCache.get(key);
+  if (cached)
+    return cached;
+  if (mathImageFailed.has(key))
+    return null;
+  let inflight = mathImageInflight.get(key);
+  if (inflight)
+    return inflight;
+  let pending = (async () => {
+    try {
+      let rasterizer = customRasterizer ?? await loadBuiltinMathRasterizer();
+      if (!rasterizer)
+        return null;
+      let result = await rasterizer(source, mode, normalized);
+      if (result && result.base64)
+        mathImageCache.set(key, result), mathImageCache.size > MAX_CACHE_ENTRIES && evictOldestMathImageEntry(), notifyMathImageListeners();
+      else if (result === null && (mathImageFailed.add(key), mathImageFailed.size > MAX_FAILED_ENTRIES)) {
+        let oldest = mathImageFailed.values().next().value;
+        oldest != null && mathImageFailed.delete(oldest);
+      }
+      return result;
+    } catch {
+      return null;
+    } finally {
+      mathImageInflight.delete(key);
+    }
+  })();
+  return mathImageInflight.set(key, pending), pending;
+}
+function enqueueMarkdownMathImages(rows, options, viewport) {
+  let first = Math.max(0, Math.floor(viewport?.firstRow ?? 0)), last = Math.min(rows.length, Math.max(first, Math.ceil(viewport?.lastRow ?? rows.length)));
+  for (let index = first; index < last; index++) {
+    let row = rows[index];
+    if (row)
+      for (let segment of row.segments) {
+        let graphic = segment.graphic;
+        if (graphic?.kind === "math") {
+          !graphic.base64 && graphic.tex && getMarkdownMathImage(graphic.tex, "display", options);
+          continue;
+        }
+        segment.mathAction?.pendingImage && segment.mathAction?.source && getMarkdownMathImage(
+          segment.mathAction.source,
+          segment.mathAction.mode ?? "display",
+          options
+        );
+      }
   }
-  return !0;
 }
-function renderMarkdownInlineMathSegment(tex) {
-  let source = String(tex ?? "");
-  if (!source.trim())
-    return { text: "", supported: !1 };
-  let katex = loadedKatex;
-  if (!katex)
-    return loadMarkdownMathRenderer(), { text: "", supported: !1 };
-  if (!canRenderTerminalMath(source, katex))
-    return { text: "", supported: !1 };
-  try {
-    let html = katex.renderToString(source, KATEX_TEXT_OPTIONS), rendered = /\\frac\b/.test(source) ? approximateTexToUnicode(source) : textFromKatexMathml(html);
-    if (rendered && !rendered.includes("\\"))
-      return { text: rendered, supported: !0 };
-  } catch {
-    return { text: "", supported: !1 };
-  }
-  let approximate = approximateTexToUnicode(source);
-  return approximate && !approximate.includes("\\") ? { text: approximate, supported: !0 } : { text: "", supported: !1 };
+function base64FromBytes(bytes) {
+  let binary = "";
+  for (let offset = 0; offset < bytes.length; offset += 32768)
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + 32768));
+  return typeof btoa == "function" ? btoa(binary) : Buffer.from(bytes).toString("base64");
+}
+function extractSvgMarkup(containerMarkup) {
+  let start = containerMarkup.indexOf("<svg");
+  if (start < 0)
+    return "";
+  let end = containerMarkup.lastIndexOf("</svg>");
+  return end < start ? "" : containerMarkup.slice(start, end + 6);
+}
+var RESVG_MODULE_ID = "@resvg/resvg-js";
+function loadBuiltinMathRasterizer() {
+  return builtinRasterizerLoad || (builtinRasterizerLoad = (async () => {
+    try {
+      let [
+        { mathjax },
+        { TeX },
+        { SVG },
+        { liteAdaptor },
+        { RegisterHTMLHandler },
+        { AllPackages },
+        { Resvg }
+      ] = await Promise.all([
+        import("mathjax-full/js/mathjax.js"),
+        import("mathjax-full/js/input/tex.js"),
+        import("mathjax-full/js/output/svg.js"),
+        import("mathjax-full/js/adaptors/liteAdaptor.js"),
+        import("mathjax-full/js/handlers/html.js"),
+        import("mathjax-full/js/input/tex/AllPackages.js"),
+        import(RESVG_MODULE_ID)
+      ]), adaptor = liteAdaptor();
+      RegisterHTMLHandler(adaptor);
+      let texInput = new TeX({
+        packages: AllPackages,
+        formatError: () => {
+          throw new Error("Malformed TeX");
+        }
+      }), svgOutput = new SVG({ fontCache: "none" }), document2 = mathjax.document("", { InputJax: texInput, OutputJax: svgOutput });
+      return async (source, mode, options) => {
+        let node = document2.convert(source, { display: mode === "display" }), svg = extractSvgMarkup(adaptor.outerHTML(node));
+        if (!svg)
+          return null;
+        let widthEx = Number(/width="([\d.]+)ex"/.exec(svg)?.[1] ?? 0), heightEx = Number(/height="([\d.]+)ex"/.exec(svg)?.[1] ?? 0);
+        if (!(widthEx > 0) || !(heightEx > 0))
+          return null;
+        let exPx = options.cellHeightPx / 2 * options.scale;
+        if (mode === "inline") {
+          let naturalH = heightEx * exPx, naturalW = widthEx * exPx;
+          if (naturalH > options.cellHeightPx * options.scale * 2)
+            return null;
+          let rectH = options.cellHeightPx * options.scale, k = rectH / naturalH, contentW = Math.max(1, Math.round(naturalW * k)), widthCells = Math.max(
+            1,
+            Math.ceil(contentW / (options.cellWidthPx * options.scale))
+          ), rectW = widthCells * options.cellWidthPx * options.scale, verticalAlignEx = Number(/vertical-align:\s*(-?[\d.]+)ex/.exec(svg)?.[1] ?? 0), formulaBaseline = (heightEx - Math.abs(verticalAlignEx)) * exPx * k, offsetY = options.baselineRatio * rectH - formulaBaseline, inner = svg.replace(/style="vertical-align:[^"]*"/, "").replace(/width="[\d.]+ex"/, `width="${contentW}px"`).replace(/height="[\d.]+ex"/, `height="${rectH}px"`), wrapped = `<svg xmlns="http://www.w3.org/2000/svg" color="${options.color}" width="${rectW}px" height="${rectH}px" viewBox="0 0 ${rectW} ${rectH}"><g transform="translate(0 ${offsetY.toFixed(2)})">${inner}</g></svg>`, pngInline = new Resvg(wrapped, { background: "rgba(0,0,0,0)" }).render().asPng();
+          return !pngInline || pngInline.length < 8 ? null : {
+            base64: base64FromBytes(pngInline),
+            widthCells,
+            heightCells: 1
+          };
+        }
+        let widthPx = Math.max(1, Math.round(widthEx * exPx)), heightPx = Math.max(1, Math.round(heightEx * exPx));
+        if (options.maxWidthCells > 0) {
+          let maxPx = options.maxWidthCells * options.cellWidthPx * options.scale;
+          widthPx > maxPx && (heightPx = Math.max(1, Math.round(heightPx * (maxPx / widthPx))), widthPx = maxPx);
+        }
+        svg = svg.replace(/style="vertical-align:[^"]*"/, "").replace(/width="[\d.]+ex"/, `width="${widthPx}px"`).replace(/height="[\d.]+ex"/, `height="${heightPx}px"`).replace(/<svg/, `<svg color="${options.color}"`);
+        let png = new Resvg(svg, { background: "rgba(0,0,0,0)" }).render().asPng();
+        return !png || png.length < 8 ? null : {
+          base64: base64FromBytes(png),
+          widthCells: Math.max(1, Math.round(widthPx / (options.cellWidthPx * options.scale))),
+          heightCells: Math.max(1, Math.round(heightPx / (options.cellHeightPx * options.scale)))
+        };
+      };
+    } catch {
+      return null;
+    }
+  })()), builtinRasterizerLoad;
 }
 
 // node_modules/.pnpm/stream-markdown-parser@1.1.9/node_modules/stream-markdown-parser/dist/index.js
@@ -32196,17 +32332,26 @@ function inlineNodeSegments(nodes, theme, inheritedStyle, options = {}) {
         break;
       case "math_inline":
         {
-          let source = stringProp(node, "content"), raw = stringProp(node, "raw") || `$${source}$`, rendered = renderMarkdownInlineMathSegment(source);
-          pushTextSegments(
+          let source = stringProp(node, "content"), markup = stringProp(node, "markup") || "$", raw = stringProp(node, "raw") || `${markup}${source}${markup}`, mathStyle = mergeStyle10(inheritedStyle, theme.inlineCode), tex = sanitizeInlineText(source), mathEnabled = options.math?.enabled !== !1, cached = tex && mathEnabled ? getCachedMarkdownMathImage(tex, "inline", options.math) : null;
+          cached ? pushTextSegments(
             out,
-            rendered.supported ? rendered.text : raw,
-            mergeStyle10(inheritedStyle, theme.inlineCode),
-            void 0,
+            raw,
+            mathStyle,
             {
-              source,
+              kind: "math",
+              tex,
               raw,
-              rendered: rendered.supported
-            }
+              base64: cached.base64,
+              displayWidth: cached.widthCells,
+              displayHeight: cached.heightCells
+            },
+            { source: tex, raw, rendered: !0 }
+          ) : pushTextSegments(
+            out,
+            raw,
+            mathStyle,
+            void 0,
+            tex && mathEnabled ? { source: tex, raw, rendered: !1, pendingImage: !0, mode: "inline" } : { source, raw, rendered: !1 }
           );
         }
         break;
@@ -32246,7 +32391,8 @@ function blockFromParagraph(node, key, context, theme) {
     key,
     inlineNodeSegments(nodeChildren(node), theme, void 0, {
       imageResolver: context.imageResolver,
-      imageSize: context.imageSize
+      imageSize: context.imageSize,
+      math: context.math
     }),
     context
   );
@@ -32257,7 +32403,8 @@ function blockFromHeading(node, key, context, theme) {
     key,
     inlineNodeSegments(nodeChildren(node), theme, theme.heading[level - 1], {
       imageResolver: context.imageResolver,
-      imageSize: context.imageSize
+      imageSize: context.imageSize,
+      math: context.math
     }),
     context
   );
@@ -32287,7 +32434,7 @@ function blockFromHtmlBlock(node, key, context, theme) {
       ],
       theme,
       void 0,
-      { imageResolver: context.imageResolver }
+      { imageResolver: context.imageResolver, math: context.math }
     ),
     context
   );
@@ -32310,14 +32457,16 @@ function blockFromTable(node, key, context, theme) {
   ).map((cell) => ({
     segments: inlineNodeSegments(nodeChildren(cell), theme, theme.strong, {
       imageResolver: context.imageResolver,
-      imageSize: context.imageSize
+      imageSize: context.imageSize,
+      math: context.math
     }),
     align: tableCellAlign(cell)
   })), rows = tableRows(node, "rows").map(
     (row) => tableCells(row).map((cell) => ({
       segments: inlineNodeSegments(nodeChildren(cell), theme, void 0, {
         imageResolver: context.imageResolver,
-        imageSize: context.imageSize
+        imageSize: context.imageSize,
+        math: context.math
       }),
       align: tableCellAlign(cell)
     }))
@@ -32347,10 +32496,12 @@ function listItemBlocks(item, index, ordered, start, context, theme, keyPrefix)
     text: spaces(markerCells)
   }, firstContext = {
     prefixSegments: [...context.prefixSegments, markerSegment],
-    continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment]
+    continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment],
+    math: context.math
   }, nestedContext = {
     prefixSegments: [...context.continuationPrefixSegments, indentSegment],
-    continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment]
+    continuationPrefixSegments: [...context.continuationPrefixSegments, indentSegment],
+    math: context.math
   }, children = nodeChildren(item);
   if (!children.length)
     return [inlineBlock(`${keyPrefix}-empty`, [], firstContext)];
@@ -32389,6 +32540,37 @@ function listBlocks(node, context, theme, keyPrefix) {
     );
   return out;
 }
+function blockMathSegments(source, raw, math, theme) {
+  let tex = sanitizeInlineText(source), canUseImage = !!tex && math.enabled !== !1, cached = canUseImage ? getCachedMarkdownMathImage(tex, "display", math) : null;
+  if (canUseImage && cached)
+    return [
+      {
+        text: raw,
+        style: theme.math,
+        graphic: {
+          kind: "math",
+          tex,
+          raw,
+          base64: cached.base64,
+          displayWidth: cached.widthCells,
+          displayHeight: cached.heightCells
+        },
+        mathAction: { source: tex, raw, rendered: !0 }
+      }
+    ];
+  let maxWidth = Math.max(8, Math.floor(math.maxWidthCells ?? 0) || 40), rawCells = textCellWidth(raw), inner = Math.min(Math.max(1, rawCells + 2), maxWidth), pad = Math.max(0, inner - rawCells);
+  return [
+    { text: `\u250C${"\u2500".repeat(inner)}\u2510`, style: theme.math },
+    HARD_BREAK_SEGMENT,
+    {
+      text: `\u2502 ${raw}${" ".repeat(pad)}\u2502`,
+      style: theme.math,
+      mathAction: { source: tex, raw, rendered: !1, pendingImage: !0 }
+    },
+    HARD_BREAK_SEGMENT,
+    { text: `\u2514${"\u2500".repeat(inner)}\u2518`, style: theme.math }
+  ];
+}
 function nodeToBlocks(node, context, theme, keyPrefix) {
   switch (node.type) {
     case "paragraph":
@@ -32413,6 +32595,19 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
           prefixSegments: context.prefixSegments
         }
       ];
+    case "math_block":
+      return [
+        inlineBlock(
+          keyPrefix,
+          blockMathSegments(
+            stringProp(node, "content"),
+            stringProp(node, "raw") || `$${stringProp(node, "content")}$`,
+            context.math ?? { enabled: !0 },
+            theme
+          ),
+          context
+        )
+      ];
     case "blockquote": {
       let quoteSegment = {
         text: "\u2502 ",
@@ -32421,7 +32616,8 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
         prefixSegments: [...context.prefixSegments, quoteSegment],
         continuationPrefixSegments: [...context.continuationPrefixSegments, quoteSegment],
         imageResolver: context.imageResolver,
-        imageSize: context.imageSize
+        imageSize: context.imageSize,
+        math: context.math
       };
       return childSequenceToBlocks(nodeChildren(node), quoteContext, theme, keyPrefix);
     }
@@ -32437,7 +32633,8 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
           keyPrefix,
           inlineNodeSegments(nodeChildren(node), theme, void 0, {
             imageResolver: context.imageResolver,
-            imageSize: context.imageSize
+            imageSize: context.imageSize,
+            math: context.math
           }),
           context
         )
@@ -32450,7 +32647,10 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
       return [
         inlineBlock(
           keyPrefix,
-          inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }),
+          inlineNodeSegments([node], theme, void 0, {
+            imageResolver: context.imageResolver,
+            math: context.math
+          }),
           context
         )
       ];
@@ -32458,7 +32658,10 @@ function nodeToBlocks(node, context, theme, keyPrefix) {
   return nodeChildren(node).length ? childSequenceToBlocks(nodeChildren(node), context, theme, keyPrefix) : [
     inlineBlock(
       keyPrefix,
-      inlineNodeSegments([node], theme, void 0, { imageResolver: context.imageResolver }),
+      inlineNodeSegments([node], theme, void 0, {
+        imageResolver: context.imageResolver,
+        math: context.math
+      }),
       context
     )
   ];
@@ -32471,7 +32674,8 @@ function markdownAstToBlocks(nodes, theme, options = {}) {
         prefixSegments: EMPTY_PREFIX,
         continuationPrefixSegments: EMPTY_PREFIX,
         imageResolver: options.imageResolver,
-        imageSize: options.imageSize
+        imageSize: options.imageSize,
+        math: options.math
       },
       theme,
       "md"
@@ -32592,7 +32796,8 @@ function wrapLineSegments(source, prefixSegments, continuationPrefixSegments, wi
         style: segment.style,
         cells,
         graphic: segment.graphic,
-        fallbackText: segment.text
+        fallbackText: segment.text,
+        ...segment.mathAction ? { mathAction: segment.mathAction } : {}
       }), row.remaining -= cells;
       continue;
     }
@@ -32818,7 +33023,8 @@ function styleSignature(style) {
 function inlineSegmentSignature(segment) {
   let graphic = segment.graphic ? [
     segment.graphic.kind,
-    segment.graphic.src,
+    segment.graphic.src ?? "",
+    segment.graphic.tex ?? "",
     segment.graphic.alt ?? "",
     segment.graphic.mime ?? "",
     segment.graphic.base64 ?? "",
@@ -32947,7 +33153,8 @@ var DEFAULT_HEADING = Object.freeze([
   listMarker: freezeStyle({ fg: "cyanBright", bold: !0 }),
   codeBlock: freezeStyle({ fg: "yellowBright" }),
   thematicBreak: freezeStyle({ dim: !0 }),
-  html: freezeStyle({ dim: !0 })
+  html: freezeStyle({ dim: !0 }),
+  math: freezeStyle({ fg: "cyanBright" })
 });
 function stableSerialize(value) {
   return value == null ? "null" : typeof value != "object" ? JSON.stringify(value) : Array.isArray(value) ? `[${value.map((item) => stableSerialize(item)).join(",")}]` : `{${Object.entries(value).sort(
@@ -32980,7 +33187,8 @@ function resolveTuiMarkdownTheme(overrides) {
       DEFAULT_TUI_MARKDOWN_THEME.thematicBreak,
       overrides.thematicBreak
     ),
-    html: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.html, overrides.html)
+    html: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.html, overrides.html),
+    math: mergeFrozenStyle(DEFAULT_TUI_MARKDOWN_THEME.math, overrides.math)
   });
 }
 
@@ -32990,7 +33198,8 @@ function buildMarkdownBlocks(content, parser, options) {
   try {
     let nodes = parser.parse(content, options?.final ?? !0), blocks = markdownAstToBlocks(nodes, theme, {
       imageResolver: options?.imageResolver,
-      imageSize: options?.imageSize
+      imageSize: options?.imageSize,
+      math: options?.math
     });
     return { nodes, blocks };
   } catch (error) {
@@ -33136,11 +33345,11 @@ function findMarkdownMathActionAt(rows, point, options) {
       let math = segment.mathAction;
       if (!math || segmentEnd <= clipStart || segmentStart >= clipEnd)
         continue;
-      let visibleStart = Math.max(segmentStart, clipStart), visibleEnd = Math.min(segmentEnd, clipEnd), rect = {
+      let visibleStart = Math.max(segmentStart, clipStart), visibleEnd = Math.min(segmentEnd, clipEnd), graphicHeight = segment.graphic ? Math.max(1, Math.floor(segment.graphic.displayHeight ?? 1)) : 1, rect = {
         x: r.x + visibleStart - clipStart,
         y: r.y + rowIndex - firstRow,
         w: visibleEnd - visibleStart,
-        h: 1
+        h: graphicHeight
       };
       if (!(point.cellX < rect.x || point.cellY < rect.y || point.cellX >= rect.x + rect.w || point.cellY >= rect.y + rect.h))
         return {
@@ -33156,6 +33365,70 @@ function findMarkdownMathActionAt(rows, point, options) {
   return null;
 }
 
+// src/vue/markdown/math.ts
+var katexListeners = /* @__PURE__ */ new Set();
+function subscribeMarkdownMathRenderer(listener) {
+  return katexListeners.add(listener), () => katexListeners.delete(listener);
+}
+var KATEX_TEXT_OPTIONS = Object.freeze({
+  output: "mathml",
+  throwOnError: !1,
+  strict: "ignore",
+  trust: !1,
+  maxSize: 20,
+  maxExpand: 200
+}), KATEX_VALIDATE_OPTIONS = Object.freeze({
+  ...KATEX_TEXT_OPTIONS,
+  throwOnError: !0
+}), TEX_SYMBOLS = Object.freeze({
+  alpha: "\u03B1",
+  beta: "\u03B2",
+  gamma: "\u03B3",
+  delta: "\u03B4",
+  epsilon: "\u03B5",
+  theta: "\u03B8",
+  lambda: "\u03BB",
+  mu: "\u03BC",
+  pi: "\u03C0",
+  rho: "\u03C1",
+  sigma: "\u03C3",
+  tau: "\u03C4",
+  phi: "\u03C6",
+  omega: "\u03C9",
+  Gamma: "\u0393",
+  Delta: "\u0394",
+  Theta: "\u0398",
+  Lambda: "\u039B",
+  Pi: "\u03A0",
+  Sigma: "\u03A3",
+  Phi: "\u03A6",
+  Omega: "\u03A9",
+  int: "\u222B",
+  sum: "\u2211",
+  prod: "\u220F",
+  infty: "\u221E",
+  infinity: "\u221E",
+  pm: "\xB1",
+  times: "\xD7",
+  cdot: "\xB7",
+  div: "\xF7",
+  le: "\u2264",
+  leq: "\u2264",
+  ge: "\u2265",
+  geq: "\u2265",
+  neq: "\u2260",
+  ne: "\u2260",
+  approx: "\u2248",
+  equiv: "\u2261",
+  to: "\u2192",
+  rightarrow: "\u2192",
+  leftarrow: "\u2190",
+  leftrightarrow: "\u2194",
+  partial: "\u2202",
+  nabla: "\u2207",
+  sqrt: "\u221A"
+}), SUPPORTED_COMMANDS = /* @__PURE__ */ new Set([...Object.keys(TEX_SYMBOLS), "frac", "sqrt"]);
+
 // src/utils/env.ts
 function firstNonEmptyEnv(env, primary, legacy) {
   let primaryValue = env?.[primary];
@@ -33261,7 +33534,7 @@ function mergeStyle11(base, overlay) {
 var activeMarkdownImageGraphics = /* @__PURE__ */ new WeakMap();
 function markdownImageGraphicId(segment, identity) {
   return `md-image:${stableTerminalGraphicNumericId(
-    `${identity}:${segment.src}:${segment.displayWidth ?? 0}:${segment.displayHeight ?? 0}:${segment.base64 ?? ""}`
+    `${identity}:${segment.src ?? segment.tex ?? ""}:${segment.displayWidth ?? 0}:${segment.displayHeight ?? 0}:${segment.base64 ?? ""}`
   )}`;
 }
 function rememberMarkdownImageGraphic(terminal, id, rect) {
@@ -33282,7 +33555,7 @@ function clearStaleMarkdownImageGraphicsForRow(terminal, y, keepIds, keepVisible
       !(keepVisibleIds ? y >= rect.y && y < rect.y + rect.h : rect.y === y) || keepIds.has(id) || keepVisibleIds?.has(id) || clearTrackedMarkdownImageGraphic(terminal, id);
 }
 function canAttemptMarkdownImageGraphic(terminal, segment) {
-  if (segment.kind !== "image" || !segment.base64)
+  if (!segment.base64)
     return !1;
   let output = getTerminalGraphicsOutput(terminal), protocol = output?.capabilities.preferredProtocol;
   return !!(output?.capabilities.supported && isTerminalGraphicsProtocol(protocol));
@@ -33294,7 +33567,7 @@ function clearMarkdownImageGraphics(terminal, rect) {
       rect && (item.x >= rect.x + rect.w || item.x + item.w <= rect.x || item.y >= rect.y + rect.h || item.y + item.h <= rect.y) || clearTrackedMarkdownImageGraphic(terminal, id);
 }
 function queueMarkdownImageGraphic(terminal, segment, identity, rect) {
-  if (segment.kind !== "image" || !segment.base64)
+  if (!segment.base64)
     return "unavailable";
   let output = getTerminalGraphicsOutput(terminal), protocol = output?.capabilities.preferredProtocol;
   if (!output?.capabilities.supported || !isTerminalGraphicsProtocol(protocol))
@@ -33331,7 +33604,7 @@ function queueMarkdownImageGraphic(terminal, segment, identity, rect) {
     sequence,
     resizeSequence,
     clearSequence,
-    fallbackText: segment.alt ?? "image"
+    fallbackText: segment.alt ?? (segment.kind === "math" ? segment.raw ?? segment.tex ?? "math" : "image")
   });
   return markdownImageDebug(
     `queue id=${id}`,
@@ -33416,7 +33689,7 @@ function paintMarkdownVisualRow(terminal, row, options) {
       }), graphicAvailable = queueResult || canAttemptMarkdownImageGraphic(terminal, segment.graphic), queuedGraphic = queueResult === "queued", suppressFallback = queuedGraphic || queueResult === "rejected" || graphicAvailable === !0;
       queuedGraphic && queuedGraphics.add(markdownImageGraphicId(segment.graphic, `${row.key}:${segmentIndex}`)), terminal.write(
         suppressFallback ? spaces(visibleCells) : sliceByCellsRange(
-          segment.fallbackText ?? segment.graphic.alt ?? "image",
+          segment.fallbackText ?? segment.graphic.alt ?? (segment.graphic.kind === "math" ? segment.graphic.raw ?? segment.graphic.tex ?? "math" : "image"),
           0,
           visibleCells
         ) || spaces(visibleCells),
@@ -33549,6 +33822,13 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
     imageMinHeight: { type: Number, default: void 0 },
     imageMaxHeight: { type: Number, default: void 0 },
     imagePreserveAspectRatio: { type: Boolean, default: !0 },
+    mathImages: { type: Boolean, default: !0 },
+    mathCellWidthPx: { type: Number, default: void 0 },
+    mathCellHeightPx: { type: Number, default: void 0 },
+    mathScale: { type: Number, default: void 0 },
+    mathColor: { type: String, default: void 0 },
+    mathMaxWidthCells: { type: Number, default: void 0 },
+    mathBaselineRatio: { type: Number, default: void 0 },
     imageActions: { type: Boolean, default: !1 },
     mathActions: { type: Boolean, default: !1 },
     linkActions: { type: Boolean, default: !1 },
@@ -33576,10 +33856,41 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
         })
       )
     ), graphicsOutputVersion = (0, import_vue33.shallowRef)(getTerminalGraphicsOutputVersion(terminal)), unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
-      graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+      graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal), enqueuePendingMathImages();
     }), unsubscribeMathRenderer = subscribeMarkdownMathRenderer(() => {
       scheduleRebuild();
+    }), unsubscribeMathImage = subscribeMarkdownMathImage(() => {
+      scheduleRebuild();
     });
+    function mathOptions() {
+      if (props.mathImages === !1)
+        return { enabled: !1 };
+      let resolvedColor = props.mathColor ?? resolveMarkdownMathColor(defaultStyle.value.fg);
+      return {
+        enabled: !0,
+        ...props.mathCellWidthPx != null ? { cellWidthPx: props.mathCellWidthPx } : {},
+        ...props.mathCellHeightPx != null ? { cellHeightPx: props.mathCellHeightPx } : {},
+        ...props.mathScale != null ? { scale: props.mathScale } : {},
+        ...resolvedColor != null ? { color: resolvedColor } : {},
+        ...props.mathBaselineRatio != null ? { baselineRatio: props.mathBaselineRatio } : {},
+        maxWidthCells: props.mathMaxWidthCells ?? props.w
+      };
+    }
+    function enqueuePendingMathImages() {
+      if (props.mathImages === !1 || !getTerminalGraphicsOutput(terminal)?.capabilities.supported)
+        return;
+      if (!isMarkdownMathImageRendererReady()) {
+        loadMarkdownMathImageRenderer().then((ready) => {
+          ready && alive && scheduleRebuild();
+        });
+        return;
+      }
+      let h26 = Math.max(0, Math.floor(props.h ?? absRect.value.h));
+      enqueueMarkdownMathImages(rows.value, mathOptions(), {
+        firstRow: internalScrollTop.value,
+        lastRow: internalScrollTop.value + h26
+      });
+    }
     (0, import_vue33.watch)(
       () => `${props.streaming ? 1 : 0}:${(props.customHtmlTags ?? []).join("\0")}`,
       () => {
@@ -33603,13 +33914,14 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
             minHeight: props.imageMinHeight,
             maxHeight: props.imageMaxHeight,
             preserveAspectRatio: props.imagePreserveAspectRatio
-          }
+          },
+          math: mathOptions()
         }).blocks;
         return layoutMarkdownBlocksCached(blocks, props.w, layoutCache);
       });
       layoutCache = (0, import_vue33.markRaw)(nextLayout.cache);
       let nextRows = nextLayout.rows;
-      rows.value = (0, import_vue33.markRaw)(nextRows), reconcileScrollTop();
+      rows.value = (0, import_vue33.markRaw)(nextRows), enqueuePendingMathImages(), reconcileScrollTop();
       let nextScrollTop = internalScrollTop.value, nextVisibleRows = visibleRowSignatures(nextRows, nextScrollTop), nextVisibleGraphics = visibleRowGraphics(nextRows, nextScrollTop), visibleChanged = prevVisibleRows.length !== nextVisibleRows.length || prevVisibleRows.some((row, index) => row !== nextVisibleRows[index]) || prevVisibleGraphics.some((row, index) => row !== nextVisibleGraphics[index]);
       (!builtOnce || prevScrollTop !== nextScrollTop || visibleChanged) && (documentVersion.value++, selection.refresh());
     }
@@ -33691,7 +34003,9 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
         let remap = pendingSelectionScrollFocusRemap;
         pendingSelectionScrollFocusRemap = !1, applyControlledScrollTop(props.scrollTop, remap);
       }
-    ), (0, import_vue33.watch)(
+    ), (0, import_vue33.watch)(internalScrollTop, () => {
+      enqueuePendingMathImages();
+    }), (0, import_vue33.watch)(
       [
         () => props.content,
         () => props.blocks,
@@ -33704,7 +34018,14 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
         () => props.imageMaxWidth,
         () => props.imageMinHeight,
         () => props.imageMaxHeight,
-        () => props.imagePreserveAspectRatio
+        () => props.imagePreserveAspectRatio,
+        () => props.mathImages,
+        () => props.mathCellWidthPx,
+        () => props.mathCellHeightPx,
+        () => props.mathScale,
+        () => props.mathColor,
+        () => props.mathMaxWidthCells,
+        () => props.mathBaselineRatio
       ],
       () => {
         scheduleRebuild();
@@ -33885,7 +34206,7 @@ var TVirtualMarkdown = (0, import_vue33.defineComponent)({
       let manager = events.value, nodeId = eventNode.id.value;
       nodeId && manager && manager.getFocused() !== nodeId && manager.focus(nodeId);
     }), (0, import_vue33.onBeforeUnmount)(() => {
-      alive = !1, rebuildVersion++, unsubscribeGraphicsOutput(), unsubscribeMathRenderer(), clearMarkdownImageGraphics(terminal, fullRect.value);
+      alive = !1, rebuildVersion++, unsubscribeGraphicsOutput(), unsubscribeMathRenderer(), unsubscribeMathImage(), clearMarkdownImageGraphics(terminal, fullRect.value);
     }), useRenderNode(() => ({
       zIndex: props.zIndex,
       rect: visible.value ? normalizedRect() : { x: 0, y: 0, w: 0, h: 0 },
@@ -34867,29 +35188,6 @@ function normalizeCachedPngFrame(frame, context) {
     sourceHeight: dimensions?.height
   };
 }
-function resolveKittyViewportPlacement(png, context) {
-  let rect = context.viewport.rect, full = context.viewport.fullRect, columns = positiveInt2(rect.w) ?? png.cols, rows = positiveInt2(rect.h) ?? png.rows, sourceWidth = positiveInt2(png.sourceWidth), sourceHeight = positiveInt2(png.sourceHeight);
-  if (!sourceWidth || !sourceHeight || full.w <= 0 || full.h <= 0)
-    return { columns, rows };
-  let offsetX = Math.max(0, rect.x - full.x), offsetY = Math.max(0, rect.y - full.y), visibleW = Math.max(0, Math.min(rect.w, full.w - offsetX)), visibleH = Math.max(0, Math.min(rect.h, full.h - offsetY));
-  if (offsetX <= 0 && offsetY <= 0 && visibleW >= full.w && visibleH >= full.h)
-    return { columns, rows };
-  let x0 = Math.max(0, Math.min(sourceWidth - 1, Math.floor(offsetX * sourceWidth / full.w))), y0 = Math.max(0, Math.min(sourceHeight - 1, Math.floor(offsetY * sourceHeight / full.h))), x1 = Math.max(
-    x0 + 1,
-    Math.min(sourceWidth, Math.ceil((offsetX + visibleW) * sourceWidth / full.w))
-  ), y1 = Math.max(
-    y0 + 1,
-    Math.min(sourceHeight, Math.ceil((offsetY + visibleH) * sourceHeight / full.h))
-  );
-  return {
-    columns,
-    rows,
-    sourceX: x0,
-    sourceY: y0,
-    sourceWidth: x1 - x0,
-    sourceHeight: y1 - y0
-  };
-}
 function pngFrameBytes(frame) {
   return frame.base64.length + (frame.fallback?.length ?? 0);
 }
@@ -34942,50 +35240,24 @@ function createPngTerminalGraphicRenderer(options) {
     };
     if (!png.base64)
       return textFallbackResult(await fallback());
-    if (protocol === "kitty") {
-      let placement = resolveKittyViewportPlacement(png, context), sequence = createKittyGraphicsSequence(png.base64, {
-        imageId: context.imageId,
-        placementId: context.placementId,
-        zIndex: options.zIndex,
-        ...placement
-      }), resizeSequence = createKittyPlacementSequence({
+    if (protocol === "kitty" || protocol === "iterm2") {
+      let rect = context.viewport.rect, fullRect = context.viewport.fullRect, result = createTerminalGraphicPngSequence({
+        protocol,
+        base64: png.base64,
         imageId: context.imageId,
         placementId: context.placementId,
-        zIndex: options.zIndex,
-        ...placement
-      });
-      return isSafeTerminalGraphicsSequence(sequence, "kitty", "draw") ? {
-        type: "sequence",
-        protocol: "kitty",
-        sequence,
-        resizeSequence,
-        clearSequence: createKittyDeleteGraphicsSequence({
-          imageId: context.imageId,
-          placementId: context.placementId
-        }),
-        ...await sequenceFallback(),
         cols: png.cols,
         rows: png.rows,
         sourceWidth: png.sourceWidth,
         sourceHeight: png.sourceHeight,
-        zIndex: options.zIndex
-      } : textFallbackResult(await fallback());
-    }
-    if (protocol === "iterm2") {
-      let sequence = createIterm2InlineImageSequence(png.base64, {
-        width: png.cols,
-        height: png.rows,
-        preserveAspectRatio: !0,
-        doNotMoveCursor: !0
+        placementColumns: positiveInt2(rect.w) ?? png.cols,
+        placementRows: positiveInt2(rect.h) ?? png.rows,
+        rect,
+        fullRect,
+        zIndex: options.zIndex,
+        fallback: await fallback()
       });
-      return isSafeTerminalGraphicsSequence(sequence, "iterm2", "draw") ? {
-        type: "sequence",
-        protocol: "iterm2",
-        sequence,
-        ...await sequenceFallback(),
-        cols: png.cols,
-        rows: png.rows
-      } : textFallbackResult(await fallback());
+      return result ? isSafeTerminalGraphicsSequence(result.sequence, protocol, "draw") ? result : textFallbackResult(await fallback()) : textFallbackResult(await fallback());
     }
     if (protocol === "sixel") {
       let sixel = await queue.cached(