@bendyline/squisq-react 2.11.6 → 2.11.8

package/dist/{chunk-KGWT454C.js → chunk-Z64OLGMD.js}

@@ -1,7 +1,11 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-5UGIE2QO.js";
+} from "./chunk-LDXH4FOY.js";
+import {
+  isCaptureDrivenVideo,
+  seekVideoToFrame
+} from "./chunk-W6MKRWL6.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -13,7 +17,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-ZY5N3JPM.js";
+} from "./chunk-6PUMLLJH.js";
 import {
   useMediaProvider,
   useMediaUrl,
@@ -22,8 +26,74 @@ import {
 
 // src/MediaClipLayer.tsx
 import { useEffect, useRef } from "react";
+import { serializeMediaCrop } from "@bendyline/squisq/mediaEdit";
+
+// src/mediaClipPlayback.ts
+function clipLevelAt(clip, time) {
+  let level = clip.gain ? Math.pow(10, clip.gain / 20) : 1;
+  if (clip.fadeIn && time < clip.absoluteStart + clip.fadeIn) {
+    level *= Math.max(0, (time - clip.absoluteStart) / clip.fadeIn);
+  }
+  if (clip.fadeOut && time > clip.absoluteEnd - clip.fadeOut) {
+    level *= Math.max(0, (clip.absoluteEnd - time) / clip.fadeOut);
+  }
+  return level;
+}
+function mountedClips(clips, time) {
+  const out = [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const clip of clips) {
+    if (!clip.segment) {
+      out.push({ key: clip.id, clip });
+      continue;
+    }
+    const group = groups.get(clip.segment.groupId) ?? [];
+    group.push(clip);
+    groups.set(clip.segment.groupId, group);
+  }
+  for (const [groupId, segments] of groups) {
+    segments.sort((a, b) => (a.segment?.index ?? 0) - (b.segment?.index ?? 0));
+    let current = segments.findIndex((s) => time < s.absoluteEnd);
+    if (current === -1) current = segments.length - 1;
+    for (const index of [current, current + 1]) {
+      const clip = segments[index];
+      if (clip) out.push({ key: `${groupId}#slot${index % 2}`, clip });
+    }
+  }
+  return out;
+}
+
+// src/MediaClipLayer.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
 var DRIFT = 0.25;
+var PRESEEK = 0.75;
+var boostContext = null;
+var boostNodes = /* @__PURE__ */ new WeakMap();
+function boostNodeFor(el) {
+  const existing = boostNodes.get(el);
+  if (existing) return existing;
+  if (typeof AudioContext === "undefined") return null;
+  try {
+    boostContext ?? (boostContext = new AudioContext());
+    const gain = boostContext.createGain();
+    boostContext.createMediaElementSource(el).connect(gain).connect(boostContext.destination);
+    boostNodes.set(el, gain);
+    return gain;
+  } catch {
+    return null;
+  }
+}
+function applyLevel(el, level) {
+  const boost = level > 1 ? boostNodeFor(el) : boostNodes.get(el);
+  if (boost) {
+    el.volume = 1;
+    boost.gain.value = level;
+    if (boostContext?.state === "suspended") void boostContext.resume().catch(() => {
+    });
+    return;
+  }
+  el.volume = Math.min(1, Math.max(0, level));
+}
 function mediaGroupStyle(presentation) {
   return {
     position: "absolute",
@@ -76,6 +146,12 @@ function mediaVideoStyle({
     ...pipCornerStyle(pipPosition)
   };
 }
+function cropStyle(crop) {
+  if (!crop) return {};
+  const pct = (n) => `${(n * 100).toFixed(3)}%`;
+  const inset = `inset(${pct(crop.y)} ${pct(1 - crop.x - crop.w)} ${pct(1 - crop.y - crop.h)} ${pct(crop.x)})`;
+  return { objectViewBox: inset };
+}
 function MediaClipLayer({
   schedule,
   currentTime,
@@ -93,8 +169,10 @@ function MediaClipLayer({
 }) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
   if (renderClips.length === 0) return null;
+  const mounted = mountedClips(renderClips, currentTime);
   const groups = /* @__PURE__ */ new Map();
-  for (const clip of renderClips) {
+  for (const entry of mounted) {
+    const { clip } = entry;
     const clipPresentation = honorClipPresentation && clip.kind === "video" ? clip.placement === "picture-in-picture" ? "picture-in-picture" : clip.placement === "overlay" ? "full-frame" : presentation : presentation;
     const clipPipSize = clip.pipSize ?? pipSize;
     const clipPipShape = clip.pipShape ?? pipShape;
@@ -107,7 +185,7 @@ function MediaClipLayer({
       pipPosition: clipPipPosition,
       clips: []
     };
-    group.clips.push(clip);
+    group.clips.push(entry);
     groups.set(key, group);
   }
   return /* @__PURE__ */ jsx(Fragment, { children: [...groups].map(([key, group]) => /* @__PURE__ */ jsx(
@@ -120,7 +198,7 @@ function MediaClipLayer({
       "data-pip-position": group.pipPosition,
       "aria-hidden": true,
       style: mediaGroupStyle(group.presentation),
-      children: group.clips.map((clip) => /* @__PURE__ */ jsx(
+      children: group.clips.map(({ key: elementKey, clip }) => /* @__PURE__ */ jsx(
         MediaClipElement,
         {
           clip,
@@ -137,7 +215,7 @@ function MediaClipLayer({
           pipOrientation,
           pipFrameStyle
         },
-        clip.id
+        elementKey
       ))
     },
     key
@@ -165,10 +243,18 @@ function MediaClipElement({
     if (!el) return;
     if (!active) {
       if (!el.paused) el.pause();
+      const startsIn = clip.absoluteStart - currentTime;
+      if (!renderMode && startsIn > 0 && startsIn <= PRESEEK && !isCaptureDrivenVideo(el) && Math.abs(el.currentTime - clip.sourceIn) > DRIFT / 5) {
+        try {
+          el.currentTime = clip.sourceIn;
+        } catch {
+        }
+      }
       return;
     }
+    if (!renderMode) applyLevel(el, clipLevelAt(clip, currentTime));
     const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
-    if (el.dataset.captureSequential !== "true" && (renderMode || !isPlaying || Math.abs(el.currentTime - target) > DRIFT)) {
+    if (!isCaptureDrivenVideo(el) && (renderMode || !isPlaying || Math.abs(el.currentTime - target) > DRIFT)) {
       try {
         el.currentTime = target;
       } catch {
@@ -178,10 +264,10 @@ function MediaClipElement({
       const p = el.play();
       if (p) p.catch(() => {
       });
-    } else if (el.dataset.captureSequential !== "true") {
+    } else if (!isCaptureDrivenVideo(el)) {
       el.pause();
     }
-  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
+  }, [active, currentTime, isPlaying, renderMode, clip, src]);
   const isVideo = clip.kind === "video";
   const common = {
     ref,
@@ -200,17 +286,21 @@ function MediaClipElement({
         ...common,
         className: `doc-player__media-video${active ? " doc-player__media-video--active" : ""}`,
         "data-video-placement": clip.placement ?? "default",
-        muted: renderMode || muted,
+        muted: renderMode || muted || clip.audioMuted === true,
         playsInline: true,
-        style: mediaVideoStyle({
-          presentation,
-          pipSize,
-          pipShape,
-          pipPosition,
-          pipOrientation,
-          pipFrameStyle,
-          active
-        })
+        ...clip.crop ? { "data-crop": serializeMediaCrop(clip.crop) } : {},
+        style: {
+          ...mediaVideoStyle({
+            presentation,
+            pipSize,
+            pipShape,
+            pipPosition,
+            pipOrientation,
+            pipFrameStyle,
+            active
+          }),
+          ...cropStyle(clip.crop)
+        }
       }
     );
   }
@@ -2349,247 +2439,6 @@ function buildSegmentTitleMap(doc) {
   return map;
 }
 
-// src/docPlayer/renderReadiness.ts
-var DEFAULT_VIDEO_FRAME_TIMEOUT_MS = 2e3;
-var VIDEO_FRAME_READINESS_POLL_MS = 16;
-var VIDEO_TIME_TOLERANCE_SECONDS = 0.01;
-var MAX_SEQUENTIAL_CAPTURE_STEP_SECONDS = 0.5;
-var SEQUENTIAL_CAPTURE_PLAYBACK_RATE = 1;
-function formatMediaTime(time) {
-  return Number.isFinite(time) ? `${time.toFixed(3)}s` : String(time);
-}
-function reachableMediaTime(video, targetTime) {
-  const duration = video.duration;
-  if (!Number.isFinite(duration)) return targetTime;
-  return Math.max(0, Math.min(targetTime, duration));
-}
-function isAtReachableMediaTime(video, targetTime) {
-  return Math.abs(video.currentTime - reachableMediaTime(video, targetTime)) <= VIDEO_TIME_TOLERANCE_SECONDS;
-}
-function isVisiblyPresented(video) {
-  if (!video.isConnected) return false;
-  const view = video.ownerDocument.defaultView;
-  if (!view) return false;
-  for (let element = video; element; element = element.parentElement) {
-    const style = view.getComputedStyle(element);
-    if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || Number.parseFloat(style.opacity || "1") <= 0) {
-      return false;
-    }
-  }
-  return true;
-}
-function createCaptureWatchdog(ownerDocument, timeoutMs, expire) {
-  let timeout = null;
-  const clear = () => {
-    if (timeout === null) return;
-    clearTimeout(timeout);
-    timeout = null;
-  };
-  return {
-    arm: () => {
-      clear();
-      if (ownerDocument.visibilityState !== "visible") return;
-      timeout = setTimeout(expire, timeoutMs);
-    },
-    clear
-  };
-}
-function seekVideoByAssignment(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
-  video.pause();
-  return new Promise((resolve, reject) => {
-    let settled = false;
-    let videoFrameRequest = null;
-    const ownerDocument = video.ownerDocument;
-    const isInactive = () => ownerDocument.visibilityState !== "visible";
-    const cleanup = () => {
-      watchdog.clear();
-      clearInterval(readinessPoll);
-      video.removeEventListener("seeked", handleMediaReady);
-      video.removeEventListener("loadeddata", handleMediaReady);
-      video.removeEventListener("canplay", handleMediaReady);
-      ownerDocument.removeEventListener("visibilitychange", handleVisibilityChange);
-      if (videoFrameRequest !== null && typeof video.cancelVideoFrameCallback === "function") {
-        video.cancelVideoFrameCallback(videoFrameRequest);
-      }
-    };
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      cleanup();
-      resolve();
-    };
-    const fail = () => {
-      if (settled) return;
-      settled = true;
-      cleanup();
-      reject(
-        new Error(
-          `Video frame did not become ready at ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, reachableTime=${formatMediaTime(reachableMediaTime(video, targetTime))}, duration=${formatMediaTime(video.duration)}, readyState=${video.readyState}, seeking=${String(video.seeking)}, visible=${String(isVisiblyPresented(video))}).`
-        )
-      );
-    };
-    const requestPresentedFrame = () => {
-      if (settled || video.seeking || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || !isAtReachableMediaTime(video, targetTime)) {
-        return;
-      }
-      if (typeof video.requestVideoFrameCallback !== "function" || !isVisiblyPresented(video)) {
-        finish();
-        return;
-      }
-      if (videoFrameRequest !== null) return;
-      videoFrameRequest = video.requestVideoFrameCallback(() => {
-        videoFrameRequest = null;
-        finish();
-      });
-    };
-    function handleMediaReady() {
-      requestPresentedFrame();
-    }
-    const watchdog = createCaptureWatchdog(ownerDocument, timeoutMs, fail);
-    const assignTargetTime = () => {
-      try {
-        video.currentTime = reachableMediaTime(video, targetTime);
-        queueMicrotask(requestPresentedFrame);
-        return true;
-      } catch (error) {
-        settled = true;
-        cleanup();
-        reject(error);
-        return false;
-      }
-    };
-    function handleVisibilityChange() {
-      if (settled) return;
-      if (isInactive()) {
-        watchdog.clear();
-        return;
-      }
-      requestPresentedFrame();
-      if (settled) return;
-      if (!video.seeking && !isAtReachableMediaTime(video, targetTime) && !assignTargetTime()) {
-        return;
-      }
-      watchdog.arm();
-    }
-    const readinessPoll = setInterval(requestPresentedFrame, VIDEO_FRAME_READINESS_POLL_MS);
-    video.addEventListener("seeked", handleMediaReady);
-    video.addEventListener("loadeddata", handleMediaReady);
-    video.addEventListener("canplay", handleMediaReady);
-    ownerDocument.addEventListener("visibilitychange", handleVisibilityChange);
-    watchdog.arm();
-    assignTargetTime();
-  });
-}
-function advanceSequentialCaptureVideo(video, targetTime, timeoutMs) {
-  return new Promise((resolve, reject) => {
-    let settled = false;
-    const ownerDocument = video.ownerDocument;
-    const isInactive = () => ownerDocument.visibilityState !== "visible";
-    const cleanup = () => {
-      watchdog.clear();
-      clearInterval(readinessPoll);
-      video.removeEventListener("timeupdate", check);
-      video.removeEventListener("loadeddata", check);
-      video.removeEventListener("canplay", check);
-      video.removeEventListener("error", fail);
-      ownerDocument.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-    const finish = () => {
-      if (!settled) {
-        settled = true;
-        cleanup();
-        resolve();
-      }
-    };
-    const fallbackToSeek = () => {
-      if (settled) return;
-      settled = true;
-      video.pause();
-      cleanup();
-      void seekVideoByAssignment(video, targetTime, timeoutMs).then(resolve, reject);
-    };
-    const fail = () => {
-      if (settled) return;
-      settled = true;
-      video.pause();
-      cleanup();
-      reject(
-        new Error(
-          `Video frame did not advance to ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, readyState=${video.readyState}).`
-        )
-      );
-    };
-    function check() {
-      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.currentTime >= reachableMediaTime(video, targetTime)) {
-        video.pause();
-        finish();
-      }
-    }
-    const handlePlaybackFailure = () => {
-      if (settled || isInactive()) return;
-      fallbackToSeek();
-    };
-    const startPlayback = () => {
-      if (settled || isInactive()) return;
-      try {
-        video.playbackRate = SEQUENTIAL_CAPTURE_PLAYBACK_RATE;
-        if (video.paused) {
-          void video.play().catch(handlePlaybackFailure);
-        }
-      } catch {
-        handlePlaybackFailure();
-      }
-    };
-    const watchdog = createCaptureWatchdog(ownerDocument, timeoutMs, fail);
-    const pauseWhileInactive = () => {
-      video.pause();
-      watchdog.clear();
-    };
-    const resumeWhenActive = () => {
-      if (settled || isInactive()) return;
-      check();
-      if (settled) return;
-      startPlayback();
-      watchdog.arm();
-    };
-    function handleVisibilityChange() {
-      if (ownerDocument.visibilityState !== "visible") {
-        pauseWhileInactive();
-        return;
-      }
-      resumeWhenActive();
-    }
-    const readinessPoll = setInterval(check, VIDEO_FRAME_READINESS_POLL_MS);
-    video.addEventListener("timeupdate", check);
-    video.addEventListener("loadeddata", check);
-    video.addEventListener("canplay", check);
-    video.addEventListener("error", fail, { once: true });
-    ownerDocument.addEventListener("visibilitychange", handleVisibilityChange);
-    resumeWhenActive();
-  });
-}
-function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
-  if (video.readyState >= HTMLMediaElement.HAVE_METADATA && video.videoWidth <= 0 && video.videoHeight <= 0) {
-    video.pause();
-    return Promise.resolve();
-  }
-  const reachableTargetTime = reachableMediaTime(video, targetTime);
-  const step = reachableTargetTime - video.currentTime;
-  if (video.dataset.captureSequential === "true") {
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && step <= VIDEO_TIME_TOLERANCE_SECONDS) {
-      if (step < -VIDEO_TIME_TOLERANCE_SECONDS) video.pause();
-      return Promise.resolve();
-    }
-    if (step > 0 && step <= MAX_SEQUENTIAL_CAPTURE_STEP_SECONDS && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-      return advanceSequentialCaptureVideo(video, targetTime, timeoutMs);
-    }
-  }
-  video.pause();
-  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isAtReachableMediaTime(video, targetTime);
-  if (alreadyReady) return Promise.resolve();
-  return seekVideoByAssignment(video, targetTime, timeoutMs);
-}
-
 // src/DocPlayer.tsx
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function isDevEnvironment() {
@@ -2667,6 +2516,8 @@ function DocPlayerContent({
   onPlaybackStateChange,
   onControlsReady,
   onRenderAPIReady,
+  renderVideoFrameSelector,
+  processedAudio,
   isFullscreen = false,
   onFullscreenToggle,
   onBlockMarkers,
@@ -2759,8 +2610,11 @@ function DocPlayerContent({
   const rawSchedule = useMemo5(() => resolveMediaSchedule(doc), [doc]);
   const clipDurations = useMediaClipDurations(rawSchedule, basePath);
   const mediaSchedule = useMemo5(
-    () => resolveMediaSchedule(doc, { intrinsicDuration: (clip) => clipDurations.get(clip.src) }),
-    [doc, clipDurations]
+    () => resolveMediaSchedule(doc, {
+      intrinsicDuration: (clip) => clipDurations.get(clip.src),
+      ...processedAudio ? { processedAudio } : {}
+    }),
+    [doc, clipDurations, processedAudio]
   );
   const startActiveTimelineMedia = useCallback5(() => {
     if (renderMode) return;
@@ -2787,6 +2641,9 @@ function DocPlayerContent({
   currentTimeRef.current = currentTime;
   const committedRenderTimeRef = useRef7(currentTime);
   const renderCommitWaitersRef = useRef7([]);
+  const renderVideoFrameSelectorRef = useRef7(renderVideoFrameSelector);
+  renderVideoFrameSelectorRef.current = renderVideoFrameSelector;
+  const presentedBlocksRef = useRef7(null);
   const totalDurationRef = useRef7(totalDuration);
   totalDurationRef.current = totalDuration;
   const expandedBlocksLenRef = useRef7(0);
@@ -3041,6 +2898,11 @@ function DocPlayerContent({
         }
       }
       const elapsedMs = (time - blockStartTime) * 1e3;
+      const selectVideoFrame = async (video, targetTime) => {
+        const selector = renderMode ? renderVideoFrameSelectorRef.current : void 0;
+        if (selector && await selector(video, targetTime)) return;
+        await seekVideoToFrame(video, targetTime);
+      };
       (root.getAnimations?.() ?? []).forEach((anim) => {
         const target = anim.effect?.target;
         if (!target) return;
@@ -3061,7 +2923,7 @@ function DocPlayerContent({
           const clipEnd = parseFloat(video.dataset.clipEnd || "0");
           const startAt = parseFloat(video.dataset.startAt || "0");
           const targetTime = Math.min(clipStart + Math.max(0, blockElapsed - startAt), clipEnd);
-          videoSeekPromises.push(seekVideoToFrame(video, targetTime));
+          videoSeekPromises.push(selectVideoFrame(video, targetTime));
         });
       }
       root.querySelectorAll("video[data-clip-id]").forEach((el) => {
@@ -3072,10 +2934,19 @@ function DocPlayerContent({
         video.pause();
         if (time < absStart || time >= absEnd) return;
         const targetTime = sourceIn + (time - absStart);
-        videoSeekPromises.push(seekVideoToFrame(video, targetTime));
+        videoSeekPromises.push(selectVideoFrame(video, targetTime));
       });
       await Promise.all(videoSeekPromises);
-      await waitForVisualUpdate();
+      const presentedBlocks = Array.from(
+        root.querySelectorAll(".doc-player__block"),
+        (element) => ({ element, className: element.className })
+      );
+      const previousBlocks = presentedBlocksRef.current;
+      presentedBlocksRef.current = presentedBlocks;
+      const blocksUnchanged = previousBlocks !== null && previousBlocks.length === presentedBlocks.length && presentedBlocks.every(
+        (block, index) => block.element === previousBlocks[index].element && block.className === previousBlocks[index].className
+      );
+      if (!renderMode || !blocksUnchanged) await waitForVisualUpdate();
     };
     const getDuration = () => {
       const mediaDuration = getDocPlaybackDuration(doc);

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-BlD8zREs.js';
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as SlideNavActions, G as SocialCaptionOverlay, H as formatTime } from './player-BlD8zREs.js';
+import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-5j10MhBq.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as RenderVideoFrameSelector, G as SlideNavActions, H as SocialCaptionOverlay, J as formatTime } from './player-5j10MhBq.js';
 import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, ScheduledClip, MediaProvider } from '@bendyline/squisq/schemas';
 import { DashboardStyleId, ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
@@ -8,13 +8,14 @@ export { a as CodeBlockCopyContext, M as MarkdownRenderer, b as MarkdownRenderer
 export { FenceRendererContext, MermaidDiagram, MermaidDiagramProps, useFenceRenderers } from './markdown/index.js';
 export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, PaginatedDocPage, PaginatedDocView, PaginatedDocViewProps, usePageView } from './page/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RefObject } from 'react';
+import { AnimatedImageInfo } from '@bendyline/squisq/imageEdit';
 export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
 export { T as TableLayer, a as TableLayerContentRenderer, b as TableLayerContentRendererProps } from './TableLayer-B7ADuUGc.js';
 export { MediaContext, MediaScheduleController, ModalDialogOptions, ResourcePolicyContext, UseDocPlaybackOptions, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaSchedule, useMediaUrl, useModalDialog, useResourcePolicy, useViewportOrientation } from './hooks/index.js';
 export { FenceRenderContext, FenceRenderer, FenceRendererMap } from '@bendyline/squisq/fence';
 export { A as AudioActions, a as AudioController, b as AudioState } from './AudioController-DwMsPe38.js';
 export { JsonFormFenceAction, JsonFormFenceRendererOptions, JsonView, JsonViewProps, createJsonFormFenceRenderer } from './json-view/index.js';
-import 'react';
 import '@bendyline/squisq/markdown';
 import '@bendyline/squisq/jsonForm';
 
@@ -156,6 +157,37 @@ interface DashboardViewProps {
 }
 declare function DashboardView({ doc, theme, viewport, layout, showTitle, style, documentTitle, basePath, animationsEnabled, muted, renderMode, onRenderAPIReady, className, }: DashboardViewProps): react_jsx_runtime.JSX.Element;
 
+type AnimatedImageStatus = 'playing' | 'paused' | 'ended';
+interface AnimatedImagePlayback {
+    /** Inspection result: null while pending, for sources that cannot animate,
+     *  and when the bytes cannot be read. */
+    info: AnimatedImageInfo | null;
+    /** True once the image is known to animate. */
+    animated: boolean;
+    /** The URL to render — `resolvedUrl`, or a private copy after a replay. */
+    displaySrc: string;
+    status: AnimatedImageStatus;
+    /** Play from the first frame. */
+    play: () => void;
+    /** Freeze on a still frame. */
+    pause: () => void;
+}
+/**
+ * @param src The authored source (a relative path, URL or data URL). Its
+ *   extension or MIME decides whether the image could animate at all.
+ * @param resolvedUrl The URL the image is actually loaded from, e.g. a blob
+ *   URL from a MediaProvider. Pass '' while it is still resolving.
+ */
+declare function useAnimatedImage(src: string, resolvedUrl: string): AnimatedImagePlayback;
+
+interface AnimatedImageControlsProps {
+    playback: AnimatedImagePlayback;
+    /** The `<img>` showing `playback.displaySrc`. Its parent must be the
+     *  positioned box the image fills. */
+    imageRef: RefObject<HTMLImageElement | null>;
+}
+declare function AnimatedImageControls({ playback, imageRef }: AnimatedImageControlsProps): react_jsx_runtime.JSX.Element | null;
+
 interface DocPlayerAppearanceOverrides {
     theme?: Theme;
     videoPresentation?: VideoPresentation$1;
@@ -206,4 +238,4 @@ declare function resolveDocPlayerAppearance(doc: Doc, overrides?: DocPlayerAppea
  */
 declare function useMediaClipDurations(schedule: ScheduledClip[], basePath: string, mediaProviderOverride?: MediaProvider | null): Map<string, number>;
 
-export { CodeBlockCopyHandler, DashboardView, type DashboardViewProps, type DocPlayerAppearanceOverrides, type MountOptions, PipPosition, PipShape, PipSize, type ResolvedDocPlayerAppearance, type SquisqPlayerHandle, SquisqRenderAPI, VideoPresentation$1 as VideoPresentation, resolveDocPlayerAppearance, useMediaClipDurations };
+export { AnimatedImageControls, type AnimatedImageControlsProps, type AnimatedImagePlayback, type AnimatedImageStatus, CodeBlockCopyHandler, DashboardView, type DashboardViewProps, type DocPlayerAppearanceOverrides, type MountOptions, PipPosition, PipShape, PipSize, type ResolvedDocPlayerAppearance, type SquisqPlayerHandle, SquisqRenderAPI, VideoPresentation$1 as VideoPresentation, resolveDocPlayerAppearance, useAnimatedImage, useMediaClipDurations };

package/dist/index.js

@@ -15,10 +15,10 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-KGWT454C.js";
+} from "./chunk-Z64OLGMD.js";
 import {
   PaginatedDocView
-} from "./chunk-7QA6EW6Y.js";
+} from "./chunk-SESRQ7XH.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -26,7 +26,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-5UGIE2QO.js";
+} from "./chunk-LDXH4FOY.js";
 import {
   ImageLayer,
   MapLayer,
@@ -39,7 +39,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-XSOMFBH2.js";
+} from "./chunk-W6MKRWL6.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";
@@ -52,17 +52,19 @@ import {
 import {
   JsonView,
   createJsonFormFenceRenderer
-} from "./chunk-ITQ4K5N6.js";
+} from "./chunk-KDTKUE53.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
+  AnimatedImageControls,
   FenceRendererContext,
   InlineAudioPlayer,
   InlineVideoPlayer,
   MarkdownRenderer,
+  useAnimatedImage,
   useFenceRenderers
-} from "./chunk-ZY5N3JPM.js";
+} from "./chunk-6PUMLLJH.js";
 import {
   MermaidDiagram
 } from "./chunk-WLUZTUNZ.js";
@@ -74,6 +76,7 @@ import {
   useResourcePolicy
 } from "./chunk-LR3AIGDD.js";
 export {
+  AnimatedImageControls,
   BlockRenderer,
   CanvasSection,
   CaptionOverlay,
@@ -115,6 +118,7 @@ export {
   getAnimationStyle,
   getTransitionClass,
   resolveDocPlayerAppearance,
+  useAnimatedImage,
   useAudioSync,
   useAutoSurface,
   useDocPlayback,

package/dist/json-view/index.js

@@ -1,9 +1,9 @@
 import {
   JsonView,
   createJsonFormFenceRenderer
-} from "../chunk-ITQ4K5N6.js";
+} from "../chunk-KDTKUE53.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-ZY5N3JPM.js";
+import "../chunk-6PUMLLJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/layers/index.js

@@ -8,7 +8,7 @@ import {
   TextLayer,
   TreeLayer,
   VideoLayer
-} from "../chunk-XSOMFBH2.js";
+} from "../chunk-W6MKRWL6.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {