markdown-flow-ui 0.1.100-beta.13 → 0.1.100-beta.14

package/dist/components/Slide/Slide.es.js

@@ -1,9 +1,9 @@
-import { j as t } from "../../_virtual/jsx-runtime.es.js";
-import { memo as Ve, useRef as v, useMemo as O, useState as y, useCallback as i, useEffect as h } from "react";
-import { hasBrowserUserActivation as ze } from "../../lib/browserUserActivation.es.js";
-import { isSandboxInteractionMessage as Ge } from "../../lib/sandboxInteraction.es.js";
-import { cn as $ } from "../../lib/utils.es.js";
-import We from "../ContentRender/ContentRender.es.js";
+import { j as n } from "../../_virtual/jsx-runtime.es.js";
+import { memo as Ue, useRef as v, useMemo as H, useState as y, useCallback as i, useEffect as p } from "react";
+import { hasBrowserUserActivation as Ve } from "../../lib/browserUserActivation.es.js";
+import { isSandboxInteractionMessage as ze } from "../../lib/sandboxInteraction.es.js";
+import { cn as O } from "../../lib/utils.es.js";
+import Ge from "../ContentRender/ContentRender.es.js";
 import ye from "../ContentRender/IframeSandbox.es.js";
 import "../ui/inputGroup/input-group.es.js";
 import { getInteractionDefaultValues as Ye, getInteractionDefaultSelectedValues as Je } from "../../lib/interaction-defaults.es.js";
@@ -11,139 +11,139 @@ import Qe from "./Player.es.js";
 import Xe from "./useSlide.es.js";
 import Ze from "./useWakePlayerFromIframe.es.js";
 /* empty css             */
-const et = 1e3, we = Ve(
+const et = 1e3, Se = Ue(
   ({
     content: b,
     title: _,
     defaultButtonText: u,
-    defaultInputText: j,
-    defaultSelectedValues: w,
+    defaultInputText: N,
+    defaultSelectedValues: S,
     confirmButtonText: T,
-    copyButtonText: R,
+    copyButtonText: j,
     copiedButtonText: P,
-    onSend: D,
+    onSend: $,
     readonly: B = !1
-  }) => /* @__PURE__ */ t.jsxs("div", { className: "slide-player__interaction-card", children: [
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-header", children: /* @__PURE__ */ t.jsx("p", { className: "slide-player__interaction-title", children: _ }) }),
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-body", children: /* @__PURE__ */ t.jsx(
-      We,
+  }) => /* @__PURE__ */ n.jsxs("div", { className: "slide-player__interaction-card", children: [
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-header", children: /* @__PURE__ */ n.jsx("p", { className: "slide-player__interaction-title", children: _ }) }),
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-body", children: /* @__PURE__ */ n.jsx(
+      Ge,
       {
         content: b,
         defaultButtonText: u,
-        defaultInputText: j,
-        defaultSelectedValues: w,
+        defaultInputText: N,
+        defaultSelectedValues: S,
         confirmButtonText: T,
-        copyButtonText: R,
+        copyButtonText: j,
         copiedButtonText: P,
-        onSend: D,
+        onSend: $,
         readonly: B,
         enableTypewriter: !1,
         sandboxMode: "content"
       }
     ) }),
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-arrow" })
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-arrow" })
   ] })
 );
