@bendyline/squisq-react 2.11.10 → 2.11.12

package/dist/{chunk-X4I6Y3OP.js → chunk-7T26IKW2.js}

@@ -1,6 +1,6 @@
 import {
   LinearDocView
-} from "./chunk-CLP3VWJ2.js";
+} from "./chunk-P3FJ3YKS.js";
 
 // src/PaginatedDocView.tsx
 import {

package/dist/{chunk-CLP3VWJ2.js → chunk-P3FJ3YKS.js}

@@ -9,7 +9,7 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-W6MKRWL6.js";
+} from "./chunk-WHVSQ42V.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -24,6 +24,7 @@ import {
 // src/BlockRenderer.tsx
 import { useId, useLayoutEffect, useRef, useState } from "react";
 import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
+import { isGeometryBoundTemplate } from "@bendyline/squisq/doc";
 
 // src/utils/textFit.ts
 function largestFittingTextScale(fits, maximum = 2) {
@@ -138,6 +139,7 @@ function BlockRenderer({
   const clipId = `vb-clip-${instanceId}-${block.id}`;
   const svgRef = useRef(null);
   const [textScale, setTextScale] = useState(1);
+  const growText = growTextToFit && !isGeometryBoundTemplate(block.template);
   useLayoutEffect(() => {
     const svg = svgRef.current;
     let cancelled = false;
@@ -145,7 +147,7 @@ function BlockRenderer({
     const measure = () => {
       if (cancelled) return;
       const targets = Array.from(svg.querySelectorAll("[data-squisq-text-fit]"));
-      if (!growTextToFit || targets.length === 0) {
+      if (!growText || targets.length === 0) {
         applyTextScale(targets, 1);
         setTextScale(1);
         return;
@@ -175,7 +177,7 @@ function BlockRenderer({
     return () => {
       cancelled = true;
     };
-  }, [block.layers, growTextToFit, viewport.height, viewport.width]);
+  }, [block.layers, growText, viewport.height, viewport.width]);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -186,7 +188,7 @@ function BlockRenderer({
       preserveAspectRatio: "xMidYMid meet",
       overflow: "hidden",
       "data-block-id": block.id,
-      "data-squisq-text-scale": growTextToFit ? textScale : void 0,
+      "data-squisq-text-scale": growText ? textScale : void 0,
       children: [
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
         /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx(

package/dist/{chunk-4KBT2CXQ.js → chunk-QWUQNB4E.js}

@@ -1,17 +1,17 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-CLP3VWJ2.js";
+} from "./chunk-P3FJ3YKS.js";
 import {
   isCaptureDrivenVideo,
   seekVideoToFrame
-} from "./chunk-W6MKRWL6.js";
+} from "./chunk-WHVSQ42V.js";
 import {
   useAudioSync,
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-MVJQL2W2.js";
+} from "./chunk-U2FIZWAL.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -451,16 +451,26 @@ function useMediaClipDurations(schedule, basePath, mediaProviderOverride) {
 import { useMemo as useMemo2 } from "react";
 import { resolveFontFamily } from "@bendyline/squisq/schemas";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function positionStyle(position) {
+function positionStyle(position, portrait) {
   switch (position) {
     case "top":
-      return { top: "8%" };
+      return { top: portrait ? "12%" : "8%" };
     case "center":
       return { top: "50%", transform: "translateY(-50%)" };
     default:
-      return { bottom: "18%" };
+      return { bottom: portrait ? "24%" : "16%" };
   }
 }
+function contrastText(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return "#ffffff";
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luma > 150 ? "#111111" : "#ffffff";
+}
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -526,7 +536,7 @@ function SocialCaptionOverlay({
         className: "social-caption-overlay",
         style: {
           position: "absolute",
-          ...positionStyle(position),
+          ...positionStyle(position, (viewport?.height ?? 0) > (viewport?.width ?? 1)),
           left: 0,
           right: 0,
           zIndex: 50,
@@ -579,22 +589,25 @@ function SocialCaptionOverlay({
   }
   const primaryColor = theme?.colors?.primary ?? "#5b9bd5";
   const fontFamily = theme?.typography?.titleFont ? resolveFontFamily(theme.typography.titleFont, '"PT Serif", Georgia, serif') : '"PT Serif", Georgia, serif';
+  const viewportWidth = viewport?.width ?? 1280;
   const viewportHeight = viewport?.height ?? 720;
-  const baseFontSize = Math.round(viewportHeight * 0.055);
-  const fontSize = Math.max(24, Math.min(72, baseFontSize));
+  const portrait = viewportHeight > viewportWidth;
+  const baseFontSize = Math.min(viewportHeight * 0.055, viewportWidth * 0.082);
+  const fontSize = Math.max(22, Math.min(96, Math.round(baseFontSize)));
   return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "social-caption-overlay",
       style: {
         position: "absolute",
-        ...positionStyle(position),
+        ...positionStyle(position, portrait),
         left: 0,
         right: 0,
         zIndex: 50,
         pointerEvents: "none",
-        textAlign: "center",
-        padding: "0 8%",
+        display: "flex",
+        justifyContent: "center",
+        padding: portrait ? "0 7%" : "0 10%",
         boxSizing: "border-box",
         opacity: 1,
         transition: "opacity 0.15s ease-in-out"
@@ -602,24 +615,44 @@ function SocialCaptionOverlay({
       children: /* @__PURE__ */ jsx2(
         "div",
         {
+          className: "social-caption-overlay__chunk",
           style: {
-            display: "inline-block",
-            lineHeight: 1.3
+            display: "inline-flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignItems: "baseline",
+            maxWidth: "100%",
+            rowGap: "0.12em",
+            columnGap: "0.28em",
+            padding: "0.22em 0.55em",
+            borderRadius: "0.4em",
+            background: "rgba(10, 10, 12, 0.42)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            fontFamily,
+            fontSize: `${fontSize}px`,
+            lineHeight: 1.18,
+            textTransform: "uppercase",
+            letterSpacing: "0.01em",
+            whiteSpace: "normal"
           },
           children: activeChunk.words.map((word, i) => {
             const isActive = i === activeWordIndex;
             return /* @__PURE__ */ jsx2(
               "span",
               {
+                className: isActive ? "social-caption-overlay__word is-active" : "social-caption-overlay__word",
                 style: {
-                  fontFamily,
-                  fontSize: `${fontSize}px`,
-                  fontWeight: isActive ? 800 : 600,
-                  color: isActive ? primaryColor : "rgba(255, 255, 255, 0.9)",
-                  textShadow: "0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4)",
-                  marginRight: i < activeChunk.words.length - 1 ? "0.3em" : void 0,
-                  transition: "color 0.1s ease, font-weight 0.1s ease",
-                  textTransform: "uppercase"
+                  display: "inline-block",
+                  whiteSpace: "nowrap",
+                  padding: "0 0.16em",
+                  borderRadius: "0.18em",
+                  fontWeight: 800,
+                  color: isActive ? contrastText(primaryColor) : "rgba(255, 255, 255, 0.95)",
+                  background: isActive ? primaryColor : "transparent",
+                  textShadow: isActive ? "none" : "0 2px 6px rgba(0,0,0,0.75), 0 0 18px rgba(0,0,0,0.45)",
+                  transform: isActive ? "scale(1.05)" : "none",
+                  transition: "color 0.1s ease, background-color 0.1s ease, transform 0.1s ease"
                 },
                 children: word.text
               },
@@ -1457,6 +1490,7 @@ function DashboardView({
       },
       getRenderedTime: () => 0,
       getDuration: () => 0,
+      getViewport: () => ({ width: activeViewport.width, height: activeViewport.height }),
       getBlocks: () => materialization.cells.map((cell) => ({
         id: String(cell.block.id),
         template: cell.block.template ?? "content",
@@ -1474,7 +1508,7 @@ function DashboardView({
     };
     onRenderAPIReady(api);
     return () => onRenderAPIReady(null);
-  }, [renderMode, onRenderAPIReady, materialization]);
+  }, [activeViewport, renderMode, onRenderAPIReady, materialization]);
   const canvasDimensions = { width: activeViewport.width, height: activeViewport.height };
   const coverStyle = { position: "absolute", inset: 0 };
   const canvasStyle = {
@@ -2254,7 +2288,8 @@ import {
   isTemplateBlock as isTemplateBlock2,
   getCaptionAtTime as getCaptionAtTime2,
   resolveMediaSchedule,
-  getDocPlaybackDuration
+  getDocPlaybackDuration,
+  resolveMotionForDoc
 } from "@bendyline/squisq/schemas";
 import { applySurface, pipStyleVars } from "@bendyline/squisq/schemas";
 
@@ -2551,6 +2586,7 @@ function DocPlayerContent({
   coverSlidePlayback,
   coverVisible,
   theme,
+  motion: motionProp,
   surface,
   captionStyle = "standard",
   captionPosition,
@@ -2753,6 +2789,12 @@ function DocPlayerContent({
     }),
     [resolvedPipStyle]
   );
+  const hasAnchoredBlocks = useMemo5(
+    () => doc.blocks.some(
+      (block) => typeof block.sourceStartTime === "number"
+    ),
+    [doc.blocks]
+  );
   const {
     currentBlock,
     currentBlockIndex,
@@ -2769,17 +2811,29 @@ function DocPlayerContent({
   } = useDocPlayback(doc, currentTime, {
     viewport: activeViewport,
     theme: effectiveTheme,
+    motion: motionProp,
     onSeek: seekTo,
+    // Offline capture may visit frames out of order; derive the crossfade
+    // partner from block order rather than from what was rendered last.
+    deterministicTransitions: renderMode,
     // A synthetic track is only the timer used by an unnarrated preview.
     // Narration pacing may compact short visual beats, but it must never
     // remove authored slides from the default loss-averse projection.
-    useAudioSegmentTiming: audioMode !== "synthetic"
+    // Offline capture also runs on the synthetic clock, yet a narrated doc
+    // (blocks anchored to its segments by `sourceStartTime`) still takes its
+    // timeline from those segments there — the exporter muxes the audio
+    // afterwards. Without them, block durations would simply stack and every
+    // gap between anchored blocks would pull the rest earlier, so the render
+    // would no longer match live playback.
+    useAudioSegmentTiming: audioMode !== "synthetic" || renderMode && hasAnchoredBlocks
   });
   const coverBlock = useMemo5(() => {
     const startBlockConfig = doc.startBlock;
     if (!appearance.showCoverSlide) return null;
     if (!startBlockConfig) return null;
-    const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
+    const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport, {
+      motion: resolveMotionForDoc(doc, effectiveTheme, motionProp)
+    });
     const layers = expandCoverBlock(startBlockConfig, context, appearance.coverSlideTemplate);
     return {
       id: "cover-block",
@@ -2791,7 +2845,8 @@ function DocPlayerContent({
       layers
     };
   }, [
-    doc.startBlock,
+    doc,
+    motionProp,
     activeViewport,
     effectiveTheme,
     appearance.showCoverSlide,
@@ -2839,7 +2894,7 @@ function DocPlayerContent({
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode, appearance.coverSlideDuration]);
   useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
   useEffect7(() => () => clearTimeout(tapFeedbackTimer.current), []);
-  const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const showVideoCoverBlock = !isLinearMode && !!coverBlock && (coverForced || !isSlideshowMode && (coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay));
   const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
   const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
   const showCoverBlock = coverVisible === void 0 ? showVideoCoverBlock || showSlideshowCover : !!coverBlock && coverVisible;
@@ -2879,6 +2934,7 @@ function DocPlayerContent({
       seekTo: (time) => current().seekTo(time),
       getRenderedTime: () => current().getRenderedTime(),
       getDuration: () => current().getDuration(),
+      getViewport: () => current().getViewport(),
       getBlocks: () => current().getBlocks(),
       getAudioSegments: () => current().getAudioSegments(),
       getCaptions: () => current().getCaptions(),
@@ -2908,27 +2964,42 @@ function DocPlayerContent({
       } else {
         await seekTo(time);
       }
-      let blockStartTime = 0;
+      let activeIndex = -1;
       for (let i = expandedBlocks.length - 1; i >= 0; i--) {
         if (time >= expandedBlocks[i].startTime) {
-          blockStartTime = expandedBlocks[i].startTime;
+          activeIndex = i;
           break;
         }
       }
+      const blockStartTime = activeIndex >= 0 ? expandedBlocks[activeIndex].startTime : 0;
+      const previousStartTime = activeIndex > 0 ? expandedBlocks[activeIndex - 1].startTime : blockStartTime;
       const elapsedMs = (time - blockStartTime) * 1e3;
+      const previousElapsedMs = (time - previousStartTime) * 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) => {
+      let seekedActiveAnimations = 0;
+      (root.getAnimations?.({ subtree: true }) ?? []).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);
+        let position;
+        if (target.closest(".doc-player__block--previous")) {
+          position = target.classList.contains("block-svg") ? elapsedMs : previousElapsedMs;
+        } else if (target.closest(".doc-player__block--active")) {
+          position = elapsedMs;
+        } else if (target.closest(".doc-player__block--cover")) {
+          position = 0;
+        } else {
+          position = time * 1e3;
         }
+        if (renderMode && typeof anim.pause === "function" && anim.playState !== "paused") {
+          anim.pause();
+        }
+        anim.currentTime = Math.max(0, position);
+        const end = anim.effect?.getComputedTiming?.().endTime;
+        if (typeof end !== "number" || position < end) seekedActiveAnimations += 1;
       });
       const blockElapsed = time - blockStartTime;
       const videoSeekPromises = [];
@@ -2964,7 +3035,9 @@ function DocPlayerContent({
       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();
+      if (!renderMode || !blocksUnchanged || seekedActiveAnimations > 0) {
+        await waitForVisualUpdate();
+      }
     };
     const getDuration = () => {
       const mediaDuration = getDocPlaybackDuration(doc);
@@ -3005,10 +3078,12 @@ function DocPlayerContent({
       return waitForVisualUpdate();
     };
     const hasCoverBlock = () => !!coverBlock;
+    const getViewport = () => ({ width: activeViewport.width, height: activeViewport.height });
     const api = {
       seekTo: renderSeekTo,
       getRenderedTime: () => committedRenderTimeRef.current,
       getDuration,
+      getViewport,
       getBlocks,
       getAudioSegments,
       getCaptions,
@@ -3031,7 +3106,8 @@ function DocPlayerContent({
     doc,
     externalAudioController,
     waitForRenderCommit,
-    isDashboardMode
+    isDashboardMode,
+    activeViewport
   ]);
   useEffect7(() => {
     if (isDashboardMode) return;
@@ -3445,7 +3521,7 @@ function DocPlayerContent({
       role: "region",
       "aria-label": "Document player",
       onKeyDown: renderMode ? void 0 : handleKeyDown,
-      className: `doc-player${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
+      className: `doc-player${renderMode ? " doc-player--render-mode" : ""}${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
       onClick: handleContainerClick,
       onPointerDown: swipe.onPointerDown,
       style: {
@@ -3503,7 +3579,7 @@ function DocPlayerContent({
             BlockRenderer,
             {
               block: previousBlock,
-              blockTime,
+              blockTime: Math.max(0, currentTime - previousBlock.startTime),
               basePath,
               isExiting: true,
               transition: currentBlock?.transition,
@@ -3701,7 +3777,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs6(
+        !renderMode && !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "doc-player__unavailable",

package/dist/{chunk-MVJQL2W2.js → chunk-U2FIZWAL.js}

@@ -476,6 +476,7 @@ function useAudioSync(audioRef, track, basePath = "", enabled = true, mode = "me
 
 // src/hooks/useDocPlayback.ts
 import { useMemo as useMemo3, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { resolveMotionForDoc } from "@bendyline/squisq/schemas";
 import {
   DEFAULT_THEME,
   getBlockAtTime,
@@ -494,7 +495,9 @@ function useDocPlayback(script, currentTime, options = {}) {
     viewport = VIEWPORT_PRESETS.landscape,
     theme,
     onSeek,
-    useAudioSegmentTiming = true
+    useAudioSegmentTiming = true,
+    deterministicTransitions = false,
+    motion: motionOverride
   } = options;
   const blocks = useMemo3(() => {
     if (!script?.blocks) {
@@ -518,6 +521,11 @@ function useDocPlayback(script, currentTime, options = {}) {
         viewport,
         persistentLayers,
         theme,
+        motion: resolveMotionForDoc(
+          { motion: script.motion, frontmatter: script.frontmatter },
+          resolvedTheme,
+          motionOverride
+        ),
         // Custom (user-defined) templates inlined into the doc's
         // frontmatter — see CustomTemplates.ts. Merged onto the
         // built-in registry so blocks annotated with `{[myhero]}`
@@ -535,6 +543,9 @@ function useDocPlayback(script, currentTime, options = {}) {
     script?.audio?.segments,
     script?.persistentLayers,
     script?.customTemplates,
+    script?.motion,
+    script?.frontmatter,
+    motionOverride,
     viewport,
     theme,
     useAudioSegmentTiming
@@ -577,7 +588,7 @@ function useDocPlayback(script, currentTime, options = {}) {
   lastRenderedBlockRef.current = currentBlock;
   const transitionDuration = currentBlock?.transition ? resolveTransitionDuration(currentBlock.transition) : 0;
   const isEntering = !!currentBlock && transitionDuration > 0 && blockTime < transitionDuration;
-  const outgoingBlock = outgoingBlockRef.current;
+  const outgoingBlock = deterministicTransitions ? currentBlockIndex > 0 ? blocks[currentBlockIndex - 1] ?? null : null : outgoingBlockRef.current;
   const isExiting = isEntering && outgoingBlock != null && outgoingBlock.id !== currentBlock?.id;
   const previousBlock = isExiting ? outgoingBlock : null;
   const goToBlock = useCallback2(