ugcinc 3.84.6 → 3.85.0

package/dist/render/compositions/IMessageDmComposition/types.js

@@ -0,0 +1,225 @@
+"use strict";
+/**
+ * iMessage DM Composition Types
+ *
+ * Types for the iMessage DM conversation composition.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iMessageDmPropsSchema = void 0;
+const zod_1 = require("zod");
+/**
+ * Zod schema for iMessage DM composition props (for Remotion)
+ */
+exports.iMessageDmPropsSchema = zod_1.z.object({
+    // Canvas
+    width: zod_1.z.number().optional(),
+    height: zod_1.z.number().optional(),
+    durationInFrames: zod_1.z.number().optional(),
+    fps: zod_1.z.number().optional(),
+    // Debug
+    showDebugOverlay: zod_1.z.boolean().optional(),
+    referenceImageUrl: zod_1.z.string().optional(),
+    showReferenceImage: zod_1.z.boolean().optional(),
+    referenceOpacity: zod_1.z.number().optional(),
+    // Light mode
+    lightMode: zod_1.z.boolean().optional(),
+    // iMessage header
+    headerTop: zod_1.z.number().optional(),
+    headerBottom: zod_1.z.number().optional(),
+    headerBackgroundColor: zod_1.z.string().optional(),
+    // Header profile section
+    profilePicUrl: zod_1.z.string().optional(),
+    profilePicTop: zod_1.z.number().optional(),
+    profilePicBottom: zod_1.z.number().optional(),
+    profilePicLeft: zod_1.z.number().optional(),
+    profilePicRight: zod_1.z.number().optional(),
+    username: zod_1.z.string().optional(),
+    usernameTop: zod_1.z.number().optional(),
+    usernameBottom: zod_1.z.number().optional(),
+    usernameLeft: zod_1.z.number().optional(),
+    usernameRight: zod_1.z.number().optional(),
+    usernameFontSize: zod_1.z.number().optional(),
+    usernameLetterSpacing: zod_1.z.number().optional(),
+    usernameColor: zod_1.z.string().optional(),
+    usernameArrowOffsetX: zod_1.z.number().optional(),
+    usernameArrowOffsetY: zod_1.z.number().optional(),
+    usernameArrowWidth: zod_1.z.number().optional(),
+    usernameArrowHeight: zod_1.z.number().optional(),
+    // Back arrow
+    backArrowTop: zod_1.z.number().optional(),
+    backArrowBottom: zod_1.z.number().optional(),
+    backArrowLeft: zod_1.z.number().optional(),
+    backArrowRight: zod_1.z.number().optional(),
+    // Unread badge
+    unreadBadgeText: zod_1.z.string().optional(),
+    unreadBadgeTop: zod_1.z.number().optional(),
+    unreadBadgeBottom: zod_1.z.number().optional(),
+    unreadBadgeLeft: zod_1.z.number().optional(),
+    unreadBadgeFontSize: zod_1.z.number().optional(),
+    unreadBadgeLetterSpacing: zod_1.z.number().optional(),
+    unreadBadgeTextColor: zod_1.z.string().optional(),
+    unreadBadgeBorderRadius: zod_1.z.number().optional(),
+    unreadBadgePaddingLeft: zod_1.z.number().optional(),
+    unreadBadgePaddingRight: zod_1.z.number().optional(),
+    // Camera icon
+    cameraIconTop: zod_1.z.number().optional(),
+    cameraIconBottom: zod_1.z.number().optional(),
+    cameraIconLeft: zod_1.z.number().optional(),
+    cameraIconRight: zod_1.z.number().optional(),
+    dividerLineY: zod_1.z.number().optional(),
+    dividerLineColor: zod_1.z.string().optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    // Status bar - Time
+    time: zod_1.z.string().optional(),
+    timeRight: zod_1.z.number().optional(),
+    timeBottom: zod_1.z.number().optional(),
+    timeFontSize: zod_1.z.number().optional(),
+    timeLetterSpacing: zod_1.z.number().optional(),
+    timeColor: zod_1.z.string().optional(),
+    // Status bar - No notifications
+    noNotisTop: zod_1.z.number().optional(),
+    noNotisBottom: zod_1.z.number().optional(),
+    noNotisLeft: zod_1.z.number().optional(),
+    noNotisRight: zod_1.z.number().optional(),
+    // Status bar - Cell signal
+    cellLevel: zod_1.z.number().min(0).max(4).optional(),
+    cell1Top: zod_1.z.number().optional(),
+    cell1Bottom: zod_1.z.number().optional(),
+    cell1Left: zod_1.z.number().optional(),
+    cell1Right: zod_1.z.number().optional(),
+    cell2Top: zod_1.z.number().optional(),
+    cell2Bottom: zod_1.z.number().optional(),
+    cell2Left: zod_1.z.number().optional(),
+    cell2Right: zod_1.z.number().optional(),
+    cell3Top: zod_1.z.number().optional(),
+    cell3Bottom: zod_1.z.number().optional(),
+    cell3Left: zod_1.z.number().optional(),
+    cell3Right: zod_1.z.number().optional(),
+    cell4Top: zod_1.z.number().optional(),
+    cell4Bottom: zod_1.z.number().optional(),
+    cell4Left: zod_1.z.number().optional(),
+    cell4Right: zod_1.z.number().optional(),
+    // Status bar - WiFi
+    wifiTop: zod_1.z.number().optional(),
+    wifiBottom: zod_1.z.number().optional(),
+    wifiLeft: zod_1.z.number().optional(),
+    wifiRight: zod_1.z.number().optional(),
+    // Status bar - Battery
+    batteryTop: zod_1.z.number().optional(),
+    batteryBottom: zod_1.z.number().optional(),
+    batteryLeft: zod_1.z.number().optional(),
+    batteryRight: zod_1.z.number().optional(),
+    // Home indicator
+    homeIndicatorTop: zod_1.z.number().optional(),
+    homeIndicatorBottom: zod_1.z.number().optional(),
+    homeIndicatorLeft: zod_1.z.number().optional(),
+    homeIndicatorRight: zod_1.z.number().optional(),
+    homeIndicatorColor: zod_1.z.string().optional(),
+    // iMessage footer
+    plusButtonTop: zod_1.z.number().optional(),
+    plusButtonBottom: zod_1.z.number().optional(),
+    plusButtonLeft: zod_1.z.number().optional(),
+    plusButtonRight: zod_1.z.number().optional(),
+    footerTop: zod_1.z.number().optional(),
+    footerBottom: zod_1.z.number().optional(),
+    footerLeft: zod_1.z.number().optional(),
+    footerRight: zod_1.z.number().optional(),
+    footerBgColor: zod_1.z.string().optional(),
+    footerBorderRadius: zod_1.z.number().optional(),
+    footerBorderColor: zod_1.z.string().optional(),
+    footerBorderWidth: zod_1.z.number().optional(),
+    messageTextTop: zod_1.z.number().optional(),
+    messageTextBottom: zod_1.z.number().optional(),
+    messageTextLeft: zod_1.z.number().optional(),
+    messageTextRight: zod_1.z.number().optional(),
+    messageTextFontSize: zod_1.z.number().optional(),
+    messageTextLetterSpacing: zod_1.z.number().optional(),
+    messageTextColor: zod_1.z.string().optional(),
+    messageText: zod_1.z.string().optional(),
+    // Message area bounds
+    messageAreaTop: zod_1.z.number().optional(),
+    messageAreaBottom: zod_1.z.number().optional(),
+    // Message colors
+    senderBubbleColor: zod_1.z.string().optional(),
+    recipientBubbleColor: zod_1.z.string().optional(),
+    bubbleTextColor: zod_1.z.string().optional(),
+    recipientTextColor: zod_1.z.string().optional(),
+    // Message typography
+    messageFontSize: zod_1.z.number().optional(),
+    messageLineHeight: zod_1.z.number().optional(),
+    messageLetterSpacing: zod_1.z.number().optional(),
+    // Message padding (inside bubble)
+    messagePaddingTop: zod_1.z.number().optional(),
+    messagePaddingBottom: zod_1.z.number().optional(),
+    senderPaddingLeft: zod_1.z.number().optional(),
+    senderPaddingRight: zod_1.z.number().optional(),
+    multiLineSenderPaddingLeft: zod_1.z.number().optional(),
+    recipientPaddingLeft: zod_1.z.number().optional(),
+    recipientPaddingRight: zod_1.z.number().optional(),
+    multiLineRecipientPaddingRight: zod_1.z.number().optional(),
+    // Bubble corner radii
+    bubbleRadiusNormal: zod_1.z.number().optional(),
+    bubbleRadiusGrouped: zod_1.z.number().optional(),
+    // Message spacing
+    messageGapInGroup: zod_1.z.number().optional(),
+    messageGapSameUser: zod_1.z.number().optional(),
+    messageGapDifferentUser: zod_1.z.number().optional(),
+    // Bubble positioning
+    recipientBubbleLeft: zod_1.z.number().optional(),
+    senderBubbleRight: zod_1.z.number().optional(),
+    bubbleMaxWidth: zod_1.z.number().optional(),
+    // Sender image attachment
+    senderImageLeft: zod_1.z.number().optional(),
+    senderImageHeight: zod_1.z.number().optional(),
+    senderImageGapToText: zod_1.z.number().optional(),
+    senderImageBorderRadius: zod_1.z.number().optional(),
+    // Message area header text
+    messageHeaderImessageText: zod_1.z.string().optional(),
+    messageHeaderTimestampText: zod_1.z.string().optional(),
+    messageHeaderTimestampGap: zod_1.z.number().optional(),
+    messageHeaderImessageGap: zod_1.z.number().optional(),
+    messageHeaderTextColor: zod_1.z.string().optional(),
+    messageHeaderFontSize: zod_1.z.number().optional(),
+    messageHeaderLetterSpacing: zod_1.z.number().optional(),
+    messageHeaderLeft: zod_1.z.number().optional(),
+    messageHeaderRight: zod_1.z.number().optional(),
+    // Message tails (SVG-based)
+    showMessageTails: zod_1.z.boolean().optional(),
+    // Recipient tail anchor points
+    recipientTailSideY: zod_1.z.number().optional(),
+    recipientTailCurveStartY: zod_1.z.number().optional(),
+    recipientTailTipX: zod_1.z.number().optional(),
+    recipientTailTipY: zod_1.z.number().optional(),
+    recipientTailBottomX: zod_1.z.number().optional(),
+    recipientTailBottomY: zod_1.z.number().optional(),
+    // Recipient tail curve bend
+    recipientTailTopBend: zod_1.z.number().optional(),
+    recipientTailBottomBend: zod_1.z.number().optional(),
+    // Sender tail anchor points
+    senderTailSideY: zod_1.z.number().optional(),
+    senderTailCurveStartY: zod_1.z.number().optional(),
+    senderTailTipX: zod_1.z.number().optional(),
+    senderTailTipY: zod_1.z.number().optional(),
+    senderTailBottomX: zod_1.z.number().optional(),
+    senderTailBottomY: zod_1.z.number().optional(),
+    // Sender tail curve bend
+    senderTailTopBend: zod_1.z.number().optional(),
+    senderTailBottomBend: zod_1.z.number().optional(),
+    // Read receipt
+    showReadReceipt: zod_1.z.boolean().optional(),
+    readReceiptText: zod_1.z.string().optional(),
+    readReceiptGap: zod_1.z.number().optional(),
+    readReceiptFontSize: zod_1.z.number().optional(),
+    readReceiptLetterSpacing: zod_1.z.number().optional(),
+    readReceiptColor: zod_1.z.string().optional(),
+    readReceiptLeft: zod_1.z.number().optional(),
+    readReceiptRight: zod_1.z.number().optional(),
+    // Messages
+    messages: zod_1.z.array(zod_1.z.object({
+        id: zod_1.z.string(),
+        sender: zod_1.z.enum(['user', 'recipient']),
+        text: zod_1.z.string(),
+        imageUrl: zod_1.z.string().optional(),
+        groupWithPrevious: zod_1.z.boolean().optional(),
+    })).optional(),
+});

