ugcinc-render 1.8.119 → 1.8.121

package/dist/index.d.mts

@@ -768,6 +768,38 @@ interface InstagramDmCompositionProps {
     profilePicUrl?: string;
     profilePicSize?: number;
     profilePicGap?: number;
+    backArrowTop?: number;
+    backArrowBottom?: number;
+    backArrowLeft?: number;
+    backArrowRight?: number;
+    userPfpUrl?: string;
+    userPfpTop?: number;
+    userPfpBottom?: number;
+    userPfpLeft?: number;
+    userPfpRight?: number;
+    userHasStory?: boolean;
+    userStoryRingColor?: string;
+    userStoryRingTop?: number;
+    userStoryRingBottom?: number;
+    userStoryRingLeft?: number;
+    userStoryRingRight?: number;
+    userStoryRingWidth?: number;
+    noNotisTop?: number;
+    noNotisBottom?: number;
+    noNotisLeft?: number;
+    noNotisRight?: number;
+    smilePlusTop?: number;
+    smilePlusBottom?: number;
+    smilePlusLeft?: number;
+    smilePlusRight?: number;
+    phoneIconTop?: number;
+    phoneIconBottom?: number;
+    phoneIconLeft?: number;
+    phoneIconRight?: number;
+    videoIconTop?: number;
+    videoIconBottom?: number;
+    videoIconLeft?: number;
+    videoIconRight?: number;
 }
 
 /**

package/dist/index.d.ts

@@ -768,6 +768,38 @@ interface InstagramDmCompositionProps {
     profilePicUrl?: string;
     profilePicSize?: number;
     profilePicGap?: number;
+    backArrowTop?: number;
+    backArrowBottom?: number;
+    backArrowLeft?: number;
+    backArrowRight?: number;
+    userPfpUrl?: string;
+    userPfpTop?: number;
+    userPfpBottom?: number;
+    userPfpLeft?: number;
+    userPfpRight?: number;
+    userHasStory?: boolean;
+    userStoryRingColor?: string;
+    userStoryRingTop?: number;
+    userStoryRingBottom?: number;
+    userStoryRingLeft?: number;
+    userStoryRingRight?: number;
+    userStoryRingWidth?: number;
+    noNotisTop?: number;
+    noNotisBottom?: number;
+    noNotisLeft?: number;
+    noNotisRight?: number;
+    smilePlusTop?: number;
+    smilePlusBottom?: number;
+    smilePlusLeft?: number;
+    smilePlusRight?: number;
+    phoneIconTop?: number;
+    phoneIconBottom?: number;
+    phoneIconLeft?: number;
+    phoneIconRight?: number;
+    videoIconTop?: number;
+    videoIconBottom?: number;
+    videoIconLeft?: number;
+    videoIconRight?: number;
 }
 
 /**

package/dist/index.js

@@ -3429,8 +3429,180 @@ var ICON_INPUT_IDS = {
   circlePlus: "ig-circle-plus",
   smileSticker: "ig-smile-sticker",
   cameraRoll: "ig-camera-roll",
-  microphone: "ig-microphone"
+  microphone: "ig-microphone",
+  // Header icons
+  backArrow: "ig-back-arrow",
+  noNotis: "ig-no-notis",
+  smilePlus: "ig-smile-plus",
+  phone: "ig-phone",
+  video: "ig-video"
 };
+var USER_PFP_INPUT_ID = "user-pfp";
+var HEADER_DEFAULTS = {
+  backArrowTop: 240,
+  backArrowBottom: 299,
+  backArrowLeft: 78,
+  backArrowRight: 110,
+  userPfpTop: 222,
+  userPfpBottom: 317,
+  userPfpLeft: 180,
+  userPfpRight: 275,
+  userStoryRingColor: "#5e656d",
+  userStoryRingTop: 210,
+  userStoryRingBottom: 329,
+  userStoryRingLeft: 168,
+  userStoryRingRight: 287,
+  userStoryRingWidth: 7,
+  noNotisTop: 77,
+  noNotisBottom: 119,
+  noNotisLeft: 272,
+  noNotisRight: 311,
+  smilePlusTop: 234,
+  smilePlusBottom: 305,
+  smilePlusLeft: 663,
+  smilePlusRight: 734,
+  phoneIconTop: 236,
+  phoneIconBottom: 302,
+  phoneIconLeft: 807,
+  phoneIconRight: 873,
+  videoIconTop: 240,
+  videoIconBottom: 299,
+  videoIconLeft: 948,
+  videoIconRight: 1019
+};
+function generateHeaderElements(props) {
+  const elements = [];
+  const backArrowTop = props.backArrowTop ?? HEADER_DEFAULTS.backArrowTop;
+  const backArrowBottom = props.backArrowBottom ?? HEADER_DEFAULTS.backArrowBottom;
+  const backArrowLeft = props.backArrowLeft ?? HEADER_DEFAULTS.backArrowLeft;
+  const backArrowRight = props.backArrowRight ?? HEADER_DEFAULTS.backArrowRight;
+  const backArrowWidth = backArrowRight - backArrowLeft;
+  const backArrowHeight = backArrowBottom - backArrowTop;
+  elements.push({
+    id: "back-arrow",
+    type: "image",
+    x: backArrowLeft,
+    y: backArrowTop,
+    width: backArrowWidth,
+    height: backArrowHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.backArrow,
+    fit: "fill"
+  });
+  const userHasStory = props.userHasStory ?? false;
+  if (userHasStory) {
+    const ringTop = props.userStoryRingTop ?? HEADER_DEFAULTS.userStoryRingTop;
+    const ringBottom = props.userStoryRingBottom ?? HEADER_DEFAULTS.userStoryRingBottom;
+    const ringLeft = props.userStoryRingLeft ?? HEADER_DEFAULTS.userStoryRingLeft;
+    const ringRight = props.userStoryRingRight ?? HEADER_DEFAULTS.userStoryRingRight;
+    const ringColor = props.userStoryRingColor ?? HEADER_DEFAULTS.userStoryRingColor;
+    const ringWidth = ringRight - ringLeft;
+    const ringHeight = ringBottom - ringTop;
+    elements.push({
+      id: "user-story-ring",
+      type: "text",
+      x: ringLeft,
+      y: ringTop,
+      width: ringWidth,
+      height: ringHeight,
+      zIndex: 29,
+      text: "",
+      backgroundColor: ringColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: ringWidth / 2
+    });
+  }
+  const userPfpTop = props.userPfpTop ?? HEADER_DEFAULTS.userPfpTop;
+  const userPfpBottom = props.userPfpBottom ?? HEADER_DEFAULTS.userPfpBottom;
+  const userPfpLeft = props.userPfpLeft ?? HEADER_DEFAULTS.userPfpLeft;
+  const userPfpRight = props.userPfpRight ?? HEADER_DEFAULTS.userPfpRight;
+  const userPfpWidth = userPfpRight - userPfpLeft;
+  const userPfpHeight = userPfpBottom - userPfpTop;
+  if (props.userPfpUrl) {
+    elements.push({
+      id: "user-pfp",
+      type: "image",
+      x: userPfpLeft,
+      y: userPfpTop,
+      width: userPfpWidth,
+      height: userPfpHeight,
+      zIndex: 30,
+      inputId: USER_PFP_INPUT_ID,
+      fit: "cover",
+      borderRadius: userPfpWidth / 2
+      // Circular
+    });
+  }
+  const noNotisTop = props.noNotisTop ?? HEADER_DEFAULTS.noNotisTop;
+  const noNotisBottom = props.noNotisBottom ?? HEADER_DEFAULTS.noNotisBottom;
+  const noNotisLeft = props.noNotisLeft ?? HEADER_DEFAULTS.noNotisLeft;
+  const noNotisRight = props.noNotisRight ?? HEADER_DEFAULTS.noNotisRight;
+  const noNotisWidth = noNotisRight - noNotisLeft;
+  const noNotisHeight = noNotisBottom - noNotisTop;
+  elements.push({
+    id: "no-notis-icon",
+    type: "image",
+    x: noNotisLeft,
+    y: noNotisTop,
+    width: noNotisWidth,
+    height: noNotisHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.noNotis,
+    fit: "fill"
+  });
+  const smilePlusTop = props.smilePlusTop ?? HEADER_DEFAULTS.smilePlusTop;
+  const smilePlusBottom = props.smilePlusBottom ?? HEADER_DEFAULTS.smilePlusBottom;
+  const smilePlusLeft = props.smilePlusLeft ?? HEADER_DEFAULTS.smilePlusLeft;
+  const smilePlusRight = props.smilePlusRight ?? HEADER_DEFAULTS.smilePlusRight;
+  const smilePlusWidth = smilePlusRight - smilePlusLeft;
+  const smilePlusHeight = smilePlusBottom - smilePlusTop;
+  elements.push({
+    id: "smile-plus-icon",
+    type: "image",
+    x: smilePlusLeft,
+    y: smilePlusTop,
+    width: smilePlusWidth,
+    height: smilePlusHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.smilePlus,
+    fit: "fill"
+  });
+  const phoneIconTop = props.phoneIconTop ?? HEADER_DEFAULTS.phoneIconTop;
+  const phoneIconBottom = props.phoneIconBottom ?? HEADER_DEFAULTS.phoneIconBottom;
+  const phoneIconLeft = props.phoneIconLeft ?? HEADER_DEFAULTS.phoneIconLeft;
+  const phoneIconRight = props.phoneIconRight ?? HEADER_DEFAULTS.phoneIconRight;
+  const phoneIconWidth = phoneIconRight - phoneIconLeft;
+  const phoneIconHeight = phoneIconBottom - phoneIconTop;
+  elements.push({
+    id: "phone-icon",
+    type: "image",
+    x: phoneIconLeft,
+    y: phoneIconTop,
+    width: phoneIconWidth,
+    height: phoneIconHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.phone,
+    fit: "fill"
+  });
+  const videoIconTop = props.videoIconTop ?? HEADER_DEFAULTS.videoIconTop;
+  const videoIconBottom = props.videoIconBottom ?? HEADER_DEFAULTS.videoIconBottom;
+  const videoIconLeft = props.videoIconLeft ?? HEADER_DEFAULTS.videoIconLeft;
+  const videoIconRight = props.videoIconRight ?? HEADER_DEFAULTS.videoIconRight;
+  const videoIconWidth = videoIconRight - videoIconLeft;
+  const videoIconHeight = videoIconBottom - videoIconTop;
+  elements.push({
+    id: "video-icon",
+    type: "image",
+    x: videoIconLeft,
+    y: videoIconTop,
+    width: videoIconWidth,
+    height: videoIconHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.video,
+    fit: "fill"
+  });
+  return elements;
+}
 function generateFooterIconElements(props) {
   const elements = [];
   const cameraIconTop = props.cameraIconTop ?? ICON_DEFAULTS.cameraIconTop;
@@ -3925,18 +4097,28 @@ function buildImageUrls(props) {
   imageUrls[ICON_INPUT_IDS.smileSticker] = (0, import_remotion8.staticFile)("ig-smile-sticker.png");
   imageUrls[ICON_INPUT_IDS.cameraRoll] = (0, import_remotion8.staticFile)("ig-camera-roll.png");
   imageUrls[ICON_INPUT_IDS.microphone] = (0, import_remotion8.staticFile)("ig-microphone.png");
+  imageUrls[ICON_INPUT_IDS.backArrow] = (0, import_remotion8.staticFile)("ig-header-left-arrow.png");
+  imageUrls[ICON_INPUT_IDS.noNotis] = (0, import_remotion8.staticFile)("ig-no-notis.png");
+  imageUrls[ICON_INPUT_IDS.smilePlus] = (0, import_remotion8.staticFile)("ig-smile-plus.png");
+  imageUrls[ICON_INPUT_IDS.phone] = (0, import_remotion8.staticFile)("ig-phone.png");
+  imageUrls[ICON_INPUT_IDS.video] = (0, import_remotion8.staticFile)("ig-video.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
+  if (props.userPfpUrl) {
+    imageUrls[USER_PFP_INPUT_ID] = props.userPfpUrl;
+  }
   return imageUrls;
 }
 function convertPropsToElements(props) {
   const calculatedMessages = calculateMessagePositions(props);
+  const headerElements = generateHeaderElements(props);
   const footerElements = generateFooterElements(props);
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
   const elements = [
+    ...headerElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
@@ -4055,7 +4237,46 @@ var defaultInstagramDmProps = {
   bubbleMaxWidth: 866,
   profilePicUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
   profilePicSize: 83,
-  profilePicGap: 37
+  profilePicGap: 37,
+  // Header - Back arrow
+  backArrowTop: 240,
+  backArrowBottom: 299,
+  backArrowLeft: 78,
+  backArrowRight: 110,
+  // Header - User profile picture
+  userPfpUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
+  userPfpTop: 222,
+  userPfpBottom: 317,
+  userPfpLeft: 180,
+  userPfpRight: 275,
+  // Header - User story ring
+  userHasStory: false,
+  userStoryRingColor: "#5e656d",
+  userStoryRingTop: 210,
+  userStoryRingBottom: 329,
+  userStoryRingLeft: 168,
+  userStoryRingRight: 287,
+  userStoryRingWidth: 7,
+  // Header - No notifications icon
+  noNotisTop: 77,
+  noNotisBottom: 119,
+  noNotisLeft: 272,
+  noNotisRight: 311,
+  // Header - Smile plus icon
+  smilePlusTop: 234,
+  smilePlusBottom: 305,
+  smilePlusLeft: 663,
+  smilePlusRight: 734,
+  // Header - Phone icon
+  phoneIconTop: 236,
+  phoneIconBottom: 302,
+  phoneIconLeft: 807,
+  phoneIconRight: 873,
+  // Header - Video icon
+  videoIconTop: 240,
+  videoIconBottom: 299,
+  videoIconLeft: 948,
+  videoIconRight: 1019
 };
 function InstagramDmComposition(props) {
   const {
@@ -5223,7 +5444,46 @@ var instagramDmSchema = import_zod.z.object({
   // Profile picture
   profilePicUrl: import_zod.z.string().optional().default("").describe("Recipient profile picture URL"),
   profilePicSize: import_zod.z.number().optional().default(83).describe("Profile picture size"),
-  profilePicGap: import_zod.z.number().optional().default(37).describe("Gap between profile pic and bubble")
+  profilePicGap: import_zod.z.number().optional().default(37).describe("Gap between profile pic and bubble"),
+  // Header - Back arrow
+  backArrowTop: import_zod.z.number().optional().default(240).describe("Back arrow top Y"),
+  backArrowBottom: import_zod.z.number().optional().default(299).describe("Back arrow bottom Y"),
+  backArrowLeft: import_zod.z.number().optional().default(78).describe("Back arrow left X"),
+  backArrowRight: import_zod.z.number().optional().default(110).describe("Back arrow right X"),
+  // Header - User profile picture
+  userPfpUrl: import_zod.z.string().optional().default("").describe("User profile picture URL"),
+  userPfpTop: import_zod.z.number().optional().default(222).describe("User pfp top Y"),
+  userPfpBottom: import_zod.z.number().optional().default(317).describe("User pfp bottom Y"),
+  userPfpLeft: import_zod.z.number().optional().default(180).describe("User pfp left X"),
+  userPfpRight: import_zod.z.number().optional().default(275).describe("User pfp right X"),
+  // Header - User story ring
+  userHasStory: import_zod.z.boolean().optional().default(false).describe("Show story ring around user pfp"),
+  userStoryRingColor: import_zod.z.string().optional().default("#5e656d").describe("Story ring color"),
+  userStoryRingTop: import_zod.z.number().optional().default(210).describe("Story ring outer top Y"),
+  userStoryRingBottom: import_zod.z.number().optional().default(329).describe("Story ring outer bottom Y"),
+  userStoryRingLeft: import_zod.z.number().optional().default(168).describe("Story ring outer left X"),
+  userStoryRingRight: import_zod.z.number().optional().default(287).describe("Story ring outer right X"),
+  userStoryRingWidth: import_zod.z.number().optional().default(7).describe("Story ring width"),
+  // Header - No notifications icon
+  noNotisTop: import_zod.z.number().optional().default(77).describe("No notifications top Y"),
+  noNotisBottom: import_zod.z.number().optional().default(119).describe("No notifications bottom Y"),
+  noNotisLeft: import_zod.z.number().optional().default(272).describe("No notifications left X"),
+  noNotisRight: import_zod.z.number().optional().default(311).describe("No notifications right X"),
+  // Header - Smile plus icon
+  smilePlusTop: import_zod.z.number().optional().default(234).describe("Smile plus top Y"),
+  smilePlusBottom: import_zod.z.number().optional().default(305).describe("Smile plus bottom Y"),
+  smilePlusLeft: import_zod.z.number().optional().default(663).describe("Smile plus left X"),
+  smilePlusRight: import_zod.z.number().optional().default(734).describe("Smile plus right X"),
+  // Header - Phone icon
+  phoneIconTop: import_zod.z.number().optional().default(236).describe("Phone icon top Y"),
+  phoneIconBottom: import_zod.z.number().optional().default(302).describe("Phone icon bottom Y"),
+  phoneIconLeft: import_zod.z.number().optional().default(807).describe("Phone icon left X"),
+  phoneIconRight: import_zod.z.number().optional().default(873).describe("Phone icon right X"),
+  // Header - Video icon
+  videoIconTop: import_zod.z.number().optional().default(240).describe("Video icon top Y"),
+  videoIconBottom: import_zod.z.number().optional().default(299).describe("Video icon bottom Y"),
+  videoIconLeft: import_zod.z.number().optional().default(948).describe("Video icon left X"),
+  videoIconRight: import_zod.z.number().optional().default(1019).describe("Video icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -2498,8 +2498,180 @@ var ICON_INPUT_IDS = {
   circlePlus: "ig-circle-plus",
   smileSticker: "ig-smile-sticker",
   cameraRoll: "ig-camera-roll",
-  microphone: "ig-microphone"
+  microphone: "ig-microphone",
+  // Header icons
+  backArrow: "ig-back-arrow",
+  noNotis: "ig-no-notis",
+  smilePlus: "ig-smile-plus",
+  phone: "ig-phone",
+  video: "ig-video"
 };
+var USER_PFP_INPUT_ID = "user-pfp";
+var HEADER_DEFAULTS = {
+  backArrowTop: 240,
+  backArrowBottom: 299,
+  backArrowLeft: 78,
+  backArrowRight: 110,
+  userPfpTop: 222,
+  userPfpBottom: 317,
+  userPfpLeft: 180,
+  userPfpRight: 275,
+  userStoryRingColor: "#5e656d",
+  userStoryRingTop: 210,
+  userStoryRingBottom: 329,
+  userStoryRingLeft: 168,
+  userStoryRingRight: 287,
+  userStoryRingWidth: 7,
+  noNotisTop: 77,
+  noNotisBottom: 119,
+  noNotisLeft: 272,
+  noNotisRight: 311,
+  smilePlusTop: 234,
+  smilePlusBottom: 305,
+  smilePlusLeft: 663,
+  smilePlusRight: 734,
+  phoneIconTop: 236,
+  phoneIconBottom: 302,
+  phoneIconLeft: 807,
+  phoneIconRight: 873,
+  videoIconTop: 240,
+  videoIconBottom: 299,
+  videoIconLeft: 948,
+  videoIconRight: 1019
+};
+function generateHeaderElements(props) {
+  const elements = [];
+  const backArrowTop = props.backArrowTop ?? HEADER_DEFAULTS.backArrowTop;
+  const backArrowBottom = props.backArrowBottom ?? HEADER_DEFAULTS.backArrowBottom;
+  const backArrowLeft = props.backArrowLeft ?? HEADER_DEFAULTS.backArrowLeft;
+  const backArrowRight = props.backArrowRight ?? HEADER_DEFAULTS.backArrowRight;
+  const backArrowWidth = backArrowRight - backArrowLeft;
+  const backArrowHeight = backArrowBottom - backArrowTop;
+  elements.push({
+    id: "back-arrow",
+    type: "image",
+    x: backArrowLeft,
+    y: backArrowTop,
+    width: backArrowWidth,
+    height: backArrowHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.backArrow,
+    fit: "fill"
+  });
+  const userHasStory = props.userHasStory ?? false;
+  if (userHasStory) {
+    const ringTop = props.userStoryRingTop ?? HEADER_DEFAULTS.userStoryRingTop;
+    const ringBottom = props.userStoryRingBottom ?? HEADER_DEFAULTS.userStoryRingBottom;
+    const ringLeft = props.userStoryRingLeft ?? HEADER_DEFAULTS.userStoryRingLeft;
+    const ringRight = props.userStoryRingRight ?? HEADER_DEFAULTS.userStoryRingRight;
+    const ringColor = props.userStoryRingColor ?? HEADER_DEFAULTS.userStoryRingColor;
+    const ringWidth = ringRight - ringLeft;
+    const ringHeight = ringBottom - ringTop;
+    elements.push({
+      id: "user-story-ring",
+      type: "text",
+      x: ringLeft,
+      y: ringTop,
+      width: ringWidth,
+      height: ringHeight,
+      zIndex: 29,
+      text: "",
+      backgroundColor: ringColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: ringWidth / 2
+    });
+  }
+  const userPfpTop = props.userPfpTop ?? HEADER_DEFAULTS.userPfpTop;
+  const userPfpBottom = props.userPfpBottom ?? HEADER_DEFAULTS.userPfpBottom;
+  const userPfpLeft = props.userPfpLeft ?? HEADER_DEFAULTS.userPfpLeft;
+  const userPfpRight = props.userPfpRight ?? HEADER_DEFAULTS.userPfpRight;
+  const userPfpWidth = userPfpRight - userPfpLeft;
+  const userPfpHeight = userPfpBottom - userPfpTop;
+  if (props.userPfpUrl) {
+    elements.push({
+      id: "user-pfp",
+      type: "image",
+      x: userPfpLeft,
+      y: userPfpTop,
+      width: userPfpWidth,
+      height: userPfpHeight,
+      zIndex: 30,
+      inputId: USER_PFP_INPUT_ID,
+      fit: "cover",
+      borderRadius: userPfpWidth / 2
+      // Circular
+    });
+  }
+  const noNotisTop = props.noNotisTop ?? HEADER_DEFAULTS.noNotisTop;
+  const noNotisBottom = props.noNotisBottom ?? HEADER_DEFAULTS.noNotisBottom;
+  const noNotisLeft = props.noNotisLeft ?? HEADER_DEFAULTS.noNotisLeft;
+  const noNotisRight = props.noNotisRight ?? HEADER_DEFAULTS.noNotisRight;
+  const noNotisWidth = noNotisRight - noNotisLeft;
+  const noNotisHeight = noNotisBottom - noNotisTop;
+  elements.push({
+    id: "no-notis-icon",
+    type: "image",
+    x: noNotisLeft,
+    y: noNotisTop,
+    width: noNotisWidth,
+    height: noNotisHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.noNotis,
+    fit: "fill"
+  });
+  const smilePlusTop = props.smilePlusTop ?? HEADER_DEFAULTS.smilePlusTop;
+  const smilePlusBottom = props.smilePlusBottom ?? HEADER_DEFAULTS.smilePlusBottom;
+  const smilePlusLeft = props.smilePlusLeft ?? HEADER_DEFAULTS.smilePlusLeft;
+  const smilePlusRight = props.smilePlusRight ?? HEADER_DEFAULTS.smilePlusRight;
+  const smilePlusWidth = smilePlusRight - smilePlusLeft;
+  const smilePlusHeight = smilePlusBottom - smilePlusTop;
+  elements.push({
+    id: "smile-plus-icon",
+    type: "image",
+    x: smilePlusLeft,
+    y: smilePlusTop,
+    width: smilePlusWidth,
+    height: smilePlusHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.smilePlus,
+    fit: "fill"
+  });
+  const phoneIconTop = props.phoneIconTop ?? HEADER_DEFAULTS.phoneIconTop;
+  const phoneIconBottom = props.phoneIconBottom ?? HEADER_DEFAULTS.phoneIconBottom;
+  const phoneIconLeft = props.phoneIconLeft ?? HEADER_DEFAULTS.phoneIconLeft;
+  const phoneIconRight = props.phoneIconRight ?? HEADER_DEFAULTS.phoneIconRight;
+  const phoneIconWidth = phoneIconRight - phoneIconLeft;
+  const phoneIconHeight = phoneIconBottom - phoneIconTop;
+  elements.push({
+    id: "phone-icon",
+    type: "image",
+    x: phoneIconLeft,
+    y: phoneIconTop,
+    width: phoneIconWidth,
+    height: phoneIconHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.phone,
+    fit: "fill"
+  });
+  const videoIconTop = props.videoIconTop ?? HEADER_DEFAULTS.videoIconTop;
+  const videoIconBottom = props.videoIconBottom ?? HEADER_DEFAULTS.videoIconBottom;
+  const videoIconLeft = props.videoIconLeft ?? HEADER_DEFAULTS.videoIconLeft;
+  const videoIconRight = props.videoIconRight ?? HEADER_DEFAULTS.videoIconRight;
+  const videoIconWidth = videoIconRight - videoIconLeft;
+  const videoIconHeight = videoIconBottom - videoIconTop;
+  elements.push({
+    id: "video-icon",
+    type: "image",
+    x: videoIconLeft,
+    y: videoIconTop,
+    width: videoIconWidth,
+    height: videoIconHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.video,
+    fit: "fill"
+  });
+  return elements;
+}
 function generateFooterIconElements(props) {
   const elements = [];
   const cameraIconTop = props.cameraIconTop ?? ICON_DEFAULTS.cameraIconTop;
@@ -2994,18 +3166,28 @@ function buildImageUrls(props) {
   imageUrls[ICON_INPUT_IDS.smileSticker] = staticFile("ig-smile-sticker.png");
   imageUrls[ICON_INPUT_IDS.cameraRoll] = staticFile("ig-camera-roll.png");
   imageUrls[ICON_INPUT_IDS.microphone] = staticFile("ig-microphone.png");
+  imageUrls[ICON_INPUT_IDS.backArrow] = staticFile("ig-header-left-arrow.png");
+  imageUrls[ICON_INPUT_IDS.noNotis] = staticFile("ig-no-notis.png");
+  imageUrls[ICON_INPUT_IDS.smilePlus] = staticFile("ig-smile-plus.png");
+  imageUrls[ICON_INPUT_IDS.phone] = staticFile("ig-phone.png");
+  imageUrls[ICON_INPUT_IDS.video] = staticFile("ig-video.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
+  if (props.userPfpUrl) {
+    imageUrls[USER_PFP_INPUT_ID] = props.userPfpUrl;
+  }
   return imageUrls;
 }
 function convertPropsToElements(props) {
   const calculatedMessages = calculateMessagePositions(props);
+  const headerElements = generateHeaderElements(props);
   const footerElements = generateFooterElements(props);
   const footerIconElements = generateFooterIconElements(props);
   const messageElements = generateMessageElements(props, calculatedMessages);
   const profilePicElements = generateProfilePicElements(props, calculatedMessages);
   const elements = [
+    ...headerElements,
     ...footerElements,
     ...footerIconElements,
     ...messageElements,
@@ -3124,7 +3306,46 @@ var defaultInstagramDmProps = {
   bubbleMaxWidth: 866,
   profilePicUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
   profilePicSize: 83,
-  profilePicGap: 37
+  profilePicGap: 37,
+  // Header - Back arrow
+  backArrowTop: 240,
+  backArrowBottom: 299,
+  backArrowLeft: 78,
+  backArrowRight: 110,
+  // Header - User profile picture
+  userPfpUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
+  userPfpTop: 222,
+  userPfpBottom: 317,
+  userPfpLeft: 180,
+  userPfpRight: 275,
+  // Header - User story ring
+  userHasStory: false,
+  userStoryRingColor: "#5e656d",
+  userStoryRingTop: 210,
+  userStoryRingBottom: 329,
+  userStoryRingLeft: 168,
+  userStoryRingRight: 287,
+  userStoryRingWidth: 7,
+  // Header - No notifications icon
+  noNotisTop: 77,
+  noNotisBottom: 119,
+  noNotisLeft: 272,
+  noNotisRight: 311,
+  // Header - Smile plus icon
+  smilePlusTop: 234,
+  smilePlusBottom: 305,
+  smilePlusLeft: 663,
+  smilePlusRight: 734,
+  // Header - Phone icon
+  phoneIconTop: 236,
+  phoneIconBottom: 302,
+  phoneIconLeft: 807,
+  phoneIconRight: 873,
+  // Header - Video icon
+  videoIconTop: 240,
+  videoIconBottom: 299,
+  videoIconLeft: 948,
+  videoIconRight: 1019
 };
 function InstagramDmComposition(props) {
   const {
@@ -4009,7 +4230,46 @@ var instagramDmSchema = z.object({
   // Profile picture
   profilePicUrl: z.string().optional().default("").describe("Recipient profile picture URL"),
   profilePicSize: z.number().optional().default(83).describe("Profile picture size"),
-  profilePicGap: z.number().optional().default(37).describe("Gap between profile pic and bubble")
+  profilePicGap: z.number().optional().default(37).describe("Gap between profile pic and bubble"),
+  // Header - Back arrow
+  backArrowTop: z.number().optional().default(240).describe("Back arrow top Y"),
+  backArrowBottom: z.number().optional().default(299).describe("Back arrow bottom Y"),
+  backArrowLeft: z.number().optional().default(78).describe("Back arrow left X"),
+  backArrowRight: z.number().optional().default(110).describe("Back arrow right X"),
+  // Header - User profile picture
+  userPfpUrl: z.string().optional().default("").describe("User profile picture URL"),
+  userPfpTop: z.number().optional().default(222).describe("User pfp top Y"),
+  userPfpBottom: z.number().optional().default(317).describe("User pfp bottom Y"),
+  userPfpLeft: z.number().optional().default(180).describe("User pfp left X"),
+  userPfpRight: z.number().optional().default(275).describe("User pfp right X"),
+  // Header - User story ring
+  userHasStory: z.boolean().optional().default(false).describe("Show story ring around user pfp"),
+  userStoryRingColor: z.string().optional().default("#5e656d").describe("Story ring color"),
+  userStoryRingTop: z.number().optional().default(210).describe("Story ring outer top Y"),
+  userStoryRingBottom: z.number().optional().default(329).describe("Story ring outer bottom Y"),
+  userStoryRingLeft: z.number().optional().default(168).describe("Story ring outer left X"),
+  userStoryRingRight: z.number().optional().default(287).describe("Story ring outer right X"),
+  userStoryRingWidth: z.number().optional().default(7).describe("Story ring width"),
+  // Header - No notifications icon
+  noNotisTop: z.number().optional().default(77).describe("No notifications top Y"),
+  noNotisBottom: z.number().optional().default(119).describe("No notifications bottom Y"),
+  noNotisLeft: z.number().optional().default(272).describe("No notifications left X"),
+  noNotisRight: z.number().optional().default(311).describe("No notifications right X"),
+  // Header - Smile plus icon
+  smilePlusTop: z.number().optional().default(234).describe("Smile plus top Y"),
+  smilePlusBottom: z.number().optional().default(305).describe("Smile plus bottom Y"),
+  smilePlusLeft: z.number().optional().default(663).describe("Smile plus left X"),
+  smilePlusRight: z.number().optional().default(734).describe("Smile plus right X"),
+  // Header - Phone icon
+  phoneIconTop: z.number().optional().default(236).describe("Phone icon top Y"),
+  phoneIconBottom: z.number().optional().default(302).describe("Phone icon bottom Y"),
+  phoneIconLeft: z.number().optional().default(807).describe("Phone icon left X"),
+  phoneIconRight: z.number().optional().default(873).describe("Phone icon right X"),
+  // Header - Video icon
+  videoIconTop: z.number().optional().default(240).describe("Video icon top Y"),
+  videoIconBottom: z.number().optional().default(299).describe("Video icon bottom Y"),
+  videoIconLeft: z.number().optional().default(948).describe("Video icon left X"),
+  videoIconRight: z.number().optional().default(1019).describe("Video icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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