@bendyline/squisq-react 2.11.10 → 2.11.12

package/dist/{chunk-W6MKRWL6.js → chunk-WHVSQ42V.js}

@@ -239,8 +239,16 @@ function remapToKenBurns(anim) {
 }
 
 // src/layers/TextLayer.tsx
-import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  Fragment,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
+import { formatCountUp, wordRevealDelay } from "@bendyline/squisq/doc";
 import {
   parseHtmlToNodes,
   sanitizeHtmlNodes,
@@ -253,6 +261,16 @@ import {
   iconClass
 } from "@bendyline/squisq/icon-marker";
 
+// src/utils/defsId.ts
+function defsIdFor(reactId, layerId) {
+  const raw = `${reactId}-${layerId}`;
+  const safe = raw.replace(/[^A-Za-z0-9_-]/g, "_");
+  if (safe === raw.replace(/:/g, "_")) return safe.replace(/^_+/, "d");
+  let hash = 0;
+  for (let i = 0; i < raw.length; i++) hash = hash * 31 + raw.charCodeAt(i) >>> 0;
+  return `${safe.replace(/^_+/, "d")}-${hash.toString(36)}`;
+}
+
 // src/utils/fillStyle.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function borderDashArray(style, strokeWidth) {
@@ -351,7 +369,7 @@ function resolveShapeFilter(layerId, filter) {
 }
 
 // src/layers/TextLayer.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function TextLayer(props) {
   if (props.layer.content.html?.trim()) return /* @__PURE__ */ jsx3(RichTextLayer, { ...props });
   if (hasIconMarker(props.layer.content.text ?? "")) return /* @__PURE__ */ jsx3(IconTextLayer, { ...props });
@@ -401,37 +419,45 @@ function IconTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
     ...style.shadow ? { textShadow: "0 2px 3px rgba(0,0,0,0.7)" } : {},
     ...animStyle.style
   };