package/dist/render/compositions/ImageEditorComposition.d.ts

@@ -0,0 +1,74 @@
+/**
+ * ImageEditorComposition
+ *
+ * A composition that renders a static image from an ImageEditorConfig.
+ * This composition can be used with both client preview and server rendering
+ * for pixel-perfect consistency.
+ *
+ * NEW: Can also accept raw ImageEditorElement[] with relative positioning,
+ * which will be resolved internally for true single-source rendering.
+ */
+import type { ImageEditorConfig, ImageEditorElement, FitMode, DynamicCropConfig } from '../types';
+export interface ImageEditorCompositionProps {
+    /** The editor configuration to render (legacy format with pre-resolved segments) */
+    config?: ImageEditorConfig;
+    /** Map of source URLs keyed by segment ID or input reference */
+    sources?: Record<string, string>;
+    /** Optional scale multiplier for high-DPI rendering */
+    scale?: number;
+    /** Raw elements with relative positioning (will be resolved internally) */
+    elements?: ImageEditorElement[];
+    /** Canvas width (required when using elements) */
+    width?: number;
+    /** Canvas height (required when using elements) */
+    height?: number;
+    /** Background type: 'image' for image input, 'color' for solid color */
+    backgroundType?: 'image' | 'color';
+    /** Background color (hex) when backgroundType is 'color' */
+    backgroundColor?: string;
+    /** Background fit mode (when using elements) */
+    backgroundFit?: FitMode;
+    /** Background image URL (when using elements) */
+    backgroundUrl?: string;
+    /** Image URLs keyed by inputId (when using elements) */
+    imageUrls?: Record<string, string | null>;
+    /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
+    textValues?: Record<string, string>;
+    /** Dynamic crop configuration */
+    dynamicCrop?: DynamicCropConfig;
+}
+/**
+ * ImageEditorComposition renders a complete image editor configuration.
+ *
+ * Features:
+ * - Background image with fit mode
+ * - Multiple text and image elements
+ * - Z-index ordering
+ * - All text styling (fonts, colors, stroke, background, etc.)
+ * - All image styling (fit, opacity, rotation, border radius)
+ * - Automatic position resolution for relative positioning
+ *
+ * @example
+ * ```tsx
+ * import { ImageEditorComposition } from 'ugcinc-render/compositions';
+ *
+ * // NEW: Pass raw elements directly (preferred)
+ * <Player
+ *   component={ImageEditorComposition}
+ *   inputProps={{
+ *     elements,
+ *     width: 1080,
+ *     height: 1920,
+ *     backgroundUrl,
+ *     imageUrls,
+ *     textValues
+ *   }}
+ *   durationInFrames={1}
+ *   fps={1}
+ *   compositionWidth={1080}
+ *   compositionHeight={1920}
+ * />
+ * ```
+ */
+export declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, dynamicCrop, }: ImageEditorCompositionProps): import("react/jsx-runtime").JSX.Element;
+export default ImageEditorComposition;

