ugcinc 3.84.6 → 3.85.1

package/dist/render/compositions/DmComposition/BaseDmComposition.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Base DM Composition Component
+ *
+ * Shared component for DM-style compositions (Instagram, iMessage, etc.)
+ * Provides zoom/pan, debug overlay with crosshair, reference image overlay,
+ * font loading, and shared iOS chrome (status bar, home indicator).
+ */
+import React from 'react';
+export interface BaseDmCompositionProps {
+    /** Canvas width */
+    width: number;
+    /** Canvas height */
+    height: number;
+    /** Background color */
+    backgroundColor: string;
+    /** Show debug overlay with crosshair and coordinates */
+    showDebugOverlay?: boolean;
+    /** Reference image URL for overlay comparison */
+    referenceImageUrl?: string;
+    /** Show reference image overlay */
+    showReferenceImage?: boolean;
+    /** Reference image opacity (0-100) */
+    referenceOpacity?: number;
+    /** Current props for copy-to-clipboard feature in debug overlay */
+    currentProps?: Record<string, unknown>;
+    /** Children to render inside the zoomable/pannable content area */
+    children: React.ReactNode;
+    /** Time text to display */
+    time?: string;
+    /** Time text right X (right-aligned) */
+    timeRight?: number;
+    /** Time text bottom Y */
+    timeBottom?: number;
+    /** Time font size */
+    timeFontSize?: number;
+    /** Time letter spacing */
+    timeLetterSpacing?: number;
+    /** Time text color */
+    timeColor?: string;
+    /** No notifications icon top Y */
+    noNotisTop?: number;
+    /** No notifications icon bottom Y */
+    noNotisBottom?: number;
+    /** No notifications icon left X */
+    noNotisLeft?: number;
+    /** No notifications icon right X */
+    noNotisRight?: number;
+    /** Cell signal level (0-4) */
+    cellLevel?: number;
+    /** Cell bar 1 top Y */
+    cell1Top?: number;
+    /** Cell bar 1 bottom Y */
+    cell1Bottom?: number;
+    /** Cell bar 1 left X */
+    cell1Left?: number;
+    /** Cell bar 1 right X */
+    cell1Right?: number;
+    /** Cell bar 2 top Y */
+    cell2Top?: number;
+    /** Cell bar 2 bottom Y */
+    cell2Bottom?: number;
+    /** Cell bar 2 left X */
+    cell2Left?: number;
+    /** Cell bar 2 right X */
+    cell2Right?: number;
+    /** Cell bar 3 top Y */
+    cell3Top?: number;
+    /** Cell bar 3 bottom Y */
+    cell3Bottom?: number;
+    /** Cell bar 3 left X */
+    cell3Left?: number;
+    /** Cell bar 3 right X */
+    cell3Right?: number;
+    /** Cell bar 4 top Y */
+    cell4Top?: number;
+    /** Cell bar 4 bottom Y */
+    cell4Bottom?: number;
+    /** Cell bar 4 left X */
+    cell4Left?: number;
+    /** Cell bar 4 right X */
+    cell4Right?: number;
+    /** WiFi icon top Y */
+    wifiTop?: number;
+    /** WiFi icon bottom Y */
+    wifiBottom?: number;
+    /** WiFi icon left X */
+    wifiLeft?: number;
+    /** WiFi icon right X */
+    wifiRight?: number;
+    /** Battery icon top Y */
+    batteryTop?: number;
+    /** Battery icon bottom Y */
+    batteryBottom?: number;
+    /** Battery icon left X */
+    batteryLeft?: number;
+    /** Battery icon right X */
+    batteryRight?: number;
+    /** Home indicator top Y */
+    homeIndicatorTop?: number;
+    /** Home indicator bottom Y */
+    homeIndicatorBottom?: number;
+    /** Home indicator left X */
+    homeIndicatorLeft?: number;
+    /** Home indicator right X */
+    homeIndicatorRight?: number;
+    /** Home indicator color */
+    homeIndicatorColor?: string;
+    /** Status bar elements color (time, cell bars, icons) - defaults to white */
+    statusBarColor?: string;
+}
+export declare function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, currentProps, children, time, timeRight, timeBottom, timeFontSize, timeLetterSpacing, timeColor, noNotisTop, noNotisBottom, noNotisLeft, noNotisRight, cellLevel, cell1Top, cell1Bottom, cell1Left, cell1Right, cell2Top, cell2Bottom, cell2Left, cell2Right, cell3Top, cell3Bottom, cell3Left, cell3Right, cell4Top, cell4Bottom, cell4Left, cell4Right, wifiTop, wifiBottom, wifiLeft, wifiRight, batteryTop, batteryBottom, batteryLeft, batteryRight, homeIndicatorTop, homeIndicatorBottom, homeIndicatorLeft, homeIndicatorRight, homeIndicatorColor, statusBarColor, }: BaseDmCompositionProps): import("react/jsx-runtime").JSX.Element | null;
+export default BaseDmComposition;

