@bendyline/squisq-react 1.3.2 → 1.4.1

package/src/hooks/useMediaSchedule.ts

@@ -0,0 +1,39 @@
+/**
+ * useMediaSchedule
+ *
+ * Pure follower of the playback clock for the media-clip model. Given the
+ * resolved {@link ScheduledClip}s and the current time, it returns the clips
+ * the player should mount and which of them are active right now.
+ * {@link MediaClipLayer} consumes this to drive one hidden `<audio>` /
+ * full-bleed `<video>` element per clip. (Annotation-authored clips all render
+ * at the player level; template-produced `VideoLayer`s are a separate path and
+ * are not part of the schedule.)
+ *
+ * It owns no clock: `currentTime`/`isPlaying` come from the existing
+ * `useAudioSync` provider via `DocPlayer`. With an empty schedule it returns
+ * empty lists, so documents without the new media model are unaffected.
+ */
+
+import { useMemo } from 'react';
+import type { ScheduledClip } from '@bendyline/squisq/schemas';
+
+export interface MediaScheduleController {
+  /** Clips the player mounts (every scheduled clip). */
+  renderClips: ScheduledClip[];
+  /** Ids of clips whose [absoluteStart, absoluteEnd) contains currentTime. */
+  activeIds: Set<string>;
+}
+
+export function useMediaSchedule(
+  schedule: ScheduledClip[],
+  currentTime: number,
+): MediaScheduleController {
+  const activeIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const c of schedule) {
+      if (currentTime >= c.absoluteStart && currentTime < c.absoluteEnd) ids.add(c.id);
+    }
+    return ids;
+  }, [schedule, currentTime]);
+  return { renderClips: schedule, activeIds };
+}

package/src/hooks/useSlideSwipe.ts