package/dist/render/compositions/ImageEditorComposition.js

@@ -0,0 +1,351 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageEditorComposition = ImageEditorComposition;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ImageEditorComposition
+ *
+ * A composition that renders a static image from an ImageEditorConfig.
+ * This composition can be used with both client preview and server rendering
+ * for pixel-perfect consistency.
+ *
+ * NEW: Can also accept raw ImageEditorElement[] with relative positioning,
+ * which will be resolved internally for true single-source rendering.
+ */
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const TextElement_1 = require("../components/TextElement");
+const ImageElement_1 = require("../components/ImageElement");
+const positionResolver_1 = require("../utils/positionResolver");
+const cropBounds_1 = require("../utils/cropBounds");
+/**
+ * Get all segments from all channels, sorted by zIndex
+ */
+function getSortedSegments(config) {
+    const allSegments = [];
+    for (const channel of config.channels) {
+        allSegments.push(...channel.segments);
+    }
+    // Sort by zIndex (lower first, so higher zIndex renders on top)
+    return allSegments.sort((a, b) => {
+        const aZ = a.zIndex ?? 0;
+        const bZ = b.zIndex ?? 0;
+        return aZ - bZ;
+    });
+}
+/**
+ * Convert a resolved ImageEditorElement to a TextSegment
+ */
+function elementToTextSegment(elem) {
+    const segment = {
+        id: elem.id,
+        type: 'text',
+        source: '',
+        order: elem.zIndex,
+        offset: { type: 'absolute', value: 0 },
+        xOffset: elem.x,
+        yOffset: elem.y,
+        width: elem.width,
+        height: elem.height,
+        zIndex: elem.zIndex,
+        rotation: elem.rotation,
+        opacity: elem.opacity,
+        text: elem.text ?? '',
+        fontType: elem.font ?? 'tiktok',
+        fontSize: elem.fontSize ?? 40,
+        fontWeight: elem.fontWeight ?? 'normal',
+        color: elem.color ?? '#FFFFFF',
+        strokeColor: elem.strokeColor ?? '#000000',
+        strokeWidth: elem.outlineWidth ?? 0,
+        lineHeight: elem.lineHeight ?? 1.2,
+        letterSpacing: elem.letterSpacing ?? 0,
+        alignment: elem.textAlign ?? 'center',
+        verticalAlign: elem.verticalAlign ?? 'middle',
+        backgroundColor: elem.backgroundColor,
+        backgroundOpacity: elem.backgroundOpacity,
+        backgroundBorderRadius: typeof elem.backgroundBorderRadius === 'object' ? elem.backgroundBorderRadius : undefined,
+        paddingTop: elem.paddingTop,
+        paddingRight: elem.paddingRight,
+        paddingBottom: elem.paddingBottom,
+        paddingLeft: elem.paddingLeft,
+        multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
+        multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
+        multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
+        multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
+        autoWidth: elem.autoWidth,
+        boxAlign: elem.boxAlign,
+    };
+    // CONDENSED DEBUG LOG
+    console.log('[Composition] ELEMENT:', JSON.stringify({
+        id: elem.id,
+        text: (elem.text ?? '').substring(0, 20),
+        w: elem.width,
+        h: elem.height,
+        font: elem.font,
+        fontSize: elem.fontSize,
+        autoWidth: elem.autoWidth,
+        pL: elem.paddingLeft,
+        pR: elem.paddingRight,
+    }));
+    return segment;
+}
+/**
+ * Convert a resolved ImageEditorElement to an ImageSegment
+ */
+function elementToImageSegment(elem, source) {
+    return {
+        id: elem.id,
+        type: 'image',
+        source,
+        order: elem.zIndex,
+        offset: { type: 'absolute', value: 0 },
+        xOffset: elem.x,
+        yOffset: elem.y,
+        width: elem.width,
+        height: elem.height,
+        zIndex: elem.zIndex,
+        rotation: elem.rotation,
+        opacity: elem.opacity,
+        fit: elem.fit ?? 'cover',
+        borderRadius: elem.borderRadius,
+    };
+}
+/**
+ * ImageEditorComposition renders a complete image editor configuration.
+ *
+ * Features:
+ * - Background image with fit mode
+ * - Multiple text and image elements
+ * - Z-index ordering
+ * - All text styling (fonts, colors, stroke, background, etc.)
+ * - All image styling (fit, opacity, rotation, border radius)
+ * - Automatic position resolution for relative positioning
+ *
+ * @example
+ * ```tsx
+ * import { ImageEditorComposition } from 'ugcinc-render/compositions';
+ *
+ * // NEW: Pass raw elements directly (preferred)
+ * <Player
+ *   component={ImageEditorComposition}
+ *   inputProps={{
+ *     elements,
+ *     width: 1080,
+ *     height: 1920,
+ *     backgroundUrl,
+ *     imageUrls,
+ *     textValues
+ *   }}
+ *   durationInFrames={1}
+ *   fps={1}
+ *   compositionWidth={1080}
+ *   compositionHeight={1920}
+ * />
+ * ```
+ */
+function ImageEditorComposition({ config, sources = {}, scale = 1, 
+// New direct element props
+elements, width, height, backgroundType = 'image', backgroundColor, backgroundFit = 'cover', backgroundUrl, imageUrls = {}, textValues = {}, dynamicCrop, }) {
+    // Wait for fonts to load before rendering
+    // This prevents measurement using fallback fonts
+    const [fontsLoaded, setFontsLoaded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // Delay render until fonts are loaded
+        const handle = (0, remotion_1.delayRender)('Loading fonts...');
+        const loadFonts = async () => {
+            try {
+                // Check if we're in a browser environment
+                if (typeof document !== 'undefined' && document.fonts) {
+                    console.log('[Composition] Waiting for fonts to load...');
+                    // Wait for all fonts to be ready (this waits for CSS @font-face fonts)
+                    await document.fonts.ready;
+                    // Explicitly trigger loading of all our fonts at various weights
+                    // This ensures the fonts are actually fetched, not just declared
+                    const fontsToLoad = [
+                        // SF Pro
+                        'normal 48px "SF Pro"',
+                        'bold 48px "SF Pro"',
+                        '100 48px "SF Pro"',
+                        '200 48px "SF Pro"',
+                        '300 48px "SF Pro"',
+                        '400 48px "SF Pro"',
+                        '500 48px "SF Pro"',
+                        '600 48px "SF Pro"',
+                        '700 48px "SF Pro"',
+                        '800 48px "SF Pro"',
+                        '900 48px "SF Pro"',
+                        // TikTok Sans
+                        'normal 48px "TikTok Sans"',
+                        'bold 48px "TikTok Sans"',
+                        '400 48px "TikTok Sans"',
+                        '500 48px "TikTok Sans"',
+                        '600 48px "TikTok Sans"',
+                        '700 48px "TikTok Sans"',
+                        '800 48px "TikTok Sans"',
+                        '900 48px "TikTok Sans"',
+                        // Apple Color Emoji
+                        'normal 48px "Apple Color Emoji"',
+                    ];
+                    // Load all fonts in parallel, ignore failures (some weights may not exist)
+                    await Promise.all(fontsToLoad.map(font => document.fonts.load(font).catch(() => [])));
+                    // Wait again after loading to ensure they're all ready
+                    await document.fonts.ready;
+                    // Log final status
+                    console.log('[Composition] Fonts loaded:', {
+                        sfPro: document.fonts.check('normal 48px "SF Pro"'),
+                        tiktok: document.fonts.check('normal 48px "TikTok Sans"'),
+                        emoji: document.fonts.check('normal 48px "Apple Color Emoji"'),
+                        totalFonts: document.fonts.size,
+                    });
+                }
+                setFontsLoaded(true);
+                (0, remotion_1.continueRender)(handle);
+            }
+            catch (err) {
+                console.error('[Composition] Font loading error:', err);
+                // Continue anyway to avoid hanging
+                setFontsLoaded(true);
+                (0, remotion_1.continueRender)(handle);
+            }
+        };
+        loadFonts();
+        // Cleanup in case component unmounts
+        return () => {
+            try {
+                (0, remotion_1.continueRender)(handle);
+            }
+            catch {
+                // Handle may have already been continued
+            }
+        };
+    }, []);
+    // Get dimensions (from new props or legacy config)
+    const canvasWidth = width ?? config?.width ?? 1080;
+    const canvasHeight = height ?? config?.height ?? 1920;
+    // Resolve positions for raw elements (if provided)
+    const resolvedElements = (0, react_1.useMemo)(() => {
+        if (!elements)
+            return null;
+        const result = (0, positionResolver_1.resolveElementPositions)(elements, textValues);
+        if (result.errors.length > 0) {
+            console.warn('Position resolution errors:', result.errors);
+        }
+        return result.elements;
+    }, [elements, textValues]);
+    // Calculate crop bounds when dynamic crop is enabled
+    const cropBounds = (0, react_1.useMemo)(() => {
+        if (!(0, cropBounds_1.isDynamicCropEnabled)(dynamicCrop) || !resolvedElements)
+            return null;
+        return (0, cropBounds_1.calculateCropBounds)(resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues);
+    }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues]);
+    // Convert resolved elements to segments (when using new format)
+    const segmentsFromElements = (0, react_1.useMemo)(() => {
+        if (!resolvedElements)
+            return null;
+        const segments = [];
+        for (const elem of resolvedElements) {
+            if (elem.type === 'text') {
+                // Get text content (either from textValues or element itself)
+                // If no text value and no elem.text, show {{textInputId}} as placeholder
+                const text = elem.textInputId && textValues[elem.textInputId]
+                    ? textValues[elem.textInputId]
+                    : elem.text ?? `{{${elem.textInputId ?? 'text'}}}`;
+                segments.push(elementToTextSegment({ ...elem, text }));
+            }
+            else if (elem.type === 'image') {
+                // Get image URL
+                const url = elem.inputId ? imageUrls[elem.inputId] ?? '' : '';
+                if (url) {
+                    segments.push(elementToImageSegment(elem, url));
+                }
+            }
+        }
+        return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+    }, [resolvedElements, imageUrls, textValues]);
+    const bgFit = backgroundFit ?? 'cover';
+    const bgUrl = backgroundUrl ?? sources.background;
+    // Calculate crop offset for rendering
+    const cropOffsetX = cropBounds?.x ?? 0;
+    const cropOffsetY = cropBounds?.y ?? 0;
+    // Use new format if elements provided, otherwise use legacy config
+    const contentSegments = segmentsFromElements ?? (() => {
+        if (!config)
+            return [];
+        const sorted = getSortedSegments(config);
+        return sorted.filter((s) => s.id !== 'background');
+    })();
+    // Get legacy background segment (if using config)
+    const legacyBackgroundSegment = (0, react_1.useMemo)(() => {
+        if (!config || segmentsFromElements)
+            return null;
+        const sorted = getSortedSegments(config);
+        return sorted.find((s) => s.id === 'background' && s.type === 'image');
+    }, [config, segmentsFromElements]);
+    // Get source URL for a segment (legacy format)
+    const getSource = (segment) => {
+        if (segment.source)
+            return segment.source;
+        if (sources[segment.id])
+            return sources[segment.id];
+        const segmentAny = segment;
+        if (segmentAny.inputRef && sources[segmentAny.inputRef]) {
+            return sources[segmentAny.inputRef];
+        }
+        return undefined;
+    };
+    // Determine background color for the container
+    const containerBgColor = backgroundType === 'color' && backgroundColor
+        ? backgroundColor
+        : '#000000';
+    // Don't render content until fonts are loaded (prevents incorrect measurements)
+    if (!fontsLoaded) {
+        return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { backgroundColor: containerBgColor } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                position: 'absolute',
+                left: -cropOffsetX * scale,
+                top: -cropOffsetY * scale,
+                width: canvasWidth * scale,
+                height: canvasHeight * scale,
+            }, children: [backgroundType === 'image' && bgUrl && segmentsFromElements && ((0, jsx_runtime_1.jsx)(remotion_1.Img, { src: bgUrl, style: {
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        width: canvasWidth * scale,
+                        height: canvasHeight * scale,
+                        objectFit: bgFit,
+                    } })), legacyBackgroundSegment && !segmentsFromElements && ((0, jsx_runtime_1.jsx)(BackgroundImage, { segment: legacyBackgroundSegment, src: getSource(legacyBackgroundSegment), width: canvasWidth, height: canvasHeight, scale: scale })), contentSegments.map((segment) => {
+                    if (segment.type === 'text') {
+                        return ((0, jsx_runtime_1.jsx)(TextElement_1.TextElement, { segment: segment, scale: scale }, segment.id));
+                    }
+                    if (segment.type === 'image') {
+                        // For new format, source is already in segment
+                        // For legacy format, look it up
+                        const src = segment.source || getSource(segment);
+                        if (!src) {
+                            console.warn(`No source found for image segment: ${segment.id}`);
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)(ImageElement_1.ImageElement, { segment: segment, src: src, scale: scale }, segment.id));
+                    }
+                    return null;
+                })] }) }));
+}
+/**
+ * Background image component
+ */
+function BackgroundImage({ segment, src, width, height, scale, }) {
+    if (!src) {
+        return null;
+    }
+    const fit = segment.fit ?? 'cover';
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Img, { src: src, style: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: width * scale,
+            height: height * scale,
+            objectFit: fit,
+        } }));
+}
+exports.default = ImageEditorComposition;