ugcinc-render 1.8.131 → 1.8.133

package/dist/index.d.mts

@@ -832,6 +832,20 @@ interface InstagramDmCompositionProps {
     time?: string;
     timeRight?: number;
     timeBottom?: number;
+    timeFontSize?: number;
+    timeLetterSpacing?: number;
+    senderUsername?: string;
+    usernameLeft?: number;
+    username1Bottom?: number;
+    username1FontSize?: number;
+    username1LetterSpacing?: number;
+    username2Bottom?: number;
+    username2FontSize?: number;
+    username2LetterSpacing?: number;
+    usernameArrowTop?: number;
+    usernameArrowBottom?: number;
+    usernameArrowLeft?: number;
+    usernameArrowRight?: number;
 }
 
 /**

package/dist/index.d.ts

@@ -832,6 +832,20 @@ interface InstagramDmCompositionProps {
     time?: string;
     timeRight?: number;
     timeBottom?: number;
+    timeFontSize?: number;
+    timeLetterSpacing?: number;
+    senderUsername?: string;
+    usernameLeft?: number;
+    username1Bottom?: number;
+    username1FontSize?: number;
+    username1LetterSpacing?: number;
+    username2Bottom?: number;
+    username2FontSize?: number;
+    username2LetterSpacing?: number;
+    usernameArrowTop?: number;
+    usernameArrowBottom?: number;
+    usernameArrowLeft?: number;
+    usernameArrowRight?: number;
 }
 
 /**

package/dist/index.js

@@ -3437,7 +3437,8 @@ var ICON_INPUT_IDS = {
   phone: "ig-phone",
   video: "ig-video",
   flag: "ig-flag",
-  battery: "ig-battery"
+  battery: "ig-battery",
+  usernameArrow: "ig-username-right-arrow"
 };
 var USER_PFP_INPUT_ID = "user-pfp";
 var HEADER_DEFAULTS = {
@@ -3481,8 +3482,24 @@ var HEADER_DEFAULTS = {
   batteryRight: 1100,
   // Time display
   time: "9:41",
-  timeRight: 258,
-  timeBottom: 116
+  timeRight: 262,
+  timeBottom: 125,
+  timeFontSize: 52,
+  timeLetterSpacing: 1.6,
+  // Sender username
+  senderUsername: "cheatmate_io",
+  usernameLeft: 308,
+  username1Bottom: 264,
+  username1FontSize: 52,
+  username1LetterSpacing: 0.8,
+  username2Bottom: 315,
+  username2FontSize: 48,
+  username2LetterSpacing: 0.8,
+  // Username right arrow icon
+  usernameArrowTop: 231,
+  usernameArrowBottom: 260,
+  usernameArrowLeft: 619,
+  usernameArrowRight: 635
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -3629,7 +3646,8 @@ function generateHeaderElements(props) {
   const time = props.time ?? HEADER_DEFAULTS.time;
   const timeRight = props.timeRight ?? HEADER_DEFAULTS.timeRight;
   const timeBottom = props.timeBottom ?? HEADER_DEFAULTS.timeBottom;
-  const timeFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS.messageFontSize;
+  const timeFontSize = props.timeFontSize ?? HEADER_DEFAULTS.timeFontSize;
+  const timeLetterSpacing = props.timeLetterSpacing ?? HEADER_DEFAULTS.timeLetterSpacing;
   const timeColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS.bubbleTextColor;
   const timeHeight = timeFontSize;
   const timeTop = timeBottom - timeHeight;
@@ -3646,9 +3664,74 @@ function generateHeaderElements(props) {
     fontSize: timeFontSize,
     fontWeight: "semibold",
     color: timeColor,
+    letterSpacing: timeLetterSpacing,
     textAlign: "right",
     verticalAlign: "middle"
   });
+  const senderUsername = props.senderUsername ?? HEADER_DEFAULTS.senderUsername;
+  const usernameLeft = props.usernameLeft ?? HEADER_DEFAULTS.usernameLeft;
+  const username1Bottom = props.username1Bottom ?? HEADER_DEFAULTS.username1Bottom;
+  const username1FontSize = props.username1FontSize ?? HEADER_DEFAULTS.username1FontSize;
+  const username1LetterSpacing = props.username1LetterSpacing ?? HEADER_DEFAULTS.username1LetterSpacing;
+  const username2Bottom = props.username2Bottom ?? HEADER_DEFAULTS.username2Bottom;
+  const username2FontSize = props.username2FontSize ?? HEADER_DEFAULTS.username2FontSize;
+  const username2LetterSpacing = props.username2LetterSpacing ?? HEADER_DEFAULTS.username2LetterSpacing;
+  const truncatedUsername = senderUsername.length > 9 ? senderUsername.substring(0, 9) + "..." : senderUsername;
+  const username1Height = username1FontSize;
+  const username1Top = username1Bottom - username1Height;
+  elements.push({
+    id: "username-1",
+    type: "text",
+    x: usernameLeft,
+    y: username1Top,
+    width: 400,
+    height: username1Height,
+    zIndex: 30,
+    text: truncatedUsername,
+    font: "apple",
+    fontSize: username1FontSize,
+    fontWeight: "bold",
+    color: "#fafafa",
+    letterSpacing: username1LetterSpacing,
+    textAlign: "left",
+    verticalAlign: "middle"
+  });
+  const username2Height = username2FontSize;
+  const username2Top = username2Bottom - username2Height;
+  elements.push({
+    id: "username-2",
+    type: "text",
+    x: usernameLeft,
+    y: username2Top,
+    width: 400,
+    height: username2Height,
+    zIndex: 30,
+    text: truncatedUsername,
+    font: "apple",
+    fontSize: username2FontSize,
+    fontWeight: "normal",
+    color: "#a6afb6",
+    letterSpacing: username2LetterSpacing,
+    textAlign: "left",
+    verticalAlign: "middle"
+  });
+  const usernameArrowTop = props.usernameArrowTop ?? HEADER_DEFAULTS.usernameArrowTop;
+  const usernameArrowBottom = props.usernameArrowBottom ?? HEADER_DEFAULTS.usernameArrowBottom;
+  const usernameArrowLeft = props.usernameArrowLeft ?? HEADER_DEFAULTS.usernameArrowLeft;
+  const usernameArrowRight = props.usernameArrowRight ?? HEADER_DEFAULTS.usernameArrowRight;
+  const usernameArrowWidth = usernameArrowRight - usernameArrowLeft;
+  const usernameArrowHeight = usernameArrowBottom - usernameArrowTop;
+  elements.push({
+    id: "username-arrow-icon",
+    type: "image",
+    x: usernameArrowLeft,
+    y: usernameArrowTop,
+    width: usernameArrowWidth,
+    height: usernameArrowHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.usernameArrow,
+    fit: "fill"
+  });
   return elements;
 }
 function generateFooterIconElements(props) {
@@ -4152,6 +4235,7 @@ function buildImageUrls(props) {
   imageUrls[ICON_INPUT_IDS.video] = (0, import_remotion8.staticFile)("ig-video.png");
   imageUrls[ICON_INPUT_IDS.flag] = (0, import_remotion8.staticFile)("ig-flag.png");
   imageUrls[ICON_INPUT_IDS.battery] = (0, import_remotion8.staticFile)("ig-battery.png");
+  imageUrls[ICON_INPUT_IDS.usernameArrow] = (0, import_remotion8.staticFile)("ig-username-right-arrow.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
@@ -4362,8 +4446,24 @@ var defaultInstagramDmProps = {
   batteryRight: 1100,
   // Status bar - Time
   time: "9:41",
-  timeRight: 258,
-  timeBottom: 116
+  timeRight: 262,
+  timeBottom: 125,
+  timeFontSize: 52,
+  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,
+  // Header - Username right arrow icon
+  usernameArrowTop: 231,
+  usernameArrowBottom: 260,
+  usernameArrowLeft: 619,
+  usernameArrowRight: 635
 };
 function InstagramDmComposition(props) {
   const {
@@ -5734,8 +5834,24 @@ var instagramDmSchema = import_zod.z.object({
   batteryRight: import_zod.z.number().optional().default(1100).describe("Battery icon right X"),
   // Status bar - Time display
   time: import_zod.z.string().optional().default("9:41").describe("Time string to display"),
-  timeRight: import_zod.z.number().optional().default(258).describe("Time text right X (right-aligned)"),
-  timeBottom: import_zod.z.number().optional().default(116).describe("Time text bottom Y")
+  timeRight: import_zod.z.number().optional().default(262).describe("Time text right X (right-aligned)"),
+  timeBottom: import_zod.z.number().optional().default(125).describe("Time text bottom Y"),
+  timeFontSize: import_zod.z.number().optional().default(52).describe("Time font size"),
+  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"),
+  // 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")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -2506,7 +2506,8 @@ var ICON_INPUT_IDS = {
   phone: "ig-phone",
   video: "ig-video",
   flag: "ig-flag",
-  battery: "ig-battery"
+  battery: "ig-battery",
+  usernameArrow: "ig-username-right-arrow"
 };
 var USER_PFP_INPUT_ID = "user-pfp";
 var HEADER_DEFAULTS = {
@@ -2550,8 +2551,24 @@ var HEADER_DEFAULTS = {
   batteryRight: 1100,
   // Time display
   time: "9:41",
-  timeRight: 258,
-  timeBottom: 116
+  timeRight: 262,
+  timeBottom: 125,
+  timeFontSize: 52,
+  timeLetterSpacing: 1.6,
+  // Sender username
+  senderUsername: "cheatmate_io",
+  usernameLeft: 308,
+  username1Bottom: 264,
+  username1FontSize: 52,
+  username1LetterSpacing: 0.8,
+  username2Bottom: 315,
+  username2FontSize: 48,
+  username2LetterSpacing: 0.8,
+  // Username right arrow icon
+  usernameArrowTop: 231,
+  usernameArrowBottom: 260,
+  usernameArrowLeft: 619,
+  usernameArrowRight: 635
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -2698,7 +2715,8 @@ function generateHeaderElements(props) {
   const time = props.time ?? HEADER_DEFAULTS.time;
   const timeRight = props.timeRight ?? HEADER_DEFAULTS.timeRight;
   const timeBottom = props.timeBottom ?? HEADER_DEFAULTS.timeBottom;
-  const timeFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS.messageFontSize;
+  const timeFontSize = props.timeFontSize ?? HEADER_DEFAULTS.timeFontSize;
+  const timeLetterSpacing = props.timeLetterSpacing ?? HEADER_DEFAULTS.timeLetterSpacing;
   const timeColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS.bubbleTextColor;
   const timeHeight = timeFontSize;
   const timeTop = timeBottom - timeHeight;
@@ -2715,9 +2733,74 @@ function generateHeaderElements(props) {
     fontSize: timeFontSize,
     fontWeight: "semibold",
     color: timeColor,
+    letterSpacing: timeLetterSpacing,
     textAlign: "right",
     verticalAlign: "middle"
   });
+  const senderUsername = props.senderUsername ?? HEADER_DEFAULTS.senderUsername;
+  const usernameLeft = props.usernameLeft ?? HEADER_DEFAULTS.usernameLeft;
+  const username1Bottom = props.username1Bottom ?? HEADER_DEFAULTS.username1Bottom;
+  const username1FontSize = props.username1FontSize ?? HEADER_DEFAULTS.username1FontSize;
+  const username1LetterSpacing = props.username1LetterSpacing ?? HEADER_DEFAULTS.username1LetterSpacing;
+  const username2Bottom = props.username2Bottom ?? HEADER_DEFAULTS.username2Bottom;
+  const username2FontSize = props.username2FontSize ?? HEADER_DEFAULTS.username2FontSize;
+  const username2LetterSpacing = props.username2LetterSpacing ?? HEADER_DEFAULTS.username2LetterSpacing;
+  const truncatedUsername = senderUsername.length > 9 ? senderUsername.substring(0, 9) + "..." : senderUsername;
+  const username1Height = username1FontSize;
+  const username1Top = username1Bottom - username1Height;
+  elements.push({
+    id: "username-1",
+    type: "text",
+    x: usernameLeft,
+    y: username1Top,
+    width: 400,
+    height: username1Height,
+    zIndex: 30,
+    text: truncatedUsername,
+    font: "apple",
+    fontSize: username1FontSize,
+    fontWeight: "bold",
+    color: "#fafafa",
+    letterSpacing: username1LetterSpacing,
+    textAlign: "left",
+    verticalAlign: "middle"
+  });
+  const username2Height = username2FontSize;
+  const username2Top = username2Bottom - username2Height;
+  elements.push({
+    id: "username-2",
+    type: "text",
+    x: usernameLeft,
+    y: username2Top,
+    width: 400,
+    height: username2Height,
+    zIndex: 30,
+    text: truncatedUsername,
+    font: "apple",
+    fontSize: username2FontSize,
+    fontWeight: "normal",
+    color: "#a6afb6",
+    letterSpacing: username2LetterSpacing,
+    textAlign: "left",
+    verticalAlign: "middle"
+  });
+  const usernameArrowTop = props.usernameArrowTop ?? HEADER_DEFAULTS.usernameArrowTop;
+  const usernameArrowBottom = props.usernameArrowBottom ?? HEADER_DEFAULTS.usernameArrowBottom;
+  const usernameArrowLeft = props.usernameArrowLeft ?? HEADER_DEFAULTS.usernameArrowLeft;
+  const usernameArrowRight = props.usernameArrowRight ?? HEADER_DEFAULTS.usernameArrowRight;
+  const usernameArrowWidth = usernameArrowRight - usernameArrowLeft;
+  const usernameArrowHeight = usernameArrowBottom - usernameArrowTop;
+  elements.push({
+    id: "username-arrow-icon",
+    type: "image",
+    x: usernameArrowLeft,
+    y: usernameArrowTop,
+    width: usernameArrowWidth,
+    height: usernameArrowHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.usernameArrow,
+    fit: "fill"
+  });
   return elements;
 }
 function generateFooterIconElements(props) {
@@ -3221,6 +3304,7 @@ function buildImageUrls(props) {
   imageUrls[ICON_INPUT_IDS.video] = staticFile("ig-video.png");
   imageUrls[ICON_INPUT_IDS.flag] = staticFile("ig-flag.png");
   imageUrls[ICON_INPUT_IDS.battery] = staticFile("ig-battery.png");
+  imageUrls[ICON_INPUT_IDS.usernameArrow] = staticFile("ig-username-right-arrow.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
@@ -3431,8 +3515,24 @@ var defaultInstagramDmProps = {
   batteryRight: 1100,
   // Status bar - Time
   time: "9:41",
-  timeRight: 258,
-  timeBottom: 116
+  timeRight: 262,
+  timeBottom: 125,
+  timeFontSize: 52,
+  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,
+  // Header - Username right arrow icon
+  usernameArrowTop: 231,
+  usernameArrowBottom: 260,
+  usernameArrowLeft: 619,
+  usernameArrowRight: 635
 };
 function InstagramDmComposition(props) {
   const {
@@ -4520,8 +4620,24 @@ var instagramDmSchema = z.object({
   batteryRight: z.number().optional().default(1100).describe("Battery icon right X"),
   // Status bar - Time display
   time: z.string().optional().default("9:41").describe("Time string to display"),
-  timeRight: z.number().optional().default(258).describe("Time text right X (right-aligned)"),
-  timeBottom: z.number().optional().default(116).describe("Time text bottom Y")
+  timeRight: z.number().optional().default(262).describe("Time text right X (right-aligned)"),
+  timeBottom: z.number().optional().default(125).describe("Time text bottom Y"),
+  timeFontSize: z.number().optional().default(52).describe("Time font size"),
+  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"),
+  // 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")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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