@vanillaskyai/video 0.8.8 → 0.10.0

package/dist/bg-media-L34PDQXJ.js

@@ -1,106 +0,0 @@
-import {
-  ConfettiLayer
-} from "./chunk-CJ7F2CE6.js";
-import "./chunk-QAAO7OAY.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/scene-templates/bg-media.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var BgMediaTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  backgroundEffect,
-  safeZone,
-  sceneDuration,
-  isPlaying = true
-}) => {
-  const { font, foreground, background } = resolveTokens(style);
-  const text = foreground;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            textAnchor: "center",
-            backgroundEffect,
-            seed: String(variables.texts || ""),
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        variables.confetti === true && /* @__PURE__ */ jsx(
-          ConfettiLayer,
-          {
-            progress: motionProgress,
-            width,
-            height,
-            beatIntensity,
-            bgColor: String(variables.mediaUrl || "").trim() === "" ? background.type === "solid" ? background.color : background.colors[1] : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: textArchetype ?? "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "center",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: text,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  BgMediaTemplate
-};

package/dist/brand-message-FUJ4STFO.js

@@ -1,256 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  interpolate
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/BrandMessageBubble.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var BUBBLE_BG = "rgba(245,242,238,0.92)";
-var BUBBLE_TEXT = "#1c1c1e";
-var DOT_COLOR = "#8C8C92";
-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 TAIL_WITH_EMOJI = /(\S+)(\s+)([\p{Extended_Pictographic}\p{Emoji_Modifier}\u{FE0E}\u{FE0F}\u{200D}]+)\s*$/u;
-function renderMessageWithEmojiTail(text, fontSizePx) {
-  const match = TAIL_WITH_EMOJI.exec(text);
-  if (!match || match.index === void 0) {
-    return renderWithEmoji(text, fontSizePx);
-  }
-  const [, lastWord, space, emoji] = match;
-  const leading = text.slice(0, match.index);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderWithEmoji(leading, fontSizePx),
-    /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
-      lastWord,
-      space,
-      renderWithEmoji(emoji, fontSizePx)
-    ] })
-  ] });
-}
-function popIn(t, start, dur = 0.4) {
-  if (t <= start) return 0;
-  if (t >= start + dur) return 1;
-  return easeOutBack((t - start) / dur);
-}
-var BrandMessageBubble = ({
-  progress,
-  sceneDuration,
-  brandName: rawBrandName,
-  message: rawMessage,
-  width,
-  height,
-  safeZone
-}) => {
-  const isLandscape = width > height;
-  const s = isLandscape ? Math.min(width, height) / 534 * 1.3 : width / 534;
-  const brandName = stripPipe(rawBrandName);
-  const message = stripPipe(rawMessage);
-  const realTimeSeconds = progress * sceneDuration;
-  const typingStart = 0.1;
-  const bubbleStart = 0.38;
-  const typingPop = popIn(progress, typingStart, 0.1);
-  const typingFade = interpolate(progress, [bubbleStart - 0.06, bubbleStart], [1, 0], CLAMP);
-  const showTyping = progress >= typingStart && progress < bubbleStart;
-  const bubblePop = popIn(progress, bubbleStart, 0.18);
-  const showBubble = progress >= bubbleStart;
-  const topPad = Math.max(safeZone.top, height * 0.25);
-  const sidePad = Math.max(safeZone.left, width * 0.06);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: topPad,
-        left: sidePad,
-        right: sidePad,
-        display: "flex",
-        justifyContent: "flex-end"
-      },
-      children: [
-        showTyping && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              opacity: typingPop * typingFade,
-              transform: `translateY(${(1 - typingPop) * 8 * s}px)`,
-              background: BUBBLE_BG,
-              borderRadius: 18 * s,
-              padding: `${12 * s}px ${16 * s}px`,
-              display: "flex",
-              gap: 5 * s,
-              alignItems: "center",
-              boxShadow: `0 ${1 * s}px ${4 * s}px rgba(0,0,0,0.10)`
-            },
-            children: [0, 1, 2].map((j) => {
-              const phase = (realTimeSeconds * 1.6 + j * 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));
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 7 * s,
-                    height: 7 * s,
-                    borderRadius: 3.5 * s,
-                    background: DOT_COLOR,
-                    transform: `translateY(${-y}px)`,
-                    opacity: op
-                  }
-                },
-                j
-              );
-            })
-          }
-        ),
-        showBubble && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              // `width: max-content` forces the bubble to size to its
-              // natural one-line content width up to `maxWidth`. Without
-              // this, modern-screenshot's foreignObject text shaping (the
-              // export path) was using an intrinsic width well below
-              // `maxWidth`, breaking text that would have fit on one line
-              // in the live DOM — even after the NBSP fix glued the
-              // trailing emoji to the last word. With `max-content` +
-              // `maxWidth`, the bubble grows up to the cap on a single
-              // line, then wraps naturally inside the cap for genuinely
-              // long messages.
-              width: "max-content",
-              maxWidth: width * 0.86,
-              // Render with native system fonts in BOTH paths. The export
-              // pipeline turns the iframe DOM into an SVG and loads it via
-              // <img src="data:image/svg+xml,…">, and SVG-as-image is a
-              // sandboxed graphics context that does NOT load @font-face
-              // resources (data: or otherwise — this is a browser security
-              // model, not a CSP issue). Inter therefore never resolves in
-              // the export; the SVG falls back to Helvetica/Helvetica Neue,
-              // which is wider at the same point size, and "We built this
-              // for you ❤️" wraps inside the pinned bubble box even though
-              // the iframe's Inter rendering fit on one line. Naming the
-              // system font explicitly here makes the iframe ALSO use that
-              // same OS-native font, so preview and export compute identical
-              // widths and both fit on one line. See PRs #598/#599/#604 for
-              // the months of font-embed work that this finally closes out.
-              fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
-              background: BUBBLE_BG,
-              color: BUBBLE_TEXT,
-              borderRadius: `${22 * s}px ${22 * s}px 0 ${22 * s}px`,
-              padding: `${14 * s}px ${18 * s}px ${12 * s}px`,
-              fontSize: 23 * s,
-              lineHeight: `${29 * s}px`,
-              fontWeight: 400,
-              opacity: bubblePop,
-              transform: `translateY(${(1 - bubblePop) * 8 * s}px) scale(${0.96 + 0.04 * bubblePop})`,
-              transformOrigin: "right top",
-              boxShadow: `0 ${2 * s}px ${10 * s}px rgba(0,0,0,0.14)`
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: 14 * s,
-                    fontStyle: "italic",
-                    fontWeight: 400,
-                    color: "rgba(0,0,0,0.45)",
-                    lineHeight: 1.2,
-                    marginBottom: 6 * s
-                  },
-                  children: brandName
-                }
-              ),
-              renderMessageWithEmojiTail(message, 23 * s)
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/brand-message.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var BrandMessageTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  safeZone,
-  backgroundEffect
-}) => {
-  const brandName = stripPipe(style.brand.name ?? "Your brand");
-  const message = stripPipe(String(variables.message || ""));
-  const seed = (brandName + message).split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        // System fonts only — see BrandMessageBubble for the why
-        // (SVG-as-image can't load @font-face data: URLs, so the only
-        // way to get preview/export parity is to use a font the OS
-        // already has natively).
-        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          BrandMessageBubble,
-          {
-            progress,
-            sceneDuration: sceneDuration ?? 4,
-            brandName,
-            message,
-            width,
-            height,
-            safeZone
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  BrandMessageTemplate
-};

package/dist/chart-bar-EGPHJATL.js

@@ -1,310 +0,0 @@
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  TOP_TEXT_AREA_RATIO,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SNAPPY,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/charts/BarChart.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MAX_BAR_ITEMS = 6;
-function exactValue(value) {
-  return String(value);
-}
-var BarChart = ({
-  progress,
-  data,
-  width,
-  height,
-  chartColor = "#ffffff",
-  textColor = "#ffffff",
-  beatIntensity = 0
-}) => {
-  const values = data.filter(({ value }) => Number.isFinite(value)).slice(0, MAX_BAR_ITEMS);
-  const s = Math.min(width, height) / 1080;
-  const portrait = height > width;
-  const chartWidth = width * (portrait ? 0.88 : 0.84);
-  const chartHeight = height * (portrait ? 0.56 : 0.52);
-  const bottom = (portrait ? 112 : 60) * s;
-  const labelHeight = (portrait ? 94 : 66) * s;
-  const valueReserve = (portrait ? 52 : 44) * s;
-  const maxBarHeight = chartHeight - labelHeight - valueReserve;
-  const gap = (portrait ? 14 : 20) * s;
-  const barCount = Math.max(values.length, 1);
-  const itemWidth = (chartWidth - gap * (barCount - 1)) / barCount;
-  const barWidth = Math.max(itemWidth * 0.68, 2 * s);
-  const maxValue = Math.max(1, ...values.map(({ value }) => Math.max(0, value)));
-  const beatScale = 1 + beatIntensity * 0.03;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "img",
-        "aria-label": values.map(({ label, value }) => `${label || "Value"}: ${exactValue(value)}`).join(", "),
-        style: {
-          position: "absolute",
-          bottom,
-          left: (width - chartWidth) / 2,
-          width: chartWidth,
-          height: chartHeight,
-          display: "flex",
-          alignItems: "flex-end",
-          gap
-        },
-        children: values.map(({ label, value }, index) => {
-          const barStart = 0.06 + index * 0.05;
-          const barProgress = interpolate(progress, [barStart, barStart + 0.34], [0, 1], {
-            extrapolateLeft: "clamp",
-            extrapolateRight: "clamp"
-          });
-          const springValue = spring(barProgress, SPRING_SNAPPY);
-          const targetHeight = Math.max(0, value) / maxValue * maxBarHeight;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-bar-chart-item": "true",
-              style: {
-                width: itemWidth,
-                height: chartHeight,
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "flex-end",
-                alignItems: "center",
-                minWidth: 0
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "100%",
-                      height: maxBarHeight + valueReserve,
-                      display: "flex",
-                      alignItems: "flex-end",
-                      justifyContent: "center"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "relative",
-                          width: barWidth,
-                          height: springValue * targetHeight,
-                          background: `linear-gradient(to top, ${withOpacity(chartColor, 0.82)}, ${withOpacity(chartColor, 0.42)})`,
-                          border: `1px solid ${withOpacity(chartColor, 0.7)}`,
-                          borderRadius: `${10 * s}px ${10 * s}px 0 0`,
-                          boxShadow: `0 0 ${24 * s}px ${withOpacity(chartColor, 0.18)}`,
-                          transform: `scaleY(${beatScale})`,
-                          transformOrigin: "bottom"
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            "data-bar-chart-value": "true",
-                            style: {
-                              position: "absolute",
-                              bottom: "100%",
-                              left: "50%",
-                              transform: `translate(-50%, ${-10 * s}px)`,
-                              color: textColor,
-                              fontSize: (portrait ? 34 : 30) * s,
-                              lineHeight: 1,
-                              fontWeight: 750,
-                              fontVariantNumeric: "tabular-nums",
-                              whiteSpace: "nowrap",
-                              opacity: barProgress,
-                              textShadow: `0 ${2 * s}px ${8 * s}px rgba(0,0,0,0.55)`
-                            },
-                            children: exactValue(value)
-                          }
-                        )
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-bar-chart-label": "true",
-                    style: {
-                      width: "100%",
-                      height: labelHeight,
-                      paddingTop: 14 * s,
-                      boxSizing: "border-box",
-                      color: withOpacity(textColor, 0.9),
-                      fontSize: (portrait ? 24 : 22) * s,
-                      lineHeight: 1.15,
-                      fontWeight: 650,
-                      textAlign: "center",
-                      overflow: "hidden",
-                      overflowWrap: "anywhere",
-                      opacity: barProgress
-                    },
-                    children: label
-                  }
-                )
-              ]
-            },
-            `${label}-${index}`
-          );
-        })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: chartHeight * 0.7,
-          background: `linear-gradient(to top, ${withOpacity(chartColor, 0.07)}, transparent)`,
-          pointerEvents: "none"
-        }
-      }
-    )
-  ] });
-};
-
-// src/visual-system/scene-templates/chart-bar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function parseBarDatum(value) {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? { label: "", value } : void 0;
-  }
-  if (typeof value === "object" && value !== null) {
-    const datum = value;
-    const numberValue2 = Number(datum.value);
-    if (!Number.isFinite(numberValue2)) return void 0;
-    return { label: String(datum.label ?? "").trim(), value: numberValue2 };
-  }
-  if (typeof value !== "string") return void 0;
-  const trimmed = value.trim();
-  if (!trimmed) return void 0;
-  const separator = trimmed.lastIndexOf(":");
-  const label = separator >= 0 ? trimmed.slice(0, separator).trim() : "";
-  const numberValue = Number(separator >= 0 ? trimmed.slice(separator + 1).trim() : trimmed);
-  return Number.isFinite(numberValue) ? { label, value: numberValue } : void 0;
-}
-function parseBarData(value) {
-  let items;
-  if (Array.isArray(value)) {
-    items = value;
-  } else if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (!trimmed) return [];
-    try {
-      const parsed = JSON.parse(trimmed);
-      items = Array.isArray(parsed) ? parsed : [trimmed];
-    } catch {
-      items = trimmed.split(",");
-    }
-  } else {
-    items = [value];
-  }
-  return items.map(parseBarDatum).filter((datum) => datum !== void 0);
-}
-var ChartBarTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { primary, foreground, font } = resolveTokens(style);
-  const chartColor = primary;
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  const data = parseBarData(variables.bars);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: textsRaw,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          BarChart,
-          {
-            progress,
-            data,
-            width,
-            height,
-            chartColor,
-            textColor,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: height * TOP_TEXT_AREA_RATIO, overflow: "visible" }, children: /* @__PURE__ */ jsx2(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "top",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: textColor,
-            beatIntensity
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  ChartBarTemplate
-};