ugcinc 4.27.0 → 5.0.0

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

@@ -1,504 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMessageDmComposition = exports.defaultIMessageDmProps = exports.convertPropsToElements = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * iMessage DM Composition
- *
- * A fully parameterized iMessage DM conversation renderer.
- * Uses BaseDmComposition for shared iOS chrome (status bar, home indicator)
- * and zoom/pan/crosshair functionality.
- */
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ImageEditorComposition_1 = require("../ImageEditorComposition");
-const DmComposition_1 = require("../DmComposition");
-const convertPropsToElements_1 = require("./convertPropsToElements");
-const fonts_1 = require("../../utils/fonts");
-const positionResolver_1 = require("../../utils/positionResolver");
-const cropBounds_1 = require("../../utils/cropBounds");
-// Re-export for crop bounds calculation (convert props to elements for position resolution)
-var convertPropsToElements_2 = require("./convertPropsToElements");
-Object.defineProperty(exports, "convertPropsToElements", { enumerable: true, get: function () { return convertPropsToElements_2.convertPropsToElements; } });
-/**
- * Default composition props for registration
- */
-exports.defaultIMessageDmProps = {
-    showDebugOverlay: false,
-    referenceImageUrl: 'https://media.ugc.inc/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/IMG_3189-hUoucNOmBoT8fihIL7ybuEXwoRrngz.png',
-    showReferenceImage: false,
-    referenceOpacity: 50,
-    lightMode: false,
-    width: 1206,
-    height: 2622,
-    durationInFrames: 90,
-    fps: 30,
-    // Header defaults
-    headerTop: 0,
-    headerBottom: 424,
-    headerBackgroundColor: '#171717',
-    // Profile section defaults
-    profilePicUrl: 'https://media.ugc.inc/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175215011-3-ftQGbunlgHOFdfFtr1PdxxmHD9TAf9.jpg',
-    profilePicTop: 195,
-    profilePicBottom: 347,
-    profilePicLeft: 528,
-    profilePicRight: 680,
-    username: 'aidan gollan',
-    usernameTop: 355,
-    usernameBottom: 404,
-    usernameLeft: 452,
-    usernameRight: 752,
-    usernameFontSize: 36,
-    usernameLetterSpacing: 0.8,
-    usernameColor: '#ffffff',
-    usernameArrowOffsetX: 8,
-    usernameArrowOffsetY: 2,
-    usernameArrowWidth: 14,
-    usernameArrowHeight: 24,
-    // Back arrow defaults
-    backArrowTop: 234,
-    backArrowBottom: 297,
-    backArrowLeft: 50,
-    backArrowRight: 87,
-    // Unread badge defaults
-    unreadBadgeText: '579',
-    unreadBadgeTop: 238,
-    unreadBadgeBottom: 293,
-    unreadBadgeLeft: 108,
-    unreadBadgeFontSize: 36,
-    unreadBadgeLetterSpacing: 0.2,
-    unreadBadgeTextColor: '#ffffff',
-    unreadBadgeBorderRadius: 9999,
-    unreadBadgePaddingLeft: 17,
-    unreadBadgePaddingRight: 17,
-    // Camera icon defaults
-    cameraIconTop: 237,
-    cameraIconBottom: 292,
-    cameraIconLeft: 1053,
-    cameraIconRight: 1134,
-    // Divider line defaults
-    dividerLineY: 425,
-    dividerLineColor: '#262626',
-    // Background
-    backgroundColor: '#000000',
-    // Plus button defaults
-    plusButtonTop: 2390,
-    plusButtonBottom: 2491,
-    plusButtonLeft: 42,
-    plusButtonRight: 143,
-    // Footer defaults
-    footerTop: 2385,
-    footerBottom: 2495,
-    footerLeft: 180,
-    footerRight: 1157,
-    footerBgColor: '#1c1c1e',
-    footerBorderRadius: 55,
-    footerBorderColor: '#3a3a3c',
-    footerBorderWidth: 2,
-    // Message text defaults
-    messageTextTop: 2412,
-    messageTextBottom: 2468,
-    messageTextLeft: 220,
-    messageTextRight: 600,
-    messageTextFontSize: 48,
-    messageTextLetterSpacing: 0,
-    messageTextColor: '#8e8e93',
-    messageText: 'iMessage',
-    // Status bar props (passed to BaseDmComposition - same as IG DM)
-    time: '9:41',
-    timeRight: 262,
-    timeBottom: 125,
-    timeFontSize: 52,
-    timeLetterSpacing: 1.6,
-    noNotisTop: 77,
-    noNotisBottom: 120,
-    noNotisLeft: 272,
-    noNotisRight: 312,
-    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,
-    wifiTop: 79,
-    wifiBottom: 116,
-    wifiLeft: 945,
-    wifiRight: 996,
-    batteryTop: 78,
-    batteryBottom: 117,
-    batteryLeft: 1018,
-    batteryRight: 1100,
-    // Home indicator defaults (passed to BaseDmComposition)
-    homeIndicatorTop: 2583,
-    homeIndicatorBottom: 2597,
-    homeIndicatorLeft: 387,
-    homeIndicatorRight: 818,
-    homeIndicatorColor: '#ffffff',
-    // Message area bounds
-    messageAreaTop: 450,
-    messageAreaBottom: 2310,
-    // Message colors
-    senderBubbleColor: '#1a42d5',
-    recipientBubbleColor: '#303032',
-    bubbleTextColor: '#ffffff',
-    recipientTextColor: '#ffffff',
-    // Message typography
-    messageFontSize: 53,
-    messageLineHeight: 60,
-    messageLetterSpacing: 1.2,
-    // Message padding (inside bubble)
-    messagePaddingTop: 23,
-    messagePaddingBottom: 22,
-    senderPaddingLeft: 34,
-    senderPaddingRight: 48,
-    multiLineSenderPaddingLeft: 34,
-    recipientPaddingLeft: 37,
-    recipientPaddingRight: 36,
-    multiLineRecipientPaddingRight: 48,
-    // Bubble corner radii
-    bubbleRadiusNormal: 51,
-    bubbleRadiusGrouped: 51,
-    // Message spacing
-    messageGapInGroup: 3,
-    messageGapSameUser: 8,
-    messageGapDifferentUser: 70,
-    // Bubble positioning
-    recipientBubbleLeft: 48,
-    senderBubbleRight: 1158,
-    bubbleMaxWidth: 900,
-    // Sender image attachment
-    senderImageLeft: 336,
-    senderImageHeight: 1120,
-    senderImageGapToText: 3,
-    senderImageBorderRadius: 51,
-    // Message area header text (above first message)
-    messageHeaderImessageText: 'iMessage',
-    messageHeaderTimestampText: 'Today 12:16 PM',
-    messageHeaderTimestampGap: 30,
-    messageHeaderImessageGap: 5,
-    messageHeaderTextColor: '#626167',
-    messageHeaderFontSize: 34,
-    messageHeaderLetterSpacing: 1.25,
-    messageHeaderLeft: 0,
-    messageHeaderRight: 1206,
-    // Message tails (SVG-based, on last message in group)
-    showMessageTails: true,
-    // Recipient tail anchor points (offsets from message left & bottom)
-    recipientTailSideY: -53, // Y where tail meets bubble (top of straight line)
-    recipientTailCurveStartY: -28, // Y where straight line ends and top curve begins
-    recipientTailTipX: -16,
-    recipientTailTipY: -1,
-    recipientTailBottomX: 19, // X where bottom curve ends (connects to bubble)
-    recipientTailBottomY: -12, // Y where bottom curve ends (connects to bubble)
-    // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
-    recipientTailTopBend: -0.32, // Top curve bends inward
-    recipientTailBottomBend: 0.3, // Bottom curve bends outward
-    // Sender tail anchor points (offsets from message right & bottom)
-    senderTailSideY: -53, // Y where tail meets bubble (top of straight line)
-    senderTailCurveStartY: -28, // Y where straight line ends and top curve begins
-    senderTailTipX: 16,
-    senderTailTipY: -1,
-    senderTailBottomX: -19, // X where bottom curve ends (connects to bubble)
-    senderTailBottomY: -12, // Y where bottom curve ends (connects to bubble)
-    // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
-    senderTailTopBend: -0.32, // Top curve bends inward
-    senderTailBottomBend: 0.3, // Bottom curve bends outward
-    // Read receipt (under last sender message)
-    showReadReceipt: true,
-    readReceiptText: 'Read 12:16 PM',
-    readReceiptGap: 52,
-    readReceiptFontSize: 35,
-    readReceiptLetterSpacing: 0.9,
-    readReceiptColor: '#626167',
-    readReceiptLeft: 0,
-    readReceiptRight: 1158,
-    // Example messages
-    messages: [
-        { id: 'msg-1', sender: 'user', text: 'heyyy fae, help me slide on this baddie pls 🙏', imageUrl: 'https://media.ugc.inc/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg' },
-        { id: 'msg-2', sender: 'recipient', text: 'don\'t worry king, i gotchu' },
-        { id: 'msg-3', sender: 'recipient', text: 'that is indeed a cute kitty', groupWithPrevious: true },
-        { id: 'msg-4', sender: 'recipient', text: 'try this line out for speed: are you a kitty? because you deserve pets', groupWithPrevious: true },
-    ],
-};
-/**
- * iMessage DM Composition Component
- */
-const IMessageDmComposition = (props) => {
-    const [fontsLoaded, setFontsLoaded] = (0, react_1.useState)(false);
-    // Load fonts before text measurement - required for accurate line breaks
-    (0, react_1.useEffect)(() => {
-        const handle = (0, remotion_1.delayRender)('Loading fonts for IMessageDmComposition');
-        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;
-            }
-            // Give the browser an extra frame to actually apply the fonts for measurement
-            // This is necessary because fonts.ready resolves before fonts are visually applied
-            await new Promise((resolve) => {
-                if (typeof requestAnimationFrame !== 'undefined') {
-                    requestAnimationFrame(() => {
-                        requestAnimationFrame(() => {
-                            resolve();
-                        });
-                    });
-                }
-                else {
-                    resolve();
-                }
-            });
-        };
-        loadFonts()
-            .then(() => {
-            setFontsLoaded(true);
-            (0, remotion_1.continueRender)(handle);
-        })
-            .catch((err) => {
-            console.error('[IMessageDmComposition] Failed to load fonts:', err);
-            // Continue anyway to avoid hanging
-            setFontsLoaded(true);
-            (0, remotion_1.continueRender)(handle);
-        });
-    }, []);
-    // Merge props with defaults
-    const mergedProps = (0, react_1.useMemo)(() => ({
-        ...exports.defaultIMessageDmProps,
-        ...props,
-    }), [props]);
-    // Convert props to elements (for messages only) - only after fonts are loaded
-    const conversionResult = (0, react_1.useMemo)(() => {
-        // Return empty elements until fonts are loaded to avoid incorrect text measurement
-        if (!fontsLoaded) {
-            return { elements: [], imageUrls: {}, tails: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
-        }
-        // Apply light mode colors for message bubbles
-        const propsWithEffectiveColors = {
-            ...mergedProps,
-            recipientBubbleColor: mergedProps.lightMode ? '#dfdfe1' : (mergedProps.recipientBubbleColor ?? '#303032'),
-            recipientTextColor: mergedProps.lightMode ? '#000000' : (mergedProps.recipientTextColor ?? '#ffffff'),
-        };
-        return (0, convertPropsToElements_1.convertPropsToElements)(propsWithEffectiveColors);
-    }, [mergedProps, fontsLoaded]);
-    // Resolve element positions and compute crop bounds when dynamic crop enabled
-    const cropBounds = (0, react_1.useMemo)(() => {
-        const elements = conversionResult.elements;
-        if (!elements.length || !(0, cropBounds_1.isDynamicCropEnabled)(mergedProps.dynamicCrop)) {
-            return undefined;
-        }
-        const result = (0, positionResolver_1.resolveElementPositions)(elements, {});
-        const resolved = result.elements;
-        if (!resolved)
-            return undefined;
-        const w = mergedProps.width ?? 1206;
-        const h = mergedProps.height ?? 2622;
-        return (0, cropBounds_1.calculateCropBounds)(resolved, mergedProps.dynamicCrop, w, h);
-    }, [conversionResult.elements, mergedProps.dynamicCrop, mergedProps.width, mergedProps.height]);
-    // Extract values with defaults
-    const { width = 1206, height = 2622, backgroundColor = '#000000', headerBackgroundColor = '#171717', headerBottom = 424, lightMode = false, 
-    // Profile section
-    profilePicUrl, profilePicTop = 195, profilePicBottom = 347, profilePicLeft = 528, profilePicRight = 680, username = 'aidan gollan', usernameTop = 355, usernameBottom = 404, usernameLeft = 429, usernameRight = 752, usernameFontSize = 36, usernameLetterSpacing = 0.8, usernameColor = '#ffffff', usernameArrowOffsetX = -57, usernameArrowOffsetY = 2, usernameArrowWidth = 14, usernameArrowHeight = 24, 
-    // Back arrow
-    backArrowTop = 234, backArrowBottom = 297, backArrowLeft = 50, backArrowRight = 87, 
-    // Unread badge
-    unreadBadgeText = '579', unreadBadgeTop = 238, unreadBadgeBottom = 293, unreadBadgeLeft = 108, unreadBadgeFontSize = 36, unreadBadgeLetterSpacing = 0.2, unreadBadgeTextColor = '#ffffff', unreadBadgeBorderRadius = 9999, unreadBadgePaddingLeft = 17, unreadBadgePaddingRight = 17, 
-    // Camera icon
-    cameraIconTop = 237, cameraIconBottom = 292, cameraIconLeft = 1053, cameraIconRight = 1134, dividerLineY = 425, dividerLineColor = '#262626', showDebugOverlay = false, referenceImageUrl, showReferenceImage = false, referenceOpacity = 50, 
-    // Status bar props (passed to BaseDmComposition)
-    time = '9:41', timeRight = 262, timeBottom = 125, timeFontSize = 52, timeLetterSpacing = 1.6, noNotisTop = 77, noNotisBottom = 120, noNotisLeft = 272, noNotisRight = 312, 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, wifiTop = 79, wifiBottom = 116, wifiLeft = 945, wifiRight = 996, batteryTop = 78, batteryBottom = 117, batteryLeft = 1018, batteryRight = 1100, 
-    // Home indicator props (passed to BaseDmComposition)
-    homeIndicatorTop = 2583, homeIndicatorBottom = 2597, homeIndicatorLeft = 387, homeIndicatorRight = 818, homeIndicatorColor = '#ffffff', 
-    // Plus button
-    plusButtonTop = 2390, plusButtonBottom = 2491, plusButtonLeft = 42, plusButtonRight = 143, 
-    // Footer
-    footerTop = 2385, footerBottom = 2495, footerLeft = 180, footerRight = 1157, footerBgColor = '#1c1c1e', footerBorderRadius = 55, footerBorderColor = '#3a3a3c', footerBorderWidth = 2, 
-    // Bubble colors
-    senderBubbleColor = '#1a42d5', recipientBubbleColor = '#303032', 
-    // Tail props - recipient (offsets from message left & bottom)
-    recipientTailSideY = -53, recipientTailCurveStartY = -28, recipientTailTipX = -16, recipientTailTipY = -1, recipientTailBottomX = 19, recipientTailBottomY = -12, recipientTailTopBend = -0.32, recipientTailBottomBend = 0.3, 
-    // Tail props - sender (offsets from message right & bottom)
-    senderTailSideY = -53, senderTailCurveStartY = -28, senderTailTipX = 16, senderTailTipY = -1, senderTailBottomX = -19, senderTailBottomY = -12, senderTailTopBend = -0.32, senderTailBottomBend = 0.3, } = mergedProps;
-    // Compute effective colors based on light mode
-    const effectiveBackgroundColor = lightMode ? '#ffffff' : backgroundColor;
-    const effectiveHeaderBgColor = lightMode ? '#f7f7f7' : headerBackgroundColor;
-    const effectiveRecipientBubbleColor = lightMode ? '#dfdfe1' : recipientBubbleColor;
-    const effectiveRecipientTextColor = lightMode ? '#000000' : '#ffffff';
-    const effectiveUsernameColor = lightMode ? '#000000' : usernameColor;
-    const effectiveHomeIndicatorColor = lightMode ? '#000000' : homeIndicatorColor;
-    const effectiveStatusBarColor = lightMode ? '#000000' : '#ffffff';
-    return ((0, jsx_runtime_1.jsxs)(DmComposition_1.BaseDmComposition, { width: width, height: height, cropBounds: cropBounds, backgroundColor: effectiveBackgroundColor, showDebugOverlay: showDebugOverlay, referenceImageUrl: referenceImageUrl, showReferenceImage: showReferenceImage, referenceOpacity: referenceOpacity, currentProps: { ...mergedProps }, 
-        // Status bar props
-        time: time, timeRight: timeRight, timeBottom: timeBottom, timeFontSize: timeFontSize, timeLetterSpacing: timeLetterSpacing, noNotisTop: noNotisTop, noNotisBottom: noNotisBottom, noNotisLeft: noNotisLeft, noNotisRight: noNotisRight, cellLevel: cellLevel, cell1Top: cell1Top, cell1Bottom: cell1Bottom, cell1Left: cell1Left, cell1Right: cell1Right, cell2Top: cell2Top, cell2Bottom: cell2Bottom, cell2Left: cell2Left, cell2Right: cell2Right, cell3Top: cell3Top, cell3Bottom: cell3Bottom, cell3Left: cell3Left, cell3Right: cell3Right, cell4Top: cell4Top, cell4Bottom: cell4Bottom, cell4Left: cell4Left, cell4Right: cell4Right, wifiTop: wifiTop, wifiBottom: wifiBottom, wifiLeft: wifiLeft, wifiRight: wifiRight, batteryTop: batteryTop, batteryBottom: batteryBottom, batteryLeft: batteryLeft, batteryRight: batteryRight, 
-        // Home indicator props
-        homeIndicatorTop: homeIndicatorTop, homeIndicatorBottom: homeIndicatorBottom, homeIndicatorLeft: homeIndicatorLeft, homeIndicatorRight: homeIndicatorRight, homeIndicatorColor: effectiveHomeIndicatorColor, 
-        // Status bar color for light mode
-        statusBarColor: effectiveStatusBarColor, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width,
-                    height,
-                    backgroundColor: effectiveBackgroundColor,
-                    zIndex: 0,
-                } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width,
-                    height: headerBottom,
-                    backgroundColor: effectiveHeaderBgColor,
-                    zIndex: 25,
-                } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)(lightMode ? 'imsg-light-header-left-arrow.png' : 'imsg-header-left-arrow.png'), style: {
-                    position: 'absolute',
-                    top: backArrowTop,
-                    left: backArrowLeft,
-                    width: backArrowRight - backArrowLeft,
-                    height: backArrowBottom - backArrowTop,
-                    zIndex: 26,
-                } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    top: unreadBadgeTop,
-                    left: unreadBadgeLeft,
-                    height: unreadBadgeBottom - unreadBadgeTop,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor: senderBubbleColor,
-                    borderRadius: unreadBadgeBorderRadius,
-                    paddingLeft: unreadBadgePaddingLeft,
-                    paddingRight: unreadBadgePaddingRight,
-                    zIndex: 26,
-                }, children: (0, jsx_runtime_1.jsx)("span", { style: {
-                        fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
-                        fontWeight: 400,
-                        fontSize: unreadBadgeFontSize,
-                        letterSpacing: unreadBadgeLetterSpacing,
-                        color: unreadBadgeTextColor,
-                        whiteSpace: 'nowrap',
-                    }, children: unreadBadgeText }) }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)(lightMode ? 'imsg-light-header-camera.png' : 'imsg-header-camera.png'), style: {
-                    position: 'absolute',
-                    top: cameraIconTop,
-                    left: cameraIconLeft,
-                    width: cameraIconRight - cameraIconLeft,
-                    height: cameraIconBottom - cameraIconTop,
-                    zIndex: 26,
-                } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    top: dividerLineY,
-                    left: 0,
-                    width,
-                    height: 1,
-                    backgroundColor: dividerLineColor,
-                    zIndex: 25,
-                } }), profilePicUrl && ((0, jsx_runtime_1.jsx)(remotion_1.Img, { src: profilePicUrl, style: {
-                    position: 'absolute',
-                    top: profilePicTop,
-                    left: profilePicLeft,
-                    width: profilePicRight - profilePicLeft,
-                    height: profilePicBottom - profilePicTop,
-                    borderRadius: '50%',
-                    objectFit: 'cover',
-                    zIndex: 26,
-                } })), username && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                    position: 'absolute',
-                    top: usernameTop,
-                    left: usernameLeft,
-                    width: usernameRight - usernameLeft,
-                    height: usernameBottom - usernameTop,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    zIndex: 26,
-                }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
-                            fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
-                            fontWeight: 400,
-                            fontSize: usernameFontSize,
-                            letterSpacing: usernameLetterSpacing,
-                            color: effectiveUsernameColor,
-                            whiteSpace: 'nowrap',
-                        }, children: username }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('imsg-name-right-arrow.png'), style: {
-                            marginLeft: usernameArrowOffsetX,
-                            marginTop: usernameArrowOffsetY,
-                            width: usernameArrowWidth,
-                            height: usernameArrowHeight,
-                        } })] })), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)(lightMode ? 'imsg-light-footer-plus.png' : 'imsg-footer-plus.png'), style: {
-                    position: 'absolute',
-                    top: plusButtonTop,
-                    left: plusButtonLeft,
-                    width: plusButtonRight - plusButtonLeft,
-                    height: plusButtonBottom - plusButtonTop,
-                    zIndex: 20,
-                } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)(lightMode ? 'imsg-light-main-footer.png' : 'imsg-main-footer.png'), style: {
-                    position: 'absolute',
-                    top: footerTop,
-                    left: footerLeft,
-                    width: footerRight - footerLeft,
-                    height: footerBottom - footerTop,
-                    zIndex: 20,
-                } }), conversionResult.tails.map((tail) => {
-                // Reference point: bubble edge (left for recipient, right for sender) and bottom
-                const refX = tail.isUser ? tail.messageRight : tail.messageLeft;
-                const refY = tail.messageBottom;
-                // Get the appropriate offsets
-                const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
-                const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
-                const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
-                const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
-                const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
-                const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
-                const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
-                const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
-                // Side X is always at the bubble edge (refX)
-                const sideX = refX;
-                const curveStartX = refX;
-                // Calculate control points based on bend values
-                // For top curve: from curveStart to tip
-                const topMidX = (curveStartX + tipX) / 2;
-                const topMidY = (curveStartY + tipY) / 2;
-                // Perpendicular direction (rotated 90 degrees)
-                const topDx = tipX - curveStartX;
-                const topDy = tipY - curveStartY;
-                const topLen = Math.sqrt(topDx * topDx + topDy * topDy);
-                // Perpendicular unit vector (for recipient: positive bend = outward/left, for sender: positive bend = outward/right)
-                const topPerpX = tail.isUser ? (topDy / topLen) : (-topDy / topLen);
-                const topPerpY = tail.isUser ? (-topDx / topLen) : (topDx / topLen);
-                const topCurveX = topMidX + topPerpX * topBend * topLen;
-                const topCurveY = topMidY + topPerpY * topBend * topLen;
-                // For bottom curve: from tip to bottom
-                const bottomMidX = (tipX + bottomX) / 2;
-                const bottomMidY = (tipY + bottomY) / 2;
-                const bottomDx = bottomX - tipX;
-                const bottomDy = bottomY - tipY;
-                const bottomLen = Math.sqrt(bottomDx * bottomDx + bottomDy * bottomDy);
-                // Perpendicular unit vector
-                const bottomPerpX = tail.isUser ? (bottomDy / bottomLen) : (-bottomDy / bottomLen);
-                const bottomPerpY = tail.isUser ? (-bottomDx / bottomLen) : (bottomDx / bottomLen);
-                const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
-                const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
-                const fillColor = tail.isUser ? senderBubbleColor : effectiveRecipientBubbleColor;
-                // SVG path: Side -> straight down to curveStart -> curve to Tip -> curve to Bottom -> close
-                const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
-                return ((0, jsx_runtime_1.jsx)("svg", { style: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width,
-                        height,
-                        zIndex: 4,
-                        pointerEvents: 'none',
-                    }, children: (0, jsx_runtime_1.jsx)("path", { d: pathD, fill: fillColor }) }, tail.id));
-            }), (0, jsx_runtime_1.jsx)(ImageEditorComposition_1.ImageEditorComposition, { width: width, height: height, elements: conversionResult.elements, imageUrls: conversionResult.imageUrls, backgroundType: "color", backgroundColor: "transparent" })] }));
-};
-exports.IMessageDmComposition = IMessageDmComposition;
-exports.default = exports.IMessageDmComposition;