-we.displayName = "InteractionOverlayCard";
-const tt = (b, _) => b.length === _.length && b.every((u, j) => {
-  const w = _[j];
-  return u.sequence_number === w?.sequence_number && u.type === w?.type && u.content === w?.content;
+Se.displayName = "InteractionOverlayCard";
+const tt = (b, _) => b.length === _.length && b.every((u, N) => {
+  const S = _[N];
+  return u.sequence_number === S?.sequence_number && u.type === S?.type && u.content === S?.content;
 }), xt = ({
   elementList: b = [],
   showPlayer: _ = !0,
   playerAlwaysVisible: u = !1,
-  playerClassName: j,
-  interactionTitle: w,
+  playerClassName: N,
+  interactionTitle: S,
   interactionTexts: T,
-  playerAutoHideDelay: R = 3e3,
+  playerAutoHideDelay: j = 3e3,
   interactionDefaultValueOptions: P,
-  onSend: D,
+  onSend: $,
   onPlayerVisibilityChange: B,
   onStepChange: oe,
-  className: Ie,
+  className: we,
   onPointerDown: se,
-  ...Se
+  ...Ie
 }) => {
-  const ee = v(null), te = v(null), le = v(null), C = v(null), q = v(null), F = v(null), ie = v([]), H = v(!1), {
+  const ee = v(null), te = v(null), le = v(null), C = v(null), F = v(null), q = v(null), ie = v([]), D = v(!1), {
     currentElementList: f,
     stepElementLists: ae,
-    slideElementList: K,
+    slideElementList: W,
     currentIndex: x,
     audioList: ce,
     currentAudioSequenceIndexes: k,
     currentInteractionElement: M,
     canGoPrev: be,
-    canGoNext: I,
+    canGoNext: w,
     handlePrev: ue,
     handleNext: g
-  } = Xe(b), de = O(() => {
+  } = Xe(b), de = H(() => {
     if (!(x < 0))
-      return K[x];
-  }, [x, K]), _e = K.filter(
+      return W[x];
+  }, [x, W]), _e = W.filter(
     (e) => e.is_renderable !== !1
-  ).length === 1, d = _ && (K.length > 0 || ce.length > 0 || !!M), [fe, U] = y(!0), [V, L] = y(!1), [Te, ne] = y(!1), [Pe] = y(() => ze()), Ee = Pe || Te, [Ae, z] = y(-1), [G, W] = y(-1), [n, re] = y(), [Y, J] = y(!1), E = d && (u || fe), S = i(() => {
+  ).length === 1, d = _ && (W.length > 0 || ce.length > 0 || !!M), [fe, K] = y(!0), [U, L] = y(!1), [Te, ne] = y(!1), [Pe] = y(() => Ve()), Ee = Pe || Te, [Ae, V] = y(-1), [z, G] = y(-1), [r, re] = y(), [Y, J] = y(!1), E = d && (u || fe), I = i(() => {
     C.current !== null && (window.clearTimeout(C.current), C.current = null);
   }, []), m = i(() => {
-    F.current !== null && (window.clearTimeout(F.current), F.current = null);
-  }, []), A = i(() => {
     q.current !== null && (window.clearTimeout(q.current), q.current = null);
-  }, []), N = i(() => {
-    A(), m(), z(-1), W(-1), re(void 0), J(!1);
+  }, []), A = i(() => {
+    F.current !== null && (window.clearTimeout(F.current), F.current = null);
+  }, []), R = i(() => {
+    A(), m(), V(-1), G(-1), re(void 0), J(!1);
   }, [A, m]), Q = i(() => {
     const e = k[0];
-    return typeof e != "number" ? !1 : (W(0), z(e), !0);
+    return typeof e != "number" ? !1 : (G(0), V(e), !0);
   }, [k]), X = i(() => {
-    m(), J(!1), !Q() && I && g();
+    m(), J(!1), !Q() && w && g();
   }, [
-    I,
+    w,
     m,
     g,
     Q
   ]), a = i(
-    (e = V) => {
-      d && (U(!0), S(), !(u || !e || R <= 0) && (C.current = window.setTimeout(() => {
-        U(!1), C.current = null;
-      }, R)));
+    (e = U) => {
+      d && (K(!0), I(), !(u || !e || j <= 0) && (C.current = window.setTimeout(() => {
+        K(!1), C.current = null;
+      }, j)));
     },
     [
-      S,
-      V,
+      I,
+      U,
       u,
-      R,
+      j,
       d
     ]
   );
-  h(() => () => {
-    A(), S(), m();
+  p(() => () => {
+    A(), I(), m();
   }, [
     A,
     m,
-    S
-  ]), h(() => (B?.(E), () => {
+    I
+  ]), p(() => (B?.(E), () => {
     B?.(!1);
-  }), [B, E]), h(() => {
+  }), [B, E]), p(() => {
     oe?.(de, x);
-  }, [x, de, oe]), h(() => {
+  }, [x, de, oe]), p(() => {
     if (!d) {
-      S(), U(!1);
+      I(), K(!1);
       return;
     }
     if (u) {
-      S(), U(!0);
+      I(), K(!0);
       return;
     }
-    V || a(!0);
+    U || a(!0);
   }, [
-    S,
-    V,
+    I,
+    U,
     u,
     d,
     a
-  ]), h(() => {
+  ]), p(() => {
     if (typeof window > "u")
       return;
-    const e = (r) => {
-      r.origin === window.location.origin && Ge(r.data) && d && (L(!0), a(!0));
+    const e = (t) => {
+      t.origin === window.location.origin && ze(t.data) && d && (L(!0), a(!0));
     };
     return window.addEventListener("message", e), () => {
       window.removeEventListener("message", e);
@@ -154,40 +154,40 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
     onWake: () => {
       L(!0), a(!0);
     }
-  }), h(() => {
-    if (N(), !(f.length === 0 && !M)) {
+  }), p(() => {
+    if (R(), !(f.length === 0 && !M)) {
       if (M) {
         re(M), J(!0);
         return;
       }
-      if (!Q() && I)
-        return q.current = window.setTimeout(() => {
-          q.current = null, g();
+      if (!Q() && w)
+        return F.current = window.setTimeout(() => {
+          F.current = null, g();
         }, et), () => {
           A();
         };
     }
   }, [
-    I,
+    w,
     A,
     f,
     M,
     g,
-    N,
+    R,
     Q
   ]);
-  const me = O(() => n ? Ye(
-    typeof n.content == "string" ? n.content : void 0,
-    n.user_input,
+  const me = H(() => r ? Ye(
+    typeof r.content == "string" ? r.content : void 0,
+    r.user_input,
     P
-  ) : {}, [n, P]), Ne = O(() => {
-    if (n)
+  ) : {}, [r, P]), Re = H(() => {
+    if (r)
       return Je(
-        typeof n.content == "string" ? n.content : void 0,
-        n.user_input,
+        typeof r.content == "string" ? r.content : void 0,
+        r.user_input,
         P
       );
-  }, [n, P]), pe = !!n?.user_input?.trim(), he = !!n?.readonly || pe, xe = he || pe, je = i(
+  }, [r, P]), he = !!r?.user_input?.trim(), pe = !!r?.readonly || he, xe = pe || he, Ne = i(
     (e) => {
       const s = [
         ...e.selectedValues ?? [],
@@ -197,14 +197,14 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
       re((c) => !c || !s ? c : {
         ...c,
         user_input: s
-      }), D?.(e, n), X();
+      }), $?.(e, r), X();
     },
-    [n, X, D]
+    [r, X, $]
   );
-  h(() => {
+  p(() => {
     if (m(), !(!Y || !xe))
-      return F.current = window.setTimeout(() => {
-        F.current = null, X();
+      return q.current = window.setTimeout(() => {
+        q.current = null, X();
       }, 2e3), () => {
         m();
       };
@@ -214,16 +214,17 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
     Y,
     xe
   ]);
-  const Re = (e) => e ? e.type === "slot" ? /* @__PURE__ */ t.jsx(t.Fragment, { children: e.content }) : e.type === "html" ? /* @__PURE__ */ t.jsx(
+  const je = (e, t = {}) => e ? e.type === "slot" ? /* @__PURE__ */ n.jsx(n.Fragment, { children: e.content }) : e.type === "html" ? /* @__PURE__ */ n.jsx(
     ye,
     {
       className: "content-render-iframe",
       hideFullScreen: !0,
       mode: "blackboard",
+      replaceRootScreenHeightWithFull: t.replaceRootScreenHeightWithFull,
       type: "sandbox",
       content: e.content
     }
-  ) : /* @__PURE__ */ t.jsx(
+  ) : /* @__PURE__ */ n.jsx(
     ye,
     {
       className: "content-render-iframe",
@@ -232,34 +233,36 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
       type: "markdown",
       content: e.content
     }
-  ) : null, Be = (e = [], r = !1) => {
+  ) : null, Be = (e = [], t = !1) => {
     if (e.length === 0)
       return null;
     const s = e.filter(
       (o) => o.is_renderable !== !1
     ).length, c = e.reduce(
-      (o, l, p) => l.is_renderable !== !1 ? p : o,
+      (o, l, h) => l.is_renderable !== !1 ? h : o,
       -1
     );
-    return /* @__PURE__ */ t.jsx("div", { className: "slide-stage__content flex w-full flex-col gap-4", children: e.map((o, l) => {
-      const p = o.type === "html" && o.is_renderable === !1;
-      return /* @__PURE__ */ t.jsx(
+    return /* @__PURE__ */ n.jsx("div", { className: "slide-stage__content flex w-full flex-col gap-4", children: e.map((o, l) => {
+      const h = o.type === "html" && o.is_renderable === !1;
+      return /* @__PURE__ */ n.jsx(
         "div",
         {
-          ref: r && l === c ? le : null,
-          "aria-hidden": p || void 0,
-          className: $(
+          ref: t && l === c ? le : null,
+          "aria-hidden": h || void 0,
+          className: O(
             "w-full shrink-0",
             s === 1 && o.is_renderable !== !1 && "slide-element--single",
-            p ? "pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0" : o.is_renderable === !1 && "hidden"
+            h ? "pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0" : o.is_renderable === !1 && "hidden"
           ),
-          children: Re(o)
+          children: je(o, {
+            replaceRootScreenHeightWithFull: s === 1 && o.type === "html" && o.is_renderable !== !1
+          })
         },
         o.sequence_number ?? `${o.type}-${l}`
       );
     }) });
-  }, { mountedStepStates: Ce, currentMountedStateIndex: qe } = O(() => {
-    const e = [], r = /* @__PURE__ */ new Map();
+  }, { mountedStepStates: Ce, currentMountedStateIndex: Fe } = H(() => {
+    const e = [], t = /* @__PURE__ */ new Map();
     return ae.forEach((s, c) => {
       const o = e.findIndex(
         (l) => tt(
@@ -268,18 +271,18 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
         )
       );
       if (o >= 0) {
-        e[o]?.sourceStepIndexes.push(c), r.set(c, o);
+        e[o]?.sourceStepIndexes.push(c), t.set(c, o);
         return;
       }
       e.push({
         elementList: s,
         sourceStepIndexes: [c]
-      }), r.set(c, e.length - 1);
+      }), t.set(c, e.length - 1);
     }), {
       mountedStepStates: e,
-      currentMountedStateIndex: x >= 0 ? r.get(x) ?? -1 : -1
+      currentMountedStateIndex: x >= 0 ? t.get(x) ?? -1 : -1
     };
-  }, [x, ae]), Fe = () => {
+  }, [x, ae]), qe = () => {
     const e = ee.current;
     if (e) {
       if (document.fullscreenElement) {
@@ -297,65 +300,65 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
       behavior: "smooth"
     });
   }, []), ke = i(() => {
-    H.current = !0, L(!0), ne(!0), a(!0), N(), ue();
-  }, [ue, N, a]), Me = i(() => {
-    H.current = !0, L(!0), ne(!0), a(!0), N(), g();
-  }, [g, N, a]), Le = i(
+    D.current = !0, L(!0), ne(!0), a(!0), R(), ue();
+  }, [ue, R, a]), Me = i(() => {
+    D.current = !0, L(!0), ne(!0), a(!0), R(), g();
+  }, [g, R, a]), Le = i(
     (e) => {
-      if (G < 0 || k[G] !== e)
+      if (z < 0 || k[z] !== e)
         return;
-      const r = G + 1, s = k[r];
+      const t = z + 1, s = k[t];
       if (typeof s == "number") {
-        W(r), z(s);
+        G(t), V(s);
         return;
       }
-      z(-1), W(-1), I && g();
+      V(-1), G(-1), w && g();
     },
     [
-      I,
+      w,
       k,
-      G,
+      z,
       g
     ]
-  ), Oe = i(() => {
-    n && J((e) => !e);
-  }, [n]), ve = i(
+  ), He = i(() => {
+    r && J((e) => !e);
+  }, [r]), ve = i(
     (e) => {
       e.stopPropagation(), E && a(!0);
     },
     [fe, a]
-  ), $e = i(
+  ), Oe = i(
     (e) => {
       se?.(e), L(!0), a(!0);
     },
     [se, a]
-  ), De = !!n && Y, Z = O(
+  ), $e = !!r && Y, Z = H(
     () => f.map(
-      (e, r) => `${e.sequence_number ?? `${e.type}-${r}`}:${String(e.is_new ?? "")}`
+      (e, t) => `${e.sequence_number ?? `${e.type}-${t}`}:${String(e.is_new ?? "")}`
     ),
     [f]
   );
-  return h(() => {
-    const e = ie.current, c = (e.length > 0 && e.length < Z.length && e.every((l, p) => l === Z[p]) ? f.slice(e.length) : []).some(
+  return p(() => {
+    const e = ie.current, c = (e.length > 0 && e.length < Z.length && e.every((l, h) => l === Z[h]) ? f.slice(e.length) : []).some(
       (l) => l.is_new === !1
     );
     if (ie.current = Z, !c)
       return;
     const o = window.requestAnimationFrame(() => {
-      const l = te.current, p = le.current;
-      if (!l || !p)
+      const l = te.current, h = le.current;
+      if (!l || !h)
         return;
-      const He = l.getBoundingClientRect(), Ke = p.getBoundingClientRect(), Ue = l.scrollTop + (Ke.top - He.top);
+      const De = l.getBoundingClientRect(), We = h.getBoundingClientRect(), Ke = l.scrollTop + (We.top - De.top);
       l.scrollTo({
-        top: Math.max(Ue, 0),
+        top: Math.max(Ke, 0),
         behavior: "smooth"
       });
     });
     return () => {
       window.cancelAnimationFrame(o);
     };
-  }, [f, Z]), h(() => {
-    if (!H.current || (H.current = !1, f.length === 0))
+  }, [f, Z]), p(() => {
+    if (!D.current || (D.current = !1, f.length === 0))
       return;
     const e = window.requestAnimationFrame(() => {
       ge();
@@ -363,84 +366,84 @@ const tt = (b, _) => b.length === _.length && b.every((u, j) => {
     return () => {
       window.cancelAnimationFrame(e);
     };
-  }, [f, ge]), /* @__PURE__ */ t.jsxs(
+  }, [f, ge]), /* @__PURE__ */ n.jsxs(
     "section",
     {
       ref: ee,
-      className: $("relative h-full w-full", Ie),
-      onPointerDown: $e,
-      ...Se,
+      className: O("relative h-full w-full", we),
+      onPointerDown: Oe,
+      ...Ie,
       children: [
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ n.jsx(
           "div",
           {
-            className: $(
+            className: O(
               "h-full min-h-0 w-full",
               _e ? "slide-content--single" : "grid gap-4"
             ),
-            children: f.length > 0 ? /* @__PURE__ */ t.jsx("div", { className: "slide-stage", children: /* @__PURE__ */ t.jsx("div", { ref: te, className: "slide-stage__layer w-full", children: Ce.map(
-              (e, r) => {
-                const s = r === qe;
-                return /* @__PURE__ */ t.jsx(
+            children: f.length > 0 ? /* @__PURE__ */ n.jsx("div", { className: "slide-stage", children: /* @__PURE__ */ n.jsx("div", { ref: te, className: "slide-stage__layer w-full", children: Ce.map(
+              (e, t) => {
+                const s = t === Fe;
+                return /* @__PURE__ */ n.jsx(
                   "div",
                   {
                     "aria-hidden": !s || void 0,
-                    className: "w-full",
+                    className: "w-full h-full",
                     style: { display: s ? void 0 : "none" },
                     children: Be(
                       e.elementList,
                       s
                     )
                   },
-                  e.sourceStepIndexes[0] ?? r
+                  e.sourceStepIndexes[0] ?? t
                 );
               }
             ) }) }) : null
           }
         ),
-        De ? /* @__PURE__ */ t.jsx(
+        $e ? /* @__PURE__ */ n.jsx(
           "div",
           {
-            className: $(
+            className: O(
               "slide-interaction-overlay",
               E && d ? "slide-interaction-overlay--with-player" : "slide-interaction-overlay--standalone"
             ),
             onClick: ve,
             onPointerDown: ve,
-            children: /* @__PURE__ */ t.jsx(
-              we,
+            children: /* @__PURE__ */ n.jsx(
+              Se,
               {
-                content: String(n?.content ?? ""),
+                content: String(r?.content ?? ""),
                 defaultButtonText: me.buttonText ?? "",
                 defaultInputText: me.inputText ?? "",
-                defaultSelectedValues: Ne,
+                defaultSelectedValues: Re,
                 confirmButtonText: T?.confirmButtonText,
                 copyButtonText: T?.copyButtonText,
                 copiedButtonText: T?.copiedButtonText,
-                onSend: je,
-                readonly: he,
-                title: T?.title ?? w ?? "Submit the content below to continue."
+                onSend: Ne,
+                readonly: pe,
+                title: T?.title ?? S ?? "Submit the content below to continue."
               }
             )
           }
         ) : null,
-        d ? /* @__PURE__ */ t.jsx(
+        d ? /* @__PURE__ */ n.jsx(
           Qe,
           {
             audioList: ce,
-            className: $(
+            className: O(
               "absolute left-1/2 bottom-6 z-[2] -translate-x-1/2",
-              j,
+              N,
               !E && "pointer-events-none opacity-0"
             ),
             currentAudioIndex: Ae,
             defaultPlaying: Ee,
-            hasInteraction: !!n,
+            hasInteraction: !!r,
             isInteractionOpen: Y,
-            nextDisabled: !I,
+            nextDisabled: !w,
             onEnded: Le,
-            onFullscreen: Fe,
-            onInteractionToggle: Oe,
+            onFullscreen: qe,
+            onInteractionToggle: He,
             onPlayRequest: () => ne(!0),
             onNext: Me,
             onPrev: ke,