ugcinc-render 1.8.112 → 1.8.114

package/dist/index.d.mts

@@ -753,6 +753,10 @@ interface InstagramDmCompositionProps {
     messagePaddingBottom?: number;
     /** Right padding for multi-line sender messages */
     multiLineSentMessagePaddingRight?: number;
+    /** Left padding for multi-line sender messages */
+    multiLineSentMessagePaddingLeft?: number;
+    /** Right padding for multi-line recipient messages */
+    multiLineRecMessagePaddingRight?: number;
     bubbleRadiusNormal?: number;
     bubbleRadiusGrouped?: number;
     messageGapInGroup?: number;

package/dist/index.d.ts

@@ -753,6 +753,10 @@ interface InstagramDmCompositionProps {
     messagePaddingBottom?: number;
     /** Right padding for multi-line sender messages */
     multiLineSentMessagePaddingRight?: number;
+    /** Left padding for multi-line sender messages */
+    multiLineSentMessagePaddingLeft?: number;
+    /** Right padding for multi-line recipient messages */
+    multiLineRecMessagePaddingRight?: number;
     bubbleRadiusNormal?: number;
     bubbleRadiusGrouped?: number;
     messageGapInGroup?: number;

package/dist/index.js

@@ -3535,11 +3535,13 @@ var MESSAGE_DEFAULTS = {
   messagePaddingRight: 38,
   messagePaddingTop: 27,
   messagePaddingBottom: 33,
-  multiLineSentMessagePaddingRight: 38,
+  multiLineSentMessagePaddingRight: 35,
+  multiLineSentMessagePaddingLeft: 37,
+  multiLineRecMessagePaddingRight: 38,
   bubbleRadiusNormal: 57,
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
-  messageGapSameUser: 66,
+  messageGapSameUser: 36,
   messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
@@ -3601,9 +3603,11 @@ function calculateAutoWidthAndLines2({
     const testLine = currentLine + word;
     const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
-    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
-      lines.push(currentLine.trimEnd());
-      currentLine = word;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
       const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
@@ -3625,6 +3629,8 @@ function calculateAutoWidthAndLines2({
             remainingWord = remainingWord.substring(breakPoint);
           }
         }
+      } else {
+        currentLine = word;
       }
     } else {
       currentLine = testLine;
@@ -3793,6 +3799,8 @@ function generateMessageElements(props, calculatedMessages) {
   const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS.messagePaddingTop;
   const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS.messagePaddingBottom;
   const multiLineSentMessagePaddingRight = props.multiLineSentMessagePaddingRight ?? MESSAGE_DEFAULTS.multiLineSentMessagePaddingRight;
+  const multiLineSentMessagePaddingLeft = props.multiLineSentMessagePaddingLeft ?? MESSAGE_DEFAULTS.multiLineSentMessagePaddingLeft;
+  const multiLineRecMessagePaddingRight = props.multiLineRecMessagePaddingRight ?? MESSAGE_DEFAULTS.multiLineRecMessagePaddingRight;
   const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS.bubbleRadiusNormal;
   const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS.bubbleRadiusGrouped;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
@@ -3820,7 +3828,16 @@ function generateMessageElements(props, calculatedMessages) {
     const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : cm.left;
     const textContent = cm.lines.join("\n");
     const isMultiLine = cm.lines.length > 1;
-    const effectivePaddingRight = isUser && isMultiLine ? multiLineSentMessagePaddingRight : messagePaddingRight;
+    let effectivePaddingRight = messagePaddingRight;
+    let effectivePaddingLeft = messagePaddingLeft;
+    if (isMultiLine) {
+      if (isUser) {
+        effectivePaddingRight = multiLineSentMessagePaddingRight;
+        effectivePaddingLeft = multiLineSentMessagePaddingLeft;
+      } else {
+        effectivePaddingRight = multiLineRecMessagePaddingRight;
+      }
+    }
     elements.push({
       id: `message-${cm.message.id}`,
       type: "text",
@@ -3845,7 +3862,7 @@ function generateMessageElements(props, calculatedMessages) {
       paddingTop: messagePaddingTop,
       paddingRight: effectivePaddingRight,
       paddingBottom: messagePaddingBottom,
-      paddingLeft: messagePaddingLeft,
+      paddingLeft: effectivePaddingLeft,
       autoWidth: true,
       boxAlign: isUser ? "right" : "left"
     });
@@ -3998,14 +4015,14 @@ var defaultInstagramDmProps = {
     // Receiver group 1
     { id: "1", sender: "recipient", text: "single line of sender text" },
     { id: "2", sender: "recipient", text: "double line of sender text, yeah i know right, it's two lines!", groupWithPrevious: true },
-    { id: "3", sender: "recipient", text: "another two line text, i wanna make sure it's the same bro", groupWithPrevious: true },
+    { id: "3", sender: "recipient", text: "another two line text, i wanna make sure its the same bro", groupWithPrevious: true },
     { id: "4", sender: "recipient", text: "like really, is it the same?", groupWithPrevious: true },
     { id: "5", sender: "recipient", text: "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", groupWithPrevious: true },
     { id: "6", sender: "recipient", text: "ok short one", groupWithPrevious: true },
     // Sender group 1
     { id: "7", sender: "user", text: "short one" },
     { id: "8", sender: "user", text: "longer but still a single line", groupWithPrevious: true },
-    { id: "9", sender: "user", text: "another two line text, i wanna make sure it's the same bro", groupWithPrevious: true },
+    { id: "9", sender: "user", text: "another two line text, i wanna make sure its the same bro", groupWithPrevious: true },
     { id: "10", sender: "user", text: "double line of sender text, yeah i know right, it's two lines!", groupWithPrevious: true },
     { id: "11", sender: "user", text: "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", groupWithPrevious: true },
     // Sender group 2
@@ -4025,11 +4042,13 @@ var defaultInstagramDmProps = {
   messagePaddingRight: 38,
   messagePaddingTop: 27,
   messagePaddingBottom: 33,
-  multiLineSentMessagePaddingRight: 38,
+  multiLineSentMessagePaddingRight: 35,
+  multiLineSentMessagePaddingLeft: 37,
+  multiLineRecMessagePaddingRight: 38,
   bubbleRadiusNormal: 57,
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
-  messageGapSameUser: 66,
+  messageGapSameUser: 36,
   messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
@@ -5187,13 +5206,15 @@ var instagramDmSchema = import_zod.z.object({
   messagePaddingRight: import_zod.z.number().optional().default(38).describe("Message padding right"),
   messagePaddingTop: import_zod.z.number().optional().default(27).describe("Message padding top"),
   messagePaddingBottom: import_zod.z.number().optional().default(33).describe("Message padding bottom"),
-  multiLineSentMessagePaddingRight: import_zod.z.number().optional().default(38).describe("Right padding for multi-line sender messages"),
+  multiLineSentMessagePaddingRight: import_zod.z.number().optional().default(35).describe("Right padding for multi-line sender messages"),
+  multiLineSentMessagePaddingLeft: import_zod.z.number().optional().default(37).describe("Left padding for multi-line sender messages"),
+  multiLineRecMessagePaddingRight: import_zod.z.number().optional().default(38).describe("Right padding for multi-line recipient messages"),
   // Bubble corner radii
   bubbleRadiusNormal: import_zod.z.number().optional().default(57).describe("Normal bubble corner radius"),
   bubbleRadiusGrouped: import_zod.z.number().optional().default(12).describe("Grouped bubble corner radius"),
   // Message spacing
   messageGapInGroup: import_zod.z.number().optional().default(6).describe("Gap between messages in group"),
-  messageGapSameUser: import_zod.z.number().optional().default(66).describe("Gap between messages from same user"),
+  messageGapSameUser: import_zod.z.number().optional().default(36).describe("Gap between messages from same user"),
   messageGapDifferentUser: import_zod.z.number().optional().default(37).describe("Gap between messages from different users"),
   // Bubble positioning
   recipientBubbleLeft: import_zod.z.number().optional().default(168).describe("Recipient bubble left X"),

package/dist/index.mjs

@@ -2604,11 +2604,13 @@ var MESSAGE_DEFAULTS = {
   messagePaddingRight: 38,
   messagePaddingTop: 27,
   messagePaddingBottom: 33,
-  multiLineSentMessagePaddingRight: 38,
+  multiLineSentMessagePaddingRight: 35,
+  multiLineSentMessagePaddingLeft: 37,
+  multiLineRecMessagePaddingRight: 38,
   bubbleRadiusNormal: 57,
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
-  messageGapSameUser: 66,
+  messageGapSameUser: 36,
   messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
@@ -2670,9 +2672,11 @@ function calculateAutoWidthAndLines2({
     const testLine = currentLine + word;
     const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
-    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
-      lines.push(currentLine.trimEnd());
-      currentLine = word;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
       const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
@@ -2694,6 +2698,8 @@ function calculateAutoWidthAndLines2({
             remainingWord = remainingWord.substring(breakPoint);
           }
         }
+      } else {
+        currentLine = word;
       }
     } else {
       currentLine = testLine;
@@ -2862,6 +2868,8 @@ function generateMessageElements(props, calculatedMessages) {
   const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS.messagePaddingTop;
   const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS.messagePaddingBottom;
   const multiLineSentMessagePaddingRight = props.multiLineSentMessagePaddingRight ?? MESSAGE_DEFAULTS.multiLineSentMessagePaddingRight;
+  const multiLineSentMessagePaddingLeft = props.multiLineSentMessagePaddingLeft ?? MESSAGE_DEFAULTS.multiLineSentMessagePaddingLeft;
+  const multiLineRecMessagePaddingRight = props.multiLineRecMessagePaddingRight ?? MESSAGE_DEFAULTS.multiLineRecMessagePaddingRight;
   const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS.bubbleRadiusNormal;
   const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS.bubbleRadiusGrouped;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
@@ -2889,7 +2897,16 @@ function generateMessageElements(props, calculatedMessages) {
     const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : cm.left;
     const textContent = cm.lines.join("\n");
     const isMultiLine = cm.lines.length > 1;
-    const effectivePaddingRight = isUser && isMultiLine ? multiLineSentMessagePaddingRight : messagePaddingRight;
+    let effectivePaddingRight = messagePaddingRight;
+    let effectivePaddingLeft = messagePaddingLeft;
+    if (isMultiLine) {
+      if (isUser) {
+        effectivePaddingRight = multiLineSentMessagePaddingRight;
+        effectivePaddingLeft = multiLineSentMessagePaddingLeft;
+      } else {
+        effectivePaddingRight = multiLineRecMessagePaddingRight;
+      }
+    }
     elements.push({
       id: `message-${cm.message.id}`,
       type: "text",
@@ -2914,7 +2931,7 @@ function generateMessageElements(props, calculatedMessages) {
       paddingTop: messagePaddingTop,
       paddingRight: effectivePaddingRight,
       paddingBottom: messagePaddingBottom,
-      paddingLeft: messagePaddingLeft,
+      paddingLeft: effectivePaddingLeft,
       autoWidth: true,
       boxAlign: isUser ? "right" : "left"
     });
@@ -3067,14 +3084,14 @@ var defaultInstagramDmProps = {
     // Receiver group 1
     { id: "1", sender: "recipient", text: "single line of sender text" },
     { id: "2", sender: "recipient", text: "double line of sender text, yeah i know right, it's two lines!", groupWithPrevious: true },
-    { id: "3", sender: "recipient", text: "another two line text, i wanna make sure it's the same bro", groupWithPrevious: true },
+    { id: "3", sender: "recipient", text: "another two line text, i wanna make sure its the same bro", groupWithPrevious: true },
     { id: "4", sender: "recipient", text: "like really, is it the same?", groupWithPrevious: true },
     { id: "5", sender: "recipient", text: "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", groupWithPrevious: true },
     { id: "6", sender: "recipient", text: "ok short one", groupWithPrevious: true },
     // Sender group 1
     { id: "7", sender: "user", text: "short one" },
     { id: "8", sender: "user", text: "longer but still a single line", groupWithPrevious: true },
-    { id: "9", sender: "user", text: "another two line text, i wanna make sure it's the same bro", groupWithPrevious: true },
+    { id: "9", sender: "user", text: "another two line text, i wanna make sure its the same bro", groupWithPrevious: true },
     { id: "10", sender: "user", text: "double line of sender text, yeah i know right, it's two lines!", groupWithPrevious: true },
     { id: "11", sender: "user", text: "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", groupWithPrevious: true },
     // Sender group 2
@@ -3094,11 +3111,13 @@ var defaultInstagramDmProps = {
   messagePaddingRight: 38,
   messagePaddingTop: 27,
   messagePaddingBottom: 33,
-  multiLineSentMessagePaddingRight: 38,
+  multiLineSentMessagePaddingRight: 35,
+  multiLineSentMessagePaddingLeft: 37,
+  multiLineRecMessagePaddingRight: 38,
   bubbleRadiusNormal: 57,
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
-  messageGapSameUser: 66,
+  messageGapSameUser: 36,
   messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
@@ -3973,13 +3992,15 @@ var instagramDmSchema = z.object({
   messagePaddingRight: z.number().optional().default(38).describe("Message padding right"),
   messagePaddingTop: z.number().optional().default(27).describe("Message padding top"),
   messagePaddingBottom: z.number().optional().default(33).describe("Message padding bottom"),
-  multiLineSentMessagePaddingRight: z.number().optional().default(38).describe("Right padding for multi-line sender messages"),
+  multiLineSentMessagePaddingRight: z.number().optional().default(35).describe("Right padding for multi-line sender messages"),
+  multiLineSentMessagePaddingLeft: z.number().optional().default(37).describe("Left padding for multi-line sender messages"),
+  multiLineRecMessagePaddingRight: z.number().optional().default(38).describe("Right padding for multi-line recipient messages"),
   // Bubble corner radii
   bubbleRadiusNormal: z.number().optional().default(57).describe("Normal bubble corner radius"),
   bubbleRadiusGrouped: z.number().optional().default(12).describe("Grouped bubble corner radius"),
   // Message spacing
   messageGapInGroup: z.number().optional().default(6).describe("Gap between messages in group"),
-  messageGapSameUser: z.number().optional().default(66).describe("Gap between messages from same user"),
+  messageGapSameUser: z.number().optional().default(36).describe("Gap between messages from same user"),
   messageGapDifferentUser: z.number().optional().default(37).describe("Gap between messages from different users"),
   // Bubble positioning
   recipientBubbleLeft: z.number().optional().default(168).describe("Recipient bubble left X"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.112",
+  "version": "1.8.114",
   "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",