@@ -0,0 +1,265 @@
+/**
+ * useSlideSwipe Hook
+ *
+ * Drag-to-swipe navigation for slideshow mode. Press on the current slide to
+ * "pick it up", drag left/right, and on release either snap back (small drag)
+ * or advance to the next/previous slide (large drag or a quick flick).
+ *
+ * The gesture only translates the *current* slide (a "pick up & toss" feel) —
+ * the incoming slide arrives via its normal enter transition once navigation
+ * commits. The current slide is already mounted and settled, so translating it
+ * is a pure `transform` with no animation conflict.
+ *
+ * Mirrors the repo's canonical pointer-drag pattern (imageEditor/CanvasSurface):
+ * ref-held drag start + `setPointerCapture` + window pointermove/up/cancel +
+ * a threshold decision on release. Navigation itself is delegated to the
+ * caller's `onNext`/`onPrev` (DocPlayer's `slideNavActions`).
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+
+/** Fraction of the container width a drag must cross to commit a slide change. */
+const DISTANCE_RATIO = 0.3;
+/** A fast flick commits even below the distance threshold (px per millisecond). */
+const FLICK_VELOCITY = 0.5;
+/** Ignore flicks shorter than this so a click's micro-jitter never navigates (px). */
+const MIN_FLICK_DISTANCE = 12;
+/** Resistance factor applied when dragging past the first/last slide. */
+const RUBBER_BAND = 0.35;
+/** Default settle animation duration (ms). Must match the CSS in doc-animations.css. */
+const DEFAULT_SETTLE_MS = 260;
+
+/** The lifecycle of a swipe gesture. */
+export type SwipePhase = 'idle' | 'dragging' | 'settling';
+
+/** Outcome of a completed drag. */
+export type SwipeDecision = 'next' | 'prev' | 'snap';
+
+export interface SwipeDecisionInput {
+  /** Horizontal delta from drag start (px). Negative = leftward = next. */
+  dx: number;
+  /** Width of the slide container (px). */
+  width: number;
+  /** How long the drag lasted (ms). */
+  elapsedMs: number;
+  /** Whether a next slide exists. */
+  canNext: boolean;
+  /** Whether a previous slide exists. */
+  canPrev: boolean;
+}
+
+/**
+ * Pure decision: given a completed drag, should we advance, go back, or snap
+ * back? Committing requires either crossing the distance threshold or a fast
+ * flick, *and* a slide existing in that direction. Extracted from the hook so
+ * the threshold logic is testable without a DOM.
+ */
+export function decideSwipe({
+  dx,
+  width,
+  elapsedMs,
+  canNext,
+  canPrev,
+}: SwipeDecisionInput): SwipeDecision {
+  const distanceThreshold = width > 0 ? width * DISTANCE_RATIO : Infinity;
+  const velocity = elapsedMs > 0 ? Math.abs(dx) / elapsedMs : 0;
+  const passesDistance = Math.abs(dx) >= distanceThreshold;
+  const passesFlick = velocity >= FLICK_VELOCITY && Math.abs(dx) >= MIN_FLICK_DISTANCE;
+
+  if (!passesDistance && !passesFlick) return 'snap';
+  if (dx < 0) return canNext ? 'next' : 'snap'; // dragged left → next slide
+  if (dx > 0) return canPrev ? 'prev' : 'snap'; // dragged right → previous slide
+  return 'snap';
+}
+
+export interface UseSlideSwipeOptions {
+  /** Master gate — the gesture is inert unless enabled (slideshow mode, not headless). */
+  enabled: boolean;
+  /** Ref to the player container, used to measure width for the threshold. */
+  containerRef: RefObject<HTMLElement>;
+  /** Whether a next slide exists (`currentBlockIndex < total - 1`). */
+  canGoNext: boolean;
+  /** Whether a previous slide exists (`currentBlockIndex > 0`). */
+  canGoPrev: boolean;
+  /** Commit to the next slide. */
+  onNext: () => void;
+  /** Commit to the previous slide. */
+  onPrev: () => void;
+  /** Settle animation duration (ms); must match the CSS. Defaults to 260. */
+  settleMs?: number;
+}
+
+export interface UseSlideSwipeResult {
+  /** Live horizontal offset to apply to the active slide (px). */
+  offsetPx: number;
+  /** Current gesture phase — drives the transform transition class. */
+  phase: SwipePhase;
+  /** Attach to the container's `onPointerDown`. */
+  onPointerDown: (e: React.PointerEvent) => void;
+}
+
+interface DragState {
+  pointerId: number;
+  startX: number;
+  startTime: number;
+  target: Element;
+}
+
+/**
+ * Manage the swipe gesture state machine for a slideshow player.
+ */
+export function useSlideSwipe(opts: UseSlideSwipeOptions): UseSlideSwipeResult {
+  const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
+
+  const [offsetPx, setOffsetPx] = useState(0);
+  const [phase, setPhase] = useState<SwipePhase>('idle');
+
+  // Keep the latest options in a ref so the window listeners (bound once) never
+  // read stale callbacks/flags.
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
+
+  const dragRef = useRef<DragState | null>(null);
+  const phaseRef = useRef<SwipePhase>('idle');
+  phaseRef.current = phase;
+  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const settleRaf = useRef<number | null>(null);
+
+  const clearPending = useCallback(() => {
+    if (settleTimer.current != null) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+    if (settleRaf.current != null) {
+      cancelAnimationFrame(settleRaf.current);
+      settleRaf.current = null;
+    }
+  }, []);
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    const o = optsRef.current;
+    if (!o.enabled) return;
+    // Don't interrupt an in-flight fling/snap.
+    if (phaseRef.current === 'settling') return;
+    // Only the primary mouse button initiates a drag; touch/pen always do.
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+    // Let interactive chrome (prev/next buttons, links) handle their own events.
+    const target = e.target as Element;
+    if (target.closest?.('button, a, input, textarea, select, [data-no-swipe]')) return;
+
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startTime: performance.now(),
+      target,
+    };
+    try {
+      target.setPointerCapture?.(e.pointerId);
+    } catch {
+      // Pointer capture is best-effort; window listeners still receive events.
+    }
+    setPhase('dragging');
+    setOffsetPx(0);
+  }, []);
+
+  // Bind move/up/cancel on window once. Handlers read live state from refs, so
+  // they never need re-binding and never go stale.
+  useEffect(() => {
+    function currentWidth(): number {
+      return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
+    }
+
+    function endDrag(drag: DragState) {
+      dragRef.current = null;
+      try {
+        drag.target.releasePointerCapture?.(drag.pointerId);
+      } catch {
+        // ignore — capture may already be released
+      }
+    }
+
+    function settleTo(target: number, onArrive?: () => void) {
+      // Switch on the transition class first (offset unchanged), then move to the
+      // target on the next frame so the browser reliably animates the change.
+      setPhase('settling');
+      settleRaf.current = requestAnimationFrame(() => {
+        settleRaf.current = null;
+        setOffsetPx(target);
+        settleTimer.current = setTimeout(() => {
+          settleTimer.current = null;
+          onArrive?.();
+          setOffsetPx(0);
+          setPhase('idle');
+        }, settleMs);
+      });
+    }
+
+    function onMove(e: PointerEvent) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      const o = optsRef.current;
+      const raw = e.clientX - drag.startX;
+      const blocked = (raw > 0 && !o.canGoPrev) || (raw < 0 && !o.canGoNext);
+      setOffsetPx(blocked ? raw * RUBBER_BAND : raw);
+    }
+
+    function onUp(e: PointerEvent) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      const o = optsRef.current;
+      const rawDx = e.clientX - drag.startX;
+      const width = currentWidth();
+      const elapsedMs = performance.now() - drag.startTime;
+      const decision = decideSwipe({
+        dx: rawDx,
+        width,
+        elapsedMs,
+        canNext: o.canGoNext,
+        canPrev: o.canGoPrev,
+      });
+
+      if (decision === 'snap') {
+        settleTo(0);
+        return;
+      }
+      // Fling fully off-screen in the drag direction, then commit navigation.
+      // Never move the slide back toward center first (guard against over-drag).
+      const distance = Math.max(width, Math.abs(rawDx));
+      const target = decision === 'next' ? -distance : distance;
+      settleTo(target, decision === 'next' ? o.onNext : o.onPrev);
+    }
+
+    function onCancel(e: PointerEvent) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      settleTo(0);
+    }
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onCancel);
+    };
+  }, [settleMs]);
+
+  // Reset all in-flight state if the gesture is disabled mid-drag (e.g. mode switch).
+  useEffect(() => {
+    if (!opts.enabled) {
+      dragRef.current = null;
+      clearPending();
+      setPhase('idle');
+      setOffsetPx(0);
+    }
+  }, [opts.enabled, clearPending]);
+
+  // Cancel any pending settle on unmount.
+  useEffect(() => clearPending, [clearPending]);
+
+  return { offsetPx, phase, onPointerDown };
+}

