@vanillaskyai/video 0.3.0 → 0.3.2

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-KIYBFYRH.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;
@@ -152,6 +158,46 @@ function savedVideoState(video) {
     config: video
   };
 }
+function PlayerIcon({ name, size = 22 }) {
+  const shared = {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    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__ */ 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: [
+      /* @__PURE__ */ jsx("path", { d: "M4.5 9A8 8 0 1 1 5 16" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.5 4.5V9H9" })
+    ] });
+  }
+  if (name === "volume-off") {
+    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
+      /* @__PURE__ */ jsx("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
+      /* @__PURE__ */ jsx("path", { d: "m16 9 5 5M21 9l-5 5" })
+    ] });
+  }
+  if (name === "volume") {
+    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
+      /* @__PURE__ */ jsx("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 9.5a4 4 0 0 1 0 5M17.8 7a7.5 7.5 0 0 1 0 10" })
+    ] });
+  }
+  if (name === "exit-fullscreen") {
+    return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" }) });
+  }
+  return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" }) });
+}
 function VideoPlayerRuntime({
   kit,
   stream,
@@ -178,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);
@@ -196,6 +242,15 @@ 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();
+    context.resume().catch(Boolean);
+    import("./control-visibility-NQOWTKOQ.js").then((output) => output.default(audio, context)).catch(() => context.close());
+  };
   if (stream !== activeStream) {
     const autoStartReplacement = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
     setActiveStream(stream);
@@ -224,12 +279,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;
@@ -239,7 +292,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;
@@ -286,7 +342,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);
@@ -394,7 +452,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;
@@ -413,6 +472,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(() => {
@@ -463,39 +523,42 @@ 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",
-    minWidth: 44,
-    minHeight: 44,
-    padding: "6px 9px",
-    border: 0,
-    borderRadius: 8,
-    backgroundColor: "rgba(9, 7, 18, 0.88)",
+    width: controlSize,
+    height: controlSize,
+    minWidth: controlSize,
+    minHeight: controlSize,
+    padding: 0,
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: 999,
+    backgroundColor: "rgba(255, 255, 255, 0.16)",
     color: "#ffffff",
-    font: "600 13px/1 system-ui, sans-serif",
+    boxShadow: "0 5px 18px rgba(0, 0, 0, 0.16)",
+    backdropFilter: "blur(12px)",
     cursor: "pointer"
   };
   const startButtonStyle = {
     display: "inline-flex",
     alignItems: "center",
     gap: 10,
-    minHeight: 54,
-    padding: "12px 18px",
-    border: "1px solid rgba(255, 255, 255, 0.3)",
+    minHeight: 60,
+    padding: "14px 22px",
+    border: "1px solid rgba(9, 7, 18, 0.08)",
     borderRadius: 999,
-    backgroundColor: "rgba(9, 7, 18, 0.88)",
-    color: "#ffffff",
-    boxShadow: "0 8px 28px rgba(0, 0, 0, 0.4)",
-    backdropFilter: "blur(12px)",
-    font: "700 15px/1 system-ui, sans-serif",
+    backgroundColor: "#ffffff",
+    color: "#090712",
+    boxShadow: "0 8px 28px rgba(0, 0, 0, 0.24)",
+    font: "700 16px/1 system-ui, sans-serif",
+    whiteSpace: "nowrap",
     cursor: "pointer"
   };
   const startButtonPositionStyle = {
@@ -518,6 +581,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();
@@ -538,6 +603,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%",
@@ -579,7 +645,7 @@ function VideoPlayerRuntime({
                   onClick: armPlayback,
                   style: { ...startButtonStyle, ...startButtonPositionStyle },
                   children: [
-                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B6" }),
+                    /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
                     config?.audio && !isMuted ? "Play with sound" : "Play video"
                   ]
                 }
@@ -597,7 +663,8 @@ function VideoPlayerRuntime({
             playing: isPlaying,
             style: {
               position: "absolute",
-              inset: 0,
+              left: 0,
+              top: 0,
               transform: `scale(${scale})`,
               transformOrigin: "top left"
             }
@@ -615,7 +682,7 @@ function VideoPlayerRuntime({
               ...startButtonPositionStyle
             },
             children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B6" }),
+              /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
               config?.audio && !isMuted ? "Play with sound" : "Play video"
             ]
           }
@@ -625,66 +692,106 @@ 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",
+          {
+            "data-testid": "video-ended-scrim",
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 1,
+              pointerEvents: "none",
+              background: "rgba(4, 3, 18, 0.52)",
+              backdropFilter: "blur(4px)"
+            }
           }
         ) : null,
-        !generationCoverVisible ? /* @__PURE__ */ jsxs(
+        ended ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": "video-replay-button",
+            "aria-label": "Replay video response",
+            onClick: togglePlayback,
+            style: {
+              ...startButtonStyle,
+              ...startButtonPositionStyle,
+              zIndex: 3
+            },
+            children: [
+              /* @__PURE__ */ jsx(PlayerIcon, { name: "replay", size: 21 }),
+              "Replay"
+            ]
+          }
+        ) : null,
+        !generationCoverVisible && !showStartPoster && config?.scenes.length ? /* @__PURE__ */ jsxs(
           "div",
           {
             "data-testid": "video-controls",
             style: {
               position: "absolute",
-              right: 10,
-              bottom: 10,
-              zIndex: 2,
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              minHeight: 48,
-              padding: "6px 8px",
-              border: "1px solid rgba(255, 255, 255, 0.2)",
-              borderRadius: 12,
-              backgroundColor: "rgba(9, 7, 18, 0.82)",
-              backdropFilter: "blur(12px)",
-              color: "#ffffff",
-              boxShadow: "0 4px 20px rgba(0, 0, 0, 0.35)"
+              inset: 0,
+              zIndex: 4,
+              pointerEvents: "none"
             },
             children: [
-              !showStartPoster ? /* @__PURE__ */ jsx(
-                "button",
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  type: "button",
-                  "aria-label": ended ? "Replay video response" : isPlaying ? "Pause video response" : "Play video response",
-                  onClick: togglePlayback,
-                  style: controlButtonStyle,
-                  children: ended ? "\u21BB Replay" : isPlaying ? "\u2161" : "\u25B6"
+                  "data-testid": "video-primary-controls",
+                  style: { position: "absolute", left: controlInset, bottom: controlInset, display: "flex", pointerEvents: "auto" },
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": ended ? "Play video response from beginning" : isPlaying ? "Pause video response" : "Play video response",
+                      onClick: togglePlayback,
+                      style: controlButtonStyle,
+                      children: /* @__PURE__ */ jsx(PlayerIcon, { name: isPlaying ? "pause" : "play" })
+                    }
+                  )
                 }
-              ) : null,
-              config?.audio ? /* @__PURE__ */ jsx(
-                "button",
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  type: "button",
-                  "aria-label": isMuted ? "Unmute video response" : "Mute video response",
-                  "aria-pressed": !isMuted,
-                  onClick: () => setIsMuted((muted) => {
-                    if (muted) setAudioUnlocked(true);
-                    return !muted;
-                  }),
-                  style: controlButtonStyle,
-                  children: isMuted ? "\u{1F507}" : "\u{1F50A}"
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-                  onClick: () => void toggleFullscreen(),
-                  style: controlButtonStyle,
-                  children: isFullscreen ? "\u2199" : "\u26F6"
+                  "data-testid": "video-secondary-controls",
+                  style: { position: "absolute", right: controlInset, bottom: controlInset, display: "flex", gap: 10, pointerEvents: "auto" },
+                  children: [
+                    config?.audio ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isMuted ? "Unmute video response" : "Mute video response",
+                        "aria-pressed": !isMuted,
+                        onClick: () => setIsMuted((muted) => {
+                          if (muted) setAudioUnlocked(true);
+                          return !muted;
+                        }),
+                        style: controlButtonStyle,
+                        children: /* @__PURE__ */ jsx(PlayerIcon, { name: isMuted ? "volume-off" : "volume" })
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                        onClick: () => void toggleFullscreen(),
+                        style: controlButtonStyle,
+                        children: /* @__PURE__ */ jsx(PlayerIcon, { name: isFullscreen ? "exit-fullscreen" : "enter-fullscreen" })
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -976,9 +1083,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/server.d.ts

@@ -1,6 +1,6 @@
-import { m as VideoGenerationContext, n as VideoPlanner, o as VideoRequest, k as VideoCapabilities, d as VideoInput, a as VideoAudio, p as VideoSceneValidator, q as VideoTemplatePacing, r as VideoSnapshotRetention, s as VideoResumeCursor, t as VideoSceneValidationContext, g as VideoScene } from './types-CkO2EYr4.js';
-import { b as VideoFinishReason, a as VideoWarning, V as VideoEvent } from './events-CTIsANzz.js';
-export { c as VideoWarningCategory } from './events-CTIsANzz.js';
+import { m as VideoGenerationContext, n as VideoPlanner, o as VideoRequest, k as VideoCapabilities, d as VideoInput, a as VideoAudio, p as VideoSceneValidator, q as VideoTemplatePacing, r as VideoSnapshotRetention, s as VideoResumeCursor, t as VideoSceneValidationContext, g as VideoScene } from './types-CVMb6QEq.js';
+import { b as VideoFinishReason, a as VideoWarning, V as VideoEvent } from './events-tQ0x-VaL.js';
+export { c as VideoWarningCategory } from './events-tQ0x-VaL.js';
 import { S as SceneTemplateMetadata } from './catalog-types-BIhSpOWK.js';
 
 interface VideoProviderUsage {

package/dist/server.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BKF3A357.js";
 import {
   createVideo
-} from "./chunk-XYZOJ5NZ.js";
+} from "./chunk-LHFADNWJ.js";
 import "./chunk-E7CL7UPB.js";
 import {
   BUILTIN_SERVER_TEMPLATE_KIT,
@@ -161,7 +161,7 @@ function parseVideoRequest(value) {
       "request.input.orientation"
     );
   }
-  if (input.opening != null) string(input.opening, "request.input.opening");
+  if (input.opening != null && input.opening !== false) string(input.opening, "request.input.opening");
   if (input.audio != null && input.audio !== false) {
     const soundtrack = record(input.audio, "request.input.audio");
     allowedKeys(soundtrack, ["src"], "request.input.audio");

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",