@vanillaskyai/video 0.10.23 → 0.11.0

package/dist/react.js

@@ -1,28 +1,47 @@
+import {
+  SCENE_DEFINITIONS,
+  getBuiltinSceneDefinition
+} from "./chunk-NM4CXXZY.js";
+import {
+  ExternalVideoBackdropProvider
+} from "./chunk-666HGTVZ.js";
 import {
   TitleSceneTemplate
-} from "./chunk-7AA2JWHZ.js";
-import "./chunk-4YM2M62S.js";
+} from "./chunk-5DOQTIMD.js";
+import {
+  resolveMediaType
+} from "./chunk-K5J7ESRO.js";
 import {
   getSceneDuration,
-  getSceneDurationBounds
-} from "./chunk-ZD2VTUYR.js";
+  getSceneDurationBounds,
+  getVideoDuration,
+  resolveVideoTimeline
+} from "./chunk-KMVRBUL5.js";
 import {
+  CLIP_NARRATION_TAIL_SEC,
   MEDIA_RECOVERY_NOTICE,
   decodeVideoSse,
+  estimateNarrationSeconds,
   orderWelcomeCards,
-  sanitizeVideoChatMedia,
-  welcomeVisitSeed,
+  speechFitsClip,
+  welcomeVisitSeed
+} from "./chunk-V2CP7PVY.js";
+import {
   withDeadline
-} from "./chunk-44WND2VP.js";
+} from "./chunk-4G4JBMCM.js";
 import {
   applyVideoEvent,
   checksumVideo,
   createVideoEventFactory,
   createVideoState
-} from "./chunk-RXTN2CW6.js";
+} from "./chunk-Z3DLSLAJ.js";
+import "./chunk-WZESNEPT.js";
 import {
   safePublicDiagnostic
-} from "./chunk-7M56IUUX.js";
+} from "./chunk-6Z3ID54H.js";
+import {
+  sanitizeVideoChatMedia
+} from "./chunk-ISWQ6T5X.js";
 import {
   parseVideo
 } from "./chunk-AUPC6MDK.js";
@@ -30,179 +49,195 @@ import {
   VIDEO_SCHEMA_VERSION,
   validateNarrationGroups
 } from "./chunk-7NZOMTAL.js";
