@vanillaskyai/video 0.4.1 → 0.5.0

package/dist/react.js

@@ -2,34 +2,29 @@ import {
   VIDEO_STREAM_CONTENT_TYPE,
   VIDEO_STREAM_HEADER,
   decodeVideoSse
-} from "./chunk-S5ZU5WUU.js";
+} from "./chunk-ZQQQAAKP.js";
 import {
   applyVideoEvent,
+  createReplayableStream,
   createVideoState
-} from "./chunk-STIFILQG.js";
+} from "./chunk-FZHMQFG3.js";
 import {
   safePublicDiagnostic
-} from "./chunk-JW47XCRL.js";
+} from "./chunk-G66Z5CWR.js";
 import {
   parseVideo
-} from "./chunk-GHJEAP4O.js";
+} from "./chunk-66MNRUCR.js";
 import {
   VIDEO_PROTOCOL_VERSION,
   createVideoRequest
-} from "./chunk-EE6PK6XC.js";
+} from "./chunk-AOWSXU2K.js";
 import {
-  overlayTemplateRegistry
-} from "./chunk-CR7FE7BW.js";
-import {
-  BUILTIN_TEMPLATE_CAPABILITIES,
-  BUILTIN_TEMPLATE_CATALOG,
-  getBuiltinTemplateMetadata
-} from "./chunk-XAMUOSX7.js";
-import "./chunk-2E6T633S.js";
+  assertTemplateTransitionMetadata
+} from "./chunk-2E6T633S.js";
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-N3KUA7VP.js";
+} from "./chunk-K6YVQODK.js";
 import {
   fontStack
 } from "./chunk-XWWLKRNU.js";
@@ -42,13 +37,41 @@ import "./chunk-73NTSFFI.js";
 
 // src/player/video-player.tsx
 import {
-  useEffect,
+  useEffect as useEffect2,
   useMemo,
   useRef,
   useState
 } from "react";
 
-// src/visual-system/catalog/builtin.ts
+// src/visual-system/catalog/player-kit.ts
+function createPlayerTemplateRegistry(templates) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const template of templates) {
+    assertTemplateTransitionMetadata(template);
+    if (!template.defaults && !template.schema) {
+      throw new Error(`${template.id} requires defaults or a schema`);
+    }
+    if (byId.has(template.id)) throw new Error(`Duplicate template id: ${template.id}`);
+    byId.set(template.id, template);
+  }
+  const frozenTemplates = Object.freeze([...templates]);
+  return Object.freeze({
+    templates: frozenTemplates,
+    capabilities: { templates: frozenTemplates.map(({ id }) => id) },
+    getTemplate: (id) => byId.get(id)
+  });
+}
+function overlayPlayerTemplateRegistry(defaults, customer) {
+  if (!customer) return defaults;
+  const customerTemplates = new Map(customer.templates.map((template) => [template.id, template]));
+  const defaultIds = new Set(defaults.templates.map(({ id }) => id));
+  return createPlayerTemplateRegistry([
+    ...defaults.templates.map((template) => customerTemplates.get(template.id) ?? template),
+    ...customer.templates.filter(({ id }) => !defaultIds.has(id))
+  ]);
+}
+
+// src/visual-system/catalog/builtin-player.ts
 import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
@@ -83,7 +106,551 @@ var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
   "ctaMedia": () => import("./cta-media-NY4ASBGG.js").then((module) => ({ default: module.CtaMediaTemplate }))
 };
 
