@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/infographic-stat-row-SYB7AB7H.js

@@ -1,247 +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 {
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/StatBadgeRow.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SPRING_STAT = { damping: 12, stiffness: 170 };
-var StatBadgeRow = ({
-  progress,
-  stats: rawStats,
-  width,
-  height,
-  font = TOKEN_DEFAULTS.font,
-  textColor = "#ffffff"
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const stats = rawStats.filter((st) => st.value);
-  const isLandscape = width > height;
-  const textAreaHeight = height * TOP_TEXT_AREA_RATIO;
-  const statsAreaTop = textAreaHeight;
-  const statsAreaHeight = height - statsAreaTop;
-  const valueFontSize = isLandscape ? 72 * s : 100 * s;
-  const labelFontSize = isLandscape ? 28 * s : 38 * s;
-  const statCount = stats.length;
-  const getStatPosition = (i) => {
-    if (isLandscape) {
-      const spacing = width / (statCount + 1);
-      return {
-        x: spacing * (i + 1),
-        y: statsAreaTop + statsAreaHeight * 0.4
-      };
-    }
-    const sectionH = statsAreaHeight / (statCount + 0.5);
-    return {
-      x: width / 2,
-      y: statsAreaTop + sectionH * (i + 0.5)
-    };
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: stats.map((stat, i) => {
-    const pos = getStatPosition(i);
-    const itemStart = 0.1 + i * 0.12;
-    const statP = spring(
-      interpolate(progress, [itemStart, itemStart + 0.12], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      }),
-      SPRING_STAT
-    );
-    const scaleVal = interpolate(statP, [0, 1], [0.5, 1]);
-    const opacity = interpolate(progress, [itemStart, itemStart + 0.06], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const labelDelay = itemStart + 0.06;
-    const labelOpacity = interpolate(progress, [labelDelay, labelDelay + 0.05], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const labelSlideY = interpolate(progress, [labelDelay, labelDelay + 0.06], [10 * s, 0], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const EXIT_START = 0.78;
-    const EXIT_DURATION = 0.1;
-    const EXIT_STAGGER = 0.04;
-    const exitStart = EXIT_START + i * EXIT_STAGGER;
-    const exitEnd = exitStart + EXIT_DURATION;
-    const exitRaw = interpolate(progress, [exitStart, exitEnd], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const exitEased = exitRaw * exitRaw;
-    const exitTranslateX = -90 * s * exitEased;
-    const exitFade = 1 - exitEased;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: pos.x,
-          top: pos.y,
-          transform: `translate(-50%, -50%) translate(${exitTranslateX}px, 0) scale(${scaleVal})`,
-          opacity: opacity * exitFade,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: isLandscape ? 12 * s : 24 * s,
-          backgroundColor: "rgba(255,255,255,0.15)",
-          border: "1.5px solid rgba(255,255,255,0.2)",
-          borderRadius: isLandscape ? 20 * s : 28 * s,
-          padding: isLandscape ? `${28 * s}px ${24 * s}px` : `${48 * s}px ${56 * s}px`,
-          width: isLandscape ? width / (statCount + 1) * 0.85 : void 0,
-          maxWidth: isLandscape ? width * 0.28 : void 0,
-          minWidth: isLandscape ? void 0 : width * 0.6
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: valueFontSize,
-                fontWeight: 800,
-                color: textColor,
-                fontFamily: font,
-                lineHeight: 1,
-                whiteSpace: "nowrap"
-              },
-              children: stat.value
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: labelFontSize,
-                fontWeight: 500,
-                color: withOpacity(textColor, 0.8),
-                fontFamily: font,
-                lineHeight: 1.2,
-                whiteSpace: isLandscape ? "normal" : "nowrap",
-                textAlign: "center",
-                textTransform: "uppercase",
-                letterSpacing: isLandscape ? 1 * s : 2 * s,
-                opacity: labelOpacity,
-                transform: `translateY(${labelSlideY}px)`
-              },
-              children: stat.label
-            }
-          )
-        ]
-      },
-      i
-    );
-  }) });
-};
-
-// src/visual-system/scene-templates/infographic-stat-row.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfographicStatRowTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  const stats = [
-    { value: String(variables.stat1Value || ""), label: String(variables.stat1Label || "") },
-    { value: String(variables.stat2Value || ""), label: String(variables.stat2Label || "") },
-    { value: String(variables.stat3Value || ""), label: String(variables.stat3Label || "") }
-  ];
-  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(
-          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
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          StatBadgeRow,
-          {
-            progress: motionProgress,
-            stats,
-            width,
-            height,
-            font,
-            textColor
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  InfographicStatRowTemplate
-};

package/dist/infographic-steps-KCE6JWE2.js

@@ -1,406 +0,0 @@
-import {
-  parseList
-} from "./chunk-P22HHFDK.js";
-import {
-  fitTextSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import {
-  Emoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  TOP_TEXT_AREA_RATIO,
-  autoTextColor,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/infographic/StepsList.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SPRING_POP = { damping: 8, stiffness: 200 };
-var SPRING_TITLE = { damping: 18, stiffness: 200 };
-function computeStepsLayout({
-  width,
-  height,
-  labels,
-  safeZone = { top: 0, right: 0, bottom: 0, left: 0 }
-}) {
-  const stepCount = Math.max(1, Math.min(labels.length, 4));
-  const s = Math.min(width, height) / 1080;
-  const textAreaBottom = Math.max(height * TOP_TEXT_AREA_RATIO, safeZone.top);
-  if (width > height) {
-    const availableWidth = Math.max(1, width - safeZone.left - safeZone.right);
-    const sectionWidth = availableWidth / stepCount;
-    const circleRadius2 = Math.min(104 * s, sectionWidth * 0.25);
-    const y = Math.min(
-      height * 0.55,
-      height - safeZone.bottom - circleRadius2 - 86 * s
-    );
-    return {
-      mode: "landscape-row",
-      items: labels.slice(0, 4).map((label, index) => {
-        const x2 = safeZone.left + sectionWidth * (index + 0.5);
-        const labelWidth2 = sectionWidth * 0.76;
-        return {
-          x: x2,
-          y,
-          circleRadius: circleRadius2,
-          labelLeft: x2 - labelWidth2 / 2,
-          labelTop: y + circleRadius2 + 20 * s,
-          labelWidth: labelWidth2,
-          labelFontSize: fitTextSize(label, 42 * s, labelWidth2, { minScale: 0.72 })
-        };
-      })
-    };
-  }
-  const contentTop = textAreaBottom;
-  const contentBottom = Math.max(contentTop + 1, height - safeZone.bottom);
-  const rowHeight = (contentBottom - contentTop) / stepCount;
-  const circleRadius = Math.min(82 * s, rowHeight * 0.27);
-  const x = safeZone.left + circleRadius + 48 * s;
-  const labelLeft = x + circleRadius + 42 * s;
-  const labelWidth = Math.max(1, width - safeZone.right - labelLeft);
-  return {
-    mode: "portrait-timeline",
-    items: labels.slice(0, 4).map((label, index) => {
-      const y = contentTop + rowHeight * (index + 0.5);
-      return {
-        x,
-        y,
-        circleRadius,
-        labelLeft,
-        labelTop: y - circleRadius,
-        labelWidth,
-        labelFontSize: fitTextSize(label, 50 * s, labelWidth, { minScale: 0.68 })
-      };
-    })
-  };
-}
-var StepsList = ({
-  progress,
-  width,
-  height,
-  steps,
-  stepEmojis = [],
-  accent = TOKEN_DEFAULTS.primary,
-  textColor = "#ffffff",
-  font = TOKEN_DEFAULTS.font,
-  beatIntensity = 0,
-  safeZone
-}) => {
-  void beatIntensity;
-  const s = Math.min(width, height) / 1080;
-  const stepLabels = steps.slice(0, 4).map((st) => stripPipe(String(st.title || "")));
-  const hasEmojis = stepEmojis.some((e) => (e || "").length > 0);
-  const isLandscape = width > height;
-  const layout = computeStepsLayout({ width, height, labels: stepLabels, safeZone });
-  const connectorPairs = layout.items.slice(0, -1).map((item, index) => ({
-    item,
-    next: layout.items[index + 1]
-  }));
-  const lineProgress = interpolate(progress, [0.07, 0.62], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const firstStep = 0.08;
-  const EXIT_START = 0.78;
-  const EXIT_DURATION = 0.1;
-  const EXIT_STAGGER = 0.04;
-  const exitForIndex = (i) => {
-    const start = EXIT_START + i * EXIT_STAGGER;
-    const raw = interpolate(progress, [start, start + EXIT_DURATION], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const eased = raw * raw;
-    return { translateX: -90 * s * eased, fade: 1 - eased };
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    connectorPairs.map(({ item, next }, index) => {
-      const exit = exitForIndex(index);
-      const segmentProgress = interpolate(
-        lineProgress,
-        [index / connectorPairs.length, (index + 1) / connectorPairs.length],
-        [0, 1],
-        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-      );
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: layout.mode === "portrait-timeline" ? {
-            position: "absolute",
-            left: item.x - 2 * s,
-            top: item.y + item.circleRadius,
-            width: 4 * s,
-            height: Math.max(
-              0,
-              next.y - next.circleRadius - (item.y + item.circleRadius)
-            ),
-            borderRadius: 999,
-            background: `linear-gradient(to bottom, ${withOpacity(accent, 0.9)}, ${withOpacity(textColor, 0.22)})`,
-            transform: `translateX(${exit.translateX}px) scaleY(${segmentProgress})`,
-            transformOrigin: "top",
-            opacity: 0.75 * exit.fade
-          } : {
-            position: "absolute",
-            left: item.x + item.circleRadius,
-            top: item.y - 2 * s,
-            width: Math.max(
-              0,
-              next.x - next.circleRadius - (item.x + item.circleRadius)
-            ),
-            height: 4 * s,
-            borderRadius: 999,
-            background: `linear-gradient(to right, ${withOpacity(accent, 0.9)}, ${withOpacity(textColor, 0.22)})`,
-            transform: `translateX(${exit.translateX}px) scaleX(${segmentProgress})`,
-            transformOrigin: "left",
-            opacity: 0.75 * exit.fade
-          }
-        },
-        `step-connector-${index}`
-      );
-    }),
-    layout.items.map((pos, i) => {
-      const circleRadius = pos.circleRadius;
-      const circleSize = circleRadius * 2;
-      const emojiFontSize = circleRadius * (isLandscape ? 0.9 : 0.8);
-      const numberFontSize = circleRadius * 0.7;
-      const itemStart = firstStep;
-      const circleP = spring(
-        interpolate(progress, [itemStart, itemStart + 0.12], [0, 1], {
-          extrapolateLeft: "clamp",
-          extrapolateRight: "clamp"
-        }),
-        SPRING_POP
-      );
-      const circleScale = interpolate(circleP, [0, 1], [0, 1]);
-      const contentDelay = itemStart + 0.03;
-      const contentOpacity = interpolate(progress, [contentDelay, contentDelay + 0.05], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const titleDelay = itemStart + 0.05;
-      const titleP = spring(
-        interpolate(progress, [titleDelay, titleDelay + 0.1], [0, 1], {
-          extrapolateLeft: "clamp",
-          extrapolateRight: "clamp"
-        }),
-        SPRING_TITLE
-      );
-      const titleSlide = isLandscape ? (1 - titleP) * 40 * s : (1 - titleP) * 120 * s;
-      const titleOpacity = interpolate(progress, [titleDelay, titleDelay + 0.05], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const emoji = hasEmojis ? stepEmojis[i] || "" : "";
-      const glowOpacity = circleScale * 0.2;
-      const exit = exitForIndex(i);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-template-item": "steps",
-          style: {
-            position: "absolute",
-            top: pos.y - circleRadius,
-            left: 0,
-            width,
-            height: circleSize,
-            transform: `translateX(${exit.translateX}px)`,
-            opacity: exit.fade
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: -circleRadius * 0.6,
-                  left: pos.x - circleRadius * 1.75,
-                  width: circleRadius * 3.5,
-                  height: circleRadius * 3.5,
-                  borderRadius: "50%",
-                  background: `radial-gradient(circle, ${withOpacity(accent, 0.4)} 0%, transparent 70%)`,
-                  opacity: glowOpacity,
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: pos.x - circleRadius,
-                  top: 0,
-                  width: circleSize,
-                  height: circleSize,
-                  borderRadius: "50%",
-                  backgroundColor: emoji ? "rgba(255,255,255,0.15)" : accent,
-                  border: "2px solid rgba(255,255,255,0.2)",
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  transform: `scale(${circleScale})`,
-                  boxShadow: `0 0 ${20 * s}px ${withOpacity(accent, glowOpacity)}`
-                },
-                children: emoji ? /* @__PURE__ */ jsx(Emoji, { char: emoji, size: emojiFontSize, verticalAlign: "middle", style: { opacity: contentOpacity } }) : /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: numberFontSize,
-                      fontWeight: 800,
-                      color: autoTextColor(accent),
-                      fontFamily: font,
-                      lineHeight: 1,
-                      opacity: contentOpacity
-                    },
-                    children: i + 1
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: pos.labelLeft,
-                  top: pos.labelTop - (pos.y - circleRadius),
-                  width: pos.labelWidth,
-                  height: isLandscape ? 80 * s : circleSize,
-                  display: "flex",
-                  alignItems: isLandscape ? "flex-start" : "center",
-                  justifyContent: isLandscape ? "center" : "flex-start",
-                  fontSize: pos.labelFontSize,
-                  fontWeight: 600,
-                  color: textColor,
-                  fontFamily: font,
-                  letterSpacing: -0.3,
-                  textAlign: isLandscape ? "center" : "left",
-                  opacity: titleOpacity,
-                  transform: isLandscape ? `translateY(${titleSlide}px)` : `translateX(${titleSlide}px)`,
-                  textShadow: "0 1px 6px rgba(0,0,0,0.1)",
-                  lineHeight: 1.12,
-                  whiteSpace: "normal"
-                },
-                children: stepLabels[i]
-              }
-            )
-          ]
-        },
-        `step-${i}`
-      );
-    })
-  ] });
-};
-
-// src/visual-system/scene-templates/infographic-steps.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfographicStepsTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying
-}) => {
-  const { primary, foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  const stepLabels = parseList(variables.steps, 3);
-  const stepEmojis = parseList(variables.stepEmojis, 3);
-  void textArchetype;
-  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(
-          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
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          StepsList,
-          {
-            progress: motionProgress,
-            width,
-            height,
-            steps: stepLabels.map((title) => ({ title })),
-            stepEmojis,
-            accent: primary,
-            textColor,
-            font,
-            beatIntensity,
-            safeZone
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  InfographicStepsTemplate
-};