ugcinc-render 1.8.180 → 1.8.182

package/dist/index.d.mts

@@ -1136,14 +1136,22 @@ interface IMessageDmCompositionProps {
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
     showMessageTails?: boolean;
-    recipientTailOffsetLeft?: number;
-    recipientTailOffsetRight?: number;
-    recipientTailOffsetTop?: number;
-    recipientTailOffsetBottom?: number;
-    senderTailOffsetLeft?: number;
-    senderTailOffsetRight?: number;
-    senderTailOffsetTop?: number;
-    senderTailOffsetBottom?: number;
+    recipientTailSideY?: number;
+    recipientTailCurveStartY?: number;
+    recipientTailTipX?: number;
+    recipientTailTipY?: number;
+    recipientTailBottomX?: number;
+    recipientTailBottomY?: number;
+    recipientTailTopBend?: number;
+    recipientTailBottomBend?: number;
+    senderTailSideY?: number;
+    senderTailCurveStartY?: number;
+    senderTailTipX?: number;
+    senderTailTipY?: number;
+    senderTailBottomX?: number;
+    senderTailBottomY?: number;
+    senderTailTopBend?: number;
+    senderTailBottomBend?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.d.ts

@@ -1136,14 +1136,22 @@ interface IMessageDmCompositionProps {
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
     showMessageTails?: boolean;
-    recipientTailOffsetLeft?: number;
-    recipientTailOffsetRight?: number;
-    recipientTailOffsetTop?: number;
-    recipientTailOffsetBottom?: number;
-    senderTailOffsetLeft?: number;
-    senderTailOffsetRight?: number;
-    senderTailOffsetTop?: number;
-    senderTailOffsetBottom?: number;
+    recipientTailSideY?: number;
+    recipientTailCurveStartY?: number;
+    recipientTailTipX?: number;
+    recipientTailTipY?: number;
+    recipientTailBottomX?: number;
+    recipientTailBottomY?: number;
+    recipientTailTopBend?: number;
+    recipientTailBottomBend?: number;
+    senderTailSideY?: number;
+    senderTailCurveStartY?: number;
+    senderTailTipX?: number;
+    senderTailTipY?: number;
+    senderTailBottomX?: number;
+    senderTailBottomY?: number;
+    senderTailTopBend?: number;
+    senderTailBottomBend?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.js

@@ -5306,16 +5306,6 @@ var MESSAGE_DEFAULTS2 = {
   messageHeaderRight: 1206,
   // Message tails (on last message in group)
   showMessageTails: true,
-  // Recipient tail offsets (from message left & bottom)
-  recipientTailOffsetLeft: -16,
-  recipientTailOffsetRight: 18,
-  recipientTailOffsetTop: -47,
-  recipientTailOffsetBottom: 0,
-  // Sender tail offsets (from message right & bottom)
-  senderTailOffsetLeft: -18,
-  senderTailOffsetRight: 16,
-  senderTailOffsetTop: -47,
-  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -5629,42 +5619,18 @@ function generateTailData(props, calculatedMessages) {
     return [];
   }
   const tails = [];
-  const recipientTailOffsetLeft = props.recipientTailOffsetLeft ?? MESSAGE_DEFAULTS2.recipientTailOffsetLeft;
-  const recipientTailOffsetRight = props.recipientTailOffsetRight ?? MESSAGE_DEFAULTS2.recipientTailOffsetRight;
-  const recipientTailOffsetTop = props.recipientTailOffsetTop ?? MESSAGE_DEFAULTS2.recipientTailOffsetTop;
-  const recipientTailOffsetBottom = props.recipientTailOffsetBottom ?? MESSAGE_DEFAULTS2.recipientTailOffsetBottom;
-  const senderTailOffsetLeft = props.senderTailOffsetLeft ?? MESSAGE_DEFAULTS2.senderTailOffsetLeft;
-  const senderTailOffsetRight = props.senderTailOffsetRight ?? MESSAGE_DEFAULTS2.senderTailOffsetRight;
-  const senderTailOffsetTop = props.senderTailOffsetTop ?? MESSAGE_DEFAULTS2.senderTailOffsetTop;
-  const senderTailOffsetBottom = props.senderTailOffsetBottom ?? MESSAGE_DEFAULTS2.senderTailOffsetBottom;
   for (let i = 0; i < calculatedMessages.length; i++) {
     const cm = calculatedMessages[i];
     if (!cm.isLastInGroup) {
       continue;
     }
-    const isUser = cm.message.sender === "user";
-    const messageLeft = cm.left;
-    const messageRight = cm.left + cm.width;
-    const messageBottom = cm.bottom;
-    if (isUser) {
-      tails.push({
-        id: `tail-${cm.message.id}`,
-        x: messageRight + senderTailOffsetLeft,
-        y: messageBottom + senderTailOffsetTop,
-        width: senderTailOffsetRight - senderTailOffsetLeft,
-        height: senderTailOffsetBottom - senderTailOffsetTop,
-        image: "imsg-sender-tail.png"
-      });
-    } else {
-      tails.push({
-        id: `tail-${cm.message.id}`,
-        x: messageLeft + recipientTailOffsetLeft,
-        y: messageBottom + recipientTailOffsetTop,
-        width: recipientTailOffsetRight - recipientTailOffsetLeft,
-        height: recipientTailOffsetBottom - recipientTailOffsetTop,
-        image: "imsg-recv-tail.png"
-      });
-    }
+    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;
 }
@@ -5969,18 +5935,36 @@ var defaultIMessageDmProps = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
-  // Message tails (on last message in group)
+  // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
-  // Recipient tail offsets (from message left & bottom)
-  recipientTailOffsetLeft: -16,
-  recipientTailOffsetRight: 18,
-  recipientTailOffsetTop: -47,
-  recipientTailOffsetBottom: 0,
-  // Sender tail offsets (from message right & bottom)
-  senderTailOffsetLeft: -18,
-  senderTailOffsetRight: 16,
-  senderTailOffsetTop: -47,
-  senderTailOffsetBottom: 1,
+  // Recipient tail anchor points (offsets from message left & bottom)
+  recipientTailSideY: -47,
+  // Y where tail meets bubble (top of straight line)
+  recipientTailCurveStartY: -20,
+  // Y where straight line ends and curve begins
+  recipientTailTipX: -16,
+  recipientTailTipY: 0,
+  recipientTailBottomX: 18,
+  recipientTailBottomY: -11,
+  // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
+  recipientTailTopBend: -0.5,
+  // Top curve bends inward
+  recipientTailBottomBend: 0.5,
+  // Bottom curve bends outward
+  // Sender tail anchor points (offsets from message right & bottom)
+  senderTailSideY: -47,
+  // Y where tail meets bubble (top of straight line)
+  senderTailCurveStartY: -20,
+  // Y where straight line ends and curve begins
+  senderTailTipX: 16,
+  senderTailTipY: 1,
+  senderTailBottomX: -18,
+  senderTailBottomY: -11,
+  // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
+  senderTailTopBend: -0.5,
+  // Top curve bends inward
+  senderTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -6151,8 +6135,27 @@ var IMessageDmComposition = (props) => {
     messageTextFontSize = 48,
     messageTextColor = "#8e8e93",
     messageText = "iMessage",
-    // Sender bubble color (for unread badge background)
-    senderBubbleColor = "#1a42d5"
+    // Bubble colors
+    senderBubbleColor = "#1a42d5",
+    recipientBubbleColor = "#303032",
+    // Tail props - recipient (offsets from message left & bottom)
+    recipientTailSideY = -47,
+    recipientTailCurveStartY = -20,
+    recipientTailTipX = -16,
+    recipientTailTipY = 0,
+    recipientTailBottomX = 18,
+    recipientTailBottomY = -11,
+    recipientTailTopBend = -0.5,
+    recipientTailBottomBend = 0.5,
+    // Tail props - sender (offsets from message right & bottom)
+    senderTailSideY = -47,
+    senderTailCurveStartY = -20,
+    senderTailTipX = 16,
+    senderTailTipY = 1,
+    senderTailBottomX = -18,
+    senderTailBottomY = -11,
+    senderTailTopBend = -0.5,
+    senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     BaseDmComposition,
@@ -6403,21 +6406,56 @@ var IMessageDmComposition = (props) => {
             children: messageText
           }
         ),
-        conversionResult.tails.map((tail) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
-          {
-            src: (0, import_remotion10.staticFile)(tail.image),
-            style: {
-              position: "absolute",
-              top: tail.y,
-              left: tail.x,
-              width: tail.width,
-              height: tail.height,
-              zIndex: 4
-            }
-          },
-          tail.id
-        )),
+        conversionResult.tails.map((tail) => {
+          const refX = tail.isUser ? tail.messageRight : tail.messageLeft;
+          const refY = tail.messageBottom;
+          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
+          const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
+          const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
+          const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
+          const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
+          const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
+          const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
+          const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
+          const sideX = refX;
+          const curveStartX = refX;
+          const topMidX = (curveStartX + tipX) / 2;
+          const topMidY = (curveStartY + tipY) / 2;
+          const topDx = tipX - curveStartX;
+          const topDy = tipY - curveStartY;
+          const topLen = Math.sqrt(topDx * topDx + topDy * topDy);
+          const topPerpX = tail.isUser ? topDy / topLen : -topDy / topLen;
+          const topPerpY = tail.isUser ? -topDx / topLen : topDx / topLen;
+          const topCurveX = topMidX + topPerpX * topBend * topLen;
+          const topCurveY = topMidY + topPerpY * topBend * topLen;
+          const bottomMidX = (tipX + bottomX) / 2;
+          const bottomMidY = (tipY + bottomY) / 2;
+          const bottomDx = bottomX - tipX;
+          const bottomDy = bottomY - tipY;
+          const bottomLen = Math.sqrt(bottomDx * bottomDx + bottomDy * bottomDy);
+          const bottomPerpX = tail.isUser ? bottomDy / bottomLen : -bottomDy / bottomLen;
+          const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
+          const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
+          const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
+          const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "svg",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width,
+                height,
+                zIndex: 4,
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: pathD, fill: fillColor })
+            },
+            tail.id
+          );
+        }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ImageEditorComposition,
           {
@@ -7351,16 +7389,28 @@ var iMessageDmPropsSchema = import_zod.z.object({
   messageHeaderLetterSpacing: import_zod.z.number().optional(),
   messageHeaderLeft: import_zod.z.number().optional(),
   messageHeaderRight: import_zod.z.number().optional(),
-  // Message tails
+  // Message tails (SVG-based)
   showMessageTails: import_zod.z.boolean().optional(),
-  recipientTailOffsetLeft: import_zod.z.number().optional(),
-  recipientTailOffsetRight: import_zod.z.number().optional(),
-  recipientTailOffsetTop: import_zod.z.number().optional(),
-  recipientTailOffsetBottom: import_zod.z.number().optional(),
-  senderTailOffsetLeft: import_zod.z.number().optional(),
-  senderTailOffsetRight: import_zod.z.number().optional(),
-  senderTailOffsetTop: import_zod.z.number().optional(),
-  senderTailOffsetBottom: import_zod.z.number().optional(),
+  // Recipient tail anchor points
+  recipientTailSideY: import_zod.z.number().optional(),
+  recipientTailCurveStartY: import_zod.z.number().optional(),
+  recipientTailTipX: import_zod.z.number().optional(),
+  recipientTailTipY: import_zod.z.number().optional(),
+  recipientTailBottomX: import_zod.z.number().optional(),
+  recipientTailBottomY: import_zod.z.number().optional(),
+  // Recipient tail curve bend
+  recipientTailTopBend: import_zod.z.number().optional(),
+  recipientTailBottomBend: import_zod.z.number().optional(),
+  // Sender tail anchor points
+  senderTailSideY: import_zod.z.number().optional(),
+  senderTailCurveStartY: import_zod.z.number().optional(),
+  senderTailTipX: import_zod.z.number().optional(),
+  senderTailTipY: import_zod.z.number().optional(),
+  senderTailBottomX: import_zod.z.number().optional(),
+  senderTailBottomY: import_zod.z.number().optional(),
+  // Sender tail curve bend
+  senderTailTopBend: import_zod.z.number().optional(),
+  senderTailBottomBend: import_zod.z.number().optional(),
   // Read receipt
   showReadReceipt: import_zod.z.boolean().optional(),
   readReceiptText: import_zod.z.string().optional(),

package/dist/index.mjs

@@ -4352,16 +4352,6 @@ var MESSAGE_DEFAULTS2 = {
   messageHeaderRight: 1206,
   // Message tails (on last message in group)
   showMessageTails: true,
-  // Recipient tail offsets (from message left & bottom)
-  recipientTailOffsetLeft: -16,
-  recipientTailOffsetRight: 18,
-  recipientTailOffsetTop: -47,
-  recipientTailOffsetBottom: 0,
-  // Sender tail offsets (from message right & bottom)
-  senderTailOffsetLeft: -18,
-  senderTailOffsetRight: 16,
-  senderTailOffsetTop: -47,
-  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -4675,42 +4665,18 @@ function generateTailData(props, calculatedMessages) {
     return [];
   }
   const tails = [];
-  const recipientTailOffsetLeft = props.recipientTailOffsetLeft ?? MESSAGE_DEFAULTS2.recipientTailOffsetLeft;
-  const recipientTailOffsetRight = props.recipientTailOffsetRight ?? MESSAGE_DEFAULTS2.recipientTailOffsetRight;
-  const recipientTailOffsetTop = props.recipientTailOffsetTop ?? MESSAGE_DEFAULTS2.recipientTailOffsetTop;
-  const recipientTailOffsetBottom = props.recipientTailOffsetBottom ?? MESSAGE_DEFAULTS2.recipientTailOffsetBottom;
-  const senderTailOffsetLeft = props.senderTailOffsetLeft ?? MESSAGE_DEFAULTS2.senderTailOffsetLeft;
-  const senderTailOffsetRight = props.senderTailOffsetRight ?? MESSAGE_DEFAULTS2.senderTailOffsetRight;
-  const senderTailOffsetTop = props.senderTailOffsetTop ?? MESSAGE_DEFAULTS2.senderTailOffsetTop;
-  const senderTailOffsetBottom = props.senderTailOffsetBottom ?? MESSAGE_DEFAULTS2.senderTailOffsetBottom;
   for (let i = 0; i < calculatedMessages.length; i++) {
     const cm = calculatedMessages[i];
     if (!cm.isLastInGroup) {
       continue;
     }
-    const isUser = cm.message.sender === "user";
-    const messageLeft = cm.left;
-    const messageRight = cm.left + cm.width;
-    const messageBottom = cm.bottom;
-    if (isUser) {
-      tails.push({
-        id: `tail-${cm.message.id}`,
-        x: messageRight + senderTailOffsetLeft,
-        y: messageBottom + senderTailOffsetTop,
-        width: senderTailOffsetRight - senderTailOffsetLeft,
-        height: senderTailOffsetBottom - senderTailOffsetTop,
-        image: "imsg-sender-tail.png"
-      });
-    } else {
-      tails.push({
-        id: `tail-${cm.message.id}`,
-        x: messageLeft + recipientTailOffsetLeft,
-        y: messageBottom + recipientTailOffsetTop,
-        width: recipientTailOffsetRight - recipientTailOffsetLeft,
-        height: recipientTailOffsetBottom - recipientTailOffsetTop,
-        image: "imsg-recv-tail.png"
-      });
-    }
+    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;
 }
@@ -5015,18 +4981,36 @@ var defaultIMessageDmProps = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
-  // Message tails (on last message in group)
+  // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
-  // Recipient tail offsets (from message left & bottom)
-  recipientTailOffsetLeft: -16,
-  recipientTailOffsetRight: 18,
-  recipientTailOffsetTop: -47,
-  recipientTailOffsetBottom: 0,
-  // Sender tail offsets (from message right & bottom)
-  senderTailOffsetLeft: -18,
-  senderTailOffsetRight: 16,
-  senderTailOffsetTop: -47,
-  senderTailOffsetBottom: 1,
+  // Recipient tail anchor points (offsets from message left & bottom)
+  recipientTailSideY: -47,
+  // Y where tail meets bubble (top of straight line)
+  recipientTailCurveStartY: -20,
+  // Y where straight line ends and curve begins
+  recipientTailTipX: -16,
+  recipientTailTipY: 0,
+  recipientTailBottomX: 18,
+  recipientTailBottomY: -11,
+  // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
+  recipientTailTopBend: -0.5,
+  // Top curve bends inward
+  recipientTailBottomBend: 0.5,
+  // Bottom curve bends outward
+  // Sender tail anchor points (offsets from message right & bottom)
+  senderTailSideY: -47,
+  // Y where tail meets bubble (top of straight line)
+  senderTailCurveStartY: -20,
+  // Y where straight line ends and curve begins
+  senderTailTipX: 16,
+  senderTailTipY: 1,
+  senderTailBottomX: -18,
+  senderTailBottomY: -11,
+  // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
+  senderTailTopBend: -0.5,
+  // Top curve bends inward
+  senderTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -5197,8 +5181,27 @@ var IMessageDmComposition = (props) => {
     messageTextFontSize = 48,
     messageTextColor = "#8e8e93",
     messageText = "iMessage",
-    // Sender bubble color (for unread badge background)
-    senderBubbleColor = "#1a42d5"
+    // Bubble colors
+    senderBubbleColor = "#1a42d5",
+    recipientBubbleColor = "#303032",
+    // Tail props - recipient (offsets from message left & bottom)
+    recipientTailSideY = -47,
+    recipientTailCurveStartY = -20,
+    recipientTailTipX = -16,
+    recipientTailTipY = 0,
+    recipientTailBottomX = 18,
+    recipientTailBottomY = -11,
+    recipientTailTopBend = -0.5,
+    recipientTailBottomBend = 0.5,
+    // Tail props - sender (offsets from message right & bottom)
+    senderTailSideY = -47,
+    senderTailCurveStartY = -20,
+    senderTailTipX = 16,
+    senderTailTipY = 1,
+    senderTailBottomX = -18,
+    senderTailBottomY = -11,
+    senderTailTopBend = -0.5,
+    senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ jsxs10(
     BaseDmComposition,
@@ -5449,21 +5452,56 @@ var IMessageDmComposition = (props) => {
             children: messageText
           }
         ),
-        conversionResult.tails.map((tail) => /* @__PURE__ */ jsx12(
-          Img5,
-          {
-            src: staticFile3(tail.image),
-            style: {
-              position: "absolute",
-              top: tail.y,
-              left: tail.x,
-              width: tail.width,
-              height: tail.height,
-              zIndex: 4
-            }
-          },
-          tail.id
-        )),
+        conversionResult.tails.map((tail) => {
+          const refX = tail.isUser ? tail.messageRight : tail.messageLeft;
+          const refY = tail.messageBottom;
+          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
+          const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
+          const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
+          const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
+          const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
+          const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
+          const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
+          const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
+          const sideX = refX;
+          const curveStartX = refX;
+          const topMidX = (curveStartX + tipX) / 2;
+          const topMidY = (curveStartY + tipY) / 2;
+          const topDx = tipX - curveStartX;
+          const topDy = tipY - curveStartY;
+          const topLen = Math.sqrt(topDx * topDx + topDy * topDy);
+          const topPerpX = tail.isUser ? topDy / topLen : -topDy / topLen;
+          const topPerpY = tail.isUser ? -topDx / topLen : topDx / topLen;
+          const topCurveX = topMidX + topPerpX * topBend * topLen;
+          const topCurveY = topMidY + topPerpY * topBend * topLen;
+          const bottomMidX = (tipX + bottomX) / 2;
+          const bottomMidY = (tipY + bottomY) / 2;
+          const bottomDx = bottomX - tipX;
+          const bottomDy = bottomY - tipY;
+          const bottomLen = Math.sqrt(bottomDx * bottomDx + bottomDy * bottomDy);
+          const bottomPerpX = tail.isUser ? bottomDy / bottomLen : -bottomDy / bottomLen;
+          const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
+          const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
+          const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
+          const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
+          return /* @__PURE__ */ jsx12(
+            "svg",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width,
+                height,
+                zIndex: 4,
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ jsx12("path", { d: pathD, fill: fillColor })
+            },
+            tail.id
+          );
+        }),
         /* @__PURE__ */ jsx12(
           ImageEditorComposition,
           {
@@ -6114,16 +6152,28 @@ var iMessageDmPropsSchema = z.object({
   messageHeaderLetterSpacing: z.number().optional(),
   messageHeaderLeft: z.number().optional(),
   messageHeaderRight: z.number().optional(),
-  // Message tails
+  // Message tails (SVG-based)
   showMessageTails: z.boolean().optional(),
-  recipientTailOffsetLeft: z.number().optional(),
-  recipientTailOffsetRight: z.number().optional(),
-  recipientTailOffsetTop: z.number().optional(),
-  recipientTailOffsetBottom: z.number().optional(),
-  senderTailOffsetLeft: z.number().optional(),
-  senderTailOffsetRight: z.number().optional(),
-  senderTailOffsetTop: z.number().optional(),
-  senderTailOffsetBottom: z.number().optional(),
+  // Recipient tail anchor points
+  recipientTailSideY: z.number().optional(),
+  recipientTailCurveStartY: z.number().optional(),
+  recipientTailTipX: z.number().optional(),
+  recipientTailTipY: z.number().optional(),
+  recipientTailBottomX: z.number().optional(),
+  recipientTailBottomY: z.number().optional(),
+  // Recipient tail curve bend
+  recipientTailTopBend: z.number().optional(),
+  recipientTailBottomBend: z.number().optional(),
+  // Sender tail anchor points
+  senderTailSideY: z.number().optional(),
+  senderTailCurveStartY: z.number().optional(),
+  senderTailTipX: z.number().optional(),
+  senderTailTipY: z.number().optional(),
+  senderTailBottomX: z.number().optional(),
+  senderTailBottomY: z.number().optional(),
+  // Sender tail curve bend
+  senderTailTopBend: z.number().optional(),
+  senderTailBottomBend: z.number().optional(),
   // Read receipt
   showReadReceipt: z.boolean().optional(),
   readReceiptText: z.string().optional(),

package/package.json

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