ugcinc-render 1.8.102 → 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,
@@ -3578,10 +3578,22 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
 }
 var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
 function measureTextWidth(text, fontSize) {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  ctx.font = `400 ${fontSize}px ${FONT_FAMILY}`;
-  return ctx.measureText(text).width;
+  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 = [],
@@ -3808,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,
@@ -3903,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,
@@ -5189,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
@@ -5281,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,
@@ -2647,10 +2647,22 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
 }
 var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
 function measureTextWidth(text, fontSize) {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  ctx.font = `400 ${fontSize}px ${FONT_FAMILY}`;
-  return ctx.measureText(text).width;
+  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 = [],
@@ -2877,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,
@@ -2972,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,
@@ -3975,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
@@ -4067,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.102",
+  "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",