package/src/index.ts

@@ -21,19 +21,26 @@ export type { InlineAudioPlayerProps } from './InlineAudioPlayer.js';
 export { ImageLayer } from './layers/ImageLayer.js';
 export { TextLayer } from './layers/TextLayer.js';
 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 { MapLayer } from './layers/MapLayer.js';
 
+// Timed media clips (block.media + doc.documentMedia playback)
+export { MediaClipLayer } from './MediaClipLayer.js';
+export type { MediaClipLayerProps } from './MediaClipLayer.js';
+
 // Hooks
 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 { useViewportOrientation } from './hooks/useViewportOrientation.js';
 export { MediaContext, useMediaProvider, useMediaUrl } from './hooks/MediaContext.js';
 export { useAutoSurface } from './hooks/useAutoSurface.js';
 
 // Types
-export type { AudioProvider, AudioState, AudioActions } from './hooks/AudioProvider.js';
+export type { AudioController, AudioState, AudioActions } from './hooks/AudioController.js';
 export type {
   PlaybackState,
   PlaybackActions,

package/src/jsonView/useJsonViewTokens.ts

@@ -5,13 +5,8 @@
  */
 
 import { useMemo } from 'react';
-import {
-  applySurface,
-  resolveFontFamily,
-  type SurfaceScheme,
-  type Theme,
-} from '@bendyline/squisq/schemas';
-import { DEFAULT_THEME } from '@bendyline/squisq/doc';
+import { type SurfaceScheme, type Theme } from '@bendyline/squisq/schemas';
+import { buildJsonFormTokens, resolveJsonFormTheme } from '@bendyline/squisq/jsonForm';
 import { useAutoSurface } from '../hooks/useAutoSurface';
 
 export interface JsonViewTokens {
@@ -29,29 +24,9 @@ export function useJsonViewTokens(
   const effectiveSurface = surface === 'auto' ? auto : (surface ?? undefined);
 
   return useMemo(() => {
-    const baseTheme = theme ?? DEFAULT_THEME;
-    const finalTheme = effectiveSurface ? applySurface(baseTheme, effectiveSurface) : baseTheme;
-
-    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
-    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
-    const monoFont = resolveFontFamily(
-      finalTheme.typography.monoFont,
-      'ui-monospace, Consolas, monospace',
-    );
-
-    const style: React.CSSProperties = {
-      ['--squisq-json-bg' as string]: finalTheme.colors.background,
-      ['--squisq-json-text' as string]: finalTheme.colors.text,
-      ['--squisq-json-muted' as string]: finalTheme.colors.textMuted,
-      ['--squisq-json-primary' as string]: finalTheme.colors.primary,
-      ['--squisq-json-accent' as string]: finalTheme.colors.secondary,
-      ['--squisq-json-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
-      ['--squisq-json-title-font' as string]: titleFont,
-      ['--squisq-json-body-font' as string]: bodyFont,
-      ['--squisq-json-mono-font' as string]: monoFont,
-      ['--squisq-json-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
-    };
-
-    return { style, theme: finalTheme };
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: '--squisq-json',
+    }) as unknown as React.CSSProperties;
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
   }, [theme, effectiveSurface]);
 }

package/src/layers/ImageLayer.tsx

@@ -7,6 +7,7 @@
  */
 
 import type { ImageLayer as ImageLayerType, Animation } from '@bendyline/squisq/schemas';
+import { cssFilterForTreatment } from '@bendyline/squisq/doc';
 import { getAnimationStyle } from '../utils/animationUtils';
 import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
 import { useMediaUrl } from '../hooks/MediaContext';
@@ -41,6 +42,10 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
   // Get animation styles
   const animStyle = getAnimationStyle(animation, blockTime);
 
+  // Theme-derived photographic grade + optional blur, as a CSS filter
+  // string (identical in the player and in headless frame capture).
+  const filter = cssFilterForTreatment(content.treatment, content.blur);
+
   // SVG preserveAspectRatio based on fit mode
   const preserveAspectRatio = getPreserveAspectRatio(content.fit);
   const isCover = content.fit === 'cover';
@@ -78,6 +83,7 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
                 display: 'block',
                 pointerEvents: 'none',
                 transformOrigin: 'center center',
+                ...(filter ? { filter } : {}),
                 ...kbStyle.style,
               }}
             />
