@vanillaskyai/video 0.10.21 → 0.10.22

package/CHANGELOG.md

@@ -4,6 +4,11 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.10.22
+
+- Offer eight diverse homepage prompts with curated footage, a balanced fresh-page shuffle, and stable ordering when returning Home.
+- Browse four cards on desktop and two on mobile, with only the active card loading video.
+
 ## 0.10.21
 
 - Choose illustrated, realistic, or cinematic generated-video direction within the existing chat brief, with consistent treatment across shots and caller style overrides.

package/dist/{chunk-HKUI5BTB.js → chunk-44WND2VP.js}

@@ -8,6 +8,47 @@ import {
   VIDEO_PROTOCOL_VERSION
 } from "./chunk-7NZOMTAL.js";
 
+// src/video-chat/welcome-cards.ts
+var WELCOME_CARDS = [
+  { prompt: "Why do cats stare at us?", category: "curiosity", media: { "url": "https://videos.pexels.com/video-files/6131490/6131490-sd_640_360_25fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/6131490/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "Tell me a joke about office life", category: "entertainment", media: { "url": "https://videos.pexels.com/video-files/7438239/7438239-sd_640_338_25fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/7438239/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "Where would you take me in Japan?", category: "explore", media: { "url": "https://videos.pexels.com/video-files/35972506/15252635_360_640_30fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/35972506/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "How do I make better coffee?", category: "practical", media: { "url": "https://videos.pexels.com/video-files/5564283/5564283-sd_640_360_24fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/5564283/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "What would Earth look like without humans?", category: "explore", media: { "url": "https://videos.pexels.com/video-files/28732001/12464538_640_360_30fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/28732001/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "Tell me a short story with a twist", category: "entertainment", media: { "url": "https://videos.pexels.com/video-files/5683159/5683159-sd_640_360_30fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/5683159/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "Why does music give us goosebumps?", category: "curiosity", media: { "url": "https://videos.pexels.com/video-files/6870450/6870450-sd_640_360_30fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/6870450/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } },
+  { prompt: "How can I make my room feel bigger?", category: "practical", media: { "url": "https://videos.pexels.com/video-files/37479012/15875787_360_640_30fps.mp4", "type": "video", "posterUrl": "https://images.pexels.com/videos/37479012/pictures/preview-0.jpg?auto=compress&fit=crop&w=640" } }
+];
+function orderWelcomeCards(cards, seed) {
+  if (cards.length !== WELCOME_CARDS.length || new Set(cards.map((card) => card.prompt)).size !== cards.length || cards.some((card) => !WELCOME_CARDS.some((entry) => entry.prompt === card.prompt))) return [...cards];
+  let state = seed >>> 0;
+  const random = () => {
+    state = Math.imul(state, 1664525) + 1013904223 >>> 0;
+    return state / 4294967296;
+  };
+  const shuffle = (values) => {
+    const copy = [...values];
+    for (let i = copy.length - 1; i > 0; i--) {
+      const j = Math.floor(random() * (i + 1));
+      [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy;
+  };
+  const groups = /* @__PURE__ */ new Map();
+  for (const card of shuffle(cards)) {
+    const category = WELCOME_CARDS.find((entry) => entry.prompt === card.prompt).category;
+    const group = groups.get(category) ?? [];
+    group.push(card);
+    groups.set(category, group);
+  }
+  const categories = shuffle([...groups.values()]);
+  return [...categories.map((group) => group[0]), ...shuffle(categories.flatMap((group) => group.slice(1)))];
+}
+var pageSeed;
+function welcomeVisitSeed() {
+  return pageSeed ??= Math.floor(Math.random() * 4294967296);
+}
+
 // src/video-chat/recovery.ts
 var MEDIA_RECOVERY_NOTICE = "Some visuals were replaced so your response can continue.";
 
@@ -160,6 +201,9 @@ function safeMediaUrl(value) {
 }
 
 export {
+  WELCOME_CARDS,
+  orderWelcomeCards,
+  welcomeVisitSeed,
   MEDIA_RECOVERY_NOTICE,
   encodeVideoSseEvent,
   decodeVideoSse,

package/dist/react.js

@@ -9,9 +9,11 @@ import {
 import {
   MEDIA_RECOVERY_NOTICE,
   decodeVideoSse,
+  orderWelcomeCards,
   sanitizeVideoChatMedia,
+  welcomeVisitSeed,
   withDeadline
-} from "./chunk-HKUI5BTB.js";
+} from "./chunk-44WND2VP.js";
 import {
   applyVideoEvent,
   checksumVideo,
@@ -2311,7 +2313,7 @@ function useVideoChatSession(options = {}) {
       if (!response.ok) throw await responseError(response);
       return response.json();
     }).then((value) => {
-      if (mountedRef.current) dispatch({ type: "welcome", value });
+      if (mountedRef.current) dispatch({ type: "welcome", value: { ...value, cards: orderWelcomeCards(value.cards, welcomeVisitSeed()) } });
     }).catch(() => void 0);
     return () => {
       endTiming();
@@ -3008,7 +3010,7 @@ function CaptionPages({ text, getProgress }) {
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useId, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useId as useId2, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
 
 // src/video-chat/icons.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3118,7 +3120,7 @@ function useFocusTrap(active, surface) {
 }
 
 // src/video-chat/suggestion-cards.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
+import { useEffect as useEffect7, useId, useRef as useRef5, useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Frame({ media, poster, playing, onReady, onError, revealWhenReady = false }) {
   const video = useRef5(null);
@@ -3130,6 +3132,9 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
     else element.pause();
   }, [playing]);
   if (!media) return null;
+  if (playing === false && media.type === "video" && media.posterUrl) {
+    return /* @__PURE__ */ jsx5("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady, onError });
+  }
   const ready = () => {
     setPlayingUrl(media.url);
     onReady?.();
@@ -3161,37 +3166,38 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
     poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx5("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
   ] });
 }
-function SuggestionCards({ suggestions, label, onAsk }) {
+function SuggestionCards({ suggestions, label, onAsk, browse = false }) {
   const railRef = useRef5(null);
+  const railId = useId();
   const [at, setAt] = useState4(0);
-  const [taken, setTaken] = useState4(false);
-  const take = useCallback3((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]);
+  const [overflow, setOverflow] = useState4({ before: false, after: false });
   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 (!browse || !rail) return;
+    const update = () => setOverflow({ before: rail.scrollLeft > 2, after: rail.scrollLeft + rail.clientWidth < rail.scrollWidth - 2 });
+    update();
+    rail.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer?.observe(rail);
+    return () => {
+      rail.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [browse, suggestions.length]);
+  const move = (direction) => {
+    const rail = railRef.current;
+    if (!rail) return;
+    rail.scrollBy({ left: direction * rail.clientWidth, behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+  };
   if (suggestions.length === 0) return null;
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5("ul", { className: "cards", ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs4(
+  const cards = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("ul", { className: "cards", id: railId, ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
         "data-active": index === at ? "" : void 0,
-        onFocus: () => take(index),
-        onPointerEnter: () => take(index),
+        onFocus: () => setAt(index),
+        onPointerEnter: () => setAt(index),
         onClick: () => onAsk(card),
         children: [
           /* @__PURE__ */ jsx5(Frame, { media: card.media, poster: true, playing: index === at }),
@@ -3207,11 +3213,23 @@ function SuggestionCards({ suggestions, label, onAsk }) {
         "aria-pressed": index === at,
         "aria-label": `Show suggestion ${index + 1}: ${card.prompt}`,
         className: index === at ? "on" : void 0,
-        onClick: () => take(index)
+        onClick: () => {
+          setAt(index);
+          const rail = railRef.current;
+          const card2 = rail?.children[index];
+          if (rail && card2) rail.scrollTo({ left: card2.offsetLeft, behavior: "smooth" });
+        }
       },
       card.prompt
     )) })
   ] });
+  return browse ? /* @__PURE__ */ jsxs4("div", { className: "suggestion-rail", children: [
+    cards,
+    (overflow.before || overflow.after) && /* @__PURE__ */ jsxs4("div", { className: "rail-arrows", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Previous suggestions", "aria-controls": railId, disabled: !overflow.before, onClick: () => move(-1), children: "\u2039" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Next suggestions", "aria-controls": railId, disabled: !overflow.after, onClick: () => move(1), children: "\u203A" })
+    ] })
+  ] }) : cards;
 }
 
 // src/video-chat/welcome.tsx
@@ -3226,7 +3244,7 @@ function Welcome({ data, onAsk, title }) {
         /* @__PURE__ */ jsx6("br", {}),
         /* @__PURE__ */ jsx6("em", { children: "in video, not text." })
       ] }) }),
