@vanillaskyai/video 0.5.8 → 0.7.0

package/dist/{brand-message-P56WEJPG.js → brand-message-FUJ4STFO.js}

@@ -4,17 +4,17 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-6M6DATLW.js";
+} from "./chunk-MXZSDGZQ.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-HT6BGERF.js";
+import "./chunk-FRN6WKHA.js";
 import "./chunk-W3VDIBGR.js";
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
-import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
+import "./chunk-5CDAM24P.js";
 import "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/typography/BrandMessageBubble.tsx

package/dist/{builtin-server-YHEZ2JRF.js → builtin-server-KB7FKF6A.js}

@@ -1,7 +1,7 @@
 import {
   BUILTIN_SERVER_TEMPLATE_KIT
-} from "./chunk-FVTMYS6U.js";
-import "./chunk-3RV4YKB3.js";
+} from "./chunk-RGF452LL.js";
+import "./chunk-JNN3EYVP.js";
 import "./chunk-2E6T633S.js";
 export {
   BUILTIN_SERVER_TEMPLATE_KIT

package/dist/{chart-bar-ZB45ZRKH.js → chart-bar-EGPHJATL.js}

@@ -1,12 +1,12 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-6M6DATLW.js";
+} from "./chunk-MXZSDGZQ.js";
 import {
   TemplateText
-} from "./chunk-TCEHK2BW.js";
+} from "./chunk-YJJC4N4D.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-HT6BGERF.js";
+import "./chunk-FRN6WKHA.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
@@ -16,10 +16,10 @@ import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
-import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
+import "./chunk-5CDAM24P.js";
 import {
   resolveTokens
 } from "./chunk-XWWLKRNU.js";

package/dist/{chart-counter-HFYNE4HT.js → chart-counter-5FFWQNZO.js}

