@bendyline/squisq-react 2.4.0 → 2.4.2

package/dist/{chunk-HML6PFH2.js → chunk-R5XTAWQH.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-M2HEFJZP.js";
+} from "./chunk-ZIMG7EQV.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -12,13 +12,67 @@ import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
-  useMediaUrl
+  useMediaProvider,
+  useMediaUrl,
+  useResourcePolicy
 } from "./chunk-LR3AIGDD.js";
 
 // src/MediaClipLayer.tsx
 import { useEffect, useRef } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 var DRIFT = 0.25;
+function mediaGroupStyle(presentation) {
+  return {
+    position: "absolute",
+    inset: 0,
+    zIndex: presentation === "background" ? 0 : 10,
+    pointerEvents: "none"
+  };
+}
+function pipCornerStyle(position) {
+  switch (position) {
+    case "top-left":
+      return { top: "4%", left: "3%" };
+    case "top-right":
+      return { top: "4%", right: "3%" };
+    case "bottom-left":
+      return { bottom: "6%", left: "3%" };
+    case "bottom-right":
+      return { right: "3%", bottom: "6%" };
+  }
+}
+function pipWidth(size, orientation) {
+  if (orientation === "portrait") return size === "large" ? "23%" : "15%";
+  return size === "large" ? "15%" : "9%";
+}
+function mediaVideoStyle({
+  presentation,
+  pipSize,
+  pipShape,
+  pipPosition,
+  pipOrientation,
+  pipFrameStyle,
+  active
+}) {
+  const base = {
+    position: "absolute",
+    display: "block",
+    objectFit: "cover",
+    opacity: active ? 1 : 0,
+    visibility: active ? "visible" : "hidden",
+    pointerEvents: "none"
+  };
+  if (presentation !== "picture-in-picture") {
+    return { ...base, inset: 0, width: "100%", height: "100%" };
+  }
+  return {
+    ...base,
+    width: pipWidth(pipSize, pipOrientation),
+    aspectRatio: pipShape === "wide" ? "16 / 9" : "1",
+    ...pipFrameStyle,
+    ...pipCornerStyle(pipPosition)
+  };
+}
 function MediaClipLayer({
   schedule,
   currentTime,
@@ -27,8 +81,11 @@ function MediaClipLayer({
   renderMode = false,
   muted = false,
   presentation = "background",
-  pipShape = "rounded",
+  pipSize = "small",
+  pipShape = "square",
   pipPosition = "bottom-right",
+  pipOrientation = "landscape",
+  pipFrameStyle,
   honorClipPresentation = true
 }) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
@@ -36,19 +93,31 @@ function MediaClipLayer({
   const groups = /* @__PURE__ */ new Map();
   for (const clip of renderClips) {
     const clipPresentation = honorClipPresentation && clip.kind === "video" ? clip.placement === "picture-in-picture" ? "picture-in-picture" : clip.placement === "overlay" ? "full-frame" : presentation : presentation;
-    const group = groups.get(clipPresentation) ?? [];
-    group.push(clip);
-    groups.set(clipPresentation, group);
+    const clipPipSize = clip.pipSize ?? pipSize;
+    const clipPipShape = clip.pipShape ?? pipShape;
+    const clipPipPosition = clip.pipPosition ?? pipPosition;
+    const key = `${clipPresentation}:${clipPipSize}:${clipPipShape}:${clipPipPosition}`;
+    const group = groups.get(key) ?? {
+      presentation: clipPresentation,
+      pipSize: clipPipSize,
+      pipShape: clipPipShape,
+      pipPosition: clipPipPosition,
+      clips: []
+    };
+    group.clips.push(clip);
+    groups.set(key, group);
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: [...groups].map(([groupPresentation, clips]) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: [...groups].map(([key, group]) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: `doc-player__media-clips doc-player__media-clips--${groupPresentation}`,
-      "data-presentation": groupPresentation,
-      "data-pip-shape": pipShape,
-      "data-pip-position": pipPosition,
+      className: `doc-player__media-clips doc-player__media-clips--${group.presentation}`,
+      "data-presentation": group.presentation,
+      "data-pip-size": group.pipSize,
+      "data-pip-shape": group.pipShape,
+      "data-pip-position": group.pipPosition,
       "aria-hidden": true,
-      children: clips.map((clip) => /* @__PURE__ */ jsx(
+      style: mediaGroupStyle(group.presentation),
+      children: group.clips.map((clip) => /* @__PURE__ */ jsx(
         MediaClipElement,
         {
           clip,
@@ -57,12 +126,18 @@ function MediaClipLayer({
           isPlaying,
           basePath,
           renderMode,
-          muted
+          muted,
+          presentation: group.presentation,
+          pipSize: group.pipSize,
+          pipShape: group.pipShape,
+          pipPosition: group.pipPosition,
+          pipOrientation,
+          pipFrameStyle
         },
         clip.id
       ))
     },
-    groupPresentation
+    key
   )) });
 }
 function MediaClipElement({
@@ -72,7 +147,13 @@ function MediaClipElement({
   isPlaying,
   basePath,
   renderMode,
-  muted
+  muted,
+  presentation,
+  pipSize,
+  pipShape,
+  pipPosition,
+  pipOrientation,
+  pipFrameStyle
 }) {
   const ref = useRef(null);
   const src = useMediaUrl(clip.src, basePath);
@@ -118,7 +199,15 @@ function MediaClipElement({
         "data-video-placement": clip.placement ?? "default",
         muted: renderMode || muted,
         playsInline: true,
-        style: { pointerEvents: "none" }
+        style: mediaVideoStyle({
+          presentation,
+          pipSize,
+          pipShape,
+          pipPosition,
+          pipOrientation,
+          pipFrameStyle,
+          active
+        })
       }
     );
   }
@@ -132,8 +221,123 @@ function MediaClipElement({
   );
 }
 
+// src/hooks/useMediaClipDurations.ts
+import { useEffect as useEffect2, useMemo, useState } from "react";
+import { isResourceUrlAllowed } from "@bendyline/squisq/markdown";
+var durationCache = /* @__PURE__ */ new Map();
+var PROBE_TIMEOUT_MS = 8e3;
+async function resolveMediaUrl(src, provider, basePath, policy) {
+  const isAbsolute = !src || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src);
+  const fallback = isAbsolute ? src : `${basePath.replace(/\/$/, "")}/${src}`;
+  const gate = (url) => isResourceUrlAllowed(url, policy) ? url : "";
+  if (isAbsolute || !provider) return gate(fallback);
+  try {
+    return gate(await provider.resolveUrl(src));
+  } catch {
+    return gate(fallback);
+  }
+}
+function probeVideoDuration(url) {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const el = document.createElement("video");
+    el.preload = "metadata";
+    el.muted = true;
+    el.setAttribute("playsinline", "");
+    let settled = false;
+    const timeout = {};
+    const finish = (seconds) => {
+      if (settled) return;
+      settled = true;
+      if (timeout.id !== void 0) clearTimeout(timeout.id);
+      el.removeEventListener("durationchange", onDurationProbe);
+      el.removeEventListener("timeupdate", onDurationProbe);
+      el.removeAttribute("src");
+      try {
+        el.load();
+      } catch {
+      }
+      resolve(seconds);
+    };
+    const readFinite = () => {
+      const d = el.duration;
+      if (Number.isFinite(d) && d > 0) {
+        finish(d);
+        return true;
+      }
+      return false;
+    };
+    const onDurationProbe = () => {
+      readFinite();
+    };
+    el.addEventListener(
+      "loadedmetadata",
+      () => {
+        if (readFinite()) return;
+        el.addEventListener("durationchange", onDurationProbe);
+        el.addEventListener("timeupdate", onDurationProbe);
+        try {
+          el.currentTime = 1e101;
+        } catch {
+          finish(null);
+        }
+      },
+      { once: true }
+    );
+    el.addEventListener("error", () => finish(null), { once: true });
+    timeout.id = setTimeout(() => finish(null), PROBE_TIMEOUT_MS);
+    el.src = url;
+  });
+}
+function useMediaClipDurations(schedule, basePath, mediaProviderOverride) {
+  const contextProvider = useMediaProvider();
+  const provider = mediaProviderOverride !== void 0 ? mediaProviderOverride : contextProvider;
+  const resourcePolicy = useResourcePolicy();
+  const srcKey = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const clip of schedule) {
+      if (clip.kind === "video" && clip.src) set.add(clip.src);
+    }
+    return Array.from(set).sort().join("\n");
+  }, [schedule]);
+  const [durations, setDurations] = useState(() => /* @__PURE__ */ new Map());
+  useEffect2(() => {
+    const srcs = srcKey ? srcKey.split("\n") : [];
+    if (srcs.length === 0) {
+      setDurations((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
+      return;
+    }
+    let cancelled = false;
+    const resolved = /* @__PURE__ */ new Map();
+    const commit = () => {
+      if (!cancelled) setDurations(new Map(resolved));
+    };
+    for (const src of srcs) {
+      resolveMediaUrl(src, provider, basePath, resourcePolicy).then((url) => {
+        if (cancelled || !url) return;
+        const cached = durationCache.get(url);
+        if (cached != null) {
+          resolved.set(src, cached);
+          commit();
+          return;
+        }
+        probeVideoDuration(url).then((seconds) => {
+          if (cancelled || seconds == null) return;
+          durationCache.set(url, seconds);
+          resolved.set(src, seconds);
+          commit();
+        });
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [srcKey, provider, basePath, resourcePolicy]);
+  return durations;
+}
+
 // src/SocialCaptionOverlay.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { resolveFontFamily } from "@bendyline/squisq/schemas";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TARGET_CHUNK_SIZE = 4;
@@ -189,7 +393,7 @@ function SocialCaptionOverlay({
   theme,
   viewport
 }) {
-  const { chunks } = useMemo(
+  const { chunks } = useMemo2(
     () => captions ? buildWordStream(captions) : { words: [], chunks: [] },
     [captions]
   );
@@ -391,7 +595,7 @@ function formatTime(seconds) {
 }
 
 // src/DocProgressBar.tsx
-import { useRef as useRef2, useState, useCallback } from "react";
+import { useRef as useRef2, useState as useState2, useCallback } from "react";
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function DocProgressBar({
   state,
@@ -401,7 +605,7 @@ function DocProgressBar({
   getBlockTitle
 }) {
   const progressBarRef = useRef2(null);
-  const [hoverPosition, setHoverPosition] = useState(null);
+  const [hoverPosition, setHoverPosition] = useState2(null);
   const playProgress = state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
   const handleProgressHover = useCallback((e) => {
     const bar = progressBarRef.current;
@@ -728,7 +932,7 @@ function DocControlsOverlay({
 }
 
 // src/DocControlsSlideshow.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useId, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DocControlsSlideshow({
   state,
@@ -737,7 +941,7 @@ function DocControlsSlideshow({
   pickerOpen,
   onPickerOpenChange
 }) {
-  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState2(false);
+  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState3(false);
   const isPickerOpen = pickerOpen ?? uncontrolledPickerOpen;
   const setPickerOpen = useCallback2(
     (open) => {
@@ -746,7 +950,7 @@ function DocControlsSlideshow({
     },
     [pickerOpen, onPickerOpenChange]
   );
-  const [pickerMaxHeight, setPickerMaxHeight] = useState2(280);
+  const [pickerMaxHeight, setPickerMaxHeight] = useState3(280);
   const controlsRef = useRef3(null);
   const triggerRef = useRef3(null);
   const menuRef = useRef3(null);
@@ -761,7 +965,7 @@ function DocControlsSlideshow({
   const isFirst = currentBlockIndex <= 0;
   const isLast = currentBlockIndex >= totalBlocks - 1;
   const counterText = totalBlocks > 0 ? currentSlideLabel ?? `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}` : "\u2014";
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isPickerOpen) return;
     const handlePointerDown = (event) => {
       if (!controlsRef.current?.contains(event.target)) setPickerOpen(false);
@@ -800,7 +1004,7 @@ function DocControlsSlideshow({
       window.removeEventListener("resize", updateMaxHeight);
     };
   }, [isPickerOpen]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isPickerOpen) return;
     menuRef.current?.querySelector('[aria-current="true"]')?.focus();
   }, [isPickerOpen]);
@@ -1038,18 +1242,105 @@ function DocControlsSlideshow({
   );
 }
 
+// src/docPlayer/playerAppearance.ts
+import { resolveThemeForDoc } from "@bendyline/squisq/doc";
+function readFrontmatterSetting(frontmatter, canonical, legacy) {
+  if (!frontmatter) return void 0;
+  return Object.prototype.hasOwnProperty.call(frontmatter, canonical) ? frontmatter[canonical] : frontmatter[legacy];
+}
+function resolveVideoPresentation(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "background" || normalized === "behind") return "background";
+  if (normalized === "full-frame" || normalized === "fullscreen" || normalized === "full") {
+    return "full-frame";
+  }
+  if (normalized === "picture-in-picture" || normalized === "pip" || normalized === "overlay") {
+    return "picture-in-picture";
+  }
+  return void 0;
+}
+function resolvePipSize(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "small" || normalized === "sm" || normalized === "pip-small") return "small";
+  if (normalized === "large" || normalized === "lg" || normalized === "big" || normalized === "pip-large") {
+    return "large";
+  }
+  return void 0;
+}
+function resolvePipShape(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "square" || normalized === "1:1") return "square";
+  if (normalized === "wide" || normalized === "16:9" || normalized === "widescreen") return "wide";
+  return void 0;
+}
+function resolvePipPosition(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase().replace(/[_\s]+/g, "-");
+  const aliases = {
+    "top-left": "top-left",
+    "upper-left": "top-left",
+    "top-right": "top-right",
+    "upper-right": "top-right",
+    "bottom-left": "bottom-left",
+    "lower-left": "bottom-left",
+    "bottom-right": "bottom-right",
+    "lower-right": "bottom-right"
+  };
+  return aliases[normalized];
+}
+function resolveBoolean(value) {
+  if (typeof value === "boolean") return value;
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "true" || normalized === "yes" || normalized === "on" || normalized === "show" || normalized === "visible") {
+    return true;
+  }
+  if (normalized === "false" || normalized === "no" || normalized === "off" || normalized === "hide" || normalized === "hidden") {
+    return false;
+  }
+  return void 0;
+}
+function resolveDocPlayerAppearance(doc, overrides = {}) {
+  const frontmatter = doc.frontmatter;
+  return {
+    theme: overrides.theme ?? resolveThemeForDoc(doc),
+    videoPresentation: overrides.videoPresentation ?? resolveVideoPresentation(
+      readFrontmatterSetting(frontmatter, "squisq-video-presentation", "video-presentation")
+    ) ?? "background",
+    pipSize: overrides.pipSize ?? resolvePipSize(readFrontmatterSetting(frontmatter, "squisq-pip-size", "pip-size")) ?? "small",
+    pipShape: overrides.pipShape ?? resolvePipShape(readFrontmatterSetting(frontmatter, "squisq-pip-shape", "pip-shape")) ?? "square",
+    pipPosition: overrides.pipPosition ?? resolvePipPosition(
+      readFrontmatterSetting(frontmatter, "squisq-pip-position", "pip-position")
+    ) ?? "bottom-right",
+    showCoverSlide: overrides.showCoverSlide ?? resolveBoolean(readFrontmatterSetting(frontmatter, "squisq-cover-slide", "cover-slide")) ?? true
+  };
+}
+
 // src/DocPlayer.tsx
-import { Fragment as Fragment2, useId as useId2, useRef as useRef5, useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import {
+  Fragment as Fragment2,
+  useId as useId2,
+  useRef as useRef5,
+  useState as useState5,
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect2,
+  useCallback as useCallback4,
+  useMemo as useMemo3
+} from "react";
+import { flushSync } from "react-dom";
 import {
   isTemplateBlock as isTemplateBlock2,
   getCaptionAtTime as getCaptionAtTime2,
   resolveMediaSchedule,
   getDocPlaybackDuration
 } from "@bendyline/squisq/schemas";
-import { applySurface } from "@bendyline/squisq/schemas";
+import { applySurface, pipStyleVars } from "@bendyline/squisq/schemas";
 
 // src/hooks/useSlideSwipe.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
 var MIN_FLICK_DISTANCE = 12;
@@ -1073,8 +1364,8 @@ function decideSwipe({
 }
 function useSlideSwipe(opts) {
   const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
-  const [offsetPx, setOffsetPx] = useState3(0);
-  const [phase, setPhase] = useState3("idle");
+  const [offsetPx, setOffsetPx] = useState4(0);
+  const [phase, setPhase] = useState4("idle");
   const optsRef = useRef4(opts);
   optsRef.current = opts;
   const dragRef = useRef4(null);
@@ -1112,7 +1403,7 @@ function useSlideSwipe(opts) {
     setPhase("dragging");
     setOffsetPx(0);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     function currentWidth() {
       return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
     }
@@ -1182,7 +1473,7 @@ function useSlideSwipe(opts) {
       window.removeEventListener("pointercancel", onCancel);
     };
   }, [settleMs]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!opts.enabled) {
       dragRef.current = null;
       clearPending();
@@ -1190,7 +1481,7 @@ function useSlideSwipe(opts) {
       setOffsetPx(0);
     }
   }, [opts.enabled, clearPending]);
-  useEffect3(() => clearPending, [clearPending]);
+  useEffect4(() => clearPending, [clearPending]);
   return { offsetPx, phase, onPointerDown };
 }
 
@@ -1199,7 +1490,6 @@ import {
   expandCoverBlock,
   createTemplateContext,
   markdownToDoc,
-  DEFAULT_THEME,
   VIEWPORT_PRESETS
 } from "@bendyline/squisq/doc";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
@@ -1248,6 +1538,86 @@ function buildSegmentTitleMap(doc) {
   return map;
 }
 
+// src/docPlayer/renderReadiness.ts
+var DEFAULT_VIDEO_FRAME_TIMEOUT_MS = 2e3;
+var VIDEO_TIME_TOLERANCE_SECONDS = 0.01;
+function formatMediaTime(time) {
+  return Number.isFinite(time) ? `${time.toFixed(3)}s` : String(time);
+}
+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 seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
+  video.pause();
+  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && Math.abs(video.currentTime - targetTime) <= VIDEO_TIME_TOLERANCE_SECONDS;
+  if (alreadyReady) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let videoFrameRequest = null;
+    const cleanup = () => {
+      clearTimeout(timeout);
+      video.removeEventListener("seeked", handleMediaReady);
+      video.removeEventListener("loadeddata", handleMediaReady);
+      video.removeEventListener("canplay", handleMediaReady);
+      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)}, readyState=${video.readyState}, seeking=${String(video.seeking)}, visible=${String(isVisiblyPresented(video))}).`
+        )
+      );
+    };
+    const requestPresentedFrame = () => {
+      if (settled || video.seeking || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return;
+      if (typeof video.requestVideoFrameCallback !== "function" || !isVisiblyPresented(video)) {
+        finish();
+        return;
+      }
+      if (videoFrameRequest !== null) return;
+      videoFrameRequest = video.requestVideoFrameCallback(() => {
+        videoFrameRequest = null;
+        finish();
+      });
+    };
+    function handleMediaReady() {
+      requestPresentedFrame();
+    }
+    const timeout = setTimeout(fail, timeoutMs);
+    video.addEventListener("seeked", handleMediaReady);
+    video.addEventListener("loadeddata", handleMediaReady);
+    video.addEventListener("canplay", handleMediaReady);
+    try {
+      video.currentTime = targetTime;
+      queueMicrotask(requestPresentedFrame);
+    } catch (error) {
+      settled = true;
+      cleanup();
+      reject(error);
+    }
+  });
+}
+
 // src/DocPlayer.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function isDevEnvironment() {
@@ -1259,6 +1629,7 @@ function isDevEnvironment() {
 }
 var warnedMissingStyles = false;
 var VISUAL_UPDATE_FALLBACK_MS = 100;
+var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 function waitForVisualUpdate() {
   return new Promise((resolve) => {
     let settled = false;
@@ -1280,7 +1651,7 @@ function waitForVisualUpdate() {
 }
 function DocPlayer(props) {
   const { doc, markdown } = props;
-  const markdownDoc = useMemo2(
+  const markdownDoc = useMemo3(
     () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
     [doc, markdown]
   );
@@ -1314,14 +1685,15 @@ function DocPlayerContent({
   onBlockMarkers,
   forceViewport,
   displayMode = "video",
-  showCoverSlide = true,
+  showCoverSlide,
   coverVisible,
   theme,
   surface,
   captionStyle = "standard",
-  videoPresentation = "background",
-  pipShape = "rounded",
-  pipPosition = "bottom-right",
+  videoPresentation,
+  pipSize,
+  pipShape,
+  pipPosition,
   enableSwipe = true,
   globalKeyboardShortcuts = false
 }) {
@@ -1330,11 +1702,12 @@ function DocPlayerContent({
   const audioRef = useRef5(null);
   const containerRef = useRef5(null);
   const playerId = `squisq-player-${useId2().replace(/:/g, "")}`;
-  const [tapFeedback, setTapFeedback] = useState4(null);
+  const [tapFeedback, setTapFeedback] = useState5(null);
   const tapFeedbackTimer = useRef5();
-  const { viewport, orientation } = useViewportOrientation();
+  const { viewport } = useViewportOrientation();
   const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS.landscape : viewport);
-  const isDebugMode = useMemo2(() => {
+  const activeOrientation = activeViewport.height > activeViewport.width ? "portrait" : "landscape";
+  const isDebugMode = useMemo3(() => {
     if (typeof window === "undefined") return false;
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
@@ -1347,7 +1720,7 @@ function DocPlayerContent({
     audioMode
   );
   const audio = externalAudioController || internalAudio;
-  useEffect4(() => {
+  useEffect5(() => {
     if (warnedMissingStyles || !isDevEnvironment()) return;
     const el = containerRef.current;
     if (!el || typeof getComputedStyle !== "function") return;
@@ -1360,7 +1733,7 @@ function DocPlayerContent({
     }
   }, []);
   const {
-    currentTime,
+    currentTime: audioCurrentTime,
     isPlaying,
     currentSegment,
     totalDuration,
@@ -1375,12 +1748,46 @@ function DocPlayerContent({
     skipToSegment: _skipToSegment,
     restart
   } = audio;
-  const mediaSchedule = useMemo2(() => resolveMediaSchedule(doc), [doc]);
+  const [renderClock, setRenderClock] = useState5(null);
+  const renderTimeOverride = renderClock?.doc === doc ? renderClock.time : null;
+  const currentTime = renderMode ? renderTimeOverride ?? audioCurrentTime : audioCurrentTime;
+  const rawSchedule = useMemo3(() => resolveMediaSchedule(doc), [doc]);
+  const clipDurations = useMediaClipDurations(rawSchedule, basePath);
+  const mediaSchedule = useMemo3(
+    () => resolveMediaSchedule(doc, { intrinsicDuration: (clip) => clipDurations.get(clip.src) }),
+    [doc, clipDurations]
+  );
   const currentTimeRef = useRef5(currentTime);
   currentTimeRef.current = currentTime;
+  const committedRenderTimeRef = useRef5(currentTime);
+  const renderCommitWaitersRef = useRef5([]);
   const totalDurationRef = useRef5(totalDuration);
   totalDurationRef.current = totalDuration;
   const expandedBlocksLenRef = useRef5(0);
+  useLayoutEffect2(() => {
+    committedRenderTimeRef.current = currentTime;
+    const pending = renderCommitWaitersRef.current;
+    renderCommitWaitersRef.current = pending.filter((waiter) => {
+      if (Math.abs(waiter.time - currentTime) > RENDER_TIME_EPSILON_SECONDS) return true;
+      waiter.resolve();
+      return false;
+    });
+  }, [currentTime]);
+  useEffect5(
+    () => () => {
+      const error = new Error("DocPlayer unmounted before the requested frame committed.");
+      renderCommitWaitersRef.current.splice(0).forEach((waiter) => waiter.reject(error));
+    },
+    []
+  );
+  const waitForRenderCommit = useCallback4((time) => {
+    if (Math.abs(committedRenderTimeRef.current - time) <= RENDER_TIME_EPSILON_SECONDS) {
+      return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+      renderCommitWaitersRef.current.push({ time, resolve, reject });
+    });
+  }, []);
   const handleContainerClick = useCallback4(
     (e) => {
       if (renderMode || isLinearMode) return;
@@ -1406,10 +1813,31 @@ function DocPlayerContent({
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const effectiveTheme = useMemo2(() => {
-    const base = theme ?? DEFAULT_THEME;
+  const appearance = useMemo3(
+    () => resolveDocPlayerAppearance(doc, {
+      theme,
+      videoPresentation,
+      pipSize,
+      pipShape,
+      pipPosition,
+      showCoverSlide
+    }),
+    [doc, theme, videoPresentation, pipSize, pipShape, pipPosition, showCoverSlide]
+  );
+  const effectiveTheme = useMemo3(() => {
+    const base = appearance.theme;
     return resolvedSurface ? applySurface(base, resolvedSurface) : base;
-  }, [theme, resolvedSurface]);
+  }, [appearance.theme, resolvedSurface]);
+  const resolvedPipStyle = useMemo3(() => pipStyleVars(effectiveTheme), [effectiveTheme]);
+  const pipVars = resolvedPipStyle;
+  const pipFrameStyle = useMemo3(
+    () => ({
+      border: resolvedPipStyle["--squisq-pip-border"],
+      borderRadius: resolvedPipStyle["--squisq-pip-radius"],
+      boxShadow: resolvedPipStyle["--squisq-pip-shadow"]
+    }),
+    [resolvedPipStyle]
+  );
   const {
     currentBlock,
     currentBlockIndex,
@@ -1432,9 +1860,9 @@ function DocPlayerContent({
     // remove authored slides from the default loss-averse projection.
     useAudioSegmentTiming: audioMode !== "synthetic"
   });
-  const coverBlock = useMemo2(() => {
+  const coverBlock = useMemo3(() => {
     const startBlockConfig = doc.startBlock;
-    if (!showCoverSlide) return null;
+    if (!appearance.showCoverSlide) return null;
     if (!startBlockConfig) return null;
     const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
     const layers = expandCoverBlock(startBlockConfig, context);
@@ -1447,15 +1875,15 @@ function DocPlayerContent({
       audioSegment: -1,
       layers
     };
-  }, [doc.startBlock, activeViewport, effectiveTheme, showCoverSlide]);
+  }, [doc.startBlock, activeViewport, effectiveTheme, appearance.showCoverSlide]);
   const hasManagedCover = !!coverBlock;
-  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState4(false);
-  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState4(false);
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState5(false);
+  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState5(false);
   const slideshowCoverInitKeyRef = useRef5("");
-  useEffect4(() => {
+  useEffect5(() => {
     slideshowCoverInitKeyRef.current = "";
   }, [doc]);
-  useEffect4(() => {
+  useEffect5(() => {
     const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
@@ -1466,12 +1894,12 @@ function DocPlayerContent({
       setSlideshowCoverVisible(false);
     }
   }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
-  const [coverForced, setCoverForced] = useState4(false);
-  const [coverGraceActive, setCoverGraceActive] = useState4(false);
+  const [coverForced, setCoverForced] = useState5(false);
+  const [coverGraceActive, setCoverGraceActive] = useState5(false);
   const coverGraceTimer = useRef5();
   const coverWasShowing = useRef5(false);
   const hasPlayedOnce = useRef5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     hasPlayedOnce.current = false;
     coverWasShowing.current = false;
     clearTimeout(coverGraceTimer.current);
@@ -1480,7 +1908,7 @@ function DocPlayerContent({
   }, [doc]);
   const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect4(() => {
+  useEffect5(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -1488,8 +1916,8 @@ function DocPlayerContent({
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
     }
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
-  useEffect4(() => () => clearTimeout(coverGraceTimer.current), []);
-  useEffect4(() => () => clearTimeout(tapFeedbackTimer.current), []);
+  useEffect5(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect5(() => () => clearTimeout(tapFeedbackTimer.current), []);
   const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
   const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
@@ -1498,19 +1926,19 @@ function DocPlayerContent({
   const slideshowSlideIndex = slideshowHasCover ? effectiveSlideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
   const slideshowTotalSlides = slideshowHasCover ? expandedBlocks.length + 1 : expandedBlocks.length;
   const hasAutoPlayed = useRef5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     hasAutoPlayed.current = false;
   }, [doc]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       play();
     }
   }, [isAudioReady, autoPlay, play]);
-  useEffect4(() => {
+  useEffect5(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isEnded) {
       onEnded?.();
       if (loop && !isSlideshowMode && !isLinearMode) {
@@ -1528,6 +1956,7 @@ function DocPlayerContent({
     };
     stableRenderAPIRef.current = {
       seekTo: (time) => current().seekTo(time),
+      getRenderedTime: () => current().getRenderedTime(),
       getDuration: () => current().getDuration(),
       getBlocks: () => current().getBlocks(),
       getAudioSegments: () => current().getAudioSegments(),
@@ -1539,7 +1968,7 @@ function DocPlayerContent({
     };
   }
   const stableRenderAPI = stableRenderAPIRef.current;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!renderMode && !isDebugMode) {
       liveRenderAPIRef.current = null;
       return;
@@ -1549,77 +1978,58 @@ function DocPlayerContent({
       liveRenderAPIRef.current = null;
       return;
     }
-    const renderSeekTo = (time) => {
-      seekTo(time);
-      return new Promise((resolve) => {
-        void waitForVisualUpdate().then(() => {
-          let blockStartTime = 0;
-          for (let i = expandedBlocks.length - 1; i >= 0; i--) {
-            if (time >= expandedBlocks[i].startTime) {
-              blockStartTime = expandedBlocks[i].startTime;
-              break;
-            }
-          }
-          const elapsedMs = (time - blockStartTime) * 1e3;
-          (root.getAnimations?.() ?? []).forEach((anim) => {
-            const target = anim.effect?.target;
-            if (!target) return;
-            if (target.closest(".doc-player__block--active")) {
-              anim.currentTime = Math.max(0, elapsedMs);
-            } else if (target.closest(".doc-player__block--previous")) {
-              anim.currentTime = Math.max(0, elapsedMs);
-            }
-          });
-          const blockElapsed = time - blockStartTime;
-          const videoSeekPromises = [];
-          const activeBlockEl = root.querySelector(".doc-player__block--active");
-          if (activeBlockEl) {
-            const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
-            videos.forEach((el) => {
-              const video = el;
-              const clipStart = parseFloat(video.dataset.clipStart || "0");
-              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);
-              video.pause();
-              video.currentTime = targetTime;
-              videoSeekPromises.push(
-                new Promise((r) => {
-                  if (Math.abs(video.currentTime - targetTime) < 0.1) {
-                    r();
-                  } else {
-                    video.addEventListener("seeked", () => r(), { once: true });
-                    setTimeout(r, 200);
-                  }
-                })
-              );
-            });
-          }
-          root.querySelectorAll("video[data-clip-id]").forEach((el) => {
-            const video = el;
-            const absStart = parseFloat(video.dataset.absStart || "0");
-            const absEnd = parseFloat(video.dataset.absEnd || "0");
-            const sourceIn = parseFloat(video.dataset.sourceIn || "0");
-            video.pause();
-            if (time < absStart || time >= absEnd) return;
-            const targetTime = sourceIn + (time - absStart);
-            video.currentTime = targetTime;
-            videoSeekPromises.push(
-              new Promise((r) => {
-                if (Math.abs(video.currentTime - targetTime) < 0.1) {
-                  r();
-                } else {
-                  video.addEventListener("seeked", () => r(), { once: true });
-                  setTimeout(r, 200);
-                }
-              })
-            );
-          });
-          Promise.all(videoSeekPromises).then(() => {
-            void waitForVisualUpdate().then(resolve);
-          });
+    const renderSeekTo = async (time) => {
+      if (renderMode) {
+        const committed = waitForRenderCommit(time);
+        flushSync(() => setRenderClock({ doc, time }));
+        if (externalAudioController) void seekTo(time).catch(() => void 0);
+        await committed;
+      } else {
+        await seekTo(time);
+      }
+      let blockStartTime = 0;
+      for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+        if (time >= expandedBlocks[i].startTime) {
+          blockStartTime = expandedBlocks[i].startTime;
+          break;
+        }
+      }
+      const elapsedMs = (time - blockStartTime) * 1e3;
+      (root.getAnimations?.() ?? []).forEach((anim) => {
+        const target = anim.effect?.target;
+        if (!target) return;
+        if (target.closest(".doc-player__block--active")) {
+          anim.currentTime = Math.max(0, elapsedMs);
+        } else if (target.closest(".doc-player__block--previous")) {
+          anim.currentTime = Math.max(0, elapsedMs);
+        }
+      });
+      const blockElapsed = time - blockStartTime;
+      const videoSeekPromises = [];
+      const activeBlockEl = root.querySelector(".doc-player__block--active");
+      if (activeBlockEl) {
+        const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
+        videos.forEach((el) => {
+          const video = el;
+          const clipStart = parseFloat(video.dataset.clipStart || "0");
+          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));
         });
+      }
+      root.querySelectorAll("video[data-clip-id]").forEach((el) => {
+        const video = el;
+        const absStart = parseFloat(video.dataset.absStart || "0");
+        const absEnd = parseFloat(video.dataset.absEnd || "0");
+        const sourceIn = parseFloat(video.dataset.sourceIn || "0");
+        video.pause();
+        if (time < absStart || time >= absEnd) return;
+        const targetTime = sourceIn + (time - absStart);
+        videoSeekPromises.push(seekVideoToFrame(video, targetTime));
       });
+      await Promise.all(videoSeekPromises);
+      await waitForVisualUpdate();
     };
     const getDuration = () => {
       const mediaDuration = getDocPlaybackDuration(doc);
@@ -1662,6 +2072,7 @@ function DocPlayerContent({
     const hasCoverBlock = () => !!coverBlock;
     const api = {
       seekTo: renderSeekTo,
+      getRenderedTime: () => committedRenderTimeRef.current,
       getDuration,
       getBlocks,
       getAudioSegments,
@@ -1675,8 +2086,18 @@ function DocPlayerContent({
     return () => {
       if (liveRenderAPIRef.current === api) liveRenderAPIRef.current = null;
     };
-  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock, doc]);
-  useEffect4(() => {
+  }, [
+    renderMode,
+    isDebugMode,
+    seekTo,
+    totalDuration,
+    expandedBlocks,
+    coverBlock,
+    doc,
+    externalAudioController,
+    waitForRenderCommit
+  ]);
+  useEffect5(() => {
     if (!renderMode && !isDebugMode || !containerRef.current) {
       onRenderAPIReady?.(null);
       return;
@@ -1685,8 +2106,8 @@ function DocPlayerContent({
     return () => onRenderAPIReady?.(null);
   }, [renderMode, isDebugMode, onRenderAPIReady, stableRenderAPI]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
-  const [captionMode, setCaptionMode] = useState4(defaultMode);
-  useEffect4(() => {
+  const [captionMode, setCaptionMode] = useState5(defaultMode);
+  useEffect5(() => {
     setCaptionMode(defaultMode);
   }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
@@ -1706,8 +2127,8 @@ function DocPlayerContent({
     });
   }, [onCaptionsToggle]);
   const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo2(() => buildSegmentTitleMap(doc), [doc]);
-  const playbackState = useMemo2(
+  const segmentTitleMap = useMemo3(() => buildSegmentTitleMap(doc), [doc]);
+  const playbackState = useMemo3(
     () => ({
       isPlaying,
       currentTime,
@@ -1750,7 +2171,7 @@ function DocPlayerContent({
       expandedBlocks.length
     ]
   );
-  const playbackActions = useMemo2(
+  const playbackActions = useMemo3(
     () => ({
       toggle,
       restart,
@@ -1761,7 +2182,7 @@ function DocPlayerContent({
     }),
     [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
   );
-  const slideNavActions = useMemo2(
+  const slideNavActions = useMemo3(
     () => ({
       nextSlide: () => {
         if (slideshowHasCover && slideshowCoverVisible) {
@@ -1850,10 +2271,10 @@ function DocPlayerContent({
     onNext: handleSwipeNext,
     onPrev: handleSwipePrev
   });
-  useEffect4(() => {
+  useEffect5(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect4(() => {
+  useEffect5(() => {
     onControlsReady?.({ play, pause, ...playbackActions });
   }, [play, pause, playbackActions, onControlsReady]);
   const getBlockTitle = useCallback4((block) => {
@@ -1880,7 +2301,7 @@ function DocPlayerContent({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
-  const slideshowPickerItems = useMemo2(() => {
+  const slideshowPickerItems = useMemo3(() => {
     const blockItems = expandedBlocks.map((block, index) => ({
       id: block.id,
       label: String(index + 1),
@@ -1896,7 +2317,7 @@ function DocPlayerContent({
       ...blockItems
     ];
   }, [coverBlock, expandedBlocks, getBlockTitle, slideshowHasCover]);
-  const blockMarkers = useMemo2(() => {
+  const blockMarkers = useMemo3(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
     return expandedBlocks.map((block, index) => {
@@ -1911,7 +2332,7 @@ function DocPlayerContent({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
@@ -1988,7 +2409,7 @@ function DocPlayerContent({
     (e) => handleKeyboardShortcut(e, false),
     [handleKeyboardShortcut]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!globalKeyboardShortcuts || renderMode || isLinearMode) return;
     const handleDocumentKeyDown = (event) => {
       handleKeyboardShortcut(event, true);
@@ -2028,7 +2449,9 @@ function DocPlayerContent({
     {
       ref: containerRef,
       "data-player-id": playerId,
-      "data-orientation": orientation,
+      "data-orientation": activeOrientation,
+      "data-playback-state": isPlaying ? "playing" : "paused",
+      "data-swipe-phase": swipe.phase,
       tabIndex: renderMode ? -1 : 0,
       "aria-label": "Document player",
       onKeyDown: renderMode ? void 0 : handleKeyDown,
@@ -2036,6 +2459,7 @@ function DocPlayerContent({
       onClick: handleContainerClick,
       onPointerDown: swipe.onPointerDown,
       style: {
+        ...pipVars,
         position: "relative",
         width: "100%",
         aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
@@ -2057,9 +2481,12 @@ function DocPlayerContent({
             basePath,
             renderMode,
             muted,
-            presentation: videoPresentation,
-            pipShape,
-            pipPosition
+            presentation: appearance.videoPresentation,
+            pipSize: appearance.pipSize,
+            pipShape: appearance.pipShape,
+            pipPosition: appearance.pipPosition,
+            pipOrientation: activeOrientation,
+            pipFrameStyle
           }
         ),
         /* @__PURE__ */ jsxs4("div", { className: "doc-player__viewport", children: [
@@ -2211,7 +2638,7 @@ function DocPlayerContent({
                   " ",
                   /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
                     "(",
-                    orientation,
+                    activeOrientation,
                     ")"
                   ] })
                 ] }),
@@ -2477,7 +2904,7 @@ function DocControlsSidebar({ state, actions }) {
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef6, useState as useState5, useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { useRef as useRef6, useState as useState6, useCallback as useCallback5, useEffect as useEffect6 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
@@ -2513,7 +2940,7 @@ function DocPlayerWithSidebar({
   const stateRef = useRef6(DEFAULT_STATE);
   const actionsRef = useRef6(null);
   const wasPlayingRef = useRef6(false);
-  const [, setTick] = useState5(0);
+  const [, setTick] = useState6(0);
   const handleStateChange = useCallback5(
     (state) => {
       stateRef.current = state;
@@ -2533,7 +2960,7 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const interval = setInterval(() => {
       if (!stateRef.current.isPlaying) return;
       setTick((t) => t + 1);
@@ -2570,12 +2997,14 @@ function DocPlayerWithSidebar({
 
 export {
   MediaClipLayer,
+  useMediaClipDurations,
   SocialCaptionOverlay,
   CaptionOverlay,
   formatTime,
   DocProgressBar,
   DocControlsOverlay,
   DocControlsSlideshow,
+  resolveDocPlayerAppearance,
   DocPlayer,
   DocControlsBottom,
   DocControlsSidebar,