-      /* @__PURE__ */ jsx6(SuggestionCards, { suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
+      /* @__PURE__ */ jsx6(SuggestionCards, { browse: true, suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
     ] })
   ] });
 }
@@ -3276,7 +3294,7 @@ function OpeningChapter({ title, preparing = false }) {
 }
 
 // src/video-chat/use-voice-input.ts
-import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const holder = window;
@@ -3358,7 +3376,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
   useEffect8(() => {
     setSupported(supportsVoiceInput(transcriptionAvailable));
   }, [transcriptionAvailable]);
-  const stop = useCallback4(() => {
+  const stop = useCallback3(() => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3376,7 +3394,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     operation?.controller.abort();
     operation?.finish?.();
   }, []);
-  const finish = useCallback4(() => {
+  const finish = useCallback3(() => {
     const recognition = recognitionRef.current;
     if (recognition) {
       recognition.stop();
@@ -3390,7 +3408,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     }
     stop();
   }, [stop]);
-  const record = useCallback4(async () => {
+  const record = useCallback3(async () => {
     if (!transcriptionAvailable || !recorderAvailable()) {
       setError("Server transcription is not configured.");
       return;
@@ -3428,7 +3446,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
       }
     }
   }, [transcriptionAvailable, options.endpoint, options.headers, options.credentials, options.fetcher]);
-  const toggle = useCallback4(() => {
+  const toggle = useCallback3(() => {
     if (listening) {
       finish();
       return;
@@ -3480,18 +3498,18 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
 }
 
 // src/video-chat/use-immersive-controls.ts
-import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef8, useState as useState7 } from "react";
 function useImmersiveControls(playing, pinned, hasCaptions = false) {
   const [visible, setVisible] = useState7(true);
   const hovered = useRef8(false);
   const focused = useRef8(false);
   const previousCaptions = useRef8(false);
   const timer = useRef8(null);
-  const clearTimer = useCallback5(() => {
+  const clearTimer = useCallback4(() => {
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
   }, []);
-  const reveal = useCallback5(() => {
+  const reveal = useCallback4(() => {
     clearTimer();
     setVisible(true);
     if (playing && !pinned && !hovered.current && !focused.current) {
@@ -3513,21 +3531,21 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
     }
     return clearTimer;
   }, [hasCaptions, playing, pinned, reveal, clearTimer]);
-  const onPointerEnter = useCallback5((event) => {
+  const onPointerEnter = useCallback4((event) => {
     if (event?.pointerType === "touch") return;
     hovered.current = true;
     reveal();
   }, [reveal]);
-  const onPointerLeave = useCallback5(() => {
+  const onPointerLeave = useCallback4(() => {
     if (!hovered.current) return;
     hovered.current = false;
     reveal();
   }, [reveal]);
-  const onFocusCapture = useCallback5((event) => {
+  const onFocusCapture = useCallback4((event) => {
     focused.current = event.target.matches(":focus-visible");
     reveal();
   }, [reveal]);
-  const onBlurCapture = useCallback5((event) => {
+  const onBlurCapture = useCallback4((event) => {
     if (focused.current && !event.currentTarget.contains(event.relatedTarget)) {
       focused.current = false;
       reveal();
@@ -3601,7 +3619,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     if (turn.id !== chat.shownTurn?.id) return;
     if (previous?.id !== turn.id || previous.mode !== turn.mode) setSelectedMode(turn.mode);
   }, [chat.currentTurn, chat.shownTurn?.id]);
-  const instanceId = useId();
+  const instanceId = useId2();
   const historyId = `${instanceId}-history`;
   const settingsId = `${instanceId}-settings`;
   const promptId = `${instanceId}-prompt`;
@@ -3618,13 +3636,13 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   });
   const historySurfaces = useMemo3(() => [historyRef, historyButtonRef], []);
   const settingsSurfaces = useMemo3(() => [settingsRef, settingsButtonRef], []);
-  const closeHistory = useCallback6(() => setHistoryOpen(false), []);
-  const closeSettings = useCallback6(() => setSettingsOpen(false), []);
+  const closeHistory = useCallback5(() => setHistoryOpen(false), []);
+  const closeSettings = useCallback5(() => setSettingsOpen(false), []);
   useDismiss(historyOpen, closeHistory, historySurfaces);
   useDismiss(settingsOpen, closeSettings, settingsSurfaces);
   useFocusTrap(settingsOpen, settingsRef);
   useFocusTrap(historyOpen, historyRef);
-  const ask = useCallback6((value) => {
+  const ask = useCallback5((value) => {
     const prompt = (typeof value === "string" ? value : value.prompt).trim();
     if (!prompt) return;
     setDraft("");
@@ -3639,7 +3657,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       opening: value.opening
     });
   }, [chat, listen]);
-  const newSession = useCallback6(() => {
+  const newSession = useCallback5(() => {
     if (chat.turns.length === 0) {
       setHistoryOpen(false);
       setSettingsOpen(false);
@@ -3712,7 +3730,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const line = chat.caption ?? "";
   const fullTranscript = shown?.video ? [shown.opening, ...shown.video.scenes.map((scene) => scene.narration)].filter((entry) => Boolean(entry)) : chat.transcript;
   const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx9(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx9(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx9(Replay, {}) } : void 0;
-  const cancelInput = useCallback6(() => {
+  const cancelInput = useCallback5(() => {
     listen.stop();
     setDraft("");
     setEditing(false);
@@ -3765,7 +3783,11 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       onKeyDownCapture: controls.reveal,
       children: [
         /* @__PURE__ */ jsxs7("header", { className: "chrome", ...controlEvents, children: [
-          /* @__PURE__ */ jsx9("div", { className: "session-brand", children: /* @__PURE__ */ jsx9("a", { className: "home-link", href: "/", "aria-label": "Home", children: /* @__PURE__ */ jsx9(Logo, {}) }) }),
+          /* @__PURE__ */ jsx9("div", { className: "session-brand", children: /* @__PURE__ */ jsx9("a", { className: "home-link", href: "/", "aria-label": "Home", onClick: (event) => {
+            if (window.location.pathname !== "/" || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+            event.preventDefault();
+            newSession();
+          }, children: /* @__PURE__ */ jsx9(Logo, {}) }) }),
           /* @__PURE__ */ jsxs7("div", { className: "group", children: [
             /* @__PURE__ */ jsxs7(
               "button",

package/dist/server.js

@@ -20,12 +20,13 @@ import {
 } from "./chunk-IQMYK5DX.js";
 import {
   MEDIA_RECOVERY_NOTICE,
+  WELCOME_CARDS,
   decodeVideoSse,
   encodeVideoSseEvent,
   sanitizeVideoChatMedia,
   videoSseHeaders,
   withDeadline
-} from "./chunk-HKUI5BTB.js";
+} from "./chunk-44WND2VP.js";
 import "./chunk-RXTN2CW6.js";
 import {
   allowedKeys,
@@ -1328,28 +1329,6 @@ var MAX_PROMPT_CHARACTERS = 8e3;
 var MAX_CONVERSATION_TURNS = 12;
 var MAX_CONVERSATION_RESPONSE_CHARACTERS = 8e3;
 var VIDEO_CHAT_OPENING_EVENT_TYPE = "data.video-chat-opening";
-var DEFAULT_WELCOME_PROMPTS = [
-  {
-    prompt: "Why does the Moon always show one face?",
-    opening: "The Moon turns, perfectly matching its orbit.",
-    mediaQuery: "full moon night sky"
-  },
-  {
-    prompt: "Tell me a tiny story about a robot growing a garden on Mars",
-    opening: "One patient robot is about to make Mars bloom.",
-    mediaQuery: "robot garden mars"
-  },
-  {
-    prompt: "Recommend a perfect rainy afternoon in Amsterdam",
-    opening: "Rain makes Amsterdam's best afternoons feel even warmer.",
-    mediaQuery: "Amsterdam rain cafe"
-  },
-  {
-    prompt: "Pitch a playful ad for a coffee mug that never spills",
-    opening: "This mug makes gravity look completely optional.",
-    mediaQuery: "coffee mug desk"
-  }
-];
 function jsonError2(status, code, message, headers) {
   return Response.json({ error: { code, message } }, { status, headers });
 }
@@ -1658,7 +1637,7 @@ function createVideoChatHandler(options) {
     transcription: transcribe != null,
     modes: searchMedia ? ["cinematic", "pexels"] : ["cinematic"]
   };
-  const welcomePrompts = (welcomeOptions?.prompts ?? DEFAULT_WELCOME_PROMPTS).slice(0, 4);
+  const welcomePrompts = (welcomeOptions?.prompts ?? WELCOME_CARDS).slice(0, 8);
   const heroQuery = welcomeOptions?.heroQuery;
   let welcomeResponse;
   let requestSequence = 0;
@@ -1860,7 +1839,7 @@ function createVideoChatHandler(options) {
         };
         const [hero, ...cards] = await Promise.all([
           heroQuery === void 0 ? DEFAULT_WELCOME_HERO : resolve(heroQuery),
-          ...welcomePrompts.map((entry) => resolve(entry.mediaQuery))
+          ...welcomePrompts.map((entry, index) => welcomeOptions?.prompts === void 0 ? WELCOME_CARDS[index]?.media ?? null : resolve("mediaQuery" in entry ? entry.mediaQuery : void 0))
         ]);
         return {
           cacheable: !failed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.10.21",
+  "version": "0.10.22",
   "description": "Open-source voice-and-video chat SDK for AI applications.",
   "keywords": [
     "video-chat",

package/starters/video-chat/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.10.21",
+    "@vanillaskyai/video": "0.10.22",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",

package/styles/video-chat.css

@@ -1127,3 +1127,17 @@
 .vanillasky-video-chat .transcript-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--vs-media-glass); color: var(--vs-media-muted); font: inherit; font-size: 13px; cursor: pointer; pointer-events: auto; }
 .vanillasky-video-chat .transcript-toggle svg { width: 16px; height: 16px; }
 .vanillasky-video-chat .transcript-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+
+/* Welcome shows a deliberate four-card window; the rest stays in the rail. */
+.vanillasky-video-chat .suggestion-rail { position: relative; flex-shrink: 0; width: calc(4 * clamp(160px, 18vw, 260px) + 66px); max-width: calc(100% + 24px); margin: auto -12px 0; }
+.vanillasky-video-chat .suggestion-rail .cards { width: 100%; max-width: 100%; margin: 0; }
+.vanillasky-video-chat .rail-arrows { position: absolute; inset: 50% -6px auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
+.vanillasky-video-chat .rail-arrows button { width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: #202438; color: white; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; pointer-events: auto; }
+.vanillasky-video-chat .rail-arrows button:disabled { visibility: hidden; pointer-events: none; }
+.vanillasky-video-chat .rail-arrows button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
+@media (max-width: 700px) {
+  .vanillasky-video-chat .suggestion-rail { width: calc(100% + 40px); max-width: calc(100% + 40px); margin-inline: -20px; }
+  .vanillasky-video-chat .rail-arrows { display: none; }
+}
+
+@media (hover: none) { .vanillasky-video-chat .rail-arrows { display: none; } }