@vanillaskyai/video 0.1.0

package/dist/compose-video-CN3VSWST.js

@@ -0,0 +1,13 @@
+import {
+  createVideo
+} from "./chunk-IXCUY3B3.js";
+import "./chunk-E7CL7UPB.js";
+import "./chunk-ABPKM4GK.js";
+import "./chunk-ERY4S6QV.js";
+import "./chunk-GHJEAP4O.js";
+import "./chunk-EE6PK6XC.js";
+import "./chunk-EVG2ZYIY.js";
+import "./chunk-XGRA2MUV.js";
+export {
+  createVideo
+};

package/dist/cta-logo-SVA5GP2A.js

@@ -0,0 +1,209 @@
+import {
+  fitTextSize
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/typography/WordmarkReveal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WordmarkReveal = ({
+  progress,
+  brandName,
+  url = "",
+  cta = "",
+  logoUrl = "",
+  width,
+  height,
+  font = TOKEN_DEFAULTS.font,
+  textColor = "#ffffff"
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const actionText = cta.trim();
+  const addressText = url.trim();
+  const landP = spring(
+    interpolate(progress, [0, 0.85], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }),
+    SPRING_SMOOTH
+  );
+  const logoZoom = 0.94 + 0.14 * landP;
+  const itemOpacity = interpolate(progress, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const wordmarkTracking = `${interpolate(landP, [0, 1], [0.4, -0.02])}em`;
+  const actionTracking = `${interpolate(landP, [0, 1], [0.12, -0.01])}em`;
+  const urlTracking = `${interpolate(landP, [0, 1], [0.2, 0.01])}em`;
+  const logoWidth = width * 0.6;
+  const logoMaxHeight = height * 0.3;
+  const wordmarkSize = fitTextSize(brandName, 96 * s, width * 0.9);
+  const actionFontSize = fitTextSize(actionText, 48 * s, width * 0.9);
+  const urlFontSize = fitTextSize(addressText, actionText ? 34 * s : 48 * s, width * 0.9);
+  const bottomGap = 48 * s;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: bottomGap,
+        padding: `0 ${48 * s}px`,
+        fontFamily: font
+      },
+      children: [
+        logoUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: logoUrl,
+            alt: brandName,
+            style: {
+              width: logoWidth,
+              maxHeight: logoMaxHeight,
+              objectFit: "contain",
+              transform: `scale(${logoZoom})`,
+              transformOrigin: "center center",
+              opacity: itemOpacity,
+              display: "block"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: wordmarkSize,
+              fontWeight: 800,
+              color: textColor,
+              letterSpacing: wordmarkTracking,
+              lineHeight: 1.05,
+              textAlign: "center",
+              transform: `scale(${logoZoom})`,
+              transformOrigin: "center center",
+              opacity: itemOpacity,
+              textShadow: "0 1px 6px rgba(0,0,0,0.25)"
+            },
+            children: brandName
+          }
+        ),
+        (actionText || addressText) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 12 * s,
+              opacity: itemOpacity * 0.92,
+              transform: `scale(${0.96 + 0.04 * landP})`,
+              transformOrigin: "center center"
+            },
+            children: [
+              actionText && /* @__PURE__ */ jsx("div", { style: {
+                fontSize: actionFontSize,
+                fontWeight: 700,
+                color: textColor,
+                textAlign: "center",
+                letterSpacing: actionTracking,
+                textShadow: "0 1px 6px rgba(0,0,0,0.25)"
+              }, children: actionText }),
+              addressText && /* @__PURE__ */ jsx("div", { style: {
+                fontSize: urlFontSize,
+                fontWeight: 500,
+                color: textColor,
+                textAlign: "center",
+                letterSpacing: urlTracking,
+                opacity: actionText ? 0.78 : 1,
+                textShadow: "0 1px 6px rgba(0,0,0,0.25)"
+              }, children: addressText })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/visual-system/scene-templates/cta-logo.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CtaLogoTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  width,
+  height,
+  sceneDuration,
+  isPlaying
+}) => {
+  const { foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  const brandName = style.brand.name ?? "";
+  const url = String(variables.url || "");
+  const cta = String(variables.cta || "");
+  const logoUrl = style.brand.logoUrl ?? "";
+  const mediaUrl = String(variables.mediaUrl || "");
+  const mediaType = String(variables.mediaType || "auto");
+  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),
+            mediaUrl,
+            mediaType,
+            seed: brandName,
+            isPlaying
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          WordmarkReveal,
+          {
+            progress: motionProgress,
+            brandName,
+            url,
+            cta,
+            logoUrl,
+            width,
+            height,
+            font,
+            textColor
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CtaLogoTemplate
+};

package/dist/cta-media-E7VLLK42.js

@@ -0,0 +1,215 @@
+import {
+  fitTextSize,
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/typography/CtaMediaClose.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var CtaMediaClose = ({
+  progress,
+  motionProgress = progress,
+  width,
+  height,
+  brandName: rawBrandName,
+  logoUrl = "",
+  url: rawUrl = "",
+  cta: rawCta = "",
+  font = TOKEN_DEFAULTS.font,
+  textColor = "#ffffff",
+  safeZone = { left: 0, right: 0 }
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const brandName = stripPipe(String(rawBrandName || ""));
+  const url = stripPipe(String(rawUrl || ""));
+  const cta = stripPipe(String(rawCta || ""));
+  const fadeP = interpolate(motionProgress, [0, 0.3], [0, 1], CLAMP);
+  const scaleSpring = spring(fadeP, SPRING_SMOOTH);
+  const itemOpacity = fadeP;
+  const itemScale = 0.94 + 0.06 * scaleSpring;
+  const landP = spring(
+    interpolate(motionProgress, [0, 0.85], [0, 1], CLAMP),
+    SPRING_SMOOTH
+  );
+  const logoZoom = 0.94 + 0.14 * landP;
+  const logoWidth = width * 0.6;
+  const logoMaxHeight = height * 0.22;
+  const logoTop = height * 0.13;
+  const wordmarkFontSize = Math.min(width * 0.1, height * 0.1);
+  const bottomMaxWidth = width - Math.max(safeZone.left, safeZone.right) * 2;
+  const ctaFontSize = fitTextSize(cta, 48 * s, bottomMaxWidth);
+  const urlFontSize = fitTextSize(url, cta ? 34 * s : 48 * s, bottomMaxWidth);
+  const bottomOffset = height * 0.18;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        fontFamily: font
+      },
+      children: [
+        logoUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: logoUrl,
+            alt: brandName || "logo",
+            style: {
+              position: "absolute",
+              top: logoTop,
+              left: "50%",
+              width: logoWidth,
+              maxHeight: logoMaxHeight,
+              objectFit: "contain",
+              transform: `translateX(-50%) scale(${logoZoom})`,
+              transformOrigin: "center center",
+              opacity: itemOpacity
+            }
+          }
+        ) : brandName && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: logoTop,
+              left: 0,
+              right: 0,
+              textAlign: "center",
+              color: textColor,
+              fontSize: wordmarkFontSize,
+              fontWeight: 700,
+              letterSpacing: -0.5,
+              transform: `scale(${logoZoom})`,
+              transformOrigin: "center center",
+              opacity: itemOpacity,
+              textShadow: "0 2px 12px rgba(0,0,0,0.32)"
+            },
+            children: brandName
+          }
+        ),
+        (cta || url) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: bottomOffset,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 12 * s,
+              textAlign: "center",
+              color: textColor,
+              opacity: itemOpacity * 0.92,
+              transform: `scale(${itemScale})`,
+              transformOrigin: "center center",
+              textShadow: "0 1px 4px rgba(0,0,0,0.35)"
+            },
+            children: [
+              cta && /* @__PURE__ */ jsx("div", { style: { fontSize: ctaFontSize, fontWeight: 700, letterSpacing: -0.3 }, children: cta }),
+              url && /* @__PURE__ */ jsx("div", { style: { fontSize: urlFontSize, fontWeight: 500, letterSpacing: 0.5, opacity: cta ? 0.78 : 1 }, children: url })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/visual-system/scene-templates/cta-media.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CtaMediaTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  width,
+  height,
+  sceneDuration,
+  beatIntensity,
+  textArchetype,
+  safeZone,
+  isPlaying = true,
+  backgroundEffect
+}) => {
+  const { primary, foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  const headline = String(variables.headline || "");
+  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: headline,
+        isPlaying,
+        beatIntensity
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      TemplateText,
+      {
+        motionProgress,
+        typeTreatment: resolveTokens(style).preset.type,
+        archetype: textArchetype || "subtle",
+        text: headline,
+        progress,
+        sceneDuration: sceneDuration ?? 4,
+        width,
+        height,
+        position: "center",
+        sizeRole: "headline",
+        safeZone,
+        font,
+        color: textColor,
+        beatIntensity
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      CtaMediaClose,
+      {
+        progress,
+        motionProgress,
+        width,
+        height,
+        brandName: style.brand.name ?? "",
+        logoUrl: style.brand.logoUrl ?? "",
+        url: String(variables.url || ""),
+        cta: String(variables.cta || ""),
+        font,
+        textColor,
+        accent: primary,
+        beatIntensity,
+        safeZone: { left: safeZone.left, right: safeZone.right }
+      }
+    )
+  ] });
+};
+export {
+  CtaMediaTemplate
+};

