@vanillaskyai/video 0.8.8 → 0.10.0

package/dist/chart-counter-5FFWQNZO.js

@@ -1,306 +0,0 @@
-import {
-  getResponsiveFontSize
-} from "./chunk-S7HFLYNN.js";
-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 {
-  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 {
-  MEDIA_TEXT_SHADOW,
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/CountUpNumber.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function suppliedDecimalPlaces(value) {
-  if (!Number.isFinite(value) || Number.isInteger(value)) return 0;
-  const normalized = String(value).toLowerCase();
-  if (normalized.includes("e-")) {
-    const [coefficient, exponentText] = normalized.split("e-");
-    const coefficientDecimals = coefficient.split(".")[1]?.length ?? 0;
-    return Math.min(6, Number(exponentText) + coefficientDecimals);
-  }
-  return Math.min(6, normalized.split(".")[1]?.length ?? 0);
-}
-var CountUpNumber = ({
-  progress,
-  motionProgress = progress,
-  target,
-  decimalPlaces: decimalPlacesOverride,
-  prefix = "",
-  unit = "",
-  label,
-  width,
-  height,
-  numberColor = "#ffffff",
-  labelColor = "rgba(255,255,255,0.6)",
-  font = TOKEN_DEFAULTS.font,
-  hasMediaShadow = false,
-  beatIntensity = 0,
-  labelFontSize
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const displayValue = interpolate(
-    progress,
-    [0, 0.55],
-    [0, target],
-    { extrapolateRight: "clamp" }
-  );
-  const decimalPlaces = Number.isFinite(decimalPlacesOverride) ? Math.max(0, Math.min(6, Math.trunc(decimalPlacesOverride ?? 0))) : suppliedDecimalPlaces(target);
-  const formattedNumber = displayValue.toLocaleString("en-US", {
-    minimumFractionDigits: decimalPlaces,
-    maximumFractionDigits: decimalPlaces
-  });
-  const formattedTarget = target.toLocaleString("en-US", {
-    minimumFractionDigits: decimalPlaces,
-    maximumFractionDigits: decimalPlaces
-  });
-  const semanticValueIsTransient = formattedNumber !== formattedTarget;
-  const fullNumberStr = `${prefix}${formattedNumber}${unit}`;
-  const baseSize = 140 * s;
-  const charCount = fullNumberStr.length;
-  const numberFontSize = charCount <= 6 ? baseSize : baseSize * Math.max(0.35, 6 / charCount);
-  const numberSpring = spring(
-    interpolate(motionProgress, [0, 0.22], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    }),
-    { damping: 9, stiffness: 200 }
-  );
-  const numberScale = interpolate(numberSpring, [0, 1], [0.3, 1]);
-  const numberSettled = numberSpring > 0.99;
-  const breathe = numberSettled ? 1 + Math.sin(progress * Math.PI * 4) * 8e-3 : 1;
-  const beatScale = 1 + beatIntensity * 0.03;
-  const labelOpacity = interpolate(
-    motionProgress,
-    [0.2, 0.4],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const mediaTextShadow = hasMediaShadow ? MEDIA_TEXT_SHADOW : void 0;
-  const finalLabelFontSize = labelFontSize ?? 36 * s * 1.3;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        pointerEvents: "none",
-        // font is intentionally NOT set here — caller's outer wrapper
-        // (chart-counter root div or composed.tsx root) sets fontFamily
-        // and the children inherit. void to silence unused-arg lint.
-        ...(void font, {})
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-transition-semantic": semanticValueIsTransient ? "transient" : void 0,
-            style: {
-              fontSize: numberFontSize,
-              fontWeight: 800,
-              color: numberColor,
-              textAlign: "center",
-              lineHeight: 1.1,
-              position: "relative",
-              zIndex: 1,
-              maxWidth: "90%",
-              overflow: "visible",
-              ...semanticValueIsTransient ? { visibility: "var(--vanillasky-transition-semantic-visibility,visible)" } : {},
-              transform: `scale(${numberScale * beatScale * breathe})`,
-              ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
-            },
-            children: [
-              prefix,
-              formattedNumber,
-              unit
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              opacity: labelOpacity,
-              fontSize: finalLabelFontSize,
-              color: labelColor,
-              textTransform: "uppercase",
-              letterSpacing: 2 * s,
-              textAlign: "center",
-              marginTop: 12 * s,
-              position: "relative",
-              zIndex: 1,
-              ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/chart-counter.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChartCounterTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  isPlaying = true,
-  backgroundEffect
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const { primary, foreground, font, background } = resolveTokens(style);
-  const chartColor = primary;
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  const gradSeed = textsRaw.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  const parsedValue = Number(variables.value);
-  const targetValue = Number.isFinite(parsedValue) ? parsedValue : 1e3;
-  const parsedDecimalPlaces = Number(variables.decimalPlaces);
-  const decimalPlaces = Number.isFinite(parsedDecimalPlaces) ? Math.max(0, Math.min(6, Math.trunc(parsedDecimalPlaces))) : void 0;
-  const label = String(variables.label || "Total users");
-  const prefix = String(variables.prefix || "");
-  const unit = String(variables.unit || "");
-  const hasMedia = !!String(variables.mediaUrl || "").trim() && String(variables.mediaType || "auto") !== "gradient";
-  const numberColor = hasMedia ? "#ffffff" : textColor;
-  const labelColor = hasMedia ? "#ffffff" : withOpacity(textColor, 0.6);
-  const confettiActive = variables.confetti === true && motionProgress >= 0.55;
-  const confettiProgress = confettiActive ? (motionProgress - 0.55) / 0.45 : 0;
-  const labelFontSize = getResponsiveFontSize(label, width, "subtitle", height) * 1.3;
-  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: gradSeed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -55%)",
-              width: 500 * s,
-              height: 500 * s,
-              borderRadius: "50%",
-              background: `radial-gradient(circle, ${withOpacity(primary, 0.15)} 0%, transparent 70%)`,
-              pointerEvents: "none"
-            }
-          }
-        ),
-        confettiActive && /* @__PURE__ */ jsx2(
-          ConfettiLayer,
-          {
-            progress: confettiProgress,
-            width,
-            height,
-            beatIntensity,
-            bgColor: hasMedia ? void 0 : background.type === "solid" ? background.color : background.colors[1]
-          }
-        ),
-        /* @__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
-          }
-        ) }),
-        /* @__PURE__ */ jsx2(
-          CountUpNumber,
-          {
-            progress,
-            motionProgress,
-            target: targetValue,
-            decimalPlaces,
-            prefix,
-            unit,
-            label,
-            width,
-            height,
-            numberColor,
-            labelColor,
-            chartColor,
-            font,
-            hasMediaShadow: hasMedia,
-            beatIntensity,
-            labelFontSize
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ChartCounterTemplate
-};

package/dist/chart-progress-ring-JMXQLMLC.js

@@ -1,302 +0,0 @@
-import {
-  getResponsiveFontSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-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
-} 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/charts/ProgressRing.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ProgressRing = ({
-  progress,
-  motionProgress = progress,
-  targetValue,
-  decimalPlaces,
-  unit = "%",
-  chartColor = "#ffffff",
-  textColor = "#ffffff",
-  label: rawLabel = "",
-  font = TOKEN_DEFAULTS.font,
-  width,
-  height,
-  beatIntensity = 0
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const label = stripPipe(String(rawLabel || ""));
-  const radius = Math.min(width, height) * 0.2;
-  const circumference = 2 * Math.PI * radius;
-  const cx = width / 2;
-  const cy = height / 2;
-  const strokeW = 34 * s;
-  const fillPercent = interpolate(progress, [0.05, 0.75], [0, targetValue], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const dashOffset = circumference * (1 - fillPercent / 100);
-  const targetDecimals = Number.isFinite(decimalPlaces) ? Math.max(0, Math.min(2, Math.trunc(decimalPlaces ?? 0))) : Number.isInteger(targetValue) ? 0 : Math.min(2, (String(targetValue).split(".")[1] || "1").length);
-  const displayNumber = targetDecimals === 0 ? String(Math.round(fillPercent)) : fillPercent.toFixed(targetDecimals);
-  const targetDisplayNumber = targetDecimals === 0 ? String(Math.round(targetValue)) : targetValue.toFixed(targetDecimals);
-  const semanticValueIsTransient = displayNumber !== targetDisplayNumber;
-  const beatStroke = strokeW + beatIntensity * 4 * s;
-  const labelFontSize = getResponsiveFontSize(label, width, "subtitle", height) * 1.3;
-  const labelOpacity = interpolate(motionProgress, [0.35, 0.55], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const labelRise = interpolate(motionProgress, [0.35, 0.55], [16 * s, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: cy - radius * 1.2,
-          left: cx - radius * 1.2,
-          width: radius * 2.4,
-          height: radius * 2.4,
-          borderRadius: "50%",
-          background: `radial-gradient(circle at 50% 50%, ${withOpacity(chartColor, 0.08)} 0%, transparent 70%)`,
-          pointerEvents: "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        style: {
-          position: "absolute",
-          inset: 0,
-          width,
-          height
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: radius,
-              fill: "none",
-              stroke: withOpacity(chartColor, 0.1),
-              strokeWidth: strokeW
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: radius,
-              fill: "none",
-              stroke: chartColor,
-              strokeWidth: beatStroke,
-              strokeLinecap: "round",
-              strokeDasharray: circumference,
-              strokeDashoffset: dashOffset,
-              transform: `rotate(-90, ${cx}, ${cy})`,
-              style: { transition: "none" }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-transition-semantic": semanticValueIsTransient ? "transient" : void 0,
-        style: {
-          position: "absolute",
-          left: cx - radius,
-          top: cy - radius,
-          width: radius * 2,
-          height: radius * 2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          ...semanticValueIsTransient ? { visibility: "var(--vanillasky-transition-semantic-visibility,visible)" } : {}
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 120 * s,
-                fontWeight: 800,
-                color: textColor,
-                lineHeight: 1
-              },
-              children: displayNumber
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 56 * s,
-                fontWeight: 700,
-                color: chartColor,
-                marginLeft: 4 * s
-              },
-              children: unit
-            }
-          )
-        ]
-      }
-    ),
-    label && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: cy + radius + 48 * s,
-          left: 0,
-          right: 0,
-          display: "flex",
-          justifyContent: "center",
-          pointerEvents: "none"
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: labelFontSize,
-              color: withOpacity(textColor, 0.6),
-              textTransform: "uppercase",
-              letterSpacing: 2 * s,
-              textAlign: "center",
-              maxWidth: "80%",
-              opacity: labelOpacity,
-              transform: `translateY(${labelRise}px)`,
-              fontFamily: font
-            },
-            children: label
-          }
-        )
-      }
-    )
-  ] });
-};
-
-// src/visual-system/scene-templates/chart-progress-ring.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChartProgressRingTemplate = ({
-  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 parsedValue = Number(variables.value);
-  const targetValue = Math.max(0, Math.min(100, Number.isFinite(parsedValue) ? parsedValue : 75));
-  const parsedDecimalPlaces = Number(variables.decimalPlaces);
-  const decimalPlaces = Number.isFinite(parsedDecimalPlaces) ? Math.max(0, Math.min(2, Math.trunc(parsedDecimalPlaces))) : void 0;
-  const unit = String(variables.unit ?? "%");
-  const label = String(variables.label ?? "");
-  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("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
-          }
-        ) }),
-        /* @__PURE__ */ jsx2(
-          ProgressRing,
-          {
-            progress,
-            motionProgress,
-            targetValue,
-            decimalPlaces,
-            unit,
-            chartColor,
-            textColor,
-            label,
-            font,
-            width,
-            height,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ChartProgressRingTemplate
-};