@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/layers/MapLayer.tsx

@@ -1,185 +0,0 @@
-/**
- * MapLayer Component
- *
- * Renders a geographic map layer within an SVG block. Maps are composed from
- * static tile images fetched from free/open-source providers.
- *
- * For video export reliability, maps can use pre-rendered static images via
- * the staticSrc property, avoiding tile loading race conditions during capture.
- *
- * Tile fetching: Tiles are loaded on mount and composited into a data URL
- * for SVG embedding. This ensures correct rendering in both browser and
- * Playwright screenshot contexts.
- */
-
-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';
-import { composeMapImage } from '../utils/mapTileUtils';
-
-interface MapLayerProps {
-  layer: MapLayerType;
-  /** Base path for resolving relative image URLs */
-  basePath: string;
-  /** Viewport dimensions for percentage calculations */
-  viewport: { width: number; height: number };
-  /** Current time relative to block start (for animation timing) */
-  blockTime: number;
-}
-
-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);
-
-  // Resolve position values to pixels
-  const x = resolveValue(position.x, viewport.width);
-  const y = resolveValue(position.y, viewport.height);
-  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
-  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
-
-  // Apply anchor offset
-  const offset = getAnchorOffset(position.anchor, width, height);
-  const finalX = x + offset.x;
-  const finalY = y + offset.y;
-
-  // Use static image if provided, otherwise fetch and compose tiles
-  useEffect(() => {
-    let cancelled = false;
-
-    if (content.staticSrc) {
-      // Use pre-rendered static image
-      const src = content.staticSrc.startsWith('http')
-        ? content.staticSrc
-        : `${basePath}/${content.staticSrc}`;
-      setMapImageUrl(src);
-      setIsLoading(false);
-      return;
-    }
-
-    // Compose map from tiles
-    setIsLoading(true);
-    setError(null);
-
-    composeMapImage({
-      center: content.center,
-      zoom: content.zoom,
-      style: content.style,
-      width,
-      height,
-      markers: content.markers,
-      showAttribution: content.showAttribution !== false,
-    })
-      .then((dataUrl) => {
-        if (!cancelled) {
-          setMapImageUrl(dataUrl);
-          setIsLoading(false);
-        }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          console.error('Failed to compose map:', err);
-          setError(err instanceof Error ? err.message : String(err));
-          setIsLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    content.center,
-    content.zoom,
-    content.style,
-    content.staticSrc,
-    content.markers,
-    content.showAttribution,
-    width,
-    height,
-    basePath,
-  ]);
-
-  // Get animation styles
-  const animStyle = getAnimationStyle(animation, blockTime);
-
-  // Render loading state
-  if (isLoading) {
-    return (
-      <g
-        className={`block-layer block-layer--map ${animStyle.className}`}
-        style={animStyle.style}
-        data-layer-id={layer.id}
-      >
-        <rect x={finalX} y={finalY} width={width} height={height} fill="#e5e7eb" />
-        <text
-          x={finalX + width / 2}
-          y={finalY + height / 2}
-          textAnchor="middle"
-          dominantBaseline="middle"
-          fill="#9ca3af"
-          fontSize="24"
-          fontFamily="system-ui, sans-serif"
-        >
-          Loading map...
-        </text>
-      </g>
-    );
-  }
-
-  // Render error state
-  if (error || !mapImageUrl) {
-    return (
-      <g
-        className={`block-layer block-layer--map ${animStyle.className}`}
-        style={animStyle.style}
-        data-layer-id={layer.id}
-      >
-        <rect x={finalX} y={finalY} width={width} height={height} fill="#fef2f2" />
-        <text
-          x={finalX + width / 2}
-          y={finalY + height / 2}
-          textAnchor="middle"
-          dominantBaseline="middle"
-          fill="#dc2626"
-          fontSize="18"
-          fontFamily="system-ui, sans-serif"
-        >
-          Map failed to load
-        </text>
-      </g>
-    );
-  }
-
-  return (
-    <g
-      className={`block-layer block-layer--map ${animStyle.className}`}
-      style={animStyle.style}
-      data-layer-id={layer.id}
-    >
-      {/* Clip path for overflow handling */}
-      <defs>
-        <clipPath id={clipId}>
-          <rect x={finalX} y={finalY} width={width} height={height} />
-        </clipPath>
-      </defs>
-
-      {/* Map image */}
-      <g clipPath={`url(#${clipId})`}>
-        <image
-          href={mapImageUrl}
-          x={finalX}
-          y={finalY}
-          width={width}
-          height={height}
-          preserveAspectRatio="xMidYMid slice"
-          style={{ pointerEvents: 'none' }}
-        />
-      </g>
-    </g>
-  );
-}
-
-export default MapLayer;

package/src/layers/PathLayer.tsx

@@ -1,155 +0,0 @@
-/**
- * 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`. 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';
-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;
-}
-
-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,
-  legacyArrow: LegacyArrow | undefined,
-  end: 'start' | 'end',
-): MarkerStyle {
-  if (explicit) return explicit;
-  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(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-${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
-      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

@@ -1,158 +0,0 @@
-/**
- * ShapeLayer Component
- *
- * Renders simple geometric shapes (rect, circle, line) within an SVG block.
- * 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';
-import { resolveFill, resolveShapeFilter, borderDashArray } from '../utils/fillStyle';
-
-interface ShapeLayerProps {
-  layer: ShapeLayerType;
-  /** Viewport dimensions for percentage calculations */
-  viewport: { width: number; height: number };
-  /** Current time relative to block start */
-  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}`;
-
-  // Resolve position values to pixels
-  const rawX = resolveValue(position.x, viewport.width);
-  const rawY = resolveValue(position.y, viewport.height);
-  const width = position.width ? resolveValue(position.width, viewport.width) : 100;
-  const height = position.height ? resolveValue(position.height, viewport.height) : 100;
-
-  // Apply anchor offset (e.g., 'center' shifts x by -width/2 and y by -height/2)
-  const anchorOffset = getAnchorOffset(position.anchor, width, height);
-  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);
-
-  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(');
-
-  if (content.shape === 'rect' && isCSSGradient && !content.gradient) {
-    return (
-      <g
-        className={`block-layer block-layer--shape ${animStyle.className}`}
-        style={animStyle.style}
-        data-layer-id={layer.id}
-      >
-        <foreignObject x={paintX} y={paintY} width={paintWidth} height={paintHeight}>
-          <div
-            style={{
-              width: `${paintWidth}px`,
-              height: `${paintHeight}px`,
-              background: fill,
-              borderRadius: content.borderRadius ? `${content.borderRadius}px` : undefined,
-              pointerEvents: 'none',
-            }}
-          />
-        </foreignObject>
-      </g>
-    );
-  }
-
-  const { fill: fillValue, def: fillDef } = resolveFill(
-    defsId,
-    fill,
-    content.gradient,
-    content.pattern,
-  );
-  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.
-  const shapeProps = {
-    fill: fillValue,
-    fillOpacity: content.fillOpacity,
-    stroke: content.stroke,
-    strokeWidth: content.strokeWidth,
-    strokeDasharray: dash,
-    ...(filterAttr ? { filter: filterAttr } : {}),
-  };
-
-  return (
-    <g
-      className={`block-layer block-layer--shape ${animStyle.className}`}
-      style={animStyle.style}
-      data-layer-id={layer.id}
-    >
-      {(fillDef || filterDef) && (
-        <defs>
-          {fillDef}
-          {filterDef}
-        </defs>
-      )}
-      {content.shape === 'rect' && (
-        <rect
-          x={paintX}
-          y={paintY}
-          width={paintWidth}
-          height={paintHeight}
-          rx={content.borderRadius}
-          ry={content.borderRadius}
-          {...shapeProps}
-        />
-      )}
-
-      {content.shape === 'circle' && (
-        <circle
-          cx={x + width / 2}
-          cy={y + height / 2}
-          r={Math.min(width, height) / 2}
-          {...shapeProps}
-        />
-      )}
-
-      {content.shape === 'line' && (
-        <line
-          x1={x}
-          y1={y}
-          x2={x + width}
-          y2={y + height}
-          stroke={content.stroke || '#ffffff'}
-          strokeWidth={content.strokeWidth || 2}
-          strokeDasharray={dash}
-        />
-      )}
-    </g>
-  );
-}
-
-export default ShapeLayer;

package/src/layers/TableLayer.tsx

@@ -1,129 +0,0 @@
-/**
- * TableLayer Component
- *
- * Renders a data table within an SVG block using a <foreignObject> to embed
- * an HTML table. This gives us native table layout inside SVG viewports.
- *
- * The table is styled inline using the TableLayerStyle properties, which are
- * typically derived from the active theme by the dataTable template.
- */
-
-import type { TableLayer as TableLayerType } from '@bendyline/squisq/schemas';
-import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
-import { getAnimationStyle } from '../utils/animationUtils';
-
-interface TableLayerProps {
-  layer: TableLayerType;
-  /** Viewport dimensions for percentage calculations */
-  viewport: { width: number; height: number };
-  /** Current time relative to block start (for animation) */
-  blockTime: number;
-}
-
-export function TableLayer({ layer, viewport, blockTime }: TableLayerProps) {
-  const { content, position, animation } = layer;
-  const { headers, rows, align, style } = content;
-
-  // Resolve position values to pixels
-  const x = resolveValue(position.x, viewport.width);
-  const y = resolveValue(position.y, viewport.height);
-  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
-  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
-
-  // Apply anchor offset
-  const offset = getAnchorOffset(position.anchor, width, height);
-  const finalX = x + offset.x;
-  const finalY = y + offset.y;
-
-  // Build animation style
-  const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
-
-  const cellAlign = (ci: number): React.CSSProperties | undefined => {
-    const a = align?.[ci];
-    return a ? { textAlign: a } : undefined;
-  };
-
-  const borderRadius = style.borderRadius ?? 8;
-
-  return (
-    <foreignObject x={finalX} y={finalY} width={width} height={height} style={animStyle}>
-      <div
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}
-        style={{
-          width: `${width}px`,
-          height: `${height}px`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '16px',
-          boxSizing: 'border-box',
-        }}
-      >
-        <table
-          style={{
-            width: '100%',
-            borderCollapse: 'separate',
-            borderSpacing: 0,
-            fontSize: `${style.fontSize}px`,
-            fontFamily: style.fontFamily ?? 'system-ui, sans-serif',
-            overflow: 'hidden',
-            borderRadius: `${borderRadius}px`,
-            border: `1px solid ${style.borderColor}`,
-          }}
-        >
-          {headers.length > 0 && (
-            <thead>
-              <tr>
-                {headers.map((header, ci) => (
-                  <th
-                    key={ci}
-                    style={{
-                      background: style.headerBackground,
-                      color: style.headerColor,
-                      fontFamily:
-                        style.headerFontFamily ?? style.fontFamily ?? 'system-ui, sans-serif',
-                      fontWeight: 600,
-                      padding: '12px 16px',
-                      borderBottom: `2px solid ${style.borderColor}`,
-                      borderRight:
-                        ci < headers.length - 1 ? `1px solid ${style.borderColor}` : undefined,
-                      ...cellAlign(ci),
-                    }}
-                  >
-                    {header}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-          )}
-          {rows.length > 0 && (
-            <tbody>
-              {rows.map((row, ri) => (
-                <tr key={ri}>
-                  {row.map((cell, ci) => (
-                    <td
-                      key={ci}
-                      style={{
-                        background: style.cellBackground,
-                        color: style.cellColor,
-                        padding: '10px 16px',
-                        borderBottom:
-                          ri < rows.length - 1 ? `1px solid ${style.borderColor}` : undefined,
-                        borderRight:
-                          ci < row.length - 1 ? `1px solid ${style.borderColor}` : undefined,
-                        ...cellAlign(ci),
-                      }}
-                    >
-                      {cell}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          )}
-        </table>
-      </div>
-    </foreignObject>
-  );
-}