@vanillaskyai/video 0.8.0 → 0.8.2

package/dist/react.js

@@ -2255,6 +2255,17 @@ function reducer(state, action) {
         error: void 0
       };
     }
+    case "restore": {
+      const restored = {
+        ...initialState(state.muted),
+        capabilities: state.capabilities,
+        welcome: state.welcome,
+        turns: action.turns,
+        playerKey: state.playerKey
+      };
+      const latest = action.turns.at(-1);
+      return latest ? reducer(restored, { type: "select", id: latest.id }) : restored;
+    }
     case "reset":
       return { ...initialState(state.muted), capabilities: state.capabilities, welcome: state.welcome };
   }
@@ -2338,6 +2349,9 @@ function prepareVisualScene(scene, mode) {
   return overMedia ? { ...shown, textArchetype: "subtle" } : shown;
 }
 function useVideoChat(options = {}) {
+  return useVideoChatSession(options).chat;
+}
+function useVideoChatSession(options = {}) {
   const optionsRef = useRef3(options);
   optionsRef.current = options;
   const voiceWarningRef = useRef3(() => void 0);
@@ -2861,6 +2875,12 @@ function useVideoChat(options = {}) {
     voiceRef.current.resume();
     dispatch({ type: "reset" });
   }, [cancel]);