package/dist/render/compositions/DmComposition/BaseDmComposition.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseDmComposition = BaseDmComposition;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Base DM Composition Component
+ *
+ * Shared component for DM-style compositions (Instagram, iMessage, etc.)
+ * Provides zoom/pan, debug overlay with crosshair, reference image overlay,
+ * font loading, and shared iOS chrome (status bar, home indicator).
+ */
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const fonts_1 = require("../../utils/fonts");
+const DebugOverlay_1 = require("./DebugOverlay");
+function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay = false, referenceImageUrl, showReferenceImage = false, referenceOpacity = 50, currentProps, children, 
+// Status bar - Time (defaults from IG DM)
+time = '9:41', timeRight = 262, timeBottom = 125, timeFontSize = 52, timeLetterSpacing = 1.6, timeColor = '#ffffff', 
+// Status bar - No notifications
+noNotisTop = 77, noNotisBottom = 120, noNotisLeft = 272, noNotisRight = 312, 
+// Status bar - Cell signal
+cellLevel = 4, cell1Top = 102, cell1Bottom = 116, cell1Left = 865, cell1Right = 875, cell2Top = 95, cell2Bottom = 116, cell2Left = 881, cell2Right = 891, cell3Top = 87, cell3Bottom = 116, cell3Left = 897, cell3Right = 907, cell4Top = 79, cell4Bottom = 116, cell4Left = 913, cell4Right = 923, 
+// Status bar - WiFi
+wifiTop = 79, wifiBottom = 116, wifiLeft = 945, wifiRight = 996, 
+// Status bar - Battery
+batteryTop = 78, batteryBottom = 117, batteryLeft = 1018, batteryRight = 1100, 
+// Home indicator
+homeIndicatorTop = 2583, homeIndicatorBottom = 2597, homeIndicatorLeft = 387, homeIndicatorRight = 818, homeIndicatorColor = '#ffffff', 
+// Status bar color
+statusBarColor = '#ffffff', }) {
+    const [zoom, setZoom] = (0, react_1.useState)(100);
+    const [scrollX, setScrollX] = (0, react_1.useState)(0);
+    const [scrollY, setScrollY] = (0, react_1.useState)(0);
+    const [referenceVisible, setReferenceVisible] = (0, react_1.useState)(true);
+    const [fontsLoaded, setFontsLoaded] = (0, react_1.useState)(false);
+    // Clamp values to valid ranges
+    const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
+    // Load fonts before rendering - required for accurate text measurement
+    (0, react_1.useEffect)(() => {
+        const handle = (0, remotion_1.delayRender)('Loading fonts for DmComposition');
+        const loadFonts = async () => {
+            await (0, fonts_1.preloadFonts)();
+            // Wait for document.fonts.ready to ensure fonts are fully available for DOM measurement
+            if (typeof document !== 'undefined' && document.fonts?.ready) {
+                await document.fonts.ready;
+            }
+            // Verify fonts are actually loaded
+            if (typeof document !== 'undefined' && document.fonts) {
+                const sfProLoaded = document.fonts.check('normal 51px "SF Pro"');
+                const sfProDisplayLoaded = document.fonts.check('normal 51px "SF Pro Display"');
+                const appleEmojiLoaded = document.fonts.check('normal 51px "Apple Color Emoji"');
+                console.log('[BaseDmComposition] Font check - SF Pro:', sfProLoaded, 'SF Pro Display:', sfProDisplayLoaded, 'Apple Color Emoji:', appleEmojiLoaded);
+            }
+        };
+        loadFonts()
+            .then(() => {
+            setFontsLoaded(true);
+            (0, remotion_1.continueRender)(handle);
+        })
+            .catch((err) => {
+            console.error('Failed to load fonts:', err);
+            // Continue anyway to avoid hanging
+            setFontsLoaded(true);
+            (0, remotion_1.continueRender)(handle);
+        });
+    }, []);
+    // Zoom callback for debug overlay
+    const handleZoomChange = (0, react_1.useCallback)((newZoom, newScrollX, newScrollY) => {
+        setZoom(newZoom);
+        setScrollX(newScrollX);
+        setScrollY(newScrollY);
+    }, []);
+    // Toggle reference image visibility
+    const handleToggleReference = (0, react_1.useCallback)(() => {
+        setReferenceVisible((prev) => !prev);
+    }, []);
+    const zoomScale = zoom / 100;
+    // Determine if we need to invert icons for dark status bar color
+    // If statusBarColor is black or very dark, invert the white icons
+    const isStatusBarDark = statusBarColor === '#000000' || statusBarColor === '#000' || statusBarColor.toLowerCase() === 'black';
+    const iconFilter = isStatusBarDark ? 'invert(1)' : 'none';
+    // Cell bar colors based on status bar color
+    const cellBarActiveColor = statusBarColor;
+    const cellBarInactiveColor = isStatusBarDark ? '#c0c0c0' : '#3c4043';
+    // Don't render until fonts are loaded
+    if (!fontsLoaded) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: {
+            backgroundColor,
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: width,
+                    height: height,
+                    transform: `translate(${-scrollX}px, ${-scrollY}px) scale(${zoomScale})`,
+                    transformOrigin: 'top left',
+                }, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: timeBottom - timeFontSize,
+                            left: 0,
+                            width: timeRight,
+                            height: timeFontSize,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
+                            fontWeight: 600,
+                            fontSize: timeFontSize,
+                            letterSpacing: timeLetterSpacing,
+                            color: statusBarColor,
+                            zIndex: 30,
+                            pointerEvents: 'none',
+                        }, children: time }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-no-notis.png'), style: {
+                            position: 'absolute',
+                            top: noNotisTop,
+                            left: noNotisLeft,
+                            width: noNotisRight - noNotisLeft,
+                            height: noNotisBottom - noNotisTop,
+                            objectFit: 'fill',
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                            filter: iconFilter,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: cell1Top,
+                            left: cell1Left,
+                            width: cell1Right - cell1Left,
+                            height: cell1Bottom - cell1Top,
+                            backgroundColor: cellLevel >= 1 ? cellBarActiveColor : cellBarInactiveColor,
+                            borderRadius: 2,
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: cell2Top,
+                            left: cell2Left,
+                            width: cell2Right - cell2Left,
+                            height: cell2Bottom - cell2Top,
+                            backgroundColor: cellLevel >= 2 ? cellBarActiveColor : cellBarInactiveColor,
+                            borderRadius: 2,
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: cell3Top,
+                            left: cell3Left,
+                            width: cell3Right - cell3Left,
+                            height: cell3Bottom - cell3Top,
+                            backgroundColor: cellLevel >= 3 ? cellBarActiveColor : cellBarInactiveColor,
+                            borderRadius: 2,
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: cell4Top,
+                            left: cell4Left,
+                            width: cell4Right - cell4Left,
+                            height: cell4Bottom - cell4Top,
+                            backgroundColor: cellLevel >= 4 ? cellBarActiveColor : cellBarInactiveColor,
+                            borderRadius: 2,
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                        } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-wifi.png'), style: {
+                            position: 'absolute',
+                            top: wifiTop,
+                            left: wifiLeft,
+                            width: wifiRight - wifiLeft,
+                            height: wifiBottom - wifiTop,
+                            objectFit: 'fill',
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                            filter: iconFilter,
+                        } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-battery.png'), style: {
+                            position: 'absolute',
+                            top: batteryTop,
+                            left: batteryLeft,
+                            width: batteryRight - batteryLeft,
+                            height: batteryBottom - batteryTop,
+                            objectFit: 'fill',
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                            filter: iconFilter,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: homeIndicatorTop,
+                            left: homeIndicatorLeft,
+                            width: homeIndicatorRight - homeIndicatorLeft,
+                            height: homeIndicatorBottom - homeIndicatorTop,
+                            backgroundColor: homeIndicatorColor,
+                            borderRadius: (homeIndicatorBottom - homeIndicatorTop) / 2,
+                            pointerEvents: 'none',
+                            zIndex: 50,
+                        } }), referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 100,
+                            pointerEvents: 'none',
+                            opacity: clampedReferenceOpacity / 100,
+                        }, children: (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: referenceImageUrl, style: {
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'cover',
+                                imageRendering: 'pixelated',
+                            } }) }))] }), showDebugOverlay && ((0, jsx_runtime_1.jsx)(DebugOverlay_1.DebugOverlay, { width: width, height: height, zoom: zoom, scrollX: scrollX, scrollY: scrollY, referenceVisible: referenceVisible, onZoomChange: handleZoomChange, onToggleReference: handleToggleReference, currentProps: currentProps }))] }));
+}
+exports.default = BaseDmComposition;

