ugcinc-render 1.8.124 → 1.8.125

package/dist/index.d.mts

@@ -800,6 +800,44 @@ interface InstagramDmCompositionProps {
     videoIconBottom?: number;
     videoIconLeft?: number;
     videoIconRight?: number;
+    flagTop?: number;
+    flagBottom?: number;
+    flagLeft?: number;
+    flagRight?: number;
+    cellLevel?: number;
+    cellBar1Top?: number;
+    cellBar1Bottom?: number;
+    cellBar1Left?: number;
+    cellBar1Right?: number;
+    cellBar2Top?: number;
+    cellBar2Bottom?: number;
+    cellBar2Left?: number;
+    cellBar2Right?: number;
+    cellBar3Top?: number;
+    cellBar3Bottom?: number;
+    cellBar3Left?: number;
+    cellBar3Right?: number;
+    cellBar4Top?: number;
+    cellBar4Bottom?: number;
+    cellBar4Left?: number;
+    cellBar4Right?: number;
+    wifiLevel?: number;
+    wifiBottomTop?: number;
+    wifiBottomBottom?: number;
+    wifiBottomLeft?: number;
+    wifiBottomRight?: number;
+    wifiMiddleTop?: number;
+    wifiMiddleBottom?: number;
+    wifiMiddleLeft?: number;
+    wifiMiddleRight?: number;
+    wifiTopTop?: number;
+    wifiTopBottom?: number;
+    wifiTopLeft?: number;
+    wifiTopRight?: number;
+    batteryTop?: number;
+    batteryBottom?: number;
+    batteryLeft?: number;
+    batteryRight?: number;
 }
 
 /**

package/dist/index.d.ts

@@ -800,6 +800,44 @@ interface InstagramDmCompositionProps {
     videoIconBottom?: number;
     videoIconLeft?: number;
     videoIconRight?: number;
+    flagTop?: number;
+    flagBottom?: number;
+    flagLeft?: number;
+    flagRight?: number;
+    cellLevel?: number;
+    cellBar1Top?: number;
+    cellBar1Bottom?: number;
+    cellBar1Left?: number;
+    cellBar1Right?: number;
+    cellBar2Top?: number;
+    cellBar2Bottom?: number;
+    cellBar2Left?: number;
+    cellBar2Right?: number;
+    cellBar3Top?: number;
+    cellBar3Bottom?: number;
+    cellBar3Left?: number;
+    cellBar3Right?: number;
+    cellBar4Top?: number;
+    cellBar4Bottom?: number;
+    cellBar4Left?: number;
+    cellBar4Right?: number;
+    wifiLevel?: number;
+    wifiBottomTop?: number;
+    wifiBottomBottom?: number;
+    wifiBottomLeft?: number;
+    wifiBottomRight?: number;
+    wifiMiddleTop?: number;
+    wifiMiddleBottom?: number;
+    wifiMiddleLeft?: number;
+    wifiMiddleRight?: number;
+    wifiTopTop?: number;
+    wifiTopBottom?: number;
+    wifiTopLeft?: number;
+    wifiTopRight?: number;
+    batteryTop?: number;
+    batteryBottom?: number;
+    batteryLeft?: number;
+    batteryRight?: number;
 }
 
 /**

package/dist/index.js

@@ -3435,7 +3435,9 @@ var ICON_INPUT_IDS = {
   noNotis: "ig-no-notis",
   smilePlus: "ig-smile-plus",
   phone: "ig-phone",
-  video: "ig-video"
+  video: "ig-video",
+  flag: "ig-flag",
+  battery: "ig-battery"
 };
 var USER_PFP_INPUT_ID = "user-pfp";
 var HEADER_DEFAULTS = {
@@ -3468,7 +3470,15 @@ var HEADER_DEFAULTS = {
   videoIconTop: 240,
   videoIconBottom: 300,
   videoIconLeft: 948,
-  videoIconRight: 1020
+  videoIconRight: 1020,
+  flagTop: 240,
+  flagBottom: 302,
+  flagLeft: 1096,
+  flagRight: 1152,
+  batteryTop: 78,
+  batteryBottom: 116,
+  batteryLeft: 1018,
+  batteryRight: 1099
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -3578,6 +3588,40 @@ function generateHeaderElements(props) {
     inputId: ICON_INPUT_IDS.video,
     fit: "fill"
   });
+  const flagTop = props.flagTop ?? HEADER_DEFAULTS.flagTop;
+  const flagBottom = props.flagBottom ?? HEADER_DEFAULTS.flagBottom;
+  const flagLeft = props.flagLeft ?? HEADER_DEFAULTS.flagLeft;
+  const flagRight = props.flagRight ?? HEADER_DEFAULTS.flagRight;
+  const flagWidth = flagRight - flagLeft;
+  const flagHeight = flagBottom - flagTop;
+  elements.push({
+    id: "flag-icon",
+    type: "image",
+    x: flagLeft,
+    y: flagTop,
+    width: flagWidth,
+    height: flagHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.flag,
+    fit: "fill"
+  });
+  const batteryTop = props.batteryTop ?? HEADER_DEFAULTS.batteryTop;
+  const batteryBottom = props.batteryBottom ?? HEADER_DEFAULTS.batteryBottom;
+  const batteryLeft = props.batteryLeft ?? HEADER_DEFAULTS.batteryLeft;
+  const batteryRight = props.batteryRight ?? HEADER_DEFAULTS.batteryRight;
+  const batteryWidth = batteryRight - batteryLeft;
+  const batteryHeight = batteryBottom - batteryTop;
+  elements.push({
+    id: "battery-icon",
+    type: "image",
+    x: batteryLeft,
+    y: batteryTop,
+    width: batteryWidth,
+    height: batteryHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.battery,
+    fit: "fill"
+  });
   return elements;
 }
 function generateFooterIconElements(props) {
@@ -4079,6 +4123,8 @@ function buildImageUrls(props) {
   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");
+  imageUrls[ICON_INPUT_IDS.flag] = (0, import_remotion8.staticFile)("ig-flag.png");
+  imageUrls[ICON_INPUT_IDS.battery] = (0, import_remotion8.staticFile)("ig-battery.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
@@ -4253,7 +4299,49 @@ var defaultInstagramDmProps = {
   videoIconTop: 240,
   videoIconBottom: 300,
   videoIconLeft: 948,
-  videoIconRight: 1020
+  videoIconRight: 1020,
+  // Header - Flag icon
+  flagTop: 240,
+  flagBottom: 302,
+  flagLeft: 1096,
+  flagRight: 1152,
+  // Status bar - Cell signal
+  cellLevel: 4,
+  cellBar1Top: 102,
+  cellBar1Bottom: 115,
+  cellBar1Left: 865,
+  cellBar1Right: 874,
+  cellBar2Top: 95,
+  cellBar2Bottom: 115,
+  cellBar2Left: 881,
+  cellBar2Right: 890,
+  cellBar3Top: 87,
+  cellBar3Bottom: 115,
+  cellBar3Left: 897,
+  cellBar3Right: 906,
+  cellBar4Top: 79,
+  cellBar4Bottom: 115,
+  cellBar4Left: 913,
+  cellBar4Right: 922,
+  // Status bar - WiFi signal
+  wifiLevel: 3,
+  wifiBottomTop: 104,
+  wifiBottomBottom: 115,
+  wifiBottomLeft: 963,
+  wifiBottomRight: 977,
+  wifiMiddleTop: 91,
+  wifiMiddleBottom: 103,
+  wifiMiddleLeft: 954,
+  wifiMiddleRight: 986,
+  wifiTopTop: 79,
+  wifiTopBottom: 94,
+  wifiTopLeft: 945,
+  wifiTopRight: 995,
+  // Status bar - Battery
+  batteryTop: 78,
+  batteryBottom: 116,
+  batteryLeft: 1018,
+  batteryRight: 1099
 };
 function InstagramDmComposition(props) {
   const {
@@ -4271,7 +4359,39 @@ function InstagramDmComposition(props) {
     userStoryRingLeft = 168,
     userStoryRingRight = 288,
     userStoryRingColor = "#5e656d",
-    userStoryRingWidth = 6
+    userStoryRingWidth = 6,
+    // Cell signal props
+    cellLevel = 4,
+    cellBar1Top = 102,
+    cellBar1Bottom = 115,
+    cellBar1Left = 865,
+    cellBar1Right = 874,
+    cellBar2Top = 95,
+    cellBar2Bottom = 115,
+    cellBar2Left = 881,
+    cellBar2Right = 890,
+    cellBar3Top = 87,
+    cellBar3Bottom = 115,
+    cellBar3Left = 897,
+    cellBar3Right = 906,
+    cellBar4Top = 79,
+    cellBar4Bottom = 115,
+    cellBar4Left = 913,
+    cellBar4Right = 922,
+    // WiFi signal props
+    wifiLevel = 3,
+    wifiBottomTop = 104,
+    wifiBottomBottom = 115,
+    wifiBottomLeft = 963,
+    wifiBottomRight = 977,
+    wifiMiddleTop = 91,
+    wifiMiddleBottom = 103,
+    wifiMiddleLeft = 954,
+    wifiMiddleRight = 986,
+    wifiTopTop = 79,
+    wifiTopBottom = 94,
+    wifiTopLeft = 945,
+    wifiTopRight = 995
   } = props;
   const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
   const [zoom, setZoom] = (0, import_react8.useState)(100);
@@ -4365,6 +4485,118 @@ function InstagramDmComposition(props) {
                   }
                 }
               ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar1Top,
+                    left: cellBar1Left,
+                    width: cellBar1Right - cellBar1Left,
+                    height: cellBar1Bottom - cellBar1Top,
+                    backgroundColor: cellLevel >= 1 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar2Top,
+                    left: cellBar2Left,
+                    width: cellBar2Right - cellBar2Left,
+                    height: cellBar2Bottom - cellBar2Top,
+                    backgroundColor: cellLevel >= 2 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar3Top,
+                    left: cellBar3Left,
+                    width: cellBar3Right - cellBar3Left,
+                    height: cellBar3Bottom - cellBar3Top,
+                    backgroundColor: cellLevel >= 3 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar4Top,
+                    left: cellBar4Left,
+                    width: cellBar4Right - cellBar4Left,
+                    height: cellBar4Bottom - cellBar4Top,
+                    backgroundColor: cellLevel >= 4 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiBottomTop,
+                    left: wifiBottomLeft,
+                    width: wifiBottomRight - wifiBottomLeft,
+                    height: wifiBottomBottom - wifiBottomTop,
+                    backgroundColor: wifiLevel >= 1 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiMiddleTop,
+                    left: wifiMiddleLeft,
+                    width: wifiMiddleRight - wifiMiddleLeft,
+                    height: wifiMiddleBottom - wifiMiddleTop,
+                    backgroundColor: wifiLevel >= 2 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiTopTop,
+                    left: wifiTopLeft,
+                    width: wifiTopRight - wifiTopLeft,
+                    height: wifiTopBottom - wifiTopTop,
+                    backgroundColor: wifiLevel >= 3 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
               referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
@@ -5485,7 +5717,49 @@ var instagramDmSchema = import_zod.z.object({
   videoIconTop: import_zod.z.number().optional().default(240).describe("Video icon top Y"),
   videoIconBottom: import_zod.z.number().optional().default(300).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(1020).describe("Video icon right X")
+  videoIconRight: import_zod.z.number().optional().default(1020).describe("Video icon right X"),
+  // Header - Flag icon
+  flagTop: import_zod.z.number().optional().default(240).describe("Flag icon top Y"),
+  flagBottom: import_zod.z.number().optional().default(302).describe("Flag icon bottom Y"),
+  flagLeft: import_zod.z.number().optional().default(1096).describe("Flag icon left X"),
+  flagRight: import_zod.z.number().optional().default(1152).describe("Flag icon right X"),
+  // Status bar - Cell signal (0-4)
+  cellLevel: import_zod.z.number().min(0).max(4).optional().default(4).describe("Cell signal level (0-4)"),
+  cellBar1Top: import_zod.z.number().optional().default(102).describe("Cell bar 1 top Y"),
+  cellBar1Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 1 bottom Y"),
+  cellBar1Left: import_zod.z.number().optional().default(865).describe("Cell bar 1 left X"),
+  cellBar1Right: import_zod.z.number().optional().default(874).describe("Cell bar 1 right X"),
+  cellBar2Top: import_zod.z.number().optional().default(95).describe("Cell bar 2 top Y"),
+  cellBar2Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 2 bottom Y"),
+  cellBar2Left: import_zod.z.number().optional().default(881).describe("Cell bar 2 left X"),
+  cellBar2Right: import_zod.z.number().optional().default(890).describe("Cell bar 2 right X"),
+  cellBar3Top: import_zod.z.number().optional().default(87).describe("Cell bar 3 top Y"),
+  cellBar3Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 3 bottom Y"),
+  cellBar3Left: import_zod.z.number().optional().default(897).describe("Cell bar 3 left X"),
+  cellBar3Right: import_zod.z.number().optional().default(906).describe("Cell bar 3 right X"),
+  cellBar4Top: import_zod.z.number().optional().default(79).describe("Cell bar 4 top Y"),
+  cellBar4Bottom: import_zod.z.number().optional().default(115).describe("Cell bar 4 bottom Y"),
+  cellBar4Left: import_zod.z.number().optional().default(913).describe("Cell bar 4 left X"),
+  cellBar4Right: import_zod.z.number().optional().default(922).describe("Cell bar 4 right X"),
+  // Status bar - WiFi signal (0-3)
+  wifiLevel: import_zod.z.number().min(0).max(3).optional().default(3).describe("WiFi signal level (0-3)"),
+  wifiBottomTop: import_zod.z.number().optional().default(104).describe("WiFi bottom bar top Y"),
+  wifiBottomBottom: import_zod.z.number().optional().default(115).describe("WiFi bottom bar bottom Y"),
+  wifiBottomLeft: import_zod.z.number().optional().default(963).describe("WiFi bottom bar left X"),
+  wifiBottomRight: import_zod.z.number().optional().default(977).describe("WiFi bottom bar right X"),
+  wifiMiddleTop: import_zod.z.number().optional().default(91).describe("WiFi middle bar top Y"),
+  wifiMiddleBottom: import_zod.z.number().optional().default(103).describe("WiFi middle bar bottom Y"),
+  wifiMiddleLeft: import_zod.z.number().optional().default(954).describe("WiFi middle bar left X"),
+  wifiMiddleRight: import_zod.z.number().optional().default(986).describe("WiFi middle bar right X"),
+  wifiTopTop: import_zod.z.number().optional().default(79).describe("WiFi top bar top Y"),
+  wifiTopBottom: import_zod.z.number().optional().default(94).describe("WiFi top bar bottom Y"),
+  wifiTopLeft: import_zod.z.number().optional().default(945).describe("WiFi top bar left X"),
+  wifiTopRight: import_zod.z.number().optional().default(995).describe("WiFi top bar right X"),
+  // Status bar - Battery icon
+  batteryTop: import_zod.z.number().optional().default(78).describe("Battery icon top Y"),
+  batteryBottom: import_zod.z.number().optional().default(116).describe("Battery icon bottom Y"),
+  batteryLeft: import_zod.z.number().optional().default(1018).describe("Battery icon left X"),
+  batteryRight: import_zod.z.number().optional().default(1099).describe("Battery icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/dist/index.mjs

@@ -2504,7 +2504,9 @@ var ICON_INPUT_IDS = {
   noNotis: "ig-no-notis",
   smilePlus: "ig-smile-plus",
   phone: "ig-phone",
-  video: "ig-video"
+  video: "ig-video",
+  flag: "ig-flag",
+  battery: "ig-battery"
 };
 var USER_PFP_INPUT_ID = "user-pfp";
 var HEADER_DEFAULTS = {
@@ -2537,7 +2539,15 @@ var HEADER_DEFAULTS = {
   videoIconTop: 240,
   videoIconBottom: 300,
   videoIconLeft: 948,
-  videoIconRight: 1020
+  videoIconRight: 1020,
+  flagTop: 240,
+  flagBottom: 302,
+  flagLeft: 1096,
+  flagRight: 1152,
+  batteryTop: 78,
+  batteryBottom: 116,
+  batteryLeft: 1018,
+  batteryRight: 1099
 };
 function generateHeaderElements(props) {
   const elements = [];
@@ -2647,6 +2657,40 @@ function generateHeaderElements(props) {
     inputId: ICON_INPUT_IDS.video,
     fit: "fill"
   });
+  const flagTop = props.flagTop ?? HEADER_DEFAULTS.flagTop;
+  const flagBottom = props.flagBottom ?? HEADER_DEFAULTS.flagBottom;
+  const flagLeft = props.flagLeft ?? HEADER_DEFAULTS.flagLeft;
+  const flagRight = props.flagRight ?? HEADER_DEFAULTS.flagRight;
+  const flagWidth = flagRight - flagLeft;
+  const flagHeight = flagBottom - flagTop;
+  elements.push({
+    id: "flag-icon",
+    type: "image",
+    x: flagLeft,
+    y: flagTop,
+    width: flagWidth,
+    height: flagHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.flag,
+    fit: "fill"
+  });
+  const batteryTop = props.batteryTop ?? HEADER_DEFAULTS.batteryTop;
+  const batteryBottom = props.batteryBottom ?? HEADER_DEFAULTS.batteryBottom;
+  const batteryLeft = props.batteryLeft ?? HEADER_DEFAULTS.batteryLeft;
+  const batteryRight = props.batteryRight ?? HEADER_DEFAULTS.batteryRight;
+  const batteryWidth = batteryRight - batteryLeft;
+  const batteryHeight = batteryBottom - batteryTop;
+  elements.push({
+    id: "battery-icon",
+    type: "image",
+    x: batteryLeft,
+    y: batteryTop,
+    width: batteryWidth,
+    height: batteryHeight,
+    zIndex: 30,
+    inputId: ICON_INPUT_IDS.battery,
+    fit: "fill"
+  });
   return elements;
 }
 function generateFooterIconElements(props) {
@@ -3148,6 +3192,8 @@ function buildImageUrls(props) {
   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");
+  imageUrls[ICON_INPUT_IDS.flag] = staticFile("ig-flag.png");
+  imageUrls[ICON_INPUT_IDS.battery] = staticFile("ig-battery.png");
   if (props.profilePicUrl) {
     imageUrls[PROFILE_PIC_INPUT_ID] = props.profilePicUrl;
   }
@@ -3322,7 +3368,49 @@ var defaultInstagramDmProps = {
   videoIconTop: 240,
   videoIconBottom: 300,
   videoIconLeft: 948,
-  videoIconRight: 1020
+  videoIconRight: 1020,
+  // Header - Flag icon
+  flagTop: 240,
+  flagBottom: 302,
+  flagLeft: 1096,
+  flagRight: 1152,
+  // Status bar - Cell signal
+  cellLevel: 4,
+  cellBar1Top: 102,
+  cellBar1Bottom: 115,
+  cellBar1Left: 865,
+  cellBar1Right: 874,
+  cellBar2Top: 95,
+  cellBar2Bottom: 115,
+  cellBar2Left: 881,
+  cellBar2Right: 890,
+  cellBar3Top: 87,
+  cellBar3Bottom: 115,
+  cellBar3Left: 897,
+  cellBar3Right: 906,
+  cellBar4Top: 79,
+  cellBar4Bottom: 115,
+  cellBar4Left: 913,
+  cellBar4Right: 922,
+  // Status bar - WiFi signal
+  wifiLevel: 3,
+  wifiBottomTop: 104,
+  wifiBottomBottom: 115,
+  wifiBottomLeft: 963,
+  wifiBottomRight: 977,
+  wifiMiddleTop: 91,
+  wifiMiddleBottom: 103,
+  wifiMiddleLeft: 954,
+  wifiMiddleRight: 986,
+  wifiTopTop: 79,
+  wifiTopBottom: 94,
+  wifiTopLeft: 945,
+  wifiTopRight: 995,
+  // Status bar - Battery
+  batteryTop: 78,
+  batteryBottom: 116,
+  batteryLeft: 1018,
+  batteryRight: 1099
 };
 function InstagramDmComposition(props) {
   const {
@@ -3340,7 +3428,39 @@ function InstagramDmComposition(props) {
     userStoryRingLeft = 168,
     userStoryRingRight = 288,
     userStoryRingColor = "#5e656d",
-    userStoryRingWidth = 6
+    userStoryRingWidth = 6,
+    // Cell signal props
+    cellLevel = 4,
+    cellBar1Top = 102,
+    cellBar1Bottom = 115,
+    cellBar1Left = 865,
+    cellBar1Right = 874,
+    cellBar2Top = 95,
+    cellBar2Bottom = 115,
+    cellBar2Left = 881,
+    cellBar2Right = 890,
+    cellBar3Top = 87,
+    cellBar3Bottom = 115,
+    cellBar3Left = 897,
+    cellBar3Right = 906,
+    cellBar4Top = 79,
+    cellBar4Bottom = 115,
+    cellBar4Left = 913,
+    cellBar4Right = 922,
+    // WiFi signal props
+    wifiLevel = 3,
+    wifiBottomTop = 104,
+    wifiBottomBottom = 115,
+    wifiBottomLeft = 963,
+    wifiBottomRight = 977,
+    wifiMiddleTop = 91,
+    wifiMiddleBottom = 103,
+    wifiMiddleLeft = 954,
+    wifiMiddleRight = 986,
+    wifiTopTop = 79,
+    wifiTopBottom = 94,
+    wifiTopLeft = 945,
+    wifiTopRight = 995
   } = props;
   const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
   const [zoom, setZoom] = useState3(100);
@@ -3434,6 +3554,118 @@ function InstagramDmComposition(props) {
                   }
                 }
               ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar1Top,
+                    left: cellBar1Left,
+                    width: cellBar1Right - cellBar1Left,
+                    height: cellBar1Bottom - cellBar1Top,
+                    backgroundColor: cellLevel >= 1 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar2Top,
+                    left: cellBar2Left,
+                    width: cellBar2Right - cellBar2Left,
+                    height: cellBar2Bottom - cellBar2Top,
+                    backgroundColor: cellLevel >= 2 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar3Top,
+                    left: cellBar3Left,
+                    width: cellBar3Right - cellBar3Left,
+                    height: cellBar3Bottom - cellBar3Top,
+                    backgroundColor: cellLevel >= 3 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: cellBar4Top,
+                    left: cellBar4Left,
+                    width: cellBar4Right - cellBar4Left,
+                    height: cellBar4Bottom - cellBar4Top,
+                    backgroundColor: cellLevel >= 4 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiBottomTop,
+                    left: wifiBottomLeft,
+                    width: wifiBottomRight - wifiBottomLeft,
+                    height: wifiBottomBottom - wifiBottomTop,
+                    backgroundColor: wifiLevel >= 1 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiMiddleTop,
+                    left: wifiMiddleLeft,
+                    width: wifiMiddleRight - wifiMiddleLeft,
+                    height: wifiMiddleBottom - wifiMiddleTop,
+                    backgroundColor: wifiLevel >= 2 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: wifiTopTop,
+                    left: wifiTopLeft,
+                    width: wifiTopRight - wifiTopLeft,
+                    height: wifiTopBottom - wifiTopTop,
+                    backgroundColor: wifiLevel >= 3 ? "#fefefe" : "#3c4043",
+                    borderRadius: 2,
+                    pointerEvents: "none",
+                    zIndex: 30
+                  }
+                }
+              ),
               referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && /* @__PURE__ */ jsx10(
                 "div",
                 {
@@ -4271,7 +4503,49 @@ var instagramDmSchema = z.object({
   videoIconTop: z.number().optional().default(240).describe("Video icon top Y"),
   videoIconBottom: z.number().optional().default(300).describe("Video icon bottom Y"),
   videoIconLeft: z.number().optional().default(948).describe("Video icon left X"),
-  videoIconRight: z.number().optional().default(1020).describe("Video icon right X")
+  videoIconRight: z.number().optional().default(1020).describe("Video icon right X"),
+  // Header - Flag icon
+  flagTop: z.number().optional().default(240).describe("Flag icon top Y"),
+  flagBottom: z.number().optional().default(302).describe("Flag icon bottom Y"),
+  flagLeft: z.number().optional().default(1096).describe("Flag icon left X"),
+  flagRight: z.number().optional().default(1152).describe("Flag icon right X"),
+  // Status bar - Cell signal (0-4)
+  cellLevel: z.number().min(0).max(4).optional().default(4).describe("Cell signal level (0-4)"),
+  cellBar1Top: z.number().optional().default(102).describe("Cell bar 1 top Y"),
+  cellBar1Bottom: z.number().optional().default(115).describe("Cell bar 1 bottom Y"),
+  cellBar1Left: z.number().optional().default(865).describe("Cell bar 1 left X"),
+  cellBar1Right: z.number().optional().default(874).describe("Cell bar 1 right X"),
+  cellBar2Top: z.number().optional().default(95).describe("Cell bar 2 top Y"),
+  cellBar2Bottom: z.number().optional().default(115).describe("Cell bar 2 bottom Y"),
+  cellBar2Left: z.number().optional().default(881).describe("Cell bar 2 left X"),
+  cellBar2Right: z.number().optional().default(890).describe("Cell bar 2 right X"),
+  cellBar3Top: z.number().optional().default(87).describe("Cell bar 3 top Y"),
+  cellBar3Bottom: z.number().optional().default(115).describe("Cell bar 3 bottom Y"),
+  cellBar3Left: z.number().optional().default(897).describe("Cell bar 3 left X"),
+  cellBar3Right: z.number().optional().default(906).describe("Cell bar 3 right X"),
+  cellBar4Top: z.number().optional().default(79).describe("Cell bar 4 top Y"),
+  cellBar4Bottom: z.number().optional().default(115).describe("Cell bar 4 bottom Y"),
+  cellBar4Left: z.number().optional().default(913).describe("Cell bar 4 left X"),
+  cellBar4Right: z.number().optional().default(922).describe("Cell bar 4 right X"),
+  // Status bar - WiFi signal (0-3)
+  wifiLevel: z.number().min(0).max(3).optional().default(3).describe("WiFi signal level (0-3)"),
+  wifiBottomTop: z.number().optional().default(104).describe("WiFi bottom bar top Y"),
+  wifiBottomBottom: z.number().optional().default(115).describe("WiFi bottom bar bottom Y"),
+  wifiBottomLeft: z.number().optional().default(963).describe("WiFi bottom bar left X"),
+  wifiBottomRight: z.number().optional().default(977).describe("WiFi bottom bar right X"),
+  wifiMiddleTop: z.number().optional().default(91).describe("WiFi middle bar top Y"),
+  wifiMiddleBottom: z.number().optional().default(103).describe("WiFi middle bar bottom Y"),
+  wifiMiddleLeft: z.number().optional().default(954).describe("WiFi middle bar left X"),
+  wifiMiddleRight: z.number().optional().default(986).describe("WiFi middle bar right X"),
+  wifiTopTop: z.number().optional().default(79).describe("WiFi top bar top Y"),
+  wifiTopBottom: z.number().optional().default(94).describe("WiFi top bar bottom Y"),
+  wifiTopLeft: z.number().optional().default(945).describe("WiFi top bar left X"),
+  wifiTopRight: z.number().optional().default(995).describe("WiFi top bar right X"),
+  // Status bar - Battery icon
+  batteryTop: z.number().optional().default(78).describe("Battery icon top Y"),
+  batteryBottom: z.number().optional().default(116).describe("Battery icon bottom Y"),
+  batteryLeft: z.number().optional().default(1018).describe("Battery icon left X"),
+  batteryRight: z.number().optional().default(1099).describe("Battery icon right X")
 });
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;

package/package.json

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