@bendyline/squisq-react 2.4.7 → 2.5.0

package/dist/{chunk-3HYSWEKG.js → chunk-THDXCSPC.js}

@@ -9,7 +9,7 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-MKWVJYUS.js";
+} from "./chunk-UJEHDVQO.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";

package/dist/{chunk-MKWVJYUS.js → chunk-UJEHDVQO.js}

@@ -239,7 +239,7 @@ function remapToKenBurns(anim) {
 }
 
 // src/layers/TextLayer.tsx
-import { useId, useMemo } from "react";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
 import {
   parseHtmlToNodes,
@@ -454,6 +454,55 @@ function PlainTextLayer({ layer, viewport, blockTime }) {
   }
   const lineHeight = style.lineHeight || 1.4;
   const lineHeightPx = style.fontSize * lineHeight;
+  const shrinkToFit = style.shrinkToFit === true;
+  const centerBlock = shrinkToFit && dominantBaseline === "middle";
+  const firstLineDy = centerBlock ? -((lines.length - 1) / 2) * lineHeightPx : 0;
+  const textRef = useRef(null);
+  const [fit, setFit] = useState(null);
+  const linesKey = lines.join("\n");
+  useLayoutEffect(() => {
+    if (!shrinkToFit) {
+      setFit(null);
+      return;
+    }
+    const element = textRef.current;
+    if (!element || typeof element.getBBox !== "function") return;
+    const measure = () => {
+      try {
+        const bbox = element.getBBox();
+        if (bbox.width <= 0 || bbox.height <= 0) return;
+        const maxW = boxWidth ?? viewport.width;
+        const maxH = boxHeight ?? viewport.height;
+        const scale = Math.min(1, maxW / bbox.width, maxH / bbox.height);
+        setFit(
+          scale < 0.995 ? { scale, cx: bbox.x + bbox.width / 2, cy: bbox.y + bbox.height / 2 } : null
+        );
+      } catch {
+      }
+    };
+    measure();
+    const fonts = element.ownerDocument?.fonts;
+    if (fonts && fonts.status !== "loaded") {
+      let cancelled = false;
+      void fonts.ready.then(() => {
+        if (!cancelled) measure();
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [
+    shrinkToFit,
+    linesKey,
+    boxWidth,
+    boxHeight,
+    viewport.width,
+    viewport.height,
+    style.fontSize,
+    style.fontFamily,
+    style.fontWeight
+  ]);
+  const fitTransform = fit ? `translate(${fit.cx} ${fit.cy}) scale(${fit.scale}) translate(${-fit.cx} ${-fit.cy})` : void 0;
   const textStyles = {
     fontSize: `${style.fontSize}px`,
     fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
@@ -486,13 +535,15 @@ function PlainTextLayer({ layer, viewport, blockTime }) {
     /* @__PURE__ */ jsx3(
       "text",
       {
+        ref: textRef,
         x,
         y,
         textAnchor,
         dominantBaseline,
         style: textStyles,
         filter: filterId ? `url(#${filterId})` : void 0,
-        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
+        transform: fitTransform,
+        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? firstLineDy : lineHeightPx, children: [
           line || "\xA0",
           " "
         ] }, i))
@@ -893,7 +944,7 @@ function MarkerDef({
 }
 
 // src/layers/MapLayer.tsx
-import { useId as useId4, useState, useEffect } from "react";
+import { useId as useId4, useState as useState2, useEffect } from "react";
 import { ResourcePolicyError as ResourcePolicyError2 } from "@bendyline/squisq/markdown";
 
 // src/utils/mapTileUtils.ts
@@ -1092,10 +1143,10 @@ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function MapLayer({ layer, basePath, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const clipId = `map-clip-${useId4().replace(/:/g, "")}-${layer.id}`;
-  const [mapImageUrl, setMapImageUrl] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [blockedByPolicy, setBlockedByPolicy] = useState(false);
+  const [mapImageUrl, setMapImageUrl] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [blockedByPolicy, setBlockedByPolicy] = useState2(false);
   const x = resolveValue(position.x, viewport.width);
   const y = resolveValue(position.y, viewport.height);
   const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
@@ -1242,7 +1293,7 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
 }
 
 // src/layers/VideoLayer.tsx
-import { useRef, useEffect as useEffect2 } from "react";
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var VIDEO_SYNC_DRIFT_SECONDS = 0.2;
 function VideoLayer({
@@ -1254,8 +1305,8 @@ function VideoLayer({
   muted = false
 }) {
   const { content, position } = layer;
-  const videoRef = useRef(null);
-  const hasStartedRef = useRef(false);
+  const videoRef = useRef2(null);
+  const hasStartedRef = useRef2(false);
   const startAt = content.startAt ?? 0;
   const gated = blockTime < startAt;
   const x = resolveValue(position.x, viewport.width);
@@ -1434,7 +1485,7 @@ function TableLayer({ layer, viewport, blockTime }) {
 }
 
 // src/layers/TreeLayer.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function faClass(token, fallback) {
   const name = token && token.trim() ? token.trim() : fallback;
@@ -1508,7 +1559,7 @@ function TreeRow({
   style
 }) {
   const hasChildren = item.children.length > 0;
-  const [collapsed, setCollapsed] = useState2(false);
+  const [collapsed, setCollapsed] = useState3(false);
   const isDir = item.isDir || hasChildren;
   const iconCls = isDir ? faClass(style.folderIcon, collapsed ? "folder" : "folder-open") : faClass(style.fileIcon, "file");
   return /* @__PURE__ */ jsxs7("li", { style: { position: "relative" }, children: [

package/dist/{chunk-KF4DTT46.js → chunk-ZKNX3EJI.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-3HYSWEKG.js";
+} from "./chunk-THDXCSPC.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -1243,7 +1243,10 @@ function DocControlsSlideshow({
 }
 
 // src/docPlayer/playerAppearance.ts
-import { resolveThemeForDoc } from "@bendyline/squisq/doc";
+import {
+  resolveCoverSlideSettings,
+  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];
@@ -1291,20 +1294,14 @@ function resolvePipPosition(value) {
   };
   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;
+  const cover = resolveCoverSlideSettings(frontmatter, {
+    ...overrides.showCoverSlide !== void 0 ? { enabled: overrides.showCoverSlide } : {},
+    ...overrides.coverSlideTemplate !== void 0 ? { template: overrides.coverSlideTemplate } : {},
+    ...overrides.coverSlideDuration !== void 0 ? { duration: overrides.coverSlideDuration } : {},
+    ...overrides.coverSlidePlayback !== void 0 ? { playback: overrides.coverSlidePlayback } : {}
+  });
   return {
     theme: overrides.theme ?? resolveThemeForDoc(doc),
     videoPresentation: overrides.videoPresentation ?? resolveVideoPresentation(
@@ -1315,7 +1312,10 @@ function resolveDocPlayerAppearance(doc, overrides = {}) {
     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
+    showCoverSlide: cover.enabled,
+    coverSlideTemplate: cover.template,
+    coverSlideDuration: cover.duration,
+    coverSlidePlayback: cover.playback
   };
 }
 
@@ -1567,17 +1567,36 @@ function isVisiblyPresented(video) {
   }
   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 = () => {
-      clearTimeout(timeout);
+      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);
       }
@@ -1615,34 +1634,48 @@ function seekVideoByAssignment(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAM
     function handleMediaReady() {
       requestPresentedFrame();
     }
-    const timeout = setTimeout(fail, timeoutMs);
+    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);
-    try {
-      video.currentTime = reachableMediaTime(video, targetTime);
-      queueMicrotask(requestPresentedFrame);
-    } catch (error) {
-      settled = true;
-      cleanup();
-      reject(error);
-    }
+    ownerDocument.addEventListener("visibilitychange", handleVisibilityChange);
+    watchdog.arm();
+    assignTargetTime();
   });
 }
 function advanceSequentialCaptureVideo(video, targetTime, timeoutMs) {
   return new Promise((resolve, reject) => {
     let settled = false;
-    let timeout = null;
     const ownerDocument = video.ownerDocument;
     const isInactive = () => ownerDocument.visibilityState !== "visible";
-    const clearWatchdog = () => {
-      if (timeout === null) return;
-      clearTimeout(timeout);
-      timeout = null;
-    };
     const cleanup = () => {
-      clearWatchdog();
+      watchdog.clear();
       clearInterval(readinessPoll);
       video.removeEventListener("timeupdate", check);
       video.removeEventListener("loadeddata", check);
@@ -1696,21 +1729,17 @@ function advanceSequentialCaptureVideo(video, targetTime, timeoutMs) {
         handlePlaybackFailure();
       }
     };
-    const armWatchdog = () => {
-      clearWatchdog();
-      if (settled || isInactive()) return;
-      timeout = setTimeout(fail, timeoutMs);
-    };
+    const watchdog = createCaptureWatchdog(ownerDocument, timeoutMs, fail);
     const pauseWhileInactive = () => {
       video.pause();
-      clearWatchdog();
+      watchdog.clear();
     };
     const resumeWhenActive = () => {
       if (settled || isInactive()) return;
       check();
       if (settled) return;
       startPlayback();
-      armWatchdog();
+      watchdog.arm();
     };
     function handleVisibilityChange() {
       if (ownerDocument.visibilityState !== "visible") {
@@ -1818,6 +1847,9 @@ function DocPlayerContent({
   forceViewport,
   displayMode = "video",
   showCoverSlide,
+  coverSlideTemplate,
+  coverSlideDuration,
+  coverSlidePlayback,
   coverVisible,
   theme,
   surface,
@@ -1973,9 +2005,23 @@ function DocPlayerContent({
       pipSize,
       pipShape,
       pipPosition,
-      showCoverSlide
+      showCoverSlide,
+      coverSlideTemplate,
+      coverSlideDuration,
+      coverSlidePlayback
     }),
-    [doc, theme, videoPresentation, pipSize, pipShape, pipPosition, showCoverSlide]
+    [
+      doc,
+      theme,
+      videoPresentation,
+      pipSize,
+      pipShape,
+      pipPosition,
+      showCoverSlide,
+      coverSlideTemplate,
+      coverSlideDuration,
+      coverSlidePlayback
+    ]
   );
   const effectiveTheme = useMemo3(() => {
     const base = appearance.theme;
@@ -2018,7 +2064,7 @@ function DocPlayerContent({
     if (!appearance.showCoverSlide) return null;
     if (!startBlockConfig) return null;
     const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
-    const layers = expandCoverBlock(startBlockConfig, context);
+    const layers = expandCoverBlock(startBlockConfig, context, appearance.coverSlideTemplate);
     return {
       id: "cover-block",
       startTime: -1,
@@ -2028,7 +2074,13 @@ function DocPlayerContent({
       audioSegment: -1,
       layers
     };
-  }, [doc.startBlock, activeViewport, effectiveTheme, appearance.showCoverSlide]);
+  }, [
+    doc.startBlock,
+    activeViewport,
+    effectiveTheme,
+    appearance.showCoverSlide,
+    appearance.coverSlideTemplate
+  ]);
   const hasManagedCover = !!coverBlock;
   const [slideshowCoverVisible, setSlideshowCoverVisible] = useState5(false);
   const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState5(false);
@@ -2066,9 +2118,12 @@ function DocPlayerContent({
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
       setCoverGraceActive(true);
-      coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
+      coverGraceTimer.current = setTimeout(
+        () => setCoverGraceActive(false),
+        appearance.coverSlideDuration * 1e3
+      );
     }
-  }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
+  }, [isPlaying, coverBlock, renderMode, isSlideshowMode, appearance.coverSlideDuration]);
   useEffect5(() => () => clearTimeout(coverGraceTimer.current), []);
   useEffect5(() => () => clearTimeout(tapFeedbackTimer.current), []);
   const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);

package/dist/index.d.ts

@@ -4,9 +4,10 @@ import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition
 export { MarkdownRenderer, MermaidDiagram, MermaidDiagramProps } from './markdown/index.js';
 export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, usePageView } from './page/index.js';
 export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TableLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
+import { CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
+export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
 export { MediaContext, MediaScheduleController, ModalDialogOptions, ResourcePolicyContext, UseDocPlaybackOptions, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaSchedule, useMediaUrl, useModalDialog, useResourcePolicy, useViewportOrientation } from './hooks/index.js';
 export { A as AudioActions, a as AudioController, b as AudioState } from './AudioController-DwMsPe38.js';
-export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
 export { JsonView, JsonViewProps } from './json-view/index.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -103,6 +104,9 @@ interface DocPlayerAppearanceOverrides {
     pipShape?: PipShape;
     pipPosition?: PipPosition;
     showCoverSlide?: boolean;
+    coverSlideTemplate?: CoverSlideTemplate;
+    coverSlideDuration?: number;
+    coverSlidePlayback?: CoverSlidePlayback;
 }
 interface ResolvedDocPlayerAppearance {
     theme: Theme;
@@ -111,6 +115,9 @@ interface ResolvedDocPlayerAppearance {
     pipShape: PipShape;
     pipPosition: PipPosition;
     showCoverSlide: boolean;
+    coverSlideTemplate: CoverSlideTemplate;
+    coverSlideDuration: number;
+    coverSlidePlayback: CoverSlidePlayback;
 }
 /** Resolve the visual settings a standalone/export player must inherit from its Doc. */
 declare function resolveDocPlayerAppearance(doc: Doc, overrides?: DocPlayerAppearanceOverrides): ResolvedDocPlayerAppearance;

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-KF4DTT46.js";
+} from "./chunk-ZKNX3EJI.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-3HYSWEKG.js";
+} from "./chunk-THDXCSPC.js";
 import {
   ImageLayer,
   MapLayer,
@@ -33,7 +33,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-MKWVJYUS.js";
+} from "./chunk-UJEHDVQO.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";

package/dist/layers/index.js

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

package/dist/page/index.js

@@ -4,8 +4,8 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-3HYSWEKG.js";
-import "../chunk-MKWVJYUS.js";
+} from "../chunk-THDXCSPC.js";
+import "../chunk-UJEHDVQO.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";

package/dist/player/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Block, VideoPresentation as VideoPresentation$1, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, Theme, SurfaceScheme, Transition, CaptionTrack, ViewportConfig as ViewportConfig$1, ScheduledClip } from '@bendyline/squisq/schemas';
-import { ViewportConfig } from '@bendyline/squisq/doc';
+import { ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 import { a as AudioController } from '../AudioController-DwMsPe38.js';
 import { CSSProperties } from 'react';
 
@@ -222,6 +222,12 @@ interface DocPlayerProps {
     /** Video, manual slideshow, or long-scrolling linear rendition. */
     displayMode?: DisplayMode;
     showCoverSlide?: boolean;
+    /** Visual template used to materialize the managed cover. */
+    coverSlideTemplate?: CoverSlideTemplate;
+    /** Seconds the cover remains visible after Video playback starts. */
+    coverSlideDuration?: number;
+    /** Whether video export advances or delays the story while the cover is visible. */
+    coverSlidePlayback?: CoverSlidePlayback;
     coverVisible?: boolean;
     captionStyle?: CaptionStyle;
     /**

package/dist/player/index.js

@@ -10,11 +10,11 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-KF4DTT46.js";
+} from "../chunk-ZKNX3EJI.js";
 import {
   BlockRenderer
-} from "../chunk-3HYSWEKG.js";
-import "../chunk-MKWVJYUS.js";
+} from "../chunk-THDXCSPC.js";
+import "../chunk-UJEHDVQO.js";
 import "../chunk-BOZJ655L.js";
 import "../chunk-TT6ENR6T.js";
 import {