ugcinc-render 1.8.183 → 1.8.184

package/dist/index.d.mts

@@ -1140,18 +1140,20 @@ interface IMessageDmCompositionProps {
     recipientTailCurveStartY?: number;
     recipientTailTipX?: number;
     recipientTailTipY?: number;
+    recipientTailBottomFlatEndX?: number;
+    recipientTailBottomFlatEndY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
-    recipientTailBottomEndX?: number;
     recipientTailTopBend?: number;
     recipientTailBottomBend?: number;
     senderTailSideY?: number;
     senderTailCurveStartY?: number;
     senderTailTipX?: number;
     senderTailTipY?: number;
+    senderTailBottomFlatEndX?: number;
+    senderTailBottomFlatEndY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
-    senderTailBottomEndX?: number;
     senderTailTopBend?: number;
     senderTailBottomBend?: number;
     showReadReceipt?: boolean;

package/dist/index.d.ts

@@ -1140,18 +1140,20 @@ interface IMessageDmCompositionProps {
     recipientTailCurveStartY?: number;
     recipientTailTipX?: number;
     recipientTailTipY?: number;
+    recipientTailBottomFlatEndX?: number;
+    recipientTailBottomFlatEndY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
-    recipientTailBottomEndX?: number;
     recipientTailTopBend?: number;
     recipientTailBottomBend?: number;
     senderTailSideY?: number;
     senderTailCurveStartY?: number;
     senderTailTipX?: number;
     senderTailTipY?: number;
+    senderTailBottomFlatEndX?: number;
+    senderTailBottomFlatEndY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
-    senderTailBottomEndX?: number;
     senderTailTopBend?: number;
     senderTailBottomBend?: number;
     showReadReceipt?: boolean;

package/dist/index.js

@@ -5941,15 +5941,17 @@ var defaultIMessageDmProps = {
   recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
   recipientTailCurveStartY: -33,
-  // Y where straight line ends and curve begins
+  // Y where straight line ends and top curve begins
   recipientTailTipX: -17,
   recipientTailTipY: -1,
-  recipientTailBottomX: -19,
-  // X where bottom curve ends
+  recipientTailBottomFlatEndX: -10,
+  // X where flat after tip ends and bottom curve begins
+  recipientTailBottomFlatEndY: -1,
+  // Y where flat after tip ends and bottom curve begins
+  recipientTailBottomX: 19,
+  // X where bottom curve ends (connects to bubble)
   recipientTailBottomY: -12,
-  // Y where bottom curve ends
-  recipientTailBottomEndX: 0,
-  // X where flat bottom ends (at bubble edge)
+  // Y where bottom curve ends (connects to bubble)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
   recipientTailTopBend: -0.3,
   // Top curve bends inward
@@ -5959,15 +5961,17 @@ var defaultIMessageDmProps = {
   senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
   senderTailCurveStartY: -33,
-  // Y where straight line ends and curve begins
+  // Y where straight line ends and top curve begins
   senderTailTipX: 17,
   senderTailTipY: -1,
-  senderTailBottomX: 19,
-  // X where bottom curve ends
+  senderTailBottomFlatEndX: 10,
+  // X where flat after tip ends and bottom curve begins
+  senderTailBottomFlatEndY: -1,
+  // Y where flat after tip ends and bottom curve begins
+  senderTailBottomX: -19,
+  // X where bottom curve ends (connects to bubble)
   senderTailBottomY: -12,
-  // Y where bottom curve ends
-  senderTailBottomEndX: 0,
-  // X where flat bottom ends (at bubble edge)
+  // Y where bottom curve ends (connects to bubble)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
   senderTailTopBend: -0.3,
   // Top curve bends inward
@@ -6151,9 +6155,10 @@ var IMessageDmComposition = (props) => {
     recipientTailCurveStartY = -33,
     recipientTailTipX = -17,
     recipientTailTipY = -1,
-    recipientTailBottomX = -19,
+    recipientTailBottomFlatEndX = -10,
+    recipientTailBottomFlatEndY = -1,
+    recipientTailBottomX = 19,
     recipientTailBottomY = -12,
-    recipientTailBottomEndX = 0,
     recipientTailTopBend = -0.3,
     recipientTailBottomBend = 0.5,
     // Tail props - sender (offsets from message right & bottom)
@@ -6161,9 +6166,10 @@ var IMessageDmComposition = (props) => {
     senderTailCurveStartY = -33,
     senderTailTipX = 17,
     senderTailTipY = -1,
-    senderTailBottomX = 19,
+    senderTailBottomFlatEndX = 10,
+    senderTailBottomFlatEndY = -1,
+    senderTailBottomX = -19,
     senderTailBottomY = -12,
-    senderTailBottomEndX = 0,
     senderTailTopBend = -0.3,
     senderTailBottomBend = 0.5
   } = mergedProps;
@@ -6423,9 +6429,10 @@ var IMessageDmComposition = (props) => {
           const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
           const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
+          const bottomFlatEndX = refX + (tail.isUser ? senderTailBottomFlatEndX : recipientTailBottomFlatEndX);
+          const bottomFlatEndY = refY + (tail.isUser ? senderTailBottomFlatEndY : recipientTailBottomFlatEndY);
           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;
@@ -6439,17 +6446,17 @@ var IMessageDmComposition = (props) => {
           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 bottomMidX = (bottomFlatEndX + bottomX) / 2;
+          const bottomMidY = (bottomFlatEndY + bottomY) / 2;
+          const bottomDx = bottomX - bottomFlatEndX;
+          const bottomDy = bottomY - bottomFlatEndY;
           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} L ${bottomEndX} ${bottomY} Z`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} L ${bottomFlatEndX} ${bottomFlatEndY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "svg",
             {
@@ -7407,9 +7414,10 @@ var iMessageDmPropsSchema = import_zod.z.object({
   recipientTailCurveStartY: import_zod.z.number().optional(),
   recipientTailTipX: import_zod.z.number().optional(),
   recipientTailTipY: import_zod.z.number().optional(),
+  recipientTailBottomFlatEndX: import_zod.z.number().optional(),
+  recipientTailBottomFlatEndY: 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(),
@@ -7418,9 +7426,10 @@ var iMessageDmPropsSchema = import_zod.z.object({
   senderTailCurveStartY: import_zod.z.number().optional(),
   senderTailTipX: import_zod.z.number().optional(),
   senderTailTipY: import_zod.z.number().optional(),
+  senderTailBottomFlatEndX: import_zod.z.number().optional(),
+  senderTailBottomFlatEndY: 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

@@ -4987,15 +4987,17 @@ var defaultIMessageDmProps = {
   recipientTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
   recipientTailCurveStartY: -33,
-  // Y where straight line ends and curve begins
+  // Y where straight line ends and top curve begins
   recipientTailTipX: -17,
   recipientTailTipY: -1,
-  recipientTailBottomX: -19,
-  // X where bottom curve ends
+  recipientTailBottomFlatEndX: -10,
+  // X where flat after tip ends and bottom curve begins
+  recipientTailBottomFlatEndY: -1,
+  // Y where flat after tip ends and bottom curve begins
+  recipientTailBottomX: 19,
+  // X where bottom curve ends (connects to bubble)
   recipientTailBottomY: -12,
-  // Y where bottom curve ends
-  recipientTailBottomEndX: 0,
-  // X where flat bottom ends (at bubble edge)
+  // Y where bottom curve ends (connects to bubble)
   // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
   recipientTailTopBend: -0.3,
   // Top curve bends inward
@@ -5005,15 +5007,17 @@ var defaultIMessageDmProps = {
   senderTailSideY: -53,
   // Y where tail meets bubble (top of straight line)
   senderTailCurveStartY: -33,
-  // Y where straight line ends and curve begins
+  // Y where straight line ends and top curve begins
   senderTailTipX: 17,
   senderTailTipY: -1,
-  senderTailBottomX: 19,
-  // X where bottom curve ends
+  senderTailBottomFlatEndX: 10,
+  // X where flat after tip ends and bottom curve begins
+  senderTailBottomFlatEndY: -1,
+  // Y where flat after tip ends and bottom curve begins
+  senderTailBottomX: -19,
+  // X where bottom curve ends (connects to bubble)
   senderTailBottomY: -12,
-  // Y where bottom curve ends
-  senderTailBottomEndX: 0,
-  // X where flat bottom ends (at bubble edge)
+  // Y where bottom curve ends (connects to bubble)
   // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
   senderTailTopBend: -0.3,
   // Top curve bends inward
@@ -5197,9 +5201,10 @@ var IMessageDmComposition = (props) => {
     recipientTailCurveStartY = -33,
     recipientTailTipX = -17,
     recipientTailTipY = -1,
-    recipientTailBottomX = -19,
+    recipientTailBottomFlatEndX = -10,
+    recipientTailBottomFlatEndY = -1,
+    recipientTailBottomX = 19,
     recipientTailBottomY = -12,
-    recipientTailBottomEndX = 0,
     recipientTailTopBend = -0.3,
     recipientTailBottomBend = 0.5,
     // Tail props - sender (offsets from message right & bottom)
@@ -5207,9 +5212,10 @@ var IMessageDmComposition = (props) => {
     senderTailCurveStartY = -33,
     senderTailTipX = 17,
     senderTailTipY = -1,
-    senderTailBottomX = 19,
+    senderTailBottomFlatEndX = 10,
+    senderTailBottomFlatEndY = -1,
+    senderTailBottomX = -19,
     senderTailBottomY = -12,
-    senderTailBottomEndX = 0,
     senderTailTopBend = -0.3,
     senderTailBottomBend = 0.5
   } = mergedProps;
@@ -5469,9 +5475,10 @@ var IMessageDmComposition = (props) => {
           const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
           const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
+          const bottomFlatEndX = refX + (tail.isUser ? senderTailBottomFlatEndX : recipientTailBottomFlatEndX);
+          const bottomFlatEndY = refY + (tail.isUser ? senderTailBottomFlatEndY : recipientTailBottomFlatEndY);
           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;
@@ -5485,17 +5492,17 @@ var IMessageDmComposition = (props) => {
           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 bottomMidX = (bottomFlatEndX + bottomX) / 2;
+          const bottomMidY = (bottomFlatEndY + bottomY) / 2;
+          const bottomDx = bottomX - bottomFlatEndX;
+          const bottomDy = bottomY - bottomFlatEndY;
           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} L ${bottomEndX} ${bottomY} Z`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} L ${bottomFlatEndX} ${bottomFlatEndY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
           return /* @__PURE__ */ jsx12(
             "svg",
             {
@@ -6170,9 +6177,10 @@ var iMessageDmPropsSchema = z.object({
   recipientTailCurveStartY: z.number().optional(),
   recipientTailTipX: z.number().optional(),
   recipientTailTipY: z.number().optional(),
+  recipientTailBottomFlatEndX: z.number().optional(),
+  recipientTailBottomFlatEndY: 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(),
@@ -6181,9 +6189,10 @@ var iMessageDmPropsSchema = z.object({
   senderTailCurveStartY: z.number().optional(),
   senderTailTipX: z.number().optional(),
   senderTailTipY: z.number().optional(),
+  senderTailBottomFlatEndX: z.number().optional(),
+  senderTailBottomFlatEndY: 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.183",
+  "version": "1.8.184",
   "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",