@bendyline/squisq-react 1.4.2 → 2.0.0

package/src/__tests__/useDocPlayback.transition.test.ts

@@ -10,8 +10,8 @@
  * only set it after a `setTimeout`).
  */
 
-import { describe, it, expect } from 'vitest';
-import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
 import { VIEWPORT_PRESETS } from '@bendyline/squisq/doc';
 import type { Doc, Block } from '@bendyline/squisq/schemas';
 import { useDocPlayback } from '../hooks/useDocPlayback';
@@ -37,7 +37,7 @@ const doc: Doc = {
 describe('useDocPlayback — synchronous block transitions', () => {
   it('exposes the entering block + outgoing previousBlock on the same render (no effect flush)', () => {
     const { result, rerender } = renderHook(
-      ({ t }: { t: number }) => useDocPlayback(doc, t, VIEWPORT_PRESETS.landscape),
+      ({ t }: { t: number }) => useDocPlayback(doc, t, { viewport: VIEWPORT_PRESETS.landscape }),
       { initialProps: { t: 0 } },
     );
 
@@ -61,10 +61,53 @@ describe('useDocPlayback — synchronous block transitions', () => {
 
   it('isEntering is a pure function of blockTime vs the transition duration', () => {
     const enteringAt = (t: number) =>
-      renderHook(() => useDocPlayback(doc, t, VIEWPORT_PRESETS.landscape)).result.current
-        .isEntering;
+      renderHook(() => useDocPlayback(doc, t, { viewport: VIEWPORT_PRESETS.landscape })).result
+        .current.isEntering;
     expect(enteringAt(5.0)).toBe(true); // blockTime 0.0 < 0.5
     expect(enteringAt(5.4)).toBe(true); // blockTime 0.4 < 0.5
     expect(enteringAt(5.6)).toBe(false); // blockTime 0.6 >= 0.5
   });
+
+  it('can enter a swipe destination without restoring the outgoing block', () => {
+    const { result, rerender } = renderHook(
+      ({ t }: { t: number }) => useDocPlayback(doc, t, { viewport: VIEWPORT_PRESETS.landscape }),
+      { initialProps: { t: 0 } },
+    );
+
+    act(() => result.current.suppressOutgoingForNextBlock('b'));
+    rerender({ t: 5 });
+
+    // The destination still gets its own entrance animation, but the slide
+    // already carried away by the swipe is not mounted again as context.
+    expect(result.current.isEntering).toBe(true);
+    expect(result.current.isExiting).toBe(false);
+    expect(result.current.previousBlock).toBeNull();
+  });
+
+  it('clears stale outgoing context when a cover reveals the already-active block', () => {
+    const { result, rerender } = renderHook(
+      ({ t }: { t: number }) => useDocPlayback(doc, t, { viewport: VIEWPORT_PRESETS.landscape }),
+      { initialProps: { t: 0 } },
+    );
+    rerender({ t: 5 });
+    expect(result.current.previousBlock?.id).toBe('a');
+
+    act(() => result.current.suppressOutgoingForNextBlock('b'));
+    rerender({ t: 5 });
+
+    expect(result.current.isEntering).toBe(true);
+    expect(result.current.isExiting).toBe(false);
+    expect(result.current.previousBlock).toBeNull();
+  });
+
+  it('navigation actions seek to the target block', () => {
+    const seek = vi.fn();
+    const { result } = renderHook(() =>
+      useDocPlayback(doc, 0, { viewport: VIEWPORT_PRESETS.landscape, onSeek: seek }),
+    );
+    act(() => result.current.nextBlock());
+    expect(seek).toHaveBeenCalledWith(5);
+    act(() => result.current.goToBlock(0));
+    expect(seek).toHaveBeenLastCalledWith(0);
+  });
 });

package/src/__tests__/useViewportOrientation.test.ts

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/doc';
+import { afterEach, describe, expect, it } from 'vitest';
+import { useViewportOrientation } from '../hooks/useViewportOrientation';
+
+const originalWidth = window.innerWidth;
+const originalHeight = window.innerHeight;
+
+afterEach(() => {
+  Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalWidth });
+  Object.defineProperty(window, 'innerHeight', { configurable: true, value: originalHeight });
+});
+
+describe('useViewportOrientation', () => {
+  it('uses the square preset for near-square viewports', () => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1000 });
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 1000 });
+    const { result } = renderHook(() => useViewportOrientation());
+    expect(result.current.orientation).toBe('square');
+    expect(result.current.viewport).toBe(VIEWPORT_PRESETS.square);
+  });
+});

