ugcinc-render 1.8.160 → 1.8.162

package/dist/index.d.mts

@@ -1080,23 +1080,26 @@ interface IMessageDmCompositionProps {
     messageTextLetterSpacing?: number;
     messageTextColor?: string;
     messageText?: string;
+    messageAreaTop?: number;
+    messageAreaBottom?: number;
     senderBubbleColor?: string;
     recipientBubbleColor?: string;
     bubbleTextColor?: string;
-    bubbleTextFontSize?: number;
-    bubbleTextLetterSpacing?: number;
-    bubbleBorderRadius?: number;
-    bubblePaddingX?: number;
-    bubblePaddingY?: number;
+    messageFontSize?: number;
+    messageLineHeight?: number;
+    messageLetterSpacing?: number;
+    messagePaddingTop?: number;
+    messagePaddingBottom?: number;
+    messagePaddingLeft?: number;
+    messagePaddingRight?: number;
+    bubbleRadiusNormal?: number;
+    bubbleRadiusGrouped?: number;
+    messageGapInGroup?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
-    sentMessagePaddingLeft?: number;
-    sentMessagePaddingRight?: number;
-    receivedMessagePaddingLeft?: number;
-    receivedMessagePaddingRight?: number;
-    multiLineSentMessagePaddingLeft?: number;
-    multiLineReceivedMessagePaddingRight?: number;
-    messagesAnchorY?: number;
+    recipientBubbleLeft?: number;
+    senderBubbleRight?: number;
+    bubbleMaxWidth?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.d.ts

@@ -1080,23 +1080,26 @@ interface IMessageDmCompositionProps {
     messageTextLetterSpacing?: number;
     messageTextColor?: string;
     messageText?: string;
+    messageAreaTop?: number;
+    messageAreaBottom?: number;
     senderBubbleColor?: string;
     recipientBubbleColor?: string;
     bubbleTextColor?: string;
-    bubbleTextFontSize?: number;
-    bubbleTextLetterSpacing?: number;
-    bubbleBorderRadius?: number;
-    bubblePaddingX?: number;
-    bubblePaddingY?: number;
+    messageFontSize?: number;
+    messageLineHeight?: number;
+    messageLetterSpacing?: number;
+    messagePaddingTop?: number;
+    messagePaddingBottom?: number;
+    messagePaddingLeft?: number;
+    messagePaddingRight?: number;
+    bubbleRadiusNormal?: number;
+    bubbleRadiusGrouped?: number;
+    messageGapInGroup?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
-    sentMessagePaddingLeft?: number;
-    sentMessagePaddingRight?: number;
-    receivedMessagePaddingLeft?: number;
-    receivedMessagePaddingRight?: number;
-    multiLineSentMessagePaddingLeft?: number;
-    multiLineReceivedMessagePaddingRight?: number;
-    messagesAnchorY?: number;
+    recipientBubbleLeft?: number;
+    senderBubbleRight?: number;
+    bubbleMaxWidth?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.js

@@ -5255,159 +5255,323 @@ var import_remotion10 = require("remotion");
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var MESSAGE_DEFAULTS2 = {
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
   imageAspectRatio: 1,
-  // width / height
   imageBorderRadius: 30,
   imageGapToText: 8
 };
+var FONT_FAMILY2 = getFontFamily("apple");
+function calculateAutoWidthAndLines3({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${FONT_FAMILY2};
+    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;
+  };
+  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) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
+      const wordWidth = measureText(word);
+      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 {
+        currentLine = word;
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  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 };
+}
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
-  const canvasWidth = props.width ?? 1206;
-  const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
+  const messageAreaBottom = props.messageAreaBottom ?? MESSAGE_DEFAULTS2.messageAreaBottom;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const messageGapInGroup = props.messageGapInGroup ?? MESSAGE_DEFAULTS2.messageGapInGroup;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const sentMessagePaddingLeft = props.sentMessagePaddingLeft ?? MESSAGE_DEFAULTS2.sentMessagePaddingLeft;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const receivedMessagePaddingRight = props.receivedMessagePaddingRight ?? MESSAGE_DEFAULTS2.receivedMessagePaddingRight;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
+  const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
+  const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
   const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
   const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
   const calculatedMessages = [];
-  let currentY = messagesAnchorY;
+  let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i];
-    if (!msg) continue;
-    const isSender = msg.sender === "user";
-    const paddingLeft = isSender ? sentMessagePaddingLeft : receivedMessagePaddingLeft;
-    const paddingRight = isSender ? sentMessagePaddingRight : receivedMessagePaddingRight;
-    const maxBubbleWidth = canvasWidth - paddingLeft - paddingRight;
-    const maxTextWidth = maxBubbleWidth - bubblePaddingX * 2;
-    const charWidth = bubbleTextFontSize * 0.5;
-    const lineHeight = bubbleTextFontSize * 1.3;
-    const textWidth = Math.min(msg.text.length * charWidth, maxTextWidth);
-    const numLines = Math.ceil(msg.text.length * charWidth / maxTextWidth);
-    const textHeight = numLines * lineHeight;
-    const bubbleWidth = textWidth + bubblePaddingX * 2;
-    const bubbleHeight = textHeight + bubblePaddingY * 2;
+    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;
+    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;
+    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;
+      }
+    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines3({
+      text: message.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing
+    });
+    const lineCount = lines.length;
+    const textHeight = lineCount * messageLineHeight;
+    const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
+    const bubbleBottom = currentBottom - gap;
+    const bubbleTop = bubbleBottom - bubbleHeight;
+    let bubbleLeft;
+    if (message.sender === "recipient") {
+      bubbleLeft = recipientBubbleLeft;
+    } else {
+      bubbleLeft = senderBubbleRight - bubbleWidth;
+    }
     let imageWidth;
     let imageHeight;
     let imageY;
