markdown-flow-ui 0.1.100-beta.4 → 0.1.100-beta.40

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

@@ -1,123 +1,220 @@
-import { j as u } from "../../_virtual/jsx-runtime.es.js";
-import se, { useRef as d, useState as A, useCallback as ve, useEffect as C } from "react";
-import { createRoot as xe } from "react-dom/client";
-import Ee from "./SandboxApp.es.js";
-import { splitContentSegments as ye } from "./utils/split-content.es.js";
-import Ce from "./ContentRender.es.js";
-import Re from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.es.js";
-let G = null;
-const ce = () => (G || (G = import("./blackboard-vendor.es.js").then(
-  (s) => s.injectBlackboardLibraries
-)), G);
-typeof window < "u" && ce();
-const He = /<img\b[^>]*>/i, Se = 180, Te = "markdown-flow-ui:sandbox", Ae = "interaction", Me = 240, ae = (s) => s.split(/\s+/).filter(Boolean).map((n) => n.split(":").pop() || n), ie = (s) => {
-  const n = s.trim().toLowerCase();
-  if (!n) return null;
-  const m = n.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
-  return m ? `${m[1]}${m[2].toLowerCase()}` : null;
-}, le = (s) => {
-  if (!s.trim()) return null;
-  const n = ae(s);
-  if (n.includes("h-screen") || n.includes("h-dvh"))
+import { j as b } from "../../_virtual/jsx-runtime.es.js";
+import N, { useRef as d, useState as V, useCallback as Ae, useEffect as y } from "react";
+import { createRoot as Re } from "react-dom/client";
+import Te from "./SandboxApp.es.js";
+import { splitContentSegments as Me } from "./utils/split-content.es.js";
+import Ne from "./ContentRender.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as Ve, SANDBOX_INTERACTION_MESSAGE_SOURCE as Fe } from "../../lib/sandboxInteraction.es.js";
+let U = null;
+const Ie = () => (U || (U = import("./blackboard-vendor.es.js").then(
+  (t) => t.injectBlackboardLibraries
+)), U), ke = () => {
+  const t = performance.now(), e = (/* @__PURE__ */ new Date()).toISOString();
+  return console.log("[IframeSandbox][SandboxLoad] start", { startedAt: e }), Ie().then((n) => (console.log("[IframeSandbox][SandboxLoad] done", {
+    startedAt: e,
+    endedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    durationMs: Number((performance.now() - t).toFixed(2))
+  }), n)).catch((n) => {
+    throw console.error("[IframeSandbox][SandboxLoad] failed", {
+      startedAt: e,
+      endedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      durationMs: Number((performance.now() - t).toFixed(2)),
+      error: n
+    }), n;
+  });
+}, De = /<img\b[^>]*>/i, Oe = 180, _e = 240, he = (t) => t.split(/\s+/).filter(Boolean).map((e) => e.split(":").pop() || e), L = (t) => {
+  const e = t.trim().toLowerCase();
+  if (!e) return null;
+  const n = e.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
+  return n ? `${n[1]}${n[2].toLowerCase()}` : null;
+}, W = (t) => {
+  if (!t.trim()) return null;
+  const e = he(t);
+  if (e.includes("h-screen") || e.includes("h-dvh") || e.includes("min-h-screen") || e.includes("min-h-dvh"))
     return "100dvh";
-  if (n.includes("h-svh"))
+  if (e.includes("h-svh") || e.includes("min-h-svh"))
     return "100svh";
-  if (n.includes("h-lvh"))
+  if (e.includes("h-lvh") || e.includes("min-h-lvh"))
     return "100lvh";
-  const m = n.find(
-    (M) => /^h-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(M)
+  const n = e.find(
+    (i) => /^(h|min-h)-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(i)
+  );
+  if (!n) return null;
+  const s = n.match(
+    /^(h|min-h)-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i
+  );
+  return s ? `${s[2]}${s[3].toLowerCase()}` : null;
+}, Le = /* @__PURE__ */ new Set([
+  "base",
+  "link",
+  "meta",
+  "script",
+  "style",
+  "template",
+  "title"
+]), de = (t) => !Le.has(t.tagName.toLowerCase()), $e = (t) => Array.from(t.childNodes).find(
+  (e) => e.nodeType === Node.ELEMENT_NODE && de(e)
+) || null, je = (t) => {
+  const e = [];
+  let n = $e(t);
+  for (; n; ) {
+    e.push(n);
+    const s = Array.from(n.children).filter(
+      (i) => de(i)
+    );
+    if (s.length !== 1)
+      break;
+    n = s[0];
+  }
+  return e;
+}, Be = (t) => {
+  const e = t.getAttribute("height"), n = e ? L(e) : null;
+  if (n)
+    return n;
+  const s = t.getAttribute("style")?.match(/\bheight\s*:\s*([^;]+)/i)?.[1] || null, i = s ? L(s) : null;
+  return i || W(
+    t.getAttribute("class") || ""
   );
-  if (!m) return null;
-  const p = m.match(/^h-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i);
-  return p ? `${p[1]}${p[2].toLowerCase()}` : null;
-}, Oe = ({
-  content: s,
-  type: n,
-  className: m,
-  loadingText: p,
-  styleLoadingText: M,
-  scriptLoadingText: U,
-  fullScreenButtonText: j,
-  hideFullScreen: W = !1,
-  mode: h = "content"
+}, me = (t) => t === "100vh" || t === "100dvh" || t === "100svh" || t === "100lvh", fe = (t) => {
+  const e = je(t);
+  let n = null, s = !1;
+  return e.forEach((i) => {
+    const l = Be(i);
+    !n && l && (n = l), me(l) && (s = !0);
+  }), {
+    viewportHeightCss: n,
+    hasFullViewportHeight: s
+  };
+}, ze = (t) => {
+  const e = t.trim();
+  if (!e)
+    return {
+      viewportHeightCss: null,
+      hasFullViewportHeight: !1
+    };
+  const s = e.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/)?.[2] || "", i = s.match(/\bheight\s*=\s*["']([^"']+)["']/i)?.[1], m = s.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
+    /\bheight\s*:\s*([^;]+)/i
+  )?.[1], C = s.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1], h = (i ? L(i) : null) || (m ? L(m) : null) || (C ? W(C) : null);
+  return {
+    viewportHeightCss: h,
+    hasFullViewportHeight: me(h)
+  };
+}, ue = (t) => {
+  const e = t.trim();
+  if (!e)
+    return {
+      viewportHeightCss: null,
+      hasFullViewportHeight: !1
+    };
+  if (typeof document > "u")
+    return ze(e);
+  const n = document.createElement("template");
+  return n.innerHTML = e, fe(n.content);
+}, Pe = (t) => t.split(/\s+/).filter(Boolean).map((e) => {
+  const n = e.split(":");
+  return n[n.length - 1] !== "h-screen" && n[n.length - 1] !== "min-h-screen" ? e : (n[n.length - 1] = "h-full", n.join(":"));
+}).join(" "), qe = (t, e) => !e || !t.trim() ? t : t.replace(
+  /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
+  (n, s, i = "") => {
+    const l = i.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+    if (!l)
+      return n;
+    const m = Pe(l[2]);
+    return m === l[2] ? n : `${s}${i.replace(
+      l[0],
+      `class=${l[1]}${m}${l[1]}`
+    )}>`;
+  }
+), Ke = ({
+  content: t,
+  type: e,
+  className: n,
+  loadingText: s,
+  styleLoadingText: i,
+  scriptLoadingText: l,
+  fullScreenButtonText: m,
+  hideFullScreen: C = !1,
+  mode: h = "content",
+  replaceRootScreenHeightWithFull: F = !1
 }) => {
-  const X = d(null), E = d(null), _ = d(null), Y = d(null), D = d(() => {
-  }), [ue, de] = A(480), Z = d(0), [J, he] = A(0), [me, fe] = A(!1), [L, O] = A(
-    n !== "sandbox"
-  ), B = h === "blackboard", F = d(""), r = se.useMemo(() => {
-    const e = ye(s).filter((l) => l.type === "sandbox");
-    return (h === "blackboard" ? e[e.length - 1]?.value || "" : e.map((l) => l.value).join(`
+  const Y = d(null), E = d(null), $ = d(null), Z = d(null), j = d(() => {
+  }), [ge, pe] = V(480), J = d(0), [K, be] = V(0), [we, ve] = V(!1), [, B] = V(!0), xe = e === "sandbox", z = h === "blackboard", P = d(""), I = N.useMemo(() => {
+    const r = Me(t).filter((g) => g.type === "sandbox");
+    return (h === "blackboard" ? r[r.length - 1]?.value || "" : r.map((g) => g.value).join(`
 `)) || "";
-  }, [s, h]), [k, K] = A(r), Q = d(r), z = d(r), R = d(null), y = ve((t) => {
+  }, [t, h]), c = N.useMemo(
+    () => qe(
+      I,
+      F
+    ),
+    [I, F]
+  ), Q = N.useMemo(
+    () => ue(I),
+    [I]
+  ), ee = N.useMemo(
+    () => F && Q.hasFullViewportHeight,
+    [Q.hasFullViewportHeight, F]
+  ), [k, te] = V(
+    c
+  ), ne = d(c), re = d(c), A = d(null), R = d(null), S = Ae((o) => {
     if (typeof window > "u")
       return;
-    const e = Date.now();
-    e - Z.current < Me || (Z.current = e, window.postMessage(
+    const r = Date.now();
+    r - J.current < _e || (J.current = r, window.postMessage(
       {
-        source: Te,
-        type: Ae,
-        eventType: t
+        source: Fe,
+        type: Ve,
+        eventType: o
       },
       window.location.origin
     ));
-  }, []), $ = () => {
-    R.current !== null && (window.clearTimeout(R.current), R.current = null);
+  }, []), oe = () => {
+    A.current !== null && (window.clearTimeout(A.current), A.current = null);
+  }, He = () => {
+    R.current !== null && (window.cancelAnimationFrame(R.current), R.current = null);
   };
-  C(
+  y(
     () => () => {
-      $();
+      oe(), He();
     },
     []
-  ), C(() => {
-    const t = Q.current;
-    Q.current = r;
-    const e = !!t && r.length > t.length && r.startsWith(t), i = He.test(r);
-    if (!(e && i)) {
-      $(), z.current = r, K(r);
+  ), y(() => {
+    const o = ne.current;
+    ne.current = c;
+    const r = !!o && c.length > o.length && c.startsWith(o), w = De.test(
+      c
+    ), g = r && w;
+    if (re.current = c, oe(), !g) {
+      te(c);
       return;
     }
-    z.current = r, $(), R.current = window.setTimeout(() => {
-      K(z.current), R.current = null;
-    }, Se);
-  }, [r]);
-  const ee = se.useMemo(() => {
-    const t = k.trim();
-    if (!t) return null;
-    const e = t.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
-    if (!e) return null;
-    const i = e[2] || "", l = i.match(/\bheight\s*=\s*["']([^"']+)["']/i);
-    if (l) {
-      const f = ie(l[1]);
-      if (f) return f;
-    }
-    const S = i.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
-      /\bheight\s*:\s*([^;]+)/i
-    )?.[1];
-    if (S) {
-      const f = ie(S);
-      if (f) return f;
-    }
-    const g = i.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1];
-    return g ? le(g) : null;
-  }, [k]), te = !!ee, ne = n === "sandbox", H = B && n === "sandbox" ? ee ?? `${ue}px` : void 0;
-  C(() => {
+    A.current = window.setTimeout(() => {
+      te(re.current), A.current = null;
+    }, Oe);
+  }, [c]);
+  const se = N.useMemo(
+    () => ue(k).viewportHeightCss,
+    [k]
+  ), ie = !!se, T = z && e === "sandbox" ? ee ? "100%" : se ?? `${ge}px` : void 0;
+  y(() => {
     if (h !== "blackboard") {
-      F.current = r;
+      P.current = c;
       return;
     }
-    const t = F.current;
-    !(t && r.startsWith(t)) && t && he((i) => i + 1), F.current = r;
-  }, [r, h]), C(() => {
-    const t = E.current;
-    if (!t) return;
-    const e = t.contentDocument;
-    if (!e) return;
-    e.open(), e.write(`<!DOCTYPE html>
+    const o = P.current;
+    !(o && c.startsWith(o)) && o && be((w) => w + 1), P.current = c;
+  }, [h, c]), y(() => {
+    const o = E.current;
+    if (!o) return;
+    const r = o.contentDocument;
+    if (!r) return;
+    r.open(), r.write(`<!DOCTYPE html>
 <html${h === "blackboard" ? ' style="height: 100%;"' : ""}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
+      :root { color-scheme: light; }
       html, body, #root { width: 100%; height: 100%; }
       html, body { margin: 0; padding: 0; overflow: auto; }
       *, *::before, *::after { box-sizing: border-box; }
@@ -126,182 +223,182 @@ const He = /<img\b[^>]*>/i, Se = 180, Te = "markdown-flow-ui:sandbox", Ae = "int
   <body>
     <div id="root"></div>
   </body>
-</html>`), e.close(), Y.current = e;
-    const i = B && n === "sandbox", l = () => y("pointerdown"), V = () => y("mousedown"), S = () => y("touchstart");
-    i && (e.addEventListener("pointerdown", l, !0), e.addEventListener("mousedown", V, !0), e.addEventListener("touchstart", S, !0));
-    const g = e.getElementById("root");
-    if (!g) return;
-    const f = xe(g);
-    _.current = f;
-    let T = !1;
-    const oe = (c, b) => {
-      const o = c.trim().toLowerCase();
-      if (!o) return null;
-      const a = Number.parseFloat(o);
-      return Number.isNaN(a) ? null : /(dvh|svh|lvh|vh)$/i.test(o) ? a / 100 * b : o.endsWith("px") || /^[0-9.]+$/.test(o) ? a : null;
-    }, ge = (c, b) => {
-      if (!c.trim()) return null;
-      const o = le(c);
-      if (o)
-        return oe(o, b);
-      const w = ae(c).find(
-        (I) => /^h-\[[0-9.]+px\]$/i.test(I)
+</html>`), r.close(), r.documentElement.setAttribute("data-theme", "light"), r.documentElement.style.colorScheme = "light", r.body?.style.setProperty("color-scheme", "light"), Z.current = r;
+    const w = z && e === "sandbox", g = () => S("pointerdown"), le = () => S("mousedown"), ce = () => S("touchstart");
+    w && (r.addEventListener("pointerdown", g, !0), r.addEventListener("mousedown", le, !0), r.addEventListener("touchstart", ce, !0));
+    const D = r.getElementById("root");
+    if (!D) return;
+    const ae = Re(D);
+    $.current = ae;
+    let M = !1;
+    const q = (a, p) => {
+      const u = a.trim().toLowerCase();
+      if (!u) return null;
+      const v = Number.parseFloat(u);
+      return Number.isNaN(v) ? null : /(dvh|svh|lvh|vh)$/i.test(u) ? v / 100 * p : u.endsWith("px") || /^[0-9.]+$/.test(u) ? v : null;
+    }, ye = (a, p) => {
+      if (!a.trim()) return null;
+      const u = W(a);
+      if (u)
+        return q(u, p);
+      const f = he(a).find(
+        (_) => /^h-\[[0-9.]+px\]$/i.test(_)
       );
-      if (!w) return null;
-      const v = w.match(/^h-\[([0-9.]+)px\]$/i);
-      if (!v) return null;
-      const x = Number.parseFloat(v[1]);
-      return Number.isNaN(x) ? null : x;
-    }, we = () => {
-      if (!E.current || !e.body) return null;
-      const b = e.body.querySelector(
+      if (!f) return null;
+      const x = f.match(/^h-\[([0-9.]+)px\]$/i);
+      if (!x) return null;
+      const H = Number.parseFloat(x[1]);
+      return Number.isNaN(H) ? null : H;
+    }, Ce = () => {
+      if (!E.current || !r.body) return null;
+      const a = E.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, { viewportHeightCss: p } = fe(r.body), u = p ? q(p, a) : null;
+      if (u !== null)
+        return Math.ceil(u);
+      const f = r.body.querySelector(
         ".sandbox-wrapper"
-      )?.firstElementChild;
-      if (!b) return null;
-      const o = Array.from(b.children);
-      if (o.length !== 1) return null;
-      const a = o[0], w = a.style.height || a.getAttribute("height"), v = E.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, x = w ? oe(w, v) : null;
-      if (x !== null)
-        return Math.ceil(x);
-      const I = ge(
-        a.getAttribute("class") || "",
-        v
+      )?.querySelector(
+        ".sandbox-container > *"
       );
-      return I !== null ? Math.ceil(I) : null;
-    }, P = () => {
-      if (!E.current || !e.body) return;
-      const c = e.body.getBoundingClientRect(), b = e.documentElement?.getBoundingClientRect(), o = c.height, a = b?.height || 0, w = Math.max(o, a), v = we(), x = Math.max(
+      if (!f) return null;
+      const x = f.style.height || f.getAttribute("height"), H = x ? q(x, a) : null;
+      if (H !== null)
+        return Math.ceil(H);
+      const _ = ye(
+        f.getAttribute("class") || "",
+        a
+      );
+      return _ !== null ? Math.ceil(_) : null;
+    }, G = () => {
+      if (!E.current || !r.body) return;
+      const a = r.body.getBoundingClientRect(), p = r.documentElement?.getBoundingClientRect(), u = a.height, v = p?.height || 0, f = Math.max(u, v), x = Ce(), H = Math.max(
         200,
-        v ?? Math.ceil(w)
+        x ?? Math.ceil(f)
       );
-      de(x);
-    }, N = () => {
+      pe(H);
+    }, O = () => {
       requestAnimationFrame(() => {
-        T || P();
+        M || G();
       });
     };
-    D.current = N, P(), N(), ne ? ce().then((c) => {
-      T || (c(e), requestAnimationFrame(() => {
-        T || (O(!0), N());
+    j.current = O, G(), O(), xe ? ke().then((a) => {
+      M || (a(r), requestAnimationFrame(() => {
+        M || (B(!0), O());
       }));
     }).catch(() => {
-      T || (O(!0), N());
-    }) : O(!0);
-    const q = new ResizeObserver(() => P());
-    return q.observe(e.body), g && q.observe(g), () => {
-      T = !0, q.disconnect(), i && (e.removeEventListener("pointerdown", l, !0), e.removeEventListener("mousedown", V, !0), e.removeEventListener("touchstart", S, !0)), setTimeout(() => {
-        f.unmount(), _.current = null, Y.current = null, D.current = () => {
+      M || (B(!0), O());
+    }) : B(!0);
+    const X = new ResizeObserver(() => G());
+    return X.observe(r.body), D && X.observe(D), () => {
+      M = !0, X.disconnect(), w && (r.removeEventListener("pointerdown", g, !0), r.removeEventListener("mousedown", le, !0), r.removeEventListener("touchstart", ce, !0)), setTimeout(() => {
+        ae.unmount(), $.current = null, Z.current = null, j.current = () => {
         };
       }, 0);
     };
-  }, []), C(() => {
-    const t = () => {
-      fe(!!document.fullscreenElement);
+  }, []), y(() => {
+    const o = () => {
+      ve(!!document.fullscreenElement);
     };
-    return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
+    return document.addEventListener("fullscreenchange", o), () => document.removeEventListener("fullscreenchange", o);
   }, []);
-  const be = () => {
-    const t = X.current || E.current;
-    if (t) {
+  const Ee = () => {
+    const o = Y.current || E.current;
+    if (o) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
         });
         return;
       }
-      t.requestFullscreen && t.requestFullscreen().catch(() => {
+      o.requestFullscreen && o.requestFullscreen().catch(() => {
       });
     }
   };
-  C(() => {
-    const t = _.current;
-    !t || !L || (t.render(
-      /* @__PURE__ */ u.jsx(
-        Ee,
+  y(() => {
+    const o = $.current;
+    o && (o.render(
+      /* @__PURE__ */ b.jsx(
+        Te,
         {
           html: k,
-          loadingText: p,
-          styleLoadingText: M,
-          scriptLoadingText: U,
-          fullScreenButtonText: j,
-          hideFullScreen: W,
-          resetToken: J,
-          hasRootVhHeight: te,
-          mode: h
+          loadingText: s,
+          styleLoadingText: i,
+          scriptLoadingText: l,
+          fullScreenButtonText: m,
+          hideFullScreen: C,
+          resetToken: K,
+          hasRootVhHeight: ie,
+          mode: h,
+          stretchRootHeight: ee
         }
       )
-    ), requestAnimationFrame(() => D.current?.()));
+    ), R.current = window.requestAnimationFrame(() => {
+      j.current?.(), R.current = null;
+    }));
   }, [
     k,
-    p,
-    M,
-    U,
-    j,
-    J,
-    h,
-    L
+    s,
+    i,
+    l,
+    m,
+    K,
+    h
   ]);
-  const pe = [
+  const Se = [
     "w-full relative content-render-iframe-sandbox",
-    B ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
-  ].filter(Boolean).join(" "), re = ne && !L;
-  return /* @__PURE__ */ u.jsxs(
+    z ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b.jsxs(
     "div",
     {
-      ref: X,
-      "data-root-vh": te ? "true" : "false",
-      className: pe,
-      style: H ? {
-        height: H,
-        minHeight: H
+      ref: Y,
+      "data-root-vh": ie ? "true" : "false",
+      className: Se,
+      style: T ? {
+        height: T,
+        minHeight: T
       } : void 0,
       children: [
-        !W && /* @__PURE__ */ u.jsx(
+        !C && /* @__PURE__ */ b.jsx(
           "button",
           {
             type: "button",
-            onClick: be,
+            onClick: Ee,
             className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: me ? "退出全屏" : j || "全屏浏览"
+            children: we ? "退出全屏" : m || "全屏浏览"
           }
         ),
-        h === "blackboard" && n === "markdown" ? /* @__PURE__ */ u.jsx(
+        h === "blackboard" && e === "markdown" ? /* @__PURE__ */ b.jsx(
           "div",
           {
-            onMouseDown: () => y("mousedown"),
-            onPointerDown: () => y("pointerdown"),
-            onTouchStart: () => y("touchstart"),
-            children: /* @__PURE__ */ u.jsx(Ce, { content: s })
+            onMouseDown: () => S("mousedown"),
+            onPointerDown: () => S("pointerdown"),
+            onTouchStart: () => S("touchstart"),
+            children: /* @__PURE__ */ b.jsx(Ne, { content: t })
           }
-        ) : /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
-          /* @__PURE__ */ u.jsx(
+        ) : /* @__PURE__ */ b.jsxs(b.Fragment, { children: [
+          null,
+          /* @__PURE__ */ b.jsx(
             "iframe",
             {
               ref: E,
               sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
               allow: "fullscreen",
               allowFullScreen: !0,
-              className: [m, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
+              className: [n, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
               style: {
-                height: H ?? "100%",
-                minHeight: H,
+                height: T ?? "100%",
+                minHeight: T,
                 margin: "auto",
-                visibility: re ? "hidden" : "visible"
+                visibility: "visible"
               }
             }
           ),
-          re ? /* @__PURE__ */ u.jsx("div", { className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center", children: /* @__PURE__ */ u.jsx(
-            Re,
-            {
-              "aria-label": p || "Preparing sandbox styles",
-              className: "text-primary h-7 w-7 animate-spin"
-            }
-          ) }) : null
+          null
         ] })
       ]
     }
   );
 };
 export {
-  Oe as default
+  Ke as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map