package/src/hooks/MediaContext.tsx

@@ -73,9 +73,18 @@ export function useMediaUrl(relativePath: string, basePath: string): string {
     }
 
     let cancelled = false;
-    provider!.resolveUrl(safePath).then((resolved) => {
-      if (!cancelled) setUrl(resolved);
-    });
+    // Never show the prior asset while a new provider/path is resolving.
+    setUrl(fallback);
+    provider!.resolveUrl(safePath).then(
+      (resolved) => {
+        if (!cancelled) setUrl(resolved);
+      },
+      () => {
+        // Resolution failures should be non-fatal and must not become
+        // unhandled promise rejections in rendering surfaces.
+        if (!cancelled) setUrl(fallback);
+      },
+    );
 
     return () => {
       cancelled = true;

package/src/hooks/useAudioSync.ts

@@ -17,10 +17,19 @@ import type { RefObject } from 'react';
 import type { AudioTrack } from '@bendyline/squisq/schemas';
 import type { AudioController } from './AudioController';
 
+function resolveAudioUrl(src: string, basePath: string): string {
+  // Preserve absolute/protocol-relative/data/blob URLs. Prefixing an absolute
+  // URL with the common default base path (`.`) produces `./https://...`.
+  if (!src || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src)) return src;
+  if (!basePath) return src;
+  return `${basePath.replace(/\/$/, '')}/${src.replace(/^\//, '')}`;
+}
+
 export function useAudioSync(
   audioRef: RefObject<HTMLAudioElement>,
   audioTrack: AudioTrack | undefined,
   basePath: string = '',
+  enabled: boolean = true,
 ): AudioController {
   const [currentTime, setCurrentTime] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -39,13 +48,27 @@ export function useAudioSync(
   // Preloaded audio blob URLs (for seeking without range request support)
   const blobUrls = useRef<Map<string, string>>(new Map());
   const loadingPromises = useRef<Map<string, Promise<string>>>(new Map());
+  const abortControllers = useRef<Set<AbortController>>(new Set());
+  const loadGeneration = useRef(0);
 
   // Fallback timer: when audio.play() is blocked (e.g., autoplay policy),
   // advance currentTime synthetically so blocks still progress without audio.
   const fallbackMode = useRef(false);
 
   useEffect(() => {
-    if (!audioTrack?.segments) {
+    loadGeneration.current += 1;
+    pendingSeekTime.current = null;
+    shouldPlayAfterLoad.current = false;
+    fallbackMode.current = false;
+    setCurrentTime(0);
+    setCurrentSegment(0);
+    setIsPlaying(false);
+    setIsEnded(false);
+    setIsAudioReady(false);
+
+    if (!enabled || !audioTrack?.segments) {
+      segmentStarts.current = [];
+      setTotalDuration(0);
       return;
     }
 
@@ -56,12 +79,12 @@ export function useAudioSync(
       return start;
     });
     setTotalDuration(time);
-  }, [audioTrack]);
+  }, [audioTrack, enabled]);
 
   // Preload audio file as blob (enables seeking without range request support)
   const preloadAudio = useCallback(
     async (src: string): Promise<string> => {
-      const audioUrl = basePath ? `${basePath}/${src}` : src;
+      const audioUrl = resolveAudioUrl(src, basePath);
 
       // Return cached blob URL if available
       if (blobUrls.current.has(src)) {
@@ -74,18 +97,26 @@ export function useAudioSync(
       }
 
       // Start loading
+      const controller = new AbortController();
+      abortControllers.current.add(controller);
+      const generation = loadGeneration.current;
       const loadPromise = (async () => {
         try {
-          const response = await fetch(audioUrl);
+          const response = await fetch(audioUrl, { signal: controller.signal });
           if (!response.ok) throw new Error(`HTTP ${response.status}`);
           const blob = await response.blob();
           const blobUrl = URL.createObjectURL(blob);
+          if (controller.signal.aborted || generation !== loadGeneration.current) {
+            URL.revokeObjectURL(blobUrl);
+            return audioUrl;
+          }
           blobUrls.current.set(src, blobUrl);
           return blobUrl;
         } catch {
           // Fall back to direct URL if blob loading fails
           return audioUrl;
         } finally {
+          abortControllers.current.delete(controller);
           loadingPromises.current.delete(src);
         }
       })();
@@ -98,7 +129,7 @@ export function useAudioSync(
 
   // Preload all audio segments on mount
   useEffect(() => {
-    if (!audioTrack?.segments) return;
+    if (!enabled || !audioTrack?.segments) return;
 
     // Preload all segments in parallel
     audioTrack.segments.forEach((segment) => {
@@ -107,16 +138,23 @@ export function useAudioSync(
 
     // Cleanup blob URLs on unmount
     const currentBlobUrls = blobUrls.current;
+    const currentAbortControllers = abortControllers.current;
+    const currentLoadingPromises = loadingPromises.current;
     return () => {
+      loadGeneration.current += 1;
+      currentAbortControllers.forEach((controller) => controller.abort());
+      currentAbortControllers.clear();
+      currentLoadingPromises.clear();
       currentBlobUrls.forEach((url) => {
         URL.revokeObjectURL(url);
       });
       currentBlobUrls.clear();
     };
-  }, [audioTrack, preloadAudio]);
+  }, [audioTrack, preloadAudio, enabled]);
 
   // Handle audio time updates
   useEffect(() => {
+    if (!enabled) return;
     const audio = audioRef.current;
     if (!audio) return;
 
@@ -176,10 +214,11 @@ export function useAudioSync(
       audio.removeEventListener('ended', handleEnded);
       audio.removeEventListener('error', handleError);
     };
-  }, [audioRef, currentSegment, audioTrack]);
+  }, [audioRef, currentSegment, audioTrack, enabled]);
 
   // Load new segment when currentSegment changes
   useEffect(() => {
+    if (!enabled) return;
     const audio = audioRef.current;
     if (!audio || !audioTrack?.segments) return;
 
@@ -209,15 +248,20 @@ export function useAudioSync(
     const isSameSource =
       currentSrc && (currentSrc === cachedBlobUrl || currentSrc.endsWith(segment.src));
 
+    let cancelled = false;
+    let handleCanPlay: (() => void) | null = null;
+
     if (!isSameSource) {
       // Need to load new source - use preloaded blob URL
       const loadAndPlay = async () => {
         const blobUrl = await preloadAudio(segment.src);
+        if (cancelled) return;
 
-        const handleCanPlay = () => {
+        handleCanPlay = () => {
+          if (cancelled) return;
           setIsAudioReady(true);
           applyPendingSeek();
-          audio.removeEventListener('canplay', handleCanPlay);
+          if (handleCanPlay) audio.removeEventListener('canplay', handleCanPlay);
         };
 
         audio.addEventListener('canplay', handleCanPlay);
@@ -228,18 +272,23 @@ export function useAudioSync(
         // Check after a microtask to see if it's ready
         await Promise.resolve();
         if (audio.readyState >= 3) {
-          audio.removeEventListener('canplay', handleCanPlay);
+          if (handleCanPlay) audio.removeEventListener('canplay', handleCanPlay);
           setIsAudioReady(true);
           applyPendingSeek();
         }
       };
 
-      loadAndPlay();
+      void loadAndPlay();
     } else {
       // Same source - apply seek directly
       applyPendingSeek();
     }
-  }, [audioRef, currentSegment, audioTrack, preloadAudio]);
+
+    return () => {
+      cancelled = true;
+      if (handleCanPlay) audio.removeEventListener('canplay', handleCanPlay);
+    };
+  }, [audioRef, currentSegment, audioTrack, preloadAudio, enabled]);
 
   const play = useCallback(() => {
     const audio = audioRef.current;

package/src/hooks/useDocPlayback.ts

@@ -58,18 +58,28 @@ interface PlaybackActions {
   prevBlock: () => void;
   /** Go to specific block by index */
   goToBlock: (index: number) => void;
+  /**
+   * Let the identified block enter without remounting the outgoing block.
+   * Used when another interaction (such as a swipe) already removed it.
+   */
+  suppressOutgoingForNextBlock: (blockId: string) => void;
+}
+
+export interface UseDocPlaybackOptions {
+  /** Target viewport used to materialize template blocks. */
+  viewport?: ViewportConfig;
+  /** Active theme used for materialization and transition defaults. */
+  theme?: Theme;
+  /** Host seek callback used by block navigation actions. */
+  onSeek?: (time: number) => void;
 }
 
 export function useDocPlayback(
   script: Doc | null,
   currentTime: number,
-  viewport: ViewportConfig = VIEWPORT_PRESETS.landscape,
-  renderMode: boolean = false,
-  theme?: Theme,
+  options: UseDocPlaybackOptions = {},
 ): PlaybackState & PlaybackActions {
-  // `renderMode` is retained for API/signature compatibility; block transitions
-  // are now computed identically for real-time and render (export) modes.
-  void renderMode;
+  const { viewport = VIEWPORT_PRESETS.landscape, theme, onSeek } = options;
   // Expand any template blocks into full blocks
   const blocks = useMemo(() => {
     if (!script?.blocks) {
@@ -174,8 +184,28 @@ export function useDocPlayback(
   const outgoingBlockRef = useRef<Block | null>(null);
   const activeBlockIdRef = useRef<string | null>(null);
   const lastRenderedBlockRef = useRef<Block | null>(null);
+  const suppressOutgoingTargetRef = useRef<string | null>(null);
+  const suppressOutgoingForNextBlock = useCallback((blockId: string) => {
+    // The managed cover is outside the document timeline, so revealing block
+    // one can target the block that is already active underneath it. Clear any
+    // stale outgoing context immediately; the cover visibility update will
+    // provide the render that observes this ref change.
+    if (activeBlockIdRef.current === blockId) {
+      outgoingBlockRef.current = null;
+      suppressOutgoingTargetRef.current = null;
+      return;
+    }
+    suppressOutgoingTargetRef.current = blockId;
+  }, []);
   if (currentBlock && currentBlock.id !== activeBlockIdRef.current) {
-    outgoingBlockRef.current = lastRenderedBlockRef.current;
+    // A swipe has already carried the outgoing slide fully off-screen. Keep
+    // the incoming block's own transition, but do not re-mount the old block
+    // as transition context when the armed destination becomes active.
+    const suppressOutgoing = suppressOutgoingTargetRef.current === currentBlock.id;
+    outgoingBlockRef.current = suppressOutgoing ? null : lastRenderedBlockRef.current;
+    // Consume on the first real block change even if the destination did not
+    // match (for example, a host performed a different seek in between).
+    suppressOutgoingTargetRef.current = null;
     activeBlockIdRef.current = currentBlock.id;
   }
   lastRenderedBlockRef.current = currentBlock;
@@ -194,15 +224,12 @@ export function useDocPlayback(
   const goToBlock = useCallback(
     (index: number) => {
       if (!script || index < 0 || index >= blocks.length) return;
-      // This would need to be coordinated with seekTo from audio sync
-      // For now, just return the target block's start time
       const targetBlock = blocks[index];
       if (targetBlock) {
-        // Caller should use this time with audio seekTo
-        return targetBlock.startTime;
+        onSeek?.(targetBlock.startTime);
       }
     },
-    [script, blocks],
+    [script, blocks, onSeek],
   );
 
   const nextBlock = useCallback(() => {
@@ -229,6 +256,7 @@ export function useDocPlayback(
     nextBlock,
     prevBlock,
     goToBlock,
+    suppressOutgoingForNextBlock,
     /** Expanded blocks (templates converted to full blocks with layers) */
     blocks,
   };

package/src/hooks/useViewportOrientation.ts

@@ -36,15 +36,13 @@ function getOrientationFromWindow(width: number, height: number): ViewportOrient
   // Use thresholds to determine orientation
   // - Ratio > 1.2 = landscape (wider than tall)
   // - Ratio < 0.83 (1/1.2) = portrait (taller than wide)
-  // - Otherwise = square-ish, use landscape for better readability
+  // - Otherwise = square-ish
   if (ratio > 1.2) {
     return 'landscape';
   } else if (ratio < 0.83) {
     return 'portrait';
   } else {
-    // Near-square viewports: use landscape for better text readability
-    // Could also use 'square' preset if available and desired
-    return 'landscape';
+    return 'square';
   }
 }
 

package/src/index.ts

@@ -1,6 +1,8 @@
 // Main components
 export { DocPlayer } from './DocPlayer.js';
-export { BlockRenderer, VIEWPORT } from './BlockRenderer.js';
+export type { DocPlayerProps } from './DocPlayer.js';
+export type { MountOptions, SquisqPlayerHandle } from './standalone-entry.js';
+export { BlockRenderer } from './BlockRenderer.js';
 export { CaptionOverlay } from './CaptionOverlay.js';
 export { SocialCaptionOverlay } from './SocialCaptionOverlay.js';
 export { DocControlsOverlay } from './DocControlsOverlay.js';
@@ -24,6 +26,7 @@ export { ShapeLayer } from './layers/ShapeLayer.js';
 export { PathLayer } from './layers/PathLayer.js';
 export { VideoLayer } from './layers/VideoLayer.js';
 export { TableLayer } from './layers/TableLayer.js';
+export { TreeLayer } from './layers/TreeLayer.js';
 export { MapLayer } from './layers/MapLayer.js';
 
 // Timed media clips (block.media + doc.documentMedia playback)
@@ -35,6 +38,7 @@ export { useAudioSync } from './hooks/useAudioSync.js';
 export { useMediaSchedule } from './hooks/useMediaSchedule.js';
 export type { MediaScheduleController } from './hooks/useMediaSchedule.js';
 export { useDocPlayback } from './hooks/useDocPlayback.js';
+export type { UseDocPlaybackOptions } from './hooks/useDocPlayback.js';
 export { useViewportOrientation } from './hooks/useViewportOrientation.js';
 export { MediaContext, useMediaProvider, useMediaUrl } from './hooks/MediaContext.js';
 export { useAutoSurface } from './hooks/useAutoSurface.js';
@@ -51,7 +55,6 @@ export type {
   CaptionMode,
   SlideNavActions,
   SquisqRenderAPI,
-  SquisqWindow,
   RenderBlockInfo,
   RenderAudioSegmentInfo,
   RenderCaptionInfo,

package/src/layers/MapLayer.tsx

@@ -12,7 +12,7 @@
  * Playwright screenshot contexts.
  */
 
-import { useState, useEffect } from 'react';
+import { useId, useState, useEffect } from 'react';
 import type { MapLayer as MapLayerType } from '@bendyline/squisq/schemas';
 import { getAnimationStyle } from '../utils/animationUtils';
 import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
@@ -30,6 +30,7 @@ interface MapLayerProps {
 
 export function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps) {
   const { content, position, animation } = layer;
+  const clipId = `map-clip-${useId().replace(/:/g, '')}-${layer.id}`;
   const [mapImageUrl, setMapImageUrl] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -89,13 +90,13 @@ export function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps
     return () => {
       cancelled = true;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- content properties are destructured below; center/markers/showAttribution are stable per-render
   }, [
-    content.center.lat,
-    content.center.lng,
+    content.center,
     content.zoom,
     content.style,
     content.staticSrc,
+    content.markers,
+    content.showAttribution,
     width,
     height,
     basePath,
@@ -160,13 +161,13 @@ export function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps
     >
       {/* Clip path for overflow handling */}
       <defs>
-        <clipPath id={`clip-${layer.id}`}>
+        <clipPath id={clipId}>
           <rect x={finalX} y={finalY} width={width} height={height} />
         </clipPath>
       </defs>
 
       {/* Map image */}
-      <g clipPath={`url(#clip-${layer.id})`}>
+      <g clipPath={`url(#${clipId})`}>
         <image
           href={mapImageUrl}
           x={finalX}

package/src/layers/PathLayer.tsx

@@ -17,11 +17,11 @@
  * rect/circle/line `ShapeLayer` behaves — rather than pinned to a baked
  * absolute path.
  *
- * End markers are configured via `startMarker`/`endMarker` (with the legacy
- * `arrow` flag mapping to a filled triangle). Marker geometry comes from
- * `markerPath` in core so the SSR renderer and the editor agree.
+ * End markers are configured via `startMarker`/`endMarker`. Marker geometry
+ * comes from `markerPath` in core so the SSR renderer and the editor agree.
  */
 
+import { useId } from 'react';
 import type { PathLayer as PathLayerType, MarkerStyle } from '@bendyline/squisq/schemas';
 import { markerPath, shapePath } from '@bendyline/squisq/doc';
 import { getAnimationStyle } from '../utils/animationUtils';
@@ -54,33 +54,42 @@ function effectivePath(layer: PathLayerType, viewport: { width: number; height:
   return derived ?? content.d;
 }
 
-/** Resolve the effective marker for an endpoint (explicit field, else `arrow`). */
+type LegacyArrow = 'none' | 'end' | 'start' | 'both';
+
+/** Tolerant-reader support for documents authored before endpoint markers. */
+function readLegacyArrow(content: PathLayerType['content']): LegacyArrow | undefined {
+  return (content as PathLayerType['content'] & { arrow?: LegacyArrow }).arrow;
+}
+
+/** Resolve the effective marker for an endpoint. */
 function effectiveMarker(
   explicit: MarkerStyle | undefined,
-  arrow: PathLayerType['content']['arrow'],
+  legacyArrow: LegacyArrow | undefined,
   end: 'start' | 'end',
 ): MarkerStyle {
   if (explicit) return explicit;
-  const wants = arrow === 'both' || arrow === end;
+  const wants = legacyArrow === 'both' || legacyArrow === end;
   return wants ? 'arrow' : 'none';
 }
 
 export function PathLayer({ layer, viewport, blockTime }: PathLayerProps) {
   const { content, animation, id } = layer;
+  const defsId = `${useId().replace(/:/g, '')}-${id}`;
   const d = effectivePath(layer, viewport);
   const stroke = content.stroke ?? '#1e293b';
   const strokeWidth = content.strokeWidth ?? 2;
-  const { fill, def: fillDef } = resolveFill(id, content.fill ?? 'none', content.gradient);
+  const { fill, def: fillDef } = resolveFill(defsId, content.fill ?? 'none', content.gradient);
   // `borderStyle` (named shapes) takes precedence over a raw `dasharray`.
   const dash = content.borderStyle
     ? borderDashArray(content.borderStyle, strokeWidth)
     : content.dasharray;
   const animStyle = getAnimationStyle(animation, blockTime);
 
-  const startId = `marker-start-${id}`;
-  const endId = `marker-end-${id}`;
-  const start = markerPath(effectiveMarker(content.startMarker, content.arrow, 'start'), 'start');
-  const end = markerPath(effectiveMarker(content.endMarker, content.arrow, 'end'), 'end');
+  const startId = `marker-start-${defsId}`;
+  const endId = `marker-end-${defsId}`;
+  const legacyArrow = readLegacyArrow(content);
+  const start = markerPath(effectiveMarker(content.startMarker, legacyArrow, 'start'), 'start');
+  const end = markerPath(effectiveMarker(content.endMarker, legacyArrow, 'end'), 'end');
 
   return (
     <g

package/src/layers/ShapeLayer.tsx

@@ -5,6 +5,7 @@
  * Useful for visual accents, dividers, and background elements.
  */
 
+import { useId } from 'react';
 import type { ShapeLayer as ShapeLayerType } from '@bendyline/squisq/schemas';
 import { getAnimationStyle } from '../utils/animationUtils';
 import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
@@ -20,6 +21,7 @@ interface ShapeLayerProps {
 
 export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
   const { content, position, animation } = layer;
+  const defsId = `${useId().replace(/:/g, '')}-${layer.id}`;
 
   // Resolve position values to pixels
   const rawX = resolveValue(position.x, viewport.width);
@@ -65,12 +67,12 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
   }
 
   const { fill: fillValue, def: fillDef } = resolveFill(
-    layer.id,
+    defsId,
     fill,
     content.gradient,
     content.pattern,
   );
-  const { filterAttr, def: filterDef } = resolveShapeFilter(layer.id, content.filter);
+  const { filterAttr, def: filterDef } = resolveShapeFilter(defsId, content.filter);
   const dash = borderDashArray(content.borderStyle, content.strokeWidth);
 
   // Common style props for native SVG shapes. `line` is stroke-only.

package/src/layers/TextLayer.tsx

@@ -16,7 +16,7 @@
  *    PDF bypasses SVG) and already used by Video/Table layers.
  */
 
-import { useMemo, type CSSProperties } from 'react';
+import { useId, useMemo, type CSSProperties } from 'react';
 import type { TextLayer as TextLayerType } from '@bendyline/squisq/schemas';
 import { DEFAULT_DOC_FONT } from '@bendyline/squisq/schemas';
 import {
@@ -165,6 +165,7 @@ function IconTextLayer({ layer, viewport, blockTime }: TextLayerProps) {
 }
 
 function PlainTextLayer({ layer, viewport, blockTime }: TextLayerProps) {
+  const defsId = `${useId().replace(/:/g, '')}-${layer.id}`;
   const { content, position, animation } = layer;
   const { text, style } = content;
 
@@ -225,7 +226,7 @@ function PlainTextLayer({ layer, viewport, blockTime }: TextLayerProps) {
   };
 
   // Add shadow filter if requested
-  const filterId = style.shadow ? `shadow-${layer.id}` : undefined;
+  const filterId = style.shadow ? `shadow-${defsId}` : undefined;
 
   return (
     <g className={`block-layer block-layer--text ${animStyle.className}`} data-layer-id={layer.id}>
@@ -244,7 +245,7 @@ function PlainTextLayer({ layer, viewport, blockTime }: TextLayerProps) {
           rectangle. Without a box we fall back to a snug rect hugging the
           text (legacy behavior for point-anchored text). */}
       <TextBox
-        layerId={layer.id}
+        layerId={defsId}
         style={style}
         box={
           boxWidth != null && boxHeight != null