ugcinc-render 1.8.146 → 1.8.148

package/dist/index.d.mts

@@ -998,6 +998,19 @@ interface IMessageDmCompositionProps {
     headerTop?: number;
     headerBottom?: number;
     headerBackgroundColor?: string;
+    profilePicUrl?: string;
+    profilePicTop?: number;
+    profilePicBottom?: number;
+    profilePicLeft?: number;
+    profilePicRight?: number;
+    username?: string;
+    usernameBottom?: number;
+    usernameFontSize?: number;
+    usernameLetterSpacing?: number;
+    usernameColor?: string;
+    usernameArrowGap?: number;
+    usernameArrowWidth?: number;
+    usernameArrowHeight?: number;
     dividerLineY?: number;
     dividerLineColor?: string;
     backgroundColor?: string;

package/dist/index.d.ts

@@ -998,6 +998,19 @@ interface IMessageDmCompositionProps {
     headerTop?: number;
     headerBottom?: number;
     headerBackgroundColor?: string;
+    profilePicUrl?: string;
+    profilePicTop?: number;
+    profilePicBottom?: number;
+    profilePicLeft?: number;
+    profilePicRight?: number;
+    username?: string;
+    usernameBottom?: number;
+    usernameFontSize?: number;
+    usernameLetterSpacing?: number;
+    usernameColor?: string;
+    usernameArrowGap?: number;
+    usernameArrowWidth?: number;
+    usernameArrowHeight?: number;
     dividerLineY?: number;
     dividerLineColor?: string;
     backgroundColor?: string;

package/dist/index.js

@@ -5366,7 +5366,8 @@ function convertPropsToElements2(props) {
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultIMessageDmProps = {
   showDebugOverlay: true,
-  showReferenceImage: false,
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/IMG_3189-hUoucNOmBoT8fihIL7ybuEXwoRrngz.png",
+  showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
   height: 2622,
@@ -5376,6 +5377,20 @@ var defaultIMessageDmProps = {
   headerTop: 0,
   headerBottom: 424,
   headerBackgroundColor: "#171717",
+  // Profile section defaults
+  profilePicUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
+  profilePicTop: 195,
+  profilePicBottom: 345,
+  profilePicLeft: 529,
+  profilePicRight: 678,
+  username: "cheatmate_io",
+  usernameBottom: 393,
+  usernameFontSize: 42,
+  usernameLetterSpacing: 0,
+  usernameColor: "#ffffff",
+  usernameArrowGap: 12,
+  usernameArrowWidth: 13,
+  usernameArrowHeight: 23,
   // Divider line defaults
   dividerLineY: 425,
   dividerLineColor: "#262626",
@@ -5485,6 +5500,20 @@ var IMessageDmComposition = (props) => {
     backgroundColor = "#000000",
     headerBackgroundColor = "#171717",
     headerBottom = 424,
+    // Profile section
+    profilePicUrl,
+    profilePicTop = 195,
+    profilePicBottom = 345,
+    profilePicLeft = 529,
+    profilePicRight = 678,
+    username = "cheatmate_io",
+    usernameBottom = 393,
+    usernameFontSize = 42,
+    usernameLetterSpacing = 0,
+    usernameColor = "#ffffff",
+    usernameArrowGap = 12,
+    usernameArrowWidth = 13,
+    usernameArrowHeight = 23,
     dividerLineY = 425,
     dividerLineColor = "#262626",
     showDebugOverlay = false,
@@ -5633,6 +5662,73 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
+        profilePicUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_remotion10.Img,
+          {
+            src: profilePicUrl,
+            style: {
+              position: "absolute",
+              top: profilePicTop,
+              left: profilePicLeft,
+              width: profilePicRight - profilePicLeft,
+              height: profilePicBottom - profilePicTop,
+              borderRadius: "50%",
+              objectFit: "cover",
+              zIndex: 26
+            }
+          }
+        ),
+        username && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: profilePicBottom,
+              left: profilePicLeft,
+              width: profilePicRight - profilePicLeft,
+              height: usernameBottom - profilePicBottom,
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "center",
+              zIndex: 26
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: usernameArrowGap
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "SF Pro Display",
+                        fontWeight: 600,
+                        fontSize: usernameFontSize,
+                        letterSpacing: usernameLetterSpacing,
+                        color: usernameColor
+                      },
+                      children: username
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    import_remotion10.Img,
+                    {
+                      src: (0, import_remotion10.staticFile)("ig-dm-right-arrow.png"),
+                      style: {
+                        width: usernameArrowWidth,
+                        height: usernameArrowHeight
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_remotion10.Img,
           {
@@ -6459,6 +6555,20 @@ var iMessageDmPropsSchema = import_zod.z.object({
   headerTop: import_zod.z.number().optional(),
   headerBottom: import_zod.z.number().optional(),
   headerBackgroundColor: import_zod.z.string().optional(),
+  // Header profile section
+  profilePicUrl: import_zod.z.string().optional(),
+  profilePicTop: import_zod.z.number().optional(),
+  profilePicBottom: import_zod.z.number().optional(),
+  profilePicLeft: import_zod.z.number().optional(),
+  profilePicRight: import_zod.z.number().optional(),
+  username: import_zod.z.string().optional(),
+  usernameBottom: import_zod.z.number().optional(),
+  usernameFontSize: import_zod.z.number().optional(),
+  usernameLetterSpacing: import_zod.z.number().optional(),
+  usernameColor: import_zod.z.string().optional(),
+  usernameArrowGap: import_zod.z.number().optional(),
+  usernameArrowWidth: import_zod.z.number().optional(),
+  usernameArrowHeight: 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

@@ -4429,7 +4429,8 @@ function convertPropsToElements2(props) {
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultIMessageDmProps = {
   showDebugOverlay: true,
-  showReferenceImage: false,
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/IMG_3189-hUoucNOmBoT8fihIL7ybuEXwoRrngz.png",
+  showReferenceImage: true,
   referenceOpacity: 50,
   width: 1206,
   height: 2622,
@@ -4439,6 +4440,20 @@ var defaultIMessageDmProps = {
   headerTop: 0,
   headerBottom: 424,
   headerBackgroundColor: "#171717",
+  // Profile section defaults
+  profilePicUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg",
+  profilePicTop: 195,
+  profilePicBottom: 345,
+  profilePicLeft: 529,
+  profilePicRight: 678,
+  username: "cheatmate_io",
+  usernameBottom: 393,
+  usernameFontSize: 42,
+  usernameLetterSpacing: 0,
+  usernameColor: "#ffffff",
+  usernameArrowGap: 12,
+  usernameArrowWidth: 13,
+  usernameArrowHeight: 23,
   // Divider line defaults
   dividerLineY: 425,
   dividerLineColor: "#262626",
@@ -4548,6 +4563,20 @@ var IMessageDmComposition = (props) => {
     backgroundColor = "#000000",
     headerBackgroundColor = "#171717",
     headerBottom = 424,
+    // Profile section
+    profilePicUrl,
+    profilePicTop = 195,
+    profilePicBottom = 345,
+    profilePicLeft = 529,
+    profilePicRight = 678,
+    username = "cheatmate_io",
+    usernameBottom = 393,
+    usernameFontSize = 42,
+    usernameLetterSpacing = 0,
+    usernameColor = "#ffffff",
+    usernameArrowGap = 12,
+    usernameArrowWidth = 13,
+    usernameArrowHeight = 23,
     dividerLineY = 425,
     dividerLineColor = "#262626",
     showDebugOverlay = false,
@@ -4696,6 +4725,73 @@ var IMessageDmComposition = (props) => {
             }
           }
         ),
+        profilePicUrl && /* @__PURE__ */ jsx12(
+          Img5,
+          {
+            src: profilePicUrl,
+            style: {
+              position: "absolute",
+              top: profilePicTop,
+              left: profilePicLeft,
+              width: profilePicRight - profilePicLeft,
+              height: profilePicBottom - profilePicTop,
+              borderRadius: "50%",
+              objectFit: "cover",
+              zIndex: 26
+            }
+          }
+        ),
+        username && /* @__PURE__ */ jsx12(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: profilePicBottom,
+              left: profilePicLeft,
+              width: profilePicRight - profilePicLeft,
+              height: usernameBottom - profilePicBottom,
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "center",
+              zIndex: 26
+            },
+            children: /* @__PURE__ */ jsxs10(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: usernameArrowGap
+                },
+                children: [
+                  /* @__PURE__ */ jsx12(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "SF Pro Display",
+                        fontWeight: 600,
+                        fontSize: usernameFontSize,
+                        letterSpacing: usernameLetterSpacing,
+                        color: usernameColor
+                      },
+                      children: username
+                    }
+                  ),
+                  /* @__PURE__ */ jsx12(
+                    Img5,
+                    {
+                      src: staticFile3("ig-dm-right-arrow.png"),
+                      style: {
+                        width: usernameArrowWidth,
+                        height: usernameArrowHeight
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsx12(
           Img5,
           {
@@ -5239,6 +5335,20 @@ var iMessageDmPropsSchema = z.object({
   headerTop: z.number().optional(),
   headerBottom: z.number().optional(),
   headerBackgroundColor: z.string().optional(),
+  // Header profile section
+  profilePicUrl: z.string().optional(),
+  profilePicTop: z.number().optional(),
+  profilePicBottom: z.number().optional(),
+  profilePicLeft: z.number().optional(),
+  profilePicRight: z.number().optional(),
+  username: z.string().optional(),
+  usernameBottom: z.number().optional(),
+  usernameFontSize: z.number().optional(),
+  usernameLetterSpacing: z.number().optional(),
+  usernameColor: z.string().optional(),
+  usernameArrowGap: z.number().optional(),
+  usernameArrowWidth: z.number().optional(),
+  usernameArrowHeight: 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.146",
+  "version": "1.8.148",
   "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",