@bendyline/squisq-react 1.4.2 → 2.0.1

package/dist/styles/index.css

@@ -135,6 +135,22 @@
     transform: translateX(0);
   }
 }
+@keyframes portraitCoverPanRight {
+  from {
+    object-position: left center;
+  }
+  to {
+    object-position: right center;
+  }
+}
+@keyframes portraitCoverPanLeft {
+  from {
+    object-position: right center;
+  }
+  to {
+    object-position: left center;
+  }
+}
 @keyframes slideInLeft {
   from {
     transform: translateX(-100%);
@@ -1937,6 +1953,14 @@
 .anim-panRight {
   animation: panRight var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
 }
+.squisq-image--portrait-pan-right {
+  animation: portraitCoverPanRight var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  will-change: object-position;
+}
+.squisq-image--portrait-pan-left {
+  animation: portraitCoverPanLeft var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  will-change: object-position;
+}
 .anim-typewriter {
   animation: typewriter var(--anim-duration, 2s) var(--anim-easing, steps(40, end)) var(--anim-delay, 0s) forwards;
 }
@@ -2074,6 +2098,10 @@
   .anim-slowZoom-out,
   .anim-slowZoom-panLeft,
   .anim-slowZoom-panRight,
+  .anim-panLeft,
+  .anim-panRight,
+  .squisq-image--portrait-pan-left,
+  .squisq-image--portrait-pan-right,
   .anim-drift {
     animation: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-react",
-  "version": "1.4.2",
+  "version": "2.0.1",
   "description": "React component library for doc playback, block rendering, and media layers",
   "license": "MIT",
   "author": "Bendyline",
@@ -53,7 +53,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "1.5.2"
+    "@bendyline/squisq": "2.0.1"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/BlockRenderer.tsx

@@ -6,6 +6,7 @@
  * Handles positioning, animations, and transitions.
  */
 
+import { useId } from 'react';
 import type { Block, Layer, Transition } from '@bendyline/squisq/schemas';
 import { resolveTransitionDuration } from '@bendyline/squisq/schemas';
 import { ImageLayer } from './layers/ImageLayer';
@@ -15,11 +16,11 @@ import { PathLayer } from './layers/PathLayer';
 import { MapLayer } from './layers/MapLayer';
 import { VideoLayer } from './layers/VideoLayer';
 import { TableLayer } from './layers/TableLayer';
+import { TreeLayer } from './layers/TreeLayer';
 import { getTransitionClass } from './utils/animationUtils';
 
-/** Default viewport dimensions (1080p landscape) - for backwards compatibility */
-// eslint-disable-next-line react-refresh/only-export-components
-export const VIEWPORT = {
+/** Default viewport dimensions (1080p landscape). */
+const DEFAULT_VIEWPORT = {
   width: 1920,
   height: 1080,
 };
@@ -47,6 +48,12 @@ interface BlockRendererProps {
   viewport?: ViewportDimensions;
   /** Whether the doc is currently playing (controls video playback) */
   isPlaying?: boolean;
+  /**
+   * Whether to render block transitions and layer animations (default: true).
+   * Disabling this only removes authored/render-style motion; timed video
+   * layers continue to advance normally.
+   */
+  animationsEnabled?: boolean;
 }
 
 export function BlockRenderer({
@@ -56,13 +63,14 @@ export function BlockRenderer({
   isEntering = false,
   isExiting = false,
   transition,
-  viewport = VIEWPORT,
+  viewport = DEFAULT_VIEWPORT,
   isPlaying,
+  animationsEnabled = true,
 }: BlockRendererProps) {
   // Build transition class and inline style for dynamic duration
   let transitionClass = '';
   const transitionStyle: Record<string, string> = {};
-  const activeTransition = transition ?? block.transition;
+  const activeTransition = animationsEnabled ? (transition ?? block.transition) : undefined;
   if (activeTransition && isEntering) {
     transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
     transitionStyle['--transition-duration'] = `${resolveTransitionDuration(activeTransition)}s`;
@@ -71,8 +79,10 @@ export function BlockRenderer({
     transitionStyle['--transition-duration'] = `${resolveTransitionDuration(activeTransition)}s`;
   }
 
-  // Unique clip path ID per block to avoid conflicts when multiple blocks render simultaneously
-  const clipId = `vb-clip-${block.id}`;
+  // React's instance id keeps SVG fragment references local even when the
+  // same block is rendered in a thumbnail, preview, and player at once.
+  const instanceId = useId().replace(/:/g, '');
+  const clipId = `vb-clip-${instanceId}-${block.id}`;
 
   return (
     <svg
@@ -102,6 +112,7 @@ export function BlockRenderer({
             viewport={viewport}
             blockTime={blockTime}
             isPlaying={isPlaying}
+            animationsEnabled={animationsEnabled}
           />
         ))}
       </g>
@@ -115,31 +126,55 @@ interface LayerRendererProps {
   viewport: { width: number; height: number };
   blockTime: number;
   isPlaying?: boolean;
+  animationsEnabled: boolean;
 }
 
 /**
  * Dispatch to the appropriate layer component based on type.
  */
-function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }: LayerRendererProps) {
-  switch (layer.type) {
+function LayerRenderer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  isPlaying,
+  animationsEnabled,
+}: LayerRendererProps) {
+  // Render policy must not mutate caller-owned Docs. A shallow copy is enough:
+  // every layer renderer reads animation only from the base layer field.
+  const renderedLayer: Layer =
+    animationsEnabled || !layer.animation ? layer : { ...layer, animation: undefined };
+
+  switch (renderedLayer.type) {
     case 'image':
       return (
-        <ImageLayer layer={layer} basePath={basePath} viewport={viewport} blockTime={blockTime} />
+        <ImageLayer
+          layer={renderedLayer}
+          basePath={basePath}
+          viewport={viewport}
+          blockTime={blockTime}
+          animationsEnabled={animationsEnabled}
+        />
       );
     case 'text':
-      return <TextLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+      return <TextLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
     case 'shape':
-      return <ShapeLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+      return <ShapeLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
     case 'path':
-      return <PathLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+      return <PathLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
     case 'map':
       return (
-        <MapLayer layer={layer} basePath={basePath} viewport={viewport} blockTime={blockTime} />
+        <MapLayer
+          layer={renderedLayer}
+          basePath={basePath}
+          viewport={viewport}
+          blockTime={blockTime}
+        />
       );
     case 'video':
       return (
         <VideoLayer
-          layer={layer}
+          layer={renderedLayer}
           basePath={basePath}
           viewport={viewport}
           blockTime={blockTime}
@@ -147,9 +182,11 @@ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }: Laye
         />
       );
     case 'table':
-      return <TableLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+      return <TableLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
+    case 'tree':
+      return <TreeLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
     default:
-      console.warn(`Unknown layer type: ${(layer as Layer).type}`);
+      console.warn(`Unknown layer type: ${(renderedLayer as Layer).type}`);
       return null;
   }
 }

package/src/DocControlsSlideshow.tsx

@@ -11,14 +11,51 @@
  * - types.ts — Shared type definitions
  */
 
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { PlaybackState, SlideNavActions } from './types';
 
+export interface SlideshowPickerItem {
+  /** Stable identifier for the slide/block. */
+  id: string;
+  /** Human-facing slide number, or a special label such as "Cover". */
+  label: string;
+  /** Short description shown in the slide picker. */
+  summary: string;
+}
+
 interface DocControlsSlideshowProps {
   state: PlaybackState;
   slideNav: SlideNavActions;
+  /** Slides available for direct navigation from the counter popover. */
+  slides?: readonly SlideshowPickerItem[];
+  /** Controlled open state for hosts that expose their own picker shortcut. */
+  pickerOpen?: boolean;
+  /** Called whenever the slide picker should open or close. */
+  onPickerOpenChange?: (open: boolean) => void;
 }
 
-export function DocControlsSlideshow({ state, slideNav }: DocControlsSlideshowProps) {
+export function DocControlsSlideshow({
+  state,
+  slideNav,
+  slides = [],
+  pickerOpen,
+  onPickerOpenChange,
+}: DocControlsSlideshowProps) {
+  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState(false);
+  const isPickerOpen = pickerOpen ?? uncontrolledPickerOpen;
+  const setPickerOpen = useCallback(
+    (open: boolean) => {
+      if (pickerOpen === undefined) setUncontrolledPickerOpen(open);
+      onPickerOpenChange?.(open);
+    },
+    [pickerOpen, onPickerOpenChange],
+  );
+  const [pickerMaxHeight, setPickerMaxHeight] = useState(280);
+  const controlsRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const menuId = useId();
   const {
     currentBlockIndex,
     currentSlideLabel,
@@ -34,8 +71,80 @@ export function DocControlsSlideshow({ state, slideNav }: DocControlsSlideshowPr
         `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}`)
       : '—';
 
+  useEffect(() => {
+    if (!isPickerOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!controlsRef.current?.contains(event.target as Node)) setPickerOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      setPickerOpen(false);
+      triggerRef.current?.focus();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isPickerOpen, setPickerOpen]);
+
+  useLayoutEffect(() => {
+    if (!isPickerOpen) return;
+
+    const controls = controlsRef.current;
+    const player = controls?.closest<HTMLElement>('.doc-player') ?? controls?.parentElement;
+    if (!controls || !player) return;
+
+    const updateMaxHeight = () => {
+      const controlsBounds = controls.getBoundingClientRect();
+      const playerBounds = player.getBoundingClientRect();
+      // The picker sits 8px above the toolbar; retain another 16px of
+      // breathing room at the top of the player.
+      const availableHeight = Math.floor(controlsBounds.top - playerBounds.top - 8 - 16);
+      setPickerMaxHeight(Math.max(72, availableHeight));
+    };
+
+    updateMaxHeight();
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateMaxHeight);
+    resizeObserver?.observe(player);
+    resizeObserver?.observe(controls);
+    window.addEventListener('resize', updateMaxHeight);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', updateMaxHeight);
+    };
+  }, [isPickerOpen]);
+
+  useEffect(() => {
+    if (!isPickerOpen) return;
+    menuRef.current?.querySelector<HTMLButtonElement>('[aria-current="true"]')?.focus();
+  }, [isPickerOpen]);
+
+  const handleMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    const items = Array.from(
+      menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [],
+    );
+    if (items.length === 0) return;
+
+    event.preventDefault();
+    const focusedIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+    let nextIndex = focusedIndex;
+    if (event.key === 'Home') nextIndex = 0;
+    else if (event.key === 'End') nextIndex = items.length - 1;
+    else if (event.key === 'ArrowDown') nextIndex = (focusedIndex + 1) % items.length;
+    else nextIndex = (focusedIndex - 1 + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+
   return (
     <div
+      ref={controlsRef}
       className="doc-controls-slideshow"
       data-testid="slideshow-controls"
       style={{
@@ -88,22 +197,130 @@ export function DocControlsSlideshow({ state, slideNav }: DocControlsSlideshowPr
         </svg>
       </button>
 
-      {/* Slide counter */}
-      <span
+      {/* Slide counter / direct-navigation picker */}
+      <button
+        ref={triggerRef}
+        type="button"
         data-testid="slide-counter"
+        aria-label={`Choose slide, current ${counterText}`}
+        aria-haspopup="menu"
+        aria-expanded={isPickerOpen}
+        aria-controls={isPickerOpen ? menuId : undefined}
+        title="Choose slide"
+        disabled={slides.length === 0}
+        onClick={(event) => {
+          event.stopPropagation();
+          setPickerOpen(!isPickerOpen);
+        }}
         style={{
+          background: isPickerOpen ? 'rgba(255,255,255,0.12)' : 'none',
+          border: 'none',
           color: 'rgba(255,255,255,0.9)',
+          cursor: slides.length > 0 ? 'pointer' : 'default',
           fontSize: '13px',
           fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
           fontVariantNumeric: 'tabular-nums',
           minWidth: '48px',
           textAlign: 'center',
-          padding: '0 4px',
+          padding: '6px 4px',
           letterSpacing: '0.02em',
+          borderRadius: '4px',
+          transition: 'background 0.15s',
         }}
       >
         {counterText}
-      </span>
+      </button>
+
+      {isPickerOpen && (
+        <div
+          ref={menuRef}
+          id={menuId}
+          role="menu"
+          aria-label="Choose a slide"
+          data-testid="slide-picker"
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={handleMenuKeyDown}
+          style={{
+            position: 'absolute',
+            right: 0,
+            bottom: 'calc(100% + 8px)',
+            width: 'min(280px, calc(100vw - 32px))',
+            maxHeight: `${pickerMaxHeight}px`,
+            overflowY: 'auto',
+            padding: '6px',
+            background: 'rgba(20, 20, 20, 0.94)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: '8px',
+            boxShadow: '0 10px 30px rgba(0,0,0,0.38)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+          }}
+        >
+          {slides.map((slide, index) => {
+            const isCurrent = index === currentBlockIndex;
+            return (
+              <button
+                key={`${slide.id}-${index}`}
+                type="button"
+                role="menuitem"
+                aria-current={isCurrent ? 'true' : undefined}
+                data-testid={`slide-picker-item-${index}`}
+                onClick={() => {
+                  slideNav.goToSlide(index);
+                  setPickerOpen(false);
+                }}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '42px minmax(0, 1fr)',
+                  alignItems: 'center',
+                  gap: '8px',
+                  width: '100%',
+                  padding: '8px 10px',
+                  background: isCurrent ? 'rgba(255,255,255,0.14)' : 'transparent',
+                  border: 'none',
+                  borderRadius: '5px',
+                  color: 'rgba(255,255,255,0.94)',
+                  cursor: 'pointer',
+                  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                  textAlign: 'left',
+                }}
+                onMouseEnter={(event) => {
+                  event.currentTarget.style.background = 'rgba(255,255,255,0.1)';
+                }}
+                onMouseLeave={(event) => {
+                  event.currentTarget.style.background = isCurrent
+                    ? 'rgba(255,255,255,0.14)'
+                    : 'transparent';
+                }}
+              >
+                <span
+                  style={{
+                    color: isCurrent ? '#fff' : 'rgba(255,255,255,0.58)',
+                    fontSize: '12px',
+                    fontVariantNumeric: 'tabular-nums',
+                    textAlign: 'right',
+                  }}
+                >
+                  {slide.label}
+                </span>
+                <span
+                  style={{
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    color: isCurrent ? '#fff' : 'rgba(255,255,255,0.82)',
+                    fontSize: '13px',
+                    lineHeight: 1.3,
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {slide.summary}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
 
       {/* Next button */}
       <button