ugcinc-render 1.8.182 → 1.8.183

package/dist/index.d.mts

@@ -1142,6 +1142,7 @@ interface IMessageDmCompositionProps {
     recipientTailTipY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
+    recipientTailBottomEndX?: number;
     recipientTailTopBend?: number;
     recipientTailBottomBend?: number;
     senderTailSideY?: number;
@@ -1150,6 +1151,7 @@ interface IMessageDmCompositionProps {
     senderTailTipY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
+    senderTailBottomEndX?: number;
     senderTailTopBend?: number;
     senderTailBottomBend?: number;
     showReadReceipt?: boolean;

package/dist/index.d.ts

@@ -1142,6 +1142,7 @@ interface IMessageDmCompositionProps {
     recipientTailTipY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
+    recipientTailBottomEndX?: number;
     recipientTailTopBend?: number;
     recipientTailBottomBend?: number;
     senderTailSideY?: number;
@@ -1150,6 +1151,7 @@ interface IMessageDmCompositionProps {
     senderTailTipY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
+    senderTailBottomEndX?: number;
     senderTailTopBend?: number;
     senderTailBottomBend?: number;
     showReadReceipt?: boolean;

package/dist/index.js

@@ -5938,30 +5938,38 @@ var defaultIMessageDmProps = {
   // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
   // Recipient tail anchor points (offsets from message left & bottom)
-  recipientTailSideY: -47,
+  recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  recipientTailCurveStartY: -20,
+  recipientTailCurveStartY: -33,
   // Y where straight line ends and curve begins
-  recipientTailTipX: -16,
-  recipientTailTipY: 0,
-  recipientTailBottomX: 18,
-  recipientTailBottomY: -11,
+  recipientTailTipX: -17,
+  recipientTailTipY: -1,
+  recipientTailBottomX: -19,
+  // X where bottom curve ends
+  recipientTailBottomY: -12,
+  // Y where bottom curve ends
+  recipientTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
-  recipientTailTopBend: -0.5,
+  recipientTailTopBend: -0.3,
   // Top curve bends inward
   recipientTailBottomBend: 0.5,
   // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
-  senderTailSideY: -47,
+  senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  senderTailCurveStartY: -20,
+  senderTailCurveStartY: -33,
   // Y where straight line ends and curve begins
-  senderTailTipX: 16,
-  senderTailTipY: 1,
-  senderTailBottomX: -18,
-  senderTailBottomY: -11,
+  senderTailTipX: 17,
+  senderTailTipY: -1,
+  senderTailBottomX: 19,
+  // X where bottom curve ends
+  senderTailBottomY: -12,
+  // Y where bottom curve ends
+  senderTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
-  senderTailTopBend: -0.5,
+  senderTailTopBend: -0.3,
   // Top curve bends inward
   senderTailBottomBend: 0.5,
   // Bottom curve bends outward
@@ -6139,22 +6147,24 @@ var IMessageDmComposition = (props) => {
     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,
+    recipientTailSideY = -53,
+    recipientTailCurveStartY = -33,
+    recipientTailTipX = -17,
+    recipientTailTipY = -1,
+    recipientTailBottomX = -19,
+    recipientTailBottomY = -12,
+    recipientTailBottomEndX = 0,
+    recipientTailTopBend = -0.3,
     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,
+    senderTailSideY = -53,
+    senderTailCurveStartY = -33,
+    senderTailTipX = 17,
+    senderTailTipY = -1,
+    senderTailBottomX = 19,
+    senderTailBottomY = -12,
+    senderTailBottomEndX = 0,
+    senderTailTopBend = -0.3,
     senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -6415,6 +6425,7 @@ var IMessageDmComposition = (props) => {
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
           const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
           const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
+          const bottomEndX = refX + (tail.isUser ? senderTailBottomEndX : recipientTailBottomEndX);
           const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
           const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
           const sideX = refX;
@@ -6438,7 +6449,7 @@ var IMessageDmComposition = (props) => {
           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`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} L ${bottomEndX} ${bottomY} Z`;
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "svg",
             {
@@ -7398,6 +7409,7 @@ var iMessageDmPropsSchema = import_zod.z.object({
   recipientTailTipY: import_zod.z.number().optional(),
   recipientTailBottomX: import_zod.z.number().optional(),
   recipientTailBottomY: import_zod.z.number().optional(),
+  recipientTailBottomEndX: import_zod.z.number().optional(),
   // Recipient tail curve bend
   recipientTailTopBend: import_zod.z.number().optional(),
   recipientTailBottomBend: import_zod.z.number().optional(),
@@ -7408,6 +7420,7 @@ var iMessageDmPropsSchema = import_zod.z.object({
   senderTailTipY: import_zod.z.number().optional(),
   senderTailBottomX: import_zod.z.number().optional(),
   senderTailBottomY: import_zod.z.number().optional(),
+  senderTailBottomEndX: import_zod.z.number().optional(),
   // Sender tail curve bend
   senderTailTopBend: import_zod.z.number().optional(),
   senderTailBottomBend: import_zod.z.number().optional(),

package/dist/index.mjs

@@ -4984,30 +4984,38 @@ var defaultIMessageDmProps = {
   // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
   // Recipient tail anchor points (offsets from message left & bottom)
-  recipientTailSideY: -47,
+  recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  recipientTailCurveStartY: -20,
+  recipientTailCurveStartY: -33,
   // Y where straight line ends and curve begins
-  recipientTailTipX: -16,
-  recipientTailTipY: 0,
-  recipientTailBottomX: 18,
-  recipientTailBottomY: -11,
+  recipientTailTipX: -17,
+  recipientTailTipY: -1,
+  recipientTailBottomX: -19,
+  // X where bottom curve ends
+  recipientTailBottomY: -12,
+  // Y where bottom curve ends
+  recipientTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
-  recipientTailTopBend: -0.5,
+  recipientTailTopBend: -0.3,
   // Top curve bends inward
   recipientTailBottomBend: 0.5,
   // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
-  senderTailSideY: -47,
+  senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
-  senderTailCurveStartY: -20,
+  senderTailCurveStartY: -33,
   // Y where straight line ends and curve begins
-  senderTailTipX: 16,
-  senderTailTipY: 1,
-  senderTailBottomX: -18,
-  senderTailBottomY: -11,
+  senderTailTipX: 17,
+  senderTailTipY: -1,
+  senderTailBottomX: 19,
+  // X where bottom curve ends
+  senderTailBottomY: -12,
+  // Y where bottom curve ends
+  senderTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
-  senderTailTopBend: -0.5,
+  senderTailTopBend: -0.3,
   // Top curve bends inward
   senderTailBottomBend: 0.5,
   // Bottom curve bends outward
@@ -5185,22 +5193,24 @@ var IMessageDmComposition = (props) => {
     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,
+    recipientTailSideY = -53,
+    recipientTailCurveStartY = -33,
+    recipientTailTipX = -17,
+    recipientTailTipY = -1,
+    recipientTailBottomX = -19,
+    recipientTailBottomY = -12,
+    recipientTailBottomEndX = 0,
+    recipientTailTopBend = -0.3,
     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,
+    senderTailSideY = -53,
+    senderTailCurveStartY = -33,
+    senderTailTipX = 17,
+    senderTailTipY = -1,
+    senderTailBottomX = 19,
+    senderTailBottomY = -12,
+    senderTailBottomEndX = 0,
+    senderTailTopBend = -0.3,
     senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ jsxs10(
@@ -5461,6 +5471,7 @@ var IMessageDmComposition = (props) => {
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
           const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
           const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
+          const bottomEndX = refX + (tail.isUser ? senderTailBottomEndX : recipientTailBottomEndX);
           const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
           const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
           const sideX = refX;
@@ -5484,7 +5495,7 @@ var IMessageDmComposition = (props) => {
           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`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} L ${bottomEndX} ${bottomY} Z`;
           return /* @__PURE__ */ jsx12(
             "svg",
             {
@@ -6161,6 +6172,7 @@ var iMessageDmPropsSchema = z.object({
   recipientTailTipY: z.number().optional(),
   recipientTailBottomX: z.number().optional(),
   recipientTailBottomY: z.number().optional(),
+  recipientTailBottomEndX: z.number().optional(),
   // Recipient tail curve bend
   recipientTailTopBend: z.number().optional(),
   recipientTailBottomBend: z.number().optional(),
@@ -6171,6 +6183,7 @@ var iMessageDmPropsSchema = z.object({
   senderTailTipY: z.number().optional(),
   senderTailBottomX: z.number().optional(),
   senderTailBottomY: z.number().optional(),
+  senderTailBottomEndX: z.number().optional(),
   // Sender tail curve bend
   senderTailTopBend: z.number().optional(),
   senderTailBottomBend: z.number().optional(),

package/package.json

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