@vanillaskyai/video 0.3.1 → 0.3.3

package/dist/react.js

@@ -29,10 +29,10 @@ import "./chunk-2E6T633S.js";
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-QTMHS7JD.js";
+} from "./chunk-HXSV6RHF.js";
 import {
   fontStack
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 import {
   getVideoDuration,
   resolveVideoTimeline
@@ -53,34 +53,34 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "media": () => import("./bg-media-SVUZAMGX.js").then((module) => ({ default: module.BgMediaTemplate })),
-  "reaction": () => import("./reaction-QG4CYZLQ.js").then((module) => ({ default: module.ReactionTemplate })),
-  "confetti": () => import("./bg-confetti-WNQXS7ZS.js").then((module) => ({ default: module.BgConfettiTemplate })),
-  "emojiBurst": () => import("./bg-emoji-ETI47GLS.js").then((module) => ({ default: module.BgEmojiTemplate })),
-  "bigNumber": () => import("./chart-counter-MCRHKN77.js").then((module) => ({ default: module.ChartCounterTemplate })),
-  "barChart": () => import("./chart-bar-CNSC7BNK.js").then((module) => ({ default: module.ChartBarTemplate })),
-  "progressRing": () => import("./chart-progress-ring-RMI4A7ZK.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
-  "phoneMockup": () => import("./showcase-phone-6CP6XEU5.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
-  "webMockup": () => import("./showcase-web-Y4W2HVRJ.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
-  "codeEditor": () => import("./showcase-code-RUTFZR3H.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
-  "terminal": () => import("./showcase-terminal-MGAEQWPR.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
-  "tweet": () => import("./social-tweet-5OLCNPPC.js").then((module) => ({ default: module.SocialTweetTemplate })),
-  "notification": () => import("./social-notification-2UOHQCUY.js").then((module) => ({ default: module.SocialNotificationTemplate })),
+  "media": () => import("./bg-media-KGYE6UVS.js").then((module) => ({ default: module.BgMediaTemplate })),
+  "reaction": () => import("./reaction-YL6YPGPB.js").then((module) => ({ default: module.ReactionTemplate })),
+  "confetti": () => import("./bg-confetti-KTHLUJPO.js").then((module) => ({ default: module.BgConfettiTemplate })),
+  "emojiBurst": () => import("./bg-emoji-AW7374DZ.js").then((module) => ({ default: module.BgEmojiTemplate })),
+  "bigNumber": () => import("./chart-counter-X7NAOQ2C.js").then((module) => ({ default: module.ChartCounterTemplate })),
+  "barChart": () => import("./chart-bar-Z42RDRQT.js").then((module) => ({ default: module.ChartBarTemplate })),
+  "progressRing": () => import("./chart-progress-ring-7NSNNHL4.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
+  "phoneMockup": () => import("./showcase-phone-CTHXHEBT.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
+  "webMockup": () => import("./showcase-web-LAKHYXSD.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
+  "codeEditor": () => import("./showcase-code-EFVHRJUM.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
+  "terminal": () => import("./showcase-terminal-XAMPADHN.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
+  "tweet": () => import("./social-tweet-PBUKKPT3.js").then((module) => ({ default: module.SocialTweetTemplate })),
+  "notification": () => import("./social-notification-MELRWIB6.js").then((module) => ({ default: module.SocialNotificationTemplate })),
   "chatMessenger": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
   "chatWhatsapp": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
-  "milestone": () => import("./social-milestone-XI2QE5BO.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
-  "reviewStack": () => import("./social-review-stack-FDYZGZTJ.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
-  "testimonial": () => import("./social-testimonial-OQ7N52GJ.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
-  "incomingCall": () => import("./incoming-call-62MFZL3Z.js").then((module) => ({ default: module.IncomingCallTemplate })),
-  "brandMessage": () => import("./brand-message-F3RD4P3P.js").then((module) => ({ default: module.BrandMessageTemplate })),
-  "promptInput": () => import("./prompt-input-LOUCRXCY.js").then((module) => ({ default: module.PromptInputTemplate })),
-  "beforeAfter": () => import("./infographic-before-after-AXCDAWND.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
-  "tripleStats": () => import("./infographic-stat-row-J7IZR6ZN.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
-  "problemSolution": () => import("./infographic-problem-solution-7NURJANA.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
-  "cardList": () => import("./infographic-feature-list-GW5GUE6O.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
-  "steps": () => import("./infographic-steps-VSZM6F5M.js").then((module) => ({ default: module.InfographicStepsTemplate })),
-  "ctaLogo": () => import("./cta-logo-SVA5GP2A.js").then((module) => ({ default: module.CtaLogoTemplate })),
-  "ctaMedia": () => import("./cta-media-E7VLLK42.js").then((module) => ({ default: module.CtaMediaTemplate }))
+  "milestone": () => import("./social-milestone-EOBEN7CX.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
+  "reviewStack": () => import("./social-review-stack-H3U437VT.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
+  "testimonial": () => import("./social-testimonial-GNNMKMDD.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
+  "incomingCall": () => import("./incoming-call-KWOXLGJN.js").then((module) => ({ default: module.IncomingCallTemplate })),
+  "brandMessage": () => import("./brand-message-AY43ZQR2.js").then((module) => ({ default: module.BrandMessageTemplate })),
+  "promptInput": () => import("./prompt-input-XCQ6TS2L.js").then((module) => ({ default: module.PromptInputTemplate })),
+  "beforeAfter": () => import("./infographic-before-after-OEM4DSTZ.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
+  "tripleStats": () => import("./infographic-stat-row-3OL3TNSH.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
+  "problemSolution": () => import("./infographic-problem-solution-L3RLFDPE.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
+  "cardList": () => import("./infographic-feature-list-ZZ25JRYQ.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
+  "steps": () => import("./infographic-steps-LMBSW22P.js").then((module) => ({ default: module.InfographicStepsTemplate })),
+  "ctaLogo": () => import("./cta-logo-KNBLXUJU.js").then((module) => ({ default: module.CtaLogoTemplate })),
+  "ctaMedia": () => import("./cta-media-NY4ASBGG.js").then((module) => ({ default: module.CtaMediaTemplate }))
 };
 
 // src/visual-system/catalog/builtin.ts
@@ -142,6 +142,12 @@ function preloadBuiltinTemplate(id) {
   return preloadableById.get(id)?.preload();
 }
 
+// src/player/warm-scene-media.ts
+function warmSceneMedia(variables) {
+  void import("./preload-media-NKQ6JA3T.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
+  });
+}
+
 // src/player/video-player.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var MINIMUM_GENERATION_INTRO_MS = 3e3;
@@ -161,18 +167,13 @@ function PlayerIcon({ name, size = 22 }) {
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    focusable: false
+    strokeLinejoin: "round"
   };
   if (name === "play") {
     return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z", fill: "currentColor", stroke: "none" }) });
   }
   if (name === "pause") {
-    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
-      /* @__PURE__ */ jsx("rect", { x: "7", y: "5", width: "3.5", height: "14", rx: "1", fill: "currentColor", stroke: "none" }),
-      /* @__PURE__ */ jsx("rect", { x: "13.5", y: "5", width: "3.5", height: "14", rx: "1", fill: "currentColor", stroke: "none" })
-    ] });
+    return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M7 5h4v14H7zm6 0h4v14h-4z", fill: "currentColor", stroke: "none" }) });
   }
   if (name === "replay") {
     return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
@@ -223,7 +224,7 @@ function VideoPlayerRuntime({
   const autoStartGeneration = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
   const [isPlaying, setIsPlaying] = useState(() => shouldAutoPlay && !reducedMotion && !autoStartGeneration);
   const [isMuted, setIsMuted] = useState(resolvedStartMuted);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [fullscreenMode, setFullscreenMode] = useState("none");
   const [state, setState] = useState(() => video ? savedVideoState(video) : createVideoState());
   const [currentTime, setCurrentTime] = useState(0);
   const [activeStream, setActiveStream] = useState(stream);
@@ -241,6 +242,22 @@ function VideoPlayerRuntime({
   stateRef.current = state;
   timeRef.current = currentTime;
   callbacksRef.current = { onComplete, onError, onStateChange };
+  const primeSoundtrack = () => {
+    const audio = audioRef.current;
+    if (!audio || audio.dataset.audioOutput) return;
+    const Context = window.AudioContext ?? window.webkitAudioContext;
+    if (!Context) return;
+    const context = new Context();
+    const unlocked = context.resume().catch(Boolean);
+    void import("./control-visibility-NQOWTKOQ.js").then(async (output) => {
+      await unlocked;
+      if (context.state !== "running") {
+        void context.close();
+        return;
+      }
+      output.default(audio, context);
+    }).catch(() => context.close());
+  };
   if (stream !== activeStream) {
     const autoStartReplacement = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
     setActiveStream(stream);
@@ -269,12 +286,10 @@ function VideoPlayerRuntime({
     preference.addEventListener?.("change", handleChange);
     return () => preference.removeEventListener?.("change", handleChange);
   }, []);
-  useEffect(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
   useEffect(() => {
-    const updateFullscreen = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
-    document.addEventListener("fullscreenchange", updateFullscreen);
-    return () => document.removeEventListener("fullscreenchange", updateFullscreen);
+    import("./control-visibility-NQOWTKOQ.js");
   }, []);
+  useEffect(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
   useEffect(() => {
     let cancelled = false;
     let started = false;
@@ -284,7 +299,10 @@ function VideoPlayerRuntime({
     setState(reset);
     setCurrentTime(0);
     if (video) {
-      for (const scene of video.scenes) preloadBuiltinTemplate(scene.templateId);
+      for (const scene of video.scenes) {
+        preloadBuiltinTemplate(scene.templateId);
+        warmSceneMedia(scene.variables);
+      }
       return;
     }
     if (!stream) return;
@@ -331,7 +349,9 @@ function VideoPlayerRuntime({
     if (width != null) return;
     const container = containerRef.current;
     if (!container) return;
-    const update = () => setObservedWidth(container.clientWidth);
+    const update = () => {
+      setObservedWidth(container.clientWidth);
+    };
     update();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(update);
@@ -439,7 +459,8 @@ function VideoPlayerRuntime({
     return () => clearTimeout(timer);
   }, [startRequested, state.config?.audio?.volume, state.config?.scenes.length, state.status]);
   const streamOrientation = state.config?.orientation ?? "portrait";
-  const responsiveWidth = width ?? observedWidth;
+  const isFullscreen = fullscreenMode !== "none";
+  const responsiveWidth = isFullscreen ? window.innerWidth : width ?? observedWidth;
   const orientation = orientationOverride === "auto" ? responsiveWidth > 0 ? responsiveWidth <= responsiveBreakpoint ? "portrait" : "landscape" : streamOrientation : orientationOverride ?? streamOrientation;
   const dimensions = getDimensions(orientation);
   const displayWidth = (width ?? observedWidth) || dimensions.width;
@@ -458,6 +479,7 @@ function VideoPlayerRuntime({
   const posterTime = firstSceneRange ? firstSceneRange.start + Math.max(0, firstSceneRange.end - firstSceneRange.start) * firstSceneHoldProgress : currentTime;
   const startPlayback = () => {
     setGenerationIntroComplete(true);
+    containerRef.current?.setAttribute("data-touch-controls", "false");
     const audio = audioRef.current;
     if (audio) {
       void audio.play().then(() => {
@@ -508,18 +530,16 @@ function VideoPlayerRuntime({
     if (isPlaying) setIsPlaying(false);
     else startPlayback();
   };
-  const toggleFullscreen = async () => {
+  const toggleFullscreen = () => {
     const container = containerRef.current;
     if (!container) return;
-    if (document.fullscreenElement === container) await document.exitFullscreen?.();
-    else await container.requestFullscreen?.();
+    void import("./control-visibility-NQOWTKOQ.js").then((output) => output.togglePlayerFullscreen(container, setFullscreenMode));
   };
   const controlSize = Math.max(40, Math.min(52, Math.round(displayWidth * 0.15)));
   const controlInset = Math.max(10, Math.min(20, Math.round(displayWidth * 0.056)));
   const controlButtonStyle = {
     display: "inline-grid",
     placeItems: "center",
-    flex: "0 0 auto",
     width: controlSize,
     height: controlSize,
     minWidth: controlSize,
@@ -568,6 +588,8 @@ function VideoPlayerRuntime({
       role: "region",
       "aria-label": ariaLabel,
       tabIndex: 0,
+      onClickCapture: primeSoundtrack,
+      onKeyDownCapture: primeSoundtrack,
       onKeyDown: (event) => {
         if (event.target === event.currentTarget && (event.key === " " || event.key === "Enter")) {
           event.preventDefault();
@@ -588,6 +610,7 @@ function VideoPlayerRuntime({
       "data-generation-intro-complete": generationIntroComplete,
       "data-audio-unlocked": audioUnlocked,
       "data-playback-mode": playbackMode ?? "custom",
+      "data-fullscreen": fullscreenMode,
       className,
       style: {
         width: width ?? "100%",
@@ -647,7 +670,8 @@ function VideoPlayerRuntime({
             playing: isPlaying,
             style: {
               position: "absolute",
-              inset: 0,
+              left: 0,
+              top: 0,
               transform: `scale(${scale})`,
               transformOrigin: "top left"
             }
@@ -675,11 +699,13 @@ function VideoPlayerRuntime({
           {
             ref: audioRef,
             src: config.audio.audioUrl,
+            "data-v": config.audio.volume,
             autoPlay: isPlaying,
             muted: isMuted,
             preload: "auto",
             loop: state.status === "streaming" || introPlaying
-          }
+          },
+          config.audio.audioUrl
         ) : null,
         ended ? /* @__PURE__ */ jsx(
           "div",
@@ -718,7 +744,6 @@ function VideoPlayerRuntime({
           "div",
           {
             "data-testid": "video-controls",
-            "data-layout": "split",
             style: {
               position: "absolute",
               inset: 0,
@@ -1065,9 +1090,13 @@ function useVideo(options = {}) {
       credentials: currentOptions.credentials,
       fetcher: currentOptions.fetcher,
       onEvent: (_event, nextState) => {
-        if (_event.type === "scene.add" && !currentOptions.templates?.getTemplate(_event.data.scene.templateId)) {
-          preloadBuiltinTemplate(_event.data.scene.templateId);
+        if (_event.type === "scene.add") {
+          if (!currentOptions.templates?.getTemplate(_event.data.scene.templateId)) {
+            preloadBuiltinTemplate(_event.data.scene.templateId);
+          }
         }
+        const backdrop = _event.type === "scene.add" ? _event.data.scene.variables : _event.type === "asset.patch" ? _event.data.variables : _event.type === "scene.patch" ? _event.data.patch.variables : void 0;
+        if (backdrop) warmSceneMedia(backdrop);
         if (mounted.current && generation.current === currentGeneration) setState(nextState);
       }
     });

package/dist/{reaction-QG4CYZLQ.js → reaction-YL6YPGPB.js}

@@ -1,15 +1,16 @@
 import {
   SceneBackground
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/scene-templates/reaction.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{showcase-code-RUTFZR3H.js → showcase-code-EFVHRJUM.js}

@@ -5,19 +5,22 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/devices/CodeEditor.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -314,6 +317,7 @@ var ShowcaseCodeTemplate = ({
         /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: "subtle",

package/dist/{showcase-phone-6CP6XEU5.js → showcase-phone-CTHXHEBT.js}

@@ -2,17 +2,20 @@ import {
   PhoneScreenFill,
   ProductSurface,
   resolveProductSurfaceMotion
-} from "./chunk-FSG2PYWG.js";
+} from "./chunk-G5JPHBX7.js";
 import "./chunk-S7HFLYNN.js";
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SMOOTH,
   interpolate,
@@ -21,7 +24,7 @@ import {
 import {
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/devices/PhoneFrame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -224,6 +227,7 @@ var ShowcasePhoneTemplate = ({
         /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: tokens.preset.type,
             archetype: textArchetype ?? "subtle",

package/dist/{showcase-terminal-MGAEQWPR.js → showcase-terminal-XAMPADHN.js}

@@ -7,12 +7,15 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   interpolate,
   spring
@@ -20,7 +23,7 @@ import {
 import {
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/devices/TerminalOutput.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -268,6 +271,7 @@ var ShowcaseTerminalTemplate = ({
         /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: "subtle",

package/dist/{showcase-web-Y4W2HVRJ.js → showcase-web-LAKHYXSD.js}

@@ -2,19 +2,22 @@ import {
   ProductSurface,
   WebScreenFill,
   resolveProductSurfaceMotion
-} from "./chunk-FSG2PYWG.js";
+} from "./chunk-G5JPHBX7.js";
 import {
   stripPipe
 } from "./chunk-S7HFLYNN.js";
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SMOOTH,
   interpolate,
@@ -23,7 +26,7 @@ import {
 import {
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/devices/WebMockup.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -341,6 +344,7 @@ var ShowcaseWebTemplate = ({
         /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: tokens.preset.type,
             archetype: textArchetype ?? "subtle",

package/dist/{social-milestone-XI2QE5BO.js → social-milestone-EOBEN7CX.js}

@@ -4,7 +4,8 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
@@ -16,7 +17,7 @@ import {
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,
@@ -24,9 +25,10 @@ import {
   spring
 } from "./chunk-XTOXFMLM.js";
 import {
+  MEDIA_TEXT_SHADOW,
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/social/MilestoneBadge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -60,7 +62,7 @@ var MilestoneBadge = ({
   const safeStart = startNumber != null && Number.isFinite(startNumber) ? startNumber : Math.max(0, Math.round(safeTarget * 0.98));
   const mainTextColor = hasMedia ? "#FFFFFF" : foreground;
   const pillTextColor = accessibleTextColor(surfaceElevated, foreground);
-  const mediaTextShadow = hasMedia ? "0 2px 8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35)" : void 0;
+  const mediaTextShadow = hasMedia ? MEDIA_TEXT_SHADOW : void 0;
   const followerCount = Math.round(
     interpolate(progress, [0.056, 0.556], [safeStart, safeTarget], CLAMP)
   );

package/dist/{social-notification-2UOHQCUY.js → social-notification-MELRWIB6.js}

@@ -4,12 +4,13 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   Emoji,
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SMOOTH,
   interpolate,
@@ -17,7 +18,7 @@ import {
 } from "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/social/NotificationCard.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{social-review-stack-FDYZGZTJ.js → social-review-stack-H3U437VT.js}

@@ -4,11 +4,12 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SNAPPY,
   interpolate,
@@ -17,7 +18,7 @@ import {
 import {
   lighten,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/social/ReviewStack.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{social-testimonial-OQ7N52GJ.js → social-testimonial-GNNMKMDD.js}

@@ -4,12 +4,13 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   accessibleTextColor,
   autoTextColor,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SMOOTH,
   SPRING_SNAPPY,
@@ -20,7 +21,7 @@ import {
   TOKEN_DEFAULTS,
   lighten,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/social/TestimonialCard.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{social-tweet-5OLCNPPC.js → social-tweet-PBUKKPT3.js}

@@ -4,13 +4,14 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
 import {
   autoTextColor
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SMOOTH,
   interpolate,
@@ -18,7 +19,7 @@ import {
 } from "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/social/TweetCard.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/docs/getting-started.md

@@ -5,7 +5,7 @@
 Install VanillaSky:
 
 ```bash
-npm install @vanillaskyai/video@0.3.1 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.3 ai @ai-sdk/openai
 ```
 
 Set your provider key in `.env.local` (never commit it):
@@ -50,7 +50,7 @@ sets its marker only for `next dev`, and it accepts only localhost. Every
 production request is denied. Replace it with your real session validation
 before deploying. For literal files and commands,
 use the tested
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.1/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.3/examples/nextjs-quickstart).
 
 `model` can come from any AI SDK provider, registry, gateway, compatible API,
 or custom implementation. The application can choose a cheaper or faster model

package/docs/integrate-nextjs.md

@@ -5,7 +5,7 @@
 Install VanillaSky and one AI SDK provider:
 
 ```bash
-npm install @vanillaskyai/video@0.3.1 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.3 ai @ai-sdk/openai
 ```
 
 Create an ignored `.env.local`:
@@ -74,7 +74,7 @@ requests; replace it with your application's session validation before
 deploying.
 
 The copy-and-run app is in the
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.1/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.3/examples/nextjs-quickstart).
 
 For another LLM, replace `openai(...)` with the matching AI SDK model. The route
 shape and React code stay the same. See [Provider integration](provider-integration.md)

package/examples/nextjs-quickstart/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^4.0.42",
-    "@vanillaskyai/video": "0.3.1",
+    "@vanillaskyai/video": "0.3.3",
     "ai": "^7.0.66",
     "next": "16.3.1",
     "react": "19.2.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Open-source video response SDK for personalized AI applications.",
   "keywords": [
     "generative-video",