ugcinc-render 1.8.101 → 1.8.103

package/dist/index.js

@@ -3544,7 +3544,7 @@ var DEFAULTS2 = {
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
   messageGapSameUser: 35,
-  messageGapDifferentUser: 161,
+  messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
   bubbleMaxWidth: 866,
@@ -3576,6 +3576,25 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
     return interpolateColor(gradientMiddle, gradientTop, (t - 0.5) * 2);
   }
 }
+var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+function measureTextWidth(text, fontSize) {
+  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: 400;
+    letter-spacing: 0px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  measureSpan.textContent = text;
+  const width = measureSpan.getBoundingClientRect().width;
+  document.body.removeChild(measureSpan);
+  return width;
+}
 function IgMessages({
   messages = [],
   messageAreaTop = DEFAULTS2.messageAreaTop,
@@ -3629,15 +3648,19 @@ function IgMessages({
         gap = messageGapDifferentUser;
       }
     }
-    const charWidth = messageFontSize * 0.5;
-    const charsPerLine = Math.floor(maxTextWidth / charWidth);
-    const lineCount = Math.max(1, Math.ceil(message.text.length / charsPerLine));
+    const actualTextWidth = measureTextWidth(message.text, messageFontSize);
+    const fitsOnSingleLine = actualTextWidth <= maxTextWidth;
+    let lineCount;
+    if (fitsOnSingleLine) {
+      lineCount = 1;
+    } else {
+      lineCount = Math.ceil(actualTextWidth / maxTextWidth);
+    }
     const textHeight = lineCount * messageLineHeight;
     const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
     let bubbleWidth;
-    if (lineCount === 1) {
-      const estimatedTextWidth = message.text.length * charWidth;
-      bubbleWidth = Math.min(estimatedTextWidth + messagePaddingLeft + messagePaddingRight, bubbleMaxWidth);
+    if (fitsOnSingleLine) {
+      bubbleWidth = actualTextWidth + messagePaddingLeft + messagePaddingRight;
     } else {
       bubbleWidth = bubbleMaxWidth;
     }
@@ -3797,7 +3820,7 @@ function IgMessages({
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
-  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3178-gcWrBjtrdF2KFFdqKvBOt4lhu4AEZb.png",
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3177-twSYuZPHRoxH9PA2xhpDUeKIg2ny7p.png",
   showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
@@ -3892,7 +3915,7 @@ var defaultInstagramDmProps = {
   bubbleRadiusGrouped: 12,
   messageGapInGroup: DEFAULTS2.messageGapInGroup,
   messageGapSameUser: DEFAULTS2.messageGapSameUser,
-  messageGapDifferentUser: DEFAULTS2.messageGapDifferentUser,
+  messageGapDifferentUser: 37,
   recipientBubbleLeft: DEFAULTS2.recipientBubbleLeft,
   senderBubbleRight: DEFAULTS2.senderBubbleRight,
   bubbleMaxWidth: DEFAULTS2.bubbleMaxWidth,
@@ -5178,7 +5201,7 @@ var instagramDmSchema = import_zod.z.object({
   // Debug overlay
   showDebugOverlay: import_zod.z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
   // Reference overlay
-  referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3178-gcWrBjtrdF2KFFdqKvBOt4lhu4AEZb.png").describe("Reference screenshot URL"),
+  referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3177-twSYuZPHRoxH9PA2xhpDUeKIg2ny7p.png").describe("Reference screenshot URL"),
   showReferenceImage: import_zod.z.boolean().optional().default(true).describe("Show/hide reference image"),
   referenceOpacity: import_zod.z.number().min(0).max(100).optional().default(50).describe("Reference overlay opacity (0-100)"),
   // Canvas
@@ -5270,7 +5293,7 @@ var instagramDmSchema = import_zod.z.object({
   // Message spacing
   messageGapInGroup: import_zod.z.number().optional().default(6).describe("Gap between messages in group"),
   messageGapSameUser: import_zod.z.number().optional().default(35).describe("Gap between messages from same user"),
-  messageGapDifferentUser: import_zod.z.number().optional().default(161).describe("Gap between messages from different users"),
+  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"),
   senderBubbleRight: import_zod.z.number().optional().default(1182).describe("Sender bubble right X"),

package/dist/index.mjs

@@ -2613,7 +2613,7 @@ var DEFAULTS2 = {
   bubbleRadiusGrouped: 12,
   messageGapInGroup: 6,
   messageGapSameUser: 35,
-  messageGapDifferentUser: 161,
+  messageGapDifferentUser: 37,
   recipientBubbleLeft: 168,
   senderBubbleRight: 1182,
   bubbleMaxWidth: 866,
@@ -2645,6 +2645,25 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
     return interpolateColor(gradientMiddle, gradientTop, (t - 0.5) * 2);
   }
 }
+var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+function measureTextWidth(text, fontSize) {
+  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: 400;
+    letter-spacing: 0px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  measureSpan.textContent = text;
+  const width = measureSpan.getBoundingClientRect().width;
+  document.body.removeChild(measureSpan);
+  return width;
+}
 function IgMessages({
   messages = [],
   messageAreaTop = DEFAULTS2.messageAreaTop,
@@ -2698,15 +2717,19 @@ function IgMessages({
         gap = messageGapDifferentUser;
       }
     }
-    const charWidth = messageFontSize * 0.5;
-    const charsPerLine = Math.floor(maxTextWidth / charWidth);
-    const lineCount = Math.max(1, Math.ceil(message.text.length / charsPerLine));
+    const actualTextWidth = measureTextWidth(message.text, messageFontSize);
+    const fitsOnSingleLine = actualTextWidth <= maxTextWidth;
+    let lineCount;
+    if (fitsOnSingleLine) {
+      lineCount = 1;
+    } else {
+      lineCount = Math.ceil(actualTextWidth / maxTextWidth);
+    }
     const textHeight = lineCount * messageLineHeight;
     const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
     let bubbleWidth;
-    if (lineCount === 1) {
-      const estimatedTextWidth = message.text.length * charWidth;
-      bubbleWidth = Math.min(estimatedTextWidth + messagePaddingLeft + messagePaddingRight, bubbleMaxWidth);
+    if (fitsOnSingleLine) {
+      bubbleWidth = actualTextWidth + messagePaddingLeft + messagePaddingRight;
     } else {
       bubbleWidth = bubbleMaxWidth;
     }
@@ -2866,7 +2889,7 @@ function IgMessages({
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
-  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3178-gcWrBjtrdF2KFFdqKvBOt4lhu4AEZb.png",
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3177-twSYuZPHRoxH9PA2xhpDUeKIg2ny7p.png",
   showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
@@ -2961,7 +2984,7 @@ var defaultInstagramDmProps = {
   bubbleRadiusGrouped: 12,
   messageGapInGroup: DEFAULTS2.messageGapInGroup,
   messageGapSameUser: DEFAULTS2.messageGapSameUser,
-  messageGapDifferentUser: DEFAULTS2.messageGapDifferentUser,
+  messageGapDifferentUser: 37,
   recipientBubbleLeft: DEFAULTS2.recipientBubbleLeft,
   senderBubbleRight: DEFAULTS2.senderBubbleRight,
   bubbleMaxWidth: DEFAULTS2.bubbleMaxWidth,
@@ -3964,7 +3987,7 @@ var instagramDmSchema = z.object({
   // Debug overlay
   showDebugOverlay: z.boolean().optional().default(true).describe("Show debug overlay with mouse coordinates"),
   // Reference overlay
-  referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3178-gcWrBjtrdF2KFFdqKvBOt4lhu4AEZb.png").describe("Reference screenshot URL"),
+  referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3177-twSYuZPHRoxH9PA2xhpDUeKIg2ny7p.png").describe("Reference screenshot URL"),
   showReferenceImage: z.boolean().optional().default(true).describe("Show/hide reference image"),
   referenceOpacity: z.number().min(0).max(100).optional().default(50).describe("Reference overlay opacity (0-100)"),
   // Canvas
@@ -4056,7 +4079,7 @@ var instagramDmSchema = z.object({
   // Message spacing
   messageGapInGroup: z.number().optional().default(6).describe("Gap between messages in group"),
   messageGapSameUser: z.number().optional().default(35).describe("Gap between messages from same user"),
-  messageGapDifferentUser: z.number().optional().default(161).describe("Gap between messages from different users"),
+  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"),
   senderBubbleRight: z.number().optional().default(1182).describe("Sender bubble right X"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.101",
+  "version": "1.8.103",
   "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",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@remotion/player": "^4.0.0",
-    "ugcinc-render": "^1.8.46",
+    "ugcinc-render": "^1.8.101",
     "zod": "^3.22.0"
   },
   "devDependencies": {