@vanillaskyai/video 0.8.7 → 0.9.0

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
-};

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
-};