@@ -107,6 +113,10 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
               objectPosition: 'center',
               display: 'block',
               pointerEvents: 'none',
+              ...(filter ? { filter } : {}),
+              // Over-scan blurred imagery so the soft edges never reveal
+              // the frame behind the layer.
+              ...(content.blur && content.blur > 0 ? { transform: 'scale(1.06)' } : {}),
             }}
           />
         </foreignObject>
@@ -128,7 +138,7 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
         width={width}
         height={height}
         preserveAspectRatio={preserveAspectRatio}
-        style={{ pointerEvents: 'none' }}
+        style={{ pointerEvents: 'none', ...(filter ? { filter } : {}) }}
       />
     </g>
   );

package/src/layers/PathLayer.tsx

@@ -0,0 +1,146 @@
+/**
+ * PathLayer Component
+ *
+ * Renders an SVG `<path>` for arbitrary curves, connectors, arrows, and the
+ * drawing template's computed shapes. Used by the diagram template for edges
+ * between nodes; usable by any template that needs a non-rect/circle/line
+ * shape.
+ *
+ * The path's `d` attribute uses absolute SVG coordinates relative to the
+ * block viewport (independent of the layer's `position` box, which is
+ * present only so animations and clipping match the other layer types).
+ *
+ * Exception: when `content.shapeKind` is set (a standard named shape like
+ * `diamond` / `star` / `arrow-right`), `d` is re-derived from the layer's
+ * `position` box resolved against the viewport. That keeps named shapes
+ * movable, resizable, and aspect-ratio-adaptive — matching how the native
+ * 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.
+ */
+
+import type { PathLayer as PathLayerType, MarkerStyle } from '@bendyline/squisq/schemas';
+import { markerPath, shapePath } from '@bendyline/squisq/doc';
+import { getAnimationStyle } from '../utils/animationUtils';
+import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
+import { resolveFill, borderDashArray } from '../utils/fillStyle';
+
+interface PathLayerProps {
+  layer: PathLayerType;
+  /** Viewport dimensions — used to resolve `%` positions for named shapes. */
+  viewport: { width: number; height: number };
+  /** Current time relative to block start. */
+  blockTime: number;
+}
+
+/**
+ * The effective `d`: a named shape (`content.shapeKind`) is re-derived
+ * from the resolved `position` box so it tracks moves/resizes and adapts
+ * to the viewport; everything else uses the stored absolute path.
+ */
+function effectivePath(layer: PathLayerType, viewport: { width: number; height: number }): string {
+  const { content, position } = layer;
+  if (!content.shapeKind) return content.d;
+  const w = position.width ? resolveValue(position.width, viewport.width) : 0;
+  const h = position.height ? resolveValue(position.height, viewport.height) : 0;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const anchor = getAnchorOffset(position.anchor, w, h);
+  const derived = shapePath(content.shapeKind, rawX + anchor.x, rawY + anchor.y, w, h);
+  // Fall back to the stored path if the kind is unknown to `shapePath`.
+  return derived ?? content.d;
+}
+
+/** Resolve the effective marker for an endpoint (explicit field, else `arrow`). */
+function effectiveMarker(
+  explicit: MarkerStyle | undefined,
+  arrow: PathLayerType['content']['arrow'],
+  end: 'start' | 'end',
+): MarkerStyle {
+  if (explicit) return explicit;
+  const wants = arrow === 'both' || arrow === end;
+  return wants ? 'arrow' : 'none';
+}
+
+export function PathLayer({ layer, viewport, blockTime }: PathLayerProps) {
+  const { content, animation, id } = layer;
+  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);
+  // `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');
+
+  return (
+    <g
+      className={`block-layer block-layer--path ${animStyle.className}`}
+      style={animStyle.style}
+      data-layer-id={id}
+    >
+      <defs>
+        {fillDef}
+        {end && <MarkerDef id={endId} dir="end" d={end.d} filled={end.filled} stroke={stroke} />}
+        {start && (
+          <MarkerDef id={startId} dir="start" d={start.d} filled={start.filled} stroke={stroke} />
+        )}
+      </defs>
+      <path
+        d={d}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        fill={fill}
+        fillOpacity={content.fillOpacity}
+        strokeDasharray={dash}
+        markerStart={start ? `url(#${startId})` : undefined}
+        markerEnd={end ? `url(#${endId})` : undefined}
+      />
+    </g>
+  );
+}
+
+function MarkerDef({
+  id,
+  dir,
+  d,
+  filled,
+  stroke,
+}: {
+  id: string;
+  dir: 'start' | 'end';
+  d: string;
+  filled: boolean;
+  stroke: string;
+}) {
+  return (
+    <marker
+      id={id}
+      viewBox="0 0 10 10"
+      refX={dir === 'end' ? 9 : 1}
+      refY={5}
+      markerWidth={4}
+      markerHeight={4}
+      orient="auto-start-reverse"
+      markerUnits="strokeWidth"
+    >
+      <path
+        d={d}
+        fill={filled ? stroke : 'none'}
+        stroke={filled ? 'none' : stroke}
+        strokeWidth={filled ? undefined : 1.5}
+      />
+    </marker>
+  );
+}
+
+export default PathLayer;