@@ -8,12 +8,12 @@ import "./chunk-QAAO7OAY.js";
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-6M6DATLW.js";
+} from "./chunk-MXZSDGZQ.js";
 import {
   TemplateText
-} from "./chunk-TCEHK2BW.js";
+} from "./chunk-YJJC4N4D.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-HT6BGERF.js";
+import "./chunk-FRN6WKHA.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
@@ -22,10 +22,10 @@ import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
-import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
+import "./chunk-5CDAM24P.js";
 import {
   MEDIA_TEXT_SHADOW,
   TOKEN_DEFAULTS,

package/dist/{chart-progress-ring-ZKMLRGSB.js → chart-progress-ring-JMXQLMLC.js}

@@ -5,12 +5,12 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-6M6DATLW.js";
+} from "./chunk-MXZSDGZQ.js";
 import {
   TemplateText
-} from "./chunk-TCEHK2BW.js";
+} from "./chunk-YJJC4N4D.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-HT6BGERF.js";
+import "./chunk-FRN6WKHA.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
@@ -18,10 +18,10 @@ import {
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
-import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
+import "./chunk-5CDAM24P.js";
 import {
   TOKEN_DEFAULTS,
   resolveTokens

package/dist/check-runtime.js

@@ -1,8 +1,8 @@
 import {
   VideoFrame
-} from "./chunk-NGY3TNND.js";
-import "./chunk-C6WVCZRW.js";
+} from "./chunk-K746NUIP.js";
 import "./chunk-224QNWRA.js";
+import "./chunk-5CDAM24P.js";
 import "./chunk-XWWLKRNU.js";
 import "./chunk-SPVTJH3F.js";
 import {

package/dist/{chunk-66MNRUCR.js → chunk-2PYO6VAC.js}

@@ -1,4 +1,5 @@
 import {
+  VIDEO_PROTOCOL_VERSION,
   VIDEO_SCHEMA_VERSION
 } from "./chunk-AOWSXU2K.js";
 import {
@@ -273,7 +274,8 @@ function validateScene(value, path) {
     "variables",
     "textArchetype",
     "backgroundEffect",
-    "timing"
+    "timing",
+    "narration"
   ], path);
   nonEmptyString(requiredField(result, "id", `${path}.id`), `${path}.id`, 128);
   nonEmptyString(requiredField(result, "templateId", `${path}.templateId`), `${path}.templateId`, 128);
@@ -285,6 +287,8 @@ function validateScene(value, path) {
     const field = ownField(result, key, `${path}.${key}`);
     if (field.present) nonEmptyString(field.value, `${path}.${key}`, 128);
   }
+  const narration = ownField(result, "narration", `${path}.narration`);
+  if (narration.present) nonEmptyString(narration.value, `${path}.narration`, 4e3);
   return result;
 }
 function validateStyle(value, path) {
@@ -296,7 +300,8 @@ function validateStyle(value, path) {
     "defaultTextArchetype",
     "defaultTransition",
     "density",
-    "motion"
+    "motion",
+    "generatedLook"
   ], path);
   const brandValue = requiredField(result, "brand", `${path}.brand`);
   const brand = record(brandValue, `${path}.brand`);
@@ -305,6 +310,8 @@ function validateStyle(value, path) {
     if (field.present) nonEmptyString(field.value, `${path}.brand.${key}`);
   }
   validateVideoBrand(brandValue, `${path}.brand`);
+  const look = ownField(result, "generatedLook", `${path}.generatedLook`);
+  if (look.present) nonEmptyString(look.value, `${path}.generatedLook`, 1e3);
   for (const key of [
     "preset",
     "defaultBackgroundEffect",
@@ -494,11 +501,52 @@ function parseVideo(value) {
   }
 }
 
+// src/protocol/stable-json.ts
+function stableJson(value) {
+  if (value == null || typeof value !== "object") return JSON.stringify(value);
+  if (Array.isArray(value)) return `[${value.map(stableJson).join(",")}]`;
+  const entries = Object.entries(value).filter(([, child]) => child !== void 0).sort(([left], [right]) => left < right ? -1 : left > right ? 1 : 0);
+  return `{${entries.map(([key, child]) => `${JSON.stringify(key)}:${stableJson(child)}`).join(",")}}`;
+}
+
+// src/protocol/checksum.ts
+function checksumVideo(config) {
+  const input = stableJson(config);
+  let hash = 2166136261;
+  for (let index = 0; index < input.length; index += 1) {
+    hash ^= input.charCodeAt(index);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return `fnv1a32:${hash.toString(16).padStart(8, "0")}`;
+}
+
+// src/protocol/events.ts
+function createVideoEventFactory(options) {
+  let sequence = options.initialSequence ?? 0;
+  return {
+    create(type, data) {
+      const currentSequence = sequence;
+      sequence += 1;
+      return {
+        protocolVersion: VIDEO_PROTOCOL_VERSION,
+        runId: options.runId,
+        sequence: currentSequence,
+        eventId: `${options.runId}:${currentSequence}`,
+        type,
+        data
+      };
+    }
+  };
+}
+
 export {
   MAX_RETAINED_SOURCE_LENGTH,
   MAX_RETAINED_INSTRUCTIONS_LENGTH,
   MAX_RETAINED_MEDIA_URLS,
   MAX_RETAINED_MEDIA_URL_LENGTH,
   VideoValidationError,
-  parseVideo
+  parseVideo,
+  stableJson,
+  checksumVideo,
+  createVideoEventFactory
 };

package/dist/{chunk-ZQQQAAKP.js → chunk-2XT4MZ76.js}

@@ -1,6 +1,9 @@
 import {
   parseVideoEvent
-} from "./chunk-G66Z5CWR.js";
+} from "./chunk-MMUXVA47.js";
+import {
+  MAX_RETAINED_MEDIA_URL_LENGTH
+} from "./chunk-2PYO6VAC.js";
 import {
   VIDEO_PROTOCOL_VERSION
 } from "./chunk-AOWSXU2K.js";
@@ -92,10 +95,38 @@ function videoSseHeaders(headers) {
   return result;
 }
 
+// src/video-chat/media.ts
+function sanitizeVideoChatMedia(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const media = value;
+  if (media.type !== "image" && media.type !== "video") return null;
+  if (typeof media.url !== "string") return null;
+  const url = media.url.trim();
+  if (!safeMediaUrl(url)) return null;
+  if (media.posterUrl != null && typeof media.posterUrl !== "string") return null;
+  const posterUrl = typeof media.posterUrl === "string" ? media.posterUrl.trim() : "";
+  if (posterUrl && !safeMediaUrl(posterUrl)) return null;
+  return {
+    url,
+    type: media.type,
+    ...posterUrl ? { posterUrl } : {}
+  };
+}
+function safeMediaUrl(value) {
+  if (!value || value.length > MAX_RETAINED_MEDIA_URL_LENGTH) return false;
+  try {
+    const protocol = new URL(value).protocol;
+    return protocol === "https:" || protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
 export {
   VIDEO_STREAM_HEADER,
   VIDEO_STREAM_CONTENT_TYPE,
   encodeVideoSseEvent,
   decodeVideoSse,
-  videoSseHeaders
+  videoSseHeaders,
+  sanitizeVideoChatMedia
 };

package/dist/chunk-5CDAM24P.js

@@ -0,0 +1,31 @@
+// src/visual-system/scene-templates/external-video-backdrop.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT = { mode: false, audioMuted: true, audioVolume: 1 };
+var sharedContext = globalThis;
+var BackdropContext = sharedContext.__vanillaskyVideoBackdropContext ??= React.createContext(DEFAULT);
+function ExternalVideoBackdropProvider({
+  mode,
+  audioMuted = true,
+  audioVolume = 1,
+  children
+}) {
+  const value = React.useMemo(
+    () => ({ mode, audioMuted, audioVolume }),
+    [mode, audioMuted, audioVolume]
+  );
+  return /* @__PURE__ */ jsx(BackdropContext.Provider, { value, children });
+}
+function useExternalVideoBackdrop() {
+  return React.useContext(BackdropContext).mode;
+}
+function useMediaAudio() {
+  const { audioMuted, audioVolume } = React.useContext(BackdropContext);
+  return { muted: audioMuted, volume: audioVolume };
+}
+
+export {
+  ExternalVideoBackdropProvider,
+  useExternalVideoBackdrop,
+  useMediaAudio
+};

package/dist/{chunk-PNS52FL4.js → chunk-5SLENAJW.js}

@@ -1,19 +1,29 @@
 // src/server/prompts/system-prompt.ts
-var VIDEO_PLAN_INSTRUCTION = `Wire format: newline-delimited JSON (NDJSON), exactly one complete JSON object per line.
+function videoPlanInstruction(narrate = false) {
+  const narration = narrate ? `,"narration":"one sentence said aloud over this scene"` : "";
+  return `Wire format: newline-delimited JSON (NDJSON), exactly one complete JSON object per line.
 Allowed plan parts:
-{"type":"scene.add","scene":{"id":"stable-id","templateId":"trusted-template-id","variables":{},"timing":{"fixedDuration":4}}}
-{"type":"scene.add","placement":"closer","scene":{"id":"closer","templateId":"trusted-closer-template-id","variables":{},"timing":{"fixedDuration":3}}}
+{"type":"scene.add","scene":{"id":"stable-id","templateId":"trusted-template-id","variables":{},"timing":{"fixedDuration":4}${narration}}}
+{"type":"scene.add","placement":"closer","scene":{"id":"closer","templateId":"trusted-closer-template-id","variables":{},"timing":{"fixedDuration":3}${narration}}}
 {"type":"plan.complete","finishReason":"stop"}
 Do not emit protocol envelopes, Markdown fences, comments, prose, partial objects, audio, generated source, or any part type not listed above.`;
+}
+var VIDEO_PLAN_INSTRUCTION = videoPlanInstruction();
 function knowledgeRules(mode) {
   return mode === "general" ? `- This request uses general knowledge mode.
 - Use stable general knowledge to answer or develop the supplied request. Prefer broadly established, non-current information.
 - Answer the request directly. Do not make missing source detail the subject when stable general knowledge can provide a useful answer; for broad questions, provide a practical, broadly applicable framework.
-- For financial, medical, or legal topics, keep guidance general and educational. Never present it as personalized professional advice.
+- For financial, medical, or legal topics, keep guidance general and informational. Never present it as personalized professional advice.
 - Treat claims in the supplied input as authoritative. Never invent citations, quotations, URLs, personal details, live facts, guarantees, or precise claims that require a source.` : `- This request uses input-only knowledge mode.
 - The supplied input is the complete factual basis. Do not add outside claims.`;
 }
-function createVideoSystemPrompt(knowledgeMode = "input-only") {
+var NARRATION_RULES = `
+Narration rules:
+- Every scene.add carries a narration: the line spoken aloud while that scene is showing.
+- One sentence, 10-16 words, plain spoken English. It is heard, never drawn.
+- Say what the scene shows and why it matters. Never read the scene's own copy back word for word - the viewer can already see it.
+- The lines are one continuous explanation: each follows from the ones before it. Never mention scenes, videos, slides, or yourself.`;
+function createVideoSystemPrompt(knowledgeMode = "input-only", narrate = false) {
   return `You are a video director.
 
 Turn the supplied input into a concise, coherent sequence using trusted scene templates. Never return prose as the deliverable and never generate HTML, React, JavaScript, CSS, or animation source.
@@ -43,11 +53,14 @@ Streaming rules:
 - End explicitly with plan.complete. A truncated stream is never treated as complete.
 - Return only plan parts accepted by the provided schema.
 
-${VIDEO_PLAN_INSTRUCTION}`;
+${narrate ? NARRATION_RULES : ""}
+
+${videoPlanInstruction(narrate)}`;
 }
 var DEFAULT_VIDEO_SYSTEM_PROMPT = createVideoSystemPrompt();
 
 export {
+  videoPlanInstruction,
   VIDEO_PLAN_INSTRUCTION,
   createVideoSystemPrompt,
   DEFAULT_VIDEO_SYSTEM_PROMPT

package/dist/{chunk-EFL34TXF.js → chunk-AITKH6QT.js}

@@ -1,6 +1,6 @@
 import {
   createVideoSystemPrompt
-} from "./chunk-PNS52FL4.js";
+} from "./chunk-5SLENAJW.js";
 import {
   PACING_PLANNER_RULES
 } from "./chunk-3O7OMMMF.js";
@@ -64,12 +64,19 @@ function needsPlannerSchema(schema) {
   const visit = (property) => property.minimum != null || property.maximum != null || property.type === "object" || property.items != null && visit(property.items);
   return Object.values(schema.properties).some(visit);
 }
+function isMediaProperty(property) {
+  return property?.format === "uri" || property?.format === "supplied-image" || property?.format === "stock-media-keyword";
+}
+function requiresAvailableMedia(template) {
+  const gates = getTemplateSchemaGates(template.schema);
+  return (template.schema.required ?? []).some((name) => isMediaProperty(template.schema.properties[name])) || gates.requiredAnyOf.some((group) => group.every((name) => isMediaProperty(template.schema.properties[name])));
+}
 var COMMON_MEDIA_VARIABLES = {
   mediaUrl: "media",
   mediaType: "enum(auto|photo|video|gradient)",
   mediaPoster: "media",
   mediaPosition: "enum(center|top|bottom|left|right)",
-  mediaTreatment: "enum(subtle|cinematic|text-safe)"
+  mediaTreatment: "enum(none|subtle|cinematic|text-safe)"
 };
 function plannerCatalog(templates, mediaResolverAvailable) {
   return templates.map((template) => {
@@ -103,12 +110,15 @@ function plannerCatalog(templates, mediaResolverAvailable) {
   });
 }
 function createTemplateSystemPrompt(options) {
-  const templates = options.kit.listTemplateMetadata();
+  const templates = options.kit.listTemplateMetadata().filter((template) => !requiresAvailableMedia(template) || options.suppliedMediaAvailable === true || options.mediaResolverAvailable === true && getStandardMediaResolverContract(template.schema) != null);
   const resolverMediaAvailable = options.mediaResolverAvailable === true && templates.some(({ schema }) => getStandardMediaResolverContract(schema) != null);
   const ids = new Set(templates.map(({ id }) => id));
   const fields = new Set(templates.flatMap(({ schema }) => Object.keys(schema.properties)));
-  const basePrompt = createVideoSystemPrompt(options.knowledgeMode).split("\n").filter(
-    (line) => !line.includes("Never use media, ctaMedia, or reaction as the first generated body template") && !(resolverMediaAvailable && line.includes("Never expose a loading placeholder or unresolved media keyword"))
+  const basePrompt = createVideoSystemPrompt(options.knowledgeMode, options.narrate === true).split("\n").filter(
+    (line) => !line.includes("Never use media, ctaMedia, or reaction as the first generated body template") && // The rule that keeps the opening beat asset-free belongs to the same
+    // pair as the one below it: both exist so playback can start without
+    // waiting on a provider, and both go when the host owns that wait.
+    !(options.mediaOnFirstScene === true && line.includes("The first generated body scene must be asset-free")) && !(resolverMediaAvailable && line.includes("Never expose a loading placeholder or unresolved media keyword"))
   ).join("\n");
   const factRules = [
     ...ids.has("cardList") ? ["cardList needs two or three unused parallel facts"] : [],
@@ -139,12 +149,18 @@ ${options.basePrompt.trim()}` : void 0,
     terminalPayoffs.length > 0 ? `When the input has no clear grounded action, never invent one and do not use jobs:[ask]. End with a grounded payoff using ${terminalPayoffNames}. Its concise 6\u201312 words of declarative copy must answer the story's so-what without repeating hook or setup language. Use media for an honest visual payoff, emojiBurst for playful delight, and confetti only for a real celebration, win, or milestone.` : void 0,
     "requiresQuote is a hard gate: use those templates only for exact quoted words and attribution present in raw input. Never turn a role, relationship, or summary into speech. requiresScreenshot likewise needs an actual supplied screenshot URL.",
     templates.some(({ schema }) => (schema["x-vanillasky"]?.requiredAnyOf?.length ?? 0) > 0) ? "requiredAnyOf is a hard presence gate: satisfy every listed group with at least one non-empty value." : void 0,
-    mediaTemplates.length > 0 ? `For streaming startup, ${mediaTemplateNames} ${mediaTemplates.length === 1 ? "is" : "are"} forbidden as the first generated body template, even when mediaType is gradient. Start with a content-fit non-media template.` : void 0,
+    mediaTemplates.length > 0 && options.mediaOnFirstScene !== true ? `For streaming startup, ${mediaTemplateNames} ${mediaTemplates.length === 1 ? "is" : "are"} forbidden as the first generated body template, even when mediaType is gradient. Start with a content-fit non-media template.` : void 0,
     listFields.length > 0 ? `For list variables (${listFields.join(", ")}), emit actual JSON arrays. Keep list labels to 1\u20133 words. Keep step labels to 1\u20132 words and at most 18 characters. Do not use pipes or newlines as list delimiters.` : void 0,
     fields.has("bars") ? 'For bars, emit an actual JSON array of 2\u20136 grounded objects with "label" and "value" fields. Use comparable units and avoid a largest-to-smallest positive ratio above 20. Do not encode bars as a string.' : void 0,
-    resolverMediaAvailable ? "Prefer a relevant resolved image or video background on later media-capable scenes whenever the permitted factual basis names a concrete person, place, product context, activity, or outcome that can be depicted honestly. Emit mediaKeyword on scene.add as a specific 2\u20138 word semantic query of at most 80 characters. The host removes mediaKeyword before the complete scene reaches the browser and replaces it with an approved asset. Use mediaType=gradient for abstract, sensitive, unsafe, or visually ambiguous material. Never emit or invent mediaUrl or mediaPoster." : mediaTemplates.length > 0 ? `Use exact grounded values for required fields. mediaUrl must come verbatim from supplied input. Stock queries are not available. Do not select ${mediaTemplateNames} without a supplied mediaUrl; if another template has no mediaUrl, explicitly use mediaType=gradient. mediaType auto detects a URL, while gradient deliberately uses no external asset.` : "Use exact grounded values for required fields.",
+    resolverMediaAvailable ? `Prefer a relevant resolved image or video background on ${options.mediaOnFirstScene === true ? "every media-capable scene, the first included," : "later media-capable scenes"} whenever the permitted factual basis names a concrete person, place, product context, activity, or outcome that can be depicted honestly. Emit mediaKeyword on scene.add as a specific 2\u20138 word semantic query of at most 80 characters. The host removes mediaKeyword before the complete scene reaches the browser and replaces it with an approved asset. Use mediaType=gradient for abstract, sensitive, unsafe, or visually ambiguous material. Never emit or invent mediaUrl or mediaPoster.` : mediaTemplates.length > 0 ? `Use exact grounded values for required fields. mediaUrl must come verbatim from supplied input. Stock queries are not available. Do not select ${mediaTemplateNames} without a supplied mediaUrl; if another template has no mediaUrl, explicitly use mediaType=gradient. mediaType auto detects a URL, while gradient deliberately uses no external asset.` : "Use exact grounded values for required fields.",
     "Catalog guidance describes composition; it is not a factual source and must never replace the permitted factual basis.",
-    JSON.stringify(plannerCatalog(templates, resolverMediaAvailable))
+    JSON.stringify(plannerCatalog(templates, resolverMediaAvailable)),
+    // Last, because the catalogue is thousands of tokens of per-scene field
+    // lists and it is what the model matches when it emits a scene. The wire
+    // format above says narration belongs there; said only above, a third of
+    // the way through, it loses to the schema the model has just finished
+    // reading, and every scene comes back silent.
+    options.narrate === true ? '\nThe catalog lists variables only. Every scene.add also carries "narration" beside "variables" and "timing", as specified in the wire format above. A scene without it is incomplete.' : void 0
   ].filter((line) => line != null).join("\n");
 }
 

package/dist/{chunk-HT6BGERF.js → chunk-FRN6WKHA.js}

@@ -1,6 +1,9 @@
 import {
   getBackgroundTransform
 } from "./chunk-W3VDIBGR.js";
+import {
+  useMediaAudio
+} from "./chunk-5CDAM24P.js";
 
 // src/visual-system/scene-templates/scene-video-backdrop.tsx
 import { useEffect, useRef, useState } from "react";
@@ -27,6 +30,8 @@ var SceneVideoBackdrop = ({
   progress,
   beatIntensity = 0,
   isPlaying,
+  muted,
+  volume,
   playbackId = mediaUrl,
   retainPoster = false,
   persistent = false,
@@ -34,6 +39,9 @@ var SceneVideoBackdrop = ({
   onReady,
   onError
 }) => {
+  const inheritedAudio = useMediaAudio();
+  const resolvedMuted = muted ?? inheritedAudio.muted;
+  const resolvedVolume = volume ?? inheritedAudio.volume;
   const resolvedPosition = resolveMediaPosition(mediaPosition);
   const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);
   const [decodedVideoUrl, setDecodedVideoUrl] = useState();
@@ -41,6 +49,25 @@ var SceneVideoBackdrop = ({
   const startedVideoUrl = useRef(void 0);
   const startedPlaybackId = useRef(void 0);
   const videoPresentationKey = `${playbackId}\0${mediaUrl}`;
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.getAttribute("src") !== mediaUrl) {
+      video.setAttribute("src", mediaUrl);
+      video.load();
+    }
+    return () => {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      startedVideoUrl.current = void 0;
+      startedPlaybackId.current = void 0;
+    };
+  }, [mediaUrl]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video) video.volume = resolvedVolume;
+  }, [resolvedVolume]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -59,15 +86,6 @@ var SceneVideoBackdrop = ({
     startedVideoUrl.current = mediaUrl;
     startedPlaybackId.current = playbackId;
   }, [isPlaying, mediaUrl, playbackId]);
-  useEffect(() => {
-    const video = videoRef.current;
-    return () => {
-      if (!video) return;
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-    };
-  }, []);
   const mediaStyle = {
     position: "absolute",
     inset: 0,
@@ -135,7 +153,7 @@ var SceneVideoBackdrop = ({
         ref: videoRef,
         src: mediaUrl,
         poster: retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || void 0 : void 0,
-        muted: true,
+        muted: resolvedMuted,
         loop: true,
         playsInline: true,
         preload: "auto",

package/dist/{chunk-FZHMQFG3.js → chunk-GAIOHGNR.js}

@@ -1,29 +1,14 @@
 import {
   parseVideoEvent
-} from "./chunk-G66Z5CWR.js";
+} from "./chunk-MMUXVA47.js";
+import {
+  checksumVideo,
+  stableJson
+} from "./chunk-2PYO6VAC.js";
 import {
   VIDEO_SCHEMA_VERSION
 } from "./chunk-AOWSXU2K.js";
 
-// src/protocol/stable-json.ts
-function stableJson(value) {
-  if (value == null || typeof value !== "object") return JSON.stringify(value);
-  if (Array.isArray(value)) return `[${value.map(stableJson).join(",")}]`;
-  const entries = Object.entries(value).filter(([, child]) => child !== void 0).sort(([left], [right]) => left < right ? -1 : left > right ? 1 : 0);
-  return `{${entries.map(([key, child]) => `${JSON.stringify(key)}:${stableJson(child)}`).join(",")}}`;
-}
-
-// src/protocol/checksum.ts
-function checksumVideo(config) {
-  const input = stableJson(config);
-  let hash = 2166136261;
-  for (let index = 0; index < input.length; index += 1) {
-    hash ^= input.charCodeAt(index);
-    hash = Math.imul(hash, 16777619) >>> 0;
-  }
-  return `fnv1a32:${hash.toString(16).padStart(8, "0")}`;
-}
-
 // src/protocol/state.ts
 function createVideoState() {
   return {
@@ -188,7 +173,6 @@ function createReplayableStream(source, onError) {
 }
 
 export {
-  checksumVideo,
   createVideoState,
   applyVideoEvent,
   createReplayableStream