@bendyline/squisq-react 0.1.3 → 1.0.1

package/dist/layers/ImageLayer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ImageLayer Component
+ *
+ * Renders an image layer within an SVG block. Supports Ken Burns and other
+ * animations via CSS classes. Images are rendered using SVG <image> element
+ * with proper aspect ratio handling.
+ */
+import type { ImageLayer as ImageLayerType } from '@bendyline/squisq/schemas';
+interface ImageLayerProps {
+    layer: ImageLayerType;
+    /** 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 declare function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerProps): import("react/jsx-runtime").JSX.Element;
+export default ImageLayer;
+//# sourceMappingURL=ImageLayer.d.ts.map

package/dist/layers/ImageLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLayer.d.ts","sourceRoot":"","sources":["../../src/layers/ImageLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAa,MAAM,2BAA2B,CAAC;AAKzF,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CA+GnF;AA+CD,eAAe,UAAU,CAAC"}

package/dist/layers/ImageLayer.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getAnimationStyle } from '../utils/animationUtils';
+import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
+import { useMediaUrl } from '../hooks/MediaContext';
+export function ImageLayer({ layer, basePath, viewport, blockTime }) {
+    const { content, position, animation } = layer;
+    // 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;
+    // Resolve image URL via MediaProvider (if available), falling back to basePath
+    const src = useMediaUrl(content.src, basePath);
+    // Get animation styles
+    const animStyle = getAnimationStyle(animation, blockTime);
+    // SVG preserveAspectRatio based on fit mode
+    const preserveAspectRatio = getPreserveAspectRatio(content.fit);
+    const isCover = content.fit === 'cover';
+    // Detect spatial (transform-based) animations that need Ken Burns treatment.
+    // These animations should move the image *content* within fixed bounds rather
+    // than shifting the entire image container.
+    const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
+    // Ken Burns mode: cover image with spatial animation.
+    // Keep the container static, animate the inner <img> within clipped bounds.
+    if (isCover && isSpatialAnim && animation) {
+        const kbAnim = remapToKenBurns(animation);
+        const kbStyle = getAnimationStyle(kbAnim, blockTime);
+        return (_jsx("g", { className: "block-layer block-layer--image", "data-layer-id": layer.id, children: _jsx("foreignObject", { x: finalX, y: finalY, width: width, height: height, children: _jsx("div", { style: {
+                        width: '100%',
+                        height: '100%',
+                        overflow: 'hidden',
+                    }, children: _jsx("img", { src: src, alt: content.alt || '', className: kbStyle.className, style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            objectPosition: 'center',
+                            display: 'block',
+                            pointerEvents: 'none',
+                            transformOrigin: 'center center',
+                            ...kbStyle.style,
+                        } }) }) }) }));
+    }
+    // For cover mode, use foreignObject with CSS object-fit for more reliable coverage
+    // SVG's preserveAspectRatio can be inconsistent across browsers
+    if (isCover) {
+        return (_jsx("g", { className: `block-layer block-layer--image ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: _jsx("foreignObject", { x: finalX, y: finalY, width: width, height: height, children: _jsx("img", { src: src, alt: content.alt || '', style: {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        objectPosition: 'center',
+                        display: 'block',
+                        pointerEvents: 'none',
+                    } }) }) }));
+    }
+    // For contain/fill modes, use SVG image element
+    return (_jsx("g", { className: `block-layer block-layer--image ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: _jsx("image", { href: src, x: finalX, y: finalY, width: width, height: height, preserveAspectRatio: preserveAspectRatio, style: { pointerEvents: 'none' } }) }));
+}
+/**
+ * Map fit mode to SVG preserveAspectRatio.
+ */
+function getPreserveAspectRatio(fit) {
+    switch (fit) {
+        case 'cover':
+            return 'xMidYMid slice';
+        case 'fill':
+            return 'none';
+        case 'contain':
+        default:
+            return 'xMidYMid meet';
+    }
+}
+// ============================================
+// Ken Burns Helpers
+// ============================================
+/** Animation types that use CSS transforms (translate/scale). */
+const SPATIAL_ANIMATION_TYPES = new Set(['panLeft', 'panRight', 'slowZoom', 'zoomIn', 'zoomOut']);
+/**
+ * Remap animation for Ken Burns inner-image rendering.
+ *
+ * Pure pan animations (panLeft/panRight) get remapped to combined slowZoom+pan
+ * to maintain minimum scale and avoid revealing gaps at image edges.
+ * zoomIn/zoomOut get remapped to slowZoom variants (no opacity change, which
+ * is inappropriate for sustained ambient motion).
+ */
+function remapToKenBurns(anim) {
+    switch (anim.type) {
+        case 'panLeft':
+            return { ...anim, type: 'slowZoom', panDirection: 'left' };
+        case 'panRight':
+            return { ...anim, type: 'slowZoom', panDirection: 'right' };
+        case 'zoomIn':
+            return { ...anim, type: 'slowZoom', direction: 'in' };
+        case 'zoomOut':
+            return { ...anim, type: 'slowZoom', direction: 'out' };
+        default:
+            return anim; // slowZoom variants are already correct
+    }
+}
+export default ImageLayer;
+//# sourceMappingURL=ImageLayer.js.map

package/dist/layers/ImageLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLayer.js","sourceRoot":"","sources":["../../src/layers/ImageLayer.tsx"],"names":[],"mappings":"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"}

package/dist/layers/MapLayer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 type { MapLayer as MapLayerType } from '@bendyline/squisq/schemas';
+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 declare function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps): import("react/jsx-runtime").JSX.Element;
+export default MapLayer;
+//# sourceMappingURL=MapLayer.d.ts.map

