markdown-flow-ui 0.2.29 → 0.2.31

package/dist/components/ContentRender/ContentRender.es.js

@@ -1,378 +1,586 @@
-import { jsx as r, jsxs as He } from "react/jsx-runtime";
-import Q, { useMemo as C, useState as be, useRef as v, useEffect as P } from "react";
-import qe from "../../_virtual/index.es.js";
-import { sanitizeInvalidTagName as Pe } from "./utils/sanitize-invalid-tag-name.es.js";
-import { stripSvgTextLineBreaks as Qe } from "./utils/strip-svg-text-line-breaks.es.js";
+import { jsx as r, jsxs as ze, Fragment as ut } from "react/jsx-runtime";
+import Z, { useMemo as h, useState as Fe, useRef as b, useEffect as te } from "react";
+import { sanitizeInvalidTagName as lt } from "./utils/sanitize-invalid-tag-name.es.js";
+import { stripSvgTextLineBreaks as dt } from "./utils/strip-svg-text-line-breaks.es.js";
 /* empty css                     */
 /* empty css                             */
 /* empty css                                                   */
 /* empty css                                             */
-import je, { CodeBlockContext as Ue } from "./CodeBlock.es.js";
-import Ke from "./plugins/CustomVariable.es.js";
-import ie from "./plugins/MermaidChart.es.js";
-import { preserveCustomVariableProperties as Oe, restoreCustomVariableProperties as Xe } from "./utils/custom-variable-props.es.js";
-import { subsetLanguages as Ye, highlightLanguages as Ze } from "./utils/highlight-languages.es.js";
-import { parseMarkdownSegments as Be, mermaidBlockIsComplete as Je } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as Se } from "./utils/normalize-inline-html.es.js";
-import et from "./IframeSandbox.es.js";
-import { getTrailingTypewriterGrapheme as ae, appendContentAwareTypewriterQueue as Re, consumeContentAwareTypewriterQueue as tt, CONTENT_AWARE_TYPEWRITER_TICK_BUDGET as rt, isContentAwareTypewriterQueueEmpty as nt } from "./utils/typewriter-pacing.es.js";
-import { splitContentSegments as ot } from "./utils/split-content.es.js";
-import { getInteractionDefaultValues as st } from "../../lib/interaction-defaults.es.js";
-import { getMarkdownFlowDirection as at, getMarkdownFlowLanguage as it } from "../../lib/locale.es.js";
-import { getContentRenderLocaleTexts as Le } from "./contentRenderI18n.es.js";
-import { Markdown as ct } from "../../node_modules/react-markdown/lib/index.es.js";
-import lt from "../../node_modules/rehype-raw/lib/index.es.js";
-import ut from "../../node_modules/rehype-highlight/lib/index.es.js";
-import dt from "../../node_modules/rehype-katex/lib/index.es.js";
-import mt from "../../node_modules/remark-gfm/lib/index.es.js";
-import pt from "../../node_modules/remark-math/lib/index.es.js";
-import ht from "../../node_modules/remark-breaks/lib/index.es.js";
-const ft = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, gt = 2, Ne = ({ svg: t }) => {
-  const n = v(null);
-  return P(() => {
-    const o = n.current;
-    if (!o) return;
-    const s = o.shadowRoot ?? o.attachShadow({ mode: "open" }), k = "content-render-svg-style";
-    let u = s.getElementById(k);
-    u || (u = document.createElement("style"), u.id = k, u.textContent = `
+import mt, { CodeBlockContext as pt } from "./CodeBlock.es.js";
+import ft from "./plugins/CustomVariable.es.js";
+import Ce from "./plugins/MermaidChart.es.js";
+import { preserveCustomVariableProperties as ht, restoreCustomVariableProperties as gt } from "./utils/custom-variable-props.es.js";
+import { subsetLanguages as vt, highlightLanguages as xt } from "./utils/highlight-languages.es.js";
+import { parseMarkdownSegments as Ge, mermaidBlockIsComplete as yt } from "./utils/mermaid-parse.es.js";
+import { getMarkdownSourceAnalysis as wt, getInlineCodeRanges as Ct } from "./utils/inline-code-ranges.es.js";
+import { remarkPlugins as Qe } from "./utils/markdown-plugins.es.js";
+import { normalizeInlineHtml as ye } from "./utils/normalize-inline-html.es.js";
+import { escapeTypedMarkdownMetadata as ke } from "./utils/escape-typed-metadata.es.js";
+import kt from "./IframeSandbox.es.js";
+import { getTrailingTypewriterGrapheme as we, appendContentAwareTypewriterQueue as _e, consumeContentAwareTypewriterQueue as Tt, CONTENT_AWARE_TYPEWRITER_TICK_BUDGET as bt, isContentAwareTypewriterQueueEmpty as St } from "./utils/typewriter-pacing.es.js";
+import { normalizeWrappedSandboxContent as Rt, splitContentSegments as Bt } from "./utils/split-content.es.js";
+import { getInteractionDefaultValues as Nt } from "../../lib/interaction-defaults.es.js";
+import { getMarkdownFlowDirection as Mt, getMarkdownFlowLanguage as Lt } from "../../lib/locale.es.js";
+import { getContentRenderLocaleTexts as be } from "./contentRenderI18n.es.js";
+import { createVideoMarkdownRunPlan as At, cloneVideoMarkdownSourceTree as Vt, prepareVideoMarkdownRun as $t, projectVideoMarkdownRun as Et, getVideoMarkdownNodeState as It } from "./utils/video-markdown-run.es.js";
+import { unified as je } from "../../node_modules/unified/lib/index.es.js";
+import Pt from "../../node_modules/remark-rehype/lib/index.es.js";
+import Dt from "../../node_modules/rehype-raw/lib/index.es.js";
+import Wt from "../../node_modules/rehype-highlight/lib/index.es.js";
+import zt from "../../node_modules/rehype-katex/lib/index.es.js";
+import { Markdown as Oe } from "../../node_modules/react-markdown/lib/index.es.js";
+const Ft = 2, Te = ({
+  svg: t,
+  inline: o = !1
+}) => {
+  const s = b(null), a = o ? "span" : "div";
+  return te(() => {
+    const i = s.current;
+    if (!i) return;
+    const l = i.shadowRoot ?? i.attachShadow({ mode: "open" }), x = "content-render-svg-style";
+    let g = l.getElementById(x);
+    g || (g = document.createElement("style"), g.id = x, g.textContent = `
         svg { height: auto; display: inline-block; }
         svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }
         svg.content-render-svg-el--fixed { max-width: none; }
-      `, s.appendChild(u)), Array.from(s.childNodes).filter(
-      (a) => a !== u
-    ).forEach((a) => s.removeChild(a));
-    const G = document.createElement("template"), D = Qe(t);
-    G.innerHTML = D, s.append(G.content.cloneNode(!0));
-    let d = !1, F = !1;
-    s.querySelectorAll("svg").forEach((a) => {
-      const z = a.getAttribute("viewBox");
-      if (!z) return;
-      const W = z.trim().split(/[\s,]+/).map((T) => Number(T));
-      if (W.length !== 4 || W.some(Number.isNaN)) return;
-      const [, , E, S] = W, L = a.getAttribute("width"), V = a.getAttribute("height"), j = (T) => {
-        if (!T) return !1;
-        const c = T.trim().toLowerCase();
-        return c === "auto" || c.endsWith("%");
-      }, U = (T) => {
-        if (!T) return null;
-        const c = T.trim().toLowerCase();
-        if (c === "auto" || c.endsWith("%"))
+      `, l.appendChild(g)), Array.from(l.childNodes).filter(
+      (u) => u !== g
+    ).forEach((u) => l.removeChild(u));
+    const y = document.createElement("template"), S = dt(t);
+    y.innerHTML = S, l.append(y.content.cloneNode(!0));
+    let R = !1, k = !1;
+    l.querySelectorAll("svg").forEach((u) => {
+      const P = u.getAttribute("viewBox");
+      if (!P) return;
+      const D = P.trim().split(/[\s,]+/).map((M) => Number(M));
+      if (D.length !== 4 || D.some(Number.isNaN)) return;
+      const [, , W, w] = D, O = u.getAttribute("width"), z = u.getAttribute("height"), U = (M) => {
+        if (!M) return !1;
+        const L = M.trim().toLowerCase();
+        return L === "auto" || L.endsWith("%");
+      }, ne = (M) => {
+        if (!M) return null;
+        const L = M.trim().toLowerCase();
+        if (L === "auto" || L.endsWith("%"))
           return null;
-        const M = Number.parseFloat(c);
-        return Number.isNaN(M) ? null : M;
-      }, Y = j(L), Z = j(V), K = !L || L === "0", O = !V || V === "0", J = U(L), ee = U(V);
-      if (Y || Z || K && O || J === E && ee === S) {
-        d = !0, a.classList.add("content-render-svg-el--responsive"), a.classList.remove("content-render-svg-el--fixed"), a.style.width = "100%", a.style.height = "auto", !a.style.aspectRatio && S > 0 && (a.style.aspectRatio = `${E} / ${S}`);
+        const H = Number.parseFloat(L);
+        return Number.isNaN(H) ? null : H;
+      }, ue = U(O), le = U(z), re = !O || O === "0", oe = !z || z === "0", de = ne(O), se = ne(z);
+      if (ue || le || re && oe || de === W && se === w) {
+        R = !0, u.classList.add("content-render-svg-el--responsive"), u.classList.remove("content-render-svg-el--fixed"), u.style.width = "100%", u.style.height = "auto", !u.style.aspectRatio && w > 0 && (u.style.aspectRatio = `${W} / ${w}`);
         return;
       }
-      F = !0, a.classList.add("content-render-svg-el--fixed"), a.classList.remove("content-render-svg-el--responsive"), K && E > 0 && a.setAttribute("width", `${E}`), O && S > 0 && a.setAttribute("height", `${S}`);
+      k = !0, u.classList.add("content-render-svg-el--fixed"), u.classList.remove("content-render-svg-el--responsive"), re && W > 0 && u.setAttribute("width", `${W}`), oe && w > 0 && u.setAttribute("height", `${w}`);
     });
-    const _ = d && !F;
-    o.classList.toggle("content-render-svg--responsive", _), o.classList.toggle("content-render-svg--fixed", !_);
-  }, [t]), /* @__PURE__ */ r("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ r("div", { className: "content-render-svg", ref: n }) });
-}, ce = Q.createContext(
+    const p = R && !k;
+    i.classList.toggle("content-render-svg--responsive", p), i.classList.toggle("content-render-svg--fixed", !p);
+  }, [t]), /* @__PURE__ */ r(a, { className: "content-render-svg-scroll", children: /* @__PURE__ */ r(
+    a,
+    {
+      className: "content-render-svg",
+      ref: (i) => {
+        s.current = i;
+      }
+    }
+  ) });
+}, ie = Z.createContext(
   null
-), xt = (t) => {
-  const n = Q.useContext(ce), o = Q.useContext(Ue);
-  if (!n)
+), Ue = (t) => {
+  const { receivedTree: o, ...s } = t, a = Z.useContext(ie), i = Z.useContext(pt);
+  if (!a)
     throw new Error("Markdown code renderer requires ContentRender context.");
-  const { className: s, children: k, ...u } = t;
-  if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
-    const D = k?.toString().replace(/\n$/, "") || "", d = Je(
-      n.current.renderContent,
-      D
+  const { className: l, children: x, ...g } = s;
+  if (/language-(\w+)/.exec(l || "")?.[1] === "mermaid") {
+    const S = x?.toString().replace(/\n$/, "") || "", R = yt(
+      a.current.renderContent,
+      S
     );
     return /* @__PURE__ */ r(
-      ie,
+      Ce,
       {
-        chart: D,
-        frozen: d,
-        messages: n.current.mermaidMessages
+        chart: S,
+        frozen: o ? !R : R,
+        messages: a.current.mermaidMessages
       }
     );
   }
   return /* @__PURE__ */ r(
     "code",
     {
-      className: s,
-      ...u,
-      dir: u.dir ?? (o ? void 0 : "ltr"),
-      children: k
+      className: l,
+      ...g,
+      dir: g.dir ?? (i ? void 0 : "ltr"),
+      children: x
     }
   );
-}, vt = [
-  mt,
-  pt,
-  qe,
-  ht
-], Tt = [
-  Oe,
+}, Ke = [
+  ht,
+  Dt,
   lt,
-  Pe,
-  Xe,
-  [ut, { languages: Ze, subset: Ye }],
-  dt
-], Ae = ({ content: t, components: n, locale: o }) => {
-  const s = Le(o);
+  gt
+], Ye = [
+  [Wt, { languages: xt, subset: vt }],
+  zt
+], Gt = [
+  ...Ke,
+  ...Ye
+], He = ({ content: t, components: o, locale: s }) => {
+  const a = be(s);
   return /* @__PURE__ */ r("div", { className: "markdown-renderer", children: /* @__PURE__ */ r(
-    ct,
+    Oe,
     {
-      remarkPlugins: vt,
-      rehypePlugins: Tt,
+      remarkPlugins: Qe,
+      rehypePlugins: Gt,
       remarkRehypeOptions: {
-        footnoteLabel: s.footnoteLabel,
-        footnoteBackLabel: (k, u) => {
-          const A = String(k + 1) + (u > 1 ? `-${u}` : "");
-          return s.footnoteBackLabel.replace("{reference}", A);
+        footnoteLabel: a.footnoteLabel,
+        footnoteBackLabel: (i, l) => {
+          const x = String(i + 1) + (l > 1 ? `-${l}` : "");
+          return a.footnoteBackLabel.replace("{reference}", x);
         }
       },
-      components: n,
+      components: o,
       children: t
     }
   ) });
-}, yt = (t) => {
+}, _t = function() {
+  this.parser = () => ({ type: "root", children: [] });
+}, jt = ({ plan: t, renderedSegments: o, components: s, locale: a }) => {
+  const i = h(() => {
+    const S = be(a), R = je().use(Qe).use(Pt, {
+      allowDangerousHtml: !0,
+      footnoteLabel: S.footnoteLabel,
+      footnoteBackLabel: (u, P) => S.footnoteBackLabel.replace(
+        "{reference}",
+        String(u + 1) + (P > 1 ? `-${P}` : "")
+      )
+    }).use(Ke), k = je().use(Ye), p = R.runSync(
+      Vt(t),
+      t.markdownSource
+    );
+    return $t(
+      t,
+      p,
+      (u) => k.runSync(u, t.fullSource)
+    );
+  }, [t, a]), l = h(
+    () => Et(i, o),
+    [i, o]
+  ), x = b(s);
+  x.current = s;
+  const g = b(
+    /* @__PURE__ */ new Map()
+  ), ee = h(() => {
+    const S = /* @__PURE__ */ new Set(), R = (p) => {
+      p.type === "element" && S.add(p.tagName), "children" in p && p.children.forEach(R);
+    };
+    R(i.tree);
+    const k = {};
+    for (const p of S) {
+      if (!g.current.has(p)) {
+        const u = ({
+          node: P,
+          children: D,
+          ...W
+        }) => {
+          const w = It(P);
+          if (w?.svg)
+            return w.svgSource ? /* @__PURE__ */ r(Te, { svg: w.svgSource, inline: !0 }) : null;
+          if (w?.atomic)
+            return w.active ? /* @__PURE__ */ r(ut, { children: D }) : null;
+          if (w?.active === !1 && p !== "a") return null;
+          const z = x.current[p], U = w?.active === !1 ? { ...W, href: void 0, tabIndex: -1 } : W;
+          return z ? Z.createElement(
+            z,
+            {
+              ...U,
+              node: P,
+              ...z === Ue ? { receivedTree: !0 } : {}
+            },
+            D
+          ) : Z.createElement(p, U, D);
+        };
+        u.displayName = `StableMarkdown(${p})`, g.current.set(p, u);
+      }
+      k[p] = g.current.get(p);
+    }
+    return k;
+  }, [i]), y = h(
+    () => [() => () => l],
+    [l]
+  );
+  return /* @__PURE__ */ r("div", { className: "markdown-renderer", children: /* @__PURE__ */ r(
+    Oe,
+    {
+      remarkPlugins: [_t],
+      rehypePlugins: y,
+      components: ee,
+      children: ""
+    }
+  ) });
+}, j = (t) => t.type === "markdown" && t.immediate === !0, Ht = (t) => {
   if (t.length <= 1) return t;
-  const n = [];
-  return t.forEach((o) => {
-    if (o.type === "sandbox") {
-      n.push(o);
+  const o = [];
+  return t.forEach((s) => {
+    if (s.type === "sandbox" || j(s)) {
+      o.push(s);
       return;
     }
-    const s = n[n.length - 1];
-    if (s && s.type !== "sandbox") {
-      n[n.length - 1] = {
+    const a = o[o.length - 1];
+    if (a && a.type !== "sandbox" && !j(a)) {
+      o[o.length - 1] = {
         type: "markdown",
-        value: `${s.value}${o.value}`
+        value: `${a.value}${s.value}`
       };
       return;
     }
-    n.push({ type: "markdown", value: o.value });
-  }), n;
-}, Ct = (t, n) => {
-  const o = Math.max(1, n), s = Array.from(t);
+    o.push({ type: "markdown", value: s.value });
+  }), o;
+}, qt = (t, o, s) => {
+  if (t.length >= o.length) return t;
+  const a = s.find(
+    ({ start: x, end: g }) => x < t.length && t.length < g
+  );
+  if (!a) return t;
+  const i = /^`+/.exec(o.slice(a.start))?.[0];
+  if (!i || t.length < a.start + i.length)
+    return t;
+  const l = a.end - i.length;
+  return t.length > l ? t + i.slice(t.length - l) : t + (t.endsWith("`") ? " " : "") + i;
+}, qe = (t, o, s, a, i = 0) => {
+  const l = qt(t, o, s);
+  return ke(t, a, i) + l.slice(t.length);
+}, Qt = (t, o) => {
+  const s = Math.max(1, o), a = Array.from(t);
   return {
-    chunk: s.slice(0, o).join(""),
-    rest: s.slice(o).join("")
+    chunk: a.slice(0, s).join(""),
+    rest: a.slice(s).join("")
   };
-}, kt = (t, n) => t === n ? !0 : !t || !n || t.length !== n.length ? !1 : t.every((o, s) => o === n[s]), wt = (t) => {
-  const n = v(t);
-  return kt(n.current, t) || (n.current = t), n.current;
-}, tr = ({
+}, Ot = (t, o) => t === o ? !0 : !t || !o || t.length !== o.length ? !1 : t.every((s, a) => s === o[a]), Ut = (t) => {
+  const o = b(t);
+  return Ot(o.current, t) || (o.current = t), o.current;
+}, Mn = ({
   content: t,
-  contentType: n,
-  locale: o,
-  lang: s,
-  dir: k,
-  customRenderBar: u,
-  onSend: A,
-  typingSpeed: G = 30,
-  enableTypewriter: D = !1,
-  typewriterPacing: d = "fixed",
-  onTypeFinished: F,
-  onTypewriterStateChange: _,
-  userInput: a,
-  interactionDefaultValueOptions: z,
-  defaultButtonText: W,
-  defaultInputText: E,
-  defaultSelectedValues: S,
-  readonly: L = !1,
-  confirmButtonText: V,
-  copyButtonText: j,
-  copiedButtonText: U,
-  sandboxLoadingText: Y,
-  sandboxStyleLoadingText: Z,
-  sandboxScriptLoadingText: K,
-  disableSandboxLoadingOverlay: O = !1,
-  sandboxFullscreenButtonText: J,
-  sandboxExitFullscreenButtonText: ee,
-  sandboxMode: le = "content",
-  onClickCustomButtonAfterContent: te,
-  beforeSend: T
+  contentType: o,
+  locale: s,
+  lang: a,
+  dir: i,
+  customRenderBar: l,
+  onSend: x,
+  typingSpeed: g = 30,
+  enableTypewriter: ee = !1,
+  typewriterPacing: y = "fixed",
+  onTypeFinished: S,
+  onTypewriterStateChange: R,
+  userInput: k,
+  interactionDefaultValueOptions: p,
+  defaultButtonText: u,
+  defaultInputText: P,
+  defaultSelectedValues: D,
+  readonly: W = !1,
+  confirmButtonText: w,
+  copyButtonText: O,
+  copiedButtonText: z,
+  sandboxLoadingText: U,
+  sandboxStyleLoadingText: ne,
+  sandboxScriptLoadingText: ue,
+  disableSandboxLoadingOverlay: le = !1,
+  sandboxFullscreenButtonText: re,
+  sandboxExitFullscreenButtonText: oe,
+  sandboxMode: de = "content",
+  onClickCustomButtonAfterContent: se,
+  beforeSend: me
   // tooltipMinLength,
 }) => {
-  const c = Le(o), M = C(
+  const F = be(s), M = h(
     () => ({
-      loading: c.mermaidLoadingText,
-      emptyChart: c.mermaidEmptyChartText,
-      error: c.mermaidErrorText
+      loading: F.mermaidLoadingText,
+      emptyChart: F.mermaidEmptyChartText,
+      error: F.mermaidErrorText
     }),
-    [c]
-  ), H = k ?? at(o), q = s ?? it(o), ue = V || c.confirmButtonText, de = j || c.copyButtonText, me = U || c.copiedButtonText, Me = J || c.sandboxFullscreenButtonText, $e = ee || c.sandboxExitFullscreenButtonText, m = !!D && (!n || n === "text"), pe = Math.max(0, G), De = d === "fixed" ? t : void 0, [w, he] = be(
-    () => m ? "" : t
-  ), X = v(w), h = v(""), g = v({
+    [F]
+  ), L = i ?? Mt(s), H = a ?? Lt(s), Se = w || F.confirmButtonText, Re = O || F.copyButtonText, Be = z || F.copiedButtonText, Xe = re || F.sandboxFullscreenButtonText, Ze = oe || F.sandboxExitFullscreenButtonText, m = !!ee && (!o || o === "text"), B = h(
+    () => Rt(t),
+    [t]
+  ), A = h(
+    () => wt(B),
+    [B]
+  ), T = h(() => {
+    const e = Ht(
+      Bt(B, !0, !0, A)
+    );
+    return B !== t && e.length && (e[0].type === "sandbox" || j(e[0])) ? [{ type: "text", value: "" }, ...e] : e;
+  }, [t, B, A]), K = T.some(
+    (e) => e.type === "sandbox" || j(e)
+  ), f = K ? T.filter(
+    (e) => e.type !== "sandbox" && !j(e)
+  ).map((e) => e.value).join("") : B, Ne = Math.max(0, g), Je = y === "fixed" ? f : void 0, [E, Me] = Fe(
+    () => m ? "" : f
+  ), ae = b(E), V = b(""), I = b({
     tokens: [],
     head: 0,
     trailingGrapheme: ""
-  }), R = v(0), fe = v(m), ge = v(d), xe = v(t), re = v(!1), [Ee, Ve] = be(0);
-  P(() => {
-    const e = fe.current, i = ge.current, p = xe.current, b = !!h.current;
-    fe.current = m, ge.current = d, xe.current = t, (t !== p || m !== e) && (re.current = !1);
-    const f = () => {
-      h.current = "", g.current = {
+  }), q = b(0), Le = b(m), Ae = b(y), Ve = b(f), pe = b(t), fe = b(!1), [et, tt] = Fe(0);
+  te(() => {
+    const e = Le.current, n = Ae.current, c = Ve.current, d = !!V.current, C = pe.current !== t, xe = C && t.startsWith(pe.current);
+    pe.current = t, Le.current = m, Ae.current = y, Ve.current = f, (C || m !== e) && (fe.current = !1);
+    const X = () => {
+      V.current = "", I.current = {
         tokens: [],
         head: 0,
         trailingGrapheme: ""
-      }, R.current = 0;
-    }, $ = (I) => {
-      X.current = I, he(I);
+      }, q.current = 0;
+    }, J = (N) => {
+      ae.current = N, Me(N);
     };
     if (!m) {
-      f(), $(t);
+      X(), J(f);
       return;
     }
-    e || (f(), $(""));
-    const x = e ? X.current : "";
-    if (!t.startsWith(x)) {
-      f(), $(t), d === "content-aware" && (g.current = {
-        tokens: [],
-        head: 0,
-        trailingGrapheme: ae(t)
-      });
-      return;
+    e || (X(), J(""));
+    let $ = e ? ae.current : "";
+    if (!f.startsWith($)) {
+      if (X(), !xe) {
+        J(f), y === "content-aware" && (I.current = {
+          tokens: [],
+          head: 0,
+          trailingGrapheme: we(f)
+        });
+        return;
+      }
+      let N = 0;
+      for (; N < $.length && N < f.length && $[N] === f[N]; )
+        N += 1;
+      $ = $.slice(0, N), J($);
     }
-    let N = t.slice(x.length);
-    if (!N) {
-      h.current = "", R.current = 0, g.current = d === "content-aware" ? {
+    let Q = f.slice($.length);
+    if (!Q) {
+      V.current = "", q.current = 0, I.current = y === "content-aware" ? {
         tokens: [],
         head: 0,
-        trailingGrapheme: ae(x)
+        trailingGrapheme: we($)
       } : { tokens: [], head: 0, trailingGrapheme: "" };
       return;
     }
-    if (d === "content-aware") {
-      const I = p.slice(
-        x.length
+    if (y === "content-aware") {
+      const N = c.slice(
+        $.length
       );
-      if (e && i === "content-aware" && t.startsWith(p) && h.current === I) {
-        const B = Re(
-          g.current,
-          t.slice(p.length)
+      if (e && n === "content-aware" && f.startsWith(c) && V.current === N) {
+        const _ = _e(
+          I.current,
+          f.slice(c.length)
         );
-        g.current = B.queue, B.immediateChunk && (N = N.slice(
-          B.immediateChunk.length
-        ), $(`${x}${B.immediateChunk}`));
+        I.current = _.queue, _.immediateChunk && (Q = Q.slice(
+          _.immediateChunk.length
+        ), J(`${$}${_.immediateChunk}`));
       } else {
-        const B = Re(
+        const _ = _e(
           {
             tokens: [],
             head: 0,
-            trailingGrapheme: ae(x)
+            trailingGrapheme: we($)
           },
-          N
+          Q
         );
-        g.current = B.queue, B.immediateChunk && (N = N.slice(
-          B.immediateChunk.length
-        ), $(`${x}${B.immediateChunk}`)), R.current = 0;
+        I.current = _.queue, _.immediateChunk && (Q = Q.slice(
+          _.immediateChunk.length
+        ), J(`${$}${_.immediateChunk}`)), q.current = 0;
       }
     } else
-      g.current = {
+      I.current = {
         tokens: [],
         head: 0,
         trailingGrapheme: ""
-      }, R.current = 0;
-    h.current = N, !b && N && Ve((I) => I + 1);
-  }, [t, m, d]), P(() => {
-    m && (re.current || h.current || w !== t || (re.current = !0, F?.()));
-  }, [t, w, m, F]), P(() => {
-    if (!m || !h.current)
+      }, q.current = 0;
+    V.current = Q, !d && Q && tt((N) => N + 1);
+  }, [t, f, m, y]), te(() => {
+    m && (fe.current || V.current || E !== f || (fe.current = !0, S?.()));
+  }, [
+    t,
+    f,
+    E,
+    m,
+    S
+  ]), te(() => {
+    if (!m || !V.current)
       return;
     const e = window.setTimeout(() => {
-      if (!h.current)
+      if (!V.current)
         return;
-      let i = "";
-      if (d === "content-aware") {
-        const b = tt(
-          g.current,
-          R.current + rt
+      let n = "";
+      if (y === "content-aware") {
+        const d = Tt(
+          I.current,
+          q.current + bt
         );
-        i = b.chunk, g.current = b.queue, nt(b.queue) ? R.current = 0 : R.current = b.remainingBudget;
+        n = d.chunk, I.current = d.queue, St(d.queue) ? q.current = 0 : q.current = d.remainingBudget;
       } else
-        i = Ct(
-          h.current,
-          gt
+        n = Qt(
+          V.current,
+          Ft
         ).chunk;
-      if (!i)
+      if (!n)
         return;
-      h.current = h.current.slice(i.length), h.current || (g.current = d === "content-aware" ? {
+      V.current = V.current.slice(n.length), V.current || (I.current = y === "content-aware" ? {
         tokens: [],
         head: 0,
-        trailingGrapheme: g.current.trailingGrapheme
-      } : { tokens: [], head: 0, trailingGrapheme: "" }, R.current = 0);
-      const p = `${X.current}${i}`;
-      X.current = p, he(p);
-    }, pe);
+        trailingGrapheme: I.current.trailingGrapheme
+      } : { tokens: [], head: 0, trailingGrapheme: "" }, q.current = 0);
+      const c = `${ae.current}${n}`;
+      ae.current = c, Me(c);
+    }, Ne);
     return () => window.clearTimeout(e);
   }, [
-    w,
-    De,
+    E,
+    Je,
     m,
-    d,
-    pe,
-    Ee
+    y,
+    Ne,
+    et
   ]);
-  const ve = C(
+  const $e = h(
     () => ({
       isTypewriterEnabled: m,
-      isTyping: m && w !== t,
-      isComplete: w === t,
-      renderedLength: w.length,
+      isTyping: m && E !== f,
+      isComplete: E === f,
+      renderedLength: t.length - Math.max(0, f.length - E.length),
       totalLength: t.length
     }),
-    [t, w, m]
+    [t, f, E, m]
   );
-  P(() => {
-    _?.(ve);
-  }, [_, ve]);
-  const y = m ? w : t, ne = C(
-    () => Se(y),
-    [y]
-  ), oe = C(
-    () => st(
-      y,
-      a,
-      z
+  te(() => {
+    R?.($e);
+  }, [R, $e]);
+  const Y = h(() => {
+    let e = 0;
+    return T.map((n) => {
+      if (n.type === "sandbox" || j(n) || !m)
+        return n;
+      const c = E.slice(
+        e,
+        e + n.value.length
+      );
+      return e += n.value.length, { ...n, value: c };
+    });
+  }, [T, E, m]), he = h(() => {
+    let e = 0;
+    return T.map((n) => {
+      const c = e;
+      return e += n.value.length, c;
+    });
+  }, [T]), ce = h(
+    () => m ? T.map(
+      (e) => e.type === "sandbox" || j(e) ? [] : e.value === B ? A.inline : Ct(e.value)
+    ) : [],
+    [m, T, B, A]
+  ), nt = h(
+    () => K ? Y.map(
+      (e, n) => e.type === "sandbox" || j(e) ? e.value : m ? qe(
+        e.value,
+        T[n].value,
+        ce[n] ?? [],
+        A.metadata,
+        he[n]
+      ) : ke(
+        e.value,
+        A.metadata,
+        he[n]
+      )
+    ) : [],
+    [
+      K,
+      m,
+      Y,
+      ce,
+      T,
+      A.metadata,
+      he
+    ]
+  ), rt = h(() => {
+    const e = [];
+    T.forEach((n, c) => {
+      const d = e.at(-1);
+      n.type !== "sandbox" && d && !d.sandbox ? d.indices.push(c) : e.push({ indices: [c], sandbox: n.type === "sandbox" });
+    });
+    for (const n of e)
+      if (!n.sandbox && n.indices.some((c) => j(T[c]))) {
+        const c = n.indices.map((C) => T[C]), d = c.map((C) => C.value).join("");
+        n.plan = At(
+          c,
+          d === B ? A : void 0
+        );
+      }
+    return e;
+  }, [T, B, A]), G = K ? Y.map((e) => e.value).join("") : m ? E : B, ot = h(
+    () => l ? ye(G) : "",
+    [l, G]
+  ), Ee = h(
+    () => K ? "" : ye(
+      m ? qe(
+        G,
+        B,
+        ce[0] ?? [],
+        A.metadata
+      ) : ke(
+        G,
+        A.metadata
+      )
+    ),
+    [
+      B,
+      K,
+      m,
+      G,
+      ce,
+      A.metadata
+    ]
+  ), ge = h(
+    () => Nt(
+      G,
+      k,
+      p
     ),
-    [z, y, a]
-  ), Te = W?.trim() || oe.buttonText, ye = E?.trim() || oe.inputText, Ie = C(
-    () => a ? a.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
-    [a]
-  ), Ge = S?.length ? S : oe.selectedValues || Ie, Ce = wt(
-    Ge
-  ), l = v({
-    direction: H,
-    language: q,
+    [p, G, k]
+  ), Ie = u?.trim() || ge.buttonText, Pe = P?.trim() || ge.inputText, st = h(
+    () => k ? k.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+    [k]
+  ), at = D?.length ? D : ge.selectedValues || st, De = Ut(
+    at
+  ), v = b({
+    direction: L,
+    language: H,
     mermaidMessages: M,
-    beforeSend: T,
-    locale: o,
-    onClickCustomButtonAfterContent: te,
-    onSend: A,
-    readonly: L,
-    renderContent: y,
-    resolvedConfirmButtonText: ue,
-    resolvedCopiedButtonText: me,
-    resolvedCopyButtonText: de,
-    resolvedDefaultButtonText: Te,
-    resolvedDefaultInputText: ye,
-    resolvedDefaultSelectedValues: Ce
+    beforeSend: me,
+    locale: s,
+    onClickCustomButtonAfterContent: se,
+    onSend: x,
+    readonly: W,
+    renderContent: G,
+    resolvedConfirmButtonText: Se,
+    resolvedCopiedButtonText: Be,
+    resolvedCopyButtonText: Re,
+    resolvedDefaultButtonText: Ie,
+    resolvedDefaultInputText: Pe,
+    resolvedDefaultSelectedValues: De
   });
-  l.current = {
-    direction: H,
-    language: q,
+  v.current = {
+    direction: L,
+    language: H,
     mermaidMessages: M,
-    beforeSend: T,
-    locale: o,
-    onClickCustomButtonAfterContent: te,
-    onSend: A,
-    readonly: L,
-    renderContent: y,
-    resolvedConfirmButtonText: ue,
-    resolvedCopiedButtonText: me,
-    resolvedCopyButtonText: de,
-    resolvedDefaultButtonText: Te,
-    resolvedDefaultInputText: ye,
-    resolvedDefaultSelectedValues: Ce
+    beforeSend: me,
+    locale: s,
+    onClickCustomButtonAfterContent: se,
+    onSend: x,
+    readonly: W,
+    renderContent: G,
+    resolvedConfirmButtonText: Se,
+    resolvedCopiedButtonText: Be,
+    resolvedCopyButtonText: Re,
+    resolvedDefaultButtonText: Ie,
+    resolvedDefaultInputText: Pe,
+    resolvedDefaultSelectedValues: De
   };
-  const ke = C(
+  const ve = h(
     () => ({
       "custom-button-after-content": ({
         children: e
@@ -380,34 +588,34 @@ const ft = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
         "button",
         {
           className: "content-render-custom-button-after-content",
-          onClick: l.current.onClickCustomButtonAfterContent,
+          onClick: v.current.onClickCustomButtonAfterContent,
           children: /* @__PURE__ */ r("span", { className: "content-render-custom-button-after-content-inner", children: e })
         }
       ),
       "custom-variable": (e) => /* @__PURE__ */ r(
-        Ke,
+        ft,
         {
           ...e,
-          readonly: l.current.readonly,
-          defaultButtonText: l.current.resolvedDefaultButtonText,
-          defaultInputText: l.current.resolvedDefaultInputText,
-          defaultSelectedValues: l.current.resolvedDefaultSelectedValues,
-          onSend: l.current.onSend,
-          beforeSend: l.current.beforeSend,
-          locale: l.current.locale,
-          dir: l.current.direction,
-          lang: l.current.language,
-          confirmButtonText: l.current.resolvedConfirmButtonText
+          readonly: v.current.readonly,
+          defaultButtonText: v.current.resolvedDefaultButtonText,
+          defaultInputText: v.current.resolvedDefaultInputText,
+          defaultSelectedValues: v.current.resolvedDefaultSelectedValues,
+          onSend: v.current.onSend,
+          beforeSend: v.current.beforeSend,
+          locale: v.current.locale,
+          dir: v.current.direction,
+          lang: v.current.language,
+          confirmButtonText: v.current.resolvedConfirmButtonText
         }
       ),
-      code: xt,
+      code: Ue,
       table: ({ ...e }) => /* @__PURE__ */ r("div", { className: "content-render-table-container", children: /* @__PURE__ */ r("table", { className: "content-render-table", ...e }) }),
       th: ({ ...e }) => /* @__PURE__ */ r("th", { className: "content-render-th", ...e }),
       td: ({ ...e }) => /* @__PURE__ */ r("td", { className: "content-render-td", ...e }),
       tr: ({ ...e }) => /* @__PURE__ */ r("tr", { className: "content-render-tr", ...e }),
-      li: ({ node: e, ...i }) => {
-        const p = e?.properties?.className;
-        return typeof p == "string" && p.includes("task-list-item") || Array.isArray(p) && p.includes("task-list-item") ? /* @__PURE__ */ r("li", { className: "content-render-task-list-item", ...i }) : /* @__PURE__ */ r("li", { ...i });
+      li: ({ node: e, ...n }) => {
+        const c = e?.properties?.className;
+        return typeof c == "string" && c.includes("task-list-item") || Array.isArray(c) && c.includes("task-list-item") ? /* @__PURE__ */ r("li", { className: "content-render-task-list-item", ...n }) : /* @__PURE__ */ r("li", { ...n });
       },
       ol: ({ ...e }) => /* @__PURE__ */ r("ol", { className: "content-render-ol", ...e }),
       ul: ({ ...e }) => /* @__PURE__ */ r("ul", { className: "content-render-ul", ...e }),
@@ -420,137 +628,150 @@ const ft = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
           ...e
         }
       ) : /* @__PURE__ */ r("input", { ...e }),
-      a: ({ children: e, ...i }) => /* @__PURE__ */ r("a", { target: "_blank", rel: "noopener noreferrer", ...i, children: e }),
+      a: ({ children: e, ...n }) => /* @__PURE__ */ r("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
       pre: (e) => /* @__PURE__ */ r(
-        je,
+        mt,
         {
           ...e,
-          copyButtonText: l.current.resolvedCopyButtonText,
-          copiedButtonText: l.current.resolvedCopiedButtonText
+          copyButtonText: v.current.resolvedCopyButtonText,
+          copiedButtonText: v.current.resolvedCopiedButtonText
         }
       )
     }),
     []
-  ), we = C(
-    () => ft.test(y),
-    [y]
-  ), se = C(
-    () => we ? ot(y, !0) : [],
-    [y, we]
-  ), Fe = se.some(
-    (e) => e.type === "sandbox"
-  ), _e = C(
-    () => yt(se),
-    [se]
-  ), ze = C(
-    () => Be(ne),
-    [ne]
-  ), We = (e, i) => {
-    const p = Se(e);
-    return Be(p).map((f, $) => {
-      const x = `${i}-${f.type}-${$}`;
-      return f.type === "text" ? /* @__PURE__ */ r(
-        ce.Provider,
+  ), ct = h(
+    () => Ge(Ee),
+    [Ee]
+  ), it = (e, n) => {
+    const c = ye(e);
+    return Ge(c).map((C, xe) => {
+      const X = `${n}-${C.type}-${xe}`;
+      return C.type === "text" ? /* @__PURE__ */ r(
+        ie.Provider,
         {
-          value: l,
+          value: v,
           children: /* @__PURE__ */ r(
-            Ae,
+            He,
             {
-              locale: o,
-              components: ke,
-              content: f.value
+              locale: s,
+              components: ve,
+              content: C.value
             }
           )
         },
-        x
-      ) : f.type === "mermaid" ? /* @__PURE__ */ r(
-        ie,
+        X
+      ) : C.type === "mermaid" ? /* @__PURE__ */ r(
+        Ce,
         {
-          chart: f.value,
-          frozen: !f.complete,
+          chart: C.value,
+          frozen: !C.complete,
           messages: M
         },
-        x
-      ) : f.type === "svg" ? /* @__PURE__ */ r(Ne, { svg: f.value }, x) : null;
+        X
+      ) : C.type === "svg" ? /* @__PURE__ */ r(Te, { svg: C.value }, X) : null;
     });
-  };
-  return Fe ? /* @__PURE__ */ r(
+  }, We = l ? /* @__PURE__ */ r("div", { className: "content-render-custom-bar", children: Z.createElement(l, {
+    content: t,
+    displayContent: ot,
+    onSend: x
+  }) }) : null;
+  return K ? /* @__PURE__ */ ze(
     "div",
     {
       className: "content-render markdown-body",
-      dir: H,
-      lang: q,
-      children: _e.map(
-        (e, i) => e.type === "sandbox" ? /* @__PURE__ */ r(
-          et,
-          {
-            hideFullScreen: !0,
-            type: "sandbox",
-            content: e.value,
-            className: "content-render-iframe",
-            locale: o,
-            dir: H,
-            lang: q,
-            loadingText: Y,
-            styleLoadingText: Z,
-            scriptLoadingText: K,
-            disableLoadingOverlay: O,
-            fullScreenButtonText: Me,
-            exitFullScreenButtonText: $e,
-            mode: le
-          },
-          `sandbox-${i}`
-        ) : /* @__PURE__ */ r(Q.Fragment, { children: We(e.value, `md-${i}`) }, `md-${i}`)
-      )
+      dir: L,
+      lang: H,
+      children: [
+        rt.map((e) => {
+          const n = e.indices[0], c = Y[n];
+          return e.sandbox ? /* @__PURE__ */ r(
+            kt,
+            {
+              hideFullScreen: !0,
+              type: "sandbox",
+              content: c.value,
+              className: "content-render-iframe",
+              locale: s,
+              dir: L,
+              lang: H,
+              loadingText: U,
+              styleLoadingText: ne,
+              scriptLoadingText: ue,
+              disableLoadingOverlay: le,
+              fullScreenButtonText: Xe,
+              exitFullScreenButtonText: Ze,
+              mode: de
+            },
+            `sandbox-${n}`
+          ) : e.plan ? /* @__PURE__ */ r(
+            ie.Provider,
+            {
+              value: v,
+              children: /* @__PURE__ */ r(
+                jt,
+                {
+                  locale: s,
+                  components: ve,
+                  plan: e.plan,
+                  renderedSegments: e.indices.map(
+                    (d) => Y[d]
+                  )
+                }
+              )
+            },
+            `md-${n}`
+          ) : e.indices.map((d) => /* @__PURE__ */ r(Z.Fragment, { children: Y[d].type === "markdown" && Y[d].pending ? null : it(
+            nt[d],
+            `md-${d}`
+          ) }, `md-${d}`));
+        }),
+        We
+      ]
     }
-  ) : /* @__PURE__ */ He(
+  ) : /* @__PURE__ */ ze(
     "div",
     {
       className: "content-render markdown-body",
-      dir: H,
-      lang: q,
+      dir: L,
+      lang: H,
       children: [
-        ze.map((e, i) => {
+        ct.map((e, n) => {
           if (e.type === "text")
             return /* @__PURE__ */ r(
-              ce.Provider,
+              ie.Provider,
               {
-                value: l,
+                value: v,
                 children: /* @__PURE__ */ r(
-                  Ae,
+                  He,
                   {
-                    locale: o,
-                    components: ke,
+                    locale: s,
+                    components: ve,
                     content: e.value
                   }
                 )
               },
-              i
+              n
             );
           if (e.type === "mermaid")
             return /* @__PURE__ */ r(
-              ie,
+              Ce,
               {
                 chart: e.value,
                 frozen: !e.complete,
                 messages: M
               },
-              i
+              n
             );
           if (e.type === "svg")
-            return /* @__PURE__ */ r(Ne, { svg: e.value }, i);
+            return /* @__PURE__ */ r(Te, { svg: e.value }, n);
         }),
-        u && /* @__PURE__ */ r("div", { className: "content-render-custom-bar", children: Q.createElement(u, {
-          content: t,
-          displayContent: ne,
-          onSend: A
-        }) })
+        We
       ]
     }
   );
 };
 export {
-  Ae as MarkdownRenderer,
-  tr as default
+  He as MarkdownRenderer,
+  Mn as default
 };
 //# sourceMappingURL=ContentRender.es.js.map