+  const restoreSession = useCallback2((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 currentTurn = state.turns.at(-1);
   const shownTurn = state.turns.find((turn) => turn.id === state.shownTurnId) ?? currentTurn;
@@ -2907,7 +2927,7 @@ function useVideoChat(options = {}) {
       if (id) dispatch({ type: "error", id, error: errorFrom(cause) });
     }
   } : void 0;
-  return {
+  const chat = {
     ask,
     cancel,
     pause,
@@ -2934,15 +2954,16 @@ function useVideoChat(options = {}) {
     playerKey: state.playerKey,
     playerProps
   };
+  return { chat, restoreSession };
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useId, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useId, useLayoutEffect, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
 
 // src/video-chat/modes.ts
 var visualModes = [
-  { id: "templates", label: "Templates only", note: "Rendered scenes \xB7 free and instant" },
-  { id: "full", label: "Full AI video", note: "Every beat filmed \xB7 billed per clip" }
+  { id: "templates", label: "Templates only", note: "Animated text, diagrams and charts" },
+  { id: "full", label: "Full AI video", note: "AI-generated footage \xB7 billed per clip" }
 ];
 var defaultMode = visualModes[0];
 var modeById = (id) => visualModes.find((mode) => mode.id === id) ?? defaultMode;
@@ -3406,14 +3427,77 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
   return { supported, listening, thinking, error, toggle, stop };
 }
 
+// src/video-chat/use-immersive-controls.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState5 } from "react";
+function useImmersiveControls(playing, pinned, hasCaptions = false) {
+  const [visible, setVisible] = useState5(true);
+  const hovered = useRef6(false);
+  const focused = useRef6(false);
+  const previousCaptions = useRef6(false);
+  const timer = useRef6(null);
+  const clearTimer = useCallback5(() => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  const reveal = useCallback5(() => {
+    clearTimer();
+    setVisible(true);
+    if (playing && !pinned && !hovered.current && !focused.current) {
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        setVisible(false);
+      }, 2e3);
+    }
+  }, [clearTimer, playing, pinned]);
+  useEffect8(() => {
+    const firstCaption = hasCaptions && !previousCaptions.current;
+    previousCaptions.current = hasCaptions;
+    if (firstCaption && playing && !pinned && !focused.current) {
+      hovered.current = false;
+      clearTimer();
+      setVisible(false);
+    } else {
+      reveal();
+    }
+    return clearTimer;
+  }, [hasCaptions, playing, pinned, reveal, clearTimer]);
+  const onPointerEnter = useCallback5((event) => {
+    if (event?.pointerType === "touch") return;
+    hovered.current = true;
+    reveal();
+  }, [reveal]);
+  const onPointerLeave = useCallback5(() => {
+    if (!hovered.current) return;
+    hovered.current = false;
+    reveal();
+  }, [reveal]);
+  const onFocusCapture = useCallback5((event) => {
+    focused.current = event.target.matches(":focus-visible");
+    reveal();
+  }, [reveal]);
+  const onBlurCapture = useCallback5((event) => {
+    if (focused.current && !event.currentTarget.contains(event.relatedTarget)) {
+      focused.current = false;
+      reveal();
+    }
+  }, [reveal]);
+  return { visible, reveal, onPointerEnter, onPointerLeave, onFocusCapture, onBlurCapture };
+}
+
+// src/video-chat/logo.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Logo() {
+  return /* @__PURE__ */ jsx6("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
+}
+
 // src/video-chat/video-chat.tsx
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
 function useViewportOrientation() {
-  const [portrait, setPortrait] = useState5(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`).matches : false);
-  useEffect8(() => {
+  const [portrait, setPortrait] = useState6(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
+  useEffect9(() => {
     if (typeof window.matchMedia !== "function") return;
-    const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`);
+    const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`);
     const update = () => setPortrait(query.matches);
     update();
     query.addEventListener("change", update);
@@ -3428,8 +3512,8 @@ var STEPS = [
   "Still filming\u2026"
 ];
 function useFilmingStep(active, key) {
-  const [step, setStep] = useState5(0);
-  useEffect8(() => {
+  const [step, setStep] = useState6(0);
+  useEffect9(() => {
     if (!active) return;
     setStep(0);
     const stepper = window.setInterval(() => setStep((current) => current + 1), 3e3);
@@ -3438,22 +3522,29 @@ function useFilmingStep(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)) });
+  return /* @__PURE__ */ jsx7("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx7("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
 function VideoChat({ options = {}, className, welcomeTitle }) {
-  const [draft, setDraft] = useState5("");
-  const [themeId, setThemeId] = useState5(defaultTheme.id);
-  const [modeId, setModeId] = useState5(options.mode ?? defaultMode.id);
-  const [historyOpen, setHistoryOpen] = useState5(false);
-  const [settingsOpen, setSettingsOpen] = useState5(false);
-  const [sheetOpen, setSheetOpen] = useState5(false);
+  const [draft, setDraft] = useState6("");
+  const [savedSessions, setSavedSessions] = useState6([]);
+  const [themeId, setThemeId] = useState6(defaultTheme.id);
+  const [modeId, setModeId] = useState6(options.mode ?? defaultMode.id);
+  const [historyOpen, setHistoryOpen] = useState6(false);
+  const [settingsOpen, setSettingsOpen] = useState6(false);
+  const [aboutOpen, setAboutOpen] = useState6(false);
+  const [captionsOn, setCaptionsOn] = useState6(true);
+  const [captionsExpanded, setCaptionsExpanded] = useState6(false);
+  const [alwaysShowControls, setAlwaysShowControls] = useState6(false);
+  const [editing, setEditing] = useState6(false);
+  const resumeAfterInput = useRef7(false);
+  const panelRef = useRef7(null);
+  const composerRef = useRef7(null);
   const viewportOrientation = useViewportOrientation();
-  const [themeChoice, setThemeChoice] = useState5("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({
+  const { chat, restoreSession } = useVideoChatSession({
     ...sessionOptions,
     mode: modeId,
     orientation: sessionOrientation,
@@ -3464,16 +3555,13 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   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 = useRef6(null);
-  const historyRef = useRef6(null);
-  const historyButtonRef = useRef6(null);
-  const settingsRef = useRef6(null);
-  const settingsButtonRef = useRef6(null);
-  const sheetRef = useRef6(null);
+  const inputRef = useRef7(null);
+  const historyRef = useRef7(null);
+  const historyButtonRef = useRef7(null);
+  const settingsRef = useRef7(null);
+  const settingsButtonRef = useRef7(null);
   const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
     endpoint: options.endpoint,
     headers: options.headers,
@@ -3482,40 +3570,49 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   });
   const historySurfaces = useMemo2(() => [historyRef, historyButtonRef], []);
   const settingsSurfaces = useMemo2(() => [settingsRef, settingsButtonRef], []);
-  const noSurfaces = useMemo2(() => [], []);
-  const closeHistory = useCallback5(() => setHistoryOpen(false), []);
-  const closeSettings = useCallback5(() => setSettingsOpen(false), []);
-  const closeSheet = useCallback5(() => setSheetOpen(false), []);
+  const closeHistory = useCallback6(() => setHistoryOpen(false), []);
+  const closeSettings = useCallback6(() => setSettingsOpen(false), []);
   useDismiss(historyOpen, closeHistory, historySurfaces);
   useDismiss(settingsOpen, closeSettings, settingsSurfaces);
-  useDismiss(sheetOpen, closeSheet, noSurfaces);
-  useFocusTrap(sheetOpen, sheetRef);
-  const ask = useCallback5((value) => {
+  useFocusTrap(settingsOpen, settingsRef);
+  useFocusTrap(historyOpen, historyRef);
+  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);
+    setCaptionsExpanded(false);
+    setEditing(false);
+    resumeAfterInput.current = false;
+    inputRef.current?.blur();
     void chat.ask(prompt, typeof value === "string" ? void 0 : {
       openingMedia: value.media,
       opening: value.opening
     });
   }, [chat, listen]);
-  const newSession = useCallback5(() => {
+  const newSession = useCallback6(() => {
     if (chat.turns.length === 0) {
       inputRef.current?.focus();
       return;
     }
+    listen.stop();
+    setDraft("");
+    const completed = chat.turns.filter((turn) => turn.completed && turn.video);
+    if (completed.length) setSavedSessions((sessions) => [{ id: completed[0].id, turns: completed }, ...sessions].slice(0, 10));
     chat.reset();
     setHistoryOpen(false);
     setSettingsOpen(false);
-    setSheetOpen(false);
-  }, [chat]);
+    setCaptionsExpanded(false);
+    setEditing(false);
+    resumeAfterInput.current = false;
+    inputRef.current?.blur();
+  }, [chat, listen]);
   const current = chat.currentTurn;
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
+  const ambientPoster = shown?.openingMedia?.type === "image" ? shown.openingMedia.url : shown?.openingMedia?.posterUrl;
   const 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;
@@ -3524,47 +3621,99 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   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;
+  const fullTranscript = shown?.video ? [shown.opening, ...shown.video.scenes.map((scene) => scene.narration)].filter((entry) => Boolean(entry)) : chat.transcript;
+  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx7(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx7(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx7(Replay, {}) } : void 0;
+  const cancelInput = useCallback6(() => {
+    listen.stop();
+    setDraft("");
+    setEditing(false);
+    inputRef.current?.blur();
+    if (resumeAfterInput.current) chat.resume();
+    resumeAfterInput.current = false;
+  }, [listen, chat]);
+  const beginInput = (speak = false) => {
+    if (!editing) {
+      resumeAfterInput.current = chat.status === "playing" || chat.status === "composing";
+      if (resumeAfterInput.current) chat.pause();
+    }
+    setEditing(true);
+    setSettingsOpen(false);
+    setHistoryOpen(false);
+    if (speak) listen.toggle();
+  };
+  const controls = useImmersiveControls(
+    status === "narrating" || Boolean(line) && status !== "paused",
+    alwaysShowControls || captionsExpanded || editing || historyOpen || settingsOpen || listen.listening || listen.thinking || Boolean(chat.error || listen.error),
+    captionsOn && Boolean(line)
+  );
+  const captionControls = useImmersiveControls(Boolean(line), captionsExpanded, false);
+  const controlEvents = {
+    onPointerEnter: controls.onPointerEnter,
+    onPointerLeave: controls.onPointerLeave,
+    onFocusCapture: controls.onFocusCapture,
+    onBlurCapture: controls.onBlurCapture
+  };
+  useLayoutEffect(() => {
+    const composer = composerRef.current;
+    if (!composer) return;
+    const measure = () => panelRef.current?.style.setProperty("--composer-height", `${composer.getBoundingClientRect().height}px`);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(composer);
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `vanillasky-video-chat${className ? ` ${className}` : ""}`,
       "data-orientation": stageOrientation,
-      "data-theme": themeChoice,
+      "data-controls-visible": controls.visible,
+      tabIndex: 0,
+      "aria-label": "Video conversation",
+      onPointerMove: controls.reveal,
+      onPointerDown: controls.reveal,
+      onKeyDownCapture: controls.reveal,
       children: [
-        /* @__PURE__ */ jsxs6("header", { className: "chrome", children: [
+        /* @__PURE__ */ jsxs6("header", { className: "chrome", ...controlEvents, children: [
+          /* @__PURE__ */ jsx7("div", { className: "session-brand", children: /* @__PURE__ */ jsx7(Logo, {}) }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
                 className: "round",
-                "aria-label": chat.turns.length === 0 ? "Ask a prompt" : "New session",
+                "aria-label": "New session",
                 onClick: newSession,
-                children: /* @__PURE__ */ jsx6(Plus, {})
+                children: [
+                  /* @__PURE__ */ jsx7(Plus, {}),
+                  /* @__PURE__ */ jsx7("span", { className: "nav-label", children: "New session" })
+                ]
               }
             ),
-            chat.turns.length > 0 && /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 ref: historyButtonRef,
                 type: "button",
                 className: "pill",
                 "aria-expanded": historyOpen,
+                "aria-label": "History",
+                "aria-haspopup": "dialog",
                 "aria-controls": historyId,
                 onClick: () => {
                   setHistoryOpen((open) => !open);
                   setSettingsOpen(false);
                 },
                 children: [
-                  chat.turns.length,
-                  " asked"
+                  /* @__PURE__ */ jsx7(Replay, {}),
+                  /* @__PURE__ */ jsx7("span", { className: "nav-label", children: "History" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 ref: settingsButtonRef,
@@ -3578,10 +3727,10 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
                   setSettingsOpen((open) => !open);
                   setHistoryOpen(false);
                 },
-                children: /* @__PURE__ */ jsx6(Gear, {})
+                children: /* @__PURE__ */ jsx7(Gear, {})
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -3589,60 +3738,102 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
                 "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, {})
+                children: chat.muted ? /* @__PURE__ */ jsx7(Muted, {}) : /* @__PURE__ */ jsx7(Sound, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "stage-area", children: [
           /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: themeBackground(presentationBrand) }, children: [
+            showing && /* @__PURE__ */ jsx7("div", { className: "ambient-media", "aria-hidden": "true", children: ambientPoster && /* @__PURE__ */ jsx7("img", { className: "frame-media", src: ambientPoster, alt: "" }) }),
             !showing && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-              /* @__PURE__ */ jsx6("div", { className: "ground", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx7("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" })
+                /* @__PURE__ */ jsx7(Frame, { media: shown.openingMedia, poster: true }),
+                /* @__PURE__ */ jsx7("div", { className: "opening-wash", "aria-hidden": "true" })
               ] }),
-              chat.turns.length === 0 && /* @__PURE__ */ jsx6(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+              chat.turns.length === 0 && /* @__PURE__ */ jsx7(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 })
+                /* @__PURE__ */ jsx7("p", { className: "asked-prompt", children: shown.prompt }),
+                waitingForPicture && /* @__PURE__ */ jsx7("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
               ] })
             ] }),
-            chat.playerProps && /* @__PURE__ */ jsx6(
+            chat.playerProps && /* @__PURE__ */ jsx7("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx7(
               VideoPlayer,
               {
                 ...chat.playerProps,
                 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__ */ jsxs6("div", { className: "ending", children: [
-              /* @__PURE__ */ jsx6("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx7("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 })
+                /* @__PURE__ */ jsx7("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx7(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);
+          historyOpen && /* @__PURE__ */ jsxs6("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "History", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "popover-heading", children: [
+              /* @__PURE__ */ jsx7("h2", { children: "History" }),
+              /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close history", onClick: closeHistory, children: /* @__PURE__ */ jsx7(Close, {}) })
+            ] }),
+            /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Current session" }),
+            chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "history-empty", children: "Your questions will appear here." }),
+            chat.turns.map((turn, index) => /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                className: `history-row${turn.id === shown?.id ? " current" : ""}`,
+                "aria-current": turn.id === shown?.id ? true : void 0,
+                disabled: !turn.completed || !turn.video,
+                onClick: () => {
+                  listen.stop();
+                  setDraft("");
+                  setEditing(false);
+                  resumeAfterInput.current = false;
+                  chat.selectTurn(turn.id);
+                  setHistoryOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx7("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
+                    turn.prompt,
+                    /* @__PURE__ */ jsx7("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
+                  ] })
+                ]
               },
-              children: [
-                /* @__PURE__ */ jsx6("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
-                /* @__PURE__ */ jsx6("span", { className: "prompt", children: turn.prompt })
-              ]
-            },
-            turn.id
-          )) }),
+              turn.id
+            )),
+            savedSessions.length > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Earlier sessions" }),
+              savedSessions.map((session) => /* @__PURE__ */ jsxs6("button", { type: "button", className: "history-row", onClick: () => {
+                listen.stop();
+                setDraft("");
+                setEditing(false);
+                resumeAfterInput.current = false;
+                const completed = chat.turns.filter((turn) => turn.completed && turn.video);
+                setSavedSessions((sessions) => [...completed.length ? [{ id: completed[0].id, turns: completed }] : [], ...sessions.filter((entry) => entry.id !== session.id)].slice(0, 10));
+                restoreSession(session.turns);
+                setHistoryOpen(false);
+                setCaptionsExpanded(false);
+              }, children: [
+                /* @__PURE__ */ jsx7(Replay, {}),
+                /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
+                  session.turns[0]?.prompt,
+                  /* @__PURE__ */ jsxs6("small", { children: [
+                    session.turns.length,
+                    " ",
+                    session.turns.length === 1 ? "answer" : "answers"
+                  ] })
+                ] })
+              ] }, session.id))
+            ] })
+          ] }),
           settingsOpen && /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -3651,97 +3842,151 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
               className: "sheet-popover settings",
               role: "dialog",
               "aria-label": "Settings",
+              "aria-modal": "true",
               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__ */ jsxs6("div", { className: "popover-heading", children: [
+                  /* @__PURE__ */ jsx7("h2", { children: "Settings" }),
+                  /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx7(Close, {}) })
+                ] }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "playback-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Watching" }),
+                  /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx7("strong", { children: "Subtitles" }),
+                      /* @__PURE__ */ jsx7("small", { children: "Read along with the answer" })
+                    ] }),
+                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
+                      setCaptionsOn(event.target.checked);
+                      setCaptionsExpanded(false);
+                    } })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx7("strong", { children: "Keep controls visible" }),
+                      /* @__PURE__ */ jsx7("small", { children: "Keep the input bar on screen" })
+                    ] }),
+                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
+                  ] })
                 ] }),
-                /* @__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("fieldset", { className: "visual-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Video creation" }),
+                  availableModes.map((option) => /* @__PURE__ */ jsxs6("label", { className: "choice-row", children: [
+                    /* @__PURE__ */ jsx7("input", { type: "radio", name: visualsName, checked: option.id === selectedMode.id, onChange: () => setModeId(option.id) }),
                     /* @__PURE__ */ jsxs6("span", { children: [
-                      /* @__PURE__ */ jsx6("strong", { children: option.label }),
-                      option.note
+                      /* @__PURE__ */ jsx7("strong", { children: option.label }),
+                      /* @__PURE__ */ jsx7("small", { children: option.note })
                     ] })
                   ] }, option.id))
                 ] }),
-                /* @__PURE__ */ jsxs6("fieldset", { children: [
-                  /* @__PURE__ */ jsx6("legend", { children: "Style" }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "style-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Video 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 }) })
+                    /* @__PURE__ */ jsx7("input", { type: "radio", name: styleName, checked: option.id === themeId, onChange: () => setThemeId(option.id) }),
+                    /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7("strong", { children: option.label }) })
                   ] }, option.id))
+                ] }),
+                /* @__PURE__ */ jsx7("p", { className: "settings-note", children: "Creation and style changes apply to your next question." }),
+                /* @__PURE__ */ jsxs6("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "section-label", children: "Build with VanillaSky" }),
+                  /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
+                    "Docs",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
+                    "About",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
+                  ] }),
+                  /* @__PURE__ */ jsx7("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx7("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
+                  /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
+                    "GitHub",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                  ] })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__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, {})
-            ] })
-          ] }),
+        /* @__PURE__ */ jsx7("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsx7("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx7("div", { className: "caption-clip", children: /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "line-row",
+              "data-expanded": captionsExpanded,
+              "data-actions-visible": captionControls.visible,
+              onPointerMove: captionControls.onPointerEnter,
+              onPointerLeave: captionControls.onPointerLeave,
+              onPointerDown: captionControls.reveal,
+              onFocusCapture: captionControls.onFocusCapture,
+              onBlurCapture: captionControls.onBlurCapture,
+              children: [
+                captionsOn && line && /* @__PURE__ */ jsxs6("div", { className: "caption-actions", children: [
+                  /* @__PURE__ */ jsxs6("button", { type: "button", className: "caption-action", "aria-label": captionsExpanded ? "Collapse subtitles" : "Expand subtitles", "aria-expanded": captionsExpanded, onClick: () => setCaptionsExpanded((open) => !open), children: [
+                    captionsExpanded ? "Collapse" : "Expand",
+                    /* @__PURE__ */ jsx7(ChevronUp, {})
+                  ] }),
+                  /* @__PURE__ */ jsx7("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
+                    setCaptionsOn(false);
+                    setCaptionsExpanded(false);
+                  }, children: /* @__PURE__ */ jsx7(Close, {}) })
+                ] }),
+                captionsExpanded ? /* @__PURE__ */ jsx7("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx7("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx7("p", { className: "line", "aria-live": "polite", children: line })
+              ]
+            }
+          ) }) }),
           (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__ */ jsx7(Warning, {}),
+            /* @__PURE__ */ jsx7("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);
+          /* @__PURE__ */ jsxs6("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
+            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx7("div", { className: "composer-meta", children: /* @__PURE__ */ jsx7("span", { role: "status", children: listen.listening ? "Listening\u2026 Tap the mic to finish, then review and send." : "Turning your words into a draft\u2026" }) }),
+            /* @__PURE__ */ jsxs6("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
+              event.preventDefault();
+              ask(draft);
+            }, children: [
+              transport && /* @__PURE__ */ jsx7("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
+                listen.stop();
+                setEditing(false);
+                resumeAfterInput.current = false;
+                inputRef.current?.blur();
+                transport.action();
+              }, children: transport.icon }),
+              /* @__PURE__ */ jsx7(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+              /* @__PURE__ */ jsx7("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+              /* @__PURE__ */ jsx7(
+                "textarea",
+                {
+                  id: promptId,
+                  ref: inputRef,
+                  rows: 1,
+                  value: draft,
+                  placeholder: listen.listening ? "Listening\u2026" : chat.turns.length ? "Ask a follow-up\u2026" : "Ask anything\u2026",
+                  onFocus: () => {
+                    if (!editing) beginInput();
+                  },
+                  onChange: (event) => {
+                    setDraft(event.target.value);
+                    event.target.style.height = "auto";
+                    event.target.style.height = `${Math.min(event.target.scrollHeight, 120)}px`;
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                      event.stopPropagation();
+                      cancelInput();
+                    }
+                    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                      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}`)) })
-          ] })
-        ] })
+              ),
+              listen.supported && /* @__PURE__ */ jsx7("button", { type: "button", className: `ghost${listen.listening ? " listening" : ""}`, "aria-label": listen.listening ? "Stop listening" : "Ask by voice", "aria-pressed": listen.listening, disabled: listen.thinking, onClick: () => beginInput(true), children: /* @__PURE__ */ jsx7(Mic, {}) }),
+              /* @__PURE__ */ jsx7("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx7(Send, {}) }),
+              editing && /* @__PURE__ */ jsx7("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx7(Close, {}) })
+            ] })
+          ] }),
+          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
+        ] }) })
       ]
     }
   );