@vanillaskyai/video 0.6.0 → 0.7.1

package/dist/react.js

@@ -1,23 +1,32 @@
+import {
+  createSceneTimeline,
+  getSceneDuration
+} from "./chunk-SKRGRKHY.js";
 import {
   VIDEO_STREAM_CONTENT_TYPE,
   VIDEO_STREAM_HEADER,
-  decodeVideoSse
-} from "./chunk-ZQQQAAKP.js";
+  decodeVideoSse,
+  sanitizeVideoChatMedia
+} from "./chunk-2XT4MZ76.js";
 import {
   applyVideoEvent,
   createReplayableStream,
   createVideoState
-} from "./chunk-FZHMQFG3.js";
+} from "./chunk-GAIOHGNR.js";
 import {
   safePublicDiagnostic
-} from "./chunk-G66Z5CWR.js";
+} from "./chunk-MMUXVA47.js";
 import {
   parseVideo
-} from "./chunk-66MNRUCR.js";
+} from "./chunk-2PYO6VAC.js";
 import {
   VIDEO_PROTOCOL_VERSION,
   createVideoRequest
 } from "./chunk-AOWSXU2K.js";
+import {
+  getBuiltinTemplateMetadata
+} from "./chunk-JNN3EYVP.js";
+import "./chunk-3O7OMMMF.js";
 import {
   assertTemplateTransitionMetadata
 } from "./chunk-2E6T633S.js";
