ugcinc 3.84.6 → 3.85.0

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

@@ -0,0 +1,485 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IMessageDmComposition = exports.defaultIMessageDmProps = 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");
+/**
+ * Default composition props for registration
+ */
+exports.defaultIMessageDmProps = {
+    showDebugOverlay: false,
+    referenceImageUrl: 'https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/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://n14dcpakf8w1fekl.public.blob.vercel-storage.com/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://n14dcpakf8w1fekl.public.blob.vercel-storage.com/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]);
+    // 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, 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;