ugcinc 3.84.6 → 3.85.0

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

@@ -0,0 +1,629 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SENDER_IMAGE_INPUT_ID_PREFIX = void 0;
+exports.convertPropsToElements = convertPropsToElements;
+const fonts_1 = require("../../utils/fonts");
+/** Input ID prefix for sender images */
+exports.SENDER_IMAGE_INPUT_ID_PREFIX = 'sender-image-';
+// ============================================================================
+// DEFAULT VALUES
+// ============================================================================
+const MESSAGE_DEFAULTS = {
+    // 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,
+    // Sender padding
+    senderPaddingLeft: 34,
+    senderPaddingRight: 48,
+    multiLineSenderPaddingLeft: 34,
+    // Recipient padding
+    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 (on last message in group)
+    showMessageTails: true,
+    // 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,
+};
+// Use the shared font family to ensure consistency with TextElement rendering
+const FONT_FAMILY = (0, fonts_1.getFontFamily)('apple');
+/**
+ * Calculate the actual width for auto-width text AND the line breaks.
+ * Uses DOM-based measurement to ensure the same fonts are used as CSS rendering.
+ */
+function calculateAutoWidthAndLines({ text, maxWidth, paddingLeft, paddingRight, fontSize, letterSpacing, }) {
+    // Check if we're in a browser environment
+    if (typeof document === 'undefined') {
+        return { width: maxWidth, lines: [text] };
+    }
+    // Available width for text content (excluding padding)
+    const availableWidth = maxWidth - paddingLeft - paddingRight;
+    // Handle edge case of very small or zero available width
+    if (availableWidth <= 0) {
+        return { width: maxWidth, lines: [text] };
+    }
+    // Create a measurement span with exact same styling as render
+    const measureSpan = document.createElement('span');
+    measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${FONT_FAMILY};
+    font-size: ${fontSize}px;
+    font-weight: normal;
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+    document.body.appendChild(measureSpan);
+    const measureText = (textToMeasure) => {
+        measureSpan.textContent = textToMeasure;
+        return measureSpan.getBoundingClientRect().width;
+    };
+    // Split text into words, preserving spaces for accurate measurement
+    const words = text.split(/(\s+)/);
+    const lines = [];
+    let currentLine = '';
+    for (let i = 0; i < words.length; i++) {
+        const word = words[i];
+        if (word === '\n' || word === '\r\n') {
+            if (currentLine)
+                lines.push(currentLine);
+            currentLine = '';
+            continue;
+        }
+        if (!word)
+            continue;
+        if (/^\s+$/.test(word)) {
+            if (currentLine)
+                currentLine += word;
+            continue;
+        }
+        const testLine = currentLine + word;
+        const testWidth = measureText(testLine);
+        const WRAP_TOLERANCE = 0.5;
+        if (testWidth > availableWidth + WRAP_TOLERANCE) {
+            // Push current line if it has content
+            if (currentLine.trim()) {
+                lines.push(currentLine.trimEnd());
+                currentLine = '';
+            }
+            const wordWidth = measureText(word);
+            // Handle words longer than available width (break character by character)
+            if (wordWidth > availableWidth) {
+                let remainingWord = word;
+                while (remainingWord) {
+                    let breakPoint = 1;
+                    for (let j = 1; j <= remainingWord.length; j++) {
+                        measureSpan.textContent = remainingWord.substring(0, j);
+                        if (measureSpan.getBoundingClientRect().width > availableWidth) {
+                            breakPoint = Math.max(1, j - 1);
+                            break;
+                        }
+                        breakPoint = j;
+                    }
+                    if (breakPoint >= remainingWord.length) {
+                        currentLine = remainingWord;
+                        break;
+                    }
+                    else {
+                        lines.push(remainingWord.substring(0, breakPoint));
+                        remainingWord = remainingWord.substring(breakPoint);
+                    }
+                }
+            }
+            else {
+                // Word fits on its own line
+                currentLine = word;
+            }
+        }
+        else {
+            currentLine = testLine;
+        }
+    }
+    if (currentLine.trim())
+        lines.push(currentLine.trimEnd());
+    if (lines.length === 0)
+        lines.push('');
+    // Find the widest line
+    let widestLineWidth = 0;
+    for (const line of lines) {
+        const lineWidth = measureText(line);
+        widestLineWidth = Math.max(widestLineWidth, lineWidth);
+    }
+    document.body.removeChild(measureSpan);
+    const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+    return { width: calculatedWidth, lines };
+}
+/**
+ * Calculate message positions (bottom-anchored)
+ */
+function calculateMessagePositions(props) {
+    const messages = props.messages ?? [];
+    if (messages.length === 0)
+        return [];
+    // Get values with defaults
+    const messageAreaBottom = props.messageAreaBottom ?? MESSAGE_DEFAULTS.messageAreaBottom;
+    const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS.messageFontSize;
+    const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS.messageLineHeight;
+    const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS.messageLetterSpacing;
+    const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS.messagePaddingTop;
+    const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS.messagePaddingBottom;
+    const senderPaddingLeft = props.senderPaddingLeft ?? MESSAGE_DEFAULTS.senderPaddingLeft;
+    const senderPaddingRight = props.senderPaddingRight ?? MESSAGE_DEFAULTS.senderPaddingRight;
+    const multiLineSenderPaddingLeft = props.multiLineSenderPaddingLeft ?? MESSAGE_DEFAULTS.multiLineSenderPaddingLeft;
+    const recipientPaddingLeft = props.recipientPaddingLeft ?? MESSAGE_DEFAULTS.recipientPaddingLeft;
+    const recipientPaddingRight = props.recipientPaddingRight ?? MESSAGE_DEFAULTS.recipientPaddingRight;
+    const multiLineRecipientPaddingRight = props.multiLineRecipientPaddingRight ?? MESSAGE_DEFAULTS.multiLineRecipientPaddingRight;
+    const messageGapInGroup = props.messageGapInGroup ?? MESSAGE_DEFAULTS.messageGapInGroup;
+    const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS.messageGapSameUser;
+    const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS.messageGapDifferentUser;
+    const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS.recipientBubbleLeft;
+    const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS.senderBubbleRight;
+    const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
+    const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS.senderImageLeft;
+    const senderImageHeight = props.senderImageHeight ?? MESSAGE_DEFAULTS.senderImageHeight;
+    const senderImageGapToText = props.senderImageGapToText ?? MESSAGE_DEFAULTS.senderImageGapToText;
+    const calculatedMessages = [];
+    let currentBottom = messageAreaBottom;
+    // Process messages in reverse order (last message at bottom)
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (!message)
+            continue;
+        const prevMessage = i > 0 ? messages[i - 1] : null;
+        const nextMessage = i < messages.length - 1 ? messages[i + 1] : null;
+        // Determine grouping
+        const isGroupedWithPrev = message.groupWithPrevious && prevMessage?.sender === message.sender;
+        const isGroupedWithNext = nextMessage?.groupWithPrevious && nextMessage?.sender === message.sender;
+        const isFirstInGroup = !isGroupedWithPrev;
+        const isLastInGroup = !isGroupedWithNext;
+        const isSingleMessage = isFirstInGroup && isLastInGroup;
+        // Calculate gap above this message
+        let gap = 0;
+        if (i < messages.length - 1) {
+            const belowMessage = messages[i + 1];
+            if (belowMessage?.groupWithPrevious && belowMessage.sender === message.sender) {
+                gap = messageGapInGroup;
+            }
+            else if (belowMessage?.sender === message.sender) {
+                gap = messageGapSameUser;
+            }
+            else {
+                gap = messageGapDifferentUser;
+            }
+        }
+        // Get sender-specific padding (use base padding for initial calculation)
+        const basePaddingLeft = message.sender === 'user' ? senderPaddingLeft : recipientPaddingLeft;
+        const basePaddingRight = message.sender === 'user' ? senderPaddingRight : recipientPaddingRight;
+        // Calculate width and line breaks with base padding
+        const { width: bubbleWidth, lines } = calculateAutoWidthAndLines({
+            text: message.text,
+            maxWidth: bubbleMaxWidth,
+            paddingLeft: basePaddingLeft,
+            paddingRight: basePaddingRight,
+            fontSize: messageFontSize,
+            letterSpacing: messageLetterSpacing,
+        });
+        // Determine if multiline and get final padding
+        const isMultiLine = lines.length > 1;
+        const finalPaddingLeft = message.sender === 'user' && isMultiLine
+            ? multiLineSenderPaddingLeft
+            : basePaddingLeft;
+        const finalPaddingRight = message.sender === 'recipient' && isMultiLine
+            ? multiLineRecipientPaddingRight
+            : basePaddingRight;
+        // Calculate bubble height based on actual line count
+        const lineCount = lines.length;
+        const textHeight = lineCount * messageLineHeight;
+        const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
+        // Calculate position
+        const bubbleBottom = currentBottom - gap;
+        const bubbleTop = bubbleBottom - bubbleHeight;
+        // Calculate left position based on sender
+        let bubbleLeft;
+        if (message.sender === 'recipient') {
+            bubbleLeft = recipientBubbleLeft;
+        }
+        else {
+            bubbleLeft = senderBubbleRight - bubbleWidth;
+        }
+        // Calculate image dimensions if present (sender only for now)
+        let imageWidth;
+        let imageHeight;
+        let imageY;
+        if (message.imageUrl && message.sender === 'user') {
+            imageWidth = senderBubbleRight - senderImageLeft;
+            imageHeight = senderImageHeight;
+            imageY = bubbleTop - senderImageGapToText - imageHeight;
+        }
+        calculatedMessages.unshift({
+            message,
+            top: bubbleTop,
+            bottom: bubbleBottom,
+            left: bubbleLeft,
+            width: bubbleWidth,
+            height: bubbleHeight,
+            lines,
+            isFirstInGroup,
+            isLastInGroup,
+            isSingleMessage,
+            isMultiLine,
+            paddingLeft: finalPaddingLeft,
+            paddingRight: finalPaddingRight,
+            imageWidth,
+            imageHeight,
+            imageY,
+        });
+        // Move currentBottom up - account for image if present
+        if (message.imageUrl && imageY !== undefined) {
+            currentBottom = imageY;
+        }
+        else {
+            currentBottom = bubbleTop;
+        }
+    }
+    return calculatedMessages;
+}
+/**
+ * Get corner radii for a message based on grouping
+ */
+function getCornerRadii(cm, bubbleRadiusNormal, bubbleRadiusGrouped) {
+    const isUser = cm.message.sender === 'user';
+    if (cm.isSingleMessage) {
+        // All corners normal
+        return {
+            topLeft: bubbleRadiusNormal,
+            topRight: bubbleRadiusNormal,
+            bottomLeft: bubbleRadiusNormal,
+            bottomRight: bubbleRadiusNormal,
+        };
+    }
+    if (isUser) {
+        // User messages: right side has grouped corners when connected
+        return {
+            topLeft: bubbleRadiusNormal,
+            topRight: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+            bottomLeft: bubbleRadiusNormal,
+            bottomRight: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+        };
+    }
+    else {
+        // Recipient messages: left side has grouped corners when connected
+        return {
+            topLeft: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+            topRight: bubbleRadiusNormal,
+            bottomLeft: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+            bottomRight: bubbleRadiusNormal,
+        };
+    }
+}
+/**
+ * Generate message bubble elements (single element with autoWidth)
+ */
+function generateMessageElements(props, calculatedMessages) {
+    if (calculatedMessages.length === 0) {
+        return [];
+    }
+    const elements = [];
+    // Get values with defaults
+    const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS.senderBubbleColor;
+    const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS.recipientBubbleColor;
+    const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS.bubbleTextColor;
+    const recipientTextColor = props.recipientTextColor ?? MESSAGE_DEFAULTS.recipientTextColor;
+    const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS.messageFontSize;
+    const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS.messageLineHeight;
+    const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS.messageLetterSpacing;
+    const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS.messagePaddingTop;
+    const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS.messagePaddingBottom;
+    const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS.bubbleRadiusNormal;
+    const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS.bubbleRadiusGrouped;
+    const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
+    const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS.recipientBubbleLeft;
+    const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS.senderBubbleRight;
+    const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS.senderImageLeft;
+    const senderImageBorderRadius = props.senderImageBorderRadius ?? MESSAGE_DEFAULTS.senderImageBorderRadius;
+    // Calculate lineHeight as a multiplier (TextElement expects a multiplier)
+    const lineHeightMultiplier = messageLineHeight / messageFontSize;
+    for (let i = 0; i < calculatedMessages.length; i++) {
+        const cm = calculatedMessages[i];
+        const isUser = cm.message.sender === 'user';
+        const bubbleColor = isUser ? senderBubbleColor : recipientBubbleColor;
+        const textColor = isUser ? bubbleTextColor : recipientTextColor;
+        // Image element (sender only for now)
+        if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== undefined && isUser) {
+            elements.push({
+                id: `image-${cm.message.id}`,
+                type: 'image',
+                x: senderImageLeft,
+                y: cm.imageY,
+                width: cm.imageWidth,
+                height: cm.imageHeight,
+                zIndex: 5 + i,
+                inputId: `${exports.SENDER_IMAGE_INPUT_ID_PREFIX}${cm.message.id}`,
+                borderRadius: senderImageBorderRadius,
+                fit: 'contain',
+            });
+        }
+        // Get corner radii based on grouping
+        const radii = getCornerRadii(cm, bubbleRadiusNormal, bubbleRadiusGrouped);
+        // Calculate element x position for autoWidth alignment
+        // For sender: x is at (senderBubbleRight - bubbleMaxWidth), boxAlign: 'right'
+        // For recipient: x is at recipientBubbleLeft, boxAlign: 'left'
+        const elementX = isUser
+            ? senderBubbleRight - bubbleMaxWidth
+            : recipientBubbleLeft;
+        // Join lines with newlines for the text content
+        const textContent = cm.lines.join('\n');
+        // Single element with text + background (autoWidth handles sizing)
+        elements.push({
+            id: `message-${cm.message.id}`,
+            type: 'text',
+            x: elementX,
+            y: cm.top,
+            width: bubbleMaxWidth,
+            height: cm.height,
+            zIndex: 5 + i,
+            text: textContent,
+            font: 'apple',
+            fontWeight: 400,
+            fontSize: messageFontSize,
+            letterSpacing: messageLetterSpacing,
+            lineHeight: lineHeightMultiplier,
+            color: textColor,
+            textAlign: 'left',
+            verticalAlign: 'middle',
+            backgroundColor: bubbleColor,
+            backgroundOpacity: 100,
+            backgroundBorderRadius: radii,
+            paddingTop: messagePaddingTop,
+            paddingRight: cm.paddingRight,
+            paddingBottom: messagePaddingBottom,
+            paddingLeft: cm.paddingLeft,
+            autoWidth: true,
+            boxAlign: isUser ? 'right' : 'left',
+        });
+    }
+    return elements;
+}
+/**
+ * Generate tail render data for last messages in groups
+ */
+function generateTailData(props, calculatedMessages) {
+    const showMessageTails = props.showMessageTails ?? MESSAGE_DEFAULTS.showMessageTails;
+    if (!showMessageTails) {
+        return [];
+    }
+    const tails = [];
+    for (let i = 0; i < calculatedMessages.length; i++) {
+        const cm = calculatedMessages[i];
+        // Only add tail for last message in group
+        if (!cm.isLastInGroup) {
+            continue;
+        }
+        tails.push({
+            id: `tail-${cm.message.id}`,
+            isUser: cm.message.sender === 'user',
+            messageLeft: cm.left,
+            messageRight: cm.left + cm.width,
+            messageBottom: cm.bottom,
+        });
+    }
+    return tails;
+}
+// ============================================================================
+// MAIN CONVERSION FUNCTION
+// ============================================================================
+/**
+ * Convert iMessage DM Composition props to ImageEditorElements
+ *
+ * Only generates message bubble elements. Header, footer, and status bar
+ * elements are rendered directly in the composition JSX.
+ */
+/**
+ * Generate message area header text elements (iMessage + timestamp above first message)
+ */
+function generateHeaderTextElements(props, calculatedMessages) {
+    if (calculatedMessages.length === 0) {
+        return [];
+    }
+    const elements = [];
+    // Get props with defaults
+    const messageHeaderImessageText = props.messageHeaderImessageText ?? MESSAGE_DEFAULTS.messageHeaderImessageText;
+    const messageHeaderTimestampText = props.messageHeaderTimestampText ?? MESSAGE_DEFAULTS.messageHeaderTimestampText;
+    const messageHeaderTimestampGap = props.messageHeaderTimestampGap ?? MESSAGE_DEFAULTS.messageHeaderTimestampGap;
+    const messageHeaderImessageGap = props.messageHeaderImessageGap ?? MESSAGE_DEFAULTS.messageHeaderImessageGap;
+    const messageHeaderTextColor = props.messageHeaderTextColor ?? MESSAGE_DEFAULTS.messageHeaderTextColor;
+    const messageHeaderFontSize = props.messageHeaderFontSize ?? MESSAGE_DEFAULTS.messageHeaderFontSize;
+    const messageHeaderLetterSpacing = props.messageHeaderLetterSpacing ?? MESSAGE_DEFAULTS.messageHeaderLetterSpacing;
+    const messageHeaderLeft = props.messageHeaderLeft ?? MESSAGE_DEFAULTS.messageHeaderLeft;
+    const messageHeaderRight = props.messageHeaderRight ?? MESSAGE_DEFAULTS.messageHeaderRight;
+    const messageHeaderWidth = messageHeaderRight - messageHeaderLeft;
+    // Find the top of the first message (accounting for image if present)
+    const firstMessage = calculatedMessages[0];
+    let firstMessageTop = firstMessage.top;
+    // If first message has an image, use the image top instead
+    if (firstMessage.imageY !== undefined) {
+        firstMessageTop = firstMessage.imageY;
+    }
+    // Timestamp text - positioned messageHeaderTimestampGap pixels above first message/image
+    const timestampBottom = firstMessageTop - messageHeaderTimestampGap;
+    const timestampTop = timestampBottom - messageHeaderFontSize;
+    elements.push({
+        id: 'message-header-timestamp',
+        type: 'text',
+        x: messageHeaderLeft,
+        y: timestampTop,
+        width: messageHeaderWidth,
+        height: messageHeaderFontSize,
+        zIndex: 4,
+        text: messageHeaderTimestampText,
+        font: 'apple',
+        fontWeight: 400,
+        fontSize: messageHeaderFontSize,
+        letterSpacing: messageHeaderLetterSpacing,
+        color: messageHeaderTextColor,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+    });
+    // iMessage text - positioned messageHeaderImessageGap pixels above timestamp
+    const imessageBottom = timestampTop - messageHeaderImessageGap;
+    const imessageTop = imessageBottom - messageHeaderFontSize;
+    elements.push({
+        id: 'message-header-imessage',
+        type: 'text',
+        x: messageHeaderLeft,
+        y: imessageTop,
+        width: messageHeaderWidth,
+        height: messageHeaderFontSize,
+        zIndex: 4,
+        text: messageHeaderImessageText,
+        font: 'apple',
+        fontWeight: 400,
+        fontSize: messageHeaderFontSize,
+        letterSpacing: messageHeaderLetterSpacing,
+        color: messageHeaderTextColor,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+    });
+    return elements;
+}
+/**
+ * Generate read receipt element (under last sender message)
+ */
+function generateReadReceiptElement(props, calculatedMessages) {
+    // Check if read receipt is enabled
+    const showReadReceipt = props.showReadReceipt ?? MESSAGE_DEFAULTS.showReadReceipt;
+    if (!showReadReceipt) {
+        return [];
+    }
+    // Find the last sender message
+    let lastSenderMessage = null;
+    for (let i = calculatedMessages.length - 1; i >= 0; i--) {
+        if (calculatedMessages[i].message.sender === 'user') {
+            lastSenderMessage = calculatedMessages[i];
+            break;
+        }
+    }
+    if (!lastSenderMessage) {
+        return [];
+    }
+    // Get props with defaults
+    const readReceiptText = props.readReceiptText ?? MESSAGE_DEFAULTS.readReceiptText;
+    const readReceiptGap = props.readReceiptGap ?? MESSAGE_DEFAULTS.readReceiptGap;
+    const readReceiptFontSize = props.readReceiptFontSize ?? MESSAGE_DEFAULTS.readReceiptFontSize;
+    const readReceiptLetterSpacing = props.readReceiptLetterSpacing ?? MESSAGE_DEFAULTS.readReceiptLetterSpacing;
+    const readReceiptColor = props.readReceiptColor ?? MESSAGE_DEFAULTS.readReceiptColor;
+    const readReceiptLeft = props.readReceiptLeft ?? MESSAGE_DEFAULTS.readReceiptLeft;
+    const readReceiptRight = props.readReceiptRight ?? MESSAGE_DEFAULTS.readReceiptRight;
+    const readReceiptWidth = readReceiptRight - readReceiptLeft;
+    // Position: bottom of read text is readReceiptGap pixels below the bottom of the last sender message
+    const readReceiptTop = lastSenderMessage.bottom + readReceiptGap - readReceiptFontSize;
+    return [{
+            id: 'read-receipt',
+            type: 'text',
+            x: readReceiptLeft,
+            y: readReceiptTop,
+            width: readReceiptWidth,
+            height: readReceiptFontSize,
+            zIndex: 4,
+            text: readReceiptText,
+            font: 'apple',
+            fontWeight: 600,
+            fontSize: readReceiptFontSize,
+            letterSpacing: readReceiptLetterSpacing,
+            color: readReceiptColor,
+            textAlign: 'right',
+            verticalAlign: 'middle',
+        }];
+}
+/**
+ * Build the imageUrls map for all image elements
+ */
+function buildImageUrls(props) {
+    const imageUrls = {};
+    const messages = props.messages ?? [];
+    for (const message of messages) {
+        // Only include sender images for now
+        if (message.imageUrl && message.sender === 'user') {
+            imageUrls[`${exports.SENDER_IMAGE_INPUT_ID_PREFIX}${message.id}`] = message.imageUrl;
+        }
+    }
+    return imageUrls;
+}
+function convertPropsToElements(props) {
+    const width = props.width ?? 1206;
+    const height = props.height ?? 2622;
+    // Calculate message positions
+    const calculatedMessages = calculateMessagePositions(props);
+    // Generate message elements
+    const messageElements = generateMessageElements(props, calculatedMessages);
+    // Generate tail data (for direct JSX rendering)
+    const tails = generateTailData(props, calculatedMessages);
+    // Generate header text elements (iMessage + timestamp above first message)
+    const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
+    // Generate read receipt element (under last sender message)
+    const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
+    // Combine all elements and sort by zIndex
+    const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
+    allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+    // Build image URLs map
+    const imageUrls = buildImageUrls(props);
+    return {
+        elements: allElements,
+        imageUrls,
+        tails,
+        width,
+        height,
+    };
+}

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import type { IMessageDmCompositionProps } from './types';
+export type { IMessageDmCompositionProps } from './types';
+export type { ImMessage, ImMessageSender } from './types';
+/**
+ * Default composition props for registration
+ */
+export declare const defaultIMessageDmProps: IMessageDmCompositionProps;
+/**
+ * iMessage DM Composition Component
+ */
+export declare const IMessageDmComposition: React.FC<IMessageDmCompositionProps>;
+export default IMessageDmComposition;