@vanillaskyai/video 0.1.0

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

@@ -0,0 +1,695 @@
+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
+};