package/dist/layers/MapLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayer.d.ts","sourceRoot":"","sources":["../../src/layers/MapLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK1E,UAAU,aAAa;IACrB,KAAK,EAAE,YAAY,CAAC;IACpB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,2CAuJ/E;AAED,eAAe,QAAQ,CAAC"}

package/dist/layers/MapLayer.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { useState, useEffect } from 'react';
+import { getAnimationStyle } from '../utils/animationUtils';
+import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
+import { composeMapImage } from '../utils/mapTileUtils';
+export function MapLayer({ layer, basePath, viewport, blockTime }) {
+    const { content, position, animation } = layer;
+    const [mapImageUrl, setMapImageUrl] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(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) => {
+            if (!cancelled) {
+                console.error('Failed to compose map:', err);
+                setError(err instanceof Error ? err.message : String(err));
+                setIsLoading(false);
+            }
+        });
+        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.zoom,
+        content.style,
+        content.staticSrc,
+        width,
+        height,
+        basePath,
+    ]);
+    // Get animation styles
+    const animStyle = getAnimationStyle(animation, blockTime);
+    // Render loading state
+    if (isLoading) {
+        return (_jsxs("g", { className: `block-layer block-layer--map ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: [_jsx("rect", { x: finalX, y: finalY, width: width, height: height, fill: "#e5e7eb" }), _jsx("text", { x: finalX + width / 2, y: finalY + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: "#9ca3af", fontSize: "24", fontFamily: "system-ui, sans-serif", children: "Loading map..." })] }));
+    }
+    // Render error state
+    if (error || !mapImageUrl) {
+        return (_jsxs("g", { className: `block-layer block-layer--map ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: [_jsx("rect", { x: finalX, y: finalY, width: width, height: height, fill: "#fef2f2" }), _jsx("text", { x: finalX + width / 2, y: finalY + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: "#dc2626", fontSize: "18", fontFamily: "system-ui, sans-serif", children: "Map failed to load" })] }));
+    }
+    return (_jsxs("g", { className: `block-layer block-layer--map ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: [_jsx("defs", { children: _jsx("clipPath", { id: `clip-${layer.id}`, children: _jsx("rect", { x: finalX, y: finalY, width: width, height: height }) }) }), _jsx("g", { clipPath: `url(#clip-${layer.id})`, children: _jsx("image", { href: mapImageUrl, x: finalX, y: finalY, width: width, height: height, preserveAspectRatio: "xMidYMid slice", style: { pointerEvents: 'none' } }) })] }));
+}
+export default MapLayer;
+//# sourceMappingURL=MapLayer.js.map

package/dist/layers/MapLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayer.js","sourceRoot":"","sources":["../../src/layers/MapLayer.tsx"],"names":[],"mappings":"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"}

package/dist/layers/ShapeLayer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ShapeLayer Component
+ *
+ * Renders simple geometric shapes (rect, circle, line) within an SVG block.
+ * Useful for visual accents, dividers, and background elements.
+ */
+import type { ShapeLayer as ShapeLayerType } from '@bendyline/squisq/schemas';
+interface ShapeLayerProps {
+    layer: ShapeLayerType;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start */
+    blockTime: number;
+}
+export declare function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps): import("react/jsx-runtime").JSX.Element;
+export default ShapeLayer;
+//# sourceMappingURL=ShapeLayer.d.ts.map

package/dist/layers/ShapeLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeLayer.d.ts","sourceRoot":"","sources":["../../src/layers/ShapeLayer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI9E,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,CAAC;IACtB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAqFzE;AAED,eAAe,UAAU,CAAC"}

package/dist/layers/ShapeLayer.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getAnimationStyle } from '../utils/animationUtils';
+import { resolveValue } from '../utils/layerUtils';
+export function ShapeLayer({ layer, viewport, blockTime }) {
+    const { content, position, animation } = layer;
+    // 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) : 100;
+    const height = position.height ? resolveValue(position.height, viewport.height) : 100;
+    // 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';
+    const isCSSGradient = typeof fill === 'string' && fill.includes('gradient(');
+    // For CSS gradients on rect, use foreignObject with an HTML div
+    if (content.shape === 'rect' && isCSSGradient) {
+        return (_jsx("g", { className: `block-layer block-layer--shape ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: _jsx("foreignObject", { x: x, y: y, width: width, height: height, children: _jsx("div", { style: {
+                        width: '100%',
+                        height: '100%',
+                        background: fill,
+                        borderRadius: content.borderRadius ? `${content.borderRadius}px` : undefined,
+                        pointerEvents: 'none',
+                    } }) }) }));
+    }
+    // Common style props for native SVG shapes
+    const shapeProps = {
+        fill: fill,
+        stroke: content.stroke,
+        strokeWidth: content.strokeWidth,
+    };
+    return (_jsxs("g", { className: `block-layer block-layer--shape ${animStyle.className}`, style: animStyle.style, "data-layer-id": layer.id, children: [content.shape === 'rect' && (_jsx("rect", { x: x, y: y, width: width, height: height, rx: content.borderRadius, ry: content.borderRadius, ...shapeProps })), content.shape === 'circle' && (_jsx("circle", { cx: x + width / 2, cy: y + height / 2, r: Math.min(width, height) / 2, ...shapeProps })), content.shape === 'line' && (_jsx("line", { x1: x, y1: y, x2: x + width, y2: y + height, stroke: content.stroke || '#ffffff', strokeWidth: content.strokeWidth || 2 }))] }));
+}
+export default ShapeLayer;
+//# sourceMappingURL=ShapeLayer.js.map

package/dist/layers/ShapeLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeLayer.js","sourceRoot":"","sources":["../../src/layers/ShapeLayer.tsx"],"names":[],"mappings":"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"}

package/dist/layers/TextLayer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * TextLayer Component
+ *
+ * Renders a text layer within an SVG block. Supports multi-line text,
+ * styling options (font, color, shadow), and animations like fadeIn
+ * and typewriter effects.
+ *
+ * Text is rendered using SVG <text> elements with <tspan> for line breaks.
+ */
+import type { TextLayer as TextLayerType } from '@bendyline/squisq/schemas';
+interface TextLayerProps {
+    layer: TextLayerType;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start */
+    blockTime: number;
+}
+export declare function TextLayer({ layer, viewport, blockTime }: TextLayerProps): import("react/jsx-runtime").JSX.Element;
+export default TextLayer;
+//# sourceMappingURL=TextLayer.d.ts.map

package/dist/layers/TextLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLayer.d.ts","sourceRoot":"","sources":["../../src/layers/TextLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK5E,UAAU,cAAc;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAwFvE;AAqFD,eAAe,SAAS,CAAC"}

package/dist/layers/TextLayer.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_DOC_FONT } from '@bendyline/squisq/schemas';
+import { getAnimationStyle } from '../utils/animationUtils';
+import { resolveValue } from '../utils/layerUtils';
+export function TextLayer({ layer, viewport, blockTime }) {
+    const { content, position, animation } = layer;
+    const { text, style } = content;
+    // Resolve position values to pixels
+    const x = resolveValue(position.x, viewport.width);
+    const y = resolveValue(position.y, viewport.height);
+    const maxWidth = position.width ? resolveValue(position.width, viewport.width) : undefined;
+    // Apply anchor offset for text alignment
+    const textAnchor = getTextAnchor(style.textAlign, position.anchor);
+    const dominantBaseline = getDominantBaseline(position.anchor);
+    // Get animation styles
+    const animStyle = getAnimationStyle(animation, blockTime);
+    // Split text into lines, and wrap if maxWidth is specified
+    const rawLines = text.split('\n');
+    let lines = maxWidth
+        ? rawLines.reduce((acc, line) => acc.concat(wrapText(line, style.fontSize, maxWidth)), [])
+        : rawLines;
+    // Truncate to maxLines if specified
+    if (style.maxLines && lines.length > style.maxLines) {
+        lines = lines.slice(0, style.maxLines);
+        // Add ellipsis to last visible line
+        const last = lines[lines.length - 1];
+        lines[lines.length - 1] = last.replace(/\s*$/, '') + '...';
+    }
+    const lineHeight = style.lineHeight || 1.4;
+    const lineHeightPx = style.fontSize * lineHeight;
+    // Build text styles
+    const textStyles = {
+        fontSize: `${style.fontSize}px`,
+        fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+        fontWeight: style.fontWeight || 'normal',
+        fill: style.color,
+        ...animStyle.style,
+    };
+    // Add shadow filter if requested
+    const filterId = style.shadow ? `shadow-${layer.id}` : undefined;
+    return (_jsxs("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [style.shadow && (_jsx("defs", { children: _jsx("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) })), style.background && (_jsx("rect", { x: x - (style.padding || 16), y: y - style.fontSize - (style.padding || 16), width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2, height: lines.length * lineHeightPx + (style.padding || 16) * 2, fill: style.background, rx: 4, ry: 4 })), _jsx("text", { x: x, y: y, textAnchor: textAnchor, dominantBaseline: dominantBaseline, style: textStyles, filter: filterId ? `url(#${filterId})` : undefined, children: lines.map((line, i) => (_jsxs("tspan", { x: x, dy: i === 0 ? 0 : lineHeightPx, children: [line || '\u00A0', " "] }, i))) })] }));
+}
+/**
+ * Map text alignment to SVG text-anchor.
+ */
+function getTextAnchor(align, anchor) {
+    // Explicit alignment takes precedence
+    if (align === 'center')
+        return 'middle';
+    if (align === 'right')
+        return 'end';
+    if (align === 'left')
+        return 'start';
+    // Otherwise infer from position anchor
+    if (anchor?.includes('right'))
+        return 'end';
+    if (anchor === 'center')
+        return 'middle';
+    return 'start';
+}
+/**
+ * Map position anchor to SVG dominant-baseline.
+ */
+function getDominantBaseline(anchor) {
+    if (anchor?.includes('bottom'))
+        return 'text-after-edge';
+    if (anchor === 'center')
+        return 'middle';
+    return 'text-before-edge';
+}
+/**
+ * Estimate text box width based on content (rough approximation).
+ */
+function getTextBoxWidth(lines, style) {
+    const maxLineLength = Math.max(...lines.map((l) => l.length));
+    // Rough estimate: average character width is ~0.5 * fontSize
+    return maxLineLength * style.fontSize * 0.55;
+}
+/**
+ * Wrap text to fit within a maximum width.
+ * Uses character-based estimation for line breaking.
+ */
+function wrapText(text, fontSize, maxWidth) {
+    if (!text.trim())
+        return [''];
+    // Estimate characters per line (average char width ~0.5 * fontSize for most fonts)
+    const avgCharWidth = fontSize * 0.5;
+    const charsPerLine = Math.floor(maxWidth / avgCharWidth);
+    if (charsPerLine <= 0)
+        return [text];
+    const words = text.split(/\s+/);
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+        const testLine = currentLine ? `${currentLine} ${word}` : word;
+        if (testLine.length <= charsPerLine) {
+            currentLine = testLine;
+        }
+        else {
+            // Current line is full, start new line
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+            // Handle words longer than a line
+            if (word.length > charsPerLine) {
+                // Break long word
+                let remaining = word;
+                while (remaining.length > charsPerLine) {
+                    lines.push(remaining.slice(0, charsPerLine));
+                    remaining = remaining.slice(charsPerLine);
+                }
+                currentLine = remaining;
+            }
+            else {
+                currentLine = word;
+            }
+        }
+    }
+    // Add remaining text
+    if (currentLine) {
+        lines.push(currentLine);
+    }
+    return lines.length > 0 ? lines : [''];
+}
+export default TextLayer;
+//# sourceMappingURL=TextLayer.js.map

package/dist/layers/TextLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLayer.js","sourceRoot":"","sources":["../../src/layers/TextLayer.tsx"],"names":[],"mappings":"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"}

package/dist/layers/VideoLayer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * VideoLayer Component
+ *
+ * Renders a video clip layer within an SVG block. Uses an HTML5 <video> element
+ * inside a <foreignObject> (same pattern as ImageLayer for cover-mode images).
+ * Videos are always muted — narration audio is the only sound track.
+ *
+ * Two modes of operation:
+ * 1. Normal playback: Video auto-plays from clipStart to clipEnd on mount,
+ *    pausing when the clip ends or when the block is no longer active.
+ * 2. Render/seekTo mode (Playwright frame capture): Video is paused and seeked
+ *    programmatically via data attributes read by DocPlayer's seekTo handler.
+ *
+ * The <video> element carries data-clip-start and data-clip-end attributes so
+ * the seekTo handler can calculate the correct video time for any doc time.
+ *
+ * Related Files:
+ * - schemas/Doc.ts — VideoLayer type definition
+ * - shared/doc/templates/videoWithCaption.ts — template producing VideoLayers
+ * - site/src/components/doc/DocPlayer.tsx — seekTo handler for video sync
+ * - site/src/components/doc/layers/ImageLayer.tsx — similar foreignObject pattern
+ */
+import type { VideoLayer as VideoLayerType } from '@bendyline/squisq/schemas';
+interface VideoLayerProps {
+    layer: VideoLayerType;
+    /** Base path for resolving relative video URLs */
+    basePath: string;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for playback sync) */
+    blockTime: number;
+    /** Whether the doc is currently playing */
+    isPlaying?: boolean;
+}
+export declare function VideoLayer({ layer, basePath, viewport, blockTime: _blockTime, isPlaying, }: VideoLayerProps): import("react/jsx-runtime").JSX.Element;
+export default VideoLayer;
+//# sourceMappingURL=VideoLayer.d.ts.map

package/dist/layers/VideoLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoLayer.d.ts","sourceRoot":"","sources":["../../src/layers/VideoLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI9E,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,SAAS,GACV,EAAE,eAAe,2CAqGjB;AAED,eAAe,UAAU,CAAC"}