package/dist/events-_wfjbmEp.d.ts

@@ -0,0 +1,81 @@
+import { e as VideoOrientation, g as VideoStyle, V as Video, j as VideoCapabilities, a as VideoAudio, f as VideoScene, k as VIDEO_PROTOCOL_VERSION } from './types-B-PZR6G_.js';
+
+type VideoWarningCategory = "validation" | "readability" | "grounding" | "provider" | "media" | "protocol";
+type VideoWarningCode = "scene_duration_adjusted" | "scene_omitted_unreadable" | "scene_omitted_for_closer" | "scene_patch_rejected_readability" | "chart_scale_imbalance" | "provider_warning" | "provider_diagnostics_unavailable";
+/** A bounded, client-safe diagnostic that never includes provider payloads. */
+interface VideoWarning {
+    code: VideoWarningCode;
+    category: VideoWarningCategory;
+    message: string;
+    sceneId?: string;
+    recoverable: boolean;
+}
+
+type VideoFinishReason = "stop" | "length" | "content-filter" | "error" | "other";
+interface VideoEventDataMap {
+    "response.start": {
+        requestId: string;
+        format: {
+            orientation: VideoOrientation;
+        };
+        style: VideoStyle;
+        meta?: Video["meta"];
+        capabilities?: VideoCapabilities;
+    };
+    "audio.set": {
+        audio: VideoAudio;
+    };
+    "scene.add": {
+        scene: VideoScene;
+        position: number;
+        revision: number;
+    };
+    "scene.patch": {
+        sceneId: string;
+        revision: number;
+        patch: Partial<Omit<VideoScene, "id" | "templateId">>;
+    };
+    "asset.patch": {
+        sceneId: string;
+        revision: number;
+        variables: Record<string, unknown>;
+    };
+    "response.warning": {
+        warning: VideoWarning;
+    };
+    "response.complete": {
+        finishReason: VideoFinishReason;
+        snapshot: Video;
+        checksum: string;
+    };
+    "response.error": {
+        error: {
+            code: string;
+            message: string;
+            recoverable: boolean;
+        };
+        terminal: boolean;
+        snapshot?: Video;
+    };
+    "response.abort": {
+        reason: string;
+        snapshot?: Video;
+    };
+}
+type VideoCoreEventType = keyof VideoEventDataMap;
+type VideoExtensionEventType = `data.${string}`;
+interface VideoEventEnvelope<TType extends string, TData> {
+    protocolVersion: typeof VIDEO_PROTOCOL_VERSION;
+    runId: string;
+    sequence: number;
+    eventId: string;
+    type: TType;
+    data: TData;
+}
+type VideoCoreEvent = {
+    [TType in VideoCoreEventType]: VideoEventEnvelope<TType, VideoEventDataMap[TType]>;
+}[VideoCoreEventType];
+type VideoExtensionEvent<TData = unknown> = VideoEventEnvelope<VideoExtensionEventType, TData>;
+type VideoEvent = VideoCoreEvent | VideoExtensionEvent;
+
+export type { VideoEvent as V, VideoWarning as a, VideoFinishReason as b, VideoWarningCategory as c };