ugcinc-render 1.8.52 → 1.8.53

package/dist/index.d.mts

@@ -927,9 +927,13 @@ interface IgCropConfig {
 }
 /** Instagram DM Composition props */
 interface InstagramDmCompositionProps {
-    /** Canvas width in pixels (default: 1080) */
+    /** URL of a reference screenshot to overlay on top */
+    referenceImageUrl?: string;
+    /** Opacity of the reference overlay (0-100, default: 50) */
+    referenceOpacity?: number;
+    /** Canvas width in pixels (default: 1206) */
     width?: number;
-    /** Canvas height in pixels (default: 1920) */
+    /** Canvas height in pixels (default: 2622) */
     height?: number;
     /** Duration in frames */
     durationInFrames?: number;
@@ -983,7 +987,7 @@ declare const DEFAULT_MESSAGE_STYLE: IgMessageStyle;
  * Default composition props for registration
  */
 declare const defaultInstagramDmProps: InstagramDmCompositionProps;
-declare function InstagramDmComposition({ width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
+declare function InstagramDmComposition({ referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Message grouping utility

package/dist/index.d.ts

@@ -927,9 +927,13 @@ interface IgCropConfig {
 }
 /** Instagram DM Composition props */
 interface InstagramDmCompositionProps {
-    /** Canvas width in pixels (default: 1080) */
+    /** URL of a reference screenshot to overlay on top */
+    referenceImageUrl?: string;
+    /** Opacity of the reference overlay (0-100, default: 50) */
+    referenceOpacity?: number;
+    /** Canvas width in pixels (default: 1206) */
     width?: number;
-    /** Canvas height in pixels (default: 1920) */
+    /** Canvas height in pixels (default: 2622) */
     height?: number;
     /** Duration in frames */
     durationInFrames?: number;
@@ -983,7 +987,7 @@ declare const DEFAULT_MESSAGE_STYLE: IgMessageStyle;
  * Default composition props for registration
  */
 declare const defaultInstagramDmProps: InstagramDmCompositionProps;
-declare function InstagramDmComposition({ width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
+declare function InstagramDmComposition({ referenceImageUrl, referenceOpacity, width, height, theme, statusBar, user, recipient, messages, showTypingIndicator, readReceipt, imageUrls, messageStyle, headerConfig, footerConfig, scrollOffset, }: InstagramDmCompositionProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Message grouping utility

package/dist/index.js

@@ -4341,6 +4341,8 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultInstagramDmProps = {
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3153-TiJrpzJKKvsTsjmP9zIX5LpoT8s2hF.png",
+  referenceOpacity: 50,
   width: 1206,
   height: 2622,
   durationInFrames: 90,
@@ -4371,6 +4373,8 @@ var defaultInstagramDmProps = {
   }
 };
 function InstagramDmComposition({
+  referenceImageUrl,
+  referenceOpacity = 50,
   width = 1206,
   height = 2622,
   theme,
@@ -4480,6 +4484,32 @@ function InstagramDmComposition({
             theme,
             compositionHeight: height
           }
+        ),
+        referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 100,
+              pointerEvents: "none",
+              opacity: referenceOpacity / 100
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_remotion14.Img,
+              {
+                src: referenceImageUrl,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            )
+          }
         )
       ]
     }
@@ -5033,6 +5063,9 @@ var readReceiptSchema = import_zod.z.object({
   timestamp: import_zod.z.string().optional().describe("Timestamp text")
 });
 var instagramDmSchema = import_zod.z.object({
+  // Reference overlay
+  referenceImageUrl: import_zod.z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3153-TiJrpzJKKvsTsjmP9zIX5LpoT8s2hF.png").describe("Reference screenshot URL"),
+  referenceOpacity: import_zod.z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
   // Canvas
   width: import_zod.z.number().optional().default(1206).describe("Canvas width (px)"),
   height: import_zod.z.number().optional().default(2622).describe("Canvas height (px)"),

package/dist/index.mjs

@@ -1834,7 +1834,7 @@ function ScreenshotAnimation({
 
 // src/compositions/InstagramDmComposition/index.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
-import { AbsoluteFill as AbsoluteFill5, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
+import { AbsoluteFill as AbsoluteFill5, Img as Img9, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
 var IG_THEME_COLORS = {
@@ -3445,6 +3445,8 @@ function IgMessageList({
 // src/compositions/InstagramDmComposition/index.tsx
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
+  referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3153-TiJrpzJKKvsTsjmP9zIX5LpoT8s2hF.png",
+  referenceOpacity: 50,
   width: 1206,
   height: 2622,
   durationInFrames: 90,
@@ -3475,6 +3477,8 @@ var defaultInstagramDmProps = {
   }
 };
 function InstagramDmComposition({
+  referenceImageUrl,
+  referenceOpacity = 50,
   width = 1206,
   height = 2622,
   theme,
@@ -3584,6 +3588,32 @@ function InstagramDmComposition({
             theme,
             compositionHeight: height
           }
+        ),
+        referenceImageUrl && referenceOpacity > 0 && /* @__PURE__ */ jsx22(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 100,
+              pointerEvents: "none",
+              opacity: referenceOpacity / 100
+            },
+            children: /* @__PURE__ */ jsx22(
+              Img9,
+              {
+                src: referenceImageUrl,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            )
+          }
         )
       ]
     }
@@ -3854,6 +3884,9 @@ var readReceiptSchema = z.object({
   timestamp: z.string().optional().describe("Timestamp text")
 });
 var instagramDmSchema = z.object({
+  // Reference overlay
+  referenceImageUrl: z.string().optional().default("https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3153-TiJrpzJKKvsTsjmP9zIX5LpoT8s2hF.png").describe("Reference screenshot URL"),
+  referenceOpacity: z.number().optional().default(50).describe("Reference overlay opacity (0-100)"),
   // Canvas
   width: z.number().optional().default(1206).describe("Canvas width (px)"),
   height: z.number().optional().default(2622).describe("Canvas height (px)"),

package/package.json

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