-    let totalHeight = bubbleHeight;
-    if (msg.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+    if (message.imageUrl) {
+      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-      totalHeight = imageHeight + imageGapToText + bubbleHeight;
-    }
-    const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
-    const y = currentY - bubbleHeight;
-    if (msg.imageUrl && imageHeight) {
-      imageY = y - imageGapToText - imageHeight;
+      imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
-      message: msg,
-      x,
-      y,
+      message,
+      top: bubbleTop,
+      bottom: bubbleBottom,
+      left: bubbleLeft,
       width: bubbleWidth,
       height: bubbleHeight,
-      textWidth,
-      textHeight,
+      lines,
+      isFirstInGroup,
+      isLastInGroup,
+      isSingleMessage,
       imageWidth,
       imageHeight,
       imageY
     });
-    const prevMsg = i > 0 ? messages[i - 1] : null;
-    const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : y;
-    currentY = topOfMessage - gap;
+    if (message.imageUrl && imageY !== void 0) {
+      currentBottom = imageY;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
+function getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped) {
+  const isUser = cm.message.sender === "user";
+  if (cm.isSingleMessage) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+  if (isUser) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped
+    };
+  } else {
+    return {
+      topLeft: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+}
 function generateMessageElements2(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
   const elements = [];
   const canvasWidth = props.width ?? 1206;
   const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
   const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
   const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS2.bubbleRadiusNormal;
+  const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS2.bubbleRadiusGrouped;
+  const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
+  const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
   const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  for (const calc of calculatedMessages) {
-    const { message, x, y, width, height, imageWidth, imageHeight, imageY } = calc;
-    const isSender = message.sender === "user";
-    const bubbleColor = isSender ? senderBubbleColor : recipientBubbleColor;
-    if (message.imageUrl && imageWidth && imageHeight && imageY !== void 0) {
-      const imageX = isSender ? canvasWidth - sentMessagePaddingRight - imageWidth : receivedMessagePaddingLeft;
+  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;
+    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0) {
+      const imageX = isUser ? senderBubbleRight - cm.imageWidth : recipientBubbleLeft;
       elements.push({
-        id: `image-${message.id}`,
+        id: `image-${cm.message.id}`,
         type: "image",
         x: imageX,
-        y: imageY,
-        width: imageWidth,
-        height: imageHeight,
-        zIndex: 10,
-        url: message.imageUrl,
+        y: cm.imageY,
+        width: cm.imageWidth,
+        height: cm.imageHeight,
+        zIndex: 5 + i,
+        url: cm.message.imageUrl,
         borderRadius: imageBorderRadius,
         objectFit: "cover"
       });
     }
+    const radii = getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped);
+    const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : recipientBubbleLeft;
+    const textContent = cm.lines.join("\n");
     elements.push({
-      id: `bubble-${message.id}`,
-      type: "text",
-      x,
-      y,
-      width,
-      height,
-      zIndex: 10,
-      text: "",
-      backgroundColor: bubbleColor,
-      backgroundOpacity: 100,
-      borderRadius: bubbleBorderRadius
-    });
-    elements.push({
-      id: `text-${message.id}`,
+      id: `message-${cm.message.id}`,
       type: "text",
-      x: x + bubblePaddingX,
-      y: y + bubblePaddingY,
-      width: width - bubblePaddingX * 2,
-      height: height - bubblePaddingY * 2,
-      zIndex: 11,
-      text: message.text,
+      x: elementX,
+      y: cm.top,
+      width: bubbleMaxWidth,
+      height: cm.height,
+      zIndex: 5 + i,
+      text: textContent,
       font: "apple",
       fontWeight: 400,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing,
+      lineHeight: lineHeightMultiplier,
       color: bubbleTextColor,
       textAlign: "left",
-      verticalAlign: "top"
+      verticalAlign: "middle",
+      backgroundColor: bubbleColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: radii,
+      paddingTop: messagePaddingTop,
+      paddingRight: messagePaddingRight,
+      paddingBottom: messagePaddingBottom,
+      paddingLeft: messagePaddingLeft,
+      autoWidth: true,
+      boxAlign: isUser ? "right" : "left"
     });
   }
   return elements;
@@ -5527,24 +5691,33 @@ var defaultIMessageDmProps = {
   homeIndicatorLeft: 387,
   homeIndicatorRight: 818,
   homeIndicatorColor: "#ffffff",
-  // Message styling defaults
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -6707,24 +6880,33 @@ var iMessageDmPropsSchema = import_zod.z.object({
   messageTextLetterSpacing: import_zod.z.number().optional(),
   messageTextColor: import_zod.z.string().optional(),
   messageText: import_zod.z.string().optional(),
-  // Message styling
+  // Message area bounds
+  messageAreaTop: import_zod.z.number().optional(),
+  messageAreaBottom: import_zod.z.number().optional(),
+  // Message colors
   senderBubbleColor: import_zod.z.string().optional(),
   recipientBubbleColor: import_zod.z.string().optional(),
   bubbleTextColor: import_zod.z.string().optional(),
-  bubbleTextFontSize: import_zod.z.number().optional(),
-  bubbleTextLetterSpacing: import_zod.z.number().optional(),
-  bubbleBorderRadius: import_zod.z.number().optional(),
-  bubblePaddingX: import_zod.z.number().optional(),
-  bubblePaddingY: import_zod.z.number().optional(),
+  // Message typography
+  messageFontSize: import_zod.z.number().optional(),
+  messageLineHeight: import_zod.z.number().optional(),
+  messageLetterSpacing: import_zod.z.number().optional(),
+  // Message padding (inside bubble)
+  messagePaddingTop: import_zod.z.number().optional(),
+  messagePaddingBottom: import_zod.z.number().optional(),
+  messagePaddingLeft: import_zod.z.number().optional(),
+  messagePaddingRight: import_zod.z.number().optional(),
+  // Bubble corner radii
+  bubbleRadiusNormal: import_zod.z.number().optional(),
+  bubbleRadiusGrouped: import_zod.z.number().optional(),
+  // Message spacing
+  messageGapInGroup: import_zod.z.number().optional(),
   messageGapSameUser: import_zod.z.number().optional(),
   messageGapDifferentUser: import_zod.z.number().optional(),
-  sentMessagePaddingLeft: import_zod.z.number().optional(),
-  sentMessagePaddingRight: import_zod.z.number().optional(),
-  receivedMessagePaddingLeft: import_zod.z.number().optional(),
-  receivedMessagePaddingRight: import_zod.z.number().optional(),
-  multiLineSentMessagePaddingLeft: import_zod.z.number().optional(),
-  multiLineReceivedMessagePaddingRight: import_zod.z.number().optional(),
-  messagesAnchorY: import_zod.z.number().optional(),
+  // Bubble positioning
+  recipientBubbleLeft: import_zod.z.number().optional(),
+  senderBubbleRight: import_zod.z.number().optional(),
+  bubbleMaxWidth: import_zod.z.number().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4301,159 +4301,323 @@ import { Img as Img5, staticFile as staticFile3 } from "remotion";
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var MESSAGE_DEFAULTS2 = {
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
   imageAspectRatio: 1,
-  // width / height
   imageBorderRadius: 30,
   imageGapToText: 8
 };
+var FONT_FAMILY2 = getFontFamily("apple");
+function calculateAutoWidthAndLines3({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${FONT_FAMILY2};
+    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;
+  };
+  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) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
+      const wordWidth = measureText(word);
+      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 {
+        currentLine = word;
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  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 };
+}
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
-  const canvasWidth = props.width ?? 1206;
-  const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
+  const messageAreaBottom = props.messageAreaBottom ?? MESSAGE_DEFAULTS2.messageAreaBottom;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const messageGapInGroup = props.messageGapInGroup ?? MESSAGE_DEFAULTS2.messageGapInGroup;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const sentMessagePaddingLeft = props.sentMessagePaddingLeft ?? MESSAGE_DEFAULTS2.sentMessagePaddingLeft;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const receivedMessagePaddingRight = props.receivedMessagePaddingRight ?? MESSAGE_DEFAULTS2.receivedMessagePaddingRight;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
+  const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
+  const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
   const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
   const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
   const calculatedMessages = [];
-  let currentY = messagesAnchorY;
+  let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i];
-    if (!msg) continue;
-    const isSender = msg.sender === "user";
-    const paddingLeft = isSender ? sentMessagePaddingLeft : receivedMessagePaddingLeft;
-    const paddingRight = isSender ? sentMessagePaddingRight : receivedMessagePaddingRight;
-    const maxBubbleWidth = canvasWidth - paddingLeft - paddingRight;
-    const maxTextWidth = maxBubbleWidth - bubblePaddingX * 2;
-    const charWidth = bubbleTextFontSize * 0.5;
-    const lineHeight = bubbleTextFontSize * 1.3;
-    const textWidth = Math.min(msg.text.length * charWidth, maxTextWidth);
-    const numLines = Math.ceil(msg.text.length * charWidth / maxTextWidth);
-    const textHeight = numLines * lineHeight;
-    const bubbleWidth = textWidth + bubblePaddingX * 2;
-    const bubbleHeight = textHeight + bubblePaddingY * 2;
+    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;
+    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;
+    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;
+      }
+    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines3({
+      text: message.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing
+    });
+    const lineCount = lines.length;
+    const textHeight = lineCount * messageLineHeight;
+    const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
+    const bubbleBottom = currentBottom - gap;
+    const bubbleTop = bubbleBottom - bubbleHeight;
+    let bubbleLeft;
+    if (message.sender === "recipient") {
+      bubbleLeft = recipientBubbleLeft;
+    } else {
+      bubbleLeft = senderBubbleRight - bubbleWidth;
+    }
     let imageWidth;
     let imageHeight;
     let imageY;
-    let totalHeight = bubbleHeight;
-    if (msg.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+    if (message.imageUrl) {
+      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-      totalHeight = imageHeight + imageGapToText + bubbleHeight;
-    }
-    const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
-    const y = currentY - bubbleHeight;
-    if (msg.imageUrl && imageHeight) {
-      imageY = y - imageGapToText - imageHeight;
+      imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
-      message: msg,
-      x,
-      y,
+      message,
+      top: bubbleTop,
+      bottom: bubbleBottom,
+      left: bubbleLeft,
       width: bubbleWidth,
       height: bubbleHeight,
-      textWidth,
-      textHeight,
+      lines,
+      isFirstInGroup,
+      isLastInGroup,
+      isSingleMessage,
       imageWidth,
       imageHeight,
       imageY
     });
-    const prevMsg = i > 0 ? messages[i - 1] : null;
-    const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : y;
-    currentY = topOfMessage - gap;
+    if (message.imageUrl && imageY !== void 0) {
+      currentBottom = imageY;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
+function getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped) {
+  const isUser = cm.message.sender === "user";
+  if (cm.isSingleMessage) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+  if (isUser) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped
+    };
+  } else {
+    return {
+      topLeft: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+}
 function generateMessageElements2(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
   const elements = [];
   const canvasWidth = props.width ?? 1206;
   const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
   const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
   const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS2.bubbleRadiusNormal;
+  const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS2.bubbleRadiusGrouped;
+  const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
+  const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
   const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  for (const calc of calculatedMessages) {
-    const { message, x, y, width, height, imageWidth, imageHeight, imageY } = calc;
-    const isSender = message.sender === "user";
-    const bubbleColor = isSender ? senderBubbleColor : recipientBubbleColor;
-    if (message.imageUrl && imageWidth && imageHeight && imageY !== void 0) {
-      const imageX = isSender ? canvasWidth - sentMessagePaddingRight - imageWidth : receivedMessagePaddingLeft;
+  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;
+    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0) {
+      const imageX = isUser ? senderBubbleRight - cm.imageWidth : recipientBubbleLeft;
       elements.push({
-        id: `image-${message.id}`,
+        id: `image-${cm.message.id}`,
         type: "image",
         x: imageX,
-        y: imageY,
-        width: imageWidth,
-        height: imageHeight,
-        zIndex: 10,
-        url: message.imageUrl,
+        y: cm.imageY,
+        width: cm.imageWidth,
+        height: cm.imageHeight,
+        zIndex: 5 + i,
+        url: cm.message.imageUrl,
         borderRadius: imageBorderRadius,
         objectFit: "cover"
       });
     }
+    const radii = getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped);
+    const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : recipientBubbleLeft;
+    const textContent = cm.lines.join("\n");
     elements.push({
-      id: `bubble-${message.id}`,
-      type: "text",
-      x,
-      y,
-      width,
-      height,
-      zIndex: 10,
-      text: "",
-      backgroundColor: bubbleColor,
-      backgroundOpacity: 100,
-      borderRadius: bubbleBorderRadius
-    });
-    elements.push({
-      id: `text-${message.id}`,
+      id: `message-${cm.message.id}`,
       type: "text",
-      x: x + bubblePaddingX,
-      y: y + bubblePaddingY,
-      width: width - bubblePaddingX * 2,
-      height: height - bubblePaddingY * 2,
-      zIndex: 11,
-      text: message.text,
+      x: elementX,
+      y: cm.top,
+      width: bubbleMaxWidth,
+      height: cm.height,
+      zIndex: 5 + i,
+      text: textContent,
       font: "apple",
       fontWeight: 400,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing,
+      lineHeight: lineHeightMultiplier,
       color: bubbleTextColor,
       textAlign: "left",
-      verticalAlign: "top"
+      verticalAlign: "middle",
+      backgroundColor: bubbleColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: radii,
+      paddingTop: messagePaddingTop,
+      paddingRight: messagePaddingRight,
+      paddingBottom: messagePaddingBottom,
+      paddingLeft: messagePaddingLeft,
+      autoWidth: true,
+      boxAlign: isUser ? "right" : "left"
     });
   }
   return elements;
@@ -4573,24 +4737,33 @@ var defaultIMessageDmProps = {
   homeIndicatorLeft: 387,
   homeIndicatorRight: 818,
   homeIndicatorColor: "#ffffff",
-  // Message styling defaults
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -5470,24 +5643,33 @@ var iMessageDmPropsSchema = z.object({
   messageTextLetterSpacing: z.number().optional(),
   messageTextColor: z.string().optional(),
   messageText: z.string().optional(),
-  // Message styling
+  // Message area bounds
+  messageAreaTop: z.number().optional(),
+  messageAreaBottom: z.number().optional(),
+  // Message colors
   senderBubbleColor: z.string().optional(),
   recipientBubbleColor: z.string().optional(),
   bubbleTextColor: z.string().optional(),
-  bubbleTextFontSize: z.number().optional(),
-  bubbleTextLetterSpacing: z.number().optional(),
-  bubbleBorderRadius: z.number().optional(),
-  bubblePaddingX: z.number().optional(),
-  bubblePaddingY: z.number().optional(),
+  // Message typography
+  messageFontSize: z.number().optional(),
+  messageLineHeight: z.number().optional(),
+  messageLetterSpacing: z.number().optional(),
+  // Message padding (inside bubble)
+  messagePaddingTop: z.number().optional(),
+  messagePaddingBottom: z.number().optional(),
+  messagePaddingLeft: z.number().optional(),
+  messagePaddingRight: z.number().optional(),
+  // Bubble corner radii
+  bubbleRadiusNormal: z.number().optional(),
+  bubbleRadiusGrouped: z.number().optional(),
+  // Message spacing
+  messageGapInGroup: z.number().optional(),
   messageGapSameUser: z.number().optional(),
   messageGapDifferentUser: z.number().optional(),
-  sentMessagePaddingLeft: z.number().optional(),
-  sentMessagePaddingRight: z.number().optional(),
-  receivedMessagePaddingLeft: z.number().optional(),
-  receivedMessagePaddingRight: z.number().optional(),
-  multiLineSentMessagePaddingLeft: z.number().optional(),
-  multiLineReceivedMessagePaddingRight: z.number().optional(),
-  messagesAnchorY: z.number().optional(),
+  // Bubble positioning
+  recipientBubbleLeft: z.number().optional(),
+  senderBubbleRight: z.number().optional(),
+  bubbleMaxWidth: z.number().optional(),
   // Messages
   messages: z.array(z.object({
     id: z.string(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.160",
+  "version": "1.8.162",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",