-import {
-  getBuiltinTemplateMetadata
-} from "./chunk-IIN5M5HW.js";
-import "./chunk-3O7OMMMF.js";
-import {
-  assertTemplateTransitionMetadata
-} from "./chunk-2E6T633S.js";
-import {
-  MountedReadinessContext,
-  VideoFrame,
-  getDimensions,
-  sceneReadinessKey
-} from "./chunk-M4QTEJTK.js";
-import "./chunk-5JBMYQP6.js";
-import "./chunk-224QNWRA.js";
-import {
-  getVideoDuration,
-  resolveVideoTimeline
-} from "./chunk-SPVTJH3F.js";
-import {
-  markExternalVideoBackdropTemplate,
-  supportsExternalVideoBackdrop
-} from "./chunk-R3XAOMKP.js";
-import "./chunk-73NTSFFI.js";
+
+// src/player/mounted-scene-readiness.tsx
+import { createContext, useContext, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var MountedReadinessContext = createContext(void 0);
+var sceneReadinessKey = (scene) => `${scene.id}\0${String(scene.variables.mediaUrl || "")}`;
+function MountedSceneReadiness({
+  scene,
+  playing,
+  fallback = false,
+  onFailure,
+  onReady,
+  observeIncoming = false,
+  timeoutMs = 8e3,
+  preparedProof
+}) {
+  const marker = useRef(null);
+  const report = useContext(MountedReadinessContext);
+  const key = sceneReadinessKey(scene);
+  const onFailureRef = useRef(onFailure);
+  onFailureRef.current = onFailure;
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  useEffect(() => {
+    if (!report && !onReadyRef.current || !playing) return;
+    let stopped = false;
+    let frame = 0;
+    let callback;
+    let observed;
+    let presented;
+    let previousMediaTime;
+    let forwardFrames = 0;
+    let motionRevision = 0;
+    const root = marker.current?.closest("[data-video-frame]");
+    const start = performance.now();
+    const finish = (error, actualVideoFrame = false) => {
+      if (stopped) return;
+      stopped = true;
+      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
+      if (error && onFailureRef.current) onFailureRef.current();
+      else if (onReadyRef.current && !error) {
+        const video = presented;
+        const mediaTime = video?.currentTime ?? 0;
+        const confirmedAt = performance.now();
+        const source = video?.currentSrc;
+        const revision = motionRevision;
+        let consumed = false;
+        onReadyRef.current(actualVideoFrame && video ? { consume: (candidate) => {
+          const valid = !consumed && candidate === video && video.isConnected && motionRevision === revision && !video.paused && !video.seeking && video.currentSrc === source && video.currentSrc === video.src && performance.now() - confirmedAt <= 200 && video.currentTime >= mediaTime && video.currentTime - mediaTime <= 0.2;
+          consumed = true;
+          return valid;
+        } } : void 0);
+      } else report?.(key, error, actualVideoFrame);
+    };
+    const check = () => {
+      if (stopped) return;
+      if (fallback && root?.querySelector("[data-scene-fallback]") && !root.querySelector("[data-template-loading]") && document.fonts?.status !== "loading") {
+        finish();
+        return;
+      }
+      const layer = observeIncoming ? [...root?.querySelectorAll("[data-layer-scene-id]") ?? []].find((node) => node.getAttribute("data-layer-scene-id") === scene.id) : root?.querySelector('[data-scene-layer="active"]');
+      const loading = layer?.querySelector("[data-template-loading]");
+      const mediaUrl = String(scene.variables.mediaUrl || "");
+      const isVideo = scene.variables.mediaType === "video" || /\.(mp4|webm|mov)(?:[?#]|$)/i.test(mediaUrl);
+      if (root && layer && !loading && document.fonts?.status !== "loading") {
+        if (!mediaUrl || scene.variables.mediaType === "gradient") {
+          finish();
+          return;
+        }
+        if (isVideo) {
+          const video = layer.querySelector("video");
+          if (video && video.getAttribute("src") === mediaUrl && video.currentSrc === video.src && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            if (preparedProof?.consume(video)) {
+              finish(void 0, true);
+              return;
+            }
+            if (observed !== video) {
+              previousMediaTime = void 0;
+              forwardFrames = 0;
+            }
+            if (presented === video && (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA || forwardFrames >= 2)) {
+              finish(void 0, true);
+              return;
+            }
+            observed = video;
+            if (video.requestVideoFrameCallback) {
+              callback = video.requestVideoFrameCallback((_now, metadata) => {
+                callback = void 0;
+                if (stopped) return;
+                const sameSource = video.isConnected && video.getAttribute("src") === mediaUrl && video.currentSrc === video.src;
+                const mediaTime = metadata.mediaTime;
+                if (!sameSource || video.paused || video.seeking || !Number.isFinite(mediaTime) || previousMediaTime !== void 0 && mediaTime <= previousMediaTime + 1e-3) forwardFrames = 0;
+                else if (previousMediaTime !== void 0 && mediaTime > previousMediaTime + 1e-3) forwardFrames++;
+                previousMediaTime = sameSource && !video.paused && !video.seeking ? mediaTime : void 0;
+                if (sameSource) presented = video;
+                check();
+              });
+              return;
+            }
+            if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+              finish(void 0, true);
+              return;
+            }
+          }
+        } else {
+          const image = [...layer.querySelectorAll("img") ?? []].find((element) => element.getAttribute("src") === mediaUrl);
+          if (image?.complete && image.naturalWidth > 0) {
+            finish();
+            return;
+          }
+        }
+      }
+      if (timeoutMs !== null && performance.now() - start >= timeoutMs) {
+        finish(new Error("Scene media did not become ready"));
+        return;
+      }
+      frame = requestAnimationFrame(check);
+    };
+    const onPresented = (event) => {
+      const video = event.target;
+      if (!(video instanceof HTMLVideoElement) || stopped || video.getAttribute("src") !== String(scene.variables.mediaUrl || "") || video.currentSrc !== video.src) return;
+      presented = video;
+      cancelAnimationFrame(frame);
+      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
+      callback = void 0;
+      check();
+    };
+    const resetMotion = (event) => {
+      if (event.target === observed || event.target === presented) {
+        motionRevision++;
+        previousMediaTime = void 0;
+        forwardFrames = 0;
+      }
+    };
+    for (const type of ["pause", "waiting", "seeking"]) root?.addEventListener(type, resetMotion, true);
+    root?.addEventListener("vanillasky:video-frame-presented", onPresented);
+    check();
+    const timeout = timeoutMs === null ? void 0 : setTimeout(() => finish(new Error("Scene media did not become ready")), timeoutMs);
+    return () => {
+      root?.removeEventListener("vanillasky:video-frame-presented", onPresented);
+      for (const type of ["pause", "waiting", "seeking"]) root?.removeEventListener(type, resetMotion, true);
+      stopped = true;
+      clearTimeout(timeout);
+      cancelAnimationFrame(frame);
+      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
+    };
+  }, [key, report, scene, playing, fallback, observeIncoming, timeoutMs, preparedProof]);
+  return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
+}
 
 // src/player/video-player.tsx
 import {
-  useEffect as useEffect2,
+  useEffect as useEffect5,
   useMemo,
-  useRef,
-  useState
+  useRef as useRef4,
+  useState as useState2
 } from "react";
 
-// src/visual-system/catalog/player-kit.ts
-function createPlayerTemplateRegistry(templates) {
-  const byId = /* @__PURE__ */ new Map();
-  for (const template of templates) {
-    assertTemplateTransitionMetadata(template);
-    if (!template.defaults && !template.schema) {
-      throw new Error(`${template.id} requires defaults or a schema`);
-    }
-    if (byId.has(template.id)) throw new Error(`Duplicate template id: ${template.id}`);
-    byId.set(template.id, template);
-  }
-  const frozenTemplates = Object.freeze([...templates]);
-  return Object.freeze({
-    templates: frozenTemplates,
-    capabilities: { templates: frozenTemplates.map(({ id }) => id) },
-    getTemplate: (id) => byId.get(id)
-  });
+// src/visual-system/layout.ts
+function getDimensions(orientation = "portrait") {
+  return orientation === "landscape" ? { width: 1920, height: 1080, aspectRatio: "16 / 9" } : { width: 1080, height: 1920, aspectRatio: "9 / 16" };
 }
-function overlayPlayerTemplateRegistry(defaults, customer) {
-  if (!customer) return defaults;
-  const customerTemplates = new Map(customer.templates.map((template) => [template.id, template]));
-  const defaultIds = new Set(defaults.templates.map(({ id }) => id));
-  return createPlayerTemplateRegistry([
-    ...defaults.templates.map((template) => customerTemplates.get(template.id) ?? template),
-    ...customer.templates.filter(({ id }) => !defaultIds.has(id))
-  ]);
-}
-
-// src/visual-system/catalog/builtin-player.ts
-import { createElement } from "react";
 
-// src/visual-system/catalog/builtin-loaders.generated.ts
-var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "cinemaMedia": () => import("./cinema-media-HYCDG65Z.js").then((module) => ({ default: module.MediaSceneTemplate })),
-  "chapterTitle": () => import("./chapter-title-2JVDU62E.js").then((module) => ({ default: module.TitleSceneTemplate })),
-  "editorialTimeline": () => import("./editorial-timeline-VUQC6KPA.js").then((module) => ({ default: module.TimelineSceneTemplate })),
-  "mobileMessage": () => import("./mobile-message-FIHAO6XC.js").then((module) => ({ default: module.NotificationSceneTemplate })),
-  "comparison": () => import("./comparison-XXAP4S4J.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
-  "quote": () => import("./quote-GRPIYKQJ.js").then((module) => ({ default: module.QuoteSceneTemplate })),
-  "keyFigure": () => import("./key-figure-4TJK7HLT.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
-};
-
-// src/visual-system/catalog/builtin-player.generated.ts
-var GENERATED_BUILTIN_PLAYER_TEMPLATES = [
-  {
-    "id": "cinemaMedia",
-    "defaults": {
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": ""
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "chapterTitle",
-    "defaults": {
-      "title": "A different perspective"
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "editorialTimeline",
-    "defaults": {
-      "events": [
-        {
-          "label": "Observe"
-        },
-        {
-          "label": "Understand"
-        },
-        {
-          "label": "Act"
-        }
-      ],
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": ""
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "mobileMessage",
-    "defaults": {
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": "",
-      "message": "Can we talk?",
-      "app": "Messages"
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "comparison",
-    "defaults": {
-      "leftText": "More distractions",
-      "rightText": "More room to think",
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": ""
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "quote",
-    "defaults": {
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": ""
-    },
-    "usesGlobalTransition": false
-  },
-  {
-    "id": "keyFigure",
-    "defaults": {
-      "mediaUrl": "",
-      "mediaType": "video",
-      "mediaPoster": ""
-    },
-    "usesGlobalTransition": false
-  }
-];
-var GENERATED_BUILTIN_VIDEO_BACKDROP_IDS = ["cinemaMedia", "editorialTimeline", "mobileMessage", "comparison", "quote", "keyFigure"];
+// src/player/video-frame.tsx
+import {
+  createElement as createElement2,
+  Component,
+  Suspense,
+  useState,
+  useRef as useRef2,
+  useCallback,
+  useEffect as useEffect2
+} from "react";
 
 // src/visual-system/catalog/builtin-player.ts
-function createPreloadableBuiltinTemplate(loader, mediaBackdrop) {
+import { createElement } from "react";
+function createRenderer(defaults, loader) {
   let loaded;
   let failure;
   let pending;
   const preload = () => {
     if (loaded) return Promise.resolve();
     if (failure) return Promise.reject(failure);
-    pending ??= loader().then(
-      (module) => {
-        loaded = module;
-      },
-      (cause) => {
-        failure = cause;
-        throw cause;
-      }
-    );
+    pending ??= loader().then((module) => {
+      loaded = module;
+    }, (cause) => {
+      failure = cause;
+      throw cause;
+    });
     return pending;
   };
   const component = (props) => {
@@ -210,40 +245,513 @@ function createPreloadableBuiltinTemplate(loader, mediaBackdrop) {
     if (failure) throw failure;
     throw preload();
   };
-  const template = { component, preload };
-  return mediaBackdrop ? markExternalVideoBackdropTemplate(template) : template;
+  return Object.freeze({ component, defaults, preload });
 }
-function freezeValue(value) {
-  if (value && typeof value === "object" && !Object.isFrozen(value)) {
-    for (const nested of Object.values(value)) freezeValue(nested);
-    Object.freeze(value);
-  }
-  return value;
+var loaders = {
+  cinemaMedia: () => import("./cinema-media-YZ2UANJG.js").then((module) => ({ default: module.MediaSceneTemplate })),
+  chapterTitle: () => import("./chapter-title-2RCXX7SN.js").then((module) => ({ default: module.TitleSceneTemplate }))
+};
+var renderers = new Map(SCENE_DEFINITIONS.map((scene) => [
+  scene.id,
+  createRenderer(scene.defaults, loaders[scene.id])
+]));
+function getBuiltinSceneRenderer(id) {
+  return renderers.get(id);
 }
-var preloadableById = new Map(
-  GENERATED_BUILTIN_PLAYER_TEMPLATES.map(({ id }) => [
-    id,
-    createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id], GENERATED_BUILTIN_VIDEO_BACKDROP_IDS.includes(id))
-  ])
-);
-var builtinPlayerTemplates = Object.freeze(
-  GENERATED_BUILTIN_PLAYER_TEMPLATES.map((template) => Object.freeze({
-    ...template,
-    defaults: freezeValue({ ...template.defaults }),
-    component: preloadableById.get(template.id).component
-  }))
-);
-var BUILTIN_PLAYER_KIT = createPlayerTemplateRegistry(builtinPlayerTemplates);
 function preloadBuiltinTemplate(id) {
-  return preloadableById.get(id)?.preload();
+  return getBuiltinSceneRenderer(id)?.preload();
+}
+
+// src/player/video-frame.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PresentedScene({ notify }) {
+  useEffect2(() => {
+    if (!notify) return;
+    const frame = requestAnimationFrame(() => {
+      try {
+        void Promise.resolve(notify()).catch(() => void 0);
+      } catch {
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [notify]);
+  return null;
+}
+function SafeScene({ scene, onFramePresented }) {
+  const copy = scene.narration?.trim() || Object.values(scene.variables).filter((value) => typeof value === "string" && !/^https?:/i.test(value)).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-scene-fallback": "true",
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "grid",
+        placeContent: "center",
+        boxSizing: "border-box",
+        padding: "8%",
+        background: "#090712",
+        color: "#fff",
+        font: "500 clamp(20px, 4vw, 64px)/1.3 system-ui",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(MountedSceneReadiness, { scene, playing: true, fallback: true }),
+        /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
+        /* @__PURE__ */ jsx2("p", { children: copy.slice(0, 600) || "Your response continues." }),
+        /* @__PURE__ */ jsx2("small", { style: { fontSize: "0.3em" }, role: "status", children: "This scene uses a simpler layout." })
+      ]
+    }
+  );
+}
+var SceneBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? /* @__PURE__ */ jsx2(SafeScene, { scene: this.props.scene, onFramePresented: this.props.onFramePresented }) : this.props.children;
+  }
+};
+var CONTIGUITY_ULP_FACTOR = 4;
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function rangesAreContiguous(left, right) {
+  const scale = Math.max(1, Math.abs(left.end), Math.abs(right.start));
+  const ulpTolerance = Number.EPSILON * scale * CONTIGUITY_ULP_FACTOR;
+  return Math.abs(left.end - right.start) <= ulpTolerance;
+}
+function sceneHasBackdrop(range) {
+  return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
+}
+function sceneHasVideoBackdrop(range) {
+  const mediaUrl = String(range.scene.variables.mediaUrl || "").trim();
+  return mediaUrl !== "" && resolveMediaType(
+    String(range.scene.variables.mediaType || "auto"),
+    mediaUrl
+  ) === "video";
+}
+function SceneLayer({
+  onFramePresented,
+  onMediaError,
+  range,
+  progress,
+  motionProgress,
+  width,
+  height,
+  playing,
+  preparingNarration,
+  mediaAudioMuted,
+  mediaAudioVolume,
+  layer,
+  opacity,
+  interactive,
+  zIndex,
+  externalVideoBackdrop
+}) {
+  const mediaFailed = externalVideoBackdrop === "fallback" || range.scene.templateId === "cinemaMedia" && !String(range.scene.variables.mediaUrl || "").trim();
+  const recoveryTitle = mediaFailed && range.scene.templateId === "cinemaMedia" ? typeof range.scene.variables.fallbackText === "string" && range.scene.variables.fallbackText.trim() || "Your response continues." : void 0;
+  const template = getBuiltinSceneRenderer(recoveryTitle ? "chapterTitle" : range.scene.templateId);
+  const duration = range.end - range.start;
+  return /* @__PURE__ */ jsx2(
+    ExternalVideoBackdropProvider,
+    {
+      mode: externalVideoBackdrop,
+      audioMuted: mediaAudioMuted || !playing,
+      audioVolume: mediaAudioVolume,
+      preparingNarration,
+      onMediaError,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-scene-layer": layer,
+          "data-scene-fallback": mediaFailed ? "true" : void 0,
+          "data-layer-scene-id": range.scene.id,
+          "data-layer-template-id": range.scene.templateId,
+          "aria-hidden": interactive ? void 0 : true,
+          ...interactive ? {} : { inert: "inert" },
+          style: {
+            position: "absolute",
+            inset: 0,
+            opacity,
+            zIndex,
+            pointerEvents: interactive ? "auto" : "none"
+          },
+          children: [
+            range.scene.templateId === "cinemaMedia" && !recoveryTitle && (mediaFailed || !String(range.scene.variables.mediaUrl || "").trim()) && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                role: "status",
+                "data-media-unavailable": "true",
+                style: { position: "absolute", inset: 0, zIndex: 2, display: "grid", placeContent: "center", color: "#bbb", font: "14px system-ui", background: "#000" },
+                children: "Visual unavailable"
+              }
+            ),
+            template ? /* @__PURE__ */ jsx2(SceneBoundary, { scene: range.scene, onFramePresented, children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                "data-template-loading": range.scene.templateId,
+                style: { position: "absolute", inset: 0 }
+              }
+            ), children: [
+              /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
+              createElement2(template.component, {
+                variables: {
+                  ...template.defaults,
+                  ...range.scene.variables,
+                  ...mediaFailed ? { mediaUrl: "", mediaPoster: "", mediaType: "gradient" } : {},
+                  ...recoveryTitle ? { title: recoveryTitle } : {}
+                },
+                progress,
+                motionProgress,
+                width,
+                height,
+                sceneDuration: duration,
+                isPlaying: playing
+              })
+            ] }) }, range.scene.id) : /* @__PURE__ */ jsx2(SafeScene, { scene: range.scene, onFramePresented })
+          ]
+        }
+      )
+    }
+  );
+}
+function VideoFrame({
+  onFramePresented,
+  config,
+  time,
+  width,
+  height,
+  playing = false,
+  preparingNarration = false,
+  mediaAudioMuted = true,
+  mediaAudioVolume = 1,
+  className,
+  style
+}) {
+  const recoveryRoot = useRef2(null);
+  const displayedKey = useRef2(void 0);
+  const displayedWasPlaying = useRef2(false);
+  const handoffProof = useRef2(void 0);
+  const confirmedHandoff = useRef2(void 0);
+  const [preparedMedia, setPreparedMedia] = useState(() => /* @__PURE__ */ new Set());
+  const markPrepared = useCallback((key) => setPreparedMedia((previous2) => /* @__PURE__ */ new Set([...previous2, key])), []);
+  const reportedFailures = useRef2(/* @__PURE__ */ new Set());
+  const [failedMedia, setFailedMedia] = useState(() => /* @__PURE__ */ new Set());
+  const markMediaFailed = useCallback((key, reason = "playback-error") => {
+    if (!key || !config.scenes.some((scene) => sceneReadinessKey(scene) === key)) return;
+    if (!reportedFailures.current.has(key)) {
+      reportedFailures.current.add(key);
+      recoveryRoot.current?.dispatchEvent(new CustomEvent("vanillasky:media-recovery", { bubbles: true, detail: { reason: ["decode-error", "frame-readiness-timeout", "stalled-media", "playback-error", "duration-mismatch"].includes(reason) ? reason : "playback-error" } }));
+    }
+    setFailedMedia((previous2) => previous2.has(key) ? previous2 : /* @__PURE__ */ new Set([...previous2, key]));
+  }, [config.scenes]);
+  useEffect2(() => {
+    const currentKeys = new Set(config.scenes.map(sceneReadinessKey));
+    setPreparedMedia((previous2) => {
+      const retained = new Set([...previous2].filter((key) => currentKeys.has(key)));
+      return retained.size === previous2.size ? previous2 : retained;
+    });
+    for (const key of reportedFailures.current) if (!currentKeys.has(key)) reportedFailures.current.delete(key);
+    setFailedMedia((previous2) => {
+      const retained = new Set([...previous2].filter((key) => currentKeys.has(key)));
+      return retained.size === previous2.size ? previous2 : retained;
+    });
+  }, [config.scenes]);
+  const timeline = resolveVideoTimeline(config);
+  const lastRange = timeline.at(-1);
+  const foundIndex = timeline.findIndex((range) => time >= range.start && time < range.end);
+  const afterEnd = lastRange && time >= lastRange.end;
+  const targetIndex = foundIndex >= 0 ? foundIndex : afterEnd ? timeline.length - 1 : -1;
+  const target = timeline[targetIndex];
+  const targetKey = target ? sceneReadinessKey(target.scene) : void 0;
+  if (confirmedHandoff.current !== targetKey || !(playing || preparingNarration)) {
+    confirmedHandoff.current = void 0;
+    handoffProof.current = void 0;
+  }
+  const previousIndex = timeline.findIndex((range) => sceneReadinessKey(range.scene) === displayedKey.current);
+  const previous = timeline[previousIndex];
+  const canPrepare = (range) => Boolean(range && (mediaAudioMuted || !sceneHasVideoBackdrop(range)) && sceneHasBackdrop(range) && range.scene.templateId === "cinemaMedia");
+  const canRetain = (range) => canPrepare(range) || range?.scene.templateId === "chapterTitle";
+  const hasPlayableMedia = (range) => {
+    if (!range || !preparedMedia.has(sceneReadinessKey(range.scene))) return false;
+    const layer = [...recoveryRoot.current?.querySelectorAll("[data-layer-scene-id]") ?? []].find((node) => node.getAttribute("data-layer-scene-id") === range.scene.id);
+    if (!sceneHasVideoBackdrop(range)) {
+      const image = [...layer?.querySelectorAll("img") ?? []].find((element) => element.getAttribute("src") === range.scene.variables.mediaUrl);
+      return Boolean(image && image.getAttribute("src") === range.scene.variables.mediaUrl && image.complete && image.naturalWidth > 0);
+    }
+    const video = layer?.querySelector("video");
+    return Boolean(video && video.getAttribute("src") === range.scene.variables.mediaUrl && video.currentSrc === video.src && video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);
+  };
+  const handoffPending = Boolean(displayedWasPlaying.current && target && previous && targetIndex === previousIndex + 1 && time <= target.start + 1e-3 && rangesAreContiguous(previous, target) && canRetain(previous) && canPrepare(target) && !failedMedia.has(sceneReadinessKey(target.scene)) && !hasPlayableMedia(target) && confirmedHandoff.current !== targetKey);
+  const activeIndex = handoffPending ? previousIndex : targetIndex;
+  const active = timeline[activeIndex];
+  const displayKey = active ? sceneReadinessKey(active.scene) : void 0;
+  displayedWasPlaying.current = displayedKey.current === displayKey && displayedWasPlaying.current || playing || preparingNarration;
+  displayedKey.current = displayKey;
+  if (!active) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-video-frame": timeline.length === 0 ? "empty" : "gap",
+        className,
+        style: { width, height, background: "#000", ...style }
+      }
+    );
+  }
+  if (!getBuiltinSceneRenderer(active.scene.templateId)) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-video-frame": "unsupported",
+        "data-template-id": active.scene.templateId,
+        className,
+        style: { width, height, background: "#090712", color: "#fff", ...style },
+        children: /* @__PURE__ */ jsx2(SafeScene, { scene: active.scene, onFramePresented })
+      }
+    );
+  }
+  const duration = active.end - active.start;
+  const rawProgress = clamp01((time - active.start) / duration);
+  const next = activeIndex < timeline.length - 1 ? timeline[activeIndex + 1] : void 0;
+  const contiguousNext = next && rangesAreContiguous(active, next) ? next : void 0;
+  const activeMediaFailed = failedMedia.has(sceneReadinessKey(active.scene));
+  const preparingNext = canRetain(active) && canPrepare(contiguousNext);
+  const nextPlayable = hasPlayableMedia(contiguousNext);
+  const mountingNext = handoffPending || Boolean(contiguousNext && time < active.end && sceneHasBackdrop(contiguousNext));
+  const progress = rawProgress;
+  const isFinalScene = activeIndex === timeline.length - 1;
+  const presentsChapter = active.scene.templateId === "chapterTitle" || active.scene.templateId === "cinemaMedia" && (activeMediaFailed || !String(active.scene.variables.mediaUrl || "").trim());
+  const finalHold = presentsChapter ? 0.76 : void 0;
+  const holdChapter = presentsChapter && preparingNext && !nextPlayable;
+  const motionProgress = (isFinalScene || holdChapter) && finalHold !== void 0 ? Math.min(rawProgress, finalHold) : rawProgress;
+  const canvas = getDimensions(config.orientation);
+  const scale = Math.min(width / canvas.width, height / canvas.height);
+  const canvasLeft = (width - canvas.width * scale) / 2;
+  const canvasTop = (height - canvas.height * scale) / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: recoveryRoot,
+      onErrorCapture: (event) => {
+        const target2 = event.target;
+        if (!(target2 instanceof HTMLVideoElement || target2 instanceof HTMLImageElement)) return;
+        const ownerId = target2.closest("[data-layer-scene-id]")?.getAttribute("data-layer-scene-id");
+        const owner = [active, contiguousNext].find((range) => range?.scene.id === ownerId);
+        if (owner?.scene.templateId === "cinemaMedia" && target2.getAttribute("src") === owner.scene.variables.mediaUrl) {
+          markMediaFailed(sceneReadinessKey(owner.scene), "decode-error");
+        }
+      },
+      "data-video-frame": "ready",
+      "data-scene-id": active.scene.id,
+      "data-template-id": active.scene.templateId,
+      className,
+      style: {
+        width,
+        height,
+        position: "relative",
+        overflow: "hidden",
+        background: "#000",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          MountedSceneReadiness,
+          {
+            scene: active.scene,
+            playing: playing && !handoffPending,
+            fallback: activeMediaFailed,
+            preparedProof: confirmedHandoff.current === sceneReadinessKey(active.scene) ? handoffProof.current : void 0,
+            onFailure: sceneHasBackdrop(active) && active.scene.templateId === "cinemaMedia" && !activeMediaFailed ? () => markMediaFailed(sceneReadinessKey(active.scene), "frame-readiness-timeout") : void 0
+          }
+        ),
+        mountingNext && contiguousNext && preparingNext && /* @__PURE__ */ jsx2(
+          MountedSceneReadiness,
+          {
+            scene: contiguousNext.scene,
+            playing: playing || preparingNarration,
+            observeIncoming: true,
+            timeoutMs: handoffPending ? 8e3 : null,
+            onReady: (proof) => {
+              const key = sceneReadinessKey(contiguousNext.scene);
+              if (handoffPending) {
+                confirmedHandoff.current = key;
+                handoffProof.current = proof;
+              }
+              markPrepared(key);
+            },
+            onFailure: () => markMediaFailed(sceneReadinessKey(contiguousNext.scene), "frame-readiness-timeout")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-video-canvas": "true",
+            style: {
+              position: "absolute",
+              left: canvasLeft,
+              top: canvasTop,
+              width: canvas.width,
+              height: canvas.height,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  "data-player-background": "black",
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "#000",
+                    backgroundColor: "#000",
+                    pointerEvents: "none"
+                  }
+                }
+              ),
+              mountingNext && contiguousNext ? [
+                /* @__PURE__ */ jsx2(
+                  SceneLayer,
+                  {
+                    onFramePresented,
+                    range: active,
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
+                    progress,
+                    motionProgress,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing: handoffPending ? playing || preparingNarration : playing,
+                    preparingNarration: handoffPending ? false : preparingNarration,
+                    mediaAudioMuted,
+                    mediaAudioVolume,
+                    layer: "active",
+                    opacity: 1,
+                    interactive: true,
+                    zIndex: 1,
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
+                  },
+                  active.scene.id
+                ),
+                /* @__PURE__ */ jsx2(
+                  SceneLayer,
+                  {
+                    range: contiguousNext,
+                    progress: 0,
+                    motionProgress: 0,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing: Boolean(preparingNext && (!preparedMedia.has(sceneReadinessKey(contiguousNext.scene)) || handoffPending) && (playing || preparingNarration)),
+                    preparingNarration: preparingNext,
+                    mediaAudioMuted: true,
+                    mediaAudioVolume,
+                    layer: "incoming",
+                    opacity: 0,
+                    interactive: false,
+                    zIndex: 2,
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(contiguousNext.scene), reason),
+                    externalVideoBackdrop: failedMedia.has(sceneReadinessKey(contiguousNext.scene)) ? "fallback" : false
+                  },
+                  contiguousNext.scene.id
+                )
+              ] : [
+                /* @__PURE__ */ jsx2(
+                  SceneLayer,
+                  {
+                    onFramePresented,
+                    range: active,
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
+                    progress,
+                    motionProgress,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing,
+                    preparingNarration,
+                    mediaAudioMuted,
+                    mediaAudioVolume,
+                    layer: "active",
+                    opacity: 1,
+                    interactive: true,
+                    zIndex: 1,
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
+                  },
+                  active.scene.id
+                )
+              ]
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/player/warm-scene-media.ts
-function warmSceneMedia(variables) {
-  void import("./preload-media-LJXWKTWG.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
+function warmSceneMedia(variables, signal) {
+  void import("./preload-media-23JXUFCF.js").then((module) => module.preloadSceneMedia(variables, signal)).catch(() => {
   });
 }
 
+// src/player/use-playback-diagnostics.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+function usePlaybackDiagnostics(root, config, report) {
+  const current = useRef3({ config, report });
+  current.current = { config, report };
+  const enabled = Boolean(report);
+  useEffect3(() => {
+    if (!enabled) return;
+    const observed = /* @__PURE__ */ new WeakMap();
+    let lastBuffer = -1;
+    const emit = (metric) => {
+      try {
+        void Promise.resolve(current.current.report?.(metric)).catch(() => void 0);
+      } catch {
+      }
+    };
+    const sample = () => {
+      const video = current.current.config;
+      if (!root.current || !video) return;
+      const ranges = resolveVideoTimeline(video);
+      let bufferedSeconds = 0;
+      for (const media of root.current.querySelectorAll("video")) {
+        const layer = media.closest("[data-layer-scene-id]");
+        const sceneId = layer?.getAttribute("data-layer-scene-id");
+        const range = ranges.find((value) => value.scene.id === sceneId);
+        if (!range || !Number.isFinite(media.duration) || media.duration <= 0) continue;
+        const active = layer?.getAttribute("data-scene-layer") === "active";
+        const previous = observed.get(media);
+        const same = previous?.sceneId === sceneId;
+        const repeated = same && previous && !media.paused && !media.seeking && media.currentTime < previous.time - 0.5;
+        const repeats = (same && previous ? previous.repeats : 0) + (repeated ? 1 : 0);
+        if (active && (!same || repeated)) emit({
+          type: "media-playback",
+          clipDurationSec: media.duration,
+          sceneDurationSec: range.end - range.start,
+          repeatCount: repeats
+        });
+        if (active) observed.set(media, { time: media.currentTime, repeats, sceneId });
+        if (media.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) continue;
+        for (let index = 0; index < media.buffered.length; index++) {
+          if (media.buffered.start(index) <= media.currentTime && media.buffered.end(index) >= media.currentTime) {
+            bufferedSeconds += Math.max(0, Math.min(media.buffered.end(index), range.end - range.start) - media.currentTime);
+            break;
+          }
+        }
+      }
+      bufferedSeconds = Math.round(bufferedSeconds * 10) / 10;
+      if (bufferedSeconds !== lastBuffer) {
+        lastBuffer = bufferedSeconds;
+        emit({ type: "buffer", bufferedSeconds });
+      }
+    };
+    sample();
+    const timer = setInterval(sample, 500);
+    return () => clearInterval(timer);
+  }, [enabled, root]);
+}
+
 // src/player/playback-policy.ts
 function resolvePlaybackPolicy({
   playbackMode,
@@ -263,7 +771,7 @@ function resolvePlaybackPolicy({
 }
 
 // src/player/player-controls.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function PlayerIcon({ name, size = 22 }) {
   const shared = {
     width: size,
@@ -276,33 +784,33 @@ function PlayerIcon({ name, size = 22 }) {
     strokeLinejoin: "round"
   };
   if (name === "play") {
-    return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z", fill: "currentColor", stroke: "none" }) });
+    return /* @__PURE__ */ jsx3("svg", { ...shared, children: /* @__PURE__ */ jsx3("path", { d: "M8 5v14l11-7z", fill: "currentColor", stroke: "none" }) });
   }
   if (name === "pause") {
-    return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M7 5h4v14H7zm6 0h4v14h-4z", fill: "currentColor", stroke: "none" }) });
+    return /* @__PURE__ */ jsx3("svg", { ...shared, children: /* @__PURE__ */ jsx3("path", { d: "M7 5h4v14H7zm6 0h4v14h-4z", fill: "currentColor", stroke: "none" }) });
   }
   if (name === "replay") {
-    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
-      /* @__PURE__ */ jsx("path", { d: "M4.5 9A8 8 0 1 1 5 16" }),
-      /* @__PURE__ */ jsx("path", { d: "M4.5 4.5V9H9" })
+    return /* @__PURE__ */ jsxs2("svg", { ...shared, children: [
+      /* @__PURE__ */ jsx3("path", { d: "M4.5 9A8 8 0 1 1 5 16" }),
+      /* @__PURE__ */ jsx3("path", { d: "M4.5 4.5V9H9" })
     ] });
   }
   if (name === "volume-off") {
-    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
-      /* @__PURE__ */ jsx("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
-      /* @__PURE__ */ jsx("path", { d: "m16 9 5 5M21 9l-5 5" })
+    return /* @__PURE__ */ jsxs2("svg", { ...shared, children: [
+      /* @__PURE__ */ jsx3("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
+      /* @__PURE__ */ jsx3("path", { d: "m16 9 5 5M21 9l-5 5" })
     ] });
   }
   if (name === "volume") {
-    return /* @__PURE__ */ jsxs("svg", { ...shared, children: [
-      /* @__PURE__ */ jsx("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
-      /* @__PURE__ */ jsx("path", { d: "M15 9.5a4 4 0 0 1 0 5M17.8 7a7.5 7.5 0 0 1 0 10" })
+    return /* @__PURE__ */ jsxs2("svg", { ...shared, children: [
+      /* @__PURE__ */ jsx3("path", { d: "M11 5 6.5 9H3v6h3.5L11 19z" }),
+      /* @__PURE__ */ jsx3("path", { d: "M15 9.5a4 4 0 0 1 0 5M17.8 7a7.5 7.5 0 0 1 0 10" })
     ] });
   }
   if (name === "exit-fullscreen") {
-    return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" }) });
+    return /* @__PURE__ */ jsx3("svg", { ...shared, children: /* @__PURE__ */ jsx3("path", { d: "M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" }) });
   }
-  return /* @__PURE__ */ jsx("svg", { ...shared, children: /* @__PURE__ */ jsx("path", { d: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" }) });
+  return /* @__PURE__ */ jsx3("svg", { ...shared, children: /* @__PURE__ */ jsx3("path", { d: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" }) });
 }
 var startButtonStyle = {
   display: "inline-flex",
@@ -341,7 +849,7 @@ function GenerationCover({
   onStart
 }) {
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       "data-testid": "video-generation-cover",
@@ -359,12 +867,12 @@ function GenerationCover({
         fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif'
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
-          /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
-          /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
+        /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
+          /* @__PURE__ */ jsx3("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
+          /* @__PURE__ */ jsx3("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
+          /* @__PURE__ */ jsx3("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
         ] }),
-        !startRequested && !isPlaying ? /* @__PURE__ */ jsxs(
+        !startRequested && !isPlaying ? /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -372,7 +880,7 @@ function GenerationCover({
             onClick: onStart,
             style: { ...startButtonStyle, ...startButtonPositionStyle },
             children: [
-              /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
+              /* @__PURE__ */ jsx3(PlayerIcon, { name: "play", size: 20 }),
               playLabel(config, isMuted)
             ]
           }
@@ -388,7 +896,7 @@ function StartPosterButton({
   onStart
 }) {
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -397,7 +905,7 @@ function StartPosterButton({
       onClick: onStart,
       style: { ...startButtonStyle, ...startButtonPositionStyle },
       children: [
-        /* @__PURE__ */ jsx(PlayerIcon, { name: "play", size: 20 }),
+        /* @__PURE__ */ jsx3(PlayerIcon, { name: "play", size: 20 }),
         playLabel(config, isMuted)
       ]
     }
@@ -405,8 +913,8 @@ function StartPosterButton({
 }
 function EndedOverlay({ ended, onReplay }) {
   if (!ended) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
       "div",
       {
         "data-testid": "video-ended-scrim",
@@ -421,7 +929,7 @@ function EndedOverlay({ ended, onReplay }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -430,7 +938,7 @@ function EndedOverlay({ ended, onReplay }) {
         onClick: onReplay,
         style: { ...startButtonStyle, ...startButtonPositionStyle, zIndex: 3 },
         children: [
-          /* @__PURE__ */ jsx(PlayerIcon, { name: "replay", size: 21 }),
+          /* @__PURE__ */ jsx3(PlayerIcon, { name: "replay", size: 21 }),
           "Replay"
         ]
       }
@@ -468,36 +976,36 @@ function PlayerControls({
     backdropFilter: "blur(12px)",
     cursor: "pointer"
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       "data-testid": "video-controls",
       style: { position: "absolute", inset: 0, zIndex: 4, pointerEvents: "none" },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             "data-testid": "video-primary-controls",
             style: { position: "absolute", left: inset, bottom: inset, display: "flex", pointerEvents: "auto" },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
                 "aria-label": ended ? "Play video response from beginning" : isPlaying ? "Pause video response" : "Play video response",
                 onClick: onTogglePlayback,
                 style: buttonStyle,
-                children: /* @__PURE__ */ jsx(PlayerIcon, { name: isPlaying ? "pause" : "play" })
+                children: /* @__PURE__ */ jsx3(PlayerIcon, { name: isPlaying ? "pause" : "play" })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             "data-testid": "video-secondary-controls",
             style: { position: "absolute", right: inset, bottom: inset, display: "flex", gap: 10, pointerEvents: "auto" },
             children: [
-              hasAudio ? /* @__PURE__ */ jsx(
+              hasAudio ? /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -505,17 +1013,17 @@ function PlayerControls({
                   "aria-pressed": !isMuted,
                   onClick: onToggleMuted,
                   style: buttonStyle,
-                  children: /* @__PURE__ */ jsx(PlayerIcon, { name: isMuted ? "volume-off" : "volume" })
+                  children: /* @__PURE__ */ jsx3(PlayerIcon, { name: isMuted ? "volume-off" : "volume" })
                 }
               ) : null,
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
                   "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                   onClick: onToggleFullscreen,
                   style: buttonStyle,
-                  children: /* @__PURE__ */ jsx(PlayerIcon, { name: isFullscreen ? "exit-fullscreen" : "enter-fullscreen" })
+                  children: /* @__PURE__ */ jsx3(PlayerIcon, { name: isFullscreen ? "exit-fullscreen" : "enter-fullscreen" })
                 }
               )
             ]
@@ -527,7 +1035,7 @@ function PlayerControls({
 }
 
 // src/player/use-playback-clock.ts
-import { useEffect } from "react";
+import { useEffect as useEffect4 } from "react";
 function usePlaybackClock({
   isPlaying,
   stateRef,
@@ -540,12 +1048,14 @@ function usePlaybackClock({
   setCurrentTime,
   setIsPlaying
 }) {
-  useEffect(() => {
+  useEffect4(() => {
     if (!isPlaying) return;
     let stalled = false;
+    let stallReason;
     let onsetWaitSeconds = 0;
     let clockWaitSeconds = 0;
     let lastNarrationTime;
+    let completionHold;
     let committedTime = timeRef.current;
     let groupHandoff;
     let requestId = stateRef.current.requestId;
@@ -557,11 +1067,18 @@ function usePlaybackClock({
       } catch {
       }
     };
-    const reportStall = (next) => {
-      if (stalled === next) return;
+    const reportStall = (next, reason) => {
+      if (stalled === next && (!next || stallReason === reason)) return;
+      if (stalled && next) {
+        try {
+          void Promise.resolve(callbacksRef.current.onStallChange?.(false, stallReason)).catch(() => void 0);
+        } catch {
+        }
+      }
       stalled = next;
+      stallReason = reason;
       try {
-        void Promise.resolve(callbacksRef.current.onStallChange?.(next)).catch(() => void 0);
+        void Promise.resolve(callbacksRef.current.onStallChange?.(next, reason)).catch(() => void 0);
       } catch {
       }
     };
@@ -574,8 +1091,12 @@ function usePlaybackClock({
       const replaced = current.requestId !== requestId || current.runId !== runId;
       requestId = current.requestId;
       runId = current.runId;
-      if (externallySeeked || replaced) groupHandoff = void 0;
+      if (externallySeeked || replaced) {
+        groupHandoff = void 0;
+        completionHold = void 0;
+      }
       let deferGroupStall = false;
+      let completionBlocked = false;
       const elapsed = Math.max(0, (now - previous) / 1e3);
       let narrationReady = true;
       try {
@@ -616,7 +1137,35 @@ function usePlaybackClock({
           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 raw = narrationTime !== void 0 && cued ? cued.start - (cued.scene.narrationGroup?.offsetSeconds ?? 0) + narrationTime : timeRef.current + delta;
+        if (cued && !cued.scene.narrationGroup && narrationTime === void 0) {
+          let speaking = false;
+          try {
+            speaking = callbacksRef.current.narrationActive?.(cued.scene) === true;
+          } catch (cause) {
+            failNarration(cause instanceof Error ? cause : new Error("Narration completion failed"), current);
+            return;
+          }
+          if (completionHold?.sceneId !== cued.scene.id) completionHold = void 0;
+          if (raw >= cued.end - CLIP_NARRATION_TAIL_SEC && speaking) {
+            completionHold ??= { sceneId: cued.scene.id, wait: 0, tail: 0 };
+            if (raw >= cued.end) completionHold.wait += elapsed;
+            if (completionHold.wait >= 8) {
+              failNarration(new Error("Narration did not finish within eight seconds of its scene budget"), current);
+              return;
+            }
+            if (raw >= cued.end) {
+              raw = Math.max(cued.start, cued.end - 0.01);
+              completionBlocked = true;
+            }
+          } else if (completionHold && !speaking) {
+            completionHold.tail += elapsed;
+            if (completionHold.tail < CLIP_NARRATION_TAIL_SEC && raw >= cued.end) {
+              raw = Math.max(cued.start, cued.end - 0.01);
+              completionBlocked = true;
+            } else if (completionHold.tail >= CLIP_NARRATION_TAIL_SEC) completionHold = void 0;
+          }
+        }
         let nextTime;
         if (looping && duration2 > 0 && raw >= duration2) {
           nextTime = raw % duration2;
@@ -667,7 +1216,8 @@ function usePlaybackClock({
       }
       const duration = current.config ? getVideoDuration(current.config) : 0;
       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) && !deferGroupStall) || !settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
+      const reason = !narrationReady || completionBlocked ? "speech" : active && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(active.scene) && !deferGroupStall ? "media-decoding" : !settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration ? "scene-generation" : void 0;
+      reportStall(Boolean(reason), reason);
       committedTime = timeRef.current;
       if (!settled || looping || timeRef.current < duration) frame = requestAnimationFrame(tick);
       else setIsPlaying(false);
@@ -681,7 +1231,7 @@ function usePlaybackClock({
 }
 
 // src/player/video-player.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MINIMUM_GENERATION_INTRO_MS = 3e3;
 function savedVideoState(video) {
   return {
@@ -691,7 +1241,6 @@ function savedVideoState(video) {
   };
 }
 function VideoPlayerRuntime({
-  kit,
   stream,
   video,
   playbackMode,
@@ -713,6 +1262,8 @@ function VideoPlayerRuntime({
   onSceneChange,
   narrationReady,
   narrationTime,
+  narrationActive,
+  onPlaybackMetric,
   onFramePresented,
   onMediaFramePresented,
   onStallChange,
@@ -722,10 +1273,10 @@ function VideoPlayerRuntime({
     1,
     typeof nativeMediaAudio?.volume === "number" && Number.isFinite(nativeMediaAudio.volume) ? nativeMediaAudio.volume : 1
   ));
-  const [reducedMotion, setReducedMotion] = useState(
+  const [reducedMotion, setReducedMotion] = useState2(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
-  const [audioUnlocked, setAudioUnlocked] = useState(false);
+  const [audioUnlocked, setAudioUnlocked] = useState2(false);
   const { resolvedStartMuted, shouldAutoPlay, autoStartGeneration } = resolvePlaybackPolicy({
     playbackMode,
     autoPlay,
@@ -734,28 +1285,40 @@ function VideoPlayerRuntime({
     reducedMotion,
     hasStream: Boolean(stream)
   });
-  const [isPlaying, setIsPlaying] = useState(() => shouldAutoPlay && !reducedMotion && !autoStartGeneration);
-  const [isMuted, setIsMuted] = useState(resolvedStartMuted);
-  const [fullscreenMode, setFullscreenMode] = useState("none");
-  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);
-  const [generationIntroComplete, setGenerationIntroComplete] = useState(() => !playbackMode || !stream);
-  const [observedWidth, setObservedWidth] = useState(0);
-  const containerRef = useRef(null);
-  const stateRef = useRef(state);
-  const timeRef = useRef(currentTime);
-  const audioRef = useRef(null);
-  const introStartedAtRef = useRef(autoStartGeneration ? performance.now() : null);
-  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 visualReadyRef = useRef(void 0);
+  const [isPlaying, setIsPlaying] = useState2(() => shouldAutoPlay && !reducedMotion && !autoStartGeneration);
+  const [isMuted, setIsMuted] = useState2(resolvedStartMuted);
+  const [fullscreenMode, setFullscreenMode] = useState2("none");
+  const [state, setState] = useState2(() => video ? savedVideoState(video) : createVideoState());
+  const [currentTime, setCurrentTime] = useState2(0);
+  const savedActiveIndex = video ? resolveVideoTimeline(video).findIndex((range) => currentTime >= range.start && currentTime < range.end) : -1;
+  const savedPreparationIndex = savedActiveIndex >= 0 ? savedActiveIndex : Math.max(0, (video?.scenes.length ?? 1) - 1);
+  useEffect5(() => {
+    if (!video) return;
+    const controller = new AbortController();
+    for (const scene of video.scenes.slice(savedPreparationIndex, savedPreparationIndex + 2)) {
+      preloadBuiltinTemplate(scene.templateId);
+      warmSceneMedia(scene.variables, controller.signal);
+    }
+    return () => controller.abort();
+  }, [video, savedPreparationIndex]);
+  const [activeStream, setActiveStream] = useState2(stream);
+  const [activeSavedVideo, setActiveSavedVideo] = useState2(video);
+  const [replacementPending, setReplacementPending] = useState2(false);
+  const [startRequested, setStartRequested] = useState2(autoStartGeneration);
+  const [introPlaying, setIntroPlaying] = useState2(autoStartGeneration);
+  const [generationIntroComplete, setGenerationIntroComplete] = useState2(() => !playbackMode || !stream);
+  const [observedWidth, setObservedWidth] = useState2(0);
+  const containerRef = useRef4(null);
+  usePlaybackDiagnostics(containerRef, state.config ?? void 0, onPlaybackMetric);
+  const stateRef = useRef4(state);
+  const timeRef = useRef4(currentTime);
+  const audioRef = useRef4(null);
+  const introStartedAtRef = useRef4(autoStartGeneration ? performance.now() : null);
+  const callbacksRef = useRef4({ onComplete, onPlaybackEnd, onError, onSceneChange, narrationReady, narrationTime, narrationActive, onFramePresented, onMediaFramePresented, onStallChange, onStateChange });
+  const loopRef = useRef4(loop);
+  const sceneIndexRef = useRef4(-1);
+  const mediaFrameReportedRef = useRef4(false);
+  const visualReadyRef = useRef4(void 0);
   const reportVisualReady = useMemo(() => (key, error, actualVideoFrame = false) => {
     if (error) {
       setIsPlaying(false);
@@ -771,7 +1334,7 @@ function VideoPlayerRuntime({
       }
     }
   }, []);
-  const playbackEndedRef = useRef(false);
+  const playbackEndedRef = useRef4(false);
   let mediaPlaying = isPlaying;
   if (sceneIndexRef.current >= 0) {
     try {
@@ -782,7 +1345,7 @@ function VideoPlayerRuntime({
   }
   stateRef.current = state;
   timeRef.current = currentTime;
-  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, narrationReady, narrationTime, onFramePresented, onMediaFramePresented, onStallChange, onStateChange };
+  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, narrationReady, narrationTime, narrationActive, onFramePresented, onMediaFramePresented, onStallChange, onStateChange };
   loopRef.current = loop;
   const reportFramePresented = useMemo(() => {
     let reported = false;
@@ -827,7 +1390,7 @@ function VideoPlayerRuntime({
     setGenerationIntroComplete(!playbackMode || !stream);
     introStartedAtRef.current = autoStartReplacement ? performance.now() : null;
   }
-  useEffect2(() => {
+  useEffect5(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handleChange = (event) => {
@@ -842,12 +1405,12 @@ function VideoPlayerRuntime({
     preference.addEventListener?.("change", handleChange);
     return () => preference.removeEventListener?.("change", handleChange);
   }, []);
-  useEffect2(() => {
+  useEffect5(() => {
     import("./control-visibility-NQOWTKOQ.js");
   }, []);
-  useEffect2(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
-  const pausedRef = useRef(paused);
-  useEffect2(() => {
+  useEffect5(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
+  const pausedRef = useRef4(paused);
+  useEffect5(() => {
     const previous = pausedRef.current;
     pausedRef.current = paused;
     if (paused === void 0 || paused === previous) return;
@@ -863,7 +1426,7 @@ function VideoPlayerRuntime({
     const audio = audioRef.current;
     if (audio?.paused) void audio.play().catch(Boolean);
   }, [paused]);
-  useEffect2(() => {
+  useEffect5(() => {
     let cancelled = false;
     let started = false;
     const reset = video ? savedVideoState(video) : createVideoState();
@@ -871,13 +1434,7 @@ function VideoPlayerRuntime({
     timeRef.current = 0;
     setState(reset);
     setCurrentTime(0);
-    if (video) {
-      for (const scene of video.scenes) {
-        preloadBuiltinTemplate(scene.templateId);
-        warmSceneMedia(scene.variables);
-      }
-      return;
-    }
+    if (video) return;
     if (!stream) return;
     const consume = async () => {
       try {
@@ -913,7 +1470,7 @@ function VideoPlayerRuntime({
       }
     };
   }, [stream, video]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (width != null) return;
     const container = containerRef.current;
     if (!container) return;
@@ -938,12 +1495,12 @@ function VideoPlayerRuntime({
     setCurrentTime,
     setIsPlaying
   });
-  useEffect2(() => {
+  useEffect5(() => {
     const audio = audioRef.current;
     if (!audio) return;
     audio.volume = state.config?.audio?.volume ?? 1;
   }, [state.config?.audio?.audioUrl, state.config?.audio?.volume]);
-  useEffect2(() => {
+  useEffect5(() => {
     const audio = audioRef.current;
     if (!audio) return;
     if (isPlaying || introPlaying) {
@@ -961,7 +1518,7 @@ function VideoPlayerRuntime({
       audio.pause();
     }
   }, [introPlaying, isPlaying, state.config?.audio?.audioUrl]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (!state.config?.scenes.length) {
       const terminalWithoutVideo = state.status === "complete" || state.status === "error" || state.status === "aborted";
       if (terminalWithoutVideo) {
@@ -1019,7 +1576,7 @@ function VideoPlayerRuntime({
   const terminal = state.status === "complete" || state.status === "error" || state.status === "aborted";
   const playheadAtEnd = terminal && duration > 0 && currentTime >= duration - 1e-3;
   const ended = !loop && playheadAtEnd;
-  useEffect2(() => {
+  useEffect5(() => {
     if (!playheadAtEnd) {
       playbackEndedRef.current = false;
       return;
@@ -1032,7 +1589,7 @@ function VideoPlayerRuntime({
   const firstSceneRange = config ? resolveVideoTimeline(config)[0] : void 0;
   const hasSuppliedOpening = firstSceneRange?.scene.id === "supplied-opening";
   const showStartPoster = (!generationIntroWaiting || hasSuppliedOpening) && !startRequested && !isPlaying && !ended && currentTime <= 1e-3 && Boolean(config?.scenes.length);
-  const firstSceneHoldProgress = firstSceneRange ? kit.getTemplate(firstSceneRange.scene.templateId)?.transitionTiming?.holdProgress ?? 0.7 : 0;
+  const firstSceneHoldProgress = firstSceneRange ? 0.7 : 0;
   const posterTime = firstSceneRange ? firstSceneRange.start + Math.max(0, firstSceneRange.end - firstSceneRange.start) * firstSceneHoldProgress : currentTime;
   const startPlayback = () => {
     setGenerationIntroComplete(true);
@@ -1095,7 +1652,7 @@ function VideoPlayerRuntime({
   const pendingReplacement = replacementPending && state.status === "idle";
   const displayedStatus = pendingReplacement ? "streaming" : state.status;
   const generationCoverVisible = generationIntroWaiting && !hasSuppliedOpening || displayedStatus === "streaming" && !config?.scenes.length;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: containerRef,
@@ -1135,7 +1692,7 @@ function VideoPlayerRuntime({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           GenerationCover,
           {
             visible: generationCoverVisible,
@@ -1146,10 +1703,9 @@ function VideoPlayerRuntime({
             onStart: armPlayback
           }
         ),
-        !generationCoverVisible && config?.scenes.length ? /* @__PURE__ */ jsx2(MountedReadinessContext.Provider, { value: reportVisualReady, children: /* @__PURE__ */ jsx2(
+        !generationCoverVisible && config?.scenes.length ? /* @__PURE__ */ jsx4(MountedReadinessContext.Provider, { value: reportVisualReady, children: /* @__PURE__ */ jsx4(
           VideoFrame,
           {
-            kit,
             onFramePresented: !showStartPoster && onFramePresented ? reportFramePresented : void 0,
             config: displayConfig,
             time: showStartPoster ? posterTime : currentTime,
@@ -1168,7 +1724,7 @@ function VideoPlayerRuntime({
             }
           }
         ) }) : null,
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           StartPosterButton,
           {
             visible: showStartPoster,
@@ -1177,7 +1733,7 @@ function VideoPlayerRuntime({
             onStart: startPlayback
           }
         ),
-        config?.audio ? /* @__PURE__ */ jsx2(
+        config?.audio ? /* @__PURE__ */ jsx4(
           "audio",
           {
             ref: audioRef,
@@ -1190,8 +1746,8 @@ function VideoPlayerRuntime({
           },
           config.audio.audioUrl
         ) : null,
-        /* @__PURE__ */ jsx2(EndedOverlay, { ended: controls && ended, onReplay: togglePlayback }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(EndedOverlay, { ended: controls && ended, onReplay: togglePlayback }),
+        /* @__PURE__ */ jsx4(
           PlayerControls,
           {
             visible: controls && !generationCoverVisible && !showStartPoster && Boolean(config?.scenes.length),
@@ -1214,7 +1770,6 @@ function VideoPlayerRuntime({
   );
 }
 function VideoPlayer({
-  templates,
   stream,
   video,
   onPlaybackEnd,
@@ -1223,16 +1778,11 @@ function VideoPlayer({
   ...props
 }) {
   const savedVideo = useMemo(() => video ? parseVideo(video) : void 0, [video]);
-  const kit = useMemo(
-    () => overlayPlayerTemplateRegistry(BUILTIN_PLAYER_KIT, templates),
-    [templates]
-  );
   if (!stream && !savedVideo) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     VideoPlayerRuntime,
     {
       ...props,
-      kit,
       stream,
       video: savedVideo,
       onPlaybackEnd: (state) => {
@@ -1335,21 +1885,144 @@ function createCaptionVoice(source, now = () => performance.now()) {
   return { voice, getCaptionProgress: read, reset };
 }
 
+// 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);
+  if (video) return "awaiting-video-frame";
+  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 = url;
+    if (image.complete && image.naturalWidth > 0) image.onload(new Event("load"));
+  });
+  return "image";
+}
+
 // src/player/recover-scene-media.ts
 function recoverSceneMedia(scene) {
   if (scene.templateId === "cinemaMedia") {
     const title = scene.variables.fallbackText;
-    if (typeof title !== "string" || !title.trim() || [...title].length > 65) return { ...scene, variables: { mediaType: "video", mediaUrl: "" } };
-    return { ...scene, templateId: "chapterTitle", variables: { title: title.trim() } };
+    const fallback = typeof title === "string" && title.trim() && [...title].length <= 65 ? title.trim() : "Your response continues.";
+    return { ...scene, templateId: "chapterTitle", variables: { title: fallback } };
   }
-  if (!["comparison", "editorialTimeline", "quote", "keyFigure"].includes(scene.templateId)) return void 0;
-  const variables = { ...scene.variables };
-  for (const key of ["mediaUrl", "mediaPoster", "mediaType", "mediaKeyword", "mediaSource"]) delete variables[key];
-  return { ...scene, variables };
+  return void 0;
+}
+
+// src/player/scene-readiness.ts
+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 + CLIP_NARRATION_TAIL_SEC) : Math.max(readable, getSceneDuration(scene, metadata));
+}
+function prepareNarratedScene(scene, spokenSeconds) {
+  const requested = scene.timing.fixedDuration;
+  const actual = scene.variables.mediaDurationSec;
+  const durations = [requested, actual].filter((value) => typeof value === "number" && Number.isFinite(value) && value > 0);
+  const clipDurationSec = scene.templateId === "cinemaMedia" && durations.length ? Math.min(...durations) : void 0;
+  const recovered = clipDurationSec !== void 0 && spokenSeconds !== void 0 && !speechFitsClip(spokenSeconds, clipDurationSec);
+  const visual = recovered ? recoverSceneMedia(scene) : scene;
+  const duration = preparedSceneDuration(visual, spokenSeconds, getBuiltinSceneDefinition(visual.templateId));
+  const { startTime: _start, endTime: _end, beatStart: _beatStart, beatEnd: _beatEnd, ...timing } = visual.timing;
+  return { scene: { ...visual, timing: { ...timing, fixedDuration: duration } }, recovered, clipDurationSec };
+}
+
+// src/video-chat/scene-preparation.ts
+function createScenePreparation(options) {
+  const speechLoads = /* @__PURE__ */ new Map();
+  const lanes = [Promise.resolve(), Promise.resolve()];
+  const announced = /* @__PURE__ */ new Set();
+  const announcedMedia = /* @__PURE__ */ new Set();
+  let nextLane = 0;
+  let customVoiceFailed = false;
+  const prepareSpeech = (text, signal = options.signal) => {
+    const cached = speechLoads.get(text);
+    if (cached) return cached;
+    const lane = nextLane++ % lanes.length;
+    const prepared = lanes[lane].then(async () => {
+      signal.throwIfAborted();
+      try {
+        if (customVoiceFailed) throw new Error("Voice preparation did not respond");
+        return options.customVoice ? await withDeadline((child) => options.voice().prepare(text, { signal: child }), 3e3, signal) : await options.voice().prepare(text, { signal });
+      } catch (cause) {
+        if (options.customVoice && !signal.aborted && !options.signal.aborted) {
+          options.onVoiceUnavailable(text);
+          if (cause instanceof DOMException && cause.name === "TimeoutError") customVoiceFailed = true;
+        }
+        throw cause;
+      }
+    });
+    speechLoads.set(text, prepared);
+    lanes[lane] = prepared.catch(() => void 0);
+    return prepared;
+  };
+  const announce = (value) => {
+    if (options.signal.aborted || !value || typeof value !== "object" || Array.isArray(value)) return;
+    const data = value;
+    if (typeof data.sceneId !== "string" || !data.sceneId || data.sceneId.length > 200 || typeof data.narration !== "string" || !data.narration.trim() || data.narration.length > 2e3 || !announced.has(data.sceneId) && announced.size >= 32) return;
+    announced.add(data.sceneId);
+    if (speechLoads.size < 32 || speechLoads.has(data.narration.trim())) void prepareSpeech(data.narration.trim()).catch(() => void 0);
+    const media = sanitizeVideoChatMedia(data.media);
+    if (media && !announcedMedia.has(data.sceneId)) {
+      announcedMedia.add(data.sceneId);
+      warmSceneMedia({ mediaUrl: media.url, mediaType: media.type === "image" ? "photo" : "video", mediaPoster: media.posterUrl }, options.signal);
+    }
+  };
+  const prepareVisual = (scene) => {
+    warmSceneMedia(scene.variables, options.signal);
+    const prepared = Promise.resolve(preloadBuiltinTemplate(scene.templateId)).then(async () => {
+      try {
+        await prepareSceneMedia(scene.variables, options.signal);
+        return scene;
+      } catch (cause) {
+        if (options.signal.aborted) throw cause;
+        const recovered = recoverSceneMedia(scene);
+        if (!recovered) throw new VideoError("Scene could not prepare its visual", { code: "media_not_ready" });
+        options.warn(MEDIA_RECOVERY_NOTICE);
+        return recovered;
+      }
+    });
+    void prepared.catch(() => void 0);
+    return prepared;
+  };
+  const pace = (scene, seconds) => {
+    const prepared = prepareNarratedScene(scene, seconds);
+    if (prepared.recovered) options.warn(MEDIA_RECOVERY_NOTICE);
+    if (seconds !== void 0 && prepared.clipDurationSec !== void 0) {
+      try {
+        options.onDuration?.({ speechDurationSec: seconds, clipDurationSec: prepared.clipDurationSec, recovered: prepared.recovered });
+      } catch {
+      }
+    }
+    return prepared.scene;
+  };
+  return { prepareSpeech, announce, prepareVisual, pace };
 }
 
 // src/video-chat/use-video-chat.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useReducer, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useReducer, useRef as useRef6 } from "react";
 
 // src/protocol/scene-timeline.ts
 function createQueue() {
@@ -1457,25 +2130,17 @@ function createSceneTimeline(options) {
   };
 }
 
-// src/player/scene-readiness.ts
-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";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useState as useState3 } from "react";
 function useNarration(options) {
-  const [speaking, setSpeaking] = useState2(false);
-  const optionsRef = useRef2(options);
+  const [speaking, setSpeaking] = useState3(false);
+  const optionsRef = useRef5(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 groupRef = useRef5(void 0);
+  const clockRef = useRef5(void 0);
+  const clockSceneRef = useRef5(void 0);
+  const readyRef = useRef5(true);
+  const getTime = useCallback2((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;
@@ -1488,10 +2153,11 @@ function useNarration(options) {
     }
     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(() => {
+  const isReady = useCallback2(() => optionsRef.current.enabled === false || readyRef.current || clockRef.current !== void 0 && clockRef.current >= (groupRef.current?.offsetSeconds ?? 0) + 0.04, []);
+  const currentRef = useRef5(void 0);
+  const isSpeaking = useCallback2((scene) => optionsRef.current.enabled !== false && Boolean(currentRef.current) && (groupRef.current ? scene.narrationGroup?.id === groupRef.current.id : scene.id === clockSceneRef.current), []);
+  const spokenIndexRef = useRef5(void 0);
+  const stop = useCallback2(() => {
     readyRef.current = true;
     currentRef.current?.abort();
     currentRef.current = void 0;
@@ -1500,12 +2166,12 @@ function useNarration(options) {
     clockSceneRef.current = void 0;
     setSpeaking(false);
   }, []);
-  const interrupt = useCallback(() => {
+  const interrupt = useCallback2(() => {
     spokenIndexRef.current = void 0;
     stop();
   }, [stop]);
-  useEffect3(() => () => currentRef.current?.abort(), []);
-  const onSceneChange = useCallback((scene, index) => {
+  useEffect6(() => () => currentRef.current?.abort(), []);
+  const onSceneChange = useCallback2((scene, index) => {
     const { voice, enabled = true } = optionsRef.current;
     if (!enabled) return;
     if (spokenIndexRef.current === index) return;
@@ -1565,42 +2231,7 @@ function useNarration(options) {
       }
     })();
   }, [stop]);
-  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);
-  if (video) return "awaiting-video-frame";
-  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 = url;
-    if (image.complete && image.naturalWidth > 0) image.onload(new Event("load"));
-  });
-  return "image";
+  return { onSceneChange, interrupt, speaking, isReady, getTime, isSpeaking };
 }
 
 // src/video-chat/voice.ts
@@ -1614,8 +2245,7 @@ function actionEndpoint(endpoint, action) {
   return `${value}${value.includes("?") ? "&" : "?"}action=${encodeURIComponent(action)}`;
 }
 function estimatedBrowserSeconds(text) {
-  const words = text.trim().split(/\s+/u).filter(Boolean).length;
-  return Math.max(1, words / 2.5);
+  return Math.max(1, estimateNarrationSeconds(text));
 }
 async function measureSeconds(bytes) {
   try {
@@ -1950,7 +2580,7 @@ function createVideoChatVoice(options = {}) {
 }
 
 // src/video-chat/use-video-chat.ts
-var DEFAULT_TIMEOUT_MS = 18e4;
+var DEFAULT_TIMEOUT_MS = 66e4;
 function observe(callback) {
   try {
     void Promise.resolve(callback?.()).catch(() => void 0);
@@ -2185,29 +2815,14 @@ async function responseError(response) {
     recoverable: false
   });
 }
-function pacedScene(scene, spokenSeconds, templates) {
-  const held = preparedSceneDuration(
-    scene,
-    spokenSeconds,
-    templates?.getTemplateMetadata(scene.templateId) ?? getBuiltinTemplateMetadata(scene.templateId)
-  );
-  const {
-    startTime: _startTime,
-    endTime: _endTime,
-    beatStart: _beatStart,
-    beatEnd: _beatEnd,
-    ...timing
-  } = scene.timing ?? {};
-  return { ...scene, timing: { ...timing, fixedDuration: held } };
-}
 function useVideoChat(options = {}) {
   return useVideoChatSession(options).chat;
 }
 function useVideoChatSession(options = {}) {
-  const optionsRef = useRef3(options);
+  const optionsRef = useRef6(options);
   optionsRef.current = options;
-  const voiceWarningRef = useRef3(() => void 0);
-  const ownedVoiceRef = useRef3(void 0);
+  const voiceWarningRef = useRef6(() => void 0);
+  const ownedVoiceRef = useRef6(void 0);
   if (!options.voice && !ownedVoiceRef.current) {
     ownedVoiceRef.current = createVideoChatVoice({
       endpoint: options.endpoint,
@@ -2219,12 +2834,12 @@ function useVideoChatSession(options = {}) {
   }
   const rawVoice = options.voice ?? ownedVoiceRef.current;
   const captionVoice = useMemo2(() => createCaptionVoice(rawVoice), [rawVoice]);
-  useEffect4(() => () => captionVoice.reset(), [captionVoice]);
+  useEffect7(() => () => captionVoice.reset(), [captionVoice]);
   const voice = captionVoice.voice;
-  const voiceRef = useRef3(voice);
+  const voiceRef = useRef6(voice);
   voiceRef.current = voice;
-  const unavailableVoiceLines = useRef3(/* @__PURE__ */ new Set());
-  const speechStartRef = useRef3(() => void 0);
+  const unavailableVoiceLines = useRef6(/* @__PURE__ */ new Set());
+  const speechStartRef = useRef6(() => void 0);
   const narration = useNarration({ onSpeechStart: (source) => speechStartRef.current(source), voice: {
     supportsOffsets: voice.supportsOffsets,
     ...voice.getCurrentTime ? { getCurrentTime: () => voice.getCurrentTime() } : {},
@@ -2238,24 +2853,24 @@ function useVideoChatSession(options = {}) {
       }
     }
   } });
-  const narrationRef = useRef3(narration);
+  const narrationRef = useRef6(narration);
   narrationRef.current = narration;
   const [state, dispatch] = useReducer(reducer, options.initialMuted ?? false, initialState);
-  const stateRef = useRef3(state);
+  const stateRef = useRef6(state);
   stateRef.current = state;
-  const runRef = useRef3(0);
-  const inFlightRef = useRef3(void 0);
-  const suggestionsRef = useRef3(void 0);
-  const openingRef = useRef3(void 0);
-  const timelineRef = useRef3(void 0);
-  const heldRef = useRef3(false);
-  const flushRef = useRef3(void 0);
-  const mountedRef = useRef3(true);
-  const firstFrameRef = useRef3(void 0);
-  const reportMetric = useCallback2((metric) => {
+  const runRef = useRef6(0);
+  const inFlightRef = useRef6(void 0);
+  const suggestionsRef = useRef6(void 0);
+  const openingRef = useRef6(void 0);
+  const timelineRef = useRef6(void 0);
+  const heldRef = useRef6(false);
+  const flushRef = useRef6(void 0);
+  const mountedRef = useRef6(true);
+  const firstFrameRef = useRef6(void 0);
+  const reportMetric = useCallback3((metric) => {
     observe(() => optionsRef.current.onPlaybackMetric?.(metric));
   }, []);
-  const finishStall = useCallback2(() => {
+  const finishStall = useCallback3(() => {
     const timing = firstFrameRef.current;
     if (!timing?.active || timing.stallStartedAt == null) return;
     const now = monotonicNow();
@@ -2267,10 +2882,10 @@ function useVideoChatSession(options = {}) {
       mode: timing.mode,
       elapsedMs: Math.max(0, Math.round(now - timing.startedAt)),
       durationMs: Math.max(0, Math.round(now - started)),
-      reason: "scene-generation"
+      reason: timing.stallReason ?? "scene-generation"
     });
   }, [reportMetric]);
-  const endTiming = useCallback2(() => {
+  const endTiming = useCallback3(() => {
     finishStall();
     if (firstFrameRef.current) firstFrameRef.current.active = false;
   }, [finishStall]);
@@ -2286,7 +2901,7 @@ function useVideoChatSession(options = {}) {
       source: optionsRef.current.voice ? "custom" : source === "generated" ? "generated" : "browser"
     });
   };
-  const request = useCallback2(async (action, init = {}, signal) => {
+  const request = useCallback3(async (action, init = {}, signal) => {
     const current = optionsRef.current;
     const headers = new Headers(current.headers);
     new Headers(init.headers).forEach((header, name) => headers.set(name, header));
@@ -2300,7 +2915,7 @@ function useVideoChatSession(options = {}) {
       signal
     });
   }, []);
-  useEffect4(() => {
+  useEffect7(() => {
     mountedRef.current = true;
     const controller = new AbortController();
     void request("capabilities", {}, controller.signal).then(async (response) => {
@@ -2331,8 +2946,8 @@ function useVideoChatSession(options = {}) {
       });
     };
   }, [request, endTiming]);
-  useEffect4(() => voice.setMuted(state.muted), [state.muted, voice]);
-  const cancel = useCallback2((reason = "Video chat was cancelled") => {
+  useEffect7(() => voice.setMuted(state.muted), [state.muted, voice]);
+  const cancel = useCallback3((reason = "Video chat was cancelled") => {
     endTiming();
     runRef.current += 1;
     inFlightRef.current?.abort(new DOMException(reason, "AbortError"));
@@ -2346,7 +2961,7 @@ function useVideoChatSession(options = {}) {
     narrationRef.current.interrupt();
     dispatch({ type: "cancelled" });
   }, [endTiming]);
-  const ask = useCallback2(async (value, askOptions = {}) => {
+  const ask = useCallback3(async (value, askOptions = {}) => {
     const prompt = value.trim();
     if (!prompt) return void 0;
     endTiming();
@@ -2456,31 +3071,26 @@ function useVideoChatSession(options = {}) {
       }
     };
     flushRef.current = flush;
-    const speechLoads = /* @__PURE__ */ new Map();
-    const speechLanes = [Promise.resolve(), Promise.resolve()];
-    let nextSpeechLane = 0;
-    let customVoiceFailed = false;
-    const prepareSpeech = (text, signal) => {
-      const cached = speechLoads.get(text);
-      if (cached) return cached;
-      const lane = nextSpeechLane++ % speechLanes.length;
-      const prepared = speechLanes[lane].then(async () => {
-        signal.throwIfAborted();
-        try {
-          if (customVoiceFailed) throw new Error("Voice preparation did not respond");
-          return currentOptions.voice ? await withDeadline((child) => voiceRef.current.prepare(text, { signal: child }), 3e3, signal) : await voiceRef.current.prepare(text, { signal });
-        } catch (cause) {
-          if (currentOptions.voice && !signal.aborted && isCurrent()) {
-            unavailableVoiceLines.current.add(text);
-            if (cause instanceof DOMException && cause.name === "TimeoutError") customVoiceFailed = true;
-          }
-          throw cause;
-        }
-      });
-      speechLoads.set(text, prepared);
-      speechLanes[lane] = prepared.catch(() => void 0);
-      return prepared;
-    };
+    const preparation = createScenePreparation({
+      voice: () => voiceRef.current,
+      customVoice: Boolean(currentOptions.voice),
+      signal: controller.signal,
+      onVoiceUnavailable: (text) => {
+        if (isCurrent()) unavailableVoiceLines.current.add(text);
+      },
+      warn,
+      onDuration: (value2) => {
+        const timing = firstFrameRef.current;
+        if (isCurrent() && timing?.active) reportMetric({
+          type: "scene-duration",
+          ...value2,
+          turnId: id,
+          mode,
+          elapsedMs: Math.max(0, Math.round(monotonicNow() - timing.startedAt))
+        });
+      }
+    });
+    const { prepareSpeech } = preparation;
     const speakOpening = async (text) => {
       try {
         if (!isOpeningCurrent()) return;
@@ -2539,10 +3149,7 @@ function useVideoChatSession(options = {}) {
             warn(event.type === "response.warning" && event.data.warning.message === MEDIA_RECOVERY_NOTICE ? MEDIA_RECOVERY_NOTICE : "Some parts were simplified so the response could continue.");
           }
           if (event.type === "data.video-chat-preparation") {
-            const data = event.data;
-            if (data && typeof data.sceneId === "string" && data.sceneId.length <= 200 && typeof data.narration === "string" && data.narration.trim() && data.narration.length <= 2e3 && speechLoads.size < 32) {
-              void prepareSpeech(data.narration.trim(), controller.signal).catch(() => void 0);
-            }
+            preparation.announce(event.data);
             continue;
           }
           if (event.type === "data.video-chat-opening") {
@@ -2572,22 +3179,7 @@ function useVideoChatSession(options = {}) {
           const plannedScene = event.data.scene;
           planned[position] = plannedScene;
           received[position] = plannedScene;
-          const rendererReady = currentOptions.templates?.getTemplate(plannedScene.templateId) ? Promise.resolve() : Promise.resolve(preloadBuiltinTemplate(plannedScene.templateId));
-          const visualPreparation = rendererReady.then(async () => {
-            try {
-              await prepareSceneMedia(plannedScene.variables, controller.signal);
-              return plannedScene;
-            } catch (cause) {
-              if (controller.signal.aborted) throw cause;
-              const override = currentOptions.templates?.getTemplate(plannedScene.templateId);
-              const fallback = !override || supportsExternalVideoBackdrop(override) ? recoverSceneMedia(plannedScene) : void 0;
-              if (!fallback) throw new VideoError("Scene could not prepare its visual", { code: "media_not_ready" });
-              warn(MEDIA_RECOVERY_NOTICE);
-              return fallback;
-            }
-          });
-          void visualPreparation.catch(() => void 0);
-          warmSceneMedia(plannedScene.variables);
+          const visualPreparation = preparation.prepareVisual(plannedScene);
           const narrated = narrating.then(async () => {
             const supplied = plannedScene.narration?.trim();
             if (supplied) return supplied;
@@ -2623,7 +3215,7 @@ function useVideoChatSession(options = {}) {
             const withNarration = line ? { ...visual, narration: line } : visual;
             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);
+            ready[position] = group ? withNarration : preparation.pace(withNarration, spoken?.seconds);
             flush();
           }).catch((cause) => {
             if (!isCurrent() || currentAttempt !== attempt) return;
@@ -2664,7 +3256,7 @@ function useVideoChatSession(options = {}) {
       try {
         response = await untilAborted(runAttempt(attempt), controller.signal);
       } catch (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;
+        if (mode !== "pexels" || 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 = [];
@@ -2727,19 +3319,19 @@ function useVideoChatSession(options = {}) {
       if (runRef.current === run) inFlightRef.current = void 0;
     }
   }, [request, endTiming]);
-  const pause = useCallback2(() => {
+  const pause = useCallback3(() => {
     finishStall();
     heldRef.current = true;
     voiceRef.current.pause();
     dispatch({ type: "pause" });
   }, [finishStall]);
-  const resume = useCallback2(() => {
+  const resume = useCallback3(() => {
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "resume" });
     flushRef.current?.();
   }, []);
-  const prepareSavedGroups = useCallback2(async (video) => {
+  const prepareSavedGroups = useCallback3(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()) {
@@ -2747,7 +3339,7 @@ function useVideoChatSession(options = {}) {
       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 replay = useCallback3(() => {
     const turn = stateRef.current.turns.find((entry) => entry.id === stateRef.current.shownTurnId);
     if (!turn?.completed || !turn.video) return;
     runRef.current += 1;
@@ -2774,7 +3366,7 @@ function useVideoChatSession(options = {}) {
       });
     } else dispatch({ type: "replay" });
   }, [endTiming, prepareSavedGroups]);
-  const selectTurn = useCallback2((id) => {
+  const selectTurn = useCallback3((id) => {
     const turn = stateRef.current.turns.find((entry) => entry.id === id);
     if (!turn?.completed || !turn.video) return;
     runRef.current += 1;
@@ -2801,19 +3393,19 @@ function useVideoChatSession(options = {}) {
       });
     } else dispatch({ type: "select", id });
   }, [endTiming, prepareSavedGroups]);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     cancel("Session reset");
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "reset" });
   }, [cancel]);
-  const restoreSession = useCallback2((turns) => {
+  const restoreSession = useCallback3((turns) => {
     cancel("Restoring session");
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "restore", turns: turns.filter((turn) => turn.completed && turn.video).slice(-100) });
   }, [cancel]);
-  const setMuted = useCallback2((muted) => dispatch({ type: "mute", value: muted }), []);
+  const setMuted = useCallback3((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 ?? ["cinematic"];
@@ -2822,13 +3414,13 @@ function useVideoChatSession(options = {}) {
   const transcript = shownTurn && shownTurn === currentTurn && state.playback?.kind !== "video" ? fullTranscript.slice(0, (shownTurn.opening ? 1 : 0) + state.spokenUpTo + 1) : fullTranscript;
   const playbackKey = state.playerKey;
   const playerProps = state.playback ? {
-    ...options.templates ? { templates: options.templates } : {},
     ...state.playback.kind === "stream" ? { stream: state.playback.stream } : { video: state.playback.video },
     autoPlay: true,
     paused: state.status === "paused",
     controls: false,
     narrationReady: narration.isReady,
     narrationTime: narration.getTime,
+    narrationActive: narration.isSpeaking,
     orientation: shownTurn?.fixedOrientation ? shownTurn.orientation : "auto",
     onFramePresented: () => {
       const timing = firstFrameRef.current;
@@ -2849,15 +3441,23 @@ function useVideoChatSession(options = {}) {
         elapsedMs: Math.max(0, Math.round(monotonicNow() - timing.startedAt))
       });
     },
-    onStallChange: (stalled) => {
+    onPlaybackMetric: options.onPlaybackMetric ? (metric) => {
+      const timing = firstFrameRef.current;
+      if (stateRef.current.playerKey !== playbackKey || !timing?.active || state.playback?.kind !== "stream") return;
+      reportMetric({ ...metric, turnId: timing.turnId, mode: timing.mode, elapsedMs: Math.max(0, Math.round(monotonicNow() - timing.startedAt)) });
+    } : void 0,
+    onStallChange: (stalled, reason = "scene-generation") => {
       if (stateRef.current.playerKey !== playbackKey) return;
-      if (stalled) voiceRef.current.pause();
+      if (stalled && reason !== "speech") 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();
-      else if (!heldRef.current && timing.stallStartedAt == null) timing.stallStartedAt = monotonicNow();
+      else if (!heldRef.current && timing.stallStartedAt == null) {
+        timing.stallStartedAt = monotonicNow();
+        timing.stallReason = reason;
+      }
     },
     onSceneChange: (scene, index) => {
       if (stateRef.current.playerKey !== playbackKey) return;
@@ -2907,8 +3507,8 @@ function useVideoChatSession(options = {}) {
 }
 
 // src/video-chat/caption-pages.tsx
-import { useEffect as useEffect5, useLayoutEffect, useRef as useRef4, useState as useState3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useLayoutEffect, useRef as useRef7, useState as useState4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function splitCaptionPages(text, fits) {
   const pages = [];
   let rest = Array.from(text);
@@ -2941,14 +3541,14 @@ function captionPageAt(pages, elapsed, duration) {
   return Math.max(0, pages.length - 1);
 }
 function CaptionPages({ text, getProgress }) {
-  const line = useRef4(null);
-  const lastProgress = useRef4(void 0);
-  const getter = useRef4(getProgress);
+  const line = useRef7(null);
+  const lastProgress = useRef7(void 0);
+  const getter = useRef7(getProgress);
   getter.current = getProgress;
-  const [source, setSource] = useState3(text);
-  const [pages, setPages] = useState3([]);
-  const [index, setIndex] = useState3(0);
-  const [timing, setTiming] = useState3();
+  const [source, setSource] = useState4(text);
+  const [pages, setPages] = useState4([]);
+  const [index, setIndex] = useState4(0);
+  const [timing, setTiming] = useState4();
   useLayoutEffect(() => {
     const element = line.current;
     if (!element) return;
@@ -2991,7 +3591,7 @@ function CaptionPages({ text, getProgress }) {
       document.fonts?.removeEventListener("loadingdone", measure);
     };
   }, [source]);
-  useEffect5(() => {
+  useEffect8(() => {
     let frame = 0;
     const update = () => {
       const observed = text ? getter.current() : void 0;
@@ -3006,14 +3606,14 @@ function CaptionPages({ text, getProgress }) {
     update();
     return () => cancelAnimationFrame(frame);
   }, [text, source, pages]);
-  return /* @__PURE__ */ jsx3("p", { ref: line, className: "line", "aria-live": "polite", "data-caption-timing": timing, "data-caption-page": index, children: pages[index] ?? "" });
+  return /* @__PURE__ */ jsx5("p", { ref: line, className: "line", "aria-live": "polite", "data-caption-timing": timing, "data-caption-page": index, children: pages[index] ?? "" });
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback5, useEffect as useEffect10, useId as useId2, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useId as useId2, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef12, useState as useState9 } from "react";
 
 // src/video-chat/icons.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var stroke = {
   fill: "none",
   stroke: "currentColor",
@@ -3022,50 +3622,50 @@ var stroke = {
   strokeLinejoin: "round"
 };
 function Glyph({ children }) {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
+  return /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
 }
-var Sessions = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("path", { d: "M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" }),
-  /* @__PURE__ */ jsx4("path", { d: "M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" })
+var Sessions = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("path", { d: "M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" }),
+  /* @__PURE__ */ jsx6("path", { d: "M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" })
 ] });
-var Plus = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M12 5v14M5 12h14" }) });
-var Gear = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
-  /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+var Plus = () => /* @__PURE__ */ jsx6(Glyph, { children: /* @__PURE__ */ jsx6("path", { d: "M12 5v14M5 12h14" }) });
+var Gear = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx6("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
 ] });
-var Sound = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
-  /* @__PURE__ */ jsx4("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13" })
+var Sound = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx6("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13" })
 ] });
-var Muted = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
-  /* @__PURE__ */ jsx4("path", { d: "m22 9-6 6M16 9l6 6" })
+var Muted = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx6("path", { d: "m22 9-6 6M16 9l6 6" })
 ] });
-var Mic = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
-  /* @__PURE__ */ jsx4("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v4" })
+var Mic = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsx6("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v4" })
 ] });
-var Send = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
-var Stop = () => /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: [
-  /* @__PURE__ */ jsx4("rect", { x: "7", y: "5", width: "3.4", height: "14", rx: "1.4" }),
-  /* @__PURE__ */ jsx4("rect", { x: "13.6", y: "5", width: "3.4", height: "14", rx: "1.4" })
+var Send = () => /* @__PURE__ */ jsx6(Glyph, { children: /* @__PURE__ */ jsx6("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+var Stop = () => /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: [
+  /* @__PURE__ */ jsx6("rect", { x: "7", y: "5", width: "3.4", height: "14", rx: "1.4" }),
+  /* @__PURE__ */ jsx6("rect", { x: "13.6", y: "5", width: "3.4", height: "14", rx: "1.4" })
 ] });
-var Play = () => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { d: "M8 5.5v13l11-6.5z" }) });
-var Replay = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
-  /* @__PURE__ */ jsx4("path", { d: "M3 3v5h5" })
+var Play = () => /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { d: "M8 5.5v13l11-6.5z" }) });
+var Replay = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
+  /* @__PURE__ */ jsx6("path", { d: "M3 3v5h5" })
 ] });
-var ChevronUp = () => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", ...stroke, children: /* @__PURE__ */ jsx4("path", { d: "m6 15 6-6 6 6" }) });
-var Close = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M6 6l12 12M18 6 6 18" }) });
-var Warning = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "9" }),
-  /* @__PURE__ */ jsx4("path", { d: "M12 8v5M12 16.2v.1" })
+var ChevronUp = () => /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", ...stroke, children: /* @__PURE__ */ jsx6("path", { d: "m6 15 6-6 6 6" }) });
+var Close = () => /* @__PURE__ */ jsx6(Glyph, { children: /* @__PURE__ */ jsx6("path", { d: "M6 6l12 12M18 6 6 18" }) });
+var Warning = () => /* @__PURE__ */ jsxs4(Glyph, { children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx6("path", { d: "M12 8v5M12 16.2v.1" })
 ] });
 
 // src/video-chat/use-dismiss.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useDismiss(open, close, surfaces) {
-  useEffect6(() => {
+  useEffect9(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
@@ -3087,7 +3687,7 @@ function useDismiss(open, close, surfaces) {
   }, [open, close, surfaces]);
 }
 function useFocusTrap(active, surface) {
-  useEffect6(() => {
+  useEffect9(() => {
     if (!active) return;
     const returnTo = document.activeElement;
     const focusable = () => Array.from(
@@ -3120,12 +3720,12 @@ function useFocusTrap(active, surface) {
 }
 
 // src/video-chat/suggestion-cards.tsx
-import { useEffect as useEffect7, useId, useRef as useRef5, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useId, useRef as useRef8, useState as useState5 } from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Frame({ media, poster, playing, onReady, onError, revealWhenReady = false }) {
-  const video = useRef5(null);
-  const [playingUrl, setPlayingUrl] = useState4(null);
-  useEffect7(() => {
+  const video = useRef8(null);
+  const [playingUrl, setPlayingUrl] = useState5(null);
+  useEffect10(() => {
     const element = video.current;
     if (!element || playing === void 0) return;
     if (playing) void element.play().catch(() => void 0);
@@ -3133,16 +3733,16 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
   }, [playing]);
   if (!media) return null;
   if (playing === false && media.type === "video" && media.posterUrl) {
-    return /* @__PURE__ */ jsx5("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady, onError });
+    return /* @__PURE__ */ jsx7("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady, onError });
   }
   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__ */ jsx5("img", { className: "frame-media", src: media.url, alt: "", style: appearance, onLoad: ready, onError });
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  if (media.type === "image") return /* @__PURE__ */ jsx7("img", { className: "frame-media", src: media.url, alt: "", style: appearance, onLoad: ready, onError });
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(
       "video",
       {
         ref: video,
@@ -3163,15 +3763,15 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
         "aria-hidden": "true"
       }
     ),
-    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx5("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
+    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx7("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
   ] });
 }
 function SuggestionCards({ suggestions, label, onAsk, browse = false }) {
-  const railRef = useRef5(null);
+  const railRef = useRef8(null);
   const railId = useId();
-  const [at, setAt] = useState4(0);
-  const [overflow, setOverflow] = useState4({ before: false, after: false });
-  useEffect7(() => {
+  const [at, setAt] = useState5(0);
+  const [overflow, setOverflow] = useState5({ before: false, after: false });
+  useEffect10(() => {
     const rail = railRef.current;
     if (!browse || !rail) return;
     const update = () => setOverflow({ before: rail.scrollLeft > 2, after: rail.scrollLeft + rail.clientWidth < rail.scrollWidth - 2 });
@@ -3190,8 +3790,8 @@ function SuggestionCards({ suggestions, label, onAsk, browse = false }) {
     rail.scrollBy({ left: direction * rail.clientWidth, behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
   };
   if (suggestions.length === 0) return null;
-  const cards = /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5("ul", { className: "cards", id: railId, ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs4(
+  const cards = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7("ul", { className: "cards", id: railId, ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
@@ -3200,13 +3800,13 @@ function SuggestionCards({ suggestions, label, onAsk, browse = false }) {
         onPointerEnter: () => setAt(index),
         onClick: () => onAsk(card),
         children: [
-          /* @__PURE__ */ jsx5(Frame, { media: card.media, poster: true, playing: index === at }),
-          /* @__PURE__ */ jsx5("span", { className: "card-wash", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx5("span", { className: "card-prompt", children: card.prompt })
+          /* @__PURE__ */ jsx7(Frame, { media: card.media, poster: true, playing: index === at }),
+          /* @__PURE__ */ jsx7("span", { className: "card-wash", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx7("span", { className: "card-prompt", children: card.prompt })
         ]
       }
     ) }, card.prompt)) }),
-    suggestions.length > 1 && /* @__PURE__ */ jsx5("div", { className: "card-dots", role: "group", "aria-label": `${label} navigation`, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5(
+    suggestions.length > 1 && /* @__PURE__ */ jsx7("div", { className: "card-dots", role: "group", "aria-label": `${label} navigation`, children: suggestions.map((card, index) => /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -3223,39 +3823,39 @@ function SuggestionCards({ suggestions, label, onAsk, browse = false }) {
       card.prompt
     )) })
   ] });
-  return browse ? /* @__PURE__ */ jsxs4("div", { className: "suggestion-rail", children: [
+  return browse ? /* @__PURE__ */ jsxs5("div", { className: "suggestion-rail", children: [
     cards,
-    (overflow.before || overflow.after) && /* @__PURE__ */ jsxs4("div", { className: "rail-arrows", children: [
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Previous suggestions", "aria-controls": railId, disabled: !overflow.before, onClick: () => move(-1), children: "\u2039" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Next suggestions", "aria-controls": railId, disabled: !overflow.after, onClick: () => move(1), children: "\u203A" })
+    (overflow.before || overflow.after) && /* @__PURE__ */ jsxs5("div", { className: "rail-arrows", children: [
+      /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Previous suggestions", "aria-controls": railId, disabled: !overflow.before, onClick: () => move(-1), children: "\u2039" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Next suggestions", "aria-controls": railId, disabled: !overflow.after, onClick: () => move(1), children: "\u203A" })
     ] })
   ] }) : cards;
 }
 
 // src/video-chat/welcome.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Welcome({ data, onAsk, title }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "welcome", children: [
-    /* @__PURE__ */ jsx6(Frame, { media: data?.hero ?? null, poster: true }),
-    /* @__PURE__ */ jsx6("div", { className: "welcome-wash", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs5("div", { className: "welcome-body", children: [
-      /* @__PURE__ */ jsx6("h1", { className: "welcome-title", children: title ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "welcome", children: [
+    /* @__PURE__ */ jsx8(Frame, { media: data?.hero ?? null, poster: true }),
+    /* @__PURE__ */ jsx8("div", { className: "welcome-wash", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs6("div", { className: "welcome-body", children: [
+      /* @__PURE__ */ jsx8("h1", { className: "welcome-title", children: title ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
         "An AI chat that responds",
-        /* @__PURE__ */ jsx6("br", {}),
-        /* @__PURE__ */ jsx6("em", { children: "in video, not text." })
+        /* @__PURE__ */ jsx8("br", {}),
+        /* @__PURE__ */ jsx8("em", { children: "in video, not text." })
       ] }) }),
-      /* @__PURE__ */ jsx6(SuggestionCards, { browse: true, suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
+      /* @__PURE__ */ jsx8(SuggestionCards, { browse: true, suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
     ] })
   ] });
 }
 
 // src/video-chat/opening-chapter.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState6 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function OpeningChapter({ title, preparing = false }) {
-  const root = useRef6(null);
-  const [size, setSize] = useState5({ width: 1080, height: 1080 });
-  const [titleBottom, setTitleBottom] = useState5(0);
+  const root = useRef9(null);
+  const [size, setSize] = useState6({ width: 1080, height: 1080 });
+  const [titleBottom, setTitleBottom] = useState6(0);
   useLayoutEffect2(() => {
     const element = root.current;
     if (!element) return;
@@ -3273,28 +3873,17 @@ function OpeningChapter({ title, preparing = false }) {
     if (title2) observer.observe(title2);
     return () => observer.disconnect();
   }, [title]);
-  return /* @__PURE__ */ jsxs6("div", { ref: root, "data-opening-chapter": true, className: "opening-chapter", children: [
-    /* @__PURE__ */ jsx7(
-      TitleSceneTemplate,
-      {
-        variables: { title },
-        style: {},
-        width: size.width,
-        height: size.height,
-        progress: 0.3,
-        beatIntensity: 0,
-        safeZone: { top: 0, right: 0, bottom: 0, left: 0 }
-      }
-    ),
-    preparing && /* @__PURE__ */ jsxs6("div", { className: "video-preparation", style: { top: titleBottom + 24 }, role: "status", "aria-label": "Video preparation", children: [
-      /* @__PURE__ */ jsx7("span", { className: "video-preparation-spinner", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx7("span", { className: "video-preparation-text", children: "Preparing your video\u2026" })
+  return /* @__PURE__ */ jsxs7("div", { ref: root, "data-opening-chapter": true, className: "opening-chapter", children: [
+    /* @__PURE__ */ jsx9(TitleSceneTemplate, { variables: { title }, width: size.width, height: size.height, progress: 0.3 }),
+    preparing && /* @__PURE__ */ jsxs7("div", { className: "video-preparation", style: { top: titleBottom + 24 }, role: "status", "aria-label": "Video preparation", children: [
+      /* @__PURE__ */ jsx9("span", { className: "video-preparation-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx9("span", { className: "video-preparation-text", children: "Preparing your video\u2026" })
     ] })
   ] });
 }
 
 // src/video-chat/use-voice-input.ts
-import { useCallback as useCallback3, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef10, useState as useState7 } from "react";
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const holder = window;
@@ -3364,19 +3953,19 @@ async function recordAndTranscribe(signal, ready, captured, options) {
   return clip ? transcribeRecording(clip, signal, options) : "";
 }
 function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {}) {
-  const [supported, setSupported] = useState6(false);
-  const [listening, setListening] = useState6(false);
-  const [error, setError] = useState6();
-  const [thinking, setThinking] = useState6(false);
-  const recognitionRef = useRef7(void 0);
-  const useRecorderRef = useRef7(false);
-  const operationRef = useRef7(void 0);
-  const handlerRef = useRef7(onTranscript);
+  const [supported, setSupported] = useState7(false);
+  const [listening, setListening] = useState7(false);
+  const [error, setError] = useState7();
+  const [thinking, setThinking] = useState7(false);
+  const recognitionRef = useRef10(void 0);
+  const useRecorderRef = useRef10(false);
+  const operationRef = useRef10(void 0);
+  const handlerRef = useRef10(onTranscript);
   handlerRef.current = onTranscript;
-  useEffect8(() => {
+  useEffect11(() => {
     setSupported(supportsVoiceInput(transcriptionAvailable));
   }, [transcriptionAvailable]);
-  const stop = useCallback3(() => {
+  const stop = useCallback4(() => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3386,7 +3975,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     setListening(false);
     setThinking(false);
   }, []);
-  useEffect8(() => () => {
+  useEffect11(() => () => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3394,7 +3983,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     operation?.controller.abort();
     operation?.finish?.();
   }, []);
-  const finish = useCallback3(() => {
+  const finish = useCallback4(() => {
     const recognition = recognitionRef.current;
     if (recognition) {
       recognition.stop();
@@ -3408,7 +3997,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     }
     stop();
   }, [stop]);
-  const record = useCallback3(async () => {
+  const record = useCallback4(async () => {
     if (!transcriptionAvailable || !recorderAvailable()) {
       setError("Server transcription is not configured.");
       return;
@@ -3446,7 +4035,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
       }
     }
   }, [transcriptionAvailable, options.endpoint, options.headers, options.credentials, options.fetcher]);
-  const toggle = useCallback3(() => {
+  const toggle = useCallback4(() => {
     if (listening) {
       finish();
       return;
@@ -3498,18 +4087,18 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
 }
 
 // src/video-chat/use-immersive-controls.ts
-import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef11, useState as useState8 } from "react";
 function useImmersiveControls(playing, pinned, hasCaptions = false) {
-  const [visible, setVisible] = useState7(true);
-  const hovered = useRef8(false);
-  const focused = useRef8(false);
-  const previousCaptions = useRef8(false);
-  const timer = useRef8(null);
-  const clearTimer = useCallback4(() => {
+  const [visible, setVisible] = useState8(true);
+  const hovered = useRef11(false);
+  const focused = useRef11(false);
+  const previousCaptions = useRef11(false);
+  const timer = useRef11(null);
+  const clearTimer = useCallback5(() => {
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
   }, []);
-  const reveal = useCallback4(() => {
+  const reveal = useCallback5(() => {
     clearTimer();
     setVisible(true);
     if (playing && !pinned && !hovered.current && !focused.current) {
@@ -3519,7 +4108,7 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
       }, 2e3);
     }
   }, [clearTimer, playing, pinned]);
-  useEffect9(() => {
+  useEffect12(() => {
     const firstCaption = hasCaptions && !previousCaptions.current;
     previousCaptions.current = hasCaptions;
     if (firstCaption && playing && !pinned && !focused.current) {
@@ -3531,21 +4120,21 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
     }
     return clearTimer;
   }, [hasCaptions, playing, pinned, reveal, clearTimer]);
-  const onPointerEnter = useCallback4((event) => {
+  const onPointerEnter = useCallback5((event) => {
     if (event?.pointerType === "touch") return;
     hovered.current = true;
     reveal();
   }, [reveal]);
-  const onPointerLeave = useCallback4(() => {
+  const onPointerLeave = useCallback5(() => {
     if (!hovered.current) return;
     hovered.current = false;
     reveal();
   }, [reveal]);
-  const onFocusCapture = useCallback4((event) => {
+  const onFocusCapture = useCallback5((event) => {
     focused.current = event.target.matches(":focus-visible");
     reveal();
   }, [reveal]);
-  const onBlurCapture = useCallback4((event) => {
+  const onBlurCapture = useCallback5((event) => {
     if (focused.current && !event.currentTarget.contains(event.relatedTarget)) {
       focused.current = false;
       reveal();
@@ -3555,9 +4144,9 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
 }
 
 // src/video-chat/logo.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Logo() {
-  return /* @__PURE__ */ jsx8("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
+  return /* @__PURE__ */ jsx10("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
 }
 
 // src/video-chat/modes.ts
@@ -3568,11 +4157,11 @@ var visualModes = [
 var defaultMode = visualModes[0];
 
 // src/video-chat/video-chat.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
 function useViewportOrientation() {
-  const [portrait, setPortrait] = useState8(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
-  useEffect10(() => {
+  const [portrait, setPortrait] = useState9(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
+  useEffect13(() => {
     if (typeof window.matchMedia !== "function") return;
     const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`);
     const update = () => setPortrait(query.matches);
@@ -3583,23 +4172,25 @@ function useViewportOrientation() {
   return portrait ? "portrait" : "landscape";
 }
 function Waveform({ active, listening }) {
-  return /* @__PURE__ */ jsx9("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx9("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
+  return /* @__PURE__ */ jsx11("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx11("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
-function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice = false }) {
-  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState8();
-  const [draft, setDraft] = useState8("");
-  const [selectedMode, setSelectedMode] = useState8();
-  const [savedSessions, setSavedSessions] = useState8([]);
-  const [historyOpen, setHistoryOpen] = useState8(false);
-  const [settingsOpen, setSettingsOpen] = useState8(false);
-  const [aboutOpen, setAboutOpen] = useState8(false);
-  const [captionsOn, setCaptionsOn] = useState8(true);
-  const [captionsExpanded, setCaptionsExpanded] = useState8(false);
-  const [alwaysShowControls, setAlwaysShowControls] = useState8(false);
-  const [editing, setEditing] = useState8(false);
-  const resumeAfterInput = useRef9(false);
-  const panelRef = useRef9(null);
-  const composerRef = useRef9(null);
+function VideoChat({ options = {}, className, welcomeTitle, branding, showRecoveryNotice = false }) {
+  const appName = branding?.name.trim() || "VanillaSky";
+  const customHome = safeHomeUrl(branding?.homeUrl);
+  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState9();
+  const [draft, setDraft] = useState9("");
+  const [selectedMode, setSelectedMode] = useState9();
+  const [savedSessions, setSavedSessions] = useState9([]);
+  const [historyOpen, setHistoryOpen] = useState9(false);
+  const [settingsOpen, setSettingsOpen] = useState9(false);
+  const [aboutOpen, setAboutOpen] = useState9(false);
+  const [captionsOn, setCaptionsOn] = useState9(true);
+  const [captionsExpanded, setCaptionsExpanded] = useState9(false);
+  const [alwaysShowControls, setAlwaysShowControls] = useState9(false);
+  const [editing, setEditing] = useState9(false);
+  const resumeAfterInput = useRef12(false);
+  const panelRef = useRef12(null);
+  const composerRef = useRef12(null);
   const viewportOrientation = useViewportOrientation();
   const sessionOrientation = options.orientation ?? viewportOrientation;
   const { chat, restoreSession, getCaptionProgress } = useVideoChatSession({
@@ -3607,8 +4198,8 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     orientation: sessionOrientation,
     mode: selectedMode ?? options.mode
   });
-  const observedMode = useRef9(void 0);
-  useEffect10(() => {
+  const observedMode = useRef12(void 0);
+  useEffect13(() => {
     const turn = chat.currentTurn;
     if (!turn?.mode) {
       observedMode.current = void 0;
@@ -3623,11 +4214,11 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const historyId = `${instanceId}-history`;
   const settingsId = `${instanceId}-settings`;
   const promptId = `${instanceId}-prompt`;
-  const inputRef = useRef9(null);
-  const historyRef = useRef9(null);
-  const historyButtonRef = useRef9(null);
-  const settingsRef = useRef9(null);
-  const settingsButtonRef = useRef9(null);
+  const inputRef = useRef12(null);
+  const historyRef = useRef12(null);
+  const historyButtonRef = useRef12(null);
+  const settingsRef = useRef12(null);
+  const settingsButtonRef = useRef12(null);
   const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
     endpoint: options.endpoint,
     headers: options.headers,
@@ -3636,13 +4227,13 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   });
   const historySurfaces = useMemo3(() => [historyRef, historyButtonRef], []);
   const settingsSurfaces = useMemo3(() => [settingsRef, settingsButtonRef], []);
-  const closeHistory = useCallback5(() => setHistoryOpen(false), []);
-  const closeSettings = useCallback5(() => setSettingsOpen(false), []);
+  const closeHistory = useCallback6(() => setHistoryOpen(false), []);
+  const closeSettings = useCallback6(() => setSettingsOpen(false), []);
   useDismiss(historyOpen, closeHistory, historySurfaces);
   useDismiss(settingsOpen, closeSettings, settingsSurfaces);
   useFocusTrap(settingsOpen, settingsRef);
   useFocusTrap(historyOpen, historyRef);
-  const ask = useCallback5((value) => {
+  const ask = useCallback6((value) => {
     const prompt = (typeof value === "string" ? value : value.prompt).trim();
     if (!prompt) return;
     setDraft("");
@@ -3657,7 +4248,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       opening: value.opening
     });
   }, [chat, listen]);
-  const newSession = useCallback5(() => {
+  const newSession = useCallback6(() => {
     if (chat.turns.length === 0) {
       setHistoryOpen(false);
       setSettingsOpen(false);
@@ -3679,13 +4270,13 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
   const handoffKey = `${shown?.id ?? ""}:${chat.playerKey}`;
-  const [presentedBody, setPresentedBody] = useState8();
-  const handoff = useRef9({ key: handoffKey, live: showing, active: false, frame: 0 });
+  const [presentedBody, setPresentedBody] = useState9();
+  const handoff = useRef12({ key: handoffKey, live: showing, active: false, frame: 0 });
   const handoffStopped = chat.status === "error" || chat.status === "cancelled";
   const waitingForBody = showing && presentedBody !== handoffKey;
   const openingChapter = Boolean(shown?.prompt) && (!showing || waitingForBody) && chat.status !== "error" && chat.status !== "cancelled" && chat.status !== "ended";
-  const [preparingKey, setPreparingKey] = useState8();
-  useEffect10(() => {
+  const [preparingKey, setPreparingKey] = useState9();
+  useEffect13(() => {
     setPreparingKey(void 0);
     if (!openingChapter || !shown?.opening || chat.speaking) return;
     const timer = setTimeout(() => setPreparingKey(shown.id), 1e3);
@@ -3724,13 +4315,13 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   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;
-  useEffect10(() => {
+  useEffect13(() => {
     setCaptionsExpanded(false);
   }, [chat.playbackEnded, shown?.id, chat.playerKey]);
   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__ */ jsx9(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx9(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx9(Replay, {}) } : void 0;
-  const cancelInput = useCallback5(() => {
+  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx11(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx11(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx11(Replay, {}) } : void 0;
+  const cancelInput = useCallback6(() => {
     listen.stop();
     setDraft("");
     setEditing(false);
@@ -3770,7 +4361,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     observer.observe(composer);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `vanillasky-video-chat${className ? ` ${className}` : ""}`,
@@ -3782,14 +4373,24 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       onPointerDown: controls.reveal,
       onKeyDownCapture: controls.reveal,
       children: [
-        /* @__PURE__ */ jsxs7("header", { className: "chrome", ...controlEvents, children: [
-          /* @__PURE__ */ jsx9("div", { className: "session-brand", children: /* @__PURE__ */ jsx9("a", { className: "home-link", href: "/", "aria-label": "Home", onClick: (event) => {
-            if (window.location.pathname !== "/" || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-            event.preventDefault();
-            newSession();
-          }, children: /* @__PURE__ */ jsx9(Logo, {}) }) }),
-          /* @__PURE__ */ jsxs7("div", { className: "group", children: [
-            /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8("header", { className: "chrome", ...controlEvents, children: [
+          /* @__PURE__ */ jsx11("div", { className: "session-brand", children: /* @__PURE__ */ jsx11(
+            "a",
+            {
+              className: "home-link",
+              href: customHome ?? "/",
+              "aria-label": branding ? `${appName} home` : "Home",
+              style: branding ? { color: "inherit", textDecoration: "none" } : void 0,
+              onClick: (event) => {
+                if (customHome || window.location.pathname !== "/" || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                event.preventDefault();
+                newSession();
+              },
+              children: branding ? branding.logo ?? appName : /* @__PURE__ */ jsx11(Logo, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxs8("div", { className: "group", children: [
+            /* @__PURE__ */ jsxs8(
               "button",
               {
                 ref: historyButtonRef,
@@ -3804,12 +4405,12 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setSettingsOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx9(Sessions, {}),
-                  /* @__PURE__ */ jsx9("span", { className: "nav-label", children: "Sessions" })
+                  /* @__PURE__ */ jsx11(Sessions, {}),
+                  /* @__PURE__ */ jsx11("span", { className: "nav-label", children: "Sessions" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 ref: settingsButtonRef,
@@ -3823,10 +4424,10 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setSettingsOpen((open) => !open);
                   setHistoryOpen(false);
                 },
-                children: /* @__PURE__ */ jsx9(Gear, {})
+                children: /* @__PURE__ */ jsx11(Gear, {})
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -3834,50 +4435,49 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                 "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__ */ jsx9(Muted, {}) : /* @__PURE__ */ jsx9(Sound, {})
+                children: chat.muted ? /* @__PURE__ */ jsx11(Muted, {}) : /* @__PURE__ */ jsx11(Sound, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "stage-area", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "stage", style: { background: "#000" }, children: [
-            openingChapter && /* @__PURE__ */ jsx9(OpeningChapter, { preparing: preparingKey === shown.id && !chat.speaking, title: openingTitle.length > 120 ? `${openingTitle.slice(0, 117).trimEnd()}\u2026` : openingTitle }, shown.id),
-            !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx9(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
-            chat.playerProps && /* @__PURE__ */ jsx9("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs8("div", { className: "stage-area", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "stage", style: { background: "#000" }, children: [
+            openingChapter && /* @__PURE__ */ jsx11(OpeningChapter, { preparing: preparingKey === shown.id && !chat.speaking, title: openingTitle.length > 120 ? `${openingTitle.slice(0, 117).trimEnd()}\u2026` : openingTitle }, shown.id),
+            !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx11(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+            chat.playerProps && /* @__PURE__ */ jsx11("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx11(
               VideoPlayer,
               {
                 ...chat.playerProps,
                 onSceneChange: cueBody,
-                templates: options.templates,
                 orientation: stageOrientation,
                 responsiveBreakpoint: DESKTOP_WIDTH,
                 ariaLabel: chat.playerProps.video ? "Replay" : "The response"
               },
               chat.playerKey
             ) }),
-            showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "ending", children: [
-              /* @__PURE__ */ jsx9("div", { className: "ending-wash", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxs7("div", { className: "ending-body", children: [
-                /* @__PURE__ */ jsx9("p", { className: "ending-label", children: "Ask next" }),
-                /* @__PURE__ */ jsx9(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
+            showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "ending", children: [
+              /* @__PURE__ */ jsx11("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs8("div", { className: "ending-body", children: [
+                /* @__PURE__ */ jsx11("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx11(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
               ] })
             ] })
           ] }),
-          historyOpen && /* @__PURE__ */ jsxs7("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "Sessions", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "popover-heading", children: [
-              /* @__PURE__ */ jsx9("h2", { children: "Sessions" }),
-              /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx9(Close, {}) })
+          historyOpen && /* @__PURE__ */ jsxs8("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "Sessions", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "popover-heading", children: [
+              /* @__PURE__ */ jsx11("h2", { children: "Sessions" }),
+              /* @__PURE__ */ jsx11("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx11(Close, {}) })
             ] }),
-            /* @__PURE__ */ jsxs7("button", { type: "button", className: "history-row session-new", "aria-label": "New session", onClick: newSession, children: [
-              /* @__PURE__ */ jsx9(Plus, {}),
-              /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
+            /* @__PURE__ */ jsxs8("button", { type: "button", className: "history-row session-new", "aria-label": "New session", onClick: newSession, children: [
+              /* @__PURE__ */ jsx11(Plus, {}),
+              /* @__PURE__ */ jsxs8("span", { className: "prompt", children: [
                 "New session",
-                /* @__PURE__ */ jsx9("small", { children: "Start a fresh conversation" })
+                /* @__PURE__ */ jsx11("small", { children: "Start a fresh conversation" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx9("h3", { className: "section-label", children: "Current session" }),
-            chat.turns.length === 0 && /* @__PURE__ */ jsx9("p", { className: "history-empty", children: "Your questions will appear here." }),
-            chat.turns.map((turn, index) => /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsx11("h3", { className: "section-label", children: "Current session" }),
+            chat.turns.length === 0 && /* @__PURE__ */ jsx11("p", { className: "history-empty", children: "Your questions will appear here." }),
+            chat.turns.map((turn, index) => /* @__PURE__ */ jsxs8(
               "button",
               {
                 type: "button",
@@ -3893,18 +4493,18 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setHistoryOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx9("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
-                  /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
+                  /* @__PURE__ */ jsx11("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsxs8("span", { className: "prompt", children: [
                     turn.prompt,
-                    /* @__PURE__ */ jsx9("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
+                    /* @__PURE__ */ jsx11("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
                   ] })
                 ]
               },
               turn.id
             )),
-            savedSessions.length > 0 && /* @__PURE__ */ jsxs7(Fragment4, { children: [
-              /* @__PURE__ */ jsx9("h3", { className: "section-label", children: "Earlier sessions" }),
-              savedSessions.map((session) => /* @__PURE__ */ jsxs7("button", { type: "button", className: "history-row", onClick: () => {
+            savedSessions.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+              /* @__PURE__ */ jsx11("h3", { className: "section-label", children: "Earlier sessions" }),
+              savedSessions.map((session) => /* @__PURE__ */ jsxs8("button", { type: "button", className: "history-row", onClick: () => {
                 listen.stop();
                 setDraft("");
                 setEditing(false);
@@ -3915,10 +4515,10 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                 setHistoryOpen(false);
                 setCaptionsExpanded(false);
               }, children: [
-                /* @__PURE__ */ jsx9(Replay, {}),
-                /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
+                /* @__PURE__ */ jsx11(Replay, {}),
+                /* @__PURE__ */ jsxs8("span", { className: "prompt", children: [
                   session.turns[0]?.prompt,
-                  /* @__PURE__ */ jsxs7("small", { children: [
+                  /* @__PURE__ */ jsxs8("small", { children: [
                     session.turns.length,
                     " ",
                     session.turns.length === 1 ? "answer" : "answers"
@@ -3927,7 +4527,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
               ] }, session.id))
             ] })
           ] }),
-          settingsOpen && /* @__PURE__ */ jsxs7(
+          settingsOpen && /* @__PURE__ */ jsxs8(
             "div",
             {
               ref: settingsRef,
@@ -3937,18 +4537,18 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
               "aria-label": "Settings",
               "aria-modal": "true",
               children: [
-                /* @__PURE__ */ jsxs7("div", { className: "popover-heading", children: [
-                  /* @__PURE__ */ jsx9("h2", { children: "Settings" }),
-                  /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx9(Close, {}) })
+                /* @__PURE__ */ jsxs8("div", { className: "popover-heading", children: [
+                  /* @__PURE__ */ jsx11("h2", { children: "Settings" }),
+                  /* @__PURE__ */ jsx11("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx11(Close, {}) })
                 ] }),
-                /* @__PURE__ */ jsxs7("fieldset", { className: "playback-options", children: [
-                  /* @__PURE__ */ jsx9("legend", { children: "Video source" }),
-                  visualModes.filter((mode) => chat.availableModes.includes(mode.id)).map((mode) => /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
-                    /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx9("strong", { children: mode.label }),
-                      /* @__PURE__ */ jsx9("small", { children: mode.note })
+                /* @__PURE__ */ jsxs8("fieldset", { className: "playback-options", children: [
+                  /* @__PURE__ */ jsx11("legend", { children: "Video source" }),
+                  visualModes.filter((mode) => chat.availableModes.includes(mode.id)).map((mode) => /* @__PURE__ */ jsxs8("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs8("span", { children: [
+                      /* @__PURE__ */ jsx11("strong", { children: mode.label }),
+                      /* @__PURE__ */ jsx11("small", { children: mode.note })
                     ] }),
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx11(
                       "input",
                       {
                         type: "radio",
@@ -3960,51 +4560,51 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                     )
                   ] }, mode.id))
                 ] }),
-                /* @__PURE__ */ jsxs7("fieldset", { className: "playback-options", children: [
-                  /* @__PURE__ */ jsx9("legend", { children: "Watching" }),
-                  /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
-                    /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx9("strong", { children: "Subtitles" }),
-                      /* @__PURE__ */ jsx9("small", { children: "Read along with the answer" })
+                /* @__PURE__ */ jsxs8("fieldset", { className: "playback-options", children: [
+                  /* @__PURE__ */ jsx11("legend", { children: "Watching" }),
+                  /* @__PURE__ */ jsxs8("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs8("span", { children: [
+                      /* @__PURE__ */ jsx11("strong", { children: "Subtitles" }),
+                      /* @__PURE__ */ jsx11("small", { children: "Read along with the answer" })
                     ] }),
-                    /* @__PURE__ */ jsx9("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
+                    /* @__PURE__ */ jsx11("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
                       setCaptionsOn(event.target.checked);
                       setCaptionsExpanded(false);
                     } })
                   ] }),
-                  /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
-                    /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx9("strong", { children: "Keep controls visible" }),
-                      /* @__PURE__ */ jsx9("small", { children: "Keep the input bar on screen" })
+                  /* @__PURE__ */ jsxs8("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs8("span", { children: [
+                      /* @__PURE__ */ jsx11("strong", { children: "Keep controls visible" }),
+                      /* @__PURE__ */ jsx11("small", { children: "Keep the input bar on screen" })
                     ] }),
-                    /* @__PURE__ */ jsx9("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
+                    /* @__PURE__ */ jsx11("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs7("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
-                  /* @__PURE__ */ jsx9("p", { className: "section-label", children: "Build with VanillaSky" }),
-                  /* @__PURE__ */ jsxs7("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
+                branding?.showDeveloperLinks !== false && /* @__PURE__ */ jsxs8("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
+                  /* @__PURE__ */ jsx11("p", { className: "section-label", children: "Build with VanillaSky" }),
+                  /* @__PURE__ */ jsxs8("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
                     "Docs",
-                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2197" })
                   ] }),
-                  /* @__PURE__ */ jsxs7("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
+                  /* @__PURE__ */ jsxs8("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
                     "About",
-                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
+                    /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
                   ] }),
-                  /* @__PURE__ */ jsx9("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx9("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__ */ jsxs7("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
+                  /* @__PURE__ */ jsx11("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx11("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__ */ jsxs8("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
                     "GitHub",
-                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2197" })
                   ] })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs7("div", { className: "panel-inner", children: [
-          /* @__PURE__ */ jsx9("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx9("div", { className: "caption-clip", children: chat.playbackEnded && !captionsExpanded ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "transcript-toggle", "aria-expanded": false, onClick: () => setCaptionsExpanded(true), children: [
+        /* @__PURE__ */ jsx11("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs8("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsx11("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx11("div", { className: "caption-clip", children: chat.playbackEnded && !captionsExpanded ? /* @__PURE__ */ jsxs8("button", { type: "button", className: "transcript-toggle", "aria-expanded": false, onClick: () => setCaptionsExpanded(true), children: [
             "Show transcript",
-            /* @__PURE__ */ jsx9(ChevronUp, {})
-          ] }) : /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsx11(ChevronUp, {})
+          ] }) : /* @__PURE__ */ jsxs8(
             "div",
             {
               className: "line-row",
@@ -4017,44 +4617,44 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
               onFocusCapture: captionControls.onFocusCapture,
               onBlurCapture: captionControls.onBlurCapture,
               children: [
-                captionsOn && line && /* @__PURE__ */ jsxs7("div", { className: "caption-actions", children: [
-                  /* @__PURE__ */ jsxs7("button", { type: "button", className: "caption-action", "aria-label": captionsExpanded ? "Collapse subtitles" : "Expand subtitles", "aria-expanded": captionsExpanded, onClick: () => setCaptionsExpanded((open) => !open), children: [
+                captionsOn && line && /* @__PURE__ */ jsxs8("div", { className: "caption-actions", children: [
+                  /* @__PURE__ */ jsxs8("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__ */ jsx9(ChevronUp, {})
+                    /* @__PURE__ */ jsx11(ChevronUp, {})
                   ] }),
-                  /* @__PURE__ */ jsx9("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
+                  /* @__PURE__ */ jsx11("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
                     setCaptionsOn(false);
                     setCaptionsExpanded(false);
-                  }, children: /* @__PURE__ */ jsx9(Close, {}) })
+                  }, children: /* @__PURE__ */ jsx11(Close, {}) })
                 ] }),
-                captionsExpanded ? /* @__PURE__ */ jsx9("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx9("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx9(CaptionPages, { text: openingChapter && line === shown?.opening ? "" : line, getProgress: getCaptionProgress }, `${shown?.id}:${chat.playerKey}`)
+                captionsExpanded ? /* @__PURE__ */ jsx11("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx11("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx11(CaptionPages, { text: openingChapter && line === shown?.opening ? "" : line, getProgress: getCaptionProgress }, `${shown?.id}:${chat.playerKey}`)
               ]
             }
           ) }) }),
-          showRecoveryNotice && chat.shownTurn && dismissedNoticeTurn !== chat.shownTurn.id && chat.warnings.includes(MEDIA_RECOVERY_NOTICE) && !chat.error && /* @__PURE__ */ jsxs7("div", { className: "recovery-notice", children: [
-            /* @__PURE__ */ jsx9("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
-            /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx9(Close, {}) })
+          showRecoveryNotice && chat.shownTurn && dismissedNoticeTurn !== chat.shownTurn.id && chat.warnings.includes(MEDIA_RECOVERY_NOTICE) && !chat.error && /* @__PURE__ */ jsxs8("div", { className: "recovery-notice", children: [
+            /* @__PURE__ */ jsx11("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
+            /* @__PURE__ */ jsx11("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx11(Close, {}) })
           ] }),
-          (chat.error || listen.error) && /* @__PURE__ */ jsxs7("p", { className: "error", role: "status", children: [
-            /* @__PURE__ */ jsx9(Warning, {}),
-            /* @__PURE__ */ jsx9("span", { children: chat.error?.message ?? listen.error })
+          (chat.error || listen.error) && /* @__PURE__ */ jsxs8("p", { className: "error", role: "status", children: [
+            /* @__PURE__ */ jsx11(Warning, {}),
+            /* @__PURE__ */ jsx11("span", { children: chat.error?.message ?? listen.error })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
-            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx9("div", { className: "composer-meta", children: /* @__PURE__ */ jsx9("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__ */ jsxs7("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
+          /* @__PURE__ */ jsxs8("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
+            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx11("div", { className: "composer-meta", children: /* @__PURE__ */ jsx11("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__ */ jsxs8("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
               event.preventDefault();
               ask(draft);
             }, children: [
-              transport && /* @__PURE__ */ jsx9("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
+              transport && /* @__PURE__ */ jsx11("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__ */ jsx9(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
-              /* @__PURE__ */ jsx9("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx11(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+              /* @__PURE__ */ jsx11("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+              /* @__PURE__ */ jsx11(
                 "textarea",
                 {
                   id: promptId,
@@ -4082,17 +4682,28 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   }
                 }
               ),
-              listen.supported && /* @__PURE__ */ jsx9("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__ */ jsx9(Mic, {}) }),
-              /* @__PURE__ */ jsx9("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx9(Send, {}) }),
-              editing && /* @__PURE__ */ jsx9("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx9(Close, {}) })
+              listen.supported && /* @__PURE__ */ jsx11("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__ */ jsx11(Mic, {}) }),
+              /* @__PURE__ */ jsx11("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx11(Send, {}) }),
+              editing && /* @__PURE__ */ jsx11("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx11(Close, {}) })
             ] })
           ] }),
-          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx9("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
+          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx11("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
         ] }) })
       ]
     }
   );
 }
+function safeHomeUrl(value) {
+  const candidate = value?.trim();
+  if (!candidate || !/^(?:https?:\/\/|\/(?![/\\]))/i.test(candidate)) return void 0;
+  try {
+    const url = new URL(candidate, "https://vanillasky.local");
+    if (!/^https?:$/.test(url.protocol) || url.username || url.password) return void 0;
+    return candidate.startsWith("/") ? `${url.pathname}${url.search}${url.hash}` : url.href;
+  } catch {
+    return void 0;
+  }
+}
 export {
   VideoChat,
   VideoError,