package/dist/render/compositions/DmComposition/DebugOverlay.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Debug Overlay Component
+ *
+ * Shows mouse coordinates, zoom controls, and pixel-snapped crosshair.
+ * Useful for matching elements to a reference screenshot.
+ */
+interface DebugOverlayProps {
+    width: number;
+    height: number;
+    zoom: number;
+    scrollX: number;
+    scrollY: number;
+    referenceVisible: boolean;
+    onZoomChange: (zoom: number, scrollX: number, scrollY: number) => void;
+    onToggleReference: () => void;
+    /** Current prop values for copy-to-clipboard feature */
+    currentProps?: Record<string, unknown>;
+}
+export declare function DebugOverlay({ width, height, zoom, scrollX, scrollY, referenceVisible, onZoomChange, onToggleReference, currentProps, }: DebugOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/render/compositions/DmComposition/DebugOverlay.js

@@ -0,0 +1,258 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebugOverlay = DebugOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Debug Overlay Component
+ *
+ * Shows mouse coordinates, zoom controls, and pixel-snapped crosshair.
+ * Useful for matching elements to a reference screenshot.
+ */
+const react_1 = require("react");
+function DebugOverlay({ width, height, zoom, scrollX, scrollY, referenceVisible, onZoomChange, onToggleReference, currentProps, }) {
+    const [mousePos, setMousePos] = (0, react_1.useState)(null);
+    const [copyFeedback, setCopyFeedback] = (0, react_1.useState)(null);
+    // Store the screen position for crosshair (in percentage for accurate positioning)
+    const [crosshairPos, setCrosshairPos] = (0, react_1.useState)(null);
+    // Store viewport position for zoom calculations
+    const [viewportPos, setViewportPos] = (0, react_1.useState)(null);
+    // Pinned crosshair state (canvas coordinates)
+    const [pinnedPos, setPinnedPos] = (0, react_1.useState)(null);
+    const [pinnedCrosshairPos, setPinnedCrosshairPos] = (0, react_1.useState)(null);
+    // Drag state
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const lastDragPos = (0, react_1.useRef)(null);
+    const zoomScale = zoom / 100;
+    // Recalculate crosshair position when zoom/scroll changes
+    (0, react_1.useEffect)(() => {
+        if (mousePos === null)
+            return;
+        // Convert snapped canvas position back to screen position for crosshair
+        const snappedScreenX = (mousePos.x + 0.5) * zoomScale - scrollX;
+        const snappedScreenY = (mousePos.y + 0.5) * zoomScale - scrollY;
+        // Calculate the size of 1 canvas pixel in viewport space
+        const pixelWidth = zoomScale;
+        const pixelHeight = zoomScale;
+        setCrosshairPos({
+            xPercent: (snappedScreenX / width) * 100,
+            yPercent: (snappedScreenY / height) * 100,
+            pixelWidthPercent: (pixelWidth / width) * 100,
+            pixelHeightPercent: (pixelHeight / height) * 100,
+        });
+    }, [mousePos, zoomScale, scrollX, scrollY, width, height]);
+    // Recalculate pinned crosshair position when zoom/scroll changes
+    (0, react_1.useEffect)(() => {
+        if (pinnedPos === null) {
+            setPinnedCrosshairPos(null);
+            return;
+        }
+        // Convert pinned canvas position back to screen position
+        const snappedScreenX = (pinnedPos.x + 0.5) * zoomScale - scrollX;
+        const snappedScreenY = (pinnedPos.y + 0.5) * zoomScale - scrollY;
+        // Calculate the size of 1 canvas pixel in viewport space
+        const pixelWidth = zoomScale;
+        const pixelHeight = zoomScale;
+        setPinnedCrosshairPos({
+            xPercent: (snappedScreenX / width) * 100,
+            yPercent: (snappedScreenY / height) * 100,
+            pixelWidthPercent: (pixelWidth / width) * 100,
+            pixelHeightPercent: (pixelHeight / height) * 100,
+        });
+    }, [pinnedPos, zoomScale, scrollX, scrollY, width, height]);
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        // Screen position relative to overlay
+        const screenX = e.clientX - rect.left;
+        const screenY = e.clientY - rect.top;
+        // Remotion scales the preview to fit the panel
+        const remotionScaleX = width / rect.width;
+        const remotionScaleY = height / rect.height;
+        // Convert screen position to viewport position (in canvas coordinate space)
+        const vpX = screenX * remotionScaleX;
+        const vpY = screenY * remotionScaleY;
+        setViewportPos({ x: vpX, y: vpY });
+        // Apply zoom/scroll to get actual canvas position
+        const canvasX = (vpX + scrollX) / zoomScale;
+        const canvasY = (vpY + scrollY) / zoomScale;
+        // Snap to pixel grid (floor to get the pixel we're hovering over)
+        const snappedCanvasX = Math.floor(canvasX);
+        const snappedCanvasY = Math.floor(canvasY);
+        setMousePos({ x: snappedCanvasX, y: snappedCanvasY });
+        // Handle dragging
+        if (isDragging && lastDragPos.current) {
+            const deltaX = (e.clientX - lastDragPos.current.x) * remotionScaleX;
+            const deltaY = (e.clientY - lastDragPos.current.y) * remotionScaleY;
+            const newScrollX = Math.max(0, scrollX - deltaX);
+            const newScrollY = Math.max(0, scrollY - deltaY);
+            onZoomChange(zoom, newScrollX, newScrollY);
+            lastDragPos.current = { x: e.clientX, y: e.clientY };
+        }
+    }, [width, height, zoomScale, scrollX, scrollY, isDragging, zoom, onZoomChange]);
+    const handleMouseDown = (0, react_1.useCallback)((e) => {
+        // Don't start drag if clicking on interactive elements
+        const tagName = e.target.tagName;
+        if (tagName === 'BUTTON' || tagName === 'INPUT' || tagName === 'LABEL')
+            return;
+        e.preventDefault();
+        // Ctrl+click to pin crosshair
+        if (e.ctrlKey || e.metaKey) {
+            if (mousePos) {
+                setPinnedPos({ x: mousePos.x, y: mousePos.y });
+            }
+            return;
+        }
+        // Regular click clears pinned crosshair
+        if (pinnedPos) {
+            setPinnedPos(null);
+            return;
+        }
+        setIsDragging(true);
+        lastDragPos.current = { x: e.clientX, y: e.clientY };
+    }, [mousePos, pinnedPos]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+        lastDragPos.current = null;
+    }, []);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setMousePos(null);
+        setCrosshairPos(null);
+        setViewportPos(null);
+        setIsDragging(false);
+        lastDragPos.current = null;
+    }, []);
+    const handleWheel = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!viewportPos)
+            return;
+        const { x: vpX, y: vpY } = viewportPos;
+        // Calculate canvas position under mouse at current zoom
+        const canvasX = (vpX + scrollX) / zoomScale;
+        const canvasY = (vpY + scrollY) / zoomScale;
+        // Calculate new zoom (multiplicative 10% per scroll, max 10000% to see individual pixels)
+        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+        const newZoom = Math.max(100, Math.min(10000, Math.round(zoom * zoomFactor)));
+        const newZoomScale = newZoom / 100;
+        // Calculate new scroll to keep canvas point under mouse
+        const newScrollX = Math.max(0, canvasX * newZoomScale - vpX);
+        const newScrollY = Math.max(0, canvasY * newZoomScale - vpY);
+        onZoomChange(newZoom, newScrollX, newScrollY);
+    }, [zoom, zoomScale, scrollX, scrollY, viewportPos, onZoomChange]);
+    const handleCopyDefaults = (0, react_1.useCallback)(() => {
+        if (!currentProps)
+            return;
+        // Format as TypeScript code for easy pasting
+        const lines = Object.entries(currentProps)
+            .filter(([key]) => !['showDebugOverlay', 'referenceImageUrl', 'showReferenceImage', 'referenceOpacity', 'durationInFrames', 'fps'].includes(key))
+            .map(([key, value]) => {
+            if (typeof value === 'string') {
+                return `  ${key}: '${value}',`;
+            }
+            return `  ${key}: ${value},`;
+        });
+        const code = lines.join('\n');
+        navigator.clipboard.writeText(code).then(() => {
+            setCopyFeedback('Copied!');
+            setTimeout(() => setCopyFeedback(null), 2000);
+        }).catch(() => {
+            setCopyFeedback('Failed to copy');
+            setTimeout(() => setCopyFeedback(null), 2000);
+        });
+    }, [currentProps]);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-debug-overlay-root": true, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 200,
+        }, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onWheel: handleWheel, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+        [data-debug-overlay-root], [data-debug-overlay-root] * {
+          cursor: none !important;
+        }
+      ` }), pinnedCrosshairPos && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: `${pinnedCrosshairPos.xPercent}%`,
+                            width: `${Math.max(pinnedCrosshairPos.pixelWidthPercent, 0.1)}%`,
+                            height: '100%',
+                            backgroundColor: '#00FFFF',
+                            pointerEvents: 'none',
+                            transform: 'translateX(-50%)',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: `${pinnedCrosshairPos.yPercent}%`,
+                            left: 0,
+                            width: '100%',
+                            height: `${Math.max(pinnedCrosshairPos.pixelHeightPercent, 0.1)}%`,
+                            backgroundColor: '#00FFFF',
+                            pointerEvents: 'none',
+                            transform: 'translateY(-50%)',
+                        } })] })), crosshairPos && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: `${crosshairPos.xPercent}%`,
+                            width: `${Math.max(crosshairPos.pixelWidthPercent, 0.1)}%`,
+                            height: '100%',
+                            backgroundColor: '#FF0000',
+                            pointerEvents: 'none',
+                            transform: 'translateX(-50%)',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: `${crosshairPos.yPercent}%`,
+                            left: 0,
+                            width: '100%',
+                            height: `${Math.max(crosshairPos.pixelHeightPercent, 0.1)}%`,
+                            backgroundColor: '#FF0000',
+                            pointerEvents: 'none',
+                            transform: 'translateY(-50%)',
+                        } })] })), mousePos && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    bottom: 32,
+                    left: 32,
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                    color: '#00FF00',
+                    fontFamily: 'monospace',
+                    fontSize: 48,
+                    fontWeight: 'bold',
+                    padding: '20px 32px',
+                    borderRadius: 12,
+                    pointerEvents: 'none',
+                    border: '3px solid rgba(0, 255, 0, 0.5)',
+                    minWidth: 280,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: ["X: ", mousePos.x] }), (0, jsx_runtime_1.jsxs)("div", { children: ["Y: ", mousePos.y] }), pinnedPos && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 16, paddingTop: 16, borderTop: '2px solid rgba(0, 255, 255, 0.5)' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { color: '#00FFFF', fontSize: 32 }, children: "Pinned:" }), (0, jsx_runtime_1.jsxs)("div", { style: { color: '#00FFFF' }, children: ["X: ", pinnedPos.x] }), (0, jsx_runtime_1.jsxs)("div", { style: { color: '#00FFFF' }, children: ["Y: ", pinnedPos.y] })] }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    bottom: 32,
+                    right: 32,
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                    color: '#FFFF00',
+                    fontFamily: 'monospace',
+                    fontSize: 40,
+                    fontWeight: 'bold',
+                    padding: '20px 32px',
+                    borderRadius: 12,
+                    border: '3px solid rgba(255, 255, 0, 0.5)',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { pointerEvents: 'none' }, children: [width, " x ", height] }), (0, jsx_runtime_1.jsxs)("div", { style: { color: '#00FFFF', marginTop: 12, pointerEvents: 'none' }, children: ["Zoom: ", zoom, "%"] }), (0, jsx_runtime_1.jsx)("div", { style: { color: '#888', fontSize: 24, marginTop: 8, pointerEvents: 'none' }, children: "Scroll to zoom, drag to pan" }), (0, jsx_runtime_1.jsxs)("label", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 12,
+                            marginTop: 16,
+                            cursor: 'pointer',
+                            userSelect: 'none',
+                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: referenceVisible, onChange: onToggleReference, style: {
+                                    width: 28,
+                                    height: 28,
+                                    cursor: 'pointer',
+                                    accentColor: '#4CAF50',
+                                } }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#FFFFFF', fontSize: 28 }, children: "Show Reference" })] }), currentProps && ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyDefaults, style: {
+                            marginTop: 16,
+                            padding: '12px 24px',
+                            backgroundColor: copyFeedback === 'Copied!' ? '#4CAF50' : '#333',
+                            color: '#FFFFFF',
+                            border: '2px solid #555',
+                            borderRadius: 6,
+                            cursor: 'pointer',
+                            fontSize: 24,
+                            fontFamily: 'monospace',
+                        }, children: copyFeedback || 'Copy Defaults' }))] })] }));
+}

package/dist/render/compositions/DmComposition/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * DmComposition - Shared components for DM-style compositions
+ */
+export { BaseDmComposition } from './BaseDmComposition';
+export type { BaseDmCompositionProps } from './BaseDmComposition';
+export { DebugOverlay } from './DebugOverlay';

package/dist/render/compositions/DmComposition/index.js

@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * DmComposition - Shared components for DM-style compositions
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebugOverlay = exports.BaseDmComposition = void 0;
+var BaseDmComposition_1 = require("./BaseDmComposition");
+Object.defineProperty(exports, "BaseDmComposition", { enumerable: true, get: function () { return BaseDmComposition_1.BaseDmComposition; } });
+var DebugOverlay_1 = require("./DebugOverlay");
+Object.defineProperty(exports, "DebugOverlay", { enumerable: true, get: function () { return DebugOverlay_1.DebugOverlay; } });

package/dist/render/compositions/IMessageDmComposition/convertPropsToElements.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Convert iMessage DM Composition props to ImageEditorElements
+ *
+ * This module transforms the composition props into renderable message elements.
+ * Header, footer, and status bar elements are rendered directly in the composition JSX.
+ */
+import type { ImageEditorElement } from '../../types/element';
+import type { IMessageDmCompositionProps } from './types';
+/** Tail render data for SVG rendering */
+export interface TailRenderData {
+    id: string;
+    isUser: boolean;
+    messageLeft: number;
+    messageRight: number;
+    messageBottom: number;
+}
+/** Result of converting props to elements */
+export interface ConversionResult {
+    elements: ImageEditorElement[];
+    imageUrls: Record<string, string>;
+    tails: TailRenderData[];
+    width: number;
+    height: number;
+}
+/** Input ID prefix for sender images */
+export declare const SENDER_IMAGE_INPUT_ID_PREFIX = "sender-image-";
+export declare function convertPropsToElements(props: IMessageDmCompositionProps): ConversionResult;