-// src/visual-system/catalog/builtin.ts
+// src/visual-system/catalog/builtin-player.generated.ts
+var GENERATED_BUILTIN_PLAYER_TEMPLATES = [
+  {
+    "id": "media",
+    "defaults": {
+      "texts": "Make an impact.",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic",
+      "confetti": false
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "reaction",
+    "defaults": {
+      "texts": "Still editing manually?",
+      "reactionTag": "manual",
+      "mediaUrl": "",
+      "mediaType": "video",
+      "mediaPoster": ""
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "confetti",
+    "defaults": {
+      "texts": "Celebrate."
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "emojiBurst",
+    "defaults": {
+      "texts": "Let's go!"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "bigNumber",
+    "defaults": {
+      "texts": "Our biggest milestone yet.",
+      "value": 1e3,
+      "confetti": false,
+      "label": "Total users",
+      "prefix": "",
+      "unit": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "barChart",
+    "defaults": {
+      "texts": "Revenue up 300%.",
+      "bars": [
+        {
+          "label": "Q1",
+          "value": 42
+        },
+        {
+          "label": "Q2",
+          "value": 58
+        },
+        {
+          "label": "Q3",
+          "value": 76
+        },
+        {
+          "label": "Q4",
+          "value": 91
+        }
+      ],
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "progressRing",
+    "defaults": {
+      "texts": "Almost there.",
+      "value": 75,
+      "label": "Complete",
+      "unit": "%",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "phoneMockup",
+    "defaults": {
+      "texts": "See it in action.",
+      "screenMediaUrl": "",
+      "screen1Url": "",
+      "screen2Url": "",
+      "screenFit": "cover",
+      "screenFocusX": 50,
+      "screenFocusY": 50,
+      "screenMotion": "pushIn",
+      "screenCalloutText": "",
+      "screenCalloutX": 70,
+      "screenCalloutY": 35,
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "webMockup",
+    "defaults": {
+      "frame": "browser",
+      "texts": "See it in action.",
+      "screenMediaUrl": "",
+      "screen1Url": "",
+      "screen2Url": "",
+      "screenFit": "cover",
+      "screenFocusX": 50,
+      "screenFocusY": 50,
+      "screenMotion": "pushIn",
+      "screenCalloutText": "",
+      "screenCalloutX": 70,
+      "screenCalloutY": 35,
+      "addressBarUrl": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "codeEditor",
+    "defaults": {
+      "texts": "Simple as this.",
+      "code": 'import { getVideoDuration } from "@vanillaskyai/video";\nimport type { Video } from "@vanillaskyai/video";\n\nexport function duration(video: Video) {\n  return getVideoDuration(video);\n}',
+      "filename": "app.ts",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "terminal",
+    "defaults": {
+      "texts": "Ship it.",
+      "command": "npx vanillasky check",
+      "output": [],
+      "promptPrefix": "$",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "tweet",
+    "defaults": {
+      "authorName": "Your brand",
+      "authorHandle": "",
+      "authorVerified": false,
+      "message": "Just shipped the new feature \u{1F680}",
+      "likes": 0,
+      "replies": 0,
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "notification",
+    "defaults": {
+      "appName": "Reminder",
+      "appIcon": "\u{1F514}",
+      "message": "Believe in your dreams, they will lead you.",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.35,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "chatMessenger",
+    "defaults": {
+      "msg1": "Have you tried it yet?",
+      "msg2": "Yes \u2014 it saves me hours|out",
+      "msg3": "Okay, send me the link",
+      "msg4": "",
+      "dateChip1": "",
+      "dateChip2": "",
+      "msg5": "",
+      "theme": "messenger"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "chatWhatsapp",
+    "defaults": {
+      "msg1": "Have you tried it yet?",
+      "msg2": "Yes \u2014 it saves me hours|out",
+      "msg3": "Okay, send me the link",
+      "msg4": "",
+      "dateChip1": "",
+      "dateChip2": "",
+      "msg5": "",
+      "theme": "whatsapp"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "milestone",
+    "defaults": {
+      "label": "Followers",
+      "targetNumber": 1e4,
+      "startNumber": 0,
+      "badgeText": "",
+      "badgeEmoji": "\u{1F389}",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "reviewStack",
+    "defaults": {
+      "review1Title": "Life changing app",
+      "review1Body": "",
+      "review1Author": "",
+      "review2Title": "Best in class",
+      "review2Body": "",
+      "review2Author": "",
+      "review3Title": "Exceeded expectations",
+      "review3Body": "",
+      "review3Author": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "testimonial",
+    "defaults": {
+      "quote": "Best decision I made this year. Our conversion rate doubled in the first week.",
+      "authorName": "Jessica Torres",
+      "authorRole": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "incomingCall",
+    "defaults": {
+      "callerName": "Your brand",
+      "subtitle": "is calling....",
+      "declineLabel": "Decline",
+      "acceptLabel": "Accept",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "brandMessage",
+    "defaults": {
+      "message": "We built this for you.",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "promptInput",
+    "defaults": {
+      "promptText": "Make a launch video for our app",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "beforeAfter",
+    "defaults": {
+      "problemLabel": "BEFORE",
+      "problemHeadline": "Your calendar today.",
+      "solutionLabel": "AFTER",
+      "solutionHeadline": "Calmly organized.",
+      "problemEmojis": [
+        "\u{1F4C5}",
+        "\u{1F630}",
+        "\u{1F4BC}",
+        "\u{1F4CA}",
+        "\u23F0",
+        "\u{1F4AC}",
+        "\u{1F4DE}",
+        "\u{1F514}"
+      ],
+      "solutionEmojis": [
+        "\u2728",
+        "\u{1F4CB}",
+        "\u2705",
+        "\u{1F3AF}"
+      ],
+      "showEmojis": true
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "tripleStats",
+    "defaults": {
+      "texts": "By the numbers.",
+      "stat1Value": "10K",
+      "stat1Label": "Users",
+      "stat2Value": "99.9%",
+      "stat2Label": "Uptime",
+      "stat3Value": "<50ms",
+      "stat3Label": "Latency",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "problemSolution",
+    "defaults": {
+      "problemLabel": "THE PROBLEM",
+      "problemText": "Teams waste 40% of time in meetings",
+      "solutionLabel": "THE SOLUTION",
+      "solutionText": "AI that summarizes in seconds",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": false
+  },
+  {
+    "id": "cardList",
+    "defaults": {
+      "texts": "What you get.",
+      "items": [
+        "Automate your savings on energy bills",
+        "Cleaner energy without raising your bill",
+        "Same account and service guaranteed"
+      ],
+      "itemEmojis": [],
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "steps",
+    "defaults": {
+      "texts": "How it works.",
+      "steps": [
+        "Describe",
+        "Preview",
+        "Export"
+      ],
+      "stepEmojis": [],
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "ctaLogo",
+    "defaults": {
+      "url": "",
+      "cta": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  },
+  {
+    "id": "ctaMedia",
+    "defaults": {
+      "headline": "Make every moment count",
+      "url": "",
+      "cta": "",
+      "mediaUrl": "",
+      "mediaKeyword": "",
+      "mediaType": "auto",
+      "mediaPoster": "",
+      "mediaPosition": "center",
+      "mediaTreatment": "cinematic"
+    },
+    "usesGlobalTransition": true,
+    "transitionTiming": {
+      "entryReadyProgress": 0.2,
+      "holdProgress": 0.7
+    }
+  }
+];
+
+// src/visual-system/catalog/builtin-player.ts
 function createPreloadableBuiltinTemplate(loader) {
   let loaded;
   let failure;
@@ -109,35 +676,27 @@ function createPreloadableBuiltinTemplate(loader) {
   };
   return { component, preload };
 }
-function freezeTemplate(value) {
+function freezeValue(value) {
   if (value && typeof value === "object" && !Object.isFrozen(value)) {
-    for (const nested of Object.values(value)) freezeTemplate(nested);
+    for (const nested of Object.values(value)) freezeValue(nested);
     Object.freeze(value);
   }
   return value;
 }
 var preloadableById = new Map(
-  BUILTIN_TEMPLATE_CATALOG.map((metadata) => {
-    const id = metadata.id;
-    return [id, createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id])];
-  })
+  GENERATED_BUILTIN_PLAYER_TEMPLATES.map(({ id }) => [
+    id,
+    createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id])
+  ])
 );
-var BUILTIN_TEMPLATES = Object.freeze(
-  BUILTIN_TEMPLATE_CATALOG.map((metadata) => Object.freeze({
-    ...freezeTemplate({ ...metadata }),
-    component: preloadableById.get(
-      metadata.id
-    ).component
+var builtinPlayerTemplates = Object.freeze(
+  GENERATED_BUILTIN_PLAYER_TEMPLATES.map((template) => Object.freeze({
+    ...template,
+    defaults: freezeValue({ ...template.defaults }),
+    component: preloadableById.get(template.id).component
   }))
 );
-var templateById = new Map(BUILTIN_TEMPLATES.map((template) => [template.id, template]));
-var BUILTIN_TEMPLATE_KIT = Object.freeze({
-  templates: BUILTIN_TEMPLATES,
-  capabilities: BUILTIN_TEMPLATE_CAPABILITIES,
-  getTemplate: (id) => templateById.get(id),
-  getTemplateMetadata: getBuiltinTemplateMetadata,
-  listTemplateMetadata: () => BUILTIN_TEMPLATES.map(({ component: _component, ...metadata }) => metadata)
-});
+var BUILTIN_PLAYER_KIT = createPlayerTemplateRegistry(builtinPlayerTemplates);
 function preloadBuiltinTemplate(id) {
   return preloadableById.get(id)?.preload();
 }
@@ -148,16 +707,26 @@ function warmSceneMedia(variables) {
   });
 }
 
-// src/player/video-player.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var MINIMUM_GENERATION_INTRO_MS = 3e3;
-function savedVideoState(video) {
+// src/player/playback-policy.ts
+function resolvePlaybackPolicy({
+  playbackMode,
+  autoPlay,
+  startMuted,
+  audioUnlocked,
+  reducedMotion,
+  hasStream
+}) {
+  const resolvedStartMuted = playbackMode === "muted-autoplay" ? true : playbackMode ? false : startMuted;
+  const shouldAutoPlay = playbackMode === "manual" ? false : playbackMode === "autoplay-after-interaction" ? audioUnlocked : playbackMode === "muted-autoplay" || playbackMode === "autoplay-with-sound" ? true : autoPlay;
   return {
-    ...createVideoState(),
-    status: "complete",
-    config: video
+    resolvedStartMuted,
+    shouldAutoPlay,
+    autoStartGeneration: Boolean(playbackMode && hasStream && shouldAutoPlay && !reducedMotion)
   };
 }
+
+// src/player/player-controls.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function PlayerIcon({ name, size = 22 }) {
   const shared = {
     width: size,
@@ -198,6 +767,312 @@ function PlayerIcon({ name, size = 22 }) {
   }
   return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" }) });
 }
+var startButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 10,
+  minHeight: 60,
+  padding: "14px 22px",
+  border: "1px solid rgba(9, 7, 18, 0.08)",
+  borderRadius: 999,
+  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"
+};
+var startButtonPositionStyle = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  zIndex: 3,
+  transform: "translate(-50%, -50%)"
+};
+function playLabel(config, isMuted) {
+  return config?.audio && !isMuted ? "Play with sound" : "Play video";
+}
+function playAriaLabel(config, isMuted) {
+  return config?.audio && !isMuted ? "Play video with sound" : "Play video response";
+}
+function GenerationCover({
+  visible,
+  config,
+  isMuted,
+  startRequested,
+  isPlaying,
+  onStart
+}) {
+  if (!visible) return null;
+  const background = config?.style.brand.background;
+  const backgroundCss = background?.type === "solid" ? background.color : `linear-gradient(135deg, ${background?.colors[0] ?? "#8711C1"}, ${background?.colors[1] ?? "#2167E3"})`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "video-generation-cover",
+      role: "status",
+      "aria-live": "polite",
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "grid",
+        placeItems: "center",
+        padding: "12%",
+        textAlign: "center",
+        color: config?.style.brand.colors.foreground ?? "#ffffff",
+        background: backgroundCss,
+        fontFamily: fontStack(config?.style.brand.font)
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
+          /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
+          /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
+        ] }),
+        !startRequested && !isPlaying ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": playAriaLabel(config, isMuted),
+            onClick: onStart,
+            style: { ...startButtonStyle, ...startButtonPositionStyle },
+            children: [
+              /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
+              playLabel(config, isMuted)
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function StartPosterButton({
+  visible,
+  config,
+  isMuted,
+  onStart
+}) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": "video-start-button",
+      "aria-label": playAriaLabel(config, isMuted),
+      onClick: onStart,
+      style: { ...startButtonStyle, ...startButtonPositionStyle },
+      children: [
+        /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
+        playLabel(config, isMuted)
+      ]
+    }
+  );
+}
+function EndedOverlay({ ended, onReplay }) {
+  if (!ended) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__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)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-testid": "video-replay-button",
+        "aria-label": "Replay video response",
+        onClick: onReplay,
+        style: { ...startButtonStyle, ...startButtonPositionStyle, zIndex: 3 },
+        children: [
+          /* @__PURE__ */ jsx(PlayerIcon, { name: "replay", size: 21 }),
+          "Replay"
+        ]
+      }
+    )
+  ] });
+}
+function PlayerControls({
+  visible,
+  displayWidth,
+  ended,
+  isPlaying,
+  isMuted,
+  isFullscreen,
+  hasAudio,
+  onTogglePlayback,
+  onToggleMuted,
+  onToggleFullscreen
+}) {
+  if (!visible) return null;
+  const size = Math.max(40, Math.min(52, Math.round(displayWidth * 0.15)));
+  const inset = Math.max(10, Math.min(20, Math.round(displayWidth * 0.056)));
+  const buttonStyle = {
+    display: "inline-grid",
+    placeItems: "center",
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size,
+    padding: 0,
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: 999,
+    backgroundColor: "rgba(255, 255, 255, 0.16)",
+    color: "#ffffff",
+    boxShadow: "0 5px 18px rgba(0, 0, 0, 0.16)",
+    backdropFilter: "blur(12px)",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "video-controls",
+      style: { position: "absolute", inset: 0, zIndex: 4, pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "video-primary-controls",
+            style: { position: "absolute", left: inset, bottom: inset, 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: onTogglePlayback,
+                style: buttonStyle,
+                children: /* @__PURE__ */ jsx(PlayerIcon, { name: isPlaying ? "pause" : "play" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "video-secondary-controls",
+            style: { position: "absolute", right: inset, bottom: inset, display: "flex", gap: 10, pointerEvents: "auto" },
+            children: [
+              hasAudio ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isMuted ? "Unmute video response" : "Mute video response",
+                  "aria-pressed": !isMuted,
+                  onClick: onToggleMuted,
+                  style: buttonStyle,
+                  children: /* @__PURE__ */ jsx(PlayerIcon, { name: isMuted ? "volume-off" : "volume" })
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                  onClick: onToggleFullscreen,
+                  style: buttonStyle,
+                  children: /* @__PURE__ */ jsx(PlayerIcon, { name: isFullscreen ? "exit-fullscreen" : "enter-fullscreen" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/player/use-playback-clock.ts
+import { useEffect } from "react";
+function usePlaybackClock({
+  isPlaying,
+  stateRef,
+  timeRef,
+  audioRef,
+  loopRef,
+  sceneIndexRef,
+  callbacksRef,
+  setCurrentTime,
+  setIsPlaying
+}) {
+  useEffect(() => {
+    if (!isPlaying) return;
+    let frame = 0;
+    let previous = performance.now();
+    const tick = (now) => {
+      const current = stateRef.current;
+      const config = current.config;
+      const delta = Math.max(0, (now - previous) / 1e3);
+      previous = now;
+      const settled = current.status === "complete" || current.status === "error" || current.status === "aborted";
+      const looping = loopRef.current && settled;
+      let wrapped = false;
+      if (config?.scenes.length) {
+        const duration2 = getVideoDuration(config);
+        const raw = timeRef.current + delta;
+        let nextTime;
+        if (looping && duration2 > 0 && raw >= duration2) {
+          nextTime = raw % duration2;
+          wrapped = true;
+        } else {
+          nextTime = Math.min(raw, duration2);
+        }
+        if (nextTime !== timeRef.current) {
+          timeRef.current = nextTime;
+          setCurrentTime(nextTime);
+        }
+        const audio = audioRef.current;
+        if (audio && (current.status === "complete" || current.status === "error")) {
+          if (wrapped) {
+            audio.currentTime = 0;
+            if (audio.paused) void audio.play().catch(Boolean);
+          }
+          const fadeSeconds = Math.max(0, (config.audio?.fadeOutMs ?? 3e3) / 1e3);
+          const remaining = Math.max(0, duration2 - nextTime);
+          const baseVolume = config.audio?.volume ?? 1;
+          audio.volume = fadeSeconds > 0 ? baseVolume * Math.min(1, remaining / fadeSeconds) : baseVolume;
+          if (remaining <= 0 && !looping) audio.pause();
+        }
+        const notify = callbacksRef.current.onSceneChange;
+        if (notify) {
+          if (wrapped) sceneIndexRef.current = -1;
+          const ranges = resolveVideoTimeline(config);
+          const index = ranges.findIndex((range) => nextTime >= range.start && nextTime < range.end);
+          const resolved = index === -1 && nextTime >= duration2 ? ranges.length - 1 : index;
+          if (resolved !== -1 && resolved !== sceneIndexRef.current) {
+            sceneIndexRef.current = resolved;
+            notify(ranges[resolved].scene, resolved);
+          }
+        }
+      }
+      const duration = current.config ? getVideoDuration(current.config) : 0;
+      if (!settled || looping || timeRef.current < duration) frame = requestAnimationFrame(tick);
+      else setIsPlaying(false);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [isPlaying]);
+}
+
+// src/player/video-player.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MINIMUM_GENERATION_INTRO_MS = 3e3;
+function savedVideoState(video) {
+  return {
+    ...createVideoState(),
+    status: "complete",
+    config: video
+  };
+}
 function VideoPlayerRuntime({
   kit,
   stream,
@@ -221,9 +1096,14 @@ function VideoPlayerRuntime({
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
   const [audioUnlocked, setAudioUnlocked] = useState(false);
-  const resolvedStartMuted = playbackMode === "muted-autoplay" ? true : playbackMode ? false : startMuted;
-  const shouldAutoPlay = playbackMode === "manual" ? false : playbackMode === "autoplay-after-interaction" ? audioUnlocked : playbackMode === "muted-autoplay" || playbackMode === "autoplay-with-sound" ? true : autoPlay;
-  const autoStartGeneration = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
+  const { resolvedStartMuted, shouldAutoPlay, autoStartGeneration } = resolvePlaybackPolicy({
+    playbackMode,
+    autoPlay,
+    startMuted,
+    audioUnlocked,
+    reducedMotion,
+    hasStream: Boolean(stream)
+  });
   const [isPlaying, setIsPlaying] = useState(() => shouldAutoPlay && !reducedMotion && !autoStartGeneration);
   const [isMuted, setIsMuted] = useState(resolvedStartMuted);
   const [fullscreenMode, setFullscreenMode] = useState("none");
@@ -276,7 +1156,7 @@ function VideoPlayerRuntime({
     setGenerationIntroComplete(!playbackMode || !stream);
     introStartedAtRef.current = autoStartReplacement ? performance.now() : null;
   }
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handleChange = (event) => {
@@ -291,11 +1171,11 @@ function VideoPlayerRuntime({
     preference.addEventListener?.("change", handleChange);
     return () => preference.removeEventListener?.("change", handleChange);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     import("./control-visibility-NQOWTKOQ.js");
   }, []);
-  useEffect(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
-  useEffect(() => {
+  useEffect2(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
+  useEffect2(() => {
     let cancelled = false;
     let started = false;
     const reset = video ? savedVideoState(video) : createVideoState();
@@ -316,12 +1196,7 @@ function VideoPlayerRuntime({
         for await (const event of stream) {
           if (cancelled) return;
           const current = stateRef.current;
-          const mutableSceneIds = new Set(
-            current.config ? resolveVideoTimeline(current.config).filter((range) => range.end > timeRef.current + 1e-3).map((range) => range.scene.id) : []
-          );
-          const next = applyVideoEvent(current, event, {
-            ...current.config ? { mutableSceneIds } : {}
-          });
+          const next = applyVideoEvent(current, event);
           stateRef.current = next;
           setReplacementPending(false);
           setState(next);
@@ -350,7 +1225,7 @@ function VideoPlayerRuntime({
       }
     };
   }, [stream, video]);
-  useEffect(() => {
+  useEffect2(() => {
     if (width != null) return;
     const container = containerRef.current;
     if (!container) return;
@@ -363,70 +1238,23 @@ function VideoPlayerRuntime({
     observer.observe(container);
     return () => observer.disconnect();
   }, [width]);
-  useEffect(() => {
-    if (!isPlaying) return;
-    let frame = 0;
-    let previous = performance.now();
-    const tick = (now) => {
-      const current = stateRef.current;
-      const config2 = current.config;
-      const delta = Math.max(0, (now - previous) / 1e3);
-      previous = now;
-      const settled = current.status === "complete" || current.status === "error" || current.status === "aborted";
-      const looping = loopRef.current && settled;
-      let wrapped = false;
-      if (config2?.scenes.length) {
-        const duration3 = getVideoDuration(config2);
-        const raw = timeRef.current + delta;
-        let nextTime;
-        if (looping && duration3 > 0 && raw >= duration3) {
-          nextTime = raw % duration3;
-          wrapped = true;
-        } else {
-          nextTime = Math.min(raw, duration3);
-        }
-        if (nextTime !== timeRef.current) {
-          timeRef.current = nextTime;
-          setCurrentTime(nextTime);
-        }
-        const audio = audioRef.current;
-        if (audio && (current.status === "complete" || current.status === "error")) {
-          if (wrapped) {
-            audio.currentTime = 0;
-            if (audio.paused) void audio.play().catch(Boolean);
-          }
-          const fadeSeconds = Math.max(0, (config2.audio?.fadeOutMs ?? 3e3) / 1e3);
-          const remaining = Math.max(0, duration3 - nextTime);
-          const baseVolume = config2.audio?.volume ?? 1;
-          audio.volume = fadeSeconds > 0 ? baseVolume * Math.min(1, remaining / fadeSeconds) : baseVolume;
-          if (remaining <= 0 && !looping) audio.pause();
-        }
-        const notify = callbacksRef.current.onSceneChange;
-        if (notify) {
-          if (wrapped) sceneIndexRef.current = -1;
-          const ranges = resolveVideoTimeline(config2);
-          const index = ranges.findIndex((range) => nextTime >= range.start && nextTime < range.end);
-          const resolved = index === -1 && nextTime >= duration3 ? ranges.length - 1 : index;
-          if (resolved !== -1 && resolved !== sceneIndexRef.current) {
-            sceneIndexRef.current = resolved;
-            notify(ranges[resolved].scene, resolved);
-          }
-        }
-      }
-      const terminal2 = settled;
-      const duration2 = current.config ? getVideoDuration(current.config) : 0;
-      if (!terminal2 || looping || timeRef.current < duration2) frame = requestAnimationFrame(tick);
-      else setIsPlaying(false);
-    };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
-  }, [isPlaying]);
-  useEffect(() => {
+  usePlaybackClock({
+    isPlaying,
+    stateRef,
+    timeRef,
+    audioRef,
+    loopRef,
+    sceneIndexRef,
+    callbacksRef,
+    setCurrentTime,
+    setIsPlaying
+  });
+  useEffect2(() => {
     const audio = audioRef.current;
     if (!audio) return;
     audio.volume = state.config?.audio?.volume ?? 1;
   }, [state.config?.audio?.audioUrl, state.config?.audio?.volume]);
-  useEffect(() => {
+  useEffect2(() => {
     const audio = audioRef.current;
     if (!audio) return;
     if (isPlaying || introPlaying) {
@@ -444,7 +1272,7 @@ function VideoPlayerRuntime({
       audio.pause();
     }
   }, [introPlaying, isPlaying, state.config?.audio?.audioUrl]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!state.config?.scenes.length) {
       const terminalWithoutVideo = state.status === "complete" || state.status === "error" || state.status === "aborted";
       if (terminalWithoutVideo) {
@@ -505,7 +1333,7 @@ function VideoPlayerRuntime({
   const firstSceneRange = config ? resolveVideoTimeline(config)[0] : void 0;
   const hasSuppliedOpening = firstSceneRange?.scene.id === "supplied-opening";
   const showStartPoster = (!generationIntroWaiting || hasSuppliedOpening) && !startRequested && !isPlaying && !ended && currentTime <= 1e-3 && Boolean(config?.scenes.length);
-  const firstSceneHoldProgress = firstSceneRange ? kit.getTemplateMetadata(firstSceneRange.scene.templateId)?.transitionTiming?.holdProgress ?? 0.7 : 0;
+  const firstSceneHoldProgress = firstSceneRange ? kit.getTemplate(firstSceneRange.scene.templateId)?.transitionTiming?.holdProgress ?? 0.7 : 0;
   const posterTime = firstSceneRange ? firstSceneRange.start + Math.max(0, firstSceneRange.end - firstSceneRange.start) * firstSceneHoldProgress : currentTime;
   const startPlayback = () => {
     setGenerationIntroComplete(true);
@@ -565,53 +1393,10 @@ function VideoPlayerRuntime({
     if (!container) return;
     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",
-    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",
-    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: 60,
-    padding: "14px 22px",
-    border: "1px solid rgba(9, 7, 18, 0.08)",
-    borderRadius: 999,
-    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 = {
-    position: "absolute",
-    left: "50%",
-    top: "50%",
-    zIndex: 3,
-    transform: "translate(-50%, -50%)"
-  };
   const pendingReplacement = replacementPending && state.status === "idle";
   const displayedStatus = pendingReplacement ? "streaming" : state.status;
   const generationCoverVisible = generationIntroWaiting && !hasSuppliedOpening || displayedStatus === "streaming" && !config?.scenes.length;
-  const coverBackground = config?.style.brand.background;
-  const coverText = config?.style.brand.colors.foreground ?? "#ffffff";
-  const coverBackgroundCss = coverBackground?.type === "solid" ? coverBackground.color : `linear-gradient(135deg, ${coverBackground?.colors[0] ?? "#8711C1"}, ${coverBackground?.colors[1] ?? "#2167E3"})`;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: containerRef,
@@ -651,45 +1436,18 @@ function VideoPlayerRuntime({
         ...style
       },
       children: [
-        generationCoverVisible ? /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx2(
+          GenerationCover,
           {
-            "data-testid": "video-generation-cover",
-            role: "status",
-            "aria-live": "polite",
-            style: {
-              position: "absolute",
-              inset: 0,
-              display: "grid",
-              placeItems: "center",
-              padding: "12%",
-              textAlign: "center",
-              color: coverText,
-              background: coverBackgroundCss,
-              fontFamily: fontStack(config?.style.brand.font)
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
-                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
-                /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
-                /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
-              ] }),
-              !startRequested && !isPlaying ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": config?.audio && !isMuted ? "Play video with sound" : "Play video response",
-                  onClick: armPlayback,
-                  style: { ...startButtonStyle, ...startButtonPositionStyle },
-                  children: [
-                    /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
-                    config?.audio && !isMuted ? "Play with sound" : "Play video"
-                  ]
-                }
-              ) : null
-            ]
+            visible: generationCoverVisible,
+            config,
+            isMuted,
+            startRequested,
+            isPlaying,
+            onStart: armPlayback
           }
-        ) : config?.scenes.length ? /* @__PURE__ */ jsx(
+        ),
+        !generationCoverVisible && config?.scenes.length ? /* @__PURE__ */ jsx2(
           VideoFrame,
           {
             kit,
@@ -707,24 +1465,16 @@ function VideoPlayerRuntime({
             }
           }
         ) : null,
-        showStartPoster ? /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx2(
+          StartPosterButton,
           {
-            type: "button",
-            "data-testid": "video-start-button",
-            "aria-label": config?.audio && !isMuted ? "Play video with sound" : "Play video response",
-            onClick: startPlayback,
-            style: {
-              ...startButtonStyle,
-              ...startButtonPositionStyle
-            },
-            children: [
-              /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
-              config?.audio && !isMuted ? "Play with sound" : "Play video"
-            ]
+            visible: showStartPoster,
+            config,
+            isMuted,
+            onStart: startPlayback
           }
-        ) : null,
-        config?.audio ? /* @__PURE__ */ jsx(
+        ),
+        config?.audio ? /* @__PURE__ */ jsx2(
           "audio",
           {
             ref: audioRef,
@@ -737,103 +1487,25 @@ function VideoPlayerRuntime({
           },
           config.audio.audioUrl
         ) : null,
-        ended ? /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx2(EndedOverlay, { ended, onReplay: togglePlayback }),
+        /* @__PURE__ */ jsx2(
+          PlayerControls,
           {
-            "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)"
-            }
+            visible: !generationCoverVisible && !showStartPoster && Boolean(config?.scenes.length),
+            displayWidth,
+            ended,
+            isPlaying,
+            isMuted,
+            isFullscreen,
+            hasAudio: Boolean(config?.audio),
+            onTogglePlayback: togglePlayback,
+            onToggleMuted: () => setIsMuted((muted) => {
+              if (muted) setAudioUnlocked(true);
+              return !muted;
+            }),
+            onToggleFullscreen: toggleFullscreen
           }
-        ) : null,
-        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",
-              inset: 0,
-              zIndex: 4,
-              pointerEvents: "none"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "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" })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "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" })
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ) : null
+        )
       ]
     }
   );
@@ -848,11 +1520,11 @@ function VideoPlayer({
 }) {
   const savedVideo = useMemo(() => video ? parseVideo(video) : void 0, [video]);
   const kit = useMemo(
-    () => templates ? overlayTemplateRegistry(BUILTIN_TEMPLATE_KIT, templates) : BUILTIN_TEMPLATE_KIT,
+    () => overlayPlayerTemplateRegistry(BUILTIN_PLAYER_KIT, templates),
     [templates]
   );
   if (!stream && !savedVideo) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     VideoPlayerRuntime,
     {
       ...props,
@@ -886,7 +1558,7 @@ var VideoError = class extends Error {
 };
 
 // src/player/use-video.ts
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/player/stream-video.ts
 var HTTP_ERROR_CODES = /* @__PURE__ */ new Set([
@@ -956,15 +1628,7 @@ function streamVideo(options) {
     resolveResult = resolve;
     rejectResult = reject;
   });
-  const buffered = [];
-  const waiters = /* @__PURE__ */ new Set();
-  let streamDone = false;
-  let streamError;
-  const notify = () => {
-    for (const waiter of waiters) waiter();
-    waiters.clear();
-  };
-  void (async function consume() {
+  const source = (async function* consume() {
     let state = options.resume?.state ?? createVideoState();
     try {
       const fetcher = options.fetcher ?? fetch;
@@ -995,8 +1659,6 @@ function streamVideo(options) {
       for await (const event of decodeVideoSse(response.body)) {
         state = applyVideoEvent(state, event);
         options.onEvent?.(event, state);
-        buffered.push(event);
-        notify();
         if (state.status === "complete" && !settled) {
           settled = true;
           resolveResult(state);
@@ -1020,6 +1682,7 @@ function streamVideo(options) {
             recoverable: false
           }));
         }
+        yield event;
       }
       if (!["complete", "error", "aborted"].includes(state.status)) {
         throw new Error("Video response stream ended without a terminal event");
@@ -1034,26 +1697,12 @@ function streamVideo(options) {
         settled = true;
         rejectResult(error);
       }
-      streamError = error;
+      throw error;
     } finally {
-      streamDone = true;
-      notify();
       options.signal?.removeEventListener("abort", forwardAbort);
     }
   })();
-  const stream = {
-    async *[Symbol.asyncIterator]() {
-      let index = 0;
-      while (true) {
-        while (index < buffered.length) yield buffered[index++];
-        if (streamDone) {
-          if (streamError) throw streamError;
-          return;
-        }
-        await new Promise((resolve) => waiters.add(resolve));
-      }
-    }
-  };
+  const stream = createReplayableStream(source, () => void 0);
   return {
     request,
     stream,
@@ -1076,13 +1725,13 @@ function errorFrom(cause) {
 }
 function useVideo(options = {}) {
   const templates = useMemo2(
-    () => options.templates ? overlayTemplateRegistry(BUILTIN_TEMPLATE_KIT, options.templates) : BUILTIN_TEMPLATE_KIT,
+    () => overlayPlayerTemplateRegistry(BUILTIN_PLAYER_KIT, options.templates),
     [options.templates]
   );
   const [state, setState] = useState2(() => createVideoState());
   const [error, setError] = useState2();
   const [run, setRun] = useState2();
-  const activeRun = useRef2();
+  const activeRun = useRef2(void 0);
   const generation = useRef2(0);
   const mounted = useRef2(true);
   const optionsRef = useRef2(options);
@@ -1124,9 +1773,8 @@ function useVideo(options = {}) {
           if (!currentOptions.templates?.getTemplate(_event.data.scene.templateId)) {
             preloadBuiltinTemplate(_event.data.scene.templateId);
           }
+          warmSceneMedia(_event.data.scene.variables);
         }
-        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);
       }
     });
@@ -1153,7 +1801,7 @@ function useVideo(options = {}) {
     void result.catch(() => void 0);
     return result;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -1169,7 +1817,10 @@ function useVideo(options = {}) {
     status: state.status,
     error,
     warnings: state.warnings,
-    playerProps: { templates, ...run ? { stream: run.stream } : {} }
+    playerProps: {
+      ...options.templates ? { templates: options.templates } : {},
+      ...run ? { stream: run.stream } : {}
+    }
   };
 }
 export {