@bendyline/squisq-react 2.11.11 → 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-HERX7GUP.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-3SKOLZUA.js";
+} from "./chunk-U2FIZWAL.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -2288,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";
 
@@ -2585,6 +2586,7 @@ function DocPlayerContent({
   coverSlidePlayback,
   coverVisible,
   theme,
+  motion: motionProp,
   surface,
   captionStyle = "standard",
   captionPosition,
@@ -2787,6 +2789,12 @@ function DocPlayerContent({
     }),
     [resolvedPipStyle]
   );
+  const hasAnchoredBlocks = useMemo5(
+    () => doc.blocks.some(
+      (block) => typeof block.sourceStartTime === "number"
+    ),
+    [doc.blocks]
+  );
   const {
     currentBlock,
     currentBlockIndex,
@@ -2803,6 +2811,7 @@ 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.
@@ -2810,13 +2819,21 @@ function DocPlayerContent({
     // 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",
@@ -2828,7 +2845,8 @@ function DocPlayerContent({
       layers
     };
   }, [
-    doc.startBlock,
+    doc,
+    motionProp,
     activeViewport,
     effectiveTheme,
     appearance.showCoverSlide,
@@ -2962,6 +2980,7 @@ function DocPlayerContent({
         if (selector && await selector(video, targetTime)) return;
         await seekVideoToFrame(video, targetTime);
       };
+      let seekedActiveAnimations = 0;
       (root.getAnimations?.({ subtree: true }) ?? []).forEach((anim) => {
         const target = anim.effect?.target;
         if (!target) return;
@@ -2979,6 +2998,8 @@ function DocPlayerContent({
           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 = [];
@@ -3014,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);
@@ -3556,7 +3579,7 @@ function DocPlayerContent({
             BlockRenderer,
             {
               block: previousBlock,
-              blockTime,
+              blockTime: Math.max(0, currentTime - previousBlock.startTime),
               basePath,
               isExiting: true,
               transition: currentBlock?.transition,

package/dist/{chunk-3SKOLZUA.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,
@@ -495,7 +496,8 @@ function useDocPlayback(script, currentTime, options = {}) {
     theme,
     onSeek,
     useAudioSegmentTiming = true,
-    deterministicTransitions = false
+    deterministicTransitions = false,
+    motion: motionOverride
   } = options;
   const blocks = useMemo3(() => {
     if (!script?.blocks) {
@@ -519,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]}`
@@ -536,6 +543,9 @@ function useDocPlayback(script, currentTime, options = {}) {
     script?.audio?.segments,
     script?.persistentLayers,
     script?.customTemplates,
+    script?.motion,
+    script?.frontmatter,
+    motionOverride,
     viewport,
     theme,
     useAudioSegmentTiming

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;