@bendyline/squisq-react 2.0.0 → 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": "2.0.0",
+  "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": "2.0.0"
+    "@bendyline/squisq": "2.0.1"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/BlockRenderer.tsx

@@ -153,6 +153,7 @@ function LayerRenderer({
           basePath={basePath}
           viewport={viewport}
           blockTime={blockTime}
+          animationsEnabled={animationsEnabled}
         />
       );
     case 'text':

package/src/LinearDocView.tsx

@@ -454,6 +454,9 @@ export function LinearDocView({
           .squisq-linear-content p {
             margin-bottom: 0.75em;
           }
+          .squisq-linear-content p + p {
+            margin-top: 1.25em;
+          }
           .squisq-linear-content ul,
           .squisq-linear-content ol {
             padding-left: 2em;

package/src/__tests__/BlockRenderer.test.tsx

@@ -41,6 +41,63 @@ describe('BlockRenderer', () => {
     expect(svg?.getAttribute('viewBox')).toBe('0 0 1080 1920');
   });
 
+  it('pans dominant cover images across portrait frames without adding zoom', () => {
+    const portraitHero: Block = {
+      ...minimalBlock,
+      layers: [
+        {
+          type: 'image',
+          id: 'portrait-hero',
+          content: { src: 'wide-hero.jpg', alt: 'Wide hero', fit: 'cover' },
+          position: { x: 0, y: 0, width: '100%', height: '100%' },
+          animation: { type: 'slowZoom', duration: 9, direction: 'in' },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer
+        block={portraitHero}
+        blockTime={0}
+        basePath="/test"
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+
+    const layer = container.querySelector('[data-layer-id="portrait-hero"]');
+    const image = layer?.querySelector('img');
+    expect(layer?.getAttribute('data-image-framing')).toBe('portrait-pan');
+    expect(image?.classList.contains('squisq-image--portrait-pan-right')).toBe(true);
+    expect(layer?.classList.contains('anim-slowZoom-in')).toBe(false);
+    expect(image?.style.objectFit).toBe('cover');
+    expect(image?.style.getPropertyValue('--portrait-pan-duration')).toBe('9s');
+  });
+
+  it('keeps smaller portrait cover tiles static', () => {
+    const portraitTile: Block = {
+      ...minimalBlock,
+      layers: [
+        {
+          type: 'image',
+          id: 'portrait-tile',
+          content: { src: 'tile.jpg', alt: 'Tile', fit: 'cover' },
+          position: { x: '5%', y: '5%', width: '42%', height: '42%' },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer
+        block={portraitTile}
+        blockTime={0}
+        basePath="/test"
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+
+    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
+  });
+
   it('renders text layers', () => {
     const blockWithText: Block = {
       id: 'text-block',
@@ -165,11 +222,13 @@ describe('BlockRenderer', () => {
         basePath="/test"
         isEntering
         animationsEnabled={false}
+        viewport={{ width: 1080, height: 1920 }}
       />,
     );
 
     expect(container.querySelector('svg')?.className.baseVal).not.toContain('transition-');
     expect(container.querySelector('[class*="anim-"]')).toBeNull();
+    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
     expect(animatedBlock.transition).toEqual({ type: 'fade', duration: 0.5 });
     expect(animatedBlock.layers?.map((layer) => layer.animation)).toEqual(originalAnimations);
   });

package/src/__tests__/LinearDocView.test.tsx

@@ -335,6 +335,19 @@ describe('LinearDocView markdown prop', () => {
     expect(container.textContent).toContain('Paragraph body.');
   });
 
+  it('adds extra spacing between blank-line-separated paragraphs', () => {
+    const { container } = render(
+      <LinearDocView markdown={'First paragraph.\n\nSecond paragraph.'} />,
+    );
+    const paragraphs = container.querySelectorAll('.squisq-md-p');
+    const styles = container.querySelector('.squisq-linear-content > style')?.textContent;
+
+    expect(paragraphs).toHaveLength(2);
+    expect(paragraphs[0]?.nextElementSibling).toBe(paragraphs[1]);
+    expect(styles).toContain('.squisq-linear-content p + p');
+    expect(styles).toContain('margin-top: 1.25em');
+  });
+
   it('doc wins over markdown when both are provided', () => {
     const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('Doc body wins'))] })]);
     const { container } = render(<LinearDocView doc={doc} markdown="# Markdown Loses" />);

package/src/__tests__/MarkdownRenderer.test.tsx

@@ -103,13 +103,13 @@ describe('MarkdownRenderer', () => {
   });
 
   it('linkSchemes allows a host scheme as a real anchor, never executable ones', () => {
-    const nodes = parseNodes('[a](gezel-nav:src%2Fa.ts) [b](javascript:alert(1))');
+    const nodes = parseNodes('[a](workspace-nav:src%2Fa.ts) [b](javascript:alert(1))');
     const blocked = render(<MarkdownRenderer nodes={nodes} />);
     expect(blocked.container.querySelector('a.squisq-md-link')).toBeNull();
 
-    const allowed = render(<MarkdownRenderer nodes={nodes} linkSchemes={['gezel-nav']} />);
+    const allowed = render(<MarkdownRenderer nodes={nodes} linkSchemes={['workspace-nav']} />);
     const a = allowed.container.querySelector('a.squisq-md-link') as HTMLAnchorElement;
-    expect(a?.getAttribute('href')).toBe('gezel-nav:src%2Fa.ts');
+    expect(a?.getAttribute('href')).toBe('workspace-nav:src%2Fa.ts');
     // javascript: stays blocked even when a host lists it
     const evil = render(
       <MarkdownRenderer

package/src/__tests__/fillStyle.test.tsx

@@ -44,6 +44,13 @@ describe('ShapeLayer fill/border', () => {
     } as ShapeLayerType;
   }
 
+  function makeFullBleedShape(content: Partial<ShapeLayerType['content']>): ShapeLayerType {
+    return {
+      ...makeShape(content),
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    };
+  }
+
   it('applies fill opacity and a dashed border', () => {
     const { container } = render(
       <svg>
@@ -79,6 +86,46 @@ describe('ShapeLayer fill/border', () => {
     expect(gradient).not.toBeNull();
     expect(container.querySelector('rect')!.getAttribute('fill')).toBe(`url(#${gradient!.id})`);
   });
+
+  it('overscans a full-bleed solid shade to prevent an image edge seam', () => {
+    const { container } = render(
+      <svg>
+        <ShapeLayer
+          layer={makeFullBleedShape({ fill: 'rgba(0, 0, 0, 0.5)' })}
+          viewport={viewport}
+          blockTime={0}
+        />
+      </svg>,
+    );
+
+    const rect = container.querySelector('rect')!;
+    expect(rect.getAttribute('x')).toBe('-1');
+    expect(rect.getAttribute('y')).toBe('-1');
+    expect(rect.getAttribute('width')).toBe('1002');
+    expect(rect.getAttribute('height')).toBe('1002');
+  });
+
+  it('overscans a full-bleed CSS gradient shade and its HTML fill', () => {
+    const { container } = render(
+      <svg>
+        <ShapeLayer
+          layer={makeFullBleedShape({
+            fill: 'linear-gradient(0deg, rgba(0,0,0,0.8), transparent)',
+          })}
+          viewport={viewport}
+          blockTime={0}
+        />
+      </svg>,
+    );
+
+    const foreignObject = container.querySelector('foreignObject')!;
+    expect(foreignObject.getAttribute('x')).toBe('-1');
+    expect(foreignObject.getAttribute('y')).toBe('-1');
+    expect(foreignObject.getAttribute('width')).toBe('1002');
+    expect(foreignObject.getAttribute('height')).toBe('1002');
+    expect(foreignObject.querySelector('div')!.style.width).toBe('1002px');
+    expect(foreignObject.querySelector('div')!.style.height).toBe('1002px');
+  });
 });
 
 describe('TextLayer box border', () => {

package/src/layers/ImageLayer.tsx

@@ -20,9 +20,17 @@ interface ImageLayerProps {
   viewport: { width: number; height: number };
   /** Current time relative to block start (for animation timing) */
   blockTime: number;
+  /** Whether authored and responsive image motion should run. */
+  animationsEnabled?: boolean;
 }
 
-export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerProps) {
+export function ImageLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  animationsEnabled = true,
+}: ImageLayerProps) {
   const { content, position, animation } = layer;
 
   // Resolve position values to pixels
@@ -55,6 +63,61 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
   // than shifting the entire image container.
   const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
 
+  // Wide cover photos lose most of their composition when centered inside a
+  // portrait frame. For dominant imagery, scan the cover crop horizontally so
+  // the whole width is revealed over time. `object-position` only moves when
+  // the fitted image actually has horizontal overflow, so portrait sources stay
+  // visually still. This path deliberately avoids the extra Ken Burns scale:
+  // cover already scales the source by the minimum amount needed to fit one
+  // viewport dimension.
+  const usesPortraitPan =
+    isCover && shouldUsePortraitPan(viewport, width, height, animationsEnabled, animation);
+
+  if (usesPortraitPan) {
+    const panClass = getPortraitPanClass(animation);
+    const panStyle = getPortraitPanStyle(isSpatialAnim ? animation : undefined);
+    // Entrance/opacity animations can safely run on the fixed container while
+    // object-position pans the image. Spatial transforms are replaced by the
+    // pan so they cannot zoom an already aggressive portrait crop.
+    const containerAnim = isSpatialAnim ? { className: '', style: {} } : animStyle;
+
+    return (
+      <g
+        className={`block-layer block-layer--image ${containerAnim.className}`}
+        style={containerAnim.style}
+        data-layer-id={layer.id}
+        data-image-framing="portrait-pan"
+      >
+        <foreignObject x={finalX} y={finalY} width={width} height={height}>
+          <div
+            style={{
+              width: `${width}px`,
+              height: `${height}px`,
+              overflow: 'hidden',
+            }}
+          >
+            <img
+              src={src}
+              alt={content.alt || ''}
+              className={panClass}
+              style={{
+                width: `${width}px`,
+                height: `${height}px`,
+                objectFit: 'cover',
+                objectPosition: 'center',
+                display: 'block',
+                pointerEvents: 'none',
+                ...(filter ? { filter } : {}),
+                ...(content.blur && content.blur > 0 ? { transform: 'scale(1.06)' } : {}),
+                ...panStyle,
+              }}
+            />
+          </div>
+        </foreignObject>
+      </g>
+    );
+  }
+
   // Ken Burns mode: cover image with spatial animation.
   // Keep the container static, animate the inner <img> within clipped bounds.
   if (isCover && isSpatialAnim && animation) {
@@ -166,6 +229,48 @@ function getPreserveAspectRatio(fit?: 'cover' | 'contain' | 'fill'): string {
 /** Animation types that use CSS transforms (translate/scale). */
 const SPATIAL_ANIMATION_TYPES = new Set(['panLeft', 'panRight', 'slowZoom', 'zoomIn', 'zoomOut']);
 
+/** Portrait threshold matches useViewportOrientation's 0.83 aspect cutoff. */
+const PORTRAIT_ASPECT_CUTOFF = 0.83;
+
+/**
+ * Only auto-pan images that act as the slide's dominant visual. This keeps
+ * photo-grid tiles, thumbnails, and small authored insets from all moving at
+ * once while covering the full-screen autogenerated layouts.
+ */
+function shouldUsePortraitPan(
+  viewport: { width: number; height: number },
+  layerWidth: number,
+  layerHeight: number,
+  animationsEnabled: boolean,
+  animation: Animation | undefined,
+): boolean {
+  if (!animationsEnabled || animation?.type === 'none') return false;
+  if (viewport.width / viewport.height >= PORTRAIT_ASPECT_CUTOFF) return false;
+
+  return layerWidth >= viewport.width * 0.7 && layerHeight >= viewport.height * 0.7;
+}
+
+/**
+ * `panLeft` means the image moves left (the framing scans toward its right
+ * edge); `panRight` is the reverse. Unspecified motion defaults to revealing
+ * the source from left to right.
+ */
+function getPortraitPanClass(animation: Animation | undefined): string {
+  const pansBack =
+    animation?.type === 'panRight' ||
+    (animation?.type === 'slowZoom' && animation.panDirection === 'right');
+  return pansBack ? 'squisq-image--portrait-pan-left' : 'squisq-image--portrait-pan-right';
+}
+
+/** Use authored spatial timing when present, otherwise a slow ambient scan. */
+function getPortraitPanStyle(animation: Animation | undefined): Record<string, string> {
+  return {
+    '--portrait-pan-duration': `${animation?.duration ?? 12}s`,
+    '--portrait-pan-delay': `${animation?.delay ?? 0}s`,
+    '--portrait-pan-easing': animation?.easing ?? 'ease-in-out',
+  };
+}
+
 /**
  * Remap animation for Ken Burns inner-image rendering.
  *

package/src/layers/ShapeLayer.tsx

@@ -19,6 +19,14 @@ interface ShapeLayerProps {
   blockTime: number;
 }
 
+/**
+ * Full-bleed HTML and SVG layers can be rasterized on slightly different
+ * subpixel boundaries. Extend unbordered background rectangles beyond the
+ * viewport so an image cannot peek through at the outermost pixel; the block
+ * renderer clips the combined layer stack back to the viewBox.
+ */
+const FULL_BLEED_OVERSCAN = 1;
+
 export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
   const { content, position, animation } = layer;
   const defsId = `${useId().replace(/:/g, '')}-${layer.id}`;
@@ -34,6 +42,20 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
   const x = rawX + anchorOffset.x;
   const y = rawY + anchorOffset.y;
 
+  const isUnborderedFullBleedRect =
+    content.shape === 'rect' &&
+    x === 0 &&
+    y === 0 &&
+    width === viewport.width &&
+    height === viewport.height &&
+    !content.stroke &&
+    !content.borderRadius;
+  const overscan = isUnborderedFullBleedRect ? FULL_BLEED_OVERSCAN : 0;
+  const paintX = x - overscan;
+  const paintY = y - overscan;
+  const paintWidth = width + overscan * 2;
+  const paintHeight = height + overscan * 2;
+
   // Get animation styles
   const animStyle = getAnimationStyle(animation, blockTime);
 
@@ -51,11 +73,11 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
         style={animStyle.style}
         data-layer-id={layer.id}
       >
-        <foreignObject x={x} y={y} width={width} height={height}>
+        <foreignObject x={paintX} y={paintY} width={paintWidth} height={paintHeight}>
           <div
             style={{
-              width: `${width}px`,
-              height: `${height}px`,
+              width: `${paintWidth}px`,
+              height: `${paintHeight}px`,
               background: fill,
               borderRadius: content.borderRadius ? `${content.borderRadius}px` : undefined,
               pointerEvents: 'none',
@@ -99,10 +121,10 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
       )}
       {content.shape === 'rect' && (
         <rect
-          x={x}
-          y={y}
-          width={width}
-          height={height}
+          x={paintX}
+          y={paintY}
+          width={paintWidth}
+          height={paintHeight}
           rx={content.borderRadius}
           ry={content.borderRadius}
           {...shapeProps}

package/src/styles/doc-animations.css

@@ -178,6 +178,26 @@
   }
 }
 
+/* Portrait framing for dominant cover photos. Animating object-position scans
+   exactly across the crop overflow without adding another scale transform. */
+@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%);
@@ -2170,6 +2190,18 @@
     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;
@@ -2369,6 +2401,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;
   }