@vanillaskyai/video 0.1.0

package/dist/catalog-types-BIhSpOWK.d.ts

@@ -0,0 +1,74 @@
+interface TemplateJsonSchemaProperty {
+    readonly type?: "string" | "number" | "integer" | "boolean" | "array" | "object";
+    /** Semantic formats enforced by runtime validation instead of inferred from field names. */
+    readonly format?: "uri" | "supplied-image" | "grounded-quote" | "grounded-stat" | "stock-media-keyword" | "emoji";
+    readonly enum?: readonly string[];
+    readonly title?: string;
+    readonly description?: string;
+    readonly default?: unknown;
+    readonly examples?: readonly unknown[];
+    readonly minItems?: number;
+    readonly maxItems?: number;
+    readonly minLength?: number;
+    readonly maxLength?: number;
+    readonly minimum?: number;
+    readonly maximum?: number;
+    readonly items?: TemplateJsonSchemaProperty;
+    readonly properties?: Readonly<Record<string, TemplateJsonSchemaProperty>>;
+    readonly required?: readonly string[];
+    readonly additionalProperties?: boolean;
+}
+interface TemplateJsonSchema {
+    readonly type: "object";
+    readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
+    readonly required?: readonly string[];
+    readonly additionalProperties?: boolean;
+    readonly "x-vanillasky"?: {
+        readonly requiresStat?: boolean;
+        readonly allowsStockMedia?: boolean;
+        /** Every group requires at least one declared top-level field with a meaningful non-empty value. */
+        readonly requiredAnyOf?: readonly (readonly string[])[];
+    };
+}
+type TemplateJob = "setup" | "claim" | "proof" | "atmosphere" | "payoff" | "punctuation" | "ask";
+type TemplateRegister = "motion-led" | "typography-led" | "device-led" | "card-led" | "mockup-led";
+type TemplateFamily = "Media & motion" | "Data & metrics" | "Product showcase" | "Social & messaging" | "Explainers" | "Calls to action";
+interface TemplateTimingMetadata {
+    /** Schema fields whose rendered content may inform a future adaptive duration. */
+    readonly contentFields: readonly string[];
+    /** How content in contentFields should be measured; no runtime behavior is implied. */
+    readonly contentUnit: "words" | "characters" | "items";
+}
+interface TemplateTransitionTiming {
+    /** Earliest readable local motion point used when this scene enters from a global transition. */
+    readonly entryReadyProgress: number;
+    /** Audited readable checkpoint before the template's own exit animation begins. */
+    readonly holdProgress: number;
+}
+interface SceneTemplateMetadata {
+    id: string;
+    label?: string;
+    description?: string;
+    category?: string | null;
+    /** Human-readable browse group. */
+    family?: TemplateFamily;
+    jobs?: TemplateJob[];
+    register?: TemplateRegister;
+    useWhen?: string;
+    avoidWhen?: string;
+    usesGlobalTextEffect: boolean;
+    /** Opts into renderer-owned transitions. Defaults to false for customer templates. */
+    usesGlobalTransition: boolean;
+    /** Required exactly when usesGlobalTransition is true. */
+    transitionTiming?: TemplateTransitionTiming;
+    usesGlobalBackgroundEffect: boolean;
+    textCanvas?: "tight" | "open";
+    /** The only authoring contract for defaults, validation, planning, grounding, and editor fields. */
+    schema: TemplateJsonSchema;
+    minDuration?: number;
+    preferredDuration?: number;
+    /** Declarative hints for future content-aware duration selection. */
+    timing?: TemplateTimingMetadata;
+}
+
+export type { SceneTemplateMetadata as S, TemplateFamily as T, TemplateJob as a, TemplateRegister as b, TemplateTimingMetadata as c, TemplateJsonSchema as d, TemplateTransitionTiming as e, TemplateJsonSchemaProperty as f };

package/dist/chart-bar-CNSC7BNK.js

@@ -0,0 +1,304 @@
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import {
+  TOP_TEXT_AREA_RATIO,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  SPRING_SNAPPY,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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,
+          {
+            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-MCRHKN77.js

@@ -0,0 +1,299 @@
+import {
+  getResponsiveFontSize
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  ConfettiLayer
+} from "./chunk-CJ7F2CE6.js";
+import "./chunk-QAAO7OAY.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import {
+  TOP_TEXT_AREA_RATIO,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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 ? "0 2px 8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35)" : 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: "#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,
+          {
+            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
+};