@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/react.js

@@ -1,51 +1,55 @@
 import {
-  getSceneDuration
+  TitleSceneTemplate
+} from "./chunk-EWWCQFTI.js";
+import "./chunk-4YM2M62S.js";
+import {
+  getSceneDuration,
+  getSceneDurationBounds
 } from "./chunk-ZD2VTUYR.js";
 import {
   MEDIA_RECOVERY_NOTICE,
   decodeVideoSse,
   sanitizeVideoChatMedia,
   withDeadline
-} from "./chunk-KT3M7KDL.js";
+} from "./chunk-HKUI5BTB.js";
 import {
   applyVideoEvent,
   checksumVideo,
   createVideoEventFactory,
   createVideoState
-} from "./chunk-2OKB27TG.js";
+} from "./chunk-RXTN2CW6.js";
 import {
   safePublicDiagnostic
-} from "./chunk-MMUXVA47.js";
+} from "./chunk-7M56IUUX.js";
 import {
   parseVideo
-} from "./chunk-2DOLF4QN.js";
+} from "./chunk-AUPC6MDK.js";
 import {
-  VIDEO_SCHEMA_VERSION
-} from "./chunk-AOWSXU2K.js";
+  VIDEO_SCHEMA_VERSION,
+  validateNarrationGroups
+} from "./chunk-7NZOMTAL.js";
 import {
   getBuiltinTemplateMetadata
-} from "./chunk-4UNKZEAT.js";
+} from "./chunk-LH4BPALA.js";
 import "./chunk-3O7OMMMF.js";
 import {
   assertTemplateTransitionMetadata
 } from "./chunk-2E6T633S.js";
 import {
+  MountedReadinessContext,
   VideoFrame,
-  getDimensions
-} from "./chunk-2USVB3CY.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  fontStack
-} from "./chunk-XWWLKRNU.js";
+  getDimensions,
+  sceneReadinessKey
+} from "./chunk-3ZTEFJIR.js";
+import "./chunk-UDIODEDK.js";
+import "./chunk-TVIU23OM.js";
 import {
   getVideoDuration,
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
 import {
-  resolveVideoBrand
-} from "./chunk-XGRA2MUV.js";
-import "./chunk-WJ6FLKNC.js";
+  markExternalVideoBackdropTemplate
+} from "./chunk-R3XAOMKP.js";
 import "./chunk-73NTSFFI.js";
 
 // src/player/video-player.tsx