package/src/layers/ShapeLayer.tsx

@@ -8,6 +8,7 @@
 import type { ShapeLayer as ShapeLayerType } from '@bendyline/squisq/schemas';
 import { getAnimationStyle } from '../utils/animationUtils';
 import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
+import { resolveFill, resolveShapeFilter, borderDashArray } from '../utils/fillStyle';
 
 interface ShapeLayerProps {
   layer: ShapeLayerType;
@@ -34,12 +35,14 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
   // Get animation styles
   const animStyle = getAnimationStyle(animation, blockTime);
 
-  // Check if fill is a CSS gradient (SVG rect doesn't support CSS gradients natively)
   const fill = content.fill || 'none';
+  // Legacy: a CSS gradient string baked into `fill` (e.g. from older docs)
+  // only works as an HTML background, so rect renders it via foreignObject.
+  // The structured `content.gradient` (preferred) is handled below for all
+  // shapes via an SVG <linearGradient>.
   const isCSSGradient = typeof fill === 'string' && fill.includes('gradient(');
 
-  // For CSS gradients on rect, use foreignObject with an HTML div
-  if (content.shape === 'rect' && isCSSGradient) {
+  if (content.shape === 'rect' && isCSSGradient && !content.gradient) {
     return (
       <g
         className={`block-layer block-layer--shape ${animStyle.className}`}
@@ -61,11 +64,23 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
     );
   }
 
-  // Common style props for native SVG shapes
+  const { fill: fillValue, def: fillDef } = resolveFill(
+    layer.id,
+    fill,
+    content.gradient,
+    content.pattern,
+  );
+  const { filterAttr, def: filterDef } = resolveShapeFilter(layer.id, content.filter);
+  const dash = borderDashArray(content.borderStyle, content.strokeWidth);
+
+  // Common style props for native SVG shapes. `line` is stroke-only.
   const shapeProps = {
-    fill: fill,
+    fill: fillValue,
+    fillOpacity: content.fillOpacity,
     stroke: content.stroke,
     strokeWidth: content.strokeWidth,
+    strokeDasharray: dash,
+    ...(filterAttr ? { filter: filterAttr } : {}),
   };
 
   return (
@@ -74,6 +89,12 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
       style={animStyle.style}
       data-layer-id={layer.id}
     >
+      {(fillDef || filterDef) && (
+        <defs>
+          {fillDef}
+          {filterDef}
+        </defs>
+      )}
       {content.shape === 'rect' && (
         <rect
           x={x}
@@ -103,6 +124,7 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
           y2={y + height}
           stroke={content.stroke || '#ffffff'}
           strokeWidth={content.strokeWidth || 2}
+          strokeDasharray={dash}
         />
       )}
     </g>