@vanillaskyai/video 0.10.2 → 0.10.4

package/dist/{types-CdBmNTGD.d.ts → types-BqB8zC9u.d.ts}

@@ -1,4 +1,4 @@
-type VideoChatMode = "cinematic";
+type VideoChatMode = "cinematic" | "pexels";
 interface VideoChatConversationTurn {
     prompt: string;
     response?: string;

package/docs/agent-integration.md

@@ -22,8 +22,9 @@ npm run dev
 ```
 
 Init generates the thin application-owned shell around the SDK's complete
-`VideoChat` experience and runs doctor automatically. The default uses packaged
-templates + browser voice and installs no optional provider packages.
+`VideoChat` experience and runs doctor automatically. The baseline uses an immediate introduction and browser voice, and installs
+no optional provider packages. Add the video adapter for moving video answers;
+without a media provider, narration and subtitles remain available.
 `ANTHROPIC_API_KEY` is the only required key. Rerun init after an interrupted
 installation.
 
@@ -48,8 +49,8 @@ URL in a real browser. Browser automation should use normal motion
    its final frame, and returns to a usable composer.
 3. Ask one unrelated creative question in the same conversation and confirm it
    produces a distinct response.
-4. If doctor reports generated video ready, choose that mode and verify one
-   suitable prompt without editing client code.
+4. If doctor reports generated video ready, verify moving footage throughout
+   one complete answer, including its ending, without editing client code.
 5. Check failed network responses before reporting success.
 
 The handoff should name the localhost URL and ready capabilities. It should

package/docs/concepts.md

@@ -23,7 +23,7 @@ trusted templates. It begins before the full plan is available and ends as an
 editable deterministic configuration.
 
 It is not an encoded video stream. The browser renders normal React components
-from validated scene instructions. The 0.1 SDK does not include MP4 or WebM
+from validated scene instructions. The SDK does not include MP4 or WebM
 encoding; pass the completed deterministic JSON to an application-owned render
 or export pipeline when an encoded file is required.
 
@@ -31,7 +31,7 @@ or export pipeline when an encoded file is required.
 
 The viewer sends a prompt with bounded completed conversation turns. The server
 adds trusted application `instructions`, template capabilities, and the selected
-cinematic mode. `VideoChat` options control style, orientation, and custom
+AI video or Pexels mode. `VideoChat` options control style, orientation, and custom
 templates. Exact facts belong in the authorized prompt or conversation; secrets
 and provider configuration stay on the server.
 

package/docs/development.md

@@ -0,0 +1,23 @@
+# Develop the chat experience
+
+Run `npm ci --no-audit`, then `npm run dev:chat`. The localhost HMR surface renders the actual SDK `VideoChat`, templates and server handler from source. It never loads provider credentials. Select an intent and fault condition in the development toolbar; use the chat's normal media-mode controls. The prompt box remains the real product UI.
+
+Offline answers are deterministic for explanation, story, comedy, imagination, practical steps and golf. They use local waterfall footage and a recorded timing cue, **not narration that matches the displayed script**. This harness is for loading, playback, controls and recovery. It cannot prove generated answer quality. Conditions cover ready, delayed footage, missing media, decode failure, speech failure, exhausted video allowance and request throttling. Browser speech may be used in the speech-failure condition.
+
+The toolbar labels source and fixture identity. It separates the first body surface from the first decoded moving-footage frame; the former is a renderer paint opportunity and can precede decode. Its bounded safe phase log records browser request/stream arrival phases, speech response completion, first speech, footage and buffer pauses. No prompts, narration, scene IDs or provider bodies are retained. Media start/end/skip reasons come from the handler’s separate host-only `onDiagnostic` callback, shown in the local terminal for offline fixtures; live hosts own that callback themselves. Stream arrival is not the server’s exact authorship timestamp. Local fixtures never fetch external footage or invoke a paid model. Mode boundaries, provider deadlines and host admission remain covered by their dedicated server and host suites.
+
+## Optional live host
+
+Set `VANILLASKY_CHAT_LIVE_ENDPOINT` to an application-owned video-chat endpoint before starting the harness. The toolbar then offers **Connect live endpoint (uses allowance)**. It stays offline until that explicit click. Live fetches include host cookies, subject to browser cookie policy. The host must allow credentialed requests from the localhost origin and provide its normal authorization; credentials and allowances stay with that application. This tool does not proxy secrets, reset limits, or retry generated answers. Capabilities and welcome requests may run as soon as you connect. Request only the bounded live examples needed to evaluate actual quality.
+
+## Fast checks
+
+`npm run check:chat` runs the harness/unit recovery cases, checks harness TypeScript and runs one Chromium recording with short footage looping under actual audio. Install Chromium once with `npx playwright install chromium`. The harness smoke additionally records submit-to-visible-chapter paint opportunity with a 200 ms warm-UI target. This is a browser animation-frame opportunity, not a physical display measurement. The target for the complete command is under a minute on a warm machine; the command reports its measured duration. It does not replace release checks or claim browser-wide/live-provider coverage.
+
+## One candidate for release verification
+
+`npm run verify:release` runs registry, lint, type, unit, acceptance, size, production dependency audit, API, packed-consumer, onboarding, provider and all existing browser checks. It builds and packs once into ignored `artifacts/chat-candidate/`, then sends the exact tarball and integrity to every consumer verifier. Each verifier still uses its independent clean install. Browser and provider compatibility remain independent gates; no paid API calls are enabled by this command.
+
+`candidate.json` records version, source commit, dirty-tree status, SHA-256 and npm integrity. A local candidate may include uncommitted work; it is never called a published artifact. `VANILLASKY_CANDIDATE_DIR` selects a different output directory. The command verifies but never publishes, merges or deploys. CI additionally retains the existing Node and React version checks.
+
+For one targeted consumer check, run `node scripts/chat-candidate.mjs`, then provide `VANILLASKY_PACKED_TARBALL`, `VANILLASKY_EXPECTED_INTEGRITY` and `VANILLASKY_EXPECTED_SHA256` from that manifest to an existing verifier. Do not repack between checks of the same candidate.

package/docs/getting-started.md

@@ -3,9 +3,10 @@
 # Getting started
 
 The fastest VanillaSky integration is the complete, general-purpose video chat.
-It starts with packaged templates and browser voice, then turns on optional
-speech and generated video when you install their adapters and add server keys.
-Stock media needs only its server key.
+It starts with a template introduction and browser voice. Add the video adapter
+and its server key for generated footage, or choose Pexels for stock footage.
+Without a media provider, the answer retains narration and subtitles with an
+chapter template. Generated speech is optional.
 
 ## Create the app
 
@@ -96,8 +97,9 @@ spoken hook from the response stream before the full plan is complete, holds its
 scene is ready, reaches its final frame, and leaves the composer ready for
 another turn. With stock media enabled, click a welcome or follow-up card and
 confirm its footage carries directly into that opening. With generated video
-enabled, confirm that relevant generated shots and editorial templates form one
-cinematic response, and the first shot continues the hook without repeating it.
+enabled, confirm that moving shots develop a complete answer with narration
+and subtitles, and that the first shot continues the hook without repeating it.
+Check that no finished clip freezes while narration continues.
 
 The generated local authorization accepts localhost only. Replace it with your
 real session check, rate limits, and usage policy before deploying.

package/docs/media-and-audio.md

@@ -6,22 +6,23 @@ VanillaSky keeps provider choice in the application. The SDK defines small
 server callbacks, advertises only the capabilities you configure, and keeps
 all credentials out of React and the browser bundle.
 
-## One cinematic mode
+## AI-first video answers
 
-The director combines relevant footage and seven editorial templates. Graphics
-use black and white; footage carries atmosphere and concrete action. Each media
-scene declares `mediaSource: "stock"` or `"generate"`. Provider availability and
-host budgets constrain those choices. There is no all-stock or all-AI switch.
+The default chat displays the real chapter template immediately, then prepares
+speech and footage concurrently. Choose `mode: "cinematic"` for AI video or
+`mode: "pexels"` for stock. The UI labels these choices **AI video** and **Pexels**.
+Each mode uses only its selected media provider. A failure, exhausted video
+allowance, or missed deadline becomes an authored chapter with complete narration.
+The chapter retains narration and subtitles for the whole beat.
 
-The canonical templates are `cinemaMedia`, `chapterTitle`,
-`editorialTimeline`, `mobileMessage`, `comparison`, `quote`, and `keyFigure`.
-All except `chapterTitle` accept optional media backgrounds. Editorial overlays use soft text shadows and a dark contrast scrim over relevant media, and fall back to black. Use at most one explanatory overlay per typical thirty-second answer. Full-bleed
-footage has no headline; narration and subtitles carry the explanation.
+## Pexels search
 
-## Reviewed stock
+The starter performs bounded full-catalog Pexels video search with subject
+matching, orientation-aware renditions and a bounded cache. Add `PEXELS_API_KEY`
+on the server and choose Pexels in Settings. The SDK UI links to Pexels; custom
+interfaces must also display the attribution required by their media provider.
 
-Add `searchMedia` when template answers, the welcome screen, and follow-up
-cards should use approved photography or footage:
+Applications can replace `searchMedia` with their own licensed catalog:
 
 ```ts
 createVideoChatHandler({
@@ -45,14 +46,14 @@ createVideoChatHandler({
 The planner emits a short semantic keyword, not a URL. The callback returns an
 application-approved image or video URL, and the SDK validates it before it
 reaches a scene. Return `null` when no licensed, safe, relevant asset exists;
-`cinemaMedia` becomes a chapter using its grounded `fallbackText`; a message can
-keep its content on black. Missing fallback copy produces an explicit error.
+default chat displays an authored chapter while retaining the spoken answer. An explicit custom `templates` registry retains its structured planner,
+validation, and fallback contracts.
 
 For Pexels, keep `PEXELS_API_KEY` on the server, enforce a deadline, filter for
 orientation, and return only validated Pexels asset domains. Licensing,
 attribution, caching, MIME checks, and byte limits remain application-owned.
 
-## Planned generated shots
+## Generated shots
 
 Add `generateVideo` to enable generated shots within cinematic responses. It receives the planned visual
 subject plus the generated look so every clip can follow the same direction:
@@ -75,6 +76,8 @@ createVideoChatHandler({
       orientation,
       requestId,
       sceneId: scene?.id,
+      shotDirection: typeof scene?.variables.shotDirection === "string"
+        ? scene.variables.shotDirection : undefined,
       signal,
       maxRetries: 0,
     });
@@ -83,8 +86,9 @@ createVideoChatHandler({
 });
 ```
 
-The first streamed object reserves the first generated shot while the same
-model call continues planning later scenes. Use `requestId` and `scene.id` as
+One model stream supplies an answer brief and shot descriptions. The runtime
+prepares ordered shots while the model continues planning; the first and later
+body shots follow the same path. Use `requestId` and `scene.id` as
 an idempotency key, because generated clips are billable. Keep `maxRetries: 0`
 inside provider calls, honour `signal`, and make retries an explicit product
 decision with a known budget.
@@ -92,6 +96,19 @@ decision with a known budget.
 VanillaSky does not depend on a video model or storage service. The application
 owns the provider key, model, spend, generated bytes, retention, and delivery.
 
+### Timing and recovery
+
+Set `generatedClipDurationSec` to the duration your video adapter actually
+requests (default 5, supported range 2–20 seconds). Keep it aligned with provider
+settings and host spending limits. The planner fits natural spoken beats to that
+budget; measured audio determines the final scene timing. Silent footage may
+loop until the finite scene ends. Audible footage is not looped.
+
+`generateVideoTimeoutMs` sets the first-shot preparation budget (default 15 seconds).
+Later deadlines account for their position in the answer rather than restarting
+an unlimited wait. Hosts must honor cancellation. A missed deadline selects the
+authored chapter instead of a second paid generation or cross-mode stock search.
+
 ## Voice and transcription
 
 Without `generateSpeech`, `VideoChat` uses the browser voice. Add a speech
@@ -129,7 +146,9 @@ interaction before audible playback on many devices.
 - Keep every provider key in server-only environment variables.
 - Never let a planner return arbitrary final media URLs.
 - Bound query length, response size, duration, concurrency, and generated spend.
-- Preload the next asset and keep the current visual when media is late.
+- Preload upcoming footage and pause narration honestly when usable media is late.
+- Plan enough moving footage for the spoken beat; do not hold a finished frame
+  while narration continues.
 - Return a safe fallback instead of leaving the response waiting forever.
 
 [← Documentation home](../README.md) · [Previous: Customization](customization.md) · [Next: Custom templates →](custom-templates.md)

package/docs/performance.md

@@ -20,6 +20,13 @@ The SDK sends nothing to a telemetry service. Events contain only an opaque
 turn ID, mode, relative timing, and fixed event categories. Keep custom turn IDs
 opaque; do not put prompts or customer information into them.
 
+The handler's optional `onDiagnostic(event)` observes accepted requests,
+authored openings and shots, and media start/end/skip timings on the host.
+Fixed reasons distinguish allowance, deadline, timeout, provider error, empty
+results, cancellation and absent configuration. These records contain no
+prompt, narration, query, media URL or provider response. They are never sent
+to the browser automatically, and callback failures cannot stop an answer.
+
 ## What the measurements mean
 
 `first-frame` is the first committed active scene reaching an animation-frame
@@ -55,15 +62,19 @@ these against an explicitly authorized, bounded live run before treating them
 as tuned provider budgets. Compare first-frame/speech times, stalled duration,
 and visual/voice quality together; faster fallback alone does not prove quality.
 
-## Opening stock footage
+## Opening and media preparation
+
+The submitted prompt immediately appears in the chapter template; the streamed
+opening replaces that topic with an authored spoken beat. The default UI makes
+no opening stock request. Each body beat starts speech preparation while its
+selected footage source prepares. At most two speech preparations run together.
 
-The opening's stock lookup runs alongside narration and body generation. Ready
-footage stays behind the hook until the body starts; late results are ignored.
-Playback never waits solely for intro footage.
+`first-media-frame` reports the first decoded footage frame presented by the
+mounted media surface. It is separate from `first-frame`, which also includes
+chapter scenes. Neither callback measures the immediate opening template;
+measure that surface separately when checking submit-to-template latency.
 
-The packaged stock adapter tries the specific and optional broader video query
-before photo recovery, within one three-second budget. The planner supplies the
-broader query only for opening atmosphere; body demonstrations retain their
-specific subject. Pexels resource-page slugs and photo descriptions can screen
-obvious mismatches, but missing metadata remains unknown and is accepted. This
-is not visual relevance verification. See the [Pexels API contract](https://www.pexels.com/api/documentation/).
+AI and Pexels modes remain separate. Missing, late, or unplayable footage uses
+the authored chapter and complete narration. Silent clips loop for the finite
+narrated scene. See [the local chat harness](development.md) for fixture timing
+and explicit live-provider checks.

package/docs/production.md

@@ -22,10 +22,11 @@ player. Read the [security guide](security.md) for the complete controls.
 
 ## Cinematic direction and providers
 
-One cinematic mode combines footage and editorial graphics according to the
-story. Keep templates available as grounded fallbacks. Add `searchMedia` for
-reviewed stock and `generateVideo` for selected illustrative shots. The planner
-sets `mediaSource` per media scene; the host enforces the generation budget.
+Default chat shows an immediate chapter while speech and selected footage prepare.
+Configure `generateVideo` for AI mode and `searchMedia` for Pexels mode. Neither
+mode calls the other footage source. Missing or late footage uses the authored
+chapter with complete narration. Explicit custom template registries keep their
+existing composition and fallback contracts.
 A stock candidate must match the subject, action and permitted crop. Return
 `null` for uncertainty rather than broadening an essential detail.
 
@@ -36,11 +37,11 @@ licensing before use.
 
 ## Fast first response
 
-The planner's first streamed object supplies the spoken hook and media keyword.
-Start speech immediately, resolve stock in parallel, and keep the opening
-playing until the contiguous preparation cushion and first frame are ready. Welcome cards
-should carry a prepared hook and preloaded footage so they can start without a
-model round trip.
+The prompt appears immediately in the chapter template. The planner's first
+streamed object supplies an authored spoken opening and reserves the ending.
+Prepare each shot's speech alongside its footage, and keep the opening readable
+until its narration and the contiguous preparation cushion are ready. Welcome
+cards may carry a prepared opening so its speech starts without a model round trip.
 
 Do not wait for the complete plan before showing the first validated scene.
 Preload upcoming assets and keep the current visual if the next one is late.
@@ -103,7 +104,7 @@ npm test
 - [ ] Keys exist only in the server secret store.
 - [ ] Authentication, tenant policy, rate limits, and origin allowlist are live.
 - [ ] Cancellation, timeouts, fallbacks, and safe errors are tested.
-- [ ] Grounded graphic recovery works when every optional provider is unavailable.
+- [ ] Authored chapter recovery works when every optional provider is unavailable.
 - [ ] Per-scene media choices obey provider availability and spending limits.
 - [ ] Both orientations render and narration stays synchronized.
 - [ ] A packed-artifact consumer and deterministic browser chat pass.

package/docs/prompt-and-input.md

@@ -55,7 +55,7 @@ viewer prompt separate from these trusted server-side instructions.
 
 ## What reaches the model
 
-`createVideoChatHandler` builds the trusted template catalog, video rules,
+`createVideoChatHandler` builds the shot-planning instructions, video rules,
 conversation context, and application guidance. Your provider adapter receives
 two complete strings:
 
@@ -68,9 +68,9 @@ streamText: ({ systemPrompt, userPrompt, signal }) => streamText({
 });
 ```
 
-Pass both strings unchanged. The system prompt describes the installed
-templates, schema limits, pacing, narration, opening contract, and safe media
-fields. The user prompt contains the current request, bounded prior turns,
+Pass both strings unchanged. The system prompt describes the internal answer
+brief and shot format, pacing, narration, opening contract, and safe media
+directions. The user prompt contains the current request, bounded prior turns,
 orientation, visual mode, and whether an opening was already spoken.
 
 Provider credentials and raw media URLs never belong in either prompt. Media
@@ -79,19 +79,27 @@ output has been parsed.
 
 ## One stream, one answer
 
-The planner first emits a 6–9 word spoken hook and a media keyword, then keeps
-streaming complete scenes. It is not a separate hook call followed by a second
-planning call. This keeps the opening consistent with the scenes that follow
-and lets the first playable scene arrive without waiting for the complete plan.
+The planner streams an answer brief containing the opening, creative direction,
+and ending, followed by narrated shot descriptions. One model request serves
+both suggested and typed prompts; a suggestion may already supply its opening.
+There is no separate classification or first-shot planning request.
+
+The runtime assigns scene IDs, uses the footage renderer, resolves media, and
+finalizes the response when planning ends. The model does not choose body
+layouts, media providers, or lifecycle events. Narration and visible action are
+planned together: explanations show mechanisms, stories develop consequences,
+comedy times its reveal, imaginative requests depict their invented world, and
+practical answers demonstrate usable steps. These are directions, not fixed
+scene counts or one universal story structure.
 
 Every `scene.add` is validated before the browser receives it. The model never
-returns React, HTML, CSS, or executable JavaScript. Accepted scenes are
-immutable; invalid scenes are reported through safe warnings and omitted.
+returns React, HTML, CSS, or executable JavaScript. Invalid planning content
+produces safe diagnostics. A media failure does not delete valid narration.
 
-In template mode, the planner can choose any trusted template and request stock
-media through `searchMedia`. In full mode, it plans a complete generated-video
-answer and `generateVideo` resolves every visual beat. There is no mixed
-"generate a few clips" mode.
+AI mode generates footage within the host allowance. Pexels mode searches
+stock without calling the video generator. Each authored beat includes a short
+chapter title; missing footage becomes that chapter with its complete narration. Handlers configured with an explicit custom `templates` registry continue to
+support the trusted catalog and its existing structured planner contract.
 
 ## Grounding
 
@@ -110,7 +118,8 @@ Check these boundaries in order:
 3. Does the provider pass `systemPrompt` and `userPrompt` unchanged?
 4. Is extended reasoning delaying the first streamed object?
 5. Do `onWarning` and `onComplete` show rejected scenes or a length limit?
-6. Does the trusted registry contain a suitable template for the requested answer?
+6. Do the planned actions develop the answer, and does its ending resolve the request?
+7. Does resolved footage actually play for the spoken duration?
 
 Log request IDs, safe warning codes, provider finish reasons, model IDs, and
 token usage. Never log credentials or expose raw provider errors in the video.

package/docs/provider-integration.md

@@ -12,7 +12,7 @@ npm run dev
 ```
 
 Init runs doctor automatically. The generated `server.ts` starts with one
-`ANTHROPIC_API_KEY`, packaged templates, and browser voice; it installs no
+`ANTHROPIC_API_KEY`, a template introduction, and browser voice; it installs no
 optional speech or video packages.
 
 Use `npx vanillasky providers add speech` to install xAI speech, or
@@ -58,14 +58,12 @@ browser speech. Supplying `generateSpeech`, `transcribe`, `searchMedia`, or
 structural and provider-neutral; their SDKs and credentials remain application
 dependencies and never enter the browser bundle.
 
-The planner emits a 6-9 word hook first, then continues into the scenes in the
-same stream. The stock lookup is a separate cancellable request, so it cannot
-delay speech or planning. A welcome card can carry a prewritten `opening`, which
-starts immediately with its already-loaded media. When generated shots are available, the
-same first streamed object reserves the exact first body scene. Its clip starts
-generating while the planner continues the story. Playback begins after its
-contiguous preparation cushion, without requiring the entire plan, and normal narration is written in that same planner call rather than
-through a second model round trip.
+The planner emits a short spoken opening, then continues the answer in the same
+stream. The default UI shows a chapter immediately. A welcome card can carry a
+prewritten `opening`, whose narration starts without waiting for the model.
+Each authored body beat prepares speech and selected footage together. Playback
+starts after its contiguous preparation cushion, without requiring the entire
+plan or a second model call for narration.
 
 The matching complete React interface is one component and one scoped style
 import:
@@ -84,9 +82,9 @@ export function App() {
 For a custom interface, use `useVideoChat` and render its `turns`, `welcome`,
 `suggestions`, `caption`, and `status`; the hook owns their network and playback
 lifecycle. Pass a selected card through
-`chat.ask(card.prompt, { opening: card.opening, openingMedia: card.media })` to
-start its hook and reuse its footage immediately. For typed prompts, the hook
-and media keyword arrive through the response stream automatically.
+`chat.ask(card.prompt, { opening: card.opening })` to start its hook immediately.
+Custom interfaces can still pass and render `openingMedia`; the default UI uses
+the chapter. Typed prompts receive their authored opening through the stream.
 
 Any AI SDK `LanguageModel` works in both `streamText` and `generateText`. Keep
 selection in one server-only module when an application supports several text
@@ -180,7 +178,7 @@ is intentionally substantial. It is stable for the same SDK version, template
 kit, media policy, and base prompt. Record input-token usage, keep the selected
 kit no broader than the product needs, and enable provider-side prompt caching
 where the chosen provider/model supports it. VanillaSky does not assume one
-provider's cache controls in its provider-neutral adapter. The cinematic catalog contains seven templates; use provider-reported token
+provider's cache controls in its provider-neutral adapter. Default chat streams an answer brief and shot directions rather than the template catalog; use provider-reported token
 usage as the authoritative measurement rather than a character estimate.
 
 Provider finish reasons `error` and `tool-calls` are terminal failures.

package/docs/reference/protocol.md

@@ -70,7 +70,13 @@ change core video state.
 
 ## Planning boundary
 
-LLMs do not emit public protocol envelopes. A server-only planner emits
+LLMs do not emit public protocol envelopes. Default `createVideoChatHandler`
+planning uses an internal answer brief and shot descriptions. The runtime
+translates them into footage scenes and completes the answer at stream end,
+without asking the model for lifecycle commands.
+
+Handlers with an explicit custom `templates` registry keep the existing
+composition planner contract. A server-only planner emits
 validated `scene.add` or `plan.complete` parts. The runtime assigns sequences,
 IDs, terminal snapshots, and checksums. Generated HTML, React, JavaScript, CSS, component
 source, audio events, protocol envelopes, and unknown part types are rejected.

package/docs/reference/provider-adapters.md

@@ -69,7 +69,9 @@ VanillaSky or its protocol. The same boundary also accepts a self-hosted model
 or a provider-native async text stream when it is not represented in the AI
 SDK. VanillaSky has no model allowlist.
 
-The provider must emit NDJSON text: one complete VanillaSky plan part per line.
+The provider must emit NDJSON text matching the supplied prompt: one complete
+object per line. Default chat planning uses an answer brief and shot descriptions;
+the SDK translates them into validated scene events.
 The SDK buffers arbitrary text chunks until a newline, parses the completed
 object, validates it, and only then forwards it to the motion runtime. Do not
 replace that per-line validator with whole-response structured output: motion
@@ -93,9 +95,10 @@ stream-reconnect contract.
 ## Generated-video budget
 
 Set `maxGeneratedVideos` on `createVideoChatHandler` to a nonnegative safe integer
-(default `5`). This is a per-response attempt limit for full mode, including the
-reserved first shot and failures. Use `0` to keep the configured full mode on
-stock footage. Stock lookup is independent of this limit. Retries inside your
+(default `5`). This is a per-response generation attempt limit, including
+failures. AI mode uses authored chapter recovery after the allowance is reached;
+`0` skips all generated footage. Pexels mode searches stock independently and
+never consumes the generated-video allowance. Retries inside your
 provider callback can incur additional charges; bound those separately. Never
 copy an untrusted request value into this application-owned option.
 

package/docs/testing.md

@@ -7,12 +7,15 @@ no network request, and needs no model key.
 ## Test the chat route with Vitest
 
 Pass `createMockVideoPlanner()` to the same `createVideoChatHandler` used by the
-application. A standard `Request` exercises parsing, validation, pacing, the
+application, using an explicit template registry for the structured composition
+fixtures. Default AI-first chat tests should instead return an authored answer
+brief and shot descriptions matching the supplied planning prompt. A standard
+`Request` exercises parsing, validation, pacing, the
 opening extension, and SSE without starting an HTTP server.
 
 ```ts
 import { describe, expect, it } from "vitest";
-import { createVideoChatHandler } from "@vanillaskyai/video/server";
+import { createVideoChatHandler, createServerTemplateRegistry } from "@vanillaskyai/video/server";
 import { createMockVideoPlanner } from "@vanillaskyai/video/test";
 
 describe("POST /api/video-chat", () => {
@@ -20,6 +23,7 @@ describe("POST /api/video-chat", () => {
     const handle = createVideoChatHandler({
       authorize: "none", // Only acceptable because this handler stays in process.
       heartbeatMs: false,
+      templates: createServerTemplateRegistry({ templates: [] }),
       streamText: createMockVideoPlanner(),
       generateText: async ({ task }) => task === "suggestions"
         ? JSON.stringify({ suggestions: [] })
@@ -43,6 +47,7 @@ describe("POST /api/video-chat", () => {
 
     expect(response.status).toBe(200);
     expect(body).toContain('"type":"data.video-chat-opening"');
+    expect(body).toContain('"type":"scene.add"');
     expect(body).toContain('"type":"response.complete"');
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Open-source voice-and-video chat SDK for AI applications.",
   "keywords": [
     "video-chat",
@@ -116,7 +116,10 @@
     "verify:api": "npm run build && node scripts/verify-public-api-surface.mjs",
     "verify:package": "npm run build && node scripts/verify-packed-package.mjs",
     "release:build": "node scripts/release-build.mjs",
-    "acceptance:chat": "tsx scripts/acceptance/run.ts"
+    "acceptance:chat": "tsx scripts/acceptance/run.ts",
+    "dev:chat": "vite --config dev/chat/vite.config.ts --open /dev/chat/",
+    "check:chat": "node scripts/chat-check.mjs",
+    "verify:release": "node scripts/chat-verify.mjs"
   },
   "peerDependencies": {
     "react": ">=18 <20",

package/registry/items/backgrounds.json

@@ -28,7 +28,7 @@
       "path": "src/visual-system/scene-templates/external-video-backdrop.tsx",
       "type": "registry:lib",
       "target": "vanillasky/scene-templates/external-video-backdrop.tsx",
-      "content": "import React from \"react\";\n\n// Source-owned templates may live in a consumer's tree while VideoFrame comes\n// from the package. Both copies must observe the same internal context or the\n// consumer template would mount a second video over the player-owned plane,\n// and would never inherit the player's native media audio state.\nexport type ExternalVideoBackdropMode = false | \"pending\" | \"ready\" | \"fallback\";\n\ninterface BackdropContextValue {\n  mode: ExternalVideoBackdropMode;\n  audioMuted: boolean;\n  audioVolume: number;\n}\n\nconst DEFAULT: BackdropContextValue = { mode: false, audioMuted: true, audioVolume: 1 };\n\nconst sharedContext = globalThis as typeof globalThis & {\n  __vanillaskyVideoBackdropContext?: React.Context<BackdropContextValue>;\n};\nconst BackdropContext = sharedContext.__vanillaskyVideoBackdropContext\n  ??= React.createContext<BackdropContextValue>(DEFAULT);\n\nexport function ExternalVideoBackdropProvider({\n  mode,\n  audioMuted = true,\n  audioVolume = 1,\n  children,\n}: {\n  mode: ExternalVideoBackdropMode;\n  audioMuted?: boolean;\n  audioVolume?: number;\n  children: React.ReactNode;\n}) {\n  const value = React.useMemo(\n    () => ({ mode, audioMuted, audioVolume }),\n    [mode, audioMuted, audioVolume],\n  );\n  return (\n    <BackdropContext.Provider value={value}>\n      {children}\n    </BackdropContext.Provider>\n  );\n}\n\nexport function useExternalVideoBackdrop(): ExternalVideoBackdropMode {\n  return React.useContext(BackdropContext).mode;\n}\n\nexport function useMediaAudio(): { muted: boolean; volume: number } {\n  const { audioMuted, audioVolume } = React.useContext(BackdropContext);\n  return { muted: audioMuted, volume: audioVolume };\n}\n"
+      "content": "import React from \"react\";\n\n// Source-owned templates may live in a consumer's tree while VideoFrame comes\n// from the package. Both copies must observe the same internal context or the\n// consumer template would mount a second video over the player-owned plane,\n// and would never inherit the player's native media audio state.\nexport type ExternalVideoBackdropMode = false | \"pending\" | \"ready\" | \"fallback\";\n\ninterface BackdropContextValue {\n  mode: ExternalVideoBackdropMode;\n  audioMuted: boolean;\n  audioVolume: number;\n  preparingNarration?: boolean;\n  onMediaError?: () => void;\n}\n\nconst DEFAULT: BackdropContextValue = { mode: false, audioMuted: true, audioVolume: 1 };\n\nconst sharedContext = globalThis as typeof globalThis & {\n  __vanillaskyVideoBackdropContext?: React.Context<BackdropContextValue>;\n};\nconst BackdropContext = sharedContext.__vanillaskyVideoBackdropContext\n  ??= React.createContext<BackdropContextValue>(DEFAULT);\n\nexport function ExternalVideoBackdropProvider({\n  mode,\n  audioMuted = true,\n  audioVolume = 1,\n  preparingNarration = false,\n  onMediaError,\n  children,\n}: {\n  mode: ExternalVideoBackdropMode;\n  audioMuted?: boolean;\n  audioVolume?: number;\n  preparingNarration?: boolean;\n  onMediaError?: () => void;\n  children: React.ReactNode;\n}) {\n  const value = React.useMemo(\n    () => ({ mode, audioMuted, audioVolume, preparingNarration, onMediaError }),\n    [mode, audioMuted, audioVolume, preparingNarration, onMediaError],\n  );\n  return (\n    <BackdropContext.Provider value={value}>\n      {children}\n    </BackdropContext.Provider>\n  );\n}\n\nexport function useExternalVideoBackdrop(): ExternalVideoBackdropMode {\n  return React.useContext(BackdropContext).mode;\n}\n\nexport function useMediaAudio(): { muted: boolean; volume: number } {\n  const { audioMuted, audioVolume } = React.useContext(BackdropContext);\n  return { muted: audioMuted, volume: audioVolume };\n}\n\n/** Internal first-frame priming state; an explicit viewer pause never sets it. */\nexport function useNarrationPreroll(): boolean {\n  return React.useContext(BackdropContext).preparingNarration === true;\n}\n\n/** Routes local decoder/playback failures to the scene-owned recovery surface. */\nexport function useMediaFailure(): (() => void) | undefined {\n  return React.useContext(BackdropContext).onMediaError;\n}\n"
     },
     {
       "path": "src/visual-system/scene-templates/media-position.ts",
@@ -40,7 +40,7 @@
       "path": "src/visual-system/scene-templates/scene-video-backdrop.tsx",
       "type": "registry:lib",
       "target": "vanillasky/scene-templates/scene-video-backdrop.tsx",
-      "content": "import React, { useEffect, useRef, useState } from \"react\";\nimport { getBackgroundTransform } from \"../backgrounds\";\nimport { useMediaAudio } from \"./external-video-backdrop\";\nimport { resolveMediaPosition } from \"./media-position\";\n\nexport interface SceneVideoBackdropProps {\n  mediaUrl: string;\n  mediaPoster?: string;\n  mediaPosition?: string;\n  backgroundEffect?: string;\n  progress: number;\n  beatIntensity?: number;\n  isPlaying: boolean;\n  muted?: boolean;\n  volume?: number;\n  playbackId?: string;\n  retainPoster?: boolean;\n  persistent?: boolean;\n  preparedPoster?: {\n    presentationKey: string;\n    mediaPoster: string;\n    mediaPosition: string;\n    backgroundEffect?: string;\n    /** Existing global transition progress. On decoder-constrained Safari,\n     * this fades the decoded incoming still above the outgoing video before\n     * the single video element changes source. */\n    opacity?: number;\n  };\n  onReady?: () => void;\n  onError?: () => void;\n}\n\nexport const SceneVideoBackdrop: React.FC<SceneVideoBackdropProps> = ({\n  mediaUrl,\n  mediaPoster,\n  mediaPosition = \"center\",\n  backgroundEffect,\n  progress,\n  beatIntensity = 0,\n  isPlaying,\n  muted,\n  volume,\n  playbackId = mediaUrl,\n  retainPoster = false,\n  persistent = false,\n  preparedPoster,\n  onReady,\n  onError,\n}) => {\n  const inheritedAudio = useMediaAudio();\n  const resolvedMuted = muted ?? inheritedAudio.muted;\n  const resolvedVolume = volume ?? inheritedAudio.volume;\n  const resolvedPosition = resolveMediaPosition(mediaPosition);\n  const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);\n  const [decodedVideoUrl, setDecodedVideoUrl] = useState<string>();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const startedVideoUrl = useRef<string | undefined>(undefined);\n  const startedPlaybackId = useRef<string | undefined>(undefined);\n  const videoPresentationKey = `${playbackId}\\0${mediaUrl}`;\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    // React Strict Mode rehearses setup → cleanup → setup in development.\n    // The cleanup deliberately releases the decoder, so the repeated setup\n    // must restore the declarative source before the playback effect runs.\n    if (video.getAttribute(\"src\") !== mediaUrl) {\n      video.setAttribute(\"src\", mediaUrl);\n      video.load();\n    }\n    return () => {\n      video.pause();\n      video.removeAttribute(\"src\");\n      video.load();\n      startedVideoUrl.current = undefined;\n      startedPlaybackId.current = undefined;\n    };\n  }, [mediaUrl]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (video) video.volume = resolvedVolume;\n  }, [resolvedVolume]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    if (!isPlaying) {\n      video.pause();\n      return;\n    }\n    if (startedPlaybackId.current === playbackId) {\n      if (!video.ended) void video.play().catch(() => {});\n      return;\n    }\n    const changingSource = startedVideoUrl.current !== undefined && startedVideoUrl.current !== mediaUrl;\n    video.playbackRate = 1;\n    if (!changingSource && video.currentTime > 0) video.currentTime = 0;\n    video.play().catch(() => {});\n    startedVideoUrl.current = mediaUrl;\n    startedPlaybackId.current = playbackId;\n  }, [isPlaying, mediaUrl, playbackId]);\n\n  const mediaStyle: React.CSSProperties = {\n    position: \"absolute\",\n    inset: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    objectPosition: resolvedPosition,\n    transform: bgTransform.transform,\n    transformOrigin: bgTransform.transformOrigin,\n    zIndex: persistent ? 1 : undefined,\n  };\n  const preparedPosition = preparedPoster\n    ? resolveMediaPosition(preparedPoster.mediaPosition)\n    : resolvedPosition;\n  const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);\n  const posterPlanes = [\n    ...(persistent && mediaPoster ? [{\n      presentationKey: videoPresentationKey,\n      mediaPoster,\n      mediaPosition: resolvedPosition,\n      transform: bgTransform.transform,\n      transformOrigin: bgTransform.transformOrigin,\n      opacity: 1,\n      zIndex: 0,\n      role: \"current\",\n    }] : []),\n    ...(preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{\n      presentationKey: preparedPoster.presentationKey,\n      mediaPoster: preparedPoster.mediaPoster,\n      mediaPosition: preparedPosition,\n      transform: preparedTransform.transform,\n      transformOrigin: preparedTransform.transformOrigin,\n      opacity: preparedPoster.opacity ?? 0,\n      zIndex: 2,\n      role: \"prepared\",\n    }] : []),\n  ];\n\n  return (\n    <>\n      {posterPlanes.map((posterPlane) => (\n        <img\n          key={posterPlane.presentationKey}\n          src={posterPlane.mediaPoster}\n          alt=\"\"\n          aria-hidden=\"true\"\n          draggable={false}\n          data-video-poster-plane={posterPlane.role}\n          data-video-poster-visible={posterPlane.opacity > 0 ? \"true\" : \"false\"}\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            objectPosition: posterPlane.mediaPosition,\n            transform: posterPlane.transform,\n            transformOrigin: posterPlane.transformOrigin,\n            zIndex: posterPlane.zIndex,\n            opacity: posterPlane.opacity,\n            pointerEvents: \"none\",\n          }}\n        />\n      ))}\n      <video\n        ref={videoRef}\n        src={mediaUrl}\n        poster={retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || undefined : undefined}\n        muted={resolvedMuted}\n        loop={false}\n        playsInline\n        preload=\"auto\"\n        onLoadedData={(event) => {\n          const video = event.currentTarget;\n          const markPresented = () => {\n            if (!video.isConnected) return;\n            onReady?.();\n            if (!retainPoster) setDecodedVideoUrl(mediaUrl);\n          };\n          if (video.requestVideoFrameCallback) {\n            video.requestVideoFrameCallback(markPresented);\n            return;\n          }\n          markPresented();\n        }}\n        onError={onError}\n        data-media-position={mediaPosition}\n        data-video-backdrop={persistent ? \"persistent\" : \"scene\"}\n        style={mediaStyle}\n      />\n    </>\n  );\n};\n"
+      "content": "import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { getBackgroundTransform } from \"../backgrounds\";\nimport { useMediaAudio, useMediaFailure, useNarrationPreroll } from \"./external-video-backdrop\";\nimport { resolveMediaPosition } from \"./media-position\";\n\nexport interface SceneVideoBackdropProps {\n  mediaUrl: string;\n  mediaPoster?: string;\n  mediaPosition?: string;\n  backgroundEffect?: string;\n  progress: number;\n  /** Narration-led visible duration; muted or pitch-preserving footage may be gently retimed. */\n  sceneDuration?: number;\n  /** Internal player-owned decoder priming, distinct from viewer pause. */\n  preparingNarration?: boolean;\n  beatIntensity?: number;\n  isPlaying: boolean;\n  muted?: boolean;\n  volume?: number;\n  playbackId?: string;\n  retainPoster?: boolean;\n  persistent?: boolean;\n  preparedPoster?: {\n    presentationKey: string;\n    mediaPoster: string;\n    mediaPosition: string;\n    backgroundEffect?: string;\n    /** Existing global transition progress. On decoder-constrained Safari,\n     * this fades the decoded incoming still above the outgoing video before\n     * the single video element changes source. */\n    opacity?: number;\n  };\n  onReady?: () => void;\n  onError?: () => void;\n}\n\nexport const SceneVideoBackdrop: React.FC<SceneVideoBackdropProps> = ({\n  mediaUrl,\n  mediaPoster,\n  mediaPosition = \"center\",\n  backgroundEffect,\n  progress,\n  sceneDuration,\n  preparingNarration = false,\n  beatIntensity = 0,\n  isPlaying,\n  muted,\n  volume,\n  playbackId = mediaUrl,\n  retainPoster = false,\n  persistent = false,\n  preparedPoster,\n  onReady,\n  onError,\n}) => {\n  const inheritedAudio = useMediaAudio();\n  const reportMediaFailure = useMediaFailure();\n  const inheritedPreroll = useNarrationPreroll();\n  const rewindPreroll = preparingNarration || inheritedPreroll;\n  const resolvedMuted = muted ?? inheritedAudio.muted;\n  const resolvedVolume = volume ?? inheritedAudio.volume;\n  const resolvedPosition = resolveMediaPosition(mediaPosition);\n  const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);\n  const [decodedVideoUrl, setDecodedVideoUrl] = useState<string>();\n  const [waitingKey, setWaitingKey] = useState<string>();\n  const [exhaustedKey, setExhaustedKey] = useState<string>();\n\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const startedVideoUrl = useRef<string | undefined>(undefined);\n  const startedPlaybackId = useRef<string | undefined>(undefined);\n  const videoPresentationKey = `${playbackId}\\0${mediaUrl}`;\n\n  const presentationRef = useRef({ key: videoPresentationKey, playing: isPlaying });\n  presentationRef.current = { key: videoPresentationKey, playing: isPlaying };\n  const unavailable = () => {\n    if (presentationRef.current.key === videoPresentationKey && presentationRef.current.playing) {\n      setExhaustedKey(videoPresentationKey);\n      onError?.();\n      reportMediaFailure?.();\n    }\n  };\n  const fitDuration = useCallback((video: HTMLVideoElement) => {\n    // Allow a small decode-to-speech onset margin without changing narration.\n    video.playbackRate = (resolvedMuted || video.preservesPitch === true) && sceneDuration && Number.isFinite(video.duration) && video.duration > 0\n      ? Math.max(.75, Math.min(1, video.duration / (sceneDuration + .2))) : 1;\n  }, [resolvedMuted, sceneDuration]);\n  useEffect(() => {\n    if (videoRef.current) fitDuration(videoRef.current);\n  }, [fitDuration]);\n  const continueMotion = (video: HTMLVideoElement) => {\n    if (!isPlaying) return;\n    // The finite scene clock bounds silent coverage. Speech may outlast a\n    // short clip; repeat motion until the scene ends, never audible dialogue.\n    if (!resolvedMuted) {\n      unavailable();\n      return;\n    }\n    video.currentTime = 0;\n    void video.play().catch(unavailable);\n  };\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    // React Strict Mode rehearses setup → cleanup → setup in development.\n    // The cleanup deliberately releases the decoder, so the repeated setup\n    // must restore the declarative source before the playback effect runs.\n    if (video.getAttribute(\"src\") !== mediaUrl) {\n      video.setAttribute(\"src\", mediaUrl);\n      video.load();\n    }\n    return () => {\n      video.pause();\n      video.removeAttribute(\"src\");\n      video.load();\n      startedVideoUrl.current = undefined;\n      startedPlaybackId.current = undefined;\n    };\n  }, [mediaUrl]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (video) video.volume = resolvedVolume;\n  }, [resolvedVolume]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    if (!isPlaying) {\n      video.pause();\n      if (rewindPreroll && video.currentTime > 0) video.currentTime = 0;\n      return;\n    }\n    if (startedPlaybackId.current === playbackId) {\n      if (video.ended) continueMotion(video);\n      else void video.play().catch(unavailable);\n      return;\n    }\n    const changingSource = startedVideoUrl.current !== undefined && startedVideoUrl.current !== mediaUrl;\n    fitDuration(video);\n    if (!changingSource && video.currentTime > 0) video.currentTime = 0;\n    video.play().catch(unavailable);\n    startedVideoUrl.current = mediaUrl;\n    startedPlaybackId.current = playbackId;\n  }, [isPlaying, mediaUrl, playbackId, rewindPreroll]);\n\n  const mediaStyle: React.CSSProperties = {\n    position: \"absolute\",\n    inset: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    objectPosition: resolvedPosition,\n    transform: bgTransform.transform,\n    transformOrigin: bgTransform.transformOrigin,\n    zIndex: persistent ? 1 : undefined,\n  };\n  const preparedPosition = preparedPoster\n    ? resolveMediaPosition(preparedPoster.mediaPosition)\n    : resolvedPosition;\n  const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);\n  const posterPlanes = [\n    ...(persistent && mediaPoster ? [{\n      presentationKey: videoPresentationKey,\n      mediaPoster,\n      mediaPosition: resolvedPosition,\n      transform: bgTransform.transform,\n      transformOrigin: bgTransform.transformOrigin,\n      opacity: 1,\n      zIndex: 0,\n      role: \"current\",\n    }] : []),\n    ...(preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{\n      presentationKey: preparedPoster.presentationKey,\n      mediaPoster: preparedPoster.mediaPoster,\n      mediaPosition: preparedPosition,\n      transform: preparedTransform.transform,\n      transformOrigin: preparedTransform.transformOrigin,\n      opacity: preparedPoster.opacity ?? 0,\n      zIndex: 2,\n      role: \"prepared\",\n    }] : []),\n  ];\n\n  return (\n    <>\n      {posterPlanes.map((posterPlane) => (\n        <img\n          key={posterPlane.presentationKey}\n          src={posterPlane.mediaPoster}\n          alt=\"\"\n          aria-hidden=\"true\"\n          draggable={false}\n          data-video-poster-plane={posterPlane.role}\n          data-video-poster-visible={posterPlane.opacity > 0 ? \"true\" : \"false\"}\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            objectPosition: posterPlane.mediaPosition,\n            transform: posterPlane.transform,\n            transformOrigin: posterPlane.transformOrigin,\n            zIndex: posterPlane.zIndex,\n            opacity: posterPlane.opacity,\n            pointerEvents: \"none\",\n          }}\n        />\n      ))}\n      {(exhaustedKey === videoPresentationKey || waitingKey === videoPresentationKey) && <div\n        role=\"status\" data-media-continuity={exhaustedKey === videoPresentationKey ? \"exhausted\" : \"waiting\"}\n        style={{ position: \"absolute\", inset: 0, zIndex: 3, background: \"#000\", color: \"#bbb\", display: \"grid\", placeContent: \"center\", font: \"14px system-ui\" }}\n      >{exhaustedKey === videoPresentationKey ? \"Visual unavailable\" : \"Loading visual\"}</div>}\n      <video\n        ref={videoRef}\n        src={mediaUrl}\n        poster={retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || undefined : undefined}\n        muted={resolvedMuted}\n        loop={false}\n        playsInline\n        preload=\"auto\"\n        onLoadedMetadata={event => fitDuration(event.currentTarget)}\n        onEnded={event => continueMotion(event.currentTarget)}\n        onWaiting={() => { if (isPlaying) setWaitingKey(videoPresentationKey); }}\n        onPlaying={() => setWaitingKey(undefined)}\n        onLoadedData={(event) => {\n          const video = event.currentTarget;\n          const markPresented = () => {\n            if (!video.isConnected) return;\n            onReady?.();\n            if (!retainPoster) setDecodedVideoUrl(mediaUrl);\n          };\n          if (video.requestVideoFrameCallback) {\n            video.requestVideoFrameCallback(markPresented);\n            return;\n          }\n          markPresented();\n        }}\n        onError={onError}\n        data-media-position={mediaPosition}\n        data-video-backdrop={persistent ? \"persistent\" : \"scene\"}\n        style={{ ...mediaStyle, visibility: exhaustedKey === videoPresentationKey || waitingKey === videoPresentationKey ? \"hidden\" : undefined }}\n      />\n    </>\n  );\n};\n"
     },
     {
       "path": "src/visual-system/scene-templates/color-utils.ts",