@@ -79,34 +88,34 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "media": () => import("./bg-media-G4XOQEAS.js").then((module) => ({ default: module.BgMediaTemplate })),
-  "reaction": () => import("./reaction-2XCLOJOK.js").then((module) => ({ default: module.ReactionTemplate })),
-  "confetti": () => import("./bg-confetti-SHQI7ATB.js").then((module) => ({ default: module.BgConfettiTemplate })),
-  "emojiBurst": () => import("./bg-emoji-XYFRA63Q.js").then((module) => ({ default: module.BgEmojiTemplate })),
-  "bigNumber": () => import("./chart-counter-KFPV44RB.js").then((module) => ({ default: module.ChartCounterTemplate })),
-  "barChart": () => import("./chart-bar-HRHD57ML.js").then((module) => ({ default: module.ChartBarTemplate })),
-  "progressRing": () => import("./chart-progress-ring-OR2VOIHV.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
-  "phoneMockup": () => import("./showcase-phone-M4CEANIW.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
-  "webMockup": () => import("./showcase-web-TY6CZV2Z.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
-  "codeEditor": () => import("./showcase-code-KHSMIPG6.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
-  "terminal": () => import("./showcase-terminal-26I3DYF7.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
-  "tweet": () => import("./social-tweet-TK7SH2F6.js").then((module) => ({ default: module.SocialTweetTemplate })),
-  "notification": () => import("./social-notification-2RJDAZSF.js").then((module) => ({ default: module.SocialNotificationTemplate })),
+  "media": () => import("./bg-media-L34PDQXJ.js").then((module) => ({ default: module.BgMediaTemplate })),
+  "reaction": () => import("./reaction-SLEGR3BE.js").then((module) => ({ default: module.ReactionTemplate })),
+  "confetti": () => import("./bg-confetti-HITCGLGD.js").then((module) => ({ default: module.BgConfettiTemplate })),
+  "emojiBurst": () => import("./bg-emoji-VU4UZYZN.js").then((module) => ({ default: module.BgEmojiTemplate })),
+  "bigNumber": () => import("./chart-counter-5FFWQNZO.js").then((module) => ({ default: module.ChartCounterTemplate })),
+  "barChart": () => import("./chart-bar-EGPHJATL.js").then((module) => ({ default: module.ChartBarTemplate })),
+  "progressRing": () => import("./chart-progress-ring-JMXQLMLC.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
+  "phoneMockup": () => import("./showcase-phone-Q4HEO4LH.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
+  "webMockup": () => import("./showcase-web-2QZO73FZ.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
+  "codeEditor": () => import("./showcase-code-2HLAVKBM.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
+  "terminal": () => import("./showcase-terminal-DL45LUFG.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
+  "tweet": () => import("./social-tweet-UCDXM25F.js").then((module) => ({ default: module.SocialTweetTemplate })),
+  "notification": () => import("./social-notification-FJ5VHVLK.js").then((module) => ({ default: module.SocialNotificationTemplate })),
   "chatMessenger": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
   "chatWhatsapp": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
-  "milestone": () => import("./social-milestone-TF6MX7ET.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
-  "reviewStack": () => import("./social-review-stack-2ICKJQG7.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
-  "testimonial": () => import("./social-testimonial-X7OGADA3.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
-  "incomingCall": () => import("./incoming-call-KXF67OT2.js").then((module) => ({ default: module.IncomingCallTemplate })),
-  "brandMessage": () => import("./brand-message-XHONEDNW.js").then((module) => ({ default: module.BrandMessageTemplate })),
-  "promptInput": () => import("./prompt-input-F3CYU2XH.js").then((module) => ({ default: module.PromptInputTemplate })),
-  "beforeAfter": () => import("./infographic-before-after-2I7YZVDD.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
-  "tripleStats": () => import("./infographic-stat-row-VFTIXS5F.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
-  "problemSolution": () => import("./infographic-problem-solution-FMLJCPG6.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
-  "cardList": () => import("./infographic-feature-list-QDM4I7XE.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
-  "steps": () => import("./infographic-steps-L7W24Z35.js").then((module) => ({ default: module.InfographicStepsTemplate })),
-  "ctaLogo": () => import("./cta-logo-JJOGK4UC.js").then((module) => ({ default: module.CtaLogoTemplate })),
-  "ctaMedia": () => import("./cta-media-IQ3MAWEH.js").then((module) => ({ default: module.CtaMediaTemplate }))
+  "milestone": () => import("./social-milestone-GEFUQSBF.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
+  "reviewStack": () => import("./social-review-stack-KXQCKFRP.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
+  "testimonial": () => import("./social-testimonial-JZ7CHC7S.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
+  "incomingCall": () => import("./incoming-call-54KQ7O5A.js").then((module) => ({ default: module.IncomingCallTemplate })),
+  "brandMessage": () => import("./brand-message-FUJ4STFO.js").then((module) => ({ default: module.BrandMessageTemplate })),
+  "promptInput": () => import("./prompt-input-MHX4O42G.js").then((module) => ({ default: module.PromptInputTemplate })),
+  "beforeAfter": () => import("./infographic-before-after-ROS52GOW.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
+  "tripleStats": () => import("./infographic-stat-row-SYB7AB7H.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
+  "problemSolution": () => import("./infographic-problem-solution-3S6NGO5N.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
+  "cardList": () => import("./infographic-feature-list-E7MGUDAN.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
+  "steps": () => import("./infographic-steps-KCE6JWE2.js").then((module) => ({ default: module.InfographicStepsTemplate })),
+  "ctaLogo": () => import("./cta-logo-YR7LYUR5.js").then((module) => ({ default: module.CtaLogoTemplate })),
+  "ctaMedia": () => import("./cta-media-DQJBKUO2.js").then((module) => ({ default: module.CtaMediaTemplate }))
 };
 
 // src/visual-system/catalog/builtin-player.generated.ts
@@ -322,7 +331,7 @@ var GENERATED_BUILTIN_PLAYER_TEMPLATES = [
     "id": "terminal",
     "defaults": {
       "texts": "Ship it.",
-      "command": "npx vanillasky check",
+      "command": "npx vanillasky templates check",
       "output": [],
       "promptPrefix": "$",
       "mediaUrl": "",
@@ -1090,7 +1099,10 @@ function VideoPlayerRuntime({
   className,
   style,
   ariaLabel = "Video response",
+  controls = true,
+  paused,
   loop = false,
+  onPlaybackEnd,
   onComplete,
   onError,
   onSceneChange,
@@ -1128,12 +1140,13 @@ function VideoPlayerRuntime({
   const timeRef = useRef(currentTime);
   const audioRef = useRef(null);
   const introStartedAtRef = useRef(autoStartGeneration ? performance.now() : null);
-  const callbacksRef = useRef({ onComplete, onError, onSceneChange, onStateChange });
+  const callbacksRef = useRef({ onComplete, onPlaybackEnd, onError, onSceneChange, onStateChange });
   const loopRef = useRef(loop);
   const sceneIndexRef = useRef(-1);
+  const playbackEndedRef = useRef(false);
   stateRef.current = state;
   timeRef.current = currentTime;
-  callbacksRef.current = { onComplete, onError, onSceneChange, onStateChange };
+  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, onStateChange };
   loopRef.current = loop;
   const primeSoundtrack = () => {
     const audio = audioRef.current;
@@ -1183,6 +1196,23 @@ function VideoPlayerRuntime({
     import("./control-visibility-NQOWTKOQ.js");
   }, []);
   useEffect2(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
+  const pausedRef = useRef(paused);
+  useEffect2(() => {
+    const previous = pausedRef.current;
+    pausedRef.current = paused;
+    if (paused === void 0 || paused === previous) return;
+    if (paused) {
+      setIsPlaying(false);
+      audioRef.current?.pause();
+      return;
+    }
+    const config2 = stateRef.current.config;
+    if (!config2?.scenes.length) return;
+    if (timeRef.current >= getVideoDuration(config2) - 1e-3) return;
+    setIsPlaying(true);
+    const audio = audioRef.current;
+    if (audio?.paused) void audio.play().catch(Boolean);
+  }, [paused]);
   useEffect2(() => {
     let cancelled = false;
     let started = false;
@@ -1336,7 +1366,17 @@ function VideoPlayerRuntime({
   const displayConfig = config && config.orientation !== orientation ? { ...config, orientation } : config;
   const duration = config ? getVideoDuration(config) : 0;
   const terminal = state.status === "complete" || state.status === "error" || state.status === "aborted";
-  const ended = !loop && terminal && duration > 0 && currentTime >= duration - 1e-3;
+  const playheadAtEnd = terminal && duration > 0 && currentTime >= duration - 1e-3;
+  const ended = !loop && playheadAtEnd;
+  useEffect2(() => {
+    if (!playheadAtEnd) {
+      playbackEndedRef.current = false;
+      return;
+    }
+    if (loop || playbackEndedRef.current) return;
+    playbackEndedRef.current = true;
+    callbacksRef.current.onPlaybackEnd?.(stateRef.current);
+  }, [loop, playheadAtEnd]);
   const generationIntroWaiting = Boolean(playbackMode && stream && !generationIntroComplete);
   const firstSceneRange = config ? resolveVideoTimeline(config)[0] : void 0;
   const hasSuppliedOpening = firstSceneRange?.scene.id === "supplied-opening";
@@ -1497,11 +1537,11 @@ function VideoPlayerRuntime({
           },
           config.audio.audioUrl
         ) : null,
-        /* @__PURE__ */ jsx2(EndedOverlay, { ended, onReplay: togglePlayback }),
+        /* @__PURE__ */ jsx2(EndedOverlay, { ended: controls && ended, onReplay: togglePlayback }),
         /* @__PURE__ */ jsx2(
           PlayerControls,
           {
-            visible: !generationCoverVisible && !showStartPoster && Boolean(config?.scenes.length),
+            visible: controls && !generationCoverVisible && !showStartPoster && Boolean(config?.scenes.length),
             displayWidth,
             ended,
             isPlaying,
@@ -1524,6 +1564,7 @@ function VideoPlayer({
   templates,
   stream,
   video,
+  onPlaybackEnd,
   onComplete,
   onError,
   ...props
@@ -1541,6 +1582,9 @@ function VideoPlayer({
       kit,
       stream,
       video: savedVideo,
+      onPlaybackEnd: (state) => {
+        if (state.config) onPlaybackEnd?.(state.config);
+      },
       onComplete: (state) => {
         if (state.config) onComplete?.(state.config);
       },
@@ -1767,8 +1811,8 @@ function useVideo(options = {}) {
     generation.current = currentGeneration;
     activeRun.current?.abort("replaced by a new composition");
     const currentOptions = optionsRef.current;
-    const initialState = createVideoState();
-    setState({ ...initialState, status: "streaming" });
+    const initialState2 = createVideoState();
+    setState({ ...initialState2, status: "streaming" });
     setError(void 0);
     const nextRun = streamVideo({
       endpoint: currentOptions.endpoint ?? "/api/video",
@@ -1833,8 +1877,1773 @@ function useVideo(options = {}) {
     }
   };
 }
+
+// src/player/use-narration.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+function useNarration(options) {
+  const [speaking, setSpeaking] = useState3(false);
+  const optionsRef = useRef3(options);
+  optionsRef.current = options;
+  const currentRef = useRef3(void 0);
+  const spokenIndexRef = useRef3(void 0);
+  const stop = useCallback2(() => {
+    currentRef.current?.abort();
+    currentRef.current = void 0;
+    setSpeaking(false);
+  }, []);
+  const interrupt = useCallback2(() => {
+    spokenIndexRef.current = void 0;
+    stop();
+  }, [stop]);
+  useEffect4(() => () => currentRef.current?.abort(), []);
+  const onSceneChange = useCallback2((scene, index) => {
+    const { voice, enabled = true } = optionsRef.current;
+    if (!enabled) return;
+    if (spokenIndexRef.current === index) return;
+    stop();
+    spokenIndexRef.current = index;
+    const line = scene.narration?.trim();
+    if (!line) return;
+    const controller = new AbortController();
+    currentRef.current = controller;
+    setSpeaking(true);
+    void (async () => {
+      try {
+        await voice.speak(line, { signal: controller.signal });
+      } catch {
+      } finally {
+        if (currentRef.current === controller) {
+          currentRef.current = void 0;
+          setSpeaking(false);
+        }
+      }
+    })();
+  }, [stop]);
+  return { onSceneChange, interrupt, speaking };
+}
+
+// src/video-chat/use-video-chat.ts
+import { useCallback as useCallback3, useEffect as useEffect5, useReducer, useRef as useRef4 } from "react";
+
+// src/video-chat/voice.ts
+var DEFAULT_MAX_CACHED_LINES = 60;
+var FALLBACK_BITS_PER_SECOND = 128e3;
+var sharedContext;
+function actionEndpoint(endpoint, action) {
+  const value = String(endpoint);
+  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);
+}
+async function measureSeconds(bytes) {
+  try {
+    sharedContext ??= new AudioContext();
+    const decoded = await sharedContext.decodeAudioData(bytes.slice(0));
+    if (decoded.duration > 0) return decoded.duration;
+  } catch {
+  }
+  return bytes.byteLength * 8 / FALLBACK_BITS_PER_SECOND;
+}
+function createVideoChatVoice(options = {}) {
+  const endpoint = options.endpoint ?? "/api/video-chat";
+  const fetcher = options.fetcher ?? fetch;
+  const maximum = options.maxCachedLines ?? DEFAULT_MAX_CACHED_LINES;
+  if (!Number.isInteger(maximum) || maximum <= 0) throw new Error("maxCachedLines must be a positive integer");
+  const lines = /* @__PURE__ */ new Map();
+  const pendingLoads = /* @__PURE__ */ new Set();
+  let sounding;
+  let browserFinish;
+  let held = false;
+  let silent = false;
+  let disposed = false;
+  let generatedSpeechUnavailable = false;
+  const forgetOldest = () => {
+    while (lines.size > maximum) {
+      const oldest = lines.keys().next();
+      if (oldest.done) return;
+      const line = lines.get(oldest.value);
+      lines.delete(oldest.value);
+      if (line?.source === "generated") URL.revokeObjectURL(line.src);
+    }
+  };
+  const load = async (text, signal) => {
+    if (disposed) throw new DOMException("Video chat voice was disposed", "AbortError");
+    const normalized = text.trim();
+    const cached = lines.get(normalized);
+    if (cached) {
+      lines.delete(normalized);
+      lines.set(normalized, cached);
+      return cached;
+    }
+    const headers = new Headers(options.headers);
+    headers.set("content-type", "application/json");
+    const controller = new AbortController();
+    const forwardAbort = () => controller.abort(signal?.reason);
+    if (signal?.aborted) forwardAbort();
+    else signal?.addEventListener("abort", forwardAbort, { once: true });
+    pendingLoads.add(controller);
+    let prepared;
+    let createdSrc;
+    try {
+      try {
+        if (generatedSpeechUnavailable) {
+          prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
+        } else {
+          const response = await fetcher(actionEndpoint(endpoint, "speech"), {
+            method: "POST",
+            headers,
+            credentials: options.credentials,
+            signal: controller.signal,
+            body: JSON.stringify({ text: normalized })
+          });
+          if (controller.signal.aborted) {
+            throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
+          }
+          if (response.status === 204 || response.status === 404) {
+            generatedSpeechUnavailable = true;
+            prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
+          } else if (!response.ok) {
+            prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
+          } else {
+            const bytes = await response.arrayBuffer();
+            if (controller.signal.aborted) {
+              throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
+            }
+            createdSrc = URL.createObjectURL(new Blob([bytes], {
+              type: response.headers.get("content-type") || "audio/mpeg"
+            }));
+            prepared = { source: "generated", src: createdSrc, seconds: await measureSeconds(bytes) };
+            if (controller.signal.aborted) {
+              throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
+            }
+          }
+        }
+      } catch (cause) {
+        if (createdSrc) URL.revokeObjectURL(createdSrc);
+        if (controller.signal.aborted) throw controller.signal.reason ?? cause;
+        prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
+      }
+      if (disposed || controller.signal.aborted) {
+        if (prepared.source === "generated") URL.revokeObjectURL(prepared.src);
+        throw controller.signal.reason ?? new DOMException("Video chat voice was disposed", "AbortError");
+      }
+      const existing = lines.get(normalized);
+      if (existing) {
+        if (prepared.source === "generated") URL.revokeObjectURL(prepared.src);
+        lines.delete(normalized);
+        lines.set(normalized, existing);
+        return existing;
+      }
+      lines.set(normalized, prepared);
+      forgetOldest();
+      return prepared;
+    } finally {
+      pendingLoads.delete(controller);
+      signal?.removeEventListener("abort", forwardAbort);
+    }
+  };
+  const stopBrowser = () => {
+    globalThis.speechSynthesis?.cancel();
+    browserFinish?.();
+  };
+  return {
+    async prepare(text, preparation = {}) {
+      const line = await load(text, preparation.signal);
+      return { seconds: line.seconds };
+    },
+    pause() {
+      held = true;
+      sounding?.pause();
+      globalThis.speechSynthesis?.pause();
+    },
+    resume() {
+      held = false;
+      if (sounding && !silent) void sounding.play().catch(() => void 0);
+      if (!silent) globalThis.speechSynthesis?.resume();
+    },
+    setMuted(muted) {
+      silent = muted;
+      if (sounding) sounding.muted = muted;
+      if (muted) stopBrowser();
+    },
+    async speak(text, { signal }) {
+      const line = await load(text, signal);
+      if (disposed || signal.aborted || silent) return;
+      if (line.source === "browser") {
+        const synthesis = globalThis.speechSynthesis;
+        if (!synthesis || typeof SpeechSynthesisUtterance === "undefined") return;
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.rate = 1;
+        await new Promise((resolve) => {
+          let finished = false;
+          const finish = () => {
+            if (finished) return;
+            finished = true;
+            if (browserFinish === finish) browserFinish = void 0;
+            resolve();
+          };
+          browserFinish = finish;
+          utterance.onend = finish;
+          utterance.onerror = finish;
+          signal.addEventListener("abort", () => {
+            synthesis.cancel();
+            finish();
+          }, { once: true });
+          synthesis.speak(utterance);
+          if (held) synthesis.pause();
+        });
+        return;
+      }
+      const element = new Audio(line.src);
+      element.muted = silent;
+      sounding = element;
+      await new Promise((resolve) => {
+        let finished = false;
+        const finish = () => {
+          if (finished) return;
+          finished = true;
+          if (sounding === element) sounding = void 0;
+          resolve();
+        };
+        element.onended = finish;
+        element.onerror = finish;
+        signal.addEventListener("abort", () => {
+          element.pause();
+          finish();
+        }, { once: true });
+        if (!held) void element.play().catch(finish);
+      });
+    },
+    dispose() {
+      disposed = true;
+      for (const controller of pendingLoads) {
+        controller.abort(new DOMException("Video chat voice was disposed", "AbortError"));
+      }
+      pendingLoads.clear();
+      sounding?.pause();
+      sounding = void 0;
+      stopBrowser();
+      for (const line of lines.values()) {
+        if (line.source === "generated") URL.revokeObjectURL(line.src);
+      }
+      lines.clear();
+    }
+  };
+}
+
+// src/video-chat/use-video-chat.ts
+var DEFAULT_TIMEOUT_MS = 18e4;
+function initialState(muted) {
+  return {
+    turns: [],
+    status: "idle",
+    resumeStatus: "idle",
+    spokenUpTo: -1,
+    muted,
+    playbackEnded: false,
+    playerKey: 0,
+    openingSpeaking: false
+  };
+}
+function replaceTurn(turns, id, update) {
+  return turns.map((turn) => turn.id === id ? update(turn) : turn);
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "capabilities":
+      return { ...state, capabilities: action.value };
+    case "welcome":
+      return { ...state, welcome: action.value };
+    case "start":
+      return {
+        ...state,
+        turns: [...state.turns, action.turn],
+        shownTurnId: action.turn.id,
+        status: "composing",
+        resumeStatus: "composing",
+        error: void 0,
+        caption: void 0,
+        spokenUpTo: -1,
+        playbackEnded: false,
+        playback: void 0,
+        openingSpeaking: false
+      };
+    case "opening-start":
+      if (state.turns.at(-1)?.id !== action.id) return state;
+      return {
+        ...state,
+        turns: replaceTurn(state.turns, action.id, (turn) => ({
+          ...turn,
+          opening: turn.opening ? `${turn.opening} ${action.line}` : action.line
+        })),
+        status: state.status === "paused" ? "paused" : "playing",
+        resumeStatus: "playing",
+        caption: action.line,
+        openingSpeaking: true
+      };
+    case "opening-media":
+      if (state.turns.at(-1)?.id !== action.id || state.playback) return state;
+      return {
+        ...state,
+        turns: replaceTurn(state.turns, action.id, (turn) => ({ ...turn, openingMedia: action.media }))
+      };
+    case "opening-end":
+      if (state.turns.at(-1)?.id !== action.id) return state;
+      return {
+        ...state,
+        status: state.status === "paused" ? "paused" : state.playback ? "playing" : "composing",
+        resumeStatus: state.playback ? "playing" : "composing",
+        openingSpeaking: false
+      };
+    case "player":
+      if (state.turns.at(-1)?.id !== action.id) return state;
+      return {
+        ...state,
+        status: state.status === "paused" ? "paused" : "playing",
+        resumeStatus: "playing",
+        playback: { kind: "stream", stream: action.stream },
+        playerKey: state.playerKey + 1,
+        playbackEnded: false
+      };
+    case "partial":
+      return { ...state, turns: replaceTurn(state.turns, action.id, (turn) => ({ ...turn, video: action.video })) };
+    case "complete":
+      return {
+        ...state,
+        turns: replaceTurn(state.turns, action.id, (turn) => ({
+          ...turn,
+          completed: true,
+          video: action.video,
+          suggestions: action.suggestions
+        }))
+      };
+    case "scene":
+      if (state.playerKey !== action.key) return state;
+      return {
+        ...state,
+        caption: action.scene.narration?.trim() || state.caption,
+        spokenUpTo: Math.max(state.spokenUpTo, action.index)
+      };
+    case "playback-end":
+      if (state.playerKey !== action.key) return state;
+      return { ...state, status: "ended", resumeStatus: "ended", playbackEnded: true, openingSpeaking: false };
+    case "error":
+      if (state.turns.at(-1)?.id !== action.id) return state;
+      return {
+        ...state,
+        status: "error",
+        resumeStatus: "error",
+        error: action.error,
+        openingSpeaking: false,
+        playback: void 0
+      };
+    case "cancelled":
+      return {
+        ...state,
+        status: "cancelled",
+        resumeStatus: "cancelled",
+        openingSpeaking: false,
+        playback: void 0
+      };
+    case "pause":
+      if (state.status === "idle" || state.status === "paused" || state.status === "ended" || state.status === "cancelled" || state.status === "error") return state;
+      return { ...state, resumeStatus: state.status, status: "paused" };
+    case "resume":
+      return state.status === "paused" ? { ...state, status: state.resumeStatus } : state;
+    case "mute":
+      return { ...state, muted: action.value };
+    case "select": {
+      const turn = state.turns.find((entry) => entry.id === action.id);
+      if (!turn?.video) return state;
+      return {
+        ...state,
+        shownTurnId: turn.id,
+        playback: { kind: "video", video: turn.video },
+        status: "playing",
+        resumeStatus: "playing",
+        playerKey: state.playerKey + 1,
+        playbackEnded: false,
+        spokenUpTo: -1,
+        caption: turn.opening,
+        error: void 0
+      };
+    }
+    case "replay": {
+      const turn = state.turns.find((entry) => entry.id === state.shownTurnId);
+      if (!turn?.video) return state;
+      return {
+        ...state,
+        playback: { kind: "video", video: turn.video },
+        status: "playing",
+        resumeStatus: "playing",
+        playerKey: state.playerKey + 1,
+        playbackEnded: false,
+        spokenUpTo: -1,
+        caption: turn.opening,
+        error: void 0
+      };
+    }
+    case "reset":
+      return { ...initialState(state.muted), capabilities: state.capabilities, welcome: state.welcome };
+  }
+}
+function actionEndpoint2(endpoint, action) {
+  const value = String(endpoint);
+  return `${value}${value.includes("?") ? "&" : "?"}action=${encodeURIComponent(action)}`;
+}
+function defaultTurnId() {
+  return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function monotonicNow() {
+  return globalThis.performance?.now?.() ?? Date.now();
+}
+function transcriptFor(turn) {
+  return [
+    ...turn.opening ? [turn.opening] : [],
+    ...turn.video?.scenes.flatMap((entry) => entry.narration?.trim() ? [entry.narration.trim()] : []) ?? []
+  ];
+}
+function conversationFor(turns) {
+  return turns.filter((turn) => turn.completed && turn.video).slice(-12).map((turn) => ({
+    prompt: turn.prompt,
+    response: [...transcriptFor(turn).join(" ")].slice(0, 8e3).join("")
+  }));
+}
+function errorFrom2(cause) {
+  if (cause instanceof VideoError) return cause;
+  if (cause instanceof DOMException && cause.name === "AbortError") {
+    return new VideoError("Video chat was cancelled", { code: "aborted", recoverable: false });
+  }
+  return new VideoError(safePublicDiagnostic(
+    cause instanceof Error ? cause.message : String(cause),
+    "Video chat failed"
+  ), { code: "video_chat_failed", recoverable: false });
+}
+async function responseError2(response) {
+  let code = "http_error";
+  let message = `Video chat endpoint failed (${response.status})`;
+  try {
+    const body = await response.json();
+    if (typeof body.error?.code === "string") code = body.error.code.slice(0, 80);
+    if (typeof body.error?.message === "string") {
+      message = safePublicDiagnostic(body.error.message, message);
+    }
+  } catch {
+  }
+  return new VideoError(message, { code, status: response.status, recoverable: false });
+}
+function pacedScene(scene, spokenSeconds, templates) {
+  const held = spokenSeconds && spokenSeconds > 0 ? spokenSeconds + 0.8 : getSceneDuration(scene, 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 prepareVisualScene(scene, mode) {
+  const overMedia = typeof scene.variables.mediaUrl === "string";
+  const filmed = mode === "full" && overMedia;
+  const shown = filmed ? {
+    ...scene,
+    backgroundEffect: "static",
+    variables: {
+      ...scene.variables,
+      texts: "",
+      mediaTreatment: "none",
+      confetti: false
+    }
+  } : scene;
+  return overMedia ? { ...shown, textArchetype: "subtle" } : shown;
+}
+function useVideoChat(options = {}) {
+  const optionsRef = useRef4(options);
+  optionsRef.current = options;
+  const ownedVoiceRef = useRef4(void 0);
+  if (!options.voice && !ownedVoiceRef.current) {
+    ownedVoiceRef.current = createVideoChatVoice({
+      endpoint: options.endpoint,
+      headers: options.headers,
+      credentials: options.credentials,
+      fetcher: options.fetcher
+    });
+  }
+  const voice = options.voice ?? ownedVoiceRef.current;
+  const voiceRef = useRef4(voice);
+  voiceRef.current = voice;
+  const narration = useNarration({ voice });
+  const narrationRef = useRef4(narration);
+  narrationRef.current = narration;
+  const [state, dispatch] = useReducer(reducer, options.initialMuted ?? false, initialState);
+  const stateRef = useRef4(state);
+  stateRef.current = state;
+  const runRef = useRef4(0);
+  const inFlightRef = useRef4(void 0);
+  const openingRef = useRef4(void 0);
+  const timelineRef = useRef4(void 0);
+  const heldRef = useRef4(false);
+  const flushRef = useRef4(void 0);
+  const mountedRef = useRef4(true);
+  const firstFrameRef = useRef4(void 0);
+  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));
+    if (init.body && !(init.body instanceof FormData) && !(init.body instanceof Blob)) {
+      headers.set("content-type", "application/json");
+    }
+    return (current.fetcher ?? fetch)(actionEndpoint2(current.endpoint ?? "/api/video-chat", action), {
+      ...init,
+      headers,
+      credentials: current.credentials,
+      signal
+    });
+  }, []);
+  useEffect5(() => {
+    mountedRef.current = true;
+    const controller = new AbortController();
+    void request("capabilities", {}, controller.signal).then(async (response) => {
+      if (!response.ok) throw await responseError2(response);
+      return response.json();
+    }).then((value) => {
+      if (mountedRef.current) dispatch({ type: "capabilities", value });
+    }).catch(() => void 0);
+    void request("welcome", {}, controller.signal).then(async (response) => {
+      if (!response.ok) throw await responseError2(response);
+      return response.json();
+    }).then((value) => {
+      if (mountedRef.current) dispatch({ type: "welcome", value });
+    }).catch(() => void 0);
+    return () => {
+      mountedRef.current = false;
+      controller.abort();
+      runRef.current += 1;
+      inFlightRef.current?.abort(new DOMException("Component unmounted", "AbortError"));
+      openingRef.current?.abort(new DOMException("Component unmounted", "AbortError"));
+      timelineRef.current?.complete();
+      timelineRef.current = void 0;
+      narrationRef.current.interrupt();
+      queueMicrotask(() => {
+        if (!mountedRef.current) ownedVoiceRef.current?.dispose?.();
+      });
+    };
+  }, [request]);
+  useEffect5(() => voice.setMuted(state.muted), [state.muted, voice]);
+  const cancel = useCallback3((reason = "Video chat was cancelled") => {
+    runRef.current += 1;
+    inFlightRef.current?.abort(new DOMException(reason, "AbortError"));
+    openingRef.current?.abort(new DOMException(reason, "AbortError"));
+    inFlightRef.current = void 0;
+    openingRef.current = void 0;
+    timelineRef.current?.complete();
+    timelineRef.current = void 0;
+    flushRef.current = void 0;
+    narrationRef.current.interrupt();
+    dispatch({ type: "cancelled" });
+  }, []);
+  const ask = useCallback3(async (value, askOptions = {}) => {
+    const prompt = value.trim();
+    if (!prompt) return void 0;
+    inFlightRef.current?.abort(new DOMException("Replaced by a new prompt", "AbortError"));
+    openingRef.current?.abort(new DOMException("Replaced by a new prompt", "AbortError"));
+    timelineRef.current?.complete();
+    timelineRef.current = void 0;
+    narrationRef.current.interrupt();
+    voiceRef.current.resume();
+    heldRef.current = false;
+    const controller = new AbortController();
+    const openingController = new AbortController();
+    inFlightRef.current = controller;
+    openingRef.current = openingController;
+    controller.signal.addEventListener("abort", () => {
+      openingController.abort(controller.signal.reason);
+    }, { once: true });
+    const run = runRef.current + 1;
+    runRef.current = run;
+    const currentOptions = optionsRef.current;
+    const timeoutMs = currentOptions.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) {
+      inFlightRef.current = void 0;
+      throw new VideoError("timeoutMs must be positive", { code: "invalid_option" });
+    }
+    const timeout = setTimeout(() => controller.abort(new DOMException("Video chat timed out", "TimeoutError")), timeoutMs);
+    const requestedMode = currentOptions.mode ?? "templates";
+    const knownModes = stateRef.current.capabilities?.modes;
+    const mode = knownModes && !knownModes.includes(requestedMode) ? "templates" : requestedMode;
+    const orientation = currentOptions.orientation ?? "landscape";
+    const id = (currentOptions.createTurnId ?? defaultTurnId)();
+    const conversation = conversationFor(stateRef.current.turns);
+    const openingMedia = sanitizeVideoChatMedia(askOptions.openingMedia);
+    const suppliedOpening = typeof askOptions.opening === "string" ? askOptions.opening.trim().slice(0, 300) : "";
+    const turn = {
+      id,
+      prompt,
+      completed: false,
+      orientation,
+      fixedOrientation: mode === "full",
+      suggestions: [],
+      ...openingMedia ? { openingMedia } : {}
+    };
+    firstFrameRef.current = { turnId: id, mode, startedAt: monotonicNow(), reported: false };
+    dispatch({ type: "start", turn });
+    let timeline;
+    let style;
+    let openingActive = false;
+    let openingRequested = false;
+    let spokenHook = suppliedOpening;
+    let planDone = false;
+    let timelineCompleted = false;
+    let terminal = false;
+    let attempt = 0;
+    let ready = [];
+    let appended = 0;
+    const isCurrent = () => mountedRef.current && runRef.current === run && !controller.signal.aborted;
+    const isOpeningCurrent = () => isCurrent() && !terminal && openingRef.current === openingController && !openingController.signal.aborted;
+    const flush = () => {
+      if (!isCurrent()) return;
+      let available = appended;
+      while (ready[available]) available += 1;
+      if (available === appended && timeline) {
+        if (planDone && !timelineCompleted) {
+          timelineCompleted = true;
+          timeline.complete();
+          if (timelineRef.current === timeline) timelineRef.current = void 0;
+        }
+        return;
+      }
+      if (!timeline) {
+        if (!style || openingActive || heldRef.current || available === appended) return;
+        timeline = createSceneTimeline({ style, orientation });
+        timelineRef.current = timeline;
+        openingController.abort(new DOMException("Opening replaced by response", "AbortError"));
+        if (openingRef.current === openingController) openingRef.current = void 0;
+        dispatch({ type: "player", id, stream: timeline.stream });
+      }
+      while (ready[appended]) timeline.add(ready[appended++]);
+      dispatch({
+        type: "partial",
+        id,
+        video: { schemaVersion: "0.1", orientation, scenes: ready.slice(0, appended), style }
+      });
+      if (planDone && !timelineCompleted) {
+        timelineCompleted = true;
+        timeline.complete();
+        if (timelineRef.current === timeline) timelineRef.current = void 0;
+      }
+    };
+    flushRef.current = flush;
+    const resolveOpeningMedia = async (keyword) => {
+      try {
+        const response = await request("opening-media", {
+          method: "POST",
+          body: JSON.stringify({ keyword, orientation })
+        }, openingController.signal);
+        if (!response.ok || !isOpeningCurrent() || timeline) return;
+        const payload = await response.json();
+        const media = sanitizeVideoChatMedia(payload.media);
+        if (media && isOpeningCurrent() && !timeline) dispatch({ type: "opening-media", id, media });
+      } catch {
+      }
+    };
+    const speakOpening = async (text) => {
+      try {
+        await voiceRef.current.prepare(text, { signal: openingController.signal });
+        if (!isOpeningCurrent()) return;
+        dispatch({ type: "opening-start", id, line: text });
+        await voiceRef.current.speak(text, { signal: openingController.signal });
+      } catch {
+      } finally {
+        openingActive = false;
+        if (isOpeningCurrent()) dispatch({ type: "opening-end", id });
+        flush();
+      }
+    };
+    if (spokenHook) {
+      openingRequested = true;
+      openingActive = true;
+      void speakOpening(spokenHook);
+    }
+    const runAttempt = async (currentAttempt) => {
+      const response = await request("response", {
+        method: "POST",
+        headers: { accept: "text/event-stream" },
+        body: JSON.stringify({
+          prompt,
+          ...spokenHook ? { opening: spokenHook } : {},
+          mode,
+          orientation,
+          conversation,
+          ...currentOptions.brand ? { brand: currentOptions.brand } : {},
+          ...currentOptions.style ? { style: currentOptions.style } : {}
+        })
+      }, controller.signal);
+      if (!response.ok) throw await responseError2(response);
+      if (!response.body || !response.headers.get("content-type")?.includes("text/event-stream")) {
+        throw new VideoError("Video chat endpoint did not return a video stream", { code: "invalid_response" });
+      }
+      const planned = [];
+      const lines = spokenHook ? [spokenHook] : [];
+      const pending = [];
+      let narrating = Promise.resolve();
+      let terminalError;
+      for await (const event of decodeVideoSse(response.body)) {
+        if (!isCurrent() || currentAttempt !== attempt) return { video: { schemaVersion: "0.1", orientation, scenes: [], style }, suggestions: [] };
+        if (event.type === "response.start") style = event.data.style;
+        if (event.type === "data.video-chat-opening") {
+          const payload = event.data && typeof event.data === "object" && !Array.isArray(event.data) ? event.data : {};
+          const line = typeof payload.line === "string" ? payload.line.trim().slice(0, 300) : "";
+          const keyword = typeof payload.keyword === "string" ? payload.keyword.trim().slice(0, 80) : "";
+          if (!openingMedia && keyword) void resolveOpeningMedia(keyword);
+          if (!openingRequested && line) {
+            spokenHook = line;
+            lines.push(line);
+            openingRequested = true;
+            openingActive = true;
+            void speakOpening(line);
+          }
+          continue;
+        }
+        if (event.type === "response.error" && event.data.terminal) {
+          terminalError = new VideoError(event.data.error.message, {
+            code: event.data.error.code,
+            requestId: event.data.snapshot ? void 0 : id,
+            recoverable: event.data.error.recoverable
+          });
+        }
+        if (event.type === "response.abort") {
+          terminalError = new VideoError(event.data.reason, { code: "aborted", recoverable: false });
+        }
+        if (event.type !== "scene.add") continue;
+        const position = event.data.position;
+        const plannedScene = event.data.scene;
+        planned[position] = plannedScene;
+        if (!currentOptions.templates?.getTemplate(plannedScene.templateId)) {
+          preloadBuiltinTemplate(plannedScene.templateId);
+        }
+        warmSceneMedia(plannedScene.variables);
+        const narrated = narrating.then(async () => {
+          const supplied = plannedScene.narration?.trim();
+          if (supplied) return supplied;
+          const narrationResponse = await request("narration", {
+            method: "POST",
+            body: JSON.stringify({ prompt, scene: plannedScene, earlier: [...lines] })
+          }, controller.signal);
+          if (!narrationResponse.ok) return "";
+          const payload = await narrationResponse.json();
+          return typeof payload.line === "string" ? payload.line.trim() : "";
+        }).then((line) => {
+          if (line) lines.push(line);
+          return line;
+        });
+        narrating = narrated.catch(() => "");
+        pending.push(narrated.then(async (line) => {
+          if (!isCurrent() || currentAttempt !== attempt) return;
+          const visual = prepareVisualScene(plannedScene, mode);
+          const withNarration = line ? { ...visual, narration: line } : visual;
+          const spoken = line ? await voiceRef.current.prepare(line, { signal: controller.signal }) : void 0;
+          if (!isCurrent() || currentAttempt !== attempt) return;
+          ready[position] = pacedScene(withNarration, spoken?.seconds, currentOptions.templates);
+          flush();
+        }));
+      }
+      await Promise.all(pending);
+      if (terminalError) throw terminalError;
+      if (planned.length === 0 || ready.filter(Boolean).length === 0 || !style) {
+        throw new VideoError("The video response contained no playable scenes", { code: "empty_response" });
+      }
+      let suggestions2 = [];
+      try {
+        const suggestionsResponse = await request("suggestions", {
+          method: "POST",
+          body: JSON.stringify({ prompt, lines })
+        }, controller.signal);
+        if (suggestionsResponse.ok) {
+          suggestions2 = (await suggestionsResponse.json()).suggestions ?? [];
+        }
+      } catch (cause) {
+        if (controller.signal.aborted) throw cause;
+      }
+      return {
+        video: {
+          schemaVersion: "0.1",
+          orientation,
+          scenes: ready.filter((entry) => entry != null),
+          style
+        },
+        suggestions: suggestions2
+      };
+    };
+    try {
+      let response;
+      try {
+        response = await runAttempt(attempt);
+      } catch (cause) {
+        if (controller.signal.aborted || timeline) throw cause;
+        attempt += 1;
+        ready = [];
+        appended = 0;
+        style = void 0;
+        response = await runAttempt(attempt);
+      }
+      if (!isCurrent()) return void 0;
+      planDone = true;
+      flush();
+      dispatch({ type: "complete", id, video: response.video, suggestions: response.suggestions });
+      return response.video;
+    } catch (cause) {
+      if (runRef.current !== run) return void 0;
+      if (controller.signal.aborted && !(controller.signal.reason instanceof DOMException && controller.signal.reason.name === "TimeoutError")) {
+        return void 0;
+      }
+      terminal = true;
+      openingController.abort(new DOMException("Response failed", "AbortError"));
+      timeline?.complete();
+      if (timelineRef.current === timeline) timelineRef.current = void 0;
+      const error = errorFrom2(cause);
+      dispatch({ type: "error", id, error });
+      return void 0;
+    } finally {
+      clearTimeout(timeout);
+      if (runRef.current === run) inFlightRef.current = void 0;
+    }
+  }, [request]);
+  const pause = useCallback3(() => {
+    heldRef.current = true;
+    voiceRef.current.pause();
+    dispatch({ type: "pause" });
+  }, []);
+  const resume = useCallback3(() => {
+    heldRef.current = false;
+    voiceRef.current.resume();
+    dispatch({ type: "resume" });
+    flushRef.current?.();
+  }, []);
+  const replay = useCallback3(() => {
+    const turn = stateRef.current.turns.find((entry) => entry.id === stateRef.current.shownTurnId);
+    if (!turn?.completed || !turn.video) return;
+    if (inFlightRef.current) {
+      runRef.current += 1;
+      inFlightRef.current.abort(new DOMException("Replaying a saved response", "AbortError"));
+      inFlightRef.current = void 0;
+    }
+    openingRef.current?.abort(new DOMException("Replaying a saved response", "AbortError"));
+    openingRef.current = void 0;
+    timelineRef.current?.complete();
+    timelineRef.current = void 0;
+    narrationRef.current.interrupt();
+    heldRef.current = false;
+    voiceRef.current.resume();
+    dispatch({ type: "replay" });
+  }, []);
+  const selectTurn = useCallback3((id) => {
+    const turn = stateRef.current.turns.find((entry) => entry.id === id);
+    if (!turn?.completed || !turn.video) return;
+    if (inFlightRef.current) {
+      runRef.current += 1;
+      inFlightRef.current.abort(new DOMException("Viewing a saved response", "AbortError"));
+      inFlightRef.current = void 0;
+    }
+    openingRef.current?.abort(new DOMException("Viewing a saved response", "AbortError"));
+    openingRef.current = void 0;
+    timelineRef.current?.complete();
+    timelineRef.current = void 0;
+    narrationRef.current.interrupt();
+    heldRef.current = false;
+    voiceRef.current.resume();
+    dispatch({ type: "select", id });
+  }, []);
+  const reset = useCallback3(() => {
+    cancel("Session reset");
+    heldRef.current = false;
+    voiceRef.current.resume();
+    dispatch({ type: "reset" });
+  }, [cancel]);
+  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 ?? ["templates"];
+  const suggestions = shownTurn?.suggestions ?? [];
+  const fullTranscript = shownTurn ? transcriptFor(shownTurn) : [];
+  const transcript = shownTurn && shownTurn === currentTurn && state.playback?.kind !== "video" ? fullTranscript.slice(0, (shownTurn.opening ? 1 : 0) + state.spokenUpTo + 1) : fullTranscript;
+  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,
+    orientation: shownTurn?.fixedOrientation ? shownTurn.orientation : "auto",
+    onSceneChange: (scene, index) => {
+      if (stateRef.current.playerKey !== playbackKey) return;
+      const firstFrame = firstFrameRef.current;
+      if (index === 0 && firstFrame && !firstFrame.reported && state.playback?.kind === "stream") {
+        firstFrame.reported = true;
+        try {
+          void optionsRef.current.onFirstFrame?.({
+            turnId: firstFrame.turnId,
+            mode: firstFrame.mode,
+            timeToFirstFrameMs: Math.max(0, Math.round(monotonicNow() - firstFrame.startedAt))
+          });
+        } catch {
+        }
+      }
+      dispatch({ type: "scene", key: playbackKey, scene, index });
+      narrationRef.current.onSceneChange(scene, index);
+    },
+    onPlaybackEnd: () => dispatch({ type: "playback-end", key: playbackKey }),
+    onError: (cause) => {
+      const id = stateRef.current.turns.at(-1)?.id;
+      if (id) dispatch({ type: "error", id, error: errorFrom2(cause) });
+    }
+  } : void 0;
+  return {
+    ask,
+    cancel,
+    pause,
+    resume,
+    replay,
+    selectTurn,
+    reset,
+    turns: state.turns,
+    currentTurn,
+    shownTurn,
+    capabilities: state.capabilities,
+    welcome: state.welcome,
+    availableModes,
+    status: state.status,
+    error: state.error,
+    suggestions,
+    caption: state.caption,
+    transcript,
+    speaking: narration.speaking || state.openingSpeaking,
+    muted: state.muted,
+    setMuted,
+    playbackEnded: state.playbackEnded,
+    playerKey: state.playerKey,
+    playerProps
+  };
+}
+
+// src/video-chat/video-chat.tsx
+import { useCallback as useCallback6, useEffect as useEffect9, useId, useMemo as useMemo3, useRef as useRef7, useState as useState6 } from "react";
+
+// src/video-chat/modes.ts
+var visualModes = [
+  { id: "templates", label: "Templates only", note: "Rendered scenes \xB7 free and instant" },
+  { id: "full", label: "Full AI video", note: "Every beat filmed \xB7 billed per clip" }
+];
+var defaultMode = visualModes[0];
+var modeById = (id) => visualModes.find((mode) => mode.id === id) ?? defaultMode;
+
+// src/video-chat/themes.ts
+var GROUND = {
+  font: "Inter",
+  scriptFont: "Caveat",
+  // The brand's indigo into blue. Deeper than it looks like it wants to be:
+  // the renderer holds captions to 4.5:1 against this ground, and the brand's
+  // own bright blue (#00A5FF) measures 2.68:1 under white - so the light end
+  // stays at a blue that clears the bar (5.17:1) and the bright one is spent
+  // on accents instead, where it sits on the dark ground rather than under
+  // white type.
+  background: { colors: ["#1C0277", "#2563eb"] },
+  foreground: "#ffffff",
+  surface: "#1C0277",
+  surfaceElevated: "#2f4fc4",
+  // Not the brand's #7065A5: muted text still has to be read, and that violet
+  // measures 3.66:1 on the dark end of this ground and worse on the light one.
+  // The brand violet earns its place as a surface, not as type.
+  muted: "#d7d3f0"
+};
+function look(primary, secondary) {
+  const { font, scriptFont, background, ...colors } = GROUND;
+  return { font, scriptFont, background, colors: { ...colors, primary, secondary } };
+}
+var themes = [
+  {
+    id: "documentary",
+    label: "Documentary",
+    brand: look("#FF3A71", "#FFB100"),
+    generatedLook: "Natural daylight, documentary realism, shallow depth of field, fine 35mm grain, muted natural palette. Photoreal, no illustration."
+  },
+  {
+    id: "illustrated",
+    label: "Illustrated",
+    brand: look("#00A5FF", "#FF006F"),
+    generatedLook: "Hand-drawn cel animation, rough ink contours, visible paper grain, flat cobalt, crimson and ochre against a deep ground. No photorealism."
+  },
+  {
+    id: "blueprint",
+    label: "Blueprint",
+    brand: look("#00A5FF", "#FFB100"),
+    generatedLook: "Technical blueprint drawing, precise white linework on deep cyanotype blue, faint measurement grid, one warm accent. Schematic, no photorealism."
+  }
+];
+function themeBackground(brand) {
+  const background = brand.background;
+  if (background?.colors && background.colors.length >= 2) {
+    return `linear-gradient(175deg, ${background.colors[0]} 0%, ${background.colors[1]} 100%)`;
+  }
+  return background?.color ?? "#4c2ba8";
+}
+var defaultTheme = themes[0];
+var themeById = (id) => themes.find((theme) => theme.id === id) ?? defaultTheme;
+
+// src/video-chat/icons.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var stroke = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.75,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function Glyph({ children }) {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
+}
+var Plus = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" }) });
+var Gear = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
+  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx3("path", { d: "m22 9-6 6M16 9l6 6" })
+] });
+var Mic = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
+  /* @__PURE__ */ jsx3("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsx3("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v4" })
+] });
+var Send = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("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__ */ jsx3("rect", { x: "7", y: "5", width: "3.4", height: "14", rx: "1.4" }),
+  /* @__PURE__ */ jsx3("rect", { x: "13.6", y: "5", width: "3.4", height: "14", rx: "1.4" })
+] });
+var Play = () => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M8 5.5v13l11-6.5z" }) });
+var Replay = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
+  /* @__PURE__ */ jsx3("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
+  /* @__PURE__ */ jsx3("path", { d: "M3 3v5h5" })
+] });
+var ChevronUp = () => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", ...stroke, children: /* @__PURE__ */ jsx3("path", { d: "m6 15 6-6 6 6" }) });
+var Close = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12M18 6 6 18" }) });
+var Warning = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
+  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx3("path", { d: "M12 8v5M12 16.2v.1" })
+] });
+
+// src/video-chat/use-dismiss.ts
+import { useEffect as useEffect6 } from "react";
+function useDismiss(open, close, surfaces) {
+  useEffect6(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      close();
+    };
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (surfaces.some((surface) => surface.current?.contains(target))) return;
+      close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, close, surfaces]);
+}
+function useFocusTrap(active, surface) {
+  useEffect6(() => {
+    if (!active) return;
+    const returnTo = document.activeElement;
+    const focusable = () => Array.from(
+      surface.current?.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      ) ?? []
+    ).filter((node) => node.offsetParent !== null);
+    focusable()[0]?.focus();
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const nodes = focusable();
+      if (nodes.length === 0) return;
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      const active2 = document.activeElement;
+      if (event.shiftKey && (active2 === first || !surface.current?.contains(active2))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active2 === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      returnTo?.focus?.();
+    };
+  }, [active, surface]);
+}
+
+// src/video-chat/suggestion-cards.tsx
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Frame({ media, poster, playing }) {
+  const video = useRef5(null);
+  useEffect7(() => {
+    const element = video.current;
+    if (!element || playing === void 0) return;
+    if (playing) void element.play().catch(() => void 0);
+    else element.pause();
+  }, [playing]);
+  if (!media) return null;
+  if (media.type === "image") return /* @__PURE__ */ jsx4("img", { className: "frame-media", src: media.url, alt: "" });
+  return /* @__PURE__ */ jsx4(
+    "video",
+    {
+      ref: video,
+      className: "frame-media",
+      src: media.url,
+      poster: poster ? media.posterUrl : void 0,
+      autoPlay: playing !== false,
+      muted: true,
+      loop: true,
+      playsInline: true,
+      preload: "metadata",
+      "aria-hidden": "true"
+    }
+  );
+}
+function SuggestionCards({ suggestions, label, onAsk }) {
+  const railRef = useRef5(null);
+  const [at, setAt] = useState4(0);
+  const [taken, setTaken] = useState4(false);
+  const take = useCallback4((index) => {
+    setTaken(true);
+    setAt(index);
+  }, []);
+  useEffect7(() => {
+    if (taken || suggestions.length < 2) return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    const tour = window.setInterval(() => setAt((index) => (index + 1) % suggestions.length), 5e3);
+    return () => window.clearInterval(tour);
+  }, [taken, suggestions.length]);
+  useEffect7(() => {
+    const rail = railRef.current;
+    const card = rail?.children[at];
+    if (!rail || !card) return;
+    if (rail.scrollWidth <= rail.clientWidth + 4) return;
+    const centred = card.offsetLeft - (rail.clientWidth - card.offsetWidth) / 2;
+    rail.scrollTo({ left: Math.max(0, centred), behavior: "smooth" });
+  }, [at]);
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("ul", { className: "cards", ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        "data-active": index === at ? "" : void 0,
+        onFocus: () => take(index),
+        onPointerEnter: () => take(index),
+        onClick: () => onAsk(card),
+        children: [
+          /* @__PURE__ */ jsx4(Frame, { media: card.media, playing: index === at }),
+          /* @__PURE__ */ jsx4("span", { className: "card-wash", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx4("span", { className: "card-prompt", children: card.prompt })
+        ]
+      }
+    ) }, card.prompt)) }),
+    suggestions.length > 1 && /* @__PURE__ */ jsx4("div", { className: "card-dots", role: "group", "aria-label": `${label} navigation`, children: suggestions.map((card, index) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": index === at,
+        "aria-label": `Show suggestion ${index + 1}: ${card.prompt}`,
+        className: index === at ? "on" : void 0,
+        onClick: () => take(index)
+      },
+      card.prompt
+    )) })
+  ] });
+}
+
+// src/video-chat/welcome.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Welcome({ data, onAsk, title }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "welcome", children: [
+    /* @__PURE__ */ jsx5(Frame, { media: data?.hero ?? null, poster: true }),
+    /* @__PURE__ */ jsx5("div", { className: "welcome-wash", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs5("div", { className: "welcome-body", children: [
+      /* @__PURE__ */ jsx5("h1", { className: "welcome-title", children: title ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        "An AI chat that responds",
+        /* @__PURE__ */ jsx5("br", {}),
+        /* @__PURE__ */ jsx5("em", { children: "in video, not text." })
+      ] }) }),
+      /* @__PURE__ */ jsx5(SuggestionCards, { suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
+    ] })
+  ] });
+}
+
+// src/video-chat/use-voice-input.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState5 } from "react";
+function recognitionConstructor() {
+  if (typeof window === "undefined") return void 0;
+  const holder = window;
+  return holder.SpeechRecognition ?? holder.webkitSpeechRecognition;
+}
+function recorderAvailable() {
+  return typeof window !== "undefined" && typeof window.MediaRecorder === "function" && Boolean(window.navigator.mediaDevices?.getUserMedia);
+}
+function supportsVoiceInput(transcriptionAvailable) {
+  return recognitionConstructor() !== void 0 || transcriptionAvailable && recorderAvailable();
+}
+var WHY = {
+  "not-allowed": "The microphone is blocked for this site. Allow it in your browser's settings, then try again.",
+  "service-not-allowed": "The microphone is blocked for this site. Allow it in your browser's settings, then try again.",
+  "no-speech": "I did not catch that.",
+  "audio-capture": "No microphone was found."
+};
+function actionEndpoint3(endpoint) {
+  const value = String(endpoint);
+  return `${value}${value.includes("?") ? "&" : "?"}action=transcription`;
+}
+async function transcribeRecording(clip, signal, options) {
+  const headers = new Headers(options.headers);
+  headers.set("content-type", clip.type);
+  const response = await (options.fetcher ?? fetch)(actionEndpoint3(options.endpoint ?? "/api/video-chat"), {
+    method: "POST",
+    headers,
+    body: clip,
+    signal,
+    credentials: options.credentials
+  });
+  if (!response.ok) {
+    const detail = await response.json().catch(() => ({}));
+    const message = typeof detail.error === "string" ? detail.error : detail.error?.message;
+    throw new Error(message ?? "The recording could not be transcribed.");
+  }
+  return String((await response.json()).text ?? "").trim();
+}
+async function recordAndTranscribe(signal, ready, captured, options) {
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  let clip;
+  try {
+    if (signal.aborted) return "";
+    const chunks = [];
+    const recorder = new MediaRecorder(stream);
+    recorder.ondataavailable = (event) => {
+      if (event.data.size) chunks.push(event.data);
+    };
+    const finished = new Promise((resolve) => {
+      recorder.onstop = () => resolve();
+    });
+    const finish = () => {
+      if (recorder.state !== "inactive") recorder.stop();
+    };
+    ready(finish);
+    signal.addEventListener("abort", finish, { once: true });
+    if (signal.aborted) return "";
+    recorder.start(250);
+    await finished;
+    signal.removeEventListener("abort", finish);
+    if (signal.aborted || chunks.length === 0) return "";
+    captured();
+    clip = new Blob(chunks, { type: recorder.mimeType || "audio/webm" });
+  } finally {
+    for (const track of stream.getTracks()) track.stop();
+  }
+  return clip ? transcribeRecording(clip, signal, options) : "";
+}
+function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {}) {
+  const [supported, setSupported] = useState5(false);
+  const [listening, setListening] = useState5(false);
+  const [error, setError] = useState5();
+  const [thinking, setThinking] = useState5(false);
+  const recognitionRef = useRef6(void 0);
+  const useRecorderRef = useRef6(false);
+  const operationRef = useRef6(void 0);
+  const handlerRef = useRef6(onTranscript);
+  handlerRef.current = onTranscript;
+  useEffect8(() => {
+    setSupported(supportsVoiceInput(transcriptionAvailable));
+  }, [transcriptionAvailable]);
+  const stop = useCallback5(() => {
+    recognitionRef.current?.abort();
+    recognitionRef.current = void 0;
+    const operation = operationRef.current;
+    operationRef.current = void 0;
+    operation?.controller.abort();
+    operation?.finish?.();
+    setListening(false);
+    setThinking(false);
+  }, []);
+  useEffect8(() => () => {
+    recognitionRef.current?.abort();
+    recognitionRef.current = void 0;
+    const operation = operationRef.current;
+    operationRef.current = void 0;
+    operation?.controller.abort();
+    operation?.finish?.();
+  }, []);
+  const finish = useCallback5(() => {
+    const recognition = recognitionRef.current;
+    if (recognition) {
+      recognition.stop();
+      return;
+    }
+    const operation = operationRef.current;
+    if (operation?.finish) {
+      operation.finish();
+      setListening(false);
+      return;
+    }
+    stop();
+  }, [stop]);
+  const record = useCallback5(async () => {
+    if (!transcriptionAvailable || !recorderAvailable()) {
+      setError("Server transcription is not configured.");
+      return;
+    }
+    if (operationRef.current) return;
+    const operation = { controller: new AbortController(), finish: void 0 };
+    operationRef.current = operation;
+    setError(void 0);
+    setListening(true);
+    try {
+      const heard = await recordAndTranscribe(
+        operation.controller.signal,
+        (halt) => {
+          if (operationRef.current === operation) operation.finish = halt;
+        },
+        () => {
+          if (operationRef.current !== operation) return;
+          setListening(false);
+          setThinking(true);
+        },
+        options
+      );
+      if (!heard || operation.controller.signal.aborted || operationRef.current !== operation) return;
+      handlerRef.current(heard);
+    } catch (cause) {
+      if (operation.controller.signal.aborted || operationRef.current !== operation) return;
+      setListening(false);
+      const message = cause instanceof Error ? cause.message : String(cause);
+      setError(/denied|not allowed/i.test(message) ? "The microphone is blocked for this site. Allow it in your browser's settings, then try again." : message);
+    } finally {
+      if (operationRef.current === operation) {
+        operationRef.current = void 0;
+        setListening(false);
+        setThinking(false);
+      }
+    }
+  }, [transcriptionAvailable, options.endpoint, options.headers, options.credentials, options.fetcher]);
+  const toggle = useCallback5(() => {
+    if (listening) {
+      finish();
+      return;
+    }
+    const Recognition = recognitionConstructor();
+    if (!Recognition || useRecorderRef.current) {
+      void record();
+      return;
+    }
+    setError(void 0);
+    const recognition = new Recognition();
+    recognition.lang = document.documentElement.lang || "en-US";
+    recognition.continuous = false;
+    recognition.interimResults = true;
+    recognition.onresult = (event) => {
+      if (recognitionRef.current !== recognition) return;
+      let heard = "";
+      for (let index = event.resultIndex; index < event.results.length; index += 1) {
+        heard += event.results[index]?.[0]?.transcript ?? "";
+      }
+      if (heard.trim()) handlerRef.current(heard.trim());
+    };
+    recognition.onend = () => {
+      if (recognitionRef.current !== recognition) return;
+      recognitionRef.current = void 0;
+      setListening(false);
+    };
+    recognition.onerror = (event) => {
+      if (recognitionRef.current !== recognition) return;
+      recognitionRef.current = void 0;
+      setListening(false);
+      if ((event.error === "network" || event.error === "service-not-allowed") && transcriptionAvailable && recorderAvailable()) {
+        useRecorderRef.current = true;
+        void record();
+        return;
+      }
+      setError(event.error === "network" ? "Speech recognition is unavailable in this browser." : WHY[event.error ?? ""] ?? "The microphone stopped unexpectedly.");
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+      setListening(true);
+    } catch {
+      setListening(false);
+      setError("The microphone could not be started.");
+    }
+  }, [listening, finish, record, transcriptionAvailable]);
+  return { supported, listening, thinking, error, toggle, stop };
+}
+
+// src/video-chat/video-chat.tsx
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DESKTOP_WIDTH = 900;
+function useViewportOrientation() {
+  const [portrait, setPortrait] = useState6(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`).matches : false);
+  useEffect9(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`);
+    const update = () => setPortrait(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  return portrait ? "portrait" : "landscape";
+}
+var STEPS = [
+  "Rolling camera\u2026",
+  "Framing the shots\u2026",
+  "Filming your response\u2026",
+  "Still filming\u2026"
+];
+function useFilmingStep(active, key) {
+  const [step, setStep] = useState6(0);
+  useEffect9(() => {
+    if (!active) return;
+    setStep(0);
+    const stepper = window.setInterval(() => setStep((current) => current + 1), 3e3);
+    return () => window.clearInterval(stepper);
+  }, [active, key]);
+  return STEPS[Math.min(step, STEPS.length - 1)];
+}
+function Waveform({ active, listening }) {
+  return /* @__PURE__ */ jsx6("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx6("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
+}
+function VideoChat({ options = {}, className, welcomeTitle }) {
+  const [draft, setDraft] = useState6("");
+  const [themeId, setThemeId] = useState6(defaultTheme.id);
+  const [modeId, setModeId] = useState6(options.mode ?? defaultMode.id);
+  const [historyOpen, setHistoryOpen] = useState6(false);
+  const [settingsOpen, setSettingsOpen] = useState6(false);
+  const [sheetOpen, setSheetOpen] = useState6(false);
+  const viewportOrientation = useViewportOrientation();
+  const [themeChoice, setThemeChoice] = useState6("system");
+  const theme = themeById(themeId);
+  const sessionOrientation = options.orientation ?? viewportOrientation;
+  const { brand: configuredBrand, style: configuredStyle, ...sessionOptions } = options;
+  const presentationBrand = configuredBrand ?? theme.brand;
+  const chat = useVideoChat({
+    ...sessionOptions,
+    mode: modeId,
+    orientation: sessionOrientation,
+    brand: presentationBrand,
+    style: { generatedLook: theme.generatedLook, ...configuredStyle }
+  });
+  const instanceId = useId();
+  const historyId = `${instanceId}-history`;
+  const settingsId = `${instanceId}-settings`;
+  const promptId = `${instanceId}-prompt`;
+  const responseTitleId = `${instanceId}-response-title`;
+  const appearanceName = `${instanceId}-appearance`;
+  const visualsName = `${instanceId}-visuals`;
+  const styleName = `${instanceId}-style`;
+  const inputRef = useRef7(null);
+  const historyRef = useRef7(null);
+  const historyButtonRef = useRef7(null);
+  const settingsRef = useRef7(null);
+  const settingsButtonRef = useRef7(null);
+  const sheetRef = useRef7(null);
+  const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
+    endpoint: options.endpoint,
+    headers: options.headers,
+    credentials: options.credentials,
+    fetcher: options.fetcher
+  });
+  const historySurfaces = useMemo3(() => [historyRef, historyButtonRef], []);
+  const settingsSurfaces = useMemo3(() => [settingsRef, settingsButtonRef], []);
+  const noSurfaces = useMemo3(() => [], []);
+  const closeHistory = useCallback6(() => setHistoryOpen(false), []);
+  const closeSettings = useCallback6(() => setSettingsOpen(false), []);
+  const closeSheet = useCallback6(() => setSheetOpen(false), []);
+  useDismiss(historyOpen, closeHistory, historySurfaces);
+  useDismiss(settingsOpen, closeSettings, settingsSurfaces);
+  useDismiss(sheetOpen, closeSheet, noSurfaces);
+  useFocusTrap(sheetOpen, sheetRef);
+  const ask = useCallback6((value) => {
+    const prompt = (typeof value === "string" ? value : value.prompt).trim();
+    if (!prompt) return;
+    setDraft("");
+    listen.stop();
+    setHistoryOpen(false);
+    setSettingsOpen(false);
+    setSheetOpen(false);
+    void chat.ask(prompt, typeof value === "string" ? void 0 : {
+      openingMedia: value.media,
+      opening: value.opening
+    });
+  }, [chat, listen]);
+  const newSession = useCallback6(() => {
+    if (chat.turns.length === 0) {
+      inputRef.current?.focus();
+      return;
+    }
+    chat.reset();
+    setHistoryOpen(false);
+    setSettingsOpen(false);
+    setSheetOpen(false);
+  }, [chat]);
+  const current = chat.currentTurn;
+  const shown = chat.shownTurn;
+  const showing = chat.playerProps != null;
+  const waitingForPicture = chat.turns.length > 0 && !showing && (chat.status === "composing" || chat.status === "playing" || chat.status === "paused");
+  const filmingStep = useFilmingStep(waitingForPicture, current?.id);
+  const status = chat.turns.length === 0 ? "idle" : chat.status === "composing" ? "drawing" : chat.status === "playing" ? "narrating" : chat.status === "error" || chat.status === "cancelled" ? "ended" : chat.status;
+  const shownOrientation = shown?.orientation ?? sessionOrientation;
+  const stageOrientation = shown?.fixedOrientation ? shownOrientation : sessionOrientation;
+  const availableModes = visualModes.filter((option) => chat.availableModes.includes(option.id));
+  const selectedMode = modeById(modeId);
+  const line = chat.caption ?? "";
+  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx6(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx6(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx6(Replay, {}) } : void 0;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `vanillasky-video-chat${className ? ` ${className}` : ""}`,
+      "data-orientation": stageOrientation,
+      "data-theme": themeChoice,
+      children: [
+        /* @__PURE__ */ jsxs6("header", { className: "chrome", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "group", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "round",
+                "aria-label": chat.turns.length === 0 ? "Ask a prompt" : "New session",
+                onClick: newSession,
+                children: /* @__PURE__ */ jsx6(Plus, {})
+              }
+            ),
+            chat.turns.length > 0 && /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                ref: historyButtonRef,
+                type: "button",
+                className: "pill",
+                "aria-expanded": historyOpen,
+                "aria-controls": historyId,
+                onClick: () => {
+                  setHistoryOpen((open) => !open);
+                  setSettingsOpen(false);
+                },
+                children: [
+                  chat.turns.length,
+                  " asked"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "group", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                ref: settingsButtonRef,
+                type: "button",
+                className: "round",
+                "aria-label": "Settings",
+                "aria-expanded": settingsOpen,
+                "aria-controls": settingsId,
+                "aria-haspopup": "dialog",
+                onClick: () => {
+                  setSettingsOpen((open) => !open);
+                  setHistoryOpen(false);
+                },
+                children: /* @__PURE__ */ jsx6(Gear, {})
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "round",
+                "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__ */ jsx6(Muted, {}) : /* @__PURE__ */ jsx6(Sound, {})
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "stage-area", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: themeBackground(presentationBrand) }, children: [
+            !showing && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsx6("div", { className: "ground", "aria-hidden": "true" }),
+              shown?.openingMedia && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+                /* @__PURE__ */ jsx6(Frame, { media: shown.openingMedia, poster: true }),
+                /* @__PURE__ */ jsx6("div", { className: "opening-wash", "aria-hidden": "true" })
+              ] }),
+              chat.turns.length === 0 && /* @__PURE__ */ jsx6(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+              shown?.prompt && /* @__PURE__ */ jsxs6("div", { className: "asked", children: [
+                /* @__PURE__ */ jsx6("p", { className: "asked-prompt", children: shown.prompt }),
+                waitingForPicture && /* @__PURE__ */ jsx6("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
+              ] })
+            ] }),
+            chat.playerProps && /* @__PURE__ */ jsx6(
+              VideoPlayer,
+              {
+                ...chat.playerProps,
+                templates: options.templates,
+                responsiveBreakpoint: DESKTOP_WIDTH,
+                ariaLabel: chat.playerProps.video ? "Replay" : "The response"
+              },
+              chat.playerKey
+            ),
+            showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "ending", children: [
+              /* @__PURE__ */ jsx6("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs6("div", { className: "ending-body", children: [
+                /* @__PURE__ */ jsx6("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx6(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
+              ] })
+            ] })
+          ] }),
+          historyOpen && /* @__PURE__ */ jsx6("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", "aria-label": "Prompts this session", children: chat.turns.map((turn, index) => /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              className: turn.id === shown?.id ? "current" : void 0,
+              disabled: !turn.completed || !turn.video,
+              onClick: () => {
+                chat.selectTurn(turn.id);
+                setHistoryOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx6("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsx6("span", { className: "prompt", children: turn.prompt })
+              ]
+            },
+            turn.id
+          )) }),
+          settingsOpen && /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              ref: settingsRef,
+              id: settingsId,
+              className: "sheet-popover settings",
+              role: "dialog",
+              "aria-label": "Settings",
+              children: [
+                /* @__PURE__ */ jsxs6("fieldset", { children: [
+                  /* @__PURE__ */ jsx6("legend", { children: "Appearance" }),
+                  [["system", "Match system"], ["light", "Light"], ["dark", "Dark"]].map(([value, label]) => /* @__PURE__ */ jsxs6("label", { children: [
+                    /* @__PURE__ */ jsx6("input", { type: "radio", name: appearanceName, checked: value === themeChoice, onChange: () => setThemeChoice(value) }),
+                    /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6("strong", { children: label }) })
+                  ] }, value))
+                ] }),
+                /* @__PURE__ */ jsx6("p", { className: "settings-note", children: "Visuals and style apply to your next prompt." }),
+                /* @__PURE__ */ jsxs6("fieldset", { children: [
+                  /* @__PURE__ */ jsx6("legend", { children: "Visuals" }),
+                  availableModes.map((option) => /* @__PURE__ */ jsxs6("label", { children: [
+                    /* @__PURE__ */ jsx6("input", { type: "radio", name: visualsName, checked: option.id === selectedMode.id, onChange: () => setModeId(option.id) }),
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx6("strong", { children: option.label }),
+                      option.note
+                    ] })
+                  ] }, option.id))
+                ] }),
+                /* @__PURE__ */ jsxs6("fieldset", { children: [
+                  /* @__PURE__ */ jsx6("legend", { children: "Style" }),
+                  themes.map((option) => /* @__PURE__ */ jsxs6("label", { children: [
+                    /* @__PURE__ */ jsx6("input", { type: "radio", name: styleName, checked: option.id === themeId, onChange: () => setThemeId(option.id) }),
+                    /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6("strong", { children: option.label }) })
+                  ] }, option.id))
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "panel", children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "line-row", children: [
+            /* @__PURE__ */ jsx6("p", { className: "line", "aria-live": "polite", children: line }),
+            shown?.video && /* @__PURE__ */ jsxs6("button", { type: "button", className: "full-response", onClick: () => setSheetOpen(true), children: [
+              "Full response ",
+              /* @__PURE__ */ jsx6(ChevronUp, {})
+            ] })
+          ] }),
+          (chat.error || listen.error) && /* @__PURE__ */ jsxs6("p", { className: "error", role: "status", children: [
+            /* @__PURE__ */ jsx6(Warning, {}),
+            /* @__PURE__ */ jsx6("span", { children: chat.error?.message ?? listen.error })
+          ] }),
+          /* @__PURE__ */ jsxs6("form", { className: "composer", onSubmit: (event) => {
+            event.preventDefault();
+            ask(draft);
+          }, children: [
+            /* @__PURE__ */ jsx6(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+            /* @__PURE__ */ jsx6("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+            /* @__PURE__ */ jsx6(
+              "textarea",
+              {
+                id: promptId,
+                ref: inputRef,
+                rows: 1,
+                value: draft,
+                placeholder: listen.listening ? "Listening\u2026" : listen.thinking ? "Working out what you said\u2026" : status === "narrating" ? "Talking \u2014 type to jump in\u2026" : chat.turns.length > 0 ? "Ask a follow-up\u2026" : "Ask anything\u2026",
+                onChange: (event) => setDraft(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    ask(draft);
+                  }
+                }
+              }
+            ),
+            transport && /* @__PURE__ */ jsx6("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: transport.action, children: transport.icon }),
+            listen.supported && /* @__PURE__ */ jsx6(
+              "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: listen.toggle,
+                children: /* @__PURE__ */ jsx6(Mic, {})
+              }
+            ),
+            /* @__PURE__ */ jsx6("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || status === "drawing", children: /* @__PURE__ */ jsx6(Send, {}) })
+          ] })
+        ] }) }),
+        sheetOpen && shown && /* @__PURE__ */ jsxs6("div", { className: "sheet-layer", children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "scrim", tabIndex: -1, "aria-hidden": "true", onClick: () => setSheetOpen(false) }),
+          /* @__PURE__ */ jsxs6("article", { ref: sheetRef, className: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": responseTitleId, children: [
+            /* @__PURE__ */ jsxs6("header", { children: [
+              /* @__PURE__ */ jsx6("h1", { id: responseTitleId, children: shown.prompt }),
+              /* @__PURE__ */ jsx6("button", { type: "button", className: "round", "aria-label": "Close the full response", onClick: () => setSheetOpen(false), children: /* @__PURE__ */ jsx6(Close, {}) })
+            ] }),
+            /* @__PURE__ */ jsx6("div", { className: "sheet-body", children: chat.transcript.map((entry, index) => /* @__PURE__ */ jsx6("p", { children: entry }, `${index}-${entry}`)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 export {
+  VideoChat,
   VideoError,
   VideoPlayer,
-  useVideo
+  createVideoChatVoice,
+  useNarration,
+  useVideo,
+  useVideoChat
 };