ugcinc-render 1.8.176 → 1.8.178

package/dist/index.d.mts

@@ -1017,6 +1017,24 @@ interface IMessageDmCompositionProps {
     usernameArrowOffsetY?: number;
     usernameArrowWidth?: number;
     usernameArrowHeight?: number;
+    backArrowTop?: number;
+    backArrowBottom?: number;
+    backArrowLeft?: number;
+    backArrowRight?: number;
+    unreadBadgeText?: string;
+    unreadBadgeTop?: number;
+    unreadBadgeBottom?: number;
+    unreadBadgeLeft?: number;
+    unreadBadgeFontSize?: number;
+    unreadBadgeLetterSpacing?: number;
+    unreadBadgeTextColor?: string;
+    unreadBadgeBorderRadius?: number;
+    unreadBadgePaddingLeft?: number;
+    unreadBadgePaddingRight?: number;
+    cameraIconTop?: number;
+    cameraIconBottom?: number;
+    cameraIconLeft?: number;
+    cameraIconRight?: number;
     dividerLineY?: number;
     dividerLineColor?: string;
     backgroundColor?: string;

package/dist/index.d.ts

@@ -1017,6 +1017,24 @@ interface IMessageDmCompositionProps {
     usernameArrowOffsetY?: number;
     usernameArrowWidth?: number;
     usernameArrowHeight?: number;
+    backArrowTop?: number;
+    backArrowBottom?: number;
+    backArrowLeft?: number;
+    backArrowRight?: number;
+    unreadBadgeText?: string;
+    unreadBadgeTop?: number;
+    unreadBadgeBottom?: number;
+    unreadBadgeLeft?: number;
+    unreadBadgeFontSize?: number;
+    unreadBadgeLetterSpacing?: number;
+    unreadBadgeTextColor?: string;
+    unreadBadgeBorderRadius?: number;
+    unreadBadgePaddingLeft?: number;
+    unreadBadgePaddingRight?: number;
+    cameraIconTop?: number;
+    cameraIconBottom?: number;
+    cameraIconLeft?: number;
+    cameraIconRight?: number;
     dividerLineY?: number;
     dividerLineColor?: string;
     backgroundColor?: string;

package/dist/index.js

@@ -5774,6 +5774,27 @@ var defaultIMessageDmProps = {
   usernameArrowOffsetY: 2,
   usernameArrowWidth: 14,
   usernameArrowHeight: 24,
+  // Back arrow defaults
+  backArrowTop: 234,
+  backArrowBottom: 297,
+  backArrowLeft: 50,
+  backArrowRight: 87,
+  // Unread badge defaults
+  unreadBadgeText: "579",
+  unreadBadgeTop: 238,
+  unreadBadgeBottom: 293,
+  unreadBadgeLeft: 108,
+  unreadBadgeFontSize: 36,
+  unreadBadgeLetterSpacing: 0.2,
+  unreadBadgeTextColor: "#ffffff",
+  unreadBadgeBorderRadius: 9999,
+  unreadBadgePaddingLeft: 17,
+  unreadBadgePaddingRight: 17,
+  // Camera icon defaults
+  cameraIconTop: 237,
+  cameraIconBottom: 292,
+  cameraIconLeft: 1053,
+  cameraIconRight: 1134,
   // Divider line defaults
   dividerLineY: 425,
   dividerLineColor: "#262626",
@@ -5970,6 +5991,27 @@ var IMessageDmComposition = (props) => {
     usernameArrowOffsetY = 2,
     usernameArrowWidth = 14,
     usernameArrowHeight = 24,
+    // Back arrow
+    backArrowTop = 234,
+    backArrowBottom = 297,
+    backArrowLeft = 50,
+    backArrowRight = 87,
+    // Unread badge
+    unreadBadgeText = "579",
+    unreadBadgeTop = 238,
+    unreadBadgeBottom = 293,
+    unreadBadgeLeft = 108,
+    unreadBadgeFontSize = 36,
+    unreadBadgeLetterSpacing = 0.2,
+    unreadBadgeTextColor = "#ffffff",
+    unreadBadgeBorderRadius = 9999,
+    unreadBadgePaddingLeft = 17,
+    unreadBadgePaddingRight = 17,
+    // Camera icon
+    cameraIconTop = 237,
+    cameraIconBottom = 292,
+    cameraIconLeft = 1053,
+    cameraIconRight = 1134,
     dividerLineY = 425,
     dividerLineColor = "#262626",
     showDebugOverlay = false,
@@ -6037,7 +6079,9 @@ var IMessageDmComposition = (props) => {
     messageTextLeft = 220,
     messageTextFontSize = 48,
     messageTextColor = "#8e8e93",
-    messageText = "iMessage"
+    messageText = "iMessage",
+    // Sender bubble color (for unread badge background)
+    senderBubbleColor = "#1a42d5"
   } = mergedProps;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     BaseDmComposition,
@@ -6104,6 +6148,67 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_remotion10.Img,
+          {
+            src: (0, import_remotion10.staticFile)("imsg-header-left-arrow.png"),
+            style: {
+              position: "absolute",
+              top: backArrowTop,
+              left: backArrowLeft,
+              width: backArrowRight - backArrowLeft,
+              height: backArrowBottom - backArrowTop,
+              zIndex: 26
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: unreadBadgeTop,
+              left: unreadBadgeLeft,
+              height: unreadBadgeBottom - unreadBadgeTop,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: senderBubbleColor,
+              borderRadius: unreadBadgeBorderRadius,
+              paddingLeft: unreadBadgePaddingLeft,
+              paddingRight: unreadBadgePaddingRight,
+              zIndex: 26
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "span",
+              {
+                style: {
+                  fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
+                  fontWeight: 400,
+                  fontSize: unreadBadgeFontSize,
+                  letterSpacing: unreadBadgeLetterSpacing,
+                  color: unreadBadgeTextColor,
+                  whiteSpace: "nowrap"
+                },
+                children: unreadBadgeText
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_remotion10.Img,
+          {
+            src: (0, import_remotion10.staticFile)("imsg-header-camera.png"),
+            style: {
+              position: "absolute",
+              top: cameraIconTop,
+              left: cameraIconLeft,
+              width: cameraIconRight - cameraIconLeft,
+              height: cameraIconBottom - cameraIconTop,
+              zIndex: 26
+            }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
@@ -7023,6 +7128,27 @@ var iMessageDmPropsSchema = import_zod.z.object({
   usernameArrowOffsetY: import_zod.z.number().optional(),
   usernameArrowWidth: import_zod.z.number().optional(),
   usernameArrowHeight: import_zod.z.number().optional(),
+  // Back arrow
+  backArrowTop: import_zod.z.number().optional(),
+  backArrowBottom: import_zod.z.number().optional(),
+  backArrowLeft: import_zod.z.number().optional(),
+  backArrowRight: import_zod.z.number().optional(),
+  // Unread badge
+  unreadBadgeText: import_zod.z.string().optional(),
+  unreadBadgeTop: import_zod.z.number().optional(),
+  unreadBadgeBottom: import_zod.z.number().optional(),
+  unreadBadgeLeft: import_zod.z.number().optional(),
+  unreadBadgeFontSize: import_zod.z.number().optional(),
+  unreadBadgeLetterSpacing: import_zod.z.number().optional(),
+  unreadBadgeTextColor: import_zod.z.string().optional(),
+  unreadBadgeBorderRadius: import_zod.z.number().optional(),
+  unreadBadgePaddingLeft: import_zod.z.number().optional(),
+  unreadBadgePaddingRight: import_zod.z.number().optional(),
+  // Camera icon
+  cameraIconTop: import_zod.z.number().optional(),
+  cameraIconBottom: import_zod.z.number().optional(),
+  cameraIconLeft: import_zod.z.number().optional(),
+  cameraIconRight: import_zod.z.number().optional(),
   dividerLineY: import_zod.z.number().optional(),
   dividerLineColor: import_zod.z.string().optional(),
   backgroundColor: import_zod.z.string().optional(),

package/dist/index.mjs

@@ -4820,6 +4820,27 @@ var defaultIMessageDmProps = {
   usernameArrowOffsetY: 2,
   usernameArrowWidth: 14,
   usernameArrowHeight: 24,
+  // Back arrow defaults
+  backArrowTop: 234,
+  backArrowBottom: 297,
+  backArrowLeft: 50,
+  backArrowRight: 87,
+  // Unread badge defaults
+  unreadBadgeText: "579",
+  unreadBadgeTop: 238,
+  unreadBadgeBottom: 293,
+  unreadBadgeLeft: 108,
+  unreadBadgeFontSize: 36,
+  unreadBadgeLetterSpacing: 0.2,
+  unreadBadgeTextColor: "#ffffff",
+  unreadBadgeBorderRadius: 9999,
+  unreadBadgePaddingLeft: 17,
+  unreadBadgePaddingRight: 17,
+  // Camera icon defaults
+  cameraIconTop: 237,
+  cameraIconBottom: 292,
+  cameraIconLeft: 1053,
+  cameraIconRight: 1134,
   // Divider line defaults
   dividerLineY: 425,
   dividerLineColor: "#262626",
@@ -5016,6 +5037,27 @@ var IMessageDmComposition = (props) => {
     usernameArrowOffsetY = 2,
     usernameArrowWidth = 14,
     usernameArrowHeight = 24,
+    // Back arrow
+    backArrowTop = 234,
+    backArrowBottom = 297,
+    backArrowLeft = 50,
+    backArrowRight = 87,
+    // Unread badge
+    unreadBadgeText = "579",
+    unreadBadgeTop = 238,
+    unreadBadgeBottom = 293,
+    unreadBadgeLeft = 108,
+    unreadBadgeFontSize = 36,
+    unreadBadgeLetterSpacing = 0.2,
+    unreadBadgeTextColor = "#ffffff",
+    unreadBadgeBorderRadius = 9999,
+    unreadBadgePaddingLeft = 17,
+    unreadBadgePaddingRight = 17,
+    // Camera icon
+    cameraIconTop = 237,
+    cameraIconBottom = 292,
+    cameraIconLeft = 1053,
+    cameraIconRight = 1134,
     dividerLineY = 425,
     dividerLineColor = "#262626",
     showDebugOverlay = false,
@@ -5083,7 +5125,9 @@ var IMessageDmComposition = (props) => {
     messageTextLeft = 220,
     messageTextFontSize = 48,
     messageTextColor = "#8e8e93",
-    messageText = "iMessage"
+    messageText = "iMessage",
+    // Sender bubble color (for unread badge background)
+    senderBubbleColor = "#1a42d5"
   } = mergedProps;
   return /* @__PURE__ */ jsxs10(
     BaseDmComposition,
@@ -5150,6 +5194,67 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
+        /* @__PURE__ */ jsx12(
+          Img5,
+          {
+            src: staticFile3("imsg-header-left-arrow.png"),
+            style: {
+              position: "absolute",
+              top: backArrowTop,
+              left: backArrowLeft,
+              width: backArrowRight - backArrowLeft,
+              height: backArrowBottom - backArrowTop,
+              zIndex: 26
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: unreadBadgeTop,
+              left: unreadBadgeLeft,
+              height: unreadBadgeBottom - unreadBadgeTop,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: senderBubbleColor,
+              borderRadius: unreadBadgeBorderRadius,
+              paddingLeft: unreadBadgePaddingLeft,
+              paddingRight: unreadBadgePaddingRight,
+              zIndex: 26
+            },
+            children: /* @__PURE__ */ jsx12(
+              "span",
+              {
+                style: {
+                  fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
+                  fontWeight: 400,
+                  fontSize: unreadBadgeFontSize,
+                  letterSpacing: unreadBadgeLetterSpacing,
+                  color: unreadBadgeTextColor,
+                  whiteSpace: "nowrap"
+                },
+                children: unreadBadgeText
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          Img5,
+          {
+            src: staticFile3("imsg-header-camera.png"),
+            style: {
+              position: "absolute",
+              top: cameraIconTop,
+              left: cameraIconLeft,
+              width: cameraIconRight - cameraIconLeft,
+              height: cameraIconBottom - cameraIconTop,
+              zIndex: 26
+            }
+          }
+        ),
         /* @__PURE__ */ jsx12(
           "div",
           {
@@ -5786,6 +5891,27 @@ var iMessageDmPropsSchema = z.object({
   usernameArrowOffsetY: z.number().optional(),
   usernameArrowWidth: z.number().optional(),
   usernameArrowHeight: z.number().optional(),
+  // Back arrow
+  backArrowTop: z.number().optional(),
+  backArrowBottom: z.number().optional(),
+  backArrowLeft: z.number().optional(),
+  backArrowRight: z.number().optional(),
+  // Unread badge
+  unreadBadgeText: z.string().optional(),
+  unreadBadgeTop: z.number().optional(),
+  unreadBadgeBottom: z.number().optional(),
+  unreadBadgeLeft: z.number().optional(),
+  unreadBadgeFontSize: z.number().optional(),
+  unreadBadgeLetterSpacing: z.number().optional(),
+  unreadBadgeTextColor: z.string().optional(),
+  unreadBadgeBorderRadius: z.number().optional(),
+  unreadBadgePaddingLeft: z.number().optional(),
+  unreadBadgePaddingRight: z.number().optional(),
+  // Camera icon
+  cameraIconTop: z.number().optional(),
+  cameraIconBottom: z.number().optional(),
+  cameraIconLeft: z.number().optional(),
+  cameraIconRight: z.number().optional(),
   dividerLineY: z.number().optional(),
   dividerLineColor: z.string().optional(),
   backgroundColor: z.string().optional(),

package/package.json

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