@vanillaskyai/video 0.10.6 → 0.10.8

package/dist/{chunk-VWJBIYBM.js → chunk-KUCEOG2L.js}

@@ -1,11 +1,11 @@
+import {
+  ExternalVideoBackdropProvider,
+  resolveDensity
+} from "./chunk-5JBMYQP6.js";
 import {
   limitsConcurrentVideoDecoders,
   resolveMediaType
 } from "./chunk-224QNWRA.js";
-import {
-  ExternalVideoBackdropProvider,
-  resolveDensity
-} from "./chunk-OOBT4X46.js";
 import {
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
@@ -33,17 +33,19 @@ function MountedSceneReadiness({ scene, playing, fallback = false, onFailure })
     let frame = 0;
     let callback;
     let observed;
+    let presented;
+    const root = marker.current?.closest("[data-video-frame]");
     const start = performance.now();
     const finish = (error, actualVideoFrame = false) => {
       if (!stopped) {
         stopped = true;
+        if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
         if (error && onFailureRef.current) onFailureRef.current();
         else report(key, error, actualVideoFrame);
       }
     };
     const check = () => {
       if (stopped) return;
-      const root = marker.current?.closest("[data-video-frame]");
       if (fallback && root?.querySelector("[data-scene-fallback]") && !root.querySelector("[data-template-loading]") && document.fonts?.status !== "loading") {
         finish();
         return;
@@ -58,9 +60,12 @@ function MountedSceneReadiness({ scene, playing, fallback = false, onFailure })
           return;
         }
         if (isVideo) {
-          const persistent = root.querySelector("[data-persistent-video-scene-id]");
-          const video = (persistent?.getAttribute("data-persistent-video-scene-id") === scene.id ? persistent : layer)?.querySelector("video");
-          if (video && video.getAttribute("src") === mediaUrl && video.readyState >= 2) {
+          const video = layer.querySelector("video");
+          if (video && video.getAttribute("src") === mediaUrl && video.currentSrc === video.src && video.readyState >= 2) {
+            if (presented === video) {
+              finish(void 0, true);
+              return;
+            }
             observed = video;
             if (video.requestVideoFrameCallback) {
               callback = video.requestVideoFrameCallback(() => finish(void 0, true));
@@ -83,9 +88,20 @@ function MountedSceneReadiness({ scene, playing, fallback = false, onFailure })
       }
       frame = requestAnimationFrame(check);
     };
+    const onPresented = (event) => {
+      const video = event.target;
+      if (!(video instanceof HTMLVideoElement) || stopped || video.getAttribute("src") !== String(scene.variables.mediaUrl || "") || video.currentSrc !== video.src) return;
+      presented = video;
+      cancelAnimationFrame(frame);
+      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
+      callback = void 0;
+      check();
+    };
+    root?.addEventListener("vanillasky:video-frame-presented", onPresented);
     check();
     const timeout = setTimeout(() => finish(new Error("Scene media did not become ready")), 8e3);
     return () => {
+      root?.removeEventListener("vanillasky:video-frame-presented", onPresented);
       stopped = true;
       clearTimeout(timeout);
       cancelAnimationFrame(frame);
@@ -94,47 +110,14 @@ function MountedSceneReadiness({ scene, playing, fallback = false, onFailure })
   }, [key, report, scene, playing, fallback]);
   return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
 }
-function PreparedSceneReadiness({ scene }) {
-  const marker = useRef(null);
-  const report = useContext(MountedReadinessContext);
-  useEffect(() => {
-    if (!report) return;
-    let frame = 0;
-    let stopped = false;
-    const check = () => {
-      if (stopped) return;
-      const root = marker.current?.closest("[data-video-frame]");
-      const incoming = root?.querySelector("[data-scene-layer='incoming']");
-      const video = incoming?.getAttribute("data-layer-scene-id") === scene.id ? incoming.querySelector("video") : void 0;
-      if (video && video.getAttribute("src") === scene.variables.mediaUrl && video.readyState >= 2) {
-        report(sceneReadinessKey(scene), void 0, false, true);
-        return;
-      }
-      const image = [...root?.querySelectorAll("img[data-video-poster-plane='prepared']") ?? []].find((image2) => image2.getAttribute("src") === scene.variables.mediaPoster);
-      if (image?.complete && image.naturalWidth > 0) {
-        void image.decode().then(() => {
-          if (!stopped && image.isConnected) report(sceneReadinessKey(scene), void 0, false, true);
-        }).catch(() => void 0);
-        return;
-      }
-      frame = requestAnimationFrame(check);
-    };
-    check();
-    return () => {
-      stopped = true;
-      cancelAnimationFrame(frame);
-    };
-  }, [scene, report]);
-  return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
-}
 
 // src/player/video-frame.tsx
 import {
   createElement,
   Component,
-  lazy,
   Suspense,
   useState,
+  useRef as useRef2,
   useCallback,
   useEffect as useEffect2,
   useSyncExternalStore
@@ -209,7 +192,6 @@ var SceneBoundary = class extends Component {
   }
 };
 var SCENE_TRANSITION_SECONDS = 0.3;
-var SceneVideoBackdrop = lazy(() => import("./scene-video-backdrop-MUGIXE2Q.js").then((module) => ({ default: module.SceneVideoBackdrop })));
 var MEDIA_PREROLL_SECONDS = 1.2;
 var CONTIGUITY_ULP_FACTOR = 4;
 var subscribeToDecoderPolicy = () => () => {
@@ -369,19 +351,25 @@ function VideoFrame({
   className,
   style
 }) {
+  const recoveryRoot = useRef2(null);
+  const reportedFailures = useRef2(/* @__PURE__ */ new Set());
   const [failedMedia, setFailedMedia] = useState(() => /* @__PURE__ */ new Set());
-  const markMediaFailed = useCallback((key) => {
+  const markMediaFailed = useCallback((key, reason = "playback-error") => {
     if (!key || !config.scenes.some((scene) => sceneReadinessKey(scene) === key)) return;
+    if (!reportedFailures.current.has(key)) {
+      reportedFailures.current.add(key);
+      recoveryRoot.current?.dispatchEvent(new CustomEvent("vanillasky:media-recovery", { bubbles: true, detail: { reason: ["decode-error", "frame-readiness-timeout", "stalled-media", "playback-error"].includes(reason) ? reason : "playback-error" } }));
+    }
     setFailedMedia((previous) => previous.has(key) ? previous : /* @__PURE__ */ new Set([...previous, key]));
   }, [config.scenes]);
   useEffect2(() => {
     const currentKeys = new Set(config.scenes.map(sceneReadinessKey));
+    for (const key of reportedFailures.current) if (!currentKeys.has(key)) reportedFailures.current.delete(key);
     setFailedMedia((previous) => {
       const retained = new Set([...previous].filter((key) => currentKeys.has(key)));
       return retained.size === previous.size ? previous : retained;
     });
   }, [config.scenes]);
-  const [readyPersistentVideo, setReadyPersistentVideo] = useState();
   const decoderConstrainedDevice = useDecoderConstraint();
   const timeline = resolveVideoTimeline(config);
   const lastRange = timeline.at(-1);
@@ -435,35 +423,13 @@ function VideoFrame({
   );
   const prerollDuration = prerollsNext ? Math.min(Math.max(MEDIA_PREROLL_SECONDS, blendDuration), Math.max(0, duration)) : blendDuration;
   const prerollStart = active.end - prerollDuration;
+  const boundedPreparation = decoderConstrainedDevice && registrySupportsExternalVideoBackdrop(kit);
   const decoderConstrainedTransition = Boolean(
-    contiguousNext && decoderConstrainedDevice && sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext)
+    contiguousNext && decoderConstrainedDevice && !boundedPreparation && sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext)
   );
-  const persistentVideoEnabled = decoderConstrainedDevice && registrySupportsExternalVideoBackdrop(kit);
-  const activeUsesPersistentVideo = persistentVideoEnabled && sceneHasVideoBackdrop(active);
-  const incomingUsesPersistentVideo = Boolean(
-    persistentVideoEnabled && contiguousNext && !sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext) && time >= prerollStart && time < blendEnd
-  );
-  const persistentVideoRange = activeUsesPersistentVideo ? active : incomingUsesPersistentVideo && contiguousNext ? contiguousNext : void 0;
-  const persistentVideoKey = persistentVideoRange ? `${persistentVideoRange.scene.id}\0${String(persistentVideoRange.scene.variables.mediaUrl || "")}` : void 0;
-  const firstVideoRange = timeline.find(sceneHasVideoBackdrop);
-  const posterPreparationRange = activeUsesPersistentVideo ? contiguousNext && sceneHasVideoBackdrop(contiguousNext) ? contiguousNext : activeIndex === timeline.length - 1 && firstVideoRange?.scene.id !== active.scene.id ? firstVideoRange : void 0 : void 0;
-  const preparedReadinessRange = posterPreparationRange ?? (contiguousNext && sceneHasVideoBackdrop(contiguousNext) ? contiguousNext : void 0);
-  const preparedPoster = posterPreparationRange && String(
-    posterPreparationRange.scene.variables.mediaPoster || ""
-  ) ? {
-    presentationKey: `${posterPreparationRange.scene.id}\0${String(
-      posterPreparationRange.scene.variables.mediaUrl || ""
-    )}`,
-    mediaPoster: String(posterPreparationRange.scene.variables.mediaPoster),
-    mediaPosition: String(posterPreparationRange.scene.variables.mediaPosition || "center"),
-    backgroundEffect: posterPreparationRange.scene.backgroundEffect ?? config.style.defaultBackgroundEffect
-  } : void 0;
   const activeMediaFailed = failedMedia.has(sceneReadinessKey(active.scene));
-  const persistentVideoFailed = persistentVideoKey !== void 0 && failedMedia.has(persistentVideoKey);
-  const persistentVideoReady = persistentVideoRange !== void 0 && (String(persistentVideoRange.scene.variables.mediaPoster || "") !== "" || readyPersistentVideo === persistentVideoKey);
-  const persistentVideoMode = persistentVideoFailed ? "fallback" : persistentVideoReady ? "ready" : "pending";
   const mountingNext = Boolean(
-    contiguousNext && !decoderConstrainedTransition && time >= prerollStart && time < blendEnd && (eligibleNextTransition || prerollsNext)
+    contiguousNext && !decoderConstrainedTransition && (boundedPreparation || time >= prerollStart) && time < blendEnd && (eligibleNextTransition || prerollsNext || boundedPreparation && sceneHasVideoBackdrop(contiguousNext))
   );
   const previewingNext = Boolean(
     eligibleNextTransition && time >= blendStart && time < blendEnd
@@ -471,7 +437,9 @@ function VideoFrame({
   const blendProgress = previewingNext && blendDuration > 0 ? Math.round(clamp01((time - blendStart) / blendDuration) * 1e6) / 1e6 : 0;
   const progress = rawProgress;
   const isFinalScene = activeIndex === timeline.length - 1;
-  const motionProgress = isFinalScene && activeTiming ? Math.min(rawProgress, activeTiming.holdProgress) : rawProgress;
+  const presentsChapter = active.scene.templateId === "chapterTitle" || active.scene.templateId === "cinemaMedia" && (activeMediaFailed || !String(active.scene.variables.mediaUrl || "").trim());
+  const finalHold = presentsChapter ? 0.76 : activeTiming?.holdProgress;
+  const motionProgress = isFinalScene && finalHold !== void 0 ? Math.min(rawProgress, finalHold) : rawProgress;
   const canvas = getDimensions(config.orientation);
   const scale = Math.min(width / canvas.width, height / canvas.height);
   const canvasLeft = (width - canvas.width * scale) / 2;
@@ -479,10 +447,15 @@ function VideoFrame({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: recoveryRoot,
       onErrorCapture: (event) => {
         const target = event.target;
-        if ((target instanceof HTMLVideoElement || target instanceof HTMLImageElement) && target.getAttribute("src") === active.scene.variables.mediaUrl && supportsExternalVideoBackdrop(activeTemplate) && (target.closest("[data-layer-scene-id]")?.getAttribute("data-layer-scene-id") === active.scene.id || target.closest("[data-persistent-video-scene-id]")?.getAttribute("data-persistent-video-scene-id") === active.scene.id)) {
-          markMediaFailed(sceneReadinessKey(active.scene));
+        if (!(target instanceof HTMLVideoElement || target instanceof HTMLImageElement)) return;
+        const ownerId = target.closest("[data-layer-scene-id]")?.getAttribute("data-layer-scene-id");
+        const owner = [active, contiguousNext].find((range) => range?.scene.id === ownerId);
+        const template = owner && kit.getTemplate(owner.scene.templateId);
+        if (owner && template && supportsExternalVideoBackdrop(template) && target.getAttribute("src") === owner.scene.variables.mediaUrl) {
+          markMediaFailed(sceneReadinessKey(owner.scene), "decode-error");
         }
       },
       "data-video-frame": "ready",
@@ -504,10 +477,9 @@ function VideoFrame({
             scene: active.scene,
             playing,
             fallback: activeMediaFailed,
-            onFailure: sceneHasBackdrop(active) && supportsExternalVideoBackdrop(activeTemplate) && !activeMediaFailed ? () => markMediaFailed(sceneReadinessKey(active.scene)) : void 0
+            onFailure: sceneHasBackdrop(active) && supportsExternalVideoBackdrop(activeTemplate) && !activeMediaFailed ? () => markMediaFailed(sceneReadinessKey(active.scene), "frame-readiness-timeout") : void 0
           }
         ),
-        preparedReadinessRange && /* @__PURE__ */ jsx2(PreparedSceneReadiness, { scene: preparedReadinessRange.scene }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -536,58 +508,6 @@ function VideoFrame({
                   }
                 }
               ),
-              persistentVideoRange && !persistentVideoFailed && /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  "data-persistent-video-scene-id": persistentVideoRange.scene.id,
-                  "aria-hidden": "true",
-                  style: { position: "absolute", inset: 0, zIndex: 0 },
-                  children: /* @__PURE__ */ jsx2(Suspense, { fallback: String(persistentVideoRange.scene.variables.mediaPoster || "") ? /* @__PURE__ */ jsx2(
-                    "img",
-                    {
-                      src: String(persistentVideoRange.scene.variables.mediaPoster),
-                      alt: "",
-                      "data-video-poster-plane": "loading",
-                      "data-video-poster-visible": "true",
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "cover",
-                        objectPosition: String(persistentVideoRange.scene.variables.mediaPosition || "center")
-                      }
-                    }
-                  ) : null, children: /* @__PURE__ */ jsx2(
-                    SceneVideoBackdrop,
-                    {
-                      mediaUrl: String(persistentVideoRange.scene.variables.mediaUrl || ""),
-                      mediaPoster: String(persistentVideoRange.scene.variables.mediaPoster || "") || void 0,
-                      mediaPosition: String(persistentVideoRange.scene.variables.mediaPosition || "center"),
-                      backgroundEffect: persistentVideoRange.scene.backgroundEffect ?? config.style.defaultBackgroundEffect,
-                      progress: persistentVideoRange.scene.id === active.scene.id ? rawProgress : 0,
-                      sceneDuration: persistentVideoRange.end - persistentVideoRange.start,
-                      isPlaying: persistentVideoRange.scene.id === active.scene.id && playing,
-                      preparingNarration,
-                      muted: mediaAudioMuted || persistentVideoRange.scene.id !== active.scene.id || !playing,
-                      volume: mediaAudioVolume,
-                      playbackId: persistentVideoRange.scene.id,
-                      retainPoster: true,
-                      persistent: true,
-                      preparedPoster: preparedPoster ? {
-                        ...preparedPoster,
-                        // The image is already decoded and costs no second video
-                        // decoder. Fade it above the outgoing video using the same
-                        // authored transition clock, then reuse that exact DOM image
-                        // as the new source's underlay at the cut.
-                        opacity: decoderConstrainedTransition ? blendProgress : 0
-                      } : void 0,
-                      onReady: () => setReadyPersistentVideo(persistentVideoKey),
-                      onError: () => markMediaFailed(persistentVideoKey)
-                    }
-                  ) })
-                }
-              ),
               mountingNext && contiguousNext ? [
                 /* @__PURE__ */ jsx2(
                   SceneLayer,
@@ -596,7 +516,7 @@ function VideoFrame({
                     kit,
                     config,
                     range: active,
-                    onMediaError: () => markMediaFailed(sceneReadinessKey(active.scene)),
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
                     progress,
                     motionProgress,
                     width: canvas.width,
@@ -609,7 +529,7 @@ function VideoFrame({
                     opacity: 1 - blendProgress,
                     interactive: true,
                     zIndex: 1,
-                    externalVideoBackdrop: activeMediaFailed ? "fallback" : persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
                   },
                   active.scene.id
                 ),
@@ -631,7 +551,8 @@ function VideoFrame({
                     opacity: blendProgress,
                     interactive: false,
                     zIndex: 2,
-                    externalVideoBackdrop: persistentVideoRange?.scene.id === contiguousNext.scene.id ? persistentVideoMode : false
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(contiguousNext.scene), reason),
+                    externalVideoBackdrop: failedMedia.has(sceneReadinessKey(contiguousNext.scene)) ? "fallback" : false
                   },
                   contiguousNext.scene.id
                 )
@@ -643,7 +564,7 @@ function VideoFrame({
                     kit,
                     config,
                     range: active,
-                    onMediaError: () => markMediaFailed(sceneReadinessKey(active.scene)),
+                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
                     progress,
                     motionProgress,
                     width: canvas.width,
@@ -656,7 +577,7 @@ function VideoFrame({
                     opacity: 1,
                     interactive: true,
                     zIndex: 1,
-                    externalVideoBackdrop: activeMediaFailed ? "fallback" : persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
                   },
                   active.scene.id
                 )

package/dist/{chunk-XBIKTSFY.js → chunk-Q3LPOPHL.js}

@@ -1,7 +1,7 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-MGCD3ZJ3.js";
+} from "./chunk-J7EGPURK.js";
 
 // src/visual-system/scene-templates/cinema-media.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-JNZRVC45.js → chunk-R5ZX2LJV.js}

@@ -1,7 +1,7 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-MGCD3ZJ3.js";
+} from "./chunk-J7EGPURK.js";
 import {
   editorialFont
 } from "./chunk-4YM2M62S.js";

package/dist/{cinema-media-AYKCBXRI.js → cinema-media-WUS7CKPC.js}

@@ -1,11 +1,10 @@
 import {
   MediaScene,
   MediaSceneTemplate
-} from "./chunk-XBIKTSFY.js";
-import "./chunk-MGCD3ZJ3.js";
-import "./chunk-DD4ZSYKG.js";
+} from "./chunk-Q3LPOPHL.js";
+import "./chunk-J7EGPURK.js";
+import "./chunk-5JBMYQP6.js";
 import "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 export {
   MediaScene,
   MediaSceneTemplate

package/dist/{comparison-74B2XEH4.js → comparison-T4OYCOH3.js}

@@ -1,16 +1,15 @@
 import {
   EditorialSurface
-} from "./chunk-JNZRVC45.js";
-import "./chunk-MGCD3ZJ3.js";
-import "./chunk-DD4ZSYKG.js";
+} from "./chunk-R5ZX2LJV.js";
+import "./chunk-J7EGPURK.js";
 import {
   editorialLabel,
   fade
 } from "./chunk-4YM2M62S.js";
+import "./chunk-5JBMYQP6.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 
 // src/visual-system/scene-templates/comparison.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{editorial-timeline-DUW7C75H.js → editorial-timeline-JHQZIPNE.js}

@@ -1,13 +1,12 @@
 import {
   EditorialSurface
-} from "./chunk-JNZRVC45.js";
-import "./chunk-MGCD3ZJ3.js";
-import "./chunk-DD4ZSYKG.js";
+} from "./chunk-R5ZX2LJV.js";
+import "./chunk-J7EGPURK.js";
 import {
   fade
 } from "./chunk-4YM2M62S.js";
+import "./chunk-5JBMYQP6.js";
 import "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 
 // src/visual-system/scene-templates/editorial-timeline.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{key-figure-OEWIMPGS.js → key-figure-YWN2OBQU.js}

@@ -1,16 +1,15 @@
 import {
   EditorialSurface
-} from "./chunk-JNZRVC45.js";
-import "./chunk-MGCD3ZJ3.js";
-import "./chunk-DD4ZSYKG.js";
+} from "./chunk-R5ZX2LJV.js";
+import "./chunk-J7EGPURK.js";
 import {
   editorialLabel,
   fade
 } from "./chunk-4YM2M62S.js";
+import "./chunk-5JBMYQP6.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 
 // src/visual-system/scene-templates/key-figure.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{mobile-message-KBLF3WUR.js → mobile-message-CDKOERRZ.js}

@@ -1,15 +1,14 @@
 import {
   MediaScene
-} from "./chunk-XBIKTSFY.js";
-import "./chunk-MGCD3ZJ3.js";
+} from "./chunk-Q3LPOPHL.js";
 import {
   spring
-} from "./chunk-DD4ZSYKG.js";
+} from "./chunk-J7EGPURK.js";
 import {
   editorialFont
 } from "./chunk-4YM2M62S.js";
+import "./chunk-5JBMYQP6.js";
 import "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 
 // src/visual-system/scene-templates/mobile-message.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{quote-QCGR2HOU.js → quote-JKABOMIG.js}

@@ -1,15 +1,14 @@
 import {
   EditorialSurface
-} from "./chunk-JNZRVC45.js";
-import "./chunk-MGCD3ZJ3.js";
-import "./chunk-DD4ZSYKG.js";
+} from "./chunk-R5ZX2LJV.js";
+import "./chunk-J7EGPURK.js";
 import {
   fade
 } from "./chunk-4YM2M62S.js";
+import "./chunk-5JBMYQP6.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 
 // src/visual-system/scene-templates/quote.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/react.js

@@ -1,6 +1,6 @@
 import {
   TitleSceneTemplate
-} from "./chunk-EWWCQFTI.js";
+} from "./chunk-7AA2JWHZ.js";
 import "./chunk-4YM2M62S.js";
 import {
   getSceneDuration,
@@ -40,9 +40,9 @@ import {
   VideoFrame,
   getDimensions,
   sceneReadinessKey
-} from "./chunk-VWJBIYBM.js";
+} from "./chunk-KUCEOG2L.js";
+import "./chunk-5JBMYQP6.js";
 import "./chunk-224QNWRA.js";
-import "./chunk-OOBT4X46.js";
 import {
   getVideoDuration,
   resolveVideoTimeline
@@ -94,13 +94,13 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "cinemaMedia": () => import("./cinema-media-AYKCBXRI.js").then((module) => ({ default: module.MediaSceneTemplate })),
-  "chapterTitle": () => import("./chapter-title-YRLIQY3V.js").then((module) => ({ default: module.TitleSceneTemplate })),
-  "editorialTimeline": () => import("./editorial-timeline-DUW7C75H.js").then((module) => ({ default: module.TimelineSceneTemplate })),
-  "mobileMessage": () => import("./mobile-message-KBLF3WUR.js").then((module) => ({ default: module.NotificationSceneTemplate })),
-  "comparison": () => import("./comparison-74B2XEH4.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
-  "quote": () => import("./quote-QCGR2HOU.js").then((module) => ({ default: module.QuoteSceneTemplate })),
-  "keyFigure": () => import("./key-figure-OEWIMPGS.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
+  "cinemaMedia": () => import("./cinema-media-WUS7CKPC.js").then((module) => ({ default: module.MediaSceneTemplate })),
+  "chapterTitle": () => import("./chapter-title-2JVDU62E.js").then((module) => ({ default: module.TitleSceneTemplate })),
+  "editorialTimeline": () => import("./editorial-timeline-JHQZIPNE.js").then((module) => ({ default: module.TimelineSceneTemplate })),
+  "mobileMessage": () => import("./mobile-message-CDKOERRZ.js").then((module) => ({ default: module.NotificationSceneTemplate })),
+  "comparison": () => import("./comparison-T4OYCOH3.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
+  "quote": () => import("./quote-JKABOMIG.js").then((module) => ({ default: module.QuoteSceneTemplate })),
+  "keyFigure": () => import("./key-figure-YWN2OBQU.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
 };
 
 // src/visual-system/catalog/builtin-player.generated.ts
@@ -534,7 +534,6 @@ function usePlaybackClock({
   loopRef,
   sceneIndexRef,
   visualReadyRef,
-  posterBridgeKeysRef,
   callbacksRef,
   setCurrentTime,
   setIsPlaying
@@ -545,6 +544,10 @@ function usePlaybackClock({
     let onsetWaitSeconds = 0;
     let clockWaitSeconds = 0;
     let lastNarrationTime;
+    let committedTime = timeRef.current;
+    let groupHandoff;
+    let requestId = stateRef.current.requestId;
+    let runId = stateRef.current.runId;
     const failNarration = (error, state) => {
       setIsPlaying(false);
       try {
@@ -565,6 +568,12 @@ function usePlaybackClock({
     const tick = (now) => {
       const current = stateRef.current;
       const config = current.config;
+      const externallySeeked = timeRef.current !== committedTime;
+      const replaced = current.requestId !== requestId || current.runId !== runId;
+      requestId = current.requestId;
+      runId = current.runId;
+      if (externallySeeked || replaced) groupHandoff = void 0;
+      let deferGroupStall = false;
       const elapsed = Math.max(0, (now - previous) / 1e3);
       let narrationReady = true;
       try {
@@ -599,6 +608,7 @@ function usePlaybackClock({
           return;
         }
         clockWaitSeconds = narrationTime !== void 0 && narrationTime === lastNarrationTime && narrationReady && !stalled ? clockWaitSeconds + elapsed : 0;
+        const audioMovedBackwards = narrationTime !== void 0 && lastNarrationTime !== void 0 && narrationTime < lastNarrationTime;
         lastNarrationTime = narrationTime;
         if (clockWaitSeconds >= 8) {
           failNarration(new Error("Narration audio clock did not advance within eight seconds"), current);
@@ -613,8 +623,18 @@ function usePlaybackClock({
           nextTime = Math.min(raw, duration2);
         }
         const target = ranges.find((range) => nextTime >= range.start && nextTime < range.end) ?? ranges.at(-1);
-        const waitingForVisual = Boolean(target && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(target.scene) && !posterBridgeKeysRef?.current.has(sceneReadinessKey(target.scene)));
-        if (waitingForVisual && target) nextTime = target.start;
+        const waitingForVisual = Boolean(target && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(target.scene));
+        if (waitingForVisual && target) {
+          nextTime = target.start;
+          const fromGroup = cued?.scene.narrationGroup;
+          const toGroup = target.scene.narrationGroup;
+          const continuesParagraph = !externallySeeked && !replaced && !audioMovedBackwards && narrationReady && narrationTime !== void 0 && fromGroup && toGroup && fromGroup.id === toGroup.id && fromGroup.text === toGroup.text && target === ranges[sceneIndexRef.current + 1] && narrationTime > fromGroup.offsetSeconds + 0.04;
+          if (continuesParagraph) {
+            const key = `${sceneReadinessKey(cued.scene)}\0${sceneReadinessKey(target.scene)}\0${fromGroup.id}\0${fromGroup.text}`;
+            if (groupHandoff?.key !== key) groupHandoff = { key, startedAt: now };
+            deferGroupStall = !stalled && now - groupHandoff.startedAt < 200;
+          } else groupHandoff = void 0;
+        } else groupHandoff = void 0;
         if (nextTime !== timeRef.current) {
           timeRef.current = nextTime;
           setCurrentTime(nextTime);
@@ -645,7 +665,8 @@ function usePlaybackClock({
       }
       const duration = current.config ? getVideoDuration(current.config) : 0;
       const active = current.config ? resolveVideoTimeline(current.config).find((range) => timeRef.current >= range.start && timeRef.current < range.end) : void 0;
-      reportStall(Boolean(active && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(active.scene) && !posterBridgeKeysRef?.current.has(sceneReadinessKey(active.scene))) || !settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
+      reportStall(Boolean(active && visualReadyRef && visualReadyRef.current !== sceneReadinessKey(active.scene) && !deferGroupStall) || !settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
+      committedTime = timeRef.current;
       if (!settled || looping || timeRef.current < duration) frame = requestAnimationFrame(tick);
       else setIsPlaying(false);
     };
@@ -732,13 +753,8 @@ function VideoPlayerRuntime({
   const loopRef = useRef(loop);
   const sceneIndexRef = useRef(-1);
   const mediaFrameReportedRef = useRef(false);
-  const posterBridgeKeysRef = useRef(/* @__PURE__ */ new Set());
   const visualReadyRef = useRef(void 0);
-  const reportVisualReady = useMemo(() => (key, error, actualVideoFrame = false, posterBridge = false) => {
-    if (posterBridge) {
-      posterBridgeKeysRef.current.add(key);
-      return;
-    }
+  const reportVisualReady = useMemo(() => (key, error, actualVideoFrame = false) => {
     if (error) {
       setIsPlaying(false);
       callbacksRef.current.onError?.(error, stateRef.current);
@@ -798,7 +814,6 @@ function VideoPlayerRuntime({
     setActiveStream(stream);
     setActiveSavedVideo(video);
     mediaFrameReportedRef.current = false;
-    posterBridgeKeysRef.current.clear();
     sceneIndexRef.current = -1;
     setReplacementPending(stream != null);
     setState(video ? savedVideoState(video) : createVideoState());
@@ -917,7 +932,6 @@ function VideoPlayerRuntime({
     loopRef,
     sceneIndexRef,
     visualReadyRef,
-    posterBridgeKeysRef,
     callbacksRef,
     setCurrentTime,
     setIsPlaying