@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/social-conversation-75SD2637.js

@@ -1,695 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import {
-  interpolate
-} from "./chunk-XTOXFMLM.js";
-
-// src/visual-system/scene-templates/normalize-var.ts
-function normalizeTextVar(raw) {
-  if (typeof raw === "string") {
-    const trimmed = raw.trim();
-    if (trimmed.startsWith("{")) {
-      try {
-        const obj = JSON.parse(trimmed);
-        if (typeof obj === "object" && obj !== null) {
-          return extractTextFromObject(obj);
-        }
-      } catch {
-      }
-    }
-    return raw;
-  }
-  if (typeof raw === "object" && raw !== null) {
-    return extractTextFromObject(raw);
-  }
-  return String(raw || "");
-}
-function extractTextFromObject(obj) {
-  const text = String(
-    obj.text || obj.message || obj.body || obj.content || ""
-  );
-  const side = String(obj.side || obj.direction || "").toLowerCase();
-  if (side === "in" || side === "left" || side === "incoming" || side === "received") {
-    return text + "|in";
-  }
-  if (side === "out" || side === "right" || side === "outgoing" || side === "sent") {
-    return text + "|out";
-  }
-  return text;
-}
-
-// src/visual-system/primitives/social/ConversationThread.tsx
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp"
-};
-var REF_DURATION = 16;
-function easeOutBack(t) {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-}
-var WA = {
-  bg: "#EFE7DC",
-  incomingBubble: "#FFFFFF",
-  outgoingBubble: "#D9F4C7",
-  text: "#0E0E0E",
-  textMuted: "#6E6E73",
-  accent: "#0A8F76",
-  chipBg: "#F1E9D8",
-  chipText: "#3C342A",
-  navBg: "#F1E9DA",
-  inputBg: "#FFFFFF",
-  inputBorder: "rgba(0,0,0,0.06)",
-  outgoingTime: "#5C6B4E"
-};
-var IM = {
-  bg: "#ffffff",
-  bubbleOut: "#007AFF",
-  bubbleIn: "#E9E9EB",
-  textOut: "#ffffff",
-  textIn: "#000000",
-  dotsColor: "#8E8E93"
-};
-var WA_TIMING_5 = [
-  { typingStart: 0.6, bubbleStart: 1.4, time: "21:54" },
-  { typingStart: 2.2, bubbleStart: 3, time: "21:55" },
-  { typingStart: 3.8, bubbleStart: 4.8, time: "21:56" },
-  { typingStart: 6.2, bubbleStart: 7.2, time: "12:35" },
-  { typingStart: 10, bubbleStart: 11, time: "11:17" }
-];
-function timingForCount(count) {
-  if (count >= 5) return WA_TIMING_5.slice(0, count);
-  const slot = 12 / count;
-  const out = [];
-  for (let i = 0; i < count; i++) {
-    const start = 0.6 + i * slot;
-    out.push({
-      typingStart: start,
-      bubbleStart: start + slot * 0.5,
-      time: WA_TIMING_5[Math.min(i, 4)].time
-    });
-  }
-  return out;
-}
-function tickStateAt(refTimeSinceSent) {
-  if (refTimeSinceSent < 0.5) return "clock";
-  if (refTimeSinceSent < 1.1) return "sent";
-  if (refTimeSinceSent < 1.8) return "delivered";
-  return "read";
-}
-var ClockIcon = ({ s }) => /* @__PURE__ */ jsxs("svg", { width: 12 * s, height: 12 * s, viewBox: "0 0 12 12", style: { marginLeft: 4 * s }, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: "none", stroke: "#8C8C92", strokeWidth: "1.2" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 3 v3.5 l2 1", stroke: "#8C8C92", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" })
-] });
-var Ticks = ({ state, s }) => {
-  if (state === "clock") return /* @__PURE__ */ jsx(ClockIcon, { s });
-  const color = state === "read" ? "#53BDEB" : "#8C8C92";
-  return /* @__PURE__ */ jsxs("svg", { width: 16 * s, height: 11 * s, viewBox: "0 0 16 11", style: { marginLeft: 4 * s }, children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M1 6 l3 3 l6 -7",
-        stroke: color,
-        strokeWidth: 1.3,
-        fill: "none",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        opacity: state === "sent" ? 0 : 1
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5 6 l3 3 l7 -8",
-        stroke: color,
-        strokeWidth: 1.3,
-        fill: "none",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  ] });
-};
-var ComposeBar = ({ s }) => {
-  const stroke = "#1A1A1A";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        background: WA.navBg,
-        borderTop: "1px solid rgba(0,0,0,0.05)",
-        padding: `${10 * s}px ${14 * s}px ${12 * s}px`,
-        display: "flex",
-        alignItems: "center",
-        gap: 14 * s
-      },
-      children: [
-        /* @__PURE__ */ jsx("svg", { width: 30 * s, height: 30 * s, viewBox: "0 0 30 30", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M15 5 v20 M5 15 h20", stroke, strokeWidth: "1.8", strokeLinecap: "round" }) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              height: 40 * s,
-              background: WA.inputBg,
-              borderRadius: 22 * s,
-              position: "relative",
-              border: `0.5px solid ${WA.inputBorder}`
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  right: 12 * s,
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: /* @__PURE__ */ jsx("svg", { width: 28 * s, height: 28 * s, viewBox: "0 0 24 24", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M3 5 a2 2 0 0 1 2 -2 h10 a2 2 0 0 1 2 2 v6 l-6 6 h-6 a2 2 0 0 1 -2 -2 z M17 11 a4 4 0 0 0 -4 4 v2",
-                    stroke: "#555",
-                    strokeWidth: "1.5",
-                    fill: "none",
-                    strokeLinejoin: "round",
-                    strokeLinecap: "round"
-                  }
-                ) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs("svg", { width: 28 * s, height: 24 * s, viewBox: "0 0 28 24", fill: "none", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M3 6 h5 l2 -3 h8 l2 3 h5 a1 1 0 0 1 1 1 v14 a1 1 0 0 1 -1 1 h-22 a1 1 0 0 1 -1 -1 v-14 a1 1 0 0 1 1 -1 z",
-              stroke,
-              strokeWidth: "1.6",
-              fill: "none",
-              strokeLinejoin: "round"
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14", r: "4.5", stroke, strokeWidth: "1.6", fill: "none" })
-        ] }),
-        /* @__PURE__ */ jsxs("svg", { width: 20 * s, height: 26 * s, viewBox: "0 0 20 26", fill: "none", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsx("rect", { x: "7", y: "2", width: "6", height: "13", rx: "3", stroke, strokeWidth: "1.6", fill: "none" }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M3 12 a7 7 0 0 0 14 0 M10 19 v4 M7 23 h6",
-              stroke,
-              strokeWidth: "1.6",
-              fill: "none",
-              strokeLinecap: "round"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var TypingBubble = ({ side, pop, realTimeSeconds, s, theme }) => {
-  if (pop <= 0) return null;
-  const isOut = side === "right";
-  const isWA = theme === "whatsapp";
-  const dotColor = isWA ? isOut ? "#6B8A55" : "#8C8C92" : IM.dotsColor;
-  const bg = isWA ? isOut ? WA.outgoingBubble : WA.incomingBubble : isOut ? IM.bubbleOut : IM.bubbleIn;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: isOut ? "flex-end" : "flex-start",
-        padding: `${2 * s}px ${(isWA ? 10 : 14) * s}px`,
-        opacity: pop,
-        transform: `scale(${0.9 + 0.1 * pop})`,
-        transformOrigin: isOut ? "right bottom" : "left bottom"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            background: bg,
-            borderRadius: (isWA ? 14 : 18) * s,
-            ...isWA ? {
-              borderTopLeftRadius: isOut ? 14 * s : 2 * s,
-              borderTopRightRadius: isOut ? 2 * s : 14 * s
-            } : {},
-            padding: `${(isWA ? 10 : 12) * s}px ${(isWA ? 12 : 16) * s}px`,
-            display: "flex",
-            gap: 5 * s,
-            alignItems: "center",
-            ...isWA ? { boxShadow: `0 ${1 * s}px ${1 * s}px rgba(0,0,0,0.06)` } : {}
-          },
-          children: [0, 1, 2].map((i) => {
-            const phase = (realTimeSeconds * 1.6 + i * 0.2) % 1;
-            const y = Math.sin(phase * Math.PI * 2) * 2.5 * s;
-            const op = 0.45 + 0.55 * Math.max(0, Math.sin(phase * Math.PI));
-            const dotSize = isWA ? 6 * s : 7 * s;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: dotSize,
-                  height: dotSize,
-                  borderRadius: dotSize / 2,
-                  background: dotColor,
-                  transform: `translateY(${-y}px)`,
-                  opacity: op
-                }
-              },
-              i
-            );
-          })
-        }
-      )
-    }
-  );
-};
-var DateChip = ({
-  label,
-  chipProgress,
-  s
-}) => {
-  if (chipProgress <= 0) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "center",
-        margin: `${12 * s}px 0 ${8 * s}px`,
-        opacity: chipProgress,
-        transform: `scale(${0.88 + 0.12 * chipProgress})`
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            background: WA.chipBg,
-            color: WA.chipText,
-            padding: `${7 * s}px ${16 * s}px`,
-            borderRadius: 9 * s,
-            fontSize: 17 * s,
-            fontWeight: 600,
-            boxShadow: `0 ${1 * s}px ${1.5 * s}px rgba(0,0,0,0.05)`
-          },
-          children: label
-        }
-      )
-    }
-  );
-};
-var IncomingBubble = ({ children, time, pop, s }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    style: {
-      display: "flex",
-      justifyContent: "flex-start",
-      padding: `${2 * s}px ${10 * s}px`,
-      opacity: pop,
-      transform: `translateY(${(1 - pop) * 6 * s}px) scale(${0.97 + 0.03 * pop})`,
-      transformOrigin: "left bottom"
-    },
-    children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          maxWidth: "82%",
-          background: WA.incomingBubble,
-          borderRadius: 10 * s,
-          borderTopLeftRadius: 2 * s,
-          padding: `${12 * s}px ${16 * s}px ${11 * s}px`,
-          fontSize: 23 * s,
-          lineHeight: `${29 * s}px`,
-          color: WA.text,
-          boxShadow: `0 ${1 * s}px ${1 * s}px rgba(0,0,0,0.06)`,
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { paddingRight: 64 * s }, children }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                right: 14 * s,
-                bottom: 8 * s,
-                fontSize: 15 * s,
-                color: WA.textMuted
-              },
-              children: time
-            }
-          )
-        ]
-      }
-    )
-  }
-);
-var OutgoingBubble = ({ children, time, tickState, pop, s }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end",
-      padding: `${2 * s}px ${10 * s}px`,
-      opacity: pop,
-      transform: `translateY(${(1 - pop) * 8 * s}px) scale(${0.96 + 0.04 * pop})`,
-      transformOrigin: "right bottom"
-    },
-    children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          maxWidth: "82%",
-          background: WA.outgoingBubble,
-          borderRadius: 10 * s,
-          borderTopRightRadius: 2 * s,
-          padding: `${12 * s}px ${16 * s}px ${11 * s}px`,
-          fontSize: 23 * s,
-          lineHeight: `${29 * s}px`,
-          color: WA.text,
-          boxShadow: `0 ${1 * s}px ${1 * s}px rgba(0,0,0,0.06)`,
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { paddingRight: 88 * s }, children }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                right: 14 * s,
-                bottom: 8 * s,
-                fontSize: 15 * s,
-                color: WA.outgoingTime,
-                display: "flex",
-                alignItems: "center"
-              },
-              children: [
-                time,
-                /* @__PURE__ */ jsx(Ticks, { state: tickState, s })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  }
-);
-var CHIP_TIMING = {
-  monday: { start: 5.8, end: 6.2 },
-  yesterday: { start: 9.6, end: 10 }
-};
-var ConversationThread = ({
-  progress,
-  width,
-  height,
-  sceneDuration,
-  messages: rawMessages,
-  theme = "whatsapp",
-  dateChip1 = "",
-  dateChip2 = "",
-  safeZoneTop
-}) => {
-  const isLandscape = width > height;
-  const colWidth = isLandscape ? width * 0.72 : width;
-  const colLeft = (width - colWidth) / 2;
-  const s = Math.min(width, height) / 534;
-  const isWhatsApp = theme === "whatsapp";
-  const sanitized = rawMessages.map((m) => ({ ...m, text: stripPipe(m.text || "").trim() })).filter((m) => m.text.length > 0);
-  const timing = timingForCount(Math.max(1, sanitized.length));
-  const messages = sanitized.map((m, i) => ({
-    side: m.side,
-    text: m.text,
-    author: m.author,
-    typingStart: timing[i].typingStart,
-    bubbleStart: timing[i].bubbleStart,
-    time: timing[i].time
-  }));
-  const realTimeSeconds = progress * sceneDuration;
-  const refT = progress * REF_DURATION;
-  const topPad = safeZoneTop != null ? safeZoneTop : height * 0.08;
-  const chip1Label = stripPipe(dateChip1 || "").trim();
-  const chip2Label = stripPipe(dateChip2 || "").trim();
-  const popIn = (t, start, dur = 0.4) => {
-    if (t <= start) return 0;
-    if (t >= start + dur) return 1;
-    return easeOutBack((t - start) / dur);
-  };
-  const ramp = (t, start, end) => {
-    if (t <= start) return 0;
-    if (t >= end) return 1;
-    return (t - start) / (end - start);
-  };
-  if (isWhatsApp) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: WA.bg,
-          overflow: "hidden",
-          fontFamily: '-apple-system, "SF Pro Text", system-ui'
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: colLeft,
-              width: colWidth,
-              top: 0,
-              height,
-              display: "flex",
-              flexDirection: "column"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2 * s,
-                    padding: `${topPad}px 0 ${10 * s}px`
-                  },
-                  children: [
-                    messages.map((msg, i) => {
-                      const typingPop = popIn(refT, msg.typingStart, 0.25);
-                      const typingFade = interpolate(
-                        refT,
-                        [msg.bubbleStart - 0.1, msg.bubbleStart],
-                        [1, 0],
-                        CLAMP
-                      );
-                      const showTyping = refT >= msg.typingStart && refT < msg.bubbleStart;
-                      const bubblePop = popIn(refT, msg.bubbleStart, 0.4);
-                      const showBubble = refT >= msg.bubbleStart;
-                      const isOut = msg.side === "right";
-                      const refSinceSent = refT - msg.bubbleStart - 0.4;
-                      const tickState = isOut ? tickStateAt(Math.max(0, refSinceSent)) : "read";
-                      const chipBeforeThis = (() => {
-                        if (i === 3 && chip1Label) {
-                          return {
-                            label: chip1Label,
-                            progress: ramp(refT, CHIP_TIMING.monday.start, CHIP_TIMING.monday.end)
-                          };
-                        }
-                        if (i === 4 && chip2Label) {
-                          return {
-                            label: chip2Label,
-                            progress: ramp(refT, CHIP_TIMING.yesterday.start, CHIP_TIMING.yesterday.end)
-                          };
-                        }
-                        return null;
-                      })();
-                      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                        chipBeforeThis && /* @__PURE__ */ jsx(
-                          DateChip,
-                          {
-                            label: chipBeforeThis.label,
-                            chipProgress: chipBeforeThis.progress,
-                            s
-                          }
-                        ),
-                        showTyping && /* @__PURE__ */ jsx("div", { style: { opacity: typingPop * typingFade }, children: /* @__PURE__ */ jsx(
-                          TypingBubble,
-                          {
-                            side: msg.side,
-                            pop: typingPop,
-                            realTimeSeconds,
-                            s,
-                            theme: "whatsapp"
-                          }
-                        ) }),
-                        showBubble && (isOut ? /* @__PURE__ */ jsx(OutgoingBubble, { pop: bubblePop, time: msg.time, tickState, s, children: renderWithEmoji(msg.text, 23 * s) }) : /* @__PURE__ */ jsx(IncomingBubble, { pop: bubblePop, time: msg.time, s, children: renderWithEmoji(msg.text, 23 * s) }))
-                      ] }, i);
-                    }),
-                    /* @__PURE__ */ jsx("div", { style: { height: 12 * s } })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(ComposeBar, { s })
-            ]
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: IM.bg,
-        overflow: "hidden",
-        fontFamily: "-apple-system, 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: colLeft,
-            width: colWidth,
-            top: 0,
-            height,
-            padding: `${topPad}px 0 ${20 * s}px`,
-            display: "flex",
-            flexDirection: "column",
-            gap: 4 * s
-          },
-          children: messages.map((msg, i) => {
-            const typingPop = popIn(refT, msg.typingStart, 0.25);
-            const typingFade = interpolate(
-              refT,
-              [msg.bubbleStart - 0.1, msg.bubbleStart],
-              [1, 0],
-              CLAMP
-            );
-            const showTyping = refT >= msg.typingStart && refT < msg.bubbleStart;
-            const bubblePop = popIn(refT, msg.bubbleStart, 0.4);
-            const showBubble = refT >= msg.bubbleStart;
-            const isOut = msg.side === "right";
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              showTyping && /* @__PURE__ */ jsx("div", { style: { opacity: typingPop * typingFade }, children: /* @__PURE__ */ jsx(
-                TypingBubble,
-                {
-                  side: msg.side,
-                  pop: typingPop,
-                  realTimeSeconds,
-                  s,
-                  theme: "messenger"
-                }
-              ) }),
-              showBubble && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: isOut ? "flex-end" : "flex-start",
-                    padding: `${2 * s}px ${14 * s}px`,
-                    opacity: bubblePop,
-                    transform: `translateY(${(1 - bubblePop) * 8 * s}px) scale(${0.96 + 0.04 * bubblePop})`,
-                    transformOrigin: isOut ? "right bottom" : "left bottom"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        maxWidth: "75%",
-                        background: isOut ? IM.bubbleOut : IM.bubbleIn,
-                        color: isOut ? IM.textOut : IM.textIn,
-                        borderRadius: 22 * s,
-                        padding: `${12 * s}px ${18 * s}px`,
-                        fontSize: 23 * s,
-                        lineHeight: `${29 * s}px`
-                      },
-                      children: renderWithEmoji(msg.text, 23 * s)
-                    }
-                  )
-                }
-              )
-            ] }, i);
-          })
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/social-conversation.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var DEFAULT_SIDES = {
-  1: "left",
-  2: "right",
-  3: "left",
-  4: "right",
-  5: "right"
-};
-function buildConversationMessages(variables) {
-  const messages = [];
-  for (let index = 1; index <= 5; index += 1) {
-    let text = normalizeTextVar(variables[`msg${index}`]).trim();
-    if (!text) continue;
-    let side = DEFAULT_SIDES[index] ?? (index % 2 === 1 ? "left" : "right");
-    if (text.endsWith("|in")) {
-      side = "left";
-      text = text.slice(0, -3).trim();
-    } else if (text.endsWith("|out")) {
-      side = "right";
-      text = text.slice(0, -4).trim();
-    }
-    messages.push({ author: side === "left" ? "Customer" : "You", text, side });
-  }
-  return messages;
-}
-var SocialConversationTemplate = ({
-  variables,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  safeZone
-}) => {
-  const theme = String(variables.theme || "messenger").toLowerCase() === "whatsapp" ? "whatsapp" : "messenger";
-  return /* @__PURE__ */ jsx2("div", { style: { width, height, position: "relative", overflow: "hidden", backgroundColor: theme === "whatsapp" ? "#EFE7DC" : "#ffffff" }, children: /* @__PURE__ */ jsx2(
-    ConversationThread,
-    {
-      progress,
-      width,
-      height,
-      sceneDuration: sceneDuration ?? 8,
-      messages: buildConversationMessages(variables),
-      theme,
-      dateChip1: String(variables.dateChip1 || ""),
-      dateChip2: String(variables.dateChip2 || ""),
-      safeZoneTop: Math.max(safeZone.top, height * 0.08),
-      beatIntensity
-    }
-  ) });
-};
-export {
-  SocialConversationTemplate,
-  buildConversationMessages
-};