ugcinc-render 1.8.133 → 1.8.135

package/dist/index.d.mts

@@ -672,6 +672,8 @@ interface IgMessage {
     text: string;
     /** If true, this message groups with the previous message (6px gap). If false, uses normal spacing. */
     groupWithPrevious?: boolean;
+    /** If set, this message is a reply to a story. The URL is the story image. */
+    storyReplyImageUrl?: string;
 }
 /** Instagram DM Composition props */
 interface InstagramDmCompositionProps {
@@ -846,6 +848,16 @@ interface InstagramDmCompositionProps {
     usernameArrowBottom?: number;
     usernameArrowLeft?: number;
     usernameArrowRight?: number;
+    storyReplyImageWidth?: number;
+    storyReplyImageHeight?: number;
+    storyReplyImageRight?: number;
+    storyReplyImageGap?: number;
+    storyReplyBarLeft?: number;
+    storyReplyBarRight?: number;
+    storyReplyTextLeft?: number;
+    storyReplyTextGap?: number;
+    storyReplyTextFontSize?: number;
+    storyReplyTextLetterSpacing?: number;
 }
 
 /**

package/dist/index.d.ts

@@ -672,6 +672,8 @@ interface IgMessage {
     text: string;
     /** If true, this message groups with the previous message (6px gap). If false, uses normal spacing. */
     groupWithPrevious?: boolean;
+    /** If set, this message is a reply to a story. The URL is the story image. */
+    storyReplyImageUrl?: string;
 }
 /** Instagram DM Composition props */
 interface InstagramDmCompositionProps {
@@ -846,6 +848,16 @@ interface InstagramDmCompositionProps {
     usernameArrowBottom?: number;
     usernameArrowLeft?: number;
     usernameArrowRight?: number;
+    storyReplyImageWidth?: number;
+    storyReplyImageHeight?: number;
+    storyReplyImageRight?: number;
+    storyReplyImageGap?: number;
+    storyReplyBarLeft?: number;
+    storyReplyBarRight?: number;
+    storyReplyTextLeft?: number;
+    storyReplyTextGap?: number;
+    storyReplyTextFontSize?: number;
+    storyReplyTextLetterSpacing?: number;
 }
 
 /**

package/dist/index.js

@@ -3488,18 +3488,30 @@ var HEADER_DEFAULTS = {
   timeLetterSpacing: 1.6,
   // Sender username
   senderUsername: "cheatmate_io",
-  usernameLeft: 308,
-  username1Bottom: 264,
-  username1FontSize: 52,
-  username1LetterSpacing: 0.8,
-  username2Bottom: 315,
-  username2FontSize: 48,
-  username2LetterSpacing: 0.8,
+  usernameLeft: 306,
+  username1Bottom: 271,
+  username1FontSize: 51,
+  username1LetterSpacing: -0.2,
+  username2Bottom: 322,
+  username2FontSize: 41,
+  username2LetterSpacing: -0.4,
   // Username right arrow icon
   usernameArrowTop: 231,
   usernameArrowBottom: 260,
   usernameArrowLeft: 619,
-  usernameArrowRight: 635
+  usernameArrowRight: 636
+};
+var STORY_REPLY_DEFAULTS = {
+  storyReplyImageWidth: 263,
+  storyReplyImageHeight: 467,
+  storyReplyImageRight: 1170,
+  storyReplyImageGap: 24,
+  storyReplyBarLeft: 1170,
+  storyReplyBarRight: 1181,
+  storyReplyTextLeft: 729,
+  storyReplyTextGap: 27,
+  storyReplyTextFontSize: 40,
+  storyReplyTextLetterSpacing: 0
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -3706,7 +3718,7 @@ function generateHeaderElements(props) {
     width: 400,
     height: username2Height,
     zIndex: 30,
-    text: truncatedUsername,
+    text: senderUsername,
     font: "apple",
     fontSize: username2FontSize,
     fontWeight: "normal",
@@ -3969,6 +3981,10 @@ function calculateMessagePositions(props) {
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS.senderBubbleRight;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
+  const storyReplyImageHeight = props.storyReplyImageHeight ?? STORY_REPLY_DEFAULTS.storyReplyImageHeight;
+  const storyReplyImageGap = props.storyReplyImageGap ?? STORY_REPLY_DEFAULTS.storyReplyImageGap;
+  const storyReplyTextGap = props.storyReplyTextGap ?? STORY_REPLY_DEFAULTS.storyReplyTextGap;
+  const storyReplyTextFontSize = props.storyReplyTextFontSize ?? STORY_REPLY_DEFAULTS.storyReplyTextFontSize;
   const calculatedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -4010,6 +4026,16 @@ function calculateMessagePositions(props) {
     } else {
       bubbleLeft = senderBubbleRight - bubbleWidth;
     }
+    let storyReplyImageTop;
+    let storyReplyImageBottom;
+    let storyReplyTextTop;
+    let storyReplyTextBottom;
+    if (message.storyReplyImageUrl && message.sender === "user") {
+      storyReplyImageBottom = bubbleTop - storyReplyImageGap;
+      storyReplyImageTop = storyReplyImageBottom - storyReplyImageHeight;
+      storyReplyTextBottom = storyReplyImageTop - storyReplyTextGap;
+      storyReplyTextTop = storyReplyTextBottom - storyReplyTextFontSize;
+    }
     calculatedMessages.unshift({
       message,
       top: bubbleTop,
@@ -4020,9 +4046,17 @@ function calculateMessagePositions(props) {
       lines,
       isFirstInGroup,
       isLastInGroup,
-      isSingleMessage
+      isSingleMessage,
+      storyReplyImageTop,
+      storyReplyImageBottom,
+      storyReplyTextTop,
+      storyReplyTextBottom
     });
-    currentBottom = bubbleTop;
+    if (message.storyReplyImageUrl && message.sender === "user" && storyReplyTextTop !== void 0) {
+      currentBottom = storyReplyTextTop;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
@@ -4172,6 +4206,81 @@ function generateMessageElements(props, calculatedMessages) {
   }
   return elements;
 }
+var STORY_REPLY_INPUT_ID_PREFIX = "story-reply-";
+function generateStoryReplyElements(props, calculatedMessages) {
+  const elements = [];
+  const storyReplyImageWidth = props.storyReplyImageWidth ?? STORY_REPLY_DEFAULTS.storyReplyImageWidth;
+  const storyReplyImageRight = props.storyReplyImageRight ?? STORY_REPLY_DEFAULTS.storyReplyImageRight;
+  const storyReplyBarLeft = props.storyReplyBarLeft ?? STORY_REPLY_DEFAULTS.storyReplyBarLeft;
+  const storyReplyBarRight = props.storyReplyBarRight ?? STORY_REPLY_DEFAULTS.storyReplyBarRight;
+  const storyReplyTextLeft = props.storyReplyTextLeft ?? STORY_REPLY_DEFAULTS.storyReplyTextLeft;
+  const storyReplyTextFontSize = props.storyReplyTextFontSize ?? STORY_REPLY_DEFAULTS.storyReplyTextFontSize;
+  const storyReplyTextLetterSpacing = props.storyReplyTextLetterSpacing ?? STORY_REPLY_DEFAULTS.storyReplyTextLetterSpacing;
+  for (let i = 0; i < calculatedMessages.length; i++) {
+    const cm = calculatedMessages[i];
+    if (!cm.message.storyReplyImageUrl || cm.message.sender !== "user") {
+      continue;
+    }
+    if (cm.storyReplyImageTop === void 0 || cm.storyReplyImageBottom === void 0) {
+      continue;
+    }
+    const imageTop = cm.storyReplyImageTop;
+    const imageBottom = cm.storyReplyImageBottom;
+    const imageHeight = imageBottom - imageTop;
+    const imageLeft = storyReplyImageRight - storyReplyImageWidth;
+    elements.push({
+      id: `story-reply-image-${cm.message.id}`,
+      type: "image",
+      x: imageLeft,
+      y: imageTop,
+      width: storyReplyImageWidth,
+      height: imageHeight,
+      zIndex: 3,
+      inputId: `${STORY_REPLY_INPUT_ID_PREFIX}${cm.message.id}`,
+      fit: "cover"
+    });
+    const barWidth = storyReplyBarRight - storyReplyBarLeft;
+    elements.push({
+      id: `story-reply-bar-${cm.message.id}`,
+      type: "text",
+      x: storyReplyBarLeft,
+      y: imageTop,
+      width: barWidth,
+      height: imageHeight,
+      zIndex: 3,
+      text: "",
+      backgroundColor: "#2e3339",
+      backgroundOpacity: 100,
+      backgroundBorderRadius: {
+        topLeft: barWidth / 2,
+        topRight: barWidth / 2,
+        bottomLeft: barWidth / 2,
+        bottomRight: barWidth / 2
+      }
+    });
+    if (cm.storyReplyTextTop !== void 0 && cm.storyReplyTextBottom !== void 0) {
+      const textHeight = cm.storyReplyTextBottom - cm.storyReplyTextTop;
+      elements.push({
+        id: `story-reply-text-${cm.message.id}`,
+        type: "text",
+        x: storyReplyTextLeft,
+        y: cm.storyReplyTextTop,
+        width: 500,
+        height: textHeight,
+        zIndex: 3,
+        text: "You replied to their story",
+        font: "apple",
+        fontSize: storyReplyTextFontSize,
+        fontWeight: "normal",
+        color: "#a3aab2",
+        letterSpacing: storyReplyTextLetterSpacing,
+        textAlign: "left",
+        verticalAlign: "middle"
+      });
+    }
+  }
+  return elements;
+}
 var PROFILE_PIC_INPUT_ID = "profile-pic";
 function generateProfilePicElements(props, calculatedMessages) {
   if (!props.profilePicUrl) {
@@ -4242,6 +4351,12 @@ function buildImageUrls(props) {
   if (props.userPfpUrl) {
     imageUrls[USER_PFP_INPUT_ID] = props.userPfpUrl;
   }
+  const messages = props.messages ?? [];
+  for (const message of messages) {
+    if (message.storyReplyImageUrl) {
+      imageUrls[`${STORY_REPLY_INPUT_ID_PREFIX}${message.id}`] = message.storyReplyImageUrl;
+    }
+  }
   return imageUrls;
 }
 function convertPropsToElements(props) {
@@ -4251,12 +4366,14 @@ function convertPropsToElements(props) {
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
+  const storyReplyElements = generateStoryReplyElements(props, calculatedMessages);
   const elements = [
     ...headerElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
-    ...profilePicElements
+    ...profilePicElements,
+    ...storyReplyElements
   ].sort((a, b) => a.zIndex - b.zIndex);
   const imageUrls = buildImageUrls(props);
   return { elements, imageUrls };
@@ -4452,18 +4569,31 @@ var defaultInstagramDmProps = {
   timeLetterSpacing: 1.6,
   // Header - Sender username
   senderUsername: "cheatmate_io",
-  usernameLeft: 308,
-  username1Bottom: 264,
-  username1FontSize: 52,
-  username1LetterSpacing: 0.8,
-  username2Bottom: 315,
-  username2FontSize: 48,
-  username2LetterSpacing: 0.8,
+  usernameLeft: 306,
+  username1Bottom: 271,
+  username1FontSize: 51,
+  username1LetterSpacing: -0.2,
+  username2Bottom: 322,
+  username2FontSize: 41,
+  username2LetterSpacing: -0.4,
   // Header - Username right arrow icon
   usernameArrowTop: 231,
   usernameArrowBottom: 260,
   usernameArrowLeft: 619,
-  usernameArrowRight: 635
+  usernameArrowRight: 636,
+  // Story reply (sender) - image
+  storyReplyImageWidth: 263,
+  storyReplyImageHeight: 467,
+  storyReplyImageRight: 1170,
+  storyReplyImageGap: 24,
+  // Story reply (sender) - side bar
+  storyReplyBarLeft: 1170,
+  storyReplyBarRight: 1181,
+  // Story reply (sender) - text
+  storyReplyTextLeft: 729,
+  storyReplyTextGap: 27,
+  storyReplyTextFontSize: 40,
+  storyReplyTextLetterSpacing: 0
 };
 function InstagramDmComposition(props) {
   const {
@@ -5840,18 +5970,31 @@ var instagramDmSchema = import_zod.z.object({
   timeLetterSpacing: import_zod.z.number().optional().default(1.6).describe("Time letter spacing"),
   // Header - Sender username (shown in two places)
   senderUsername: import_zod.z.string().optional().default("cheatmate_io").describe("Sender username"),
-  usernameLeft: import_zod.z.number().optional().default(308).describe("Username left X"),
-  username1Bottom: import_zod.z.number().optional().default(264).describe("Username 1 bottom Y (bold)"),
-  username1FontSize: import_zod.z.number().optional().default(52).describe("Username 1 font size"),
-  username1LetterSpacing: import_zod.z.number().optional().default(0.8).describe("Username 1 letter spacing"),
-  username2Bottom: import_zod.z.number().optional().default(315).describe("Username 2 bottom Y"),
-  username2FontSize: import_zod.z.number().optional().default(48).describe("Username 2 font size"),
-  username2LetterSpacing: import_zod.z.number().optional().default(0.8).describe("Username 2 letter spacing"),
+  usernameLeft: import_zod.z.number().optional().default(306).describe("Username left X"),
+  username1Bottom: import_zod.z.number().optional().default(271).describe("Username 1 bottom Y (bold)"),
+  username1FontSize: import_zod.z.number().optional().default(51).describe("Username 1 font size"),
+  username1LetterSpacing: import_zod.z.number().optional().default(-0.2).describe("Username 1 letter spacing"),
+  username2Bottom: import_zod.z.number().optional().default(322).describe("Username 2 bottom Y"),
+  username2FontSize: import_zod.z.number().optional().default(41).describe("Username 2 font size"),
+  username2LetterSpacing: import_zod.z.number().optional().default(-0.4).describe("Username 2 letter spacing"),
   // Header - Username right arrow icon
   usernameArrowTop: import_zod.z.number().optional().default(231).describe("Username arrow top Y"),
   usernameArrowBottom: import_zod.z.number().optional().default(260).describe("Username arrow bottom Y"),
   usernameArrowLeft: import_zod.z.number().optional().default(619).describe("Username arrow left X"),
-  usernameArrowRight: import_zod.z.number().optional().default(635).describe("Username arrow right X")
+  usernameArrowRight: import_zod.z.number().optional().default(636).describe("Username arrow right X"),
+  // Story reply (sender) - image
+  storyReplyImageWidth: import_zod.z.number().optional().default(263).describe("Story reply image width"),
+  storyReplyImageHeight: import_zod.z.number().optional().default(467).describe("Story reply image height"),
+  storyReplyImageRight: import_zod.z.number().optional().default(1170).describe("Story reply image right X"),
+  storyReplyImageGap: import_zod.z.number().optional().default(24).describe("Gap between story image and message"),
+  // Story reply (sender) - side bar
+  storyReplyBarLeft: import_zod.z.number().optional().default(1170).describe("Story reply bar left X"),
+  storyReplyBarRight: import_zod.z.number().optional().default(1181).describe("Story reply bar right X"),
+  // Story reply (sender) - "You replied to their story" text
+  storyReplyTextLeft: import_zod.z.number().optional().default(729).describe("Story reply text left X"),
+  storyReplyTextGap: import_zod.z.number().optional().default(27).describe("Gap between text and story image"),
+  storyReplyTextFontSize: import_zod.z.number().optional().default(40).describe("Story reply text font size"),
+  storyReplyTextLetterSpacing: import_zod.z.number().optional().default(0).describe("Story reply text letter spacing")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -2557,18 +2557,30 @@ var HEADER_DEFAULTS = {
   timeLetterSpacing: 1.6,
   // Sender username
   senderUsername: "cheatmate_io",
-  usernameLeft: 308,
-  username1Bottom: 264,
-  username1FontSize: 52,
-  username1LetterSpacing: 0.8,
-  username2Bottom: 315,
-  username2FontSize: 48,
-  username2LetterSpacing: 0.8,
+  usernameLeft: 306,
+  username1Bottom: 271,
+  username1FontSize: 51,
+  username1LetterSpacing: -0.2,
+  username2Bottom: 322,
+  username2FontSize: 41,
+  username2LetterSpacing: -0.4,
   // Username right arrow icon
   usernameArrowTop: 231,
   usernameArrowBottom: 260,
   usernameArrowLeft: 619,
-  usernameArrowRight: 635
+  usernameArrowRight: 636
+};
+var STORY_REPLY_DEFAULTS = {
+  storyReplyImageWidth: 263,
+  storyReplyImageHeight: 467,
+  storyReplyImageRight: 1170,
+  storyReplyImageGap: 24,
+  storyReplyBarLeft: 1170,
+  storyReplyBarRight: 1181,
+  storyReplyTextLeft: 729,
+  storyReplyTextGap: 27,
+  storyReplyTextFontSize: 40,
+  storyReplyTextLetterSpacing: 0
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -2775,7 +2787,7 @@ function generateHeaderElements(props) {
     width: 400,
     height: username2Height,
     zIndex: 30,
-    text: truncatedUsername,
+    text: senderUsername,
     font: "apple",
     fontSize: username2FontSize,
     fontWeight: "normal",
@@ -3038,6 +3050,10 @@ function calculateMessagePositions(props) {
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS.senderBubbleRight;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS.bubbleMaxWidth;
+  const storyReplyImageHeight = props.storyReplyImageHeight ?? STORY_REPLY_DEFAULTS.storyReplyImageHeight;
+  const storyReplyImageGap = props.storyReplyImageGap ?? STORY_REPLY_DEFAULTS.storyReplyImageGap;
+  const storyReplyTextGap = props.storyReplyTextGap ?? STORY_REPLY_DEFAULTS.storyReplyTextGap;
+  const storyReplyTextFontSize = props.storyReplyTextFontSize ?? STORY_REPLY_DEFAULTS.storyReplyTextFontSize;
   const calculatedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -3079,6 +3095,16 @@ function calculateMessagePositions(props) {
     } else {
       bubbleLeft = senderBubbleRight - bubbleWidth;
     }
+    let storyReplyImageTop;
+    let storyReplyImageBottom;
+    let storyReplyTextTop;
+    let storyReplyTextBottom;
+    if (message.storyReplyImageUrl && message.sender === "user") {
+      storyReplyImageBottom = bubbleTop - storyReplyImageGap;
+      storyReplyImageTop = storyReplyImageBottom - storyReplyImageHeight;
+      storyReplyTextBottom = storyReplyImageTop - storyReplyTextGap;
+      storyReplyTextTop = storyReplyTextBottom - storyReplyTextFontSize;
+    }
     calculatedMessages.unshift({
       message,
       top: bubbleTop,
@@ -3089,9 +3115,17 @@ function calculateMessagePositions(props) {
       lines,
       isFirstInGroup,
       isLastInGroup,
-      isSingleMessage
+      isSingleMessage,
+      storyReplyImageTop,
+      storyReplyImageBottom,
+      storyReplyTextTop,
+      storyReplyTextBottom
     });
-    currentBottom = bubbleTop;
+    if (message.storyReplyImageUrl && message.sender === "user" && storyReplyTextTop !== void 0) {
+      currentBottom = storyReplyTextTop;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
@@ -3241,6 +3275,81 @@ function generateMessageElements(props, calculatedMessages) {
   }
   return elements;
 }
+var STORY_REPLY_INPUT_ID_PREFIX = "story-reply-";
+function generateStoryReplyElements(props, calculatedMessages) {
+  const elements = [];
+  const storyReplyImageWidth = props.storyReplyImageWidth ?? STORY_REPLY_DEFAULTS.storyReplyImageWidth;
+  const storyReplyImageRight = props.storyReplyImageRight ?? STORY_REPLY_DEFAULTS.storyReplyImageRight;
+  const storyReplyBarLeft = props.storyReplyBarLeft ?? STORY_REPLY_DEFAULTS.storyReplyBarLeft;
+  const storyReplyBarRight = props.storyReplyBarRight ?? STORY_REPLY_DEFAULTS.storyReplyBarRight;
+  const storyReplyTextLeft = props.storyReplyTextLeft ?? STORY_REPLY_DEFAULTS.storyReplyTextLeft;
+  const storyReplyTextFontSize = props.storyReplyTextFontSize ?? STORY_REPLY_DEFAULTS.storyReplyTextFontSize;
+  const storyReplyTextLetterSpacing = props.storyReplyTextLetterSpacing ?? STORY_REPLY_DEFAULTS.storyReplyTextLetterSpacing;
+  for (let i = 0; i < calculatedMessages.length; i++) {
+    const cm = calculatedMessages[i];
+    if (!cm.message.storyReplyImageUrl || cm.message.sender !== "user") {
+      continue;
+    }
+    if (cm.storyReplyImageTop === void 0 || cm.storyReplyImageBottom === void 0) {
+      continue;
+    }
+    const imageTop = cm.storyReplyImageTop;
+    const imageBottom = cm.storyReplyImageBottom;
+    const imageHeight = imageBottom - imageTop;
+    const imageLeft = storyReplyImageRight - storyReplyImageWidth;
+    elements.push({
+      id: `story-reply-image-${cm.message.id}`,
+      type: "image",
+      x: imageLeft,
+      y: imageTop,
+      width: storyReplyImageWidth,
+      height: imageHeight,
+      zIndex: 3,
+      inputId: `${STORY_REPLY_INPUT_ID_PREFIX}${cm.message.id}`,
+      fit: "cover"
+    });
+    const barWidth = storyReplyBarRight - storyReplyBarLeft;
+    elements.push({
+      id: `story-reply-bar-${cm.message.id}`,
+      type: "text",
+      x: storyReplyBarLeft,
+      y: imageTop,
+      width: barWidth,
+      height: imageHeight,
+      zIndex: 3,
+      text: "",
+      backgroundColor: "#2e3339",
+      backgroundOpacity: 100,
+      backgroundBorderRadius: {
+        topLeft: barWidth / 2,
+        topRight: barWidth / 2,
+        bottomLeft: barWidth / 2,
+        bottomRight: barWidth / 2
+      }
+    });
+    if (cm.storyReplyTextTop !== void 0 && cm.storyReplyTextBottom !== void 0) {
+      const textHeight = cm.storyReplyTextBottom - cm.storyReplyTextTop;
+      elements.push({
+        id: `story-reply-text-${cm.message.id}`,
+        type: "text",
+        x: storyReplyTextLeft,
+        y: cm.storyReplyTextTop,
+        width: 500,
+        height: textHeight,
+        zIndex: 3,
+        text: "You replied to their story",
+        font: "apple",
+        fontSize: storyReplyTextFontSize,
+        fontWeight: "normal",
+        color: "#a3aab2",
+        letterSpacing: storyReplyTextLetterSpacing,
+        textAlign: "left",
+        verticalAlign: "middle"
+      });
+    }
+  }
+  return elements;
+}
 var PROFILE_PIC_INPUT_ID = "profile-pic";
 function generateProfilePicElements(props, calculatedMessages) {
   if (!props.profilePicUrl) {
@@ -3311,6 +3420,12 @@ function buildImageUrls(props) {
   if (props.userPfpUrl) {
     imageUrls[USER_PFP_INPUT_ID] = props.userPfpUrl;
   }
+  const messages = props.messages ?? [];
+  for (const message of messages) {
+    if (message.storyReplyImageUrl) {
+      imageUrls[`${STORY_REPLY_INPUT_ID_PREFIX}${message.id}`] = message.storyReplyImageUrl;
+    }
+  }
   return imageUrls;
 }
 function convertPropsToElements(props) {
@@ -3320,12 +3435,14 @@ function convertPropsToElements(props) {
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
+  const storyReplyElements = generateStoryReplyElements(props, calculatedMessages);
   const elements = [
     ...headerElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
-    ...profilePicElements
+    ...profilePicElements,
+    ...storyReplyElements
   ].sort((a, b) => a.zIndex - b.zIndex);
   const imageUrls = buildImageUrls(props);
   return { elements, imageUrls };
@@ -3521,18 +3638,31 @@ var defaultInstagramDmProps = {
   timeLetterSpacing: 1.6,
   // Header - Sender username
   senderUsername: "cheatmate_io",
-  usernameLeft: 308,
-  username1Bottom: 264,
-  username1FontSize: 52,
-  username1LetterSpacing: 0.8,
-  username2Bottom: 315,
-  username2FontSize: 48,
-  username2LetterSpacing: 0.8,
+  usernameLeft: 306,
+  username1Bottom: 271,
+  username1FontSize: 51,
+  username1LetterSpacing: -0.2,
+  username2Bottom: 322,
+  username2FontSize: 41,
+  username2LetterSpacing: -0.4,
   // Header - Username right arrow icon
   usernameArrowTop: 231,
   usernameArrowBottom: 260,
   usernameArrowLeft: 619,
-  usernameArrowRight: 635
+  usernameArrowRight: 636,
+  // Story reply (sender) - image
+  storyReplyImageWidth: 263,
+  storyReplyImageHeight: 467,
+  storyReplyImageRight: 1170,
+  storyReplyImageGap: 24,
+  // Story reply (sender) - side bar
+  storyReplyBarLeft: 1170,
+  storyReplyBarRight: 1181,
+  // Story reply (sender) - text
+  storyReplyTextLeft: 729,
+  storyReplyTextGap: 27,
+  storyReplyTextFontSize: 40,
+  storyReplyTextLetterSpacing: 0
 };
 function InstagramDmComposition(props) {
   const {
@@ -4626,18 +4756,31 @@ var instagramDmSchema = z.object({
   timeLetterSpacing: z.number().optional().default(1.6).describe("Time letter spacing"),
   // Header - Sender username (shown in two places)
   senderUsername: z.string().optional().default("cheatmate_io").describe("Sender username"),
-  usernameLeft: z.number().optional().default(308).describe("Username left X"),
-  username1Bottom: z.number().optional().default(264).describe("Username 1 bottom Y (bold)"),
-  username1FontSize: z.number().optional().default(52).describe("Username 1 font size"),
-  username1LetterSpacing: z.number().optional().default(0.8).describe("Username 1 letter spacing"),
-  username2Bottom: z.number().optional().default(315).describe("Username 2 bottom Y"),
-  username2FontSize: z.number().optional().default(48).describe("Username 2 font size"),
-  username2LetterSpacing: z.number().optional().default(0.8).describe("Username 2 letter spacing"),
+  usernameLeft: z.number().optional().default(306).describe("Username left X"),
+  username1Bottom: z.number().optional().default(271).describe("Username 1 bottom Y (bold)"),
+  username1FontSize: z.number().optional().default(51).describe("Username 1 font size"),
+  username1LetterSpacing: z.number().optional().default(-0.2).describe("Username 1 letter spacing"),
+  username2Bottom: z.number().optional().default(322).describe("Username 2 bottom Y"),
+  username2FontSize: z.number().optional().default(41).describe("Username 2 font size"),
+  username2LetterSpacing: z.number().optional().default(-0.4).describe("Username 2 letter spacing"),
   // Header - Username right arrow icon
   usernameArrowTop: z.number().optional().default(231).describe("Username arrow top Y"),
   usernameArrowBottom: z.number().optional().default(260).describe("Username arrow bottom Y"),
   usernameArrowLeft: z.number().optional().default(619).describe("Username arrow left X"),
-  usernameArrowRight: z.number().optional().default(635).describe("Username arrow right X")
+  usernameArrowRight: z.number().optional().default(636).describe("Username arrow right X"),
+  // Story reply (sender) - image
+  storyReplyImageWidth: z.number().optional().default(263).describe("Story reply image width"),
+  storyReplyImageHeight: z.number().optional().default(467).describe("Story reply image height"),
+  storyReplyImageRight: z.number().optional().default(1170).describe("Story reply image right X"),
+  storyReplyImageGap: z.number().optional().default(24).describe("Gap between story image and message"),
+  // Story reply (sender) - side bar
+  storyReplyBarLeft: z.number().optional().default(1170).describe("Story reply bar left X"),
+  storyReplyBarRight: z.number().optional().default(1181).describe("Story reply bar right X"),
+  // Story reply (sender) - "You replied to their story" text
+  storyReplyTextLeft: z.number().optional().default(729).describe("Story reply text left X"),
+  storyReplyTextGap: z.number().optional().default(27).describe("Gap between text and story image"),
+  storyReplyTextFontSize: z.number().optional().default(40).describe("Story reply text font size"),
+  storyReplyTextLetterSpacing: z.number().optional().default(0).describe("Story reply text letter spacing")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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