-  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
-    "foreignObject",
+  return /* @__PURE__ */ jsx3(
+    "g",
     {
-      x: boxX,
-      y: boxY,
-      width: boxWidth,
-      height: boxHeight,
-      style: { overflow: "visible" },
+      className: `block-layer block-layer--text ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
       children: /* @__PURE__ */ jsx3(
-        "div",
+        "foreignObject",
         {
-          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
-          "data-squisq-text-fit": "html",
-          "data-squisq-base-font-size": style.fontSize,
-          style: boxStyle,
+          x: boxX,
+          y: boxY,
+          width: boxWidth,
+          height: boxHeight,
+          style: { overflow: "visible" },
           children: /* @__PURE__ */ jsx3(
             "div",
             {
-              "data-squisq-text-content": "true",
-              style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
-              "aria-label": plain,
-              dangerouslySetInnerHTML: { __html: html }
+              ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+              "data-squisq-text-fit": "html",
+              "data-squisq-base-font-size": style.fontSize,
+              style: boxStyle,
+              children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  "data-squisq-text-content": "true",
+                  style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+                  "aria-label": plain,
+                  dangerouslySetInnerHTML: { __html: html }
+                }
+              )
             }
           )
         }
       )
     }
-  ) });
+  );
 }
 function PlainTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
-  const defsId = `${useId().replace(/:/g, "")}-${layer.id}`;
+  const defsId = defsIdFor(useId(), layer.id);
   const { content, position, animation } = layer;
   const { text, style } = content;
   const rawX = resolveValue(position.x, viewport.width);
@@ -447,7 +473,10 @@ function PlainTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
   const fitWidth = boxWidth ?? (textAnchor === "middle" ? Math.max(0, Math.min(x, viewport.width - x) * 2) : textAnchor === "end" ? Math.max(0, x) : Math.max(0, viewport.width - x));
   const fitHeight = boxHeight ?? (dominantBaseline === "middle" ? Math.max(0, Math.min(y, viewport.height - y) * 2) : dominantBaseline === "text-after-edge" ? Math.max(0, y) : Math.max(0, viewport.height - y));
   const animStyle = getAnimationStyle(animation, blockTime);
-  const rawLines = (text ?? "").split("\n");
+  const isCountUp = animation?.type === "countUp";
+  const isWordReveal = animation?.type === "wordReveal";
+  const displayText = isCountUp && animation ? formatCountUp(text ?? "", animation, blockTime) : text;
+  const rawLines = (displayText ?? "").split("\n");
   let lines = maxWidth ? rawLines.reduce(
     (acc, line) => acc.concat(wrapText(line, style.fontSize, maxWidth)),
     []
@@ -517,58 +546,78 @@ function PlainTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
     ...animStyle.style
   };
   const filterId = style.shadow ? `shadow-${defsId}` : void 0;
-  return /* @__PURE__ */ jsxs2("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
-    style.shadow && /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx3("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
-    /* @__PURE__ */ jsx3(
-      TextBox,
-      {
-        layerId: defsId,
-        style,
-        box: boxWidth != null && boxHeight != null ? {
-          x: rawX - anchorAxis(anchor, boxWidth, "x"),
-          y: rawY - anchorAxis(anchor, boxHeight, "y"),
-          width: boxWidth,
-          height: boxHeight
-        } : {
-          x: x - (style.padding || 16),
-          y: y - style.fontSize - (style.padding || 16),
-          width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2,
-          height: lines.length * lineHeightPx + (style.padding || 16) * 2
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "g",
-      {
-        "data-squisq-text-fit": "svg",
-        "data-squisq-fit-width": fitWidth,
-        "data-squisq-fit-height": fitHeight,
-        style: {
-          transform: `scale(${textScale})`,
-          transformOrigin: `${x}px ${y}px`,
-          transformBox: "view-box"
-        },
-        children: /* @__PURE__ */ jsx3(
-          "text",
+  let wordIndex = 0;
+  const renderLine = (line) => {
+    if (!isWordReveal || !animation || !line) return line || "\xA0";
+    const words = line.split(" ");
+    return words.map((word, w) => {
+      const delay = wordRevealDelay(animation, wordIndex++);
+      return /* @__PURE__ */ jsxs2(Fragment, { children: [
+        w > 0 ? " " : null,
+        /* @__PURE__ */ jsx3("tspan", { className: "anim-word", style: { "--anim-delay": `${delay}s` }, children: word })
+      ] }, w);
+    });
+  };
+  return /* @__PURE__ */ jsxs2(
+    "g",
+    {
+      className: `block-layer block-layer--text ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        style.shadow && /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx3("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
+        /* @__PURE__ */ jsx3(
+          TextBox,
+          {
+            layerId: defsId,
+            style,
+            box: boxWidth != null && boxHeight != null ? {
+              x: rawX - anchorAxis(anchor, boxWidth, "x"),
+              y: rawY - anchorAxis(anchor, boxHeight, "y"),
+              width: boxWidth,
+              height: boxHeight
+            } : {
+              x: x - (style.padding || 16),
+              y: y - style.fontSize - (style.padding || 16),
+              width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2,
+              height: lines.length * lineHeightPx + (style.padding || 16) * 2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "g",
           {
-            ref: textRef,
-            "data-squisq-text-content": "true",
-            x,
-            y,
-            textAnchor,
-            dominantBaseline,
-            style: textStyles,
-            filter: filterId ? `url(#${filterId})` : void 0,
-            transform: fitTransform,
-            children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? firstLineDy : lineHeightPx, children: [
-              line || "\xA0",
-              " "
-            ] }, i))
+            "data-squisq-text-fit": "svg",
+            "data-squisq-fit-width": fitWidth,
+            "data-squisq-fit-height": fitHeight,
+            style: {
+              transform: `scale(${textScale})`,
+              transformOrigin: `${x}px ${y}px`,
+              transformBox: "view-box"
+            },
+            children: /* @__PURE__ */ jsx3(
+              "text",
+              {
+                ref: textRef,
+                "data-squisq-text-content": "true",
+                x,
+                y,
+                textAnchor,
+                dominantBaseline,
+                style: textStyles,
+                filter: filterId ? `url(#${filterId})` : void 0,
+                transform: fitTransform,
+                children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? firstLineDy : lineHeightPx, children: [
+                  renderLine(line),
+                  " "
+                ] }, i))
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function RichTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
   const { content, position, animation } = layer;
@@ -618,48 +667,56 @@ function RichTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
     if (target?.closest?.("[data-squisq-table-scroll]")) event.stopPropagation();
   };
   const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .7em;padding-left:1.2em;list-style-position:${listStylePosition}}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} [data-squisq-table-scroll]{width:100%;max-height:20em;margin:.35em 0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.${cls} table{width:100%;min-width:48em;margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.76em;line-height:1.2}.${cls} th,.${cls} td{box-sizing:border-box;padding:.28em .45em;border:1px solid rgba(127,127,127,.55);border-color:color-mix(in srgb,currentColor 32%,transparent);vertical-align:top;white-space:normal;overflow-wrap:anywhere}.${cls} th{position:sticky;top:0;z-index:1;background:rgba(127,127,127,.16);background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600}.${cls} tbody tr:nth-child(even){background:rgba(127,127,127,.07);background:color-mix(in srgb,currentColor 5%,transparent)}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
-  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
-    "foreignObject",
+  return /* @__PURE__ */ jsx3(
+    "g",
     {
-      x: boxX,
-      y: boxY,
-      width: boxWidth,
-      height: boxHeight,
-      color: style.color,
-      style: { color: style.color },
-      children: /* @__PURE__ */ jsxs2(
-        "div",
+      className: `block-layer block-layer--text ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx3(
+        "foreignObject",
         {
-          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
-          "data-squisq-text-fit": "html",
-          "data-squisq-base-font-size": style.fontSize,
-          style: boxStyle,
-          onPointerDown: stopEmbeddedTableEvent,
-          onClick: stopEmbeddedTableEvent,
-          onWheel: stopEmbeddedTableEvent,
-          onKeyDown: stopEmbeddedTableEvent,
-          children: [
-            /* @__PURE__ */ jsx3("style", { children: scopedCss }),
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                "data-squisq-text-content": "true",
-                className: cls,
-                "aria-label": content.text,
-                style: {
-                  width: "100%",
-                  color: style.color,
-                  whiteSpace: "pre-wrap",
-                  wordBreak: "break-word"
-                },
-                dangerouslySetInnerHTML: { __html: safeHtml }
-              }
-            )
-          ]
+          x: boxX,
+          y: boxY,
+          width: boxWidth,
+          height: boxHeight,
+          color: style.color,
+          style: { color: style.color },
+          children: /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+              "data-squisq-text-fit": "html",
+              "data-squisq-base-font-size": style.fontSize,
+              style: boxStyle,
+              onPointerDown: stopEmbeddedTableEvent,
+              onClick: stopEmbeddedTableEvent,
+              onWheel: stopEmbeddedTableEvent,
+              onKeyDown: stopEmbeddedTableEvent,
+              children: [
+                /* @__PURE__ */ jsx3("style", { children: scopedCss }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    "data-squisq-text-content": "true",
+                    className: cls,
+                    "aria-label": content.text,
+                    style: {
+                      width: "100%",
+                      color: style.color,
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word"
+                    },
+                    dangerouslySetInnerHTML: { __html: safeHtml }
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
-  ) });
+  );
 }
 function cssId(id) {
   return id.replace(/[^a-zA-Z0-9_-]/g, "-");
@@ -674,7 +731,7 @@ function TextBox({
   if (!hasFill && !hasBorder) return null;
   const { fill, def } = resolveFill(layerId, style.background, style.backgroundGradient);
   const dash = borderDashArray(style.borderStyle, style.borderWidth);
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     def && /* @__PURE__ */ jsx3("defs", { children: def }),
     /* @__PURE__ */ jsx3(
       "rect",
@@ -773,7 +830,7 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var FULL_BLEED_OVERSCAN = 1;
 function ShapeLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
-  const defsId = `${useId2().replace(/:/g, "")}-${layer.id}`;
+  const defsId = defsIdFor(useId2(), layer.id);
   const rawX = resolveValue(position.x, viewport.width);
   const rawY = resolveValue(position.y, viewport.height);
   const width = position.width ? resolveValue(position.width, viewport.width) : 100;
@@ -913,7 +970,7 @@ function effectiveMarker(explicit, legacyArrow, end) {
 }
 function PathLayer({ layer, viewport, blockTime }) {
   const { content, animation, id } = layer;
-  const defsId = `${useId3().replace(/:/g, "")}-${id}`;
+  const defsId = defsIdFor(useId3(), id);
   const d = effectivePath(layer, viewport);
   const stroke = content.stroke ?? "#1e293b";
   const strokeWidth = content.strokeWidth ?? 2;
@@ -925,6 +982,9 @@ function PathLayer({ layer, viewport, blockTime }) {
   const legacyArrow = readLegacyArrow(content);
   const start = markerPath(effectiveMarker(content.startMarker, legacyArrow, "start"), "start");
   const end = markerPath(effectiveMarker(content.endMarker, legacyArrow, "end"), "end");
+  const markerStart = start ? `url(#${startId})` : void 0;
+  const markerEnd = end ? `url(#${endId})` : void 0;
+  const drawOn = animation?.type === "drawOn";
   return /* @__PURE__ */ jsxs4(
     "g",
     {
@@ -945,9 +1005,24 @@ function PathLayer({ layer, viewport, blockTime }) {
             strokeWidth,
             fill,
             fillOpacity: content.fillOpacity,
-            strokeDasharray: dash,
-            markerStart: start ? `url(#${startId})` : void 0,
-            markerEnd: end ? `url(#${endId})` : void 0
+            strokeDasharray: drawOn ? void 0 : dash,
+            pathLength: drawOn ? 1 : void 0,
+            "data-squisq-draw": drawOn ? "stroke" : void 0,
+            markerStart: drawOn ? void 0 : markerStart,
+            markerEnd: drawOn ? void 0 : markerEnd
+          }
+        ),
+        drawOn && (markerStart || markerEnd) && /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d,
+            stroke,
+            strokeWidth,
+            strokeOpacity: 0,
+            fill: "none",
+            "data-squisq-draw": "markers",
+            markerStart,
+            markerEnd
           }
         )
       ]
@@ -1185,8 +1260,11 @@ 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] = useState2(null);
-  const [isLoading, setIsLoading] = useState2(true);
+  const staticSrc = useMediaUrl(content.staticSrc ?? "", basePath);
+  const [mapImageUrl, setMapImageUrl] = useState2(
+    () => content.staticSrc ? staticSrc || null : null
+  );
+  const [isLoading, setIsLoading] = useState2(!content.staticSrc);
   const [error, setError] = useState2(null);
   const [blockedByPolicy, setBlockedByPolicy] = useState2(false);
   const x = resolveValue(position.x, viewport.width);
@@ -1196,7 +1274,6 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
   const offset = getAnchorOffset(position.anchor, width, height);
   const finalX = x + offset.x;
   const finalY = y + offset.y;
-  const staticSrc = useMediaUrl(content.staticSrc ?? "", basePath);
   const resourcePolicy = useResourcePolicy();
   useEffect(() => {
     let cancelled = false;

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject } from 'react';
-import { AudioTrack, ScheduledClip, Theme, Doc, Block, MediaProvider, SurfaceScheme } from '@bendyline/squisq/schemas';
+import { AudioTrack, ScheduledClip, Theme, MotionSpec, Doc, Block, MediaProvider, SurfaceScheme } from '@bendyline/squisq/schemas';
 import { a as AudioController } from '../AudioController-DwMsPe38.js';
 export { A as AudioActions, b as AudioState } from '../AudioController-DwMsPe38.js';
 import { ViewportConfig, ViewportOrientation } from '@bendyline/squisq/doc';
@@ -127,6 +127,19 @@ interface UseDocPlaybackOptions {
      * pacing rules.
      */
     useAudioSegmentTiming?: boolean;
+    /**
+     * Derive the outgoing (exiting) block from block order instead of from the
+     * block rendered last. Offline capture seeks frames out of order (resume,
+     * dedupe, sampling), so the crossfade partner must be a pure function of
+     * time. Live playback keeps the render-history path so swipes and manual
+     * jumps crossfade from what the viewer actually saw.
+     */
+    deterministicTransitions?: boolean;
+    /**
+     * Motion profile override. Omitted → the doc's own `motion` / frontmatter
+     * `squisq-motion`, then the theme's `renderStyle.motionProfile`, then `calm`.
+     */
+    motion?: MotionSpec | null;
 }
 declare function useDocPlayback(script: Doc | null, currentTime: number, options?: UseDocPlaybackOptions): PlaybackState & PlaybackActions;
 

package/dist/hooks/index.js

@@ -6,7 +6,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "../chunk-MVJQL2W2.js";
+} from "../chunk-U2FIZWAL.js";
 import {
   useAutoSurface
 } from "../chunk-TT6ENR6T.js";

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-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 { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-BCPc3Tv3.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-BCPc3Tv3.js';
+import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition, MotionSpec, Doc, ScheduledClip, MediaProvider } from '@bendyline/squisq/schemas';
 import { DashboardStyleId, ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
 import { C as CodeBlockCopyHandler } from './MarkdownRenderer-CC9dOc6b.js';
@@ -100,6 +100,23 @@ interface MountOptions {
      * auto-play.
      */
     renderMode?: boolean;
+    /**
+     * Viewport the player composes for, in CSS pixels. Render pages pass their
+     * export dimensions so portrait and custom sizes are laid out natively
+     * instead of letterboxed inside the landscape preset. Omit for live hosts
+     * (the player sizes to its element) and for dashboard mounts, which always
+     * fill the host box.
+     */
+    viewport?: {
+        width: number;
+        height: number;
+        name?: string;
+    };
+    /**
+     * Motion profile override (`calm` | `documentary` | `vibrant`, or a spec
+     * with overrides). Omitted → the doc's own setting, then the theme's.
+     */
+    motion?: MotionSpec | null;
     /**
      * Whether to render slide transitions and per-layer animations (default: true).
      * Timed media continues to play when disabled.

package/dist/index.js

@@ -15,10 +15,10 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-4KBT2CXQ.js";
+} from "./chunk-QWUQNB4E.js";
 import {
   PaginatedDocView
-} from "./chunk-X4I6Y3OP.js";
+} from "./chunk-7T26IKW2.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -26,7 +26,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-CLP3VWJ2.js";
+} from "./chunk-P3FJ3YKS.js";
 import {
   ImageLayer,
   MapLayer,
@@ -39,7 +39,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-W6MKRWL6.js";
+} from "./chunk-WHVSQ42V.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";
@@ -48,7 +48,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-MVJQL2W2.js";
+} from "./chunk-U2FIZWAL.js";
 import {
   JsonView,
   createJsonFormFenceRenderer

package/dist/layers/index.js

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

package/dist/page/index.js

@@ -1,14 +1,14 @@
 import {
   PaginatedDocView
-} from "../chunk-X4I6Y3OP.js";
+} from "../chunk-7T26IKW2.js";
 import {
   CanvasSection,
   LinearDocView,
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-CLP3VWJ2.js";
-import "../chunk-W6MKRWL6.js";
+} from "../chunk-P3FJ3YKS.js";
+import "../chunk-WHVSQ42V.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-6PUMLLJH.js";
 import "../chunk-WLUZTUNZ.js";

package/dist/player/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, 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, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, G as SlideNavActions, H as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, J as formatTime } from '../player-5j10MhBq.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, 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, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, G as SlideNavActions, H as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, J as formatTime } from '../player-BCPc3Tv3.js';
 export { a as CodeBlockCopyContext, C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';

package/dist/player/index.js

@@ -12,12 +12,12 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-4KBT2CXQ.js";
+} from "../chunk-QWUQNB4E.js";
 import {
   BlockRenderer
-} from "../chunk-CLP3VWJ2.js";
-import "../chunk-W6MKRWL6.js";
-import "../chunk-MVJQL2W2.js";
+} from "../chunk-P3FJ3YKS.js";
+import "../chunk-WHVSQ42V.js";
+import "../chunk-U2FIZWAL.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,

package/dist/{player-5j10MhBq.d.ts → player-BCPc3Tv3.d.ts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Block, VideoPresentation as VideoPresentation$1, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, MediaScheduleOptions, Theme, SurfaceScheme, Transition, CaptionTrack, ViewportConfig as ViewportConfig$1, CustomTemplateDefinition, ScheduledClip } from '@bendyline/squisq/schemas';
+import { Block, VideoPresentation as VideoPresentation$1, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, MediaScheduleOptions, Theme, MotionSpec, SurfaceScheme, Transition, CaptionTrack, ViewportConfig as ViewportConfig$1, CustomTemplateDefinition, ScheduledClip } from '@bendyline/squisq/schemas';
 import { ViewportConfig, DashboardStyleId, CoverSlideTemplate, CoverSlidePlayback, FlashcardFace, FlashcardSourceMode } from '@bendyline/squisq/doc';
 import { FenceRendererMap } from '@bendyline/squisq/fence';
 import { a as AudioController } from './AudioController-DwMsPe38.js';
@@ -185,6 +185,11 @@ interface SquisqRenderAPI {
     /** Timeline time most recently committed to the player DOM. */
     getRenderedTime: () => number;
     getDuration: () => number;
+    /** Viewport (CSS px) the blocks were composed for; capture hosts verify it matches their export size. */
+    getViewport: () => {
+        width: number;
+        height: number;
+    };
     getBlocks: () => RenderBlockInfo[];
     getAudioSegments: () => RenderAudioSegmentInfo[];
     getCaptions: () => RenderCaptionInfo[];
@@ -255,6 +260,12 @@ interface DocPlayerProps {
     onBlockMarkers?: (markers: BlockMarker[]) => void;
     forceViewport?: ViewportConfig;
     theme?: Theme;
+    /**
+     * Motion profile override (`calm` | `documentary` | `vibrant`, or a spec
+     * with overrides). Omitted → the doc's `motion` / frontmatter
+     * `squisq-motion`, then the theme's `renderStyle.motionProfile`, then `calm`.
+     */
+    motion?: MotionSpec | null;
     surface?: SurfaceScheme | 'auto';
     /** Video, slideshow, page, dashboard, or flashcards rendition. */
     displayMode?: DisplayMode;