@@ -89,582 +93,96 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "media": () => import("./bg-media-L34PDQXJ.js").then((module) => ({ default: module.BgMediaTemplate })),
-  "reaction": () => import("./reaction-SLEGR3BE.js").then((module) => ({ default: module.ReactionTemplate })),
-  "confetti": () => import("./bg-confetti-HITCGLGD.js").then((module) => ({ default: module.BgConfettiTemplate })),
-  "emojiBurst": () => import("./bg-emoji-VU4UZYZN.js").then((module) => ({ default: module.BgEmojiTemplate })),
-  "bigNumber": () => import("./chart-counter-5FFWQNZO.js").then((module) => ({ default: module.ChartCounterTemplate })),
-  "barChart": () => import("./chart-bar-EGPHJATL.js").then((module) => ({ default: module.ChartBarTemplate })),
-  "progressRing": () => import("./chart-progress-ring-JMXQLMLC.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
-  "phoneMockup": () => import("./showcase-phone-Q4HEO4LH.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
-  "webMockup": () => import("./showcase-web-2QZO73FZ.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
-  "codeEditor": () => import("./showcase-code-2HLAVKBM.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
-  "terminal": () => import("./showcase-terminal-DL45LUFG.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
-  "tweet": () => import("./social-tweet-UCDXM25F.js").then((module) => ({ default: module.SocialTweetTemplate })),
-  "notification": () => import("./social-notification-FJ5VHVLK.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-GEFUQSBF.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
-  "reviewStack": () => import("./social-review-stack-KXQCKFRP.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
-  "testimonial": () => import("./social-testimonial-JZ7CHC7S.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
-  "incomingCall": () => import("./incoming-call-54KQ7O5A.js").then((module) => ({ default: module.IncomingCallTemplate })),
-  "brandMessage": () => import("./brand-message-FUJ4STFO.js").then((module) => ({ default: module.BrandMessageTemplate })),
-  "promptInput": () => import("./prompt-input-MHX4O42G.js").then((module) => ({ default: module.PromptInputTemplate })),
-  "beforeAfter": () => import("./infographic-before-after-ROS52GOW.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
-  "tripleStats": () => import("./infographic-stat-row-SYB7AB7H.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
-  "problemSolution": () => import("./infographic-problem-solution-3S6NGO5N.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
-  "cardList": () => import("./infographic-feature-list-E7MGUDAN.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
-  "steps": () => import("./infographic-steps-KCE6JWE2.js").then((module) => ({ default: module.InfographicStepsTemplate })),
-  "ctaLogo": () => import("./cta-logo-YR7LYUR5.js").then((module) => ({ default: module.CtaLogoTemplate })),
-  "ctaMedia": () => import("./cta-media-DQJBKUO2.js").then((module) => ({ default: module.CtaMediaTemplate }))
+  "cinemaMedia": () => import("./cinema-media-YQHSIFDA.js").then((module) => ({ default: module.MediaSceneTemplate })),
+  "chapterTitle": () => import("./chapter-title-YRLIQY3V.js").then((module) => ({ default: module.TitleSceneTemplate })),
+  "focusCards": () => import("./focus-cards-TJ72BT7U.js").then((module) => ({ default: module.CardsSceneTemplate })),
+  "editorialTimeline": () => import("./editorial-timeline-OZX7OS6G.js").then((module) => ({ default: module.TimelineSceneTemplate })),
+  "mobileMessage": () => import("./mobile-message-UZUPIKHD.js").then((module) => ({ default: module.NotificationSceneTemplate })),
+  "comparison": () => import("./comparison-RZMMHZR2.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
+  "quote": () => import("./quote-EW5HQA6H.js").then((module) => ({ default: module.QuoteSceneTemplate })),
+  "keyFigure": () => import("./key-figure-GYENXKH3.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
 };
 
 // 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",
+    "id": "cinemaMedia",
     "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
-    }
+    "usesGlobalTransition": false
   },
   {
-    "id": "emojiBurst",
+    "id": "chapterTitle",
     "defaults": {
-      "texts": "Let's go!"
+      "title": "A different perspective"
     },
-    "usesGlobalTransition": true,
-    "transitionTiming": {
-      "entryReadyProgress": 0.2,
-      "holdProgress": 0.7
-    }
+    "usesGlobalTransition": false
   },
   {
-    "id": "bigNumber",
+    "id": "focusCards",
     "defaults": {
-      "texts": "Our biggest milestone yet.",
-      "value": 1e3,
-      "confetti": false,
-      "label": "Total users",
-      "prefix": "",
-      "unit": "",
-      "mediaUrl": "",
-      "mediaKeyword": "",
-      "mediaType": "auto",
-      "mediaPoster": "",
-      "mediaPosition": "center",
-      "mediaTreatment": "cinematic"
+      "items": [
+        "Listen closely",
+        "Notice the pattern",
+        "Make room for change"
+      ]
     },
-    "usesGlobalTransition": true,
-    "transitionTiming": {
-      "entryReadyProgress": 0.2,
-      "holdProgress": 0.7
-    }
+    "usesGlobalTransition": false
   },
   {
-    "id": "barChart",
+    "id": "editorialTimeline",
     "defaults": {
-      "texts": "Revenue up 300%.",
-      "bars": [
-        {
-          "label": "Q1",
-          "value": 42
-        },
+      "events": [
         {
-          "label": "Q2",
-          "value": 58
+          "label": "Observe"
         },
         {
-          "label": "Q3",
-          "value": 76
+          "label": "Understand"
         },
         {
-          "label": "Q4",
-          "value": 91
+          "label": "Act"
         }
-      ],
-      "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 templates 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",
+    "id": "mobileMessage",
     "defaults": {
-      "message": "We built this for you.",
       "mediaUrl": "",
-      "mediaKeyword": "",
-      "mediaType": "auto",
+      "mediaType": "video",
       "mediaPoster": "",
-      "mediaPosition": "center",
-      "mediaTreatment": "cinematic"
+      "message": "Can we talk?",
+      "app": "Messages"
     },
     "usesGlobalTransition": false
   },
   {
-    "id": "promptInput",
+    "id": "comparison",
     "defaults": {
-      "promptText": "Make a launch video for our app",
-      "mediaUrl": "",
-      "mediaKeyword": "",
-      "mediaType": "auto",
-      "mediaPoster": "",
-      "mediaPosition": "center",
-      "mediaTreatment": "cinematic"
+      "leftText": "More distractions",
+      "rightText": "More room to think"
     },
     "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
-    },
+    "id": "quote",
+    "defaults": {},
     "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"
-    },
+    "id": "keyFigure",
+    "defaults": {},
     "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
-    }
   }
 ];
+var GENERATED_BUILTIN_VIDEO_BACKDROP_IDS = ["cinemaMedia", "mobileMessage"];
 
 // src/visual-system/catalog/builtin-player.ts
-function createPreloadableBuiltinTemplate(loader) {
+function createPreloadableBuiltinTemplate(loader, mediaBackdrop) {
   let loaded;
   let failure;
   let pending;
@@ -687,7 +205,8 @@ function createPreloadableBuiltinTemplate(loader) {
     if (failure) throw failure;
     throw preload();
   };
-  return { component, preload };
+  const template = { component, preload };
+  return mediaBackdrop ? markExternalVideoBackdropTemplate(template) : template;
 }
 function freezeValue(value) {
   if (value && typeof value === "object" && !Object.isFrozen(value)) {
@@ -699,7 +218,7 @@ function freezeValue(value) {
 var preloadableById = new Map(
   GENERATED_BUILTIN_PLAYER_TEMPLATES.map(({ id }) => [
     id,
-    createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id])
+    createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id], GENERATED_BUILTIN_VIDEO_BACKDROP_IDS.includes(id))
   ])
 );
 var builtinPlayerTemplates = Object.freeze(
@@ -716,7 +235,7 @@ function preloadBuiltinTemplate(id) {
 
 // src/player/warm-scene-media.ts
 function warmSceneMedia(variables) {
-  void import("./preload-media-LJXWKTWG.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
+  void import("./preload-media-CFTZIMZL.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
   });
 }
 
@@ -817,8 +336,6 @@ function GenerationCover({
   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",
     {
@@ -832,9 +349,9 @@ function GenerationCover({
         placeItems: "center",
         padding: "12%",
         textAlign: "center",
-        color: config?.style.brand.colors.foreground ?? "#ffffff",
-        background: backgroundCss,
-        fontFamily: fontStack(config?.style.brand.font)
+        color: "#fff",
+        background: "#000",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif'
       },
       children: [
         /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
@@ -1013,6 +530,8 @@ function usePlaybackClock({
   audioRef,
   loopRef,
   sceneIndexRef,
+  visualReadyRef,
+  posterBridgeKeysRef,
   callbacksRef,
   setCurrentTime,
   setIsPlaying
@@ -1020,6 +539,16 @@ function usePlaybackClock({
   useEffect(() => {
     if (!isPlaying) return;
     let stalled = false;
+    let onsetWaitSeconds = 0;
+    let clockWaitSeconds = 0;
+    let lastNarrationTime;
+    const failNarration = (error, state) => {
+      setIsPlaying(false);
+      try {
+        void Promise.resolve(callbacksRef.current.onError?.(error, state)).catch(() => void 0);
+      } catch {
+      }
+    };
     const reportStall = (next) => {
       if (stalled === next) return;
       stalled = next;
@@ -1033,14 +562,46 @@ function usePlaybackClock({
     const tick = (now) => {
       const current = stateRef.current;
       const config = current.config;
-      const delta = Math.max(0, (now - previous) / 1e3);
+      const elapsed = Math.max(0, (now - previous) / 1e3);
+      let narrationReady = true;
+      try {
+        narrationReady = callbacksRef.current.narrationReady?.() !== false;
+      } catch (cause) {
+        failNarration(cause instanceof Error ? cause : new Error("Narration readiness failed"), current);
+        return;
+      }
+      onsetWaitSeconds = narrationReady ? 0 : onsetWaitSeconds + elapsed;
+      if (onsetWaitSeconds >= 8) {
+        failNarration(new Error("Narration did not report audio onset within eight seconds"), current);
+        return;
+      }
+      const delta = narrationReady ? elapsed : 0;
       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;
+        const ranges = resolveVideoTimeline(config);
+        const cued = ranges[sceneIndexRef.current];
+        let narrationTime;
+        try {
+          narrationTime = cued ? callbacksRef.current.narrationTime?.(cued.scene) : void 0;
+        } catch (cause) {
+          failNarration(cause instanceof Error ? cause : new Error("Narration clock failed"), current);
+          return;
+        }
+        if (narrationTime !== void 0 && (!Number.isFinite(narrationTime) || narrationTime < 0)) {
+          failNarration(new Error("Narration clock must return finite nonnegative seconds"), current);
+          return;
+        }
+        clockWaitSeconds = narrationTime !== void 0 && narrationTime === lastNarrationTime && narrationReady && !stalled ? clockWaitSeconds + elapsed : 0;
+        lastNarrationTime = narrationTime;
+        if (clockWaitSeconds >= 8) {
+          failNarration(new Error("Narration audio clock did not advance within eight seconds"), current);
+          return;
+        }
+        const raw = narrationTime !== void 0 && cued ? cued.start - (cued.scene.narrationGroup?.offsetSeconds ?? 0) + narrationTime : timeRef.current + delta;
         let nextTime;
         if (looping && duration2 > 0 && raw >= duration2) {
           nextTime = raw % duration2;
@@ -1048,6 +609,9 @@ function usePlaybackClock({
         } else {
           nextTime = Math.min(raw, duration2);
         }
+        const target = ranges.find((range) => nextTime >= range.start && nextTime < range.end) ?? ranges.at(-1);
+        const waitingForVisual = Boolean(target && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(target.scene) && !posterBridgeKeysRef?.current.has(sceneReadinessKey(target.scene)));
+        if (waitingForVisual && target) nextTime = target.start;
         if (nextTime !== timeRef.current) {
           timeRef.current = nextTime;
           setCurrentTime(nextTime);
@@ -1065,19 +629,20 @@ function usePlaybackClock({
           if (remaining <= 0 && !looping) audio.pause();
         }
         const notify = callbacksRef.current.onSceneChange;
-        if (notify) {
+        if (notify && !waitingForVisual) {
           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;
+          const ranges2 = resolveVideoTimeline(config);
+          const index = ranges2.findIndex((range) => nextTime >= range.start && nextTime < range.end);
+          const resolved = index === -1 && nextTime >= duration2 ? ranges2.length - 1 : index;
           if (resolved !== -1 && resolved !== sceneIndexRef.current) {
             sceneIndexRef.current = resolved;
-            notify(ranges[resolved].scene, resolved);
+            notify(ranges2[resolved].scene, resolved);
           }
         }
       }
       const duration = current.config ? getVideoDuration(current.config) : 0;
-      reportStall(!settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
+      const active = current.config ? resolveVideoTimeline(current.config).find((range) => timeRef.current >= range.start && timeRef.current < range.end) : void 0;
+      reportStall(Boolean(active && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(active.scene) && !posterBridgeKeysRef?.current.has(sceneReadinessKey(active.scene))) || !settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
       if (!settled || looping || timeRef.current < duration) frame = requestAnimationFrame(tick);
       else setIsPlaying(false);
     };
@@ -1120,7 +685,10 @@ function VideoPlayerRuntime({
   onComplete,
   onError,
   onSceneChange,
+  narrationReady,
+  narrationTime,
   onFramePresented,
+  onMediaFramePresented,
   onStallChange,
   onStateChange
 }) {
@@ -1146,6 +714,7 @@ function VideoPlayerRuntime({
   const [state, setState] = useState(() => video ? savedVideoState(video) : createVideoState());
   const [currentTime, setCurrentTime] = useState(0);
   const [activeStream, setActiveStream] = useState(stream);
+  const [activeSavedVideo, setActiveSavedVideo] = useState(video);
   const [replacementPending, setReplacementPending] = useState(false);
   const [startRequested, setStartRequested] = useState(autoStartGeneration);
   const [introPlaying, setIntroPlaying] = useState(autoStartGeneration);
@@ -1156,13 +725,35 @@ function VideoPlayerRuntime({
   const timeRef = useRef(currentTime);
   const audioRef = useRef(null);
   const introStartedAtRef = useRef(autoStartGeneration ? performance.now() : null);
-  const callbacksRef = useRef({ onComplete, onPlaybackEnd, onError, onSceneChange, onFramePresented, onStallChange, onStateChange });
+  const callbacksRef = useRef({ onComplete, onPlaybackEnd, onError, onSceneChange, narrationReady, narrationTime, onFramePresented, onMediaFramePresented, onStallChange, onStateChange });
   const loopRef = useRef(loop);
   const sceneIndexRef = useRef(-1);
+  const mediaFrameReportedRef = useRef(false);
+  const posterBridgeKeysRef = useRef(/* @__PURE__ */ new Set());
+  const visualReadyRef = useRef(void 0);
+  const reportVisualReady = useMemo(() => (key, error, actualVideoFrame = false, posterBridge = false) => {
+    if (posterBridge) {
+      posterBridgeKeysRef.current.add(key);
+      return;
+    }
+    if (error) {
+      setIsPlaying(false);
+      callbacksRef.current.onError?.(error, stateRef.current);
+    } else {
+      visualReadyRef.current = key;
+      if (actualVideoFrame && !mediaFrameReportedRef.current) {
+        mediaFrameReportedRef.current = true;
+        try {
+          void Promise.resolve(callbacksRef.current.onMediaFramePresented?.()).catch(() => void 0);
+        } catch {
+        }
+      }
+    }
+  }, []);
   const playbackEndedRef = useRef(false);
   stateRef.current = state;
   timeRef.current = currentTime;
-  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, onFramePresented, onStallChange, onStateChange };
+  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, narrationReady, narrationTime, onFramePresented, onMediaFramePresented, onStallChange, onStateChange };
   loopRef.current = loop;
   const reportFramePresented = useMemo(() => {
     let reported = false;
@@ -1191,9 +782,13 @@ function VideoPlayerRuntime({
       output.default(audio, context);
     }).catch(() => context.close());
   };
-  if (stream !== activeStream) {
+  if (stream !== activeStream || video !== activeSavedVideo) {
     const autoStartReplacement = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
     setActiveStream(stream);
+    setActiveSavedVideo(video);
+    mediaFrameReportedRef.current = false;
+    posterBridgeKeysRef.current.clear();
+    sceneIndexRef.current = -1;
     setReplacementPending(stream != null);
     setState(video ? savedVideoState(video) : createVideoState());
     setCurrentTime(0);
@@ -1310,6 +905,8 @@ function VideoPlayerRuntime({
     audioRef,
     loopRef,
     sceneIndexRef,
+    visualReadyRef,
+    posterBridgeKeysRef,
     callbacksRef,
     setCurrentTime,
     setIsPlaying
@@ -1522,7 +1119,7 @@ function VideoPlayerRuntime({
             onStart: armPlayback
           }
         ),
-        !generationCoverVisible && config?.scenes.length ? /* @__PURE__ */ jsx2(
+        !generationCoverVisible && config?.scenes.length ? /* @__PURE__ */ jsx2(MountedReadinessContext.Provider, { value: reportVisualReady, children: /* @__PURE__ */ jsx2(
           VideoFrame,
           {
             kit,
@@ -1542,7 +1139,7 @@ function VideoPlayerRuntime({
               transformOrigin: "top left"
             }
           }
-        ) : null,
+        ) }) : null,
         /* @__PURE__ */ jsx2(
           StartPosterButton,
           {
@@ -1748,17 +1345,55 @@ function createSceneTimeline(options) {
   };
 }
 
+// src/player/scene-readiness.ts
+var READY_AHEAD_SECONDS = 8;
+function canStartPreparedSequence(scenes, complete) {
+  let seconds = 0;
+  let count = 0;
+  for (const scene of scenes) {
+    if (!scene) break;
+    count += 1;
+    seconds += scene.timing.fixedDuration ?? 0;
+    if (seconds >= READY_AHEAD_SECONDS) return true;
+  }
+  return complete && count > 0 && count === scenes.length;
+}
+function preparedSceneDuration(scene, spokenSeconds, metadata) {
+  const timing = metadata?.timing;
+  const authored = (timing?.revealSeconds ?? 0) + (timing?.holdSeconds ?? 0) + (timing?.exitSeconds ?? 0);
+  const readable = Math.max(getSceneDurationBounds(scene, metadata).readable, authored);
+  return Number.isFinite(spokenSeconds) && spokenSeconds > 0 ? Math.max(readable, spokenSeconds + 0.8) : Math.max(readable, getSceneDuration(scene, metadata));
+}
+
 // src/player/use-narration.ts
 import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 function useNarration(options) {
   const [speaking, setSpeaking] = useState2(false);
   const optionsRef = useRef2(options);
   optionsRef.current = options;
+  const groupRef = useRef2(void 0);
+  const clockRef = useRef2(void 0);
+  const clockSceneRef = useRef2(void 0);
+  const readyRef = useRef2(true);
+  const getTime = useCallback((scene) => {
+    const group = groupRef.current;
+    if (optionsRef.current.enabled === false || (group ? scene.narrationGroup?.id !== group.id : scene.id !== clockSceneRef.current)) return void 0;
+    if (!optionsRef.current.voice.getCurrentTime) return void 0;
+    const time = currentRef.current ? optionsRef.current.voice.getCurrentTime() : void 0;
+    if (currentRef.current && readyRef.current && time === void 0) return void 0;
+    if (time !== void 0 && Number.isFinite(time)) clockRef.current = Math.min(group?.totalSeconds ?? Infinity, Math.max(group?.offsetSeconds ?? 0, time));
+    return clockRef.current;
+  }, []);
+  const isReady = useCallback(() => optionsRef.current.enabled === false || readyRef.current || clockRef.current !== void 0 && clockRef.current >= (groupRef.current?.offsetSeconds ?? 0) + 0.04, []);
   const currentRef = useRef2(void 0);
   const spokenIndexRef = useRef2(void 0);
   const stop = useCallback(() => {
+    readyRef.current = true;
     currentRef.current?.abort();
     currentRef.current = void 0;
+    groupRef.current = void 0;
+    clockRef.current = void 0;
+    clockSceneRef.current = void 0;
     setSpeaking(false);
   }, []);
   const interrupt = useCallback(() => {
@@ -1770,37 +1405,103 @@ function useNarration(options) {
     const { voice, enabled = true } = optionsRef.current;
     if (!enabled) return;
     if (spokenIndexRef.current === index) return;
+    const group = scene.narrationGroup;
+    if (group && voice.supportsOffsets !== true) {
+      stop();
+      return;
+    }
+    if (group && currentRef.current && groupRef.current?.id === group.id && groupRef.current.text === group.text && spokenIndexRef.current === index - 1) {
+      spokenIndexRef.current = index;
+      return;
+    }
     stop();
     spokenIndexRef.current = index;
-    const line = scene.narration?.trim();
-    if (!line) return;
+    groupRef.current = group;
+    clockRef.current = group?.offsetSeconds ?? 0;
+    clockSceneRef.current = scene.id;
+    const line = group?.text ?? scene.narration?.trim();
+    if (!line) {
+      clockRef.current = void 0;
+      return;
+    }
     const controller = new AbortController();
     currentRef.current = controller;
+    readyRef.current = !group && !voice.getCurrentTime;
     setSpeaking(true);
     void (async () => {
       try {
         let started = false;
         await voice.speak(line, {
           signal: controller.signal,
+          ...group ? { offsetSeconds: group.offsetSeconds } : {},
           onStart: (source) => {
-            if (started || controller.signal.aborted || currentRef.current !== controller || spokenIndexRef.current !== index || optionsRef.current.enabled === false) return;
+            if (started || controller.signal.aborted || currentRef.current !== controller || !group && spokenIndexRef.current !== index || optionsRef.current.enabled === false) return;
             started = true;
+            readyRef.current = true;
             try {
               void Promise.resolve(optionsRef.current.onSpeechStart?.(source)).catch(() => void 0);
             } catch {
             }
           }
         });
+        if (currentRef.current === controller && !controller.signal.aborted) {
+          clockRef.current = group && started ? group.totalSeconds : void 0;
+        }
       } catch {
+        if (currentRef.current === controller) {
+          groupRef.current = void 0;
+          clockRef.current = void 0;
+        }
       } finally {
         if (currentRef.current === controller) {
           currentRef.current = void 0;
+          readyRef.current = true;
           setSpeaking(false);
         }
       }
     })();
   }, [stop]);
-  return { onSceneChange, interrupt, speaking };
+  return { onSceneChange, interrupt, speaking, isReady, getTime };
+}
+
+// src/player/prepare-scene-media.ts
+async function prepareSceneMedia(variables, signal) {
+  signal.throwIfAborted();
+  const url = typeof variables.mediaUrl === "string" ? variables.mediaUrl.trim() : "";
+  if (!url || variables.mediaType === "gradient") return "graphic";
+  const video = variables.mediaType === "video" || /\.(mp4|webm|mov)(?:[?#]|$)/i.test(url);
+  const poster = typeof variables.mediaPoster === "string" ? variables.mediaPoster.trim() : "";
+  if (video && !poster) return "awaiting-video-frame";
+  let posterFailed = false;
+  await new Promise((resolve, reject) => {
+    const image = new Image();
+    let settled = false;
+    const finish = (error) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      signal.removeEventListener("abort", abort);
+      image.onload = null;
+      image.onerror = null;
+      if (error) {
+        image.src = "";
+        reject(error);
+      } else resolve();
+    };
+    const abort = () => finish(signal.reason ?? new DOMException("Cancelled", "AbortError"));
+    const timer = setTimeout(() => finish(new DOMException("Media preparation timed out", "TimeoutError")), 8e3);
+    signal.addEventListener("abort", abort, { once: true });
+    image.onload = () => {
+      void (image.decode ? image.decode() : Promise.resolve()).then(() => finish(), () => finish(new Error("Could not prepare scene image")));
+    };
+    image.onerror = () => finish(new Error("Could not prepare scene image"));
+    image.src = video ? poster : url;
+    if (image.complete && image.naturalWidth > 0) image.onload(new Event("load"));
+  }).catch((error) => {
+    if (!video || signal.aborted) throw error;
+    posterFailed = true;
+  });
+  return video ? posterFailed ? "awaiting-video-frame" : "poster-bridge" : "image";
 }
 
 // src/video-chat/voice.ts
@@ -1820,10 +1521,10 @@ async function measureSeconds(bytes) {
   try {
     sharedContext ??= new AudioContext();
     const decoded = await sharedContext.decodeAudioData(bytes.slice(0));
-    if (decoded.duration > 0) return decoded.duration;
+    if (decoded.duration > 0) return { seconds: decoded.duration, measured: true };
   } catch {
   }
-  return bytes.byteLength * 8 / FALLBACK_BITS_PER_SECOND;
+  return { seconds: bytes.byteLength * 8 / FALLBACK_BITS_PER_SECOND, measured: false };
 }
 function createVideoChatVoice(options = {}) {
   const endpoint = options.endpoint ?? "/api/video-chat";
@@ -1898,7 +1599,7 @@ function createVideoChatVoice(options = {}) {
             createdSrc = URL.createObjectURL(new Blob([bytes], {
               type: response.headers.get("content-type") || "audio/mpeg"
             }));
-            return { source: "generated", src: createdSrc, seconds };
+            return { source: "generated", src: createdSrc, ...seconds };
           }, SPEECH_PREPARATION_TIMEOUT_MS, controller.signal);
         }
       } catch (cause) {
@@ -1944,9 +1645,11 @@ function createVideoChatVoice(options = {}) {
     browserFinish?.();
   };
   return {
+    supportsOffsets: true,
+    getCurrentTime: () => sounding?.currentTime,
     async prepare(text, preparation = {}) {
       const line = await load(text, preparation.signal);
-      return { seconds: line.seconds };
+      return { seconds: line.seconds, ...line.source === "generated" && line.measured === true ? { supportsOffsets: true } : {} };
     },
     pause() {
       held = true;
@@ -1955,7 +1658,7 @@ function createVideoChatVoice(options = {}) {
     },
     resume() {
       held = false;
-      if (sounding && !silent) void sounding.play().catch(() => playbackFailure?.());
+      if (sounding) void sounding.play().catch(() => playbackFailure?.());
       if (!silent) globalThis.speechSynthesis?.resume();
     },
     setMuted(muted) {
@@ -1963,7 +1666,7 @@ function createVideoChatVoice(options = {}) {
       if (sounding) sounding.muted = muted;
       if (muted) stopBrowser();
     },
-    async speak(text, { signal, onStart }) {
+    async speak(text, { signal, onStart, offsetSeconds }) {
       let started = false;
       const notifyStart = (source) => {
         if (started || disposed || signal.aborted || silent || held) return;
@@ -1975,17 +1678,21 @@ function createVideoChatVoice(options = {}) {
       };
       const line = await load(text, signal);
       if (disposed || signal.aborted || silent) return;
+      if (offsetSeconds !== void 0 && (line.source !== "generated" || !line.measured || !Number.isFinite(offsetSeconds) || offsetSeconds < 0 || offsetSeconds >= line.seconds)) throw new Error("Narration group requires measured, seekable audio");
       if (line.source === "browser") {
         const synthesis = globalThis.speechSynthesis;
-        if (!synthesis || typeof SpeechSynthesisUtterance === "undefined") return;
+        if (!synthesis || typeof SpeechSynthesisUtterance === "undefined") throw new Error("Browser voice is unavailable");
         const utterance = new SpeechSynthesisUtterance(text);
         utterance.rate = 1;
+        let unavailable = false;
         await new Promise((resolve) => {
           let finished = false;
+          let onsetRemainingMs = 2e3;
           const finish = () => {
             if (finished) return;
             finished = true;
             clearWatchdog();
+            clearInterval(onsetTimer);
             signal.removeEventListener("abort", stop);
             speechStops.delete(stop);
             utterance.onstart = null;
@@ -1995,38 +1702,54 @@ function createVideoChatVoice(options = {}) {
             resolve();
           };
           const stop = () => {
-            synthesis.cancel();
             finish();
+            synthesis.cancel();
           };
           const clearWatchdog = watchSpeech(estimatedBrowserSeconds(text), stop);
           speechStops.add(stop);
           browserFinish = finish;
+          const fail = () => {
+            unavailable = true;
+            stop();
+          };
+          const onsetTimer = setInterval(() => {
+            if (held || finished) return;
+            onsetRemainingMs -= 250;
+            if (onsetRemainingMs <= 0) fail();
+          }, 250);
           utterance.onstart = () => {
-            if (!finished) notifyStart("browser");
+            if (finished) return;
+            clearInterval(onsetTimer);
+            notifyStart("browser");
           };
           utterance.onend = finish;
-          utterance.onerror = finish;
+          utterance.onerror = fail;
           signal.addEventListener("abort", stop, { once: true });
           try {
             synthesis.speak(utterance);
             if (held) synthesis.pause();
           } catch {
-            finish();
+            fail();
           }
         });
+        if (unavailable) throw new Error("Browser voice is unavailable");
         return;
       }
       let playbackFailed = false;
       try {
         const element = new Audio(line.src);
         element.muted = silent;
+        if (offsetSeconds !== void 0) element.currentTime = offsetSeconds;
         sounding = element;
         await new Promise((resolve) => {
           let finished = false;
+          let onsetTimer;
+          const initialTime = offsetSeconds ?? 0;
           const finish = () => {
             if (finished) return;
             finished = true;
             clearWatchdog();
+            clearTimeout(onsetTimer);
             signal.removeEventListener("abort", stop);
             speechStops.delete(stop);
             element.onplaying = null;
@@ -2049,9 +1772,13 @@ function createVideoChatVoice(options = {}) {
           const clearWatchdog = watchSpeech(Math.max(line.seconds, estimatedBrowserSeconds(text)), fail);
           speechStops.add(stop);
           playbackFailure = fail;
-          element.onplaying = () => {
-            if (!finished) notifyStart("generated");
+          const observeClock = () => {
+            clearTimeout(onsetTimer);
+            if (finished || started) return;
+            if (!held && element.currentTime >= initialTime + 0.04) notifyStart("generated");
+            if (!started) onsetTimer = setTimeout(observeClock, 16);
           };
+          element.onplaying = observeClock;
           element.onended = finish;
           element.onerror = fail;
           signal.addEventListener("abort", stop, { once: true });
@@ -2064,6 +1791,7 @@ function createVideoChatVoice(options = {}) {
       } catch {
         playbackFailed = true;
       }
+      if (playbackFailed && offsetSeconds !== void 0) throw new Error("Grouped narration playback failed");
       if (playbackFailed && !disposed && !signal.aborted && !silent) {
         notifyFallback();
         URL.revokeObjectURL(line.src);
@@ -2324,7 +2052,11 @@ async function responseError(response) {
   });
 }
 function pacedScene(scene, spokenSeconds, templates) {
-  const held = spokenSeconds && spokenSeconds > 0 ? spokenSeconds + 0.8 : getSceneDuration(scene, templates?.getTemplateMetadata(scene.templateId) ?? getBuiltinTemplateMetadata(scene.templateId));
+  const held = preparedSceneDuration(
+    scene,
+    spokenSeconds,
+    templates?.getTemplateMetadata(scene.templateId) ?? getBuiltinTemplateMetadata(scene.templateId)
+  );
   const {
     startTime: _startTime,
     endTime: _endTime,
@@ -2334,21 +2066,6 @@ function pacedScene(scene, spokenSeconds, templates) {
   } = scene.timing ?? {};
   return { ...scene, timing: { ...timing, fixedDuration: held } };
 }
-function prepareVisualScene(scene, mode) {
-  const overMedia = typeof scene.variables.mediaUrl === "string";
-  const filmed = mode === "full" && overMedia;
-  const shown = filmed ? {
-    ...scene,
-    backgroundEffect: "static",
-    variables: {
-      ...scene.variables,
-      texts: "",
-      mediaTreatment: "none",
-      confetti: false
-    }
-  } : scene;
-  return overMedia ? { ...shown, textArchetype: "subtle" } : shown;
-}
 function useVideoChat(options = {}) {
   return useVideoChatSession(options).chat;
 }
@@ -2372,7 +2089,17 @@ function useVideoChatSession(options = {}) {
   const unavailableVoiceLines = useRef3(/* @__PURE__ */ new Set());
   const speechStartRef = useRef3(() => void 0);
   const narration = useNarration({ onSpeechStart: (source) => speechStartRef.current(source), voice: {
-    speak: (text, options2) => unavailableVoiceLines.current.has(text) ? void 0 : voice.speak(text, options2)
+    supportsOffsets: voice.supportsOffsets,
+    ...voice.getCurrentTime ? { getCurrentTime: () => voice.getCurrentTime() } : {},
+    speak: async (text, options2) => {
+      if (unavailableVoiceLines.current.has(text)) return;
+      try {
+        await voice.speak(text, options2);
+      } catch (error) {
+        if (!options2.signal.aborted) voiceWarningRef.current("Voice playback is unavailable. Continuing with subtitles.");
+        throw error;
+      }
+    }
   } });
   const narrationRef = useRef3(narration);
   narrationRef.current = narration;
@@ -2511,9 +2238,7 @@ function useVideoChatSession(options = {}) {
       throw new VideoError("timeoutMs must be positive", { code: "invalid_option" });
     }
     const timeout = setTimeout(() => controller.abort(new DOMException("Video chat timed out", "TimeoutError")), timeoutMs);
-    const requestedMode = currentOptions.mode ?? "templates";
-    const knownModes = stateRef.current.capabilities?.modes;
-    const mode = knownModes && !knownModes.includes(requestedMode) ? "templates" : requestedMode;
+    const mode = "cinematic";
     const orientation = currentOptions.orientation ?? "landscape";
     const id = (currentOptions.createTurnId ?? defaultTurnId)();
     const conversation = conversationFor(stateRef.current.turns);
@@ -2524,7 +2249,7 @@ function useVideoChatSession(options = {}) {
       prompt,
       completed: false,
       orientation,
-      fixedOrientation: mode === "full",
+      fixedOrientation: true,
       suggestions: [],
       ...openingMedia ? { openingMedia } : {}
     };
@@ -2547,11 +2272,23 @@ function useVideoChatSession(options = {}) {
     const warn = (message) => {
       if (isCurrent()) dispatch({ type: "warning", id, message });
     };
-    voiceWarningRef.current = () => warn("Using browser voice for this response.");
+    voiceWarningRef.current = (message = "Using browser voice for this response.") => warn(message);
     const flush = () => {
       if (!isCurrent()) return;
       let available = appended;
-      while (ready[available]) available += 1;
+      while (ready[available]) {
+        const group = ready[available].narrationGroup;
+        if (!group) {
+          available++;
+          continue;
+        }
+        let end = available;
+        while (ready[end]?.narrationGroup?.id === group.id) end++;
+        const last = ready[end - 1].narrationGroup;
+        if (Math.abs(last.offsetSeconds + last.durationSeconds - group.totalSeconds) > 0.02) break;
+        validateNarrationGroups(ready.slice(available, end));
+        available = end;
+      }
       if (available === appended && timeline) {
         if (planDone && !timelineCompleted) {
           timelineCompleted = true;
@@ -2561,18 +2298,18 @@ function useVideoChatSession(options = {}) {
         return;
       }
       if (!timeline) {
-        if (!style || openingActive || heldRef.current || available === appended) return;
+        if (!style || openingActive || heldRef.current || available === appended || !canStartPreparedSequence(ready.slice(0, available), planDone)) return;
         timeline = createSceneTimeline({ style, orientation });
         timelineRef.current = timeline;
         openingController.abort(new DOMException("Opening replaced by response", "AbortError"));
         if (openingRef.current === openingController) openingRef.current = void 0;
         dispatch({ type: "player", id, stream: timeline.stream });
       }
-      while (ready[appended]) timeline.add(ready[appended++]);
+      while (appended < available) timeline.add(ready[appended++]);
       dispatch({
         type: "partial",
         id,
-        video: { schemaVersion: "0.1", orientation, scenes: ready.slice(0, appended), style }
+        video: { schemaVersion: VIDEO_SCHEMA_VERSION, orientation, scenes: ready.slice(0, appended), style }
       });
       if (planDone && !timelineCompleted) {
         timelineCompleted = true;
@@ -2634,7 +2371,6 @@ function useVideoChatSession(options = {}) {
           mode,
           orientation,
           conversation,
-          ...currentOptions.brand ? { brand: currentOptions.brand } : {},
           ...currentOptions.style ? { style: currentOptions.style } : {}
         })
       }, controller.signal);
@@ -2649,7 +2385,7 @@ function useVideoChatSession(options = {}) {
       let terminalError;
       try {
         for await (const event of decodeVideoSse(response.body)) {
-          if (!isCurrent() || currentAttempt !== attempt) return { video: { schemaVersion: "0.1", orientation, scenes: [], style }, lines: [] };
+          if (!isCurrent() || currentAttempt !== attempt) return { video: { schemaVersion: VIDEO_SCHEMA_VERSION, orientation, scenes: [], style }, lines: [] };
           if (event.type === "response.start") style = event.data.style;
           if (event.type === "response.warning" || event.type === "response.error" && !event.data.terminal) {
             warn(event.type === "response.warning" && event.data.warning.message === MEDIA_RECOVERY_NOTICE ? MEDIA_RECOVERY_NOTICE : "Some parts were simplified so the response could continue.");
@@ -2683,10 +2419,12 @@ function useVideoChatSession(options = {}) {
           const position = event.data.position;
           const plannedScene = event.data.scene;
           planned[position] = plannedScene;
-          received[position] = prepareVisualScene(plannedScene, mode);
-          if (!currentOptions.templates?.getTemplate(plannedScene.templateId)) {
-            preloadBuiltinTemplate(plannedScene.templateId);
-          }
+          received[position] = plannedScene;
+          const rendererReady = currentOptions.templates?.getTemplate(plannedScene.templateId) ? Promise.resolve() : Promise.resolve(preloadBuiltinTemplate(plannedScene.templateId));
+          const visualPreparation = Promise.all([rendererReady, prepareSceneMedia(plannedScene.variables, controller.signal)]).then(() => void 0, () => {
+            throw new VideoError("Scene could not prepare its visual", { code: "media_not_ready" });
+          });
+          void visualPreparation.catch(() => void 0);
           warmSceneMedia(plannedScene.variables);
           const narrated = narrating.then(async () => {
             const supplied = plannedScene.narration?.trim();
@@ -2713,18 +2451,25 @@ function useVideoChatSession(options = {}) {
           narrating = narrated.catch(() => "");
           pending.push(narrated.then(async (line) => {
             if (!isCurrent() || currentAttempt !== attempt) return;
-            const visual = prepareVisualScene(plannedScene, mode);
+            const visual = plannedScene;
             const withNarration = line ? { ...visual, narration: line } : visual;
-            const spoken = line ? await prepareSpeech(line, controller.signal).catch((cause) => {
+            const spoken = line ? await prepareSpeech(plannedScene.narrationGroup?.text ?? line, controller.signal).catch((cause) => {
               if (controller.signal.aborted) throw cause;
               warn("Some narration is unavailable; the response will continue.");
               return void 0;
             }) : void 0;
             if (!isCurrent() || currentAttempt !== attempt) return;
-            ready[position] = pacedScene(withNarration, spoken?.seconds, currentOptions.templates);
+            await visualPreparation;
+            const group = plannedScene.narrationGroup;
+            if (group && (spoken?.supportsOffsets !== true || voiceRef.current.supportsOffsets !== true || Math.abs(spoken.seconds - group.totalSeconds) > 0.1)) throw new VideoError("Narration group requires matching measured audio with offset support", { code: "narration_group_invalid" });
+            ready[position] = group ? withNarration : pacedScene(withNarration, spoken?.seconds, currentOptions.templates);
             flush();
-          }).catch(() => {
+          }).catch((cause) => {
             if (!isCurrent() || currentAttempt !== attempt) return;
+            if (cause instanceof VideoError && ["media_not_ready", "narration_group_invalid"].includes(cause.code)) {
+              terminalError = cause;
+              return;
+            }
             ready[position] = { ...received[position], timing: { fixedDuration: 5 } };
             warn("Some parts were simplified so the response could continue.");
             flush();
@@ -2735,6 +2480,8 @@ function useVideoChatSession(options = {}) {
         terminalError = errorFrom(cause);
       }
       await Promise.all(pending);
+      if (terminalError && ["media_not_ready", "narration_group_invalid"].includes(terminalError.code)) throw terminalError;
+      validateNarrationGroups(ready.filter((scene) => Boolean(scene)));
       if (terminalError && ready.some(Boolean) && style) {
         warn("The response was interrupted; completed scenes are still available.");
       } else if (terminalError) throw terminalError;
@@ -2743,7 +2490,7 @@ function useVideoChatSession(options = {}) {
       }
       return {
         video: {
-          schemaVersion: "0.1",
+          schemaVersion: VIDEO_SCHEMA_VERSION,
           orientation,
           scenes: ready.filter((entry) => entry != null),
           style
@@ -2756,7 +2503,7 @@ function useVideoChatSession(options = {}) {
       try {
         response = await untilAborted(runAttempt(attempt), controller.signal);
       } catch (cause) {
-        if (controller.signal.aborted || timeline || spokenHook) throw cause;
+        if (controller.signal.aborted || timeline || spokenHook || cause instanceof VideoError && ["media_not_ready", "narration_group_invalid"].includes(cause.code) || received.some((scene) => scene?.narrationGroup)) throw cause;
         attempt += 1;
         ready = [];
         received = [];
@@ -2792,9 +2539,9 @@ function useVideoChatSession(options = {}) {
         return void 0;
       }
       terminal = true;
-      const recovered = received.flatMap((scene, index) => scene ? [ready[index] ?? { ...scene, timing: { fixedDuration: 5 } }] : []);
+      const recovered = received.some((scene) => scene?.narrationGroup) || cause instanceof VideoError && ["media_not_ready", "narration_group_invalid"].includes(cause.code) ? [] : received.flatMap((scene, index) => scene ? [ready[index] ?? { ...scene, timing: { fixedDuration: 5 } }] : []);
       if (recovered.length > 0) {
-        style ??= { brand: resolveVideoBrand(currentOptions.brand), density: "normal", motion: "normal", defaultBackgroundEffect: "static", defaultTextArchetype: "subtle", defaultTransition: "crossfade" };
+        style ??= { density: "normal", motion: "normal", defaultBackgroundEffect: "static", defaultTextArchetype: "subtle", defaultTransition: "crossfade" };
         openingController.abort(new DOMException("Continuing completed response", "AbortError"));
         if (!timeline) {
           timeline = createSceneTimeline({ style, orientation });
@@ -2803,7 +2550,7 @@ function useVideoChatSession(options = {}) {
         for (const scene of recovered.slice(appended)) timeline.add(scene);
         timeline.complete();
         if (timelineRef.current === timeline) timelineRef.current = void 0;
-        const video = { schemaVersion: "0.1", orientation, style, scenes: recovered };
+        const video = { schemaVersion: VIDEO_SCHEMA_VERSION, orientation, style, scenes: recovered };
         dispatch({ type: "warning", id, message: "The response was interrupted; completed scenes are still available." });
         dispatch({ type: "complete", id, video, suggestions: [] });
         return video;
@@ -2831,9 +2578,18 @@ function useVideoChatSession(options = {}) {
     dispatch({ type: "resume" });
     flushRef.current?.();
   }, []);
+  const prepareSavedGroups = useCallback2(async (video) => {
+    validateNarrationGroups(video.scenes);
+    const groups = new Map(video.scenes.flatMap((scene) => scene.narrationGroup ? [[scene.narrationGroup.id, scene.narrationGroup]] : []));
+    for (const group of groups.values()) {
+      const prepared = await withDeadline((signal) => voiceRef.current.prepare(group.text, { signal }), 3e3);
+      if (voiceRef.current.supportsOffsets !== true || prepared.supportsOffsets !== true || Math.abs(prepared.seconds - group.totalSeconds) > 0.1) throw new VideoError("Saved narration group requires matching measured audio", { code: "narration_group_invalid" });
+    }
+  }, []);
   const replay = useCallback2(() => {
     const turn = stateRef.current.turns.find((entry) => entry.id === stateRef.current.shownTurnId);
     if (!turn?.completed || !turn.video) return;
+    runRef.current += 1;
     endTiming();
     if (inFlightRef.current) {
       runRef.current += 1;
@@ -2847,11 +2603,20 @@ function useVideoChatSession(options = {}) {
     narrationRef.current.interrupt();
     heldRef.current = false;
     voiceRef.current.resume();
-    dispatch({ type: "replay" });
-  }, [endTiming]);
+    if (turn.video.scenes.some((scene) => scene.narrationGroup)) {
+      const selection = ++runRef.current;
+      dispatch({ type: "pause" });
+      void prepareSavedGroups(turn.video).then(() => {
+        if (mountedRef.current && runRef.current === selection) dispatch({ type: "replay" });
+      }).catch((cause) => {
+        if (mountedRef.current && runRef.current === selection) dispatch({ type: "error", id: turn.id, error: errorFrom(cause) });
+      });
+    } else dispatch({ type: "replay" });
+  }, [endTiming, prepareSavedGroups]);
   const selectTurn = useCallback2((id) => {
     const turn = stateRef.current.turns.find((entry) => entry.id === id);
     if (!turn?.completed || !turn.video) return;
+    runRef.current += 1;
     endTiming();
     if (inFlightRef.current) {
       runRef.current += 1;
@@ -2865,8 +2630,16 @@ function useVideoChatSession(options = {}) {
     narrationRef.current.interrupt();
     heldRef.current = false;
     voiceRef.current.resume();
-    dispatch({ type: "select", id });
-  }, [endTiming]);
+    if (turn.video.scenes.some((scene) => scene.narrationGroup)) {
+      const selection = ++runRef.current;
+      dispatch({ type: "pause" });
+      void prepareSavedGroups(turn.video).then(() => {
+        if (mountedRef.current && runRef.current === selection) dispatch({ type: "select", id });
+      }).catch((cause) => {
+        if (mountedRef.current && runRef.current === selection) dispatch({ type: "error", id, error: errorFrom(cause) });
+      });
+    } else dispatch({ type: "select", id });
+  }, [endTiming, prepareSavedGroups]);
   const reset = useCallback2(() => {
     cancel("Session reset");
     heldRef.current = false;
@@ -2882,7 +2655,7 @@ function useVideoChatSession(options = {}) {
   const setMuted = useCallback2((muted) => dispatch({ type: "mute", value: muted }), []);
   const currentTurn = state.turns.at(-1);
   const shownTurn = state.turns.find((turn) => turn.id === state.shownTurnId) ?? currentTurn;
-  const availableModes = state.capabilities?.modes ?? ["templates"];
+  const availableModes = state.capabilities?.modes ?? ["cinematic"];
   const suggestions = shownTurn?.suggestions ?? [];
   const fullTranscript = shownTurn ? transcriptFor(shownTurn) : [];
   const transcript = shownTurn && shownTurn === currentTurn && state.playback?.kind !== "video" ? fullTranscript.slice(0, (shownTurn.opening ? 1 : 0) + state.spokenUpTo + 1) : fullTranscript;
@@ -2893,6 +2666,8 @@ function useVideoChatSession(options = {}) {
     autoPlay: true,
     paused: state.status === "paused",
     controls: false,
+    narrationReady: narration.isReady,
+    narrationTime: narration.getTime,
     orientation: shownTurn?.fixedOrientation ? shownTurn.orientation : "auto",
     onFramePresented: () => {
       const timing = firstFrameRef.current;
@@ -2902,8 +2677,22 @@ function useVideoChatSession(options = {}) {
       observe(() => optionsRef.current.onFirstFrame?.({ turnId: timing.turnId, mode: timing.mode, timeToFirstFrameMs: elapsedMs }));
       reportMetric({ type: "first-frame", turnId: timing.turnId, mode: timing.mode, elapsedMs });
     },
+    onMediaFramePresented: () => {
+      const timing = firstFrameRef.current;
+      if (stateRef.current.playerKey !== playbackKey || state.playback?.kind !== "stream" || !timing?.active || timing.mediaReported) return;
+      timing.mediaReported = true;
+      reportMetric({
+        type: "first-media-frame",
+        turnId: timing.turnId,
+        mode: timing.mode,
+        elapsedMs: Math.max(0, Math.round(monotonicNow() - timing.startedAt))
+      });
+    },
     onStallChange: (stalled) => {
-      if (stateRef.current.playerKey !== playbackKey || state.playback?.kind !== "stream") return;
+      if (stateRef.current.playerKey !== playbackKey) return;
+      if (stalled) voiceRef.current.pause();
+      else if (!heldRef.current) voiceRef.current.resume();
+      if (state.playback?.kind !== "stream") return;
       const timing = firstFrameRef.current;
       if (!timing?.active || !timing.reported) return;
       if (!stalled) finishStall();
@@ -2921,6 +2710,7 @@ function useVideoChatSession(options = {}) {
     },
     onError: (cause) => {
       if (stateRef.current.playerKey !== playbackKey) return;
+      narrationRef.current.interrupt();
       const id = stateRef.current.turns.at(-1)?.id;
       if (id) dispatch({ type: "error", id, error: errorFrom(cause) });
     }
@@ -2956,68 +2746,7 @@ function useVideoChatSession(options = {}) {
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useId, useLayoutEffect, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
-
-// src/video-chat/modes.ts
-var visualModes = [
-  { id: "templates", label: "Templates only", note: "Animated text, diagrams and charts" },
-  { id: "full", label: "Full AI video", note: "AI-generated footage \xB7 billed per clip" }
-];
-var defaultMode = visualModes[0];
-var modeById = (id) => visualModes.find((mode) => mode.id === id) ?? defaultMode;
-
-// src/video-chat/themes.ts
-var GROUND = {
-  font: "Inter",
-  scriptFont: "Caveat",
-  // The brand's indigo into blue. Deeper than it looks like it wants to be:
-  // the renderer holds captions to 4.5:1 against this ground, and the brand's
-  // own bright blue (#00A5FF) measures 2.68:1 under white - so the light end
-  // stays at a blue that clears the bar (5.17:1) and the bright one is spent
-  // on accents instead, where it sits on the dark ground rather than under
-  // white type.
-  background: { colors: ["#1C0277", "#2563eb"] },
-  foreground: "#ffffff",
-  surface: "#1C0277",
-  surfaceElevated: "#2f4fc4",
-  // Not the brand's #7065A5: muted text still has to be read, and that violet
-  // measures 3.66:1 on the dark end of this ground and worse on the light one.
-  // The brand violet earns its place as a surface, not as type.
-  muted: "#d7d3f0"
-};
-function look(primary, secondary) {
-  const { font, scriptFont, background, ...colors } = GROUND;
-  return { font, scriptFont, background, colors: { ...colors, primary, secondary } };
-}
-var themes = [
-  {
-    id: "documentary",
-    label: "Documentary",
-    brand: look("#FF3A71", "#FFB100"),
-    generatedLook: "Natural daylight, documentary realism, shallow depth of field, fine 35mm grain, muted natural palette. Photoreal, no illustration."
-  },
-  {
-    id: "illustrated",
-    label: "Illustrated",
-    brand: look("#00A5FF", "#FF006F"),
-    generatedLook: "Hand-drawn cel animation, rough ink contours, visible paper grain, flat cobalt, crimson and ochre against a deep ground. No photorealism."
-  },
-  {
-    id: "blueprint",
-    label: "Blueprint",
-    brand: look("#00A5FF", "#FFB100"),
-    generatedLook: "Technical blueprint drawing, precise white linework on deep cyanotype blue, faint measurement grid, one warm accent. Schematic, no photorealism."
-  }
-];
-function themeBackground(brand) {
-  const background = brand.background;
-  if (background?.colors && background.colors.length >= 2) {
-    return `linear-gradient(175deg, ${background.colors[0]} 0%, ${background.colors[1]} 100%)`;
-  }
-  return background?.color ?? "#4c2ba8";
-}
-var defaultTheme = themes[0];
-var themeById = (id) => themes.find((theme) => theme.id === id) ?? defaultTheme;
+import { useCallback as useCallback6, useEffect as useEffect9, useId, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef8, useState as useState7 } from "react";
 
 // src/video-chat/icons.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3129,7 +2858,7 @@ function useFocusTrap(active, surface) {
 // src/video-chat/suggestion-cards.tsx
 import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function Frame({ media, poster, playing }) {
+function Frame({ media, poster, playing, onReady, onError, revealWhenReady = false }) {
   const video = useRef4(null);
   const [playingUrl, setPlayingUrl] = useState3(null);
   useEffect6(() => {
@@ -3139,7 +2868,12 @@ function Frame({ media, poster, playing }) {
     else element.pause();
   }, [playing]);
   if (!media) return null;
-  if (media.type === "image") return /* @__PURE__ */ jsx4("img", { className: "frame-media", src: media.url, alt: "" });
+  const ready = () => {
+    setPlayingUrl(media.url);
+    onReady?.();
+  };
+  const appearance = revealWhenReady ? { opacity: playingUrl === media.url ? 1 : 0, transition: "opacity 200ms ease" } : void 0;
+  if (media.type === "image") return /* @__PURE__ */ jsx4("img", { className: "frame-media", src: media.url, alt: "", style: appearance, onLoad: ready, onError });
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx4(
       "video",
@@ -3148,8 +2882,12 @@ function Frame({ media, poster, playing }) {
         className: "frame-media",
         src: media.url,
         poster: poster ? media.posterUrl : void 0,
-        onPlaying: () => setPlayingUrl(media.url),
-        onError: () => setPlayingUrl(null),
+        style: appearance,
+        onPlaying: ready,
+        onError: () => {
+          setPlayingUrl(null);
+          onError?.();
+        },
         autoPlay: playing !== false,
         muted: true,
         loop: true,
@@ -3158,7 +2896,7 @@ function Frame({ media, poster, playing }) {
         "aria-hidden": "true"
       }
     ),
-    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx4("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "" })
+    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx4("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
   ] });
 }
 function SuggestionCards({ suggestions, label, onAsk }) {
@@ -3231,8 +2969,41 @@ function Welcome({ data, onAsk, title }) {
   ] });
 }
 
+// src/video-chat/opening-chapter.tsx
+import { useLayoutEffect, useRef as useRef5, useState as useState4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function OpeningChapter({ title }) {
+  const root = useRef5(null);
+  const [size, setSize] = useState4({ width: 1080, height: 1080 });
+  useLayoutEffect(() => {
+    const element = root.current;
+    if (!element) return;
+    const measure = () => {
+      const { width, height } = element.getBoundingClientRect();
+      if (width > 0 && height > 0) setSize({ width, height });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx6("div", { ref: root, "data-opening-chapter": true, className: "opening-chapter", children: /* @__PURE__ */ jsx6(
+    TitleSceneTemplate,
+    {
+      variables: { title },
+      style: {},
+      width: size.width,
+      height: size.height,
+      progress: 0.3,
+      beatIntensity: 0,
+      safeZone: { top: 0, right: 0, bottom: 0, left: 0 }
+    }
+  ) });
+}
+
 // src/video-chat/use-voice-input.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef6, useState as useState5 } from "react";
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const holder = window;
@@ -3302,14 +3073,14 @@ async function recordAndTranscribe(signal, ready, captured, options) {
   return clip ? transcribeRecording(clip, signal, options) : "";
 }
 function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {}) {
-  const [supported, setSupported] = useState4(false);
-  const [listening, setListening] = useState4(false);
-  const [error, setError] = useState4();
-  const [thinking, setThinking] = useState4(false);
-  const recognitionRef = useRef5(void 0);
-  const useRecorderRef = useRef5(false);
-  const operationRef = useRef5(void 0);
-  const handlerRef = useRef5(onTranscript);
+  const [supported, setSupported] = useState5(false);
+  const [listening, setListening] = useState5(false);
+  const [error, setError] = useState5();
+  const [thinking, setThinking] = useState5(false);
+  const recognitionRef = useRef6(void 0);
+  const useRecorderRef = useRef6(false);
+  const operationRef = useRef6(void 0);
+  const handlerRef = useRef6(onTranscript);
   handlerRef.current = onTranscript;
   useEffect7(() => {
     setSupported(supportsVoiceInput(transcriptionAvailable));
@@ -3436,13 +3207,13 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
 }
 
 // src/video-chat/use-immersive-controls.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
 function useImmersiveControls(playing, pinned, hasCaptions = false) {
-  const [visible, setVisible] = useState5(true);
-  const hovered = useRef6(false);
-  const focused = useRef6(false);
-  const previousCaptions = useRef6(false);
-  const timer = useRef6(null);
+  const [visible, setVisible] = useState6(true);
+  const hovered = useRef7(false);
+  const focused = useRef7(false);
+  const previousCaptions = useRef7(false);
+  const timer = useRef7(null);
   const clearTimer = useCallback5(() => {
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
@@ -3493,16 +3264,16 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
 }
 
 // src/video-chat/logo.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Logo() {
-  return /* @__PURE__ */ jsx6("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
+  return /* @__PURE__ */ jsx7("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
 }
 
 // src/video-chat/video-chat.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
 function useViewportOrientation() {
-  const [portrait, setPortrait] = useState6(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
+  const [portrait, setPortrait] = useState7(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
   useEffect9(() => {
     if (typeof window.matchMedia !== "function") return;
     const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`);
@@ -3520,7 +3291,7 @@ var STEPS = [
   "Still filming\u2026"
 ];
 function useFilmingStep(active, key) {
-  const [step, setStep] = useState6(0);
+  const [step, setStep] = useState7(0);
   useEffect9(() => {
     if (!active) return;
     setStep(0);
@@ -3530,47 +3301,38 @@ function useFilmingStep(active, key) {
   return STEPS[Math.min(step, STEPS.length - 1)];
 }
 function Waveform({ active, listening }) {
-  return /* @__PURE__ */ jsx7("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx7("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
+  return /* @__PURE__ */ jsx8("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx8("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
-function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel, generatedVideoDescription, showRecoveryNotice = false }) {
-  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState6();
-  const [draft, setDraft] = useState6("");
-  const [savedSessions, setSavedSessions] = useState6([]);
-  const [themeId, setThemeId] = useState6(defaultTheme.id);
-  const [modeId, setModeId] = useState6(options.mode ?? defaultMode.id);
-  const [historyOpen, setHistoryOpen] = useState6(false);
-  const [settingsOpen, setSettingsOpen] = useState6(false);
-  const [aboutOpen, setAboutOpen] = useState6(false);
-  const [captionsOn, setCaptionsOn] = useState6(true);
-  const [captionsExpanded, setCaptionsExpanded] = useState6(false);
-  const [alwaysShowControls, setAlwaysShowControls] = useState6(false);
-  const [editing, setEditing] = useState6(false);
-  const resumeAfterInput = useRef7(false);
-  const panelRef = useRef7(null);
-  const composerRef = useRef7(null);
+function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice = false }) {
+  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState7();
+  const [draft, setDraft] = useState7("");
+  const [savedSessions, setSavedSessions] = useState7([]);
+  const [historyOpen, setHistoryOpen] = useState7(false);
+  const [settingsOpen, setSettingsOpen] = useState7(false);
+  const [aboutOpen, setAboutOpen] = useState7(false);
+  const [captionsOn, setCaptionsOn] = useState7(true);
+  const [captionsExpanded, setCaptionsExpanded] = useState7(false);
+  const [alwaysShowControls, setAlwaysShowControls] = useState7(false);
+  const [editing, setEditing] = useState7(false);
+  const resumeAfterInput = useRef8(false);
+  const panelRef = useRef8(null);
+  const composerRef = useRef8(null);
   const viewportOrientation = useViewportOrientation();
-  const theme = themeById(themeId);
   const sessionOrientation = options.orientation ?? viewportOrientation;
-  const { brand: configuredBrand, style: configuredStyle, ...sessionOptions } = options;
-  const presentationBrand = configuredBrand ?? theme.brand;
   const { chat, restoreSession } = useVideoChatSession({
-    ...sessionOptions,
-    mode: modeId,
+    ...options,
     orientation: sessionOrientation,
-    brand: presentationBrand,
-    style: { generatedLook: theme.generatedLook, ...configuredStyle }
+    style: { generatedLook: "Natural light, restrained camera movement, documentary realism, consistent natural color. No embedded text.", ...options.style }
   });
   const instanceId = useId();
   const historyId = `${instanceId}-history`;
   const settingsId = `${instanceId}-settings`;
   const promptId = `${instanceId}-prompt`;
-  const visualsName = `${instanceId}-visuals`;
-  const styleName = `${instanceId}-style`;
-  const inputRef = useRef7(null);
-  const historyRef = useRef7(null);
-  const historyButtonRef = useRef7(null);
-  const settingsRef = useRef7(null);
-  const settingsButtonRef = useRef7(null);
+  const inputRef = useRef8(null);
+  const historyRef = useRef8(null);
+  const historyButtonRef = useRef8(null);
+  const settingsRef = useRef8(null);
+  const settingsButtonRef = useRef8(null);
   const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
     endpoint: options.endpoint,
     headers: options.headers,
@@ -3623,17 +3385,19 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
   const current = chat.currentTurn;
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
-  const ambientPoster = shown?.openingMedia?.type === "image" ? shown.openingMedia.url : shown?.openingMedia?.posterUrl;
+  const [openingAsset, setOpeningAsset] = useState7();
+  const openingAssetKey = `${shown?.id ?? ""}:${shown?.openingMedia?.url ?? ""}`;
+  const openingMediaFailed = openingAsset?.key === openingAssetKey && openingAsset.state === "failed";
+  const openingMediaReady = openingAsset?.key === openingAssetKey && openingAsset.state === "ready";
+  const openingChapter = !showing && Boolean(shown?.opening) && (!shown?.openingMedia || openingMediaFailed || !openingMediaReady);
   const waitingForPicture = chat.turns.length > 0 && !showing && (chat.status === "composing" || chat.status === "playing" || chat.status === "paused");
   const filmingStep = useFilmingStep(waitingForPicture, current?.id);
   const status = chat.turns.length === 0 ? "idle" : chat.status === "composing" ? "drawing" : chat.status === "playing" ? "narrating" : chat.status === "error" || chat.status === "cancelled" ? "ended" : chat.status;
   const shownOrientation = shown?.orientation ?? sessionOrientation;
   const stageOrientation = shown?.fixedOrientation ? shownOrientation : sessionOrientation;
-  const availableModes = visualModes.filter((option) => chat.availableModes.includes(option.id));
-  const selectedMode = modeById(modeId);
   const line = chat.caption ?? "";
   const fullTranscript = shown?.video ? [shown.opening, ...shown.video.scenes.map((scene) => scene.narration)].filter((entry) => Boolean(entry)) : chat.transcript;
-  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx7(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx7(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx7(Replay, {}) } : void 0;
+  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx8(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx8(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx8(Replay, {}) } : void 0;
   const cancelInput = useCallback6(() => {
     listen.stop();
     setDraft("");
@@ -3664,7 +3428,7 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
     onFocusCapture: controls.onFocusCapture,
     onBlurCapture: controls.onBlurCapture
   };
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const composer = composerRef.current;
     if (!composer) return;
     const measure = () => panelRef.current?.style.setProperty("--composer-height", `${composer.getBoundingClientRect().height}px`);
@@ -3687,7 +3451,7 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
       onKeyDownCapture: controls.reveal,
       children: [
         /* @__PURE__ */ jsxs6("header", { className: "chrome", ...controlEvents, children: [
-          /* @__PURE__ */ jsx7("div", { className: "session-brand", children: /* @__PURE__ */ jsx7(Logo, {}) }),
+          /* @__PURE__ */ jsx8("div", { className: "session-brand", children: /* @__PURE__ */ jsx8(Logo, {}) }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
             /* @__PURE__ */ jsxs6(
               "button",
@@ -3704,12 +3468,12 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                   setSettingsOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx7(Sessions, {}),
-                  /* @__PURE__ */ jsx7("span", { className: "nav-label", children: "Sessions" })
+                  /* @__PURE__ */ jsx8(Sessions, {}),
+                  /* @__PURE__ */ jsx8("span", { className: "nav-label", children: "Sessions" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 ref: settingsButtonRef,
@@ -3723,10 +3487,10 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                   setSettingsOpen((open) => !open);
                   setHistoryOpen(false);
                 },
-                children: /* @__PURE__ */ jsx7(Gear, {})
+                children: /* @__PURE__ */ jsx8(Gear, {})
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -3734,27 +3498,37 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                 "aria-label": chat.muted ? "Turn the voice on" : "Turn the voice off",
                 "aria-pressed": chat.muted,
                 onClick: () => chat.setMuted(!chat.muted),
-                children: chat.muted ? /* @__PURE__ */ jsx7(Muted, {}) : /* @__PURE__ */ jsx7(Sound, {})
+                children: chat.muted ? /* @__PURE__ */ jsx8(Muted, {}) : /* @__PURE__ */ jsx8(Sound, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "stage-area", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: themeBackground(presentationBrand) }, children: [
-            showing && /* @__PURE__ */ jsx7("div", { className: "ambient-media", "aria-hidden": "true", children: ambientPoster && /* @__PURE__ */ jsx7("img", { className: "frame-media", src: ambientPoster, alt: "" }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: "#000" }, children: [
             !showing && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-              /* @__PURE__ */ jsx7("div", { className: "ground", "aria-hidden": "true" }),
-              shown?.openingMedia && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-                /* @__PURE__ */ jsx7(Frame, { media: shown.openingMedia, poster: true }),
-                /* @__PURE__ */ jsx7("div", { className: "opening-wash", "aria-hidden": "true" })
+              /* @__PURE__ */ jsx8("div", { className: "ground", "aria-hidden": "true" }),
+              openingChapter && /* @__PURE__ */ jsx8(OpeningChapter, { title: shown.opening }, shown.id),
+              shown?.openingMedia && !openingMediaFailed && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx8(
+                  Frame,
+                  {
+                    media: shown.openingMedia,
+                    poster: true,
+                    revealWhenReady: true,
+                    onReady: () => setOpeningAsset({ key: openingAssetKey, state: "ready" }),
+                    onError: () => setOpeningAsset({ key: openingAssetKey, state: "failed" })
+                  },
+                  openingAssetKey
+                ),
+                openingMediaReady && /* @__PURE__ */ jsx8("div", { className: "opening-wash", "aria-hidden": "true" })
               ] }),
-              chat.turns.length === 0 && /* @__PURE__ */ jsx7(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
-              shown?.prompt && /* @__PURE__ */ jsxs6("div", { className: "asked", children: [
-                /* @__PURE__ */ jsx7("p", { className: "asked-prompt", children: shown.prompt }),
-                waitingForPicture && /* @__PURE__ */ jsx7("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
+              chat.turns.length === 0 && /* @__PURE__ */ jsx8(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+              shown?.prompt && !shown.opening && /* @__PURE__ */ jsxs6("div", { className: "asked", children: [
+                /* @__PURE__ */ jsx8("p", { className: "asked-prompt", children: shown.prompt }),
+                waitingForPicture && /* @__PURE__ */ jsx8("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
               ] })
             ] }),
-            chat.playerProps && /* @__PURE__ */ jsx7("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx7(
+            chat.playerProps && /* @__PURE__ */ jsx8("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx8(
               VideoPlayer,
               {
                 ...chat.playerProps,
@@ -3766,27 +3540,27 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
               chat.playerKey
             ) }),
             showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "ending", children: [
-              /* @__PURE__ */ jsx7("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx8("div", { className: "ending-wash", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxs6("div", { className: "ending-body", children: [
-                /* @__PURE__ */ jsx7("p", { className: "ending-label", children: "Ask next" }),
-                /* @__PURE__ */ jsx7(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
+                /* @__PURE__ */ jsx8("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx8(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
               ] })
             ] })
           ] }),
           historyOpen && /* @__PURE__ */ jsxs6("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "Sessions", children: [
             /* @__PURE__ */ jsxs6("div", { className: "popover-heading", children: [
-              /* @__PURE__ */ jsx7("h2", { children: "Sessions" }),
-              /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx7(Close, {}) })
+              /* @__PURE__ */ jsx8("h2", { children: "Sessions" }),
+              /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx8(Close, {}) })
             ] }),
             /* @__PURE__ */ jsxs6("button", { type: "button", className: "history-row session-new", "aria-label": "New session", onClick: newSession, children: [
-              /* @__PURE__ */ jsx7(Plus, {}),
+              /* @__PURE__ */ jsx8(Plus, {}),
               /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
                 "New session",
-                /* @__PURE__ */ jsx7("small", { children: "Start a fresh conversation" })
+                /* @__PURE__ */ jsx8("small", { children: "Start a fresh conversation" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Current session" }),
-            chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "history-empty", children: "Your questions will appear here." }),
+            /* @__PURE__ */ jsx8("h3", { className: "section-label", children: "Current session" }),
+            chat.turns.length === 0 && /* @__PURE__ */ jsx8("p", { className: "history-empty", children: "Your questions will appear here." }),
             chat.turns.map((turn, index) => /* @__PURE__ */ jsxs6(
               "button",
               {
@@ -3803,17 +3577,17 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                   setHistoryOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsx8("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
                   /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
                     turn.prompt,
-                    /* @__PURE__ */ jsx7("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
+                    /* @__PURE__ */ jsx8("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
                   ] })
                 ]
               },
               turn.id
             )),
             savedSessions.length > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-              /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Earlier sessions" }),
+              /* @__PURE__ */ jsx8("h3", { className: "section-label", children: "Earlier sessions" }),
               savedSessions.map((session) => /* @__PURE__ */ jsxs6("button", { type: "button", className: "history-row", onClick: () => {
                 listen.stop();
                 setDraft("");
@@ -3825,7 +3599,7 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                 setHistoryOpen(false);
                 setCaptionsExpanded(false);
               }, children: [
-                /* @__PURE__ */ jsx7(Replay, {}),
+                /* @__PURE__ */ jsx8(Replay, {}),
                 /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
                   session.turns[0]?.prompt,
                   /* @__PURE__ */ jsxs6("small", { children: [
@@ -3848,72 +3622,55 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
               "aria-modal": "true",
               children: [
                 /* @__PURE__ */ jsxs6("div", { className: "popover-heading", children: [
-                  /* @__PURE__ */ jsx7("h2", { children: "Settings" }),
-                  /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx7(Close, {}) })
+                  /* @__PURE__ */ jsx8("h2", { children: "Settings" }),
+                  /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx8(Close, {}) })
                 ] }),
                 /* @__PURE__ */ jsxs6("fieldset", { className: "playback-options", children: [
-                  /* @__PURE__ */ jsx7("legend", { children: "Watching" }),
+                  /* @__PURE__ */ jsx8("legend", { children: "Watching" }),
                   /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs6("span", { children: [
-                      /* @__PURE__ */ jsx7("strong", { children: "Subtitles" }),
-                      /* @__PURE__ */ jsx7("small", { children: "Read along with the answer" })
+                      /* @__PURE__ */ jsx8("strong", { children: "Subtitles" }),
+                      /* @__PURE__ */ jsx8("small", { children: "Read along with the answer" })
                     ] }),
-                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
+                    /* @__PURE__ */ jsx8("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
                       setCaptionsOn(event.target.checked);
                       setCaptionsExpanded(false);
                     } })
                   ] }),
                   /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs6("span", { children: [
-                      /* @__PURE__ */ jsx7("strong", { children: "Keep controls visible" }),
-                      /* @__PURE__ */ jsx7("small", { children: "Keep the input bar on screen" })
+                      /* @__PURE__ */ jsx8("strong", { children: "Keep controls visible" }),
+                      /* @__PURE__ */ jsx8("small", { children: "Keep the input bar on screen" })
                     ] }),
-                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
+                    /* @__PURE__ */ jsx8("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs6("fieldset", { className: "visual-options", children: [
-                  /* @__PURE__ */ jsx7("legend", { children: "Video creation" }),
-                  /* @__PURE__ */ jsx7("div", { className: "visual-choices", children: availableModes.map((option) => /* @__PURE__ */ jsxs6("label", { className: "choice-row", children: [
-                    /* @__PURE__ */ jsx7("input", { type: "radio", name: visualsName, checked: option.id === selectedMode.id, onChange: () => setModeId(option.id) }),
-                    /* @__PURE__ */ jsxs6("span", { children: [
-                      /* @__PURE__ */ jsx7("strong", { children: option.id === "full" ? generatedVideoLabel ?? option.label : option.label }),
-                      /* @__PURE__ */ jsx7("small", { children: option.id === "full" ? generatedVideoDescription ?? option.note : option.note })
-                    ] })
-                  ] }, option.id)) })
-                ] }),
-                /* @__PURE__ */ jsxs6("fieldset", { className: "style-options", children: [
-                  /* @__PURE__ */ jsx7("legend", { children: "Video style" }),
-                  /* @__PURE__ */ jsx7("div", { className: "style-choices", children: themes.map((option) => /* @__PURE__ */ jsxs6("label", { children: [
-                    /* @__PURE__ */ jsx7("input", { type: "radio", name: styleName, checked: option.id === themeId, onChange: () => setThemeId(option.id) }),
-                    /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7("strong", { children: option.label }) })
-                  ] }, option.id)) })
-                ] }),
-                /* @__PURE__ */ jsx7("p", { className: "settings-note", children: "Creation and style changes apply to your next question." }),
                 /* @__PURE__ */ jsxs6("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
-                  /* @__PURE__ */ jsx7("p", { className: "section-label", children: "Build with VanillaSky" }),
+                  /* @__PURE__ */ jsx8("p", { className: "section-label", children: "Build with VanillaSky" }),
                   /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
                     "Docs",
-                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2197" })
                   ] }),
                   /* @__PURE__ */ jsxs6("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
                     "About",
-                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
+                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
                   ] }),
-                  /* @__PURE__ */ jsx7("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx7("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
+                  /* @__PURE__ */ jsx8("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx8("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
                   /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
                     "GitHub",
-                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2197" })
                   ] })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx7("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
-          /* @__PURE__ */ jsx7("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx7("div", { className: "caption-clip", children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx8("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsx8("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx8("div", { className: "caption-clip", children: /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "line-row",
+              "data-opening-copy": openingChapter && line === shown?.opening && !captionsExpanded,
               "data-expanded": captionsExpanded,
               "data-actions-visible": captionControls.visible,
               onPointerMove: captionControls.onPointerEnter,
@@ -3925,41 +3682,41 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                 captionsOn && line && /* @__PURE__ */ jsxs6("div", { className: "caption-actions", children: [
                   /* @__PURE__ */ jsxs6("button", { type: "button", className: "caption-action", "aria-label": captionsExpanded ? "Collapse subtitles" : "Expand subtitles", "aria-expanded": captionsExpanded, onClick: () => setCaptionsExpanded((open) => !open), children: [
                     captionsExpanded ? "Collapse" : "Expand",
-                    /* @__PURE__ */ jsx7(ChevronUp, {})
+                    /* @__PURE__ */ jsx8(ChevronUp, {})
                   ] }),
-                  /* @__PURE__ */ jsx7("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
+                  /* @__PURE__ */ jsx8("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
                     setCaptionsOn(false);
                     setCaptionsExpanded(false);
-                  }, children: /* @__PURE__ */ jsx7(Close, {}) })
+                  }, children: /* @__PURE__ */ jsx8(Close, {}) })
                 ] }),
-                captionsExpanded ? /* @__PURE__ */ jsx7("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx7("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx7("p", { className: "line", "aria-live": "polite", children: line })
+                captionsExpanded ? /* @__PURE__ */ jsx8("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx8("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx8("p", { className: "line", "aria-live": "polite", children: openingChapter && line === shown?.opening ? "" : line })
               ]
             }
           ) }) }),
           showRecoveryNotice && chat.shownTurn && dismissedNoticeTurn !== chat.shownTurn.id && chat.warnings.includes(MEDIA_RECOVERY_NOTICE) && !chat.error && /* @__PURE__ */ jsxs6("div", { className: "recovery-notice", children: [
-            /* @__PURE__ */ jsx7("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx7(Close, {}) })
+            /* @__PURE__ */ jsx8("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx8(Close, {}) })
           ] }),
           (chat.error || listen.error) && /* @__PURE__ */ jsxs6("p", { className: "error", role: "status", children: [
-            /* @__PURE__ */ jsx7(Warning, {}),
-            /* @__PURE__ */ jsx7("span", { children: chat.error?.message ?? listen.error })
+            /* @__PURE__ */ jsx8(Warning, {}),
+            /* @__PURE__ */ jsx8("span", { children: chat.error?.message ?? listen.error })
           ] }),
           /* @__PURE__ */ jsxs6("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
-            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx7("div", { className: "composer-meta", children: /* @__PURE__ */ jsx7("span", { role: "status", children: listen.listening ? "Listening\u2026 Tap the mic to finish, then review and send." : "Turning your words into a draft\u2026" }) }),
+            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx8("div", { className: "composer-meta", children: /* @__PURE__ */ jsx8("span", { role: "status", children: listen.listening ? "Listening\u2026 Tap the mic to finish, then review and send." : "Turning your words into a draft\u2026" }) }),
             /* @__PURE__ */ jsxs6("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
               event.preventDefault();
               ask(draft);
             }, children: [
-              transport && /* @__PURE__ */ jsx7("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
+              transport && /* @__PURE__ */ jsx8("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
                 listen.stop();
                 setEditing(false);
                 resumeAfterInput.current = false;
                 inputRef.current?.blur();
                 transport.action();
               }, children: transport.icon }),
-              /* @__PURE__ */ jsx7(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
-              /* @__PURE__ */ jsx7("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+              /* @__PURE__ */ jsx8("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+              /* @__PURE__ */ jsx8(
                 "textarea",
                 {
                   id: promptId,
@@ -3987,12 +3744,12 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
                   }
                 }
               ),
-              listen.supported && /* @__PURE__ */ jsx7("button", { type: "button", className: `ghost${listen.listening ? " listening" : ""}`, "aria-label": listen.listening ? "Stop listening" : "Ask by voice", "aria-pressed": listen.listening, disabled: listen.thinking, onClick: () => beginInput(true), children: /* @__PURE__ */ jsx7(Mic, {}) }),
-              /* @__PURE__ */ jsx7("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx7(Send, {}) }),
-              editing && /* @__PURE__ */ jsx7("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx7(Close, {}) })
+              listen.supported && /* @__PURE__ */ jsx8("button", { type: "button", className: `ghost${listen.listening ? " listening" : ""}`, "aria-label": listen.listening ? "Stop listening" : "Ask by voice", "aria-pressed": listen.listening, disabled: listen.thinking, onClick: () => beginInput(true), children: /* @__PURE__ */ jsx8(Mic, {}) }),
+              /* @__PURE__ */ jsx8("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx8(Send, {}) }),
+              editing && /* @__PURE__ */ jsx8("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx8(Close, {}) })
             ] })
           ] }),
-          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
+          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx8("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
         ] }) })
       ]
     }