ugcinc 4.5.43 → 4.5.44

package/dist/automations/nodes/create-dm.d.ts

@@ -48,6 +48,7 @@ declare const definition: import("./types").NodeDefinition<"create-dm", "generat
     imessageMessageHeaderTimestampText: string;
     imessageMessageHeaderTimeInputType: InputType;
     instagramUserHasStory: boolean;
+    dynamicCrop: import("../../render/types/crop").DynamicCropConfig | undefined;
     outputMode: OutputMode;
     selectionMode: SelectionMode | null;
 }, CreateDmNodeInputs, CreateDmNodeOutputs, false>;

package/dist/automations/nodes/create-dm.js

@@ -42,6 +42,8 @@ const definition = (0, types_1.defineNode)({
         imessageMessageHeaderTimeInputType: 'static',
         // Instagram-specific
         instagramUserHasStory: false,
+        // Dynamic crop - crop output to DM element bounds
+        dynamicCrop: undefined,
         outputMode: 'per-input',
         selectionMode: null,
     },

package/dist/automations/nodes/index.d.ts

@@ -110,6 +110,7 @@ export declare const nodeDefinitions: {
         imessageMessageHeaderTimestampText: string;
         imessageMessageHeaderTimeInputType: import("./types").InputType;
         instagramUserHasStory: boolean;
+        dynamicCrop: import("../..").DynamicCropConfig | undefined;
         outputMode: import("./types").OutputMode;
         selectionMode: import("./types").SelectionMode | null;
     }, import("./create-dm").CreateDmNodeInputs, import("./create-dm").CreateDmNodeOutputs, false> & {

package/dist/render/Root.js

@@ -9,8 +9,10 @@ const VideoEditorComposition_1 = require("./compositions/VideoEditorComposition"
 const AutoCaptionComposition_1 = require("./compositions/AutoCaptionComposition");
 const ScreenshotAnimation_1 = require("./compositions/ScreenshotAnimation");
 const InstagramDmComposition_1 = require("./compositions/InstagramDmComposition");
+const convertPropsToElements_1 = require("./compositions/InstagramDmComposition/convertPropsToElements");
 const IMessageDmComposition_1 = require("./compositions/IMessageDmComposition");
 const types_1 = require("./compositions/IMessageDmComposition/types");
+const convertPropsToElements_2 = require("./compositions/IMessageDmComposition/convertPropsToElements");
 const positionResolver_1 = require("./utils/positionResolver");
 const cropBounds_1 = require("./utils/cropBounds");
 const fonts_1 = require("./utils/fonts");
@@ -427,6 +429,8 @@ const instagramDmSchema = zod_1.z.object({
     // Divider line
     dividerLineY: zod_1.z.number().optional().default(353).describe('Divider line Y position'),
     dividerLineColor: zod_1.z.string().optional().default('#25282d').describe('Divider line color'),
+    // Dynamic crop - crop output to element bounds
+    dynamicCrop: zod_1.z.record(zod_1.z.any()).optional().describe('Dynamic crop configuration'),
 });
 // Cast components to work around renderer's strict typing
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -501,8 +505,73 @@ const calculateImageMetadata = async ({ props }) => {
         durationInFrames: 1,
     };
 };
+/**
+ * calculateMetadata for InstagramDmComposition
+ * Computes output dimensions when dynamic crop is enabled.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const calculateInstagramDmMetadata = async ({ props }) => {
+    const canvasWidth = props.width ?? 1206;
+    const canvasHeight = props.height ?? 2622;
+    const defaultResult = { width: canvasWidth, height: canvasHeight, fps: 30, durationInFrames: 90 };
+    if (!(0, cropBounds_1.isDynamicCropEnabled)(props.dynamicCrop)) {
+        return defaultResult;
+    }
+    try {
+        await (0, fonts_1.preloadFonts)();
+        await new Promise(resolve => setTimeout(resolve, 50));
+    }
+    catch (err) {
+        console.error('[calculateInstagramDmMetadata] Font loading failed:', err);
+        return defaultResult;
+    }
+    const { elements } = (0, convertPropsToElements_1.convertPropsToElements)(props);
+    const { elements: resolved } = (0, positionResolver_1.resolveElementPositions)(elements, {});
+    if (!resolved)
+        return defaultResult;
+    const cropBounds = (0, cropBounds_1.calculateCropBounds)(resolved, props.dynamicCrop, canvasWidth, canvasHeight);
+    return {
+        width: Math.round(cropBounds.width),
+        height: Math.round(cropBounds.height),
+        fps: 30,
+        durationInFrames: 90,
+    };
+};
+/**
+ * calculateMetadata for IMessageDmComposition
+ * Computes output dimensions when dynamic crop is enabled.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const calculateIMessageDmMetadata = async ({ props }) => {
+    const canvasWidth = props.width ?? 1206;
+    const canvasHeight = props.height ?? 2622;
+    const defaultResult = { width: canvasWidth, height: canvasHeight, fps: 30, durationInFrames: 90 };
+    if (!(0, cropBounds_1.isDynamicCropEnabled)(props.dynamicCrop)) {
+        return defaultResult;
+    }
+    try {
+        await (0, fonts_1.preloadFonts)();
+        await new Promise(resolve => setTimeout(resolve, 50));
+    }
+    catch (err) {
+        console.error('[calculateIMessageDmMetadata] Font loading failed:', err);
+        return defaultResult;
+    }
+    const mergedProps = { ...IMessageDmComposition_1.defaultIMessageDmProps, ...props };
+    const { elements } = (0, convertPropsToElements_2.convertPropsToElements)(mergedProps);
+    const { elements: resolved } = (0, positionResolver_1.resolveElementPositions)(elements, {});
+    if (!resolved)
+        return defaultResult;
+    const cropBounds = (0, cropBounds_1.calculateCropBounds)(resolved, props.dynamicCrop, canvasWidth, canvasHeight);
+    return {
+        width: Math.round(cropBounds.width),
+        height: Math.round(cropBounds.height),
+        fps: 30,
+        durationInFrames: 90,
+    };
+};
 const RenderRoot = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "ImageEditorComposition", component: ImageComp, calculateMetadata: calculateImageMetadata, durationInFrames: 1, fps: 30, width: 1080, height: 1920, defaultProps: defaultImageProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "VideoEditorComposition", component: VideoComp, durationInFrames: 150, fps: 30, width: 1080, height: 1920, defaultProps: defaultVideoProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "AutoCaptionComposition", component: AutoCaptionComp, durationInFrames: 300, fps: 30, width: 1080, height: 1920, defaultProps: defaultAutoCaptionProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "ScreenshotAnimationComposition", component: ScreenshotAnimationComp, schema: screenshotAnimationSchema, durationInFrames: 180, fps: 59, width: 1206, height: 2622, defaultProps: defaultScreenshotAnimationProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "InstagramDmComposition", component: InstagramDmComp, schema: instagramDmSchema, durationInFrames: 90, fps: 30, width: 1206, height: 2622, defaultProps: InstagramDmComposition_1.defaultInstagramDmProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "IMessageDmComposition", component: IMessageDmComp, schema: types_1.iMessageDmPropsSchema, durationInFrames: 90, fps: 30, width: 1206, height: 2622, defaultProps: IMessageDmComposition_1.defaultIMessageDmProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "ImageEditorComposition", component: ImageComp, calculateMetadata: calculateImageMetadata, durationInFrames: 1, fps: 30, width: 1080, height: 1920, defaultProps: defaultImageProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "VideoEditorComposition", component: VideoComp, durationInFrames: 150, fps: 30, width: 1080, height: 1920, defaultProps: defaultVideoProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "AutoCaptionComposition", component: AutoCaptionComp, durationInFrames: 300, fps: 30, width: 1080, height: 1920, defaultProps: defaultAutoCaptionProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "ScreenshotAnimationComposition", component: ScreenshotAnimationComp, schema: screenshotAnimationSchema, durationInFrames: 180, fps: 59, width: 1206, height: 2622, defaultProps: defaultScreenshotAnimationProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "InstagramDmComposition", component: InstagramDmComp, calculateMetadata: calculateInstagramDmMetadata, schema: instagramDmSchema, durationInFrames: 90, fps: 30, width: 1206, height: 2622, defaultProps: InstagramDmComposition_1.defaultInstagramDmProps }), (0, jsx_runtime_1.jsx)(remotion_1.Composition, { id: "IMessageDmComposition", component: IMessageDmComp, calculateMetadata: calculateIMessageDmMetadata, schema: types_1.iMessageDmPropsSchema, durationInFrames: 90, fps: 30, width: 1206, height: 2622, defaultProps: IMessageDmComposition_1.defaultIMessageDmProps })] }));
 };
 exports.RenderRoot = RenderRoot;
 exports.default = exports.RenderRoot;

package/dist/render/compositions/DmComposition/BaseDmComposition.d.ts

@@ -6,11 +6,14 @@
  * font loading, and shared iOS chrome (status bar, home indicator).
  */
 import React from 'react';
+import type { CropBounds } from '../../types/crop';
 export interface BaseDmCompositionProps {
     /** Canvas width */
     width: number;
     /** Canvas height */
     height: number;
+    /** When set, crop output to these bounds (for dynamic crop) */
+    cropBounds?: CropBounds;
     /** Background color */
     backgroundColor: string;
     /** Show debug overlay with crosshair and coordinates */
@@ -108,5 +111,5 @@ export interface BaseDmCompositionProps {
     /** Status bar elements color (time, cell bars, icons) - defaults to white */
     statusBarColor?: string;
 }
-export declare function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, currentProps, children, time, timeRight, timeBottom, timeFontSize, timeLetterSpacing, timeColor, noNotisTop, noNotisBottom, noNotisLeft, noNotisRight, cellLevel, cell1Top, cell1Bottom, cell1Left, cell1Right, cell2Top, cell2Bottom, cell2Left, cell2Right, cell3Top, cell3Bottom, cell3Left, cell3Right, cell4Top, cell4Bottom, cell4Left, cell4Right, wifiTop, wifiBottom, wifiLeft, wifiRight, batteryTop, batteryBottom, batteryLeft, batteryRight, homeIndicatorTop, homeIndicatorBottom, homeIndicatorLeft, homeIndicatorRight, homeIndicatorColor, statusBarColor, }: BaseDmCompositionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BaseDmComposition({ width, height, cropBounds, backgroundColor, showDebugOverlay, referenceImageUrl, showReferenceImage, referenceOpacity, currentProps, children, time, timeRight, timeBottom, timeFontSize, timeLetterSpacing, timeColor, noNotisTop, noNotisBottom, noNotisLeft, noNotisRight, cellLevel, cell1Top, cell1Bottom, cell1Left, cell1Right, cell2Top, cell2Bottom, cell2Left, cell2Right, cell3Top, cell3Bottom, cell3Left, cell3Right, cell4Top, cell4Bottom, cell4Left, cell4Right, wifiTop, wifiBottom, wifiLeft, wifiRight, batteryTop, batteryBottom, batteryLeft, batteryRight, homeIndicatorTop, homeIndicatorBottom, homeIndicatorLeft, homeIndicatorRight, homeIndicatorColor, statusBarColor, }: BaseDmCompositionProps): import("react/jsx-runtime").JSX.Element | null;
 export default BaseDmComposition;

package/dist/render/compositions/DmComposition/BaseDmComposition.js

@@ -13,7 +13,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const fonts_1 = require("../../utils/fonts");
 const DebugOverlay_1 = require("./DebugOverlay");
-function BaseDmComposition({ width, height, backgroundColor, showDebugOverlay = false, referenceImageUrl, showReferenceImage = false, referenceOpacity = 50, currentProps, children, 
+function BaseDmComposition({ width, height, cropBounds, backgroundColor, showDebugOverlay = false, referenceImageUrl, showReferenceImage = false, referenceOpacity = 50, currentProps, children, 
 // Status bar - Time (defaults from IG DM)
 time = '9:41', timeRight = 262, timeBottom = 125, timeFontSize = 52, timeLetterSpacing = 1.6, timeColor = '#ffffff', 
 // Status bar - No notifications
@@ -75,6 +75,11 @@ statusBarColor = '#ffffff', }) {
         setReferenceVisible((prev) => !prev);
     }, []);
     const zoomScale = zoom / 100;
+    // Crop offset when dynamic crop is applied
+    const cropOffsetX = cropBounds?.x ?? 0;
+    const cropOffsetY = cropBounds?.y ?? 0;
+    const contentWidth = cropBounds ? cropBounds.width : width;
+    const contentHeight = cropBounds ? cropBounds.height : height;
     // Determine if we need to invert icons for dark status bar color
     // If statusBarColor is black or very dark, invert the white icons
     const isStatusBarDark = statusBarColor === '#000000' || statusBarColor === '#000' || statusBarColor.toLowerCase() === 'black';
@@ -89,124 +94,131 @@ statusBarColor = '#ffffff', }) {
     return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: {
             backgroundColor,
             overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    width: width,
-                    height: height,
-                    transform: `translate(${-scrollX}px, ${-scrollY}px) scale(${zoomScale})`,
-                    transformOrigin: 'top left',
-                }, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: timeBottom - timeFontSize,
-                            left: 0,
-                            width: timeRight,
-                            height: timeFontSize,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-                            fontWeight: 600,
-                            fontSize: timeFontSize,
-                            letterSpacing: timeLetterSpacing,
-                            color: statusBarColor,
-                            zIndex: 30,
-                            pointerEvents: 'none',
-                        }, children: time }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-no-notis.png'), style: {
-                            position: 'absolute',
-                            top: noNotisTop,
-                            left: noNotisLeft,
-                            width: noNotisRight - noNotisLeft,
-                            height: noNotisBottom - noNotisTop,
-                            objectFit: 'fill',
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                            filter: iconFilter,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: cell1Top,
-                            left: cell1Left,
-                            width: cell1Right - cell1Left,
-                            height: cell1Bottom - cell1Top,
-                            backgroundColor: cellLevel >= 1 ? cellBarActiveColor : cellBarInactiveColor,
-                            borderRadius: 2,
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: cell2Top,
-                            left: cell2Left,
-                            width: cell2Right - cell2Left,
-                            height: cell2Bottom - cell2Top,
-                            backgroundColor: cellLevel >= 2 ? cellBarActiveColor : cellBarInactiveColor,
-                            borderRadius: 2,
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: cell3Top,
-                            left: cell3Left,
-                            width: cell3Right - cell3Left,
-                            height: cell3Bottom - cell3Top,
-                            backgroundColor: cellLevel >= 3 ? cellBarActiveColor : cellBarInactiveColor,
-                            borderRadius: 2,
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: cell4Top,
-                            left: cell4Left,
-                            width: cell4Right - cell4Left,
-                            height: cell4Bottom - cell4Top,
-                            backgroundColor: cellLevel >= 4 ? cellBarActiveColor : cellBarInactiveColor,
-                            borderRadius: 2,
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                        } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-wifi.png'), style: {
-                            position: 'absolute',
-                            top: wifiTop,
-                            left: wifiLeft,
-                            width: wifiRight - wifiLeft,
-                            height: wifiBottom - wifiTop,
-                            objectFit: 'fill',
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                            filter: iconFilter,
-                        } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-battery.png'), style: {
-                            position: 'absolute',
-                            top: batteryTop,
-                            left: batteryLeft,
-                            width: batteryRight - batteryLeft,
-                            height: batteryBottom - batteryTop,
-                            objectFit: 'fill',
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                            filter: iconFilter,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: homeIndicatorTop,
-                            left: homeIndicatorLeft,
-                            width: homeIndicatorRight - homeIndicatorLeft,
-                            height: homeIndicatorBottom - homeIndicatorTop,
-                            backgroundColor: homeIndicatorColor,
-                            borderRadius: (homeIndicatorBottom - homeIndicatorTop) / 2,
-                            pointerEvents: 'none',
-                            zIndex: 50,
-                        } }), referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && ((0, jsx_runtime_1.jsx)("div", { style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            zIndex: 100,
-                            pointerEvents: 'none',
-                            opacity: clampedReferenceOpacity / 100,
-                        }, children: (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: referenceImageUrl, style: {
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                imageRendering: 'pixelated',
-                            } }) }))] }), showDebugOverlay && ((0, jsx_runtime_1.jsx)(DebugOverlay_1.DebugOverlay, { width: width, height: height, zoom: zoom, scrollX: scrollX, scrollY: scrollY, referenceVisible: referenceVisible, onZoomChange: handleZoomChange, onToggleReference: handleToggleReference, currentProps: currentProps }))] }));
+                    width: contentWidth,
+                    height: contentHeight,
+                    overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        position: 'absolute',
+                        top: -cropOffsetY,
+                        left: -cropOffsetX,
+                        width: width,
+                        height: height,
+                        transform: `translate(${-scrollX}px, ${-scrollY}px) scale(${zoomScale})`,
+                        transformOrigin: 'top left',
+                    }, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: timeBottom - timeFontSize,
+                                left: 0,
+                                width: timeRight,
+                                height: timeFontSize,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'flex-end',
+                                fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
+                                fontWeight: 600,
+                                fontSize: timeFontSize,
+                                letterSpacing: timeLetterSpacing,
+                                color: statusBarColor,
+                                zIndex: 30,
+                                pointerEvents: 'none',
+                            }, children: time }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-no-notis.png'), style: {
+                                position: 'absolute',
+                                top: noNotisTop,
+                                left: noNotisLeft,
+                                width: noNotisRight - noNotisLeft,
+                                height: noNotisBottom - noNotisTop,
+                                objectFit: 'fill',
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                                filter: iconFilter,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: cell1Top,
+                                left: cell1Left,
+                                width: cell1Right - cell1Left,
+                                height: cell1Bottom - cell1Top,
+                                backgroundColor: cellLevel >= 1 ? cellBarActiveColor : cellBarInactiveColor,
+                                borderRadius: 2,
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: cell2Top,
+                                left: cell2Left,
+                                width: cell2Right - cell2Left,
+                                height: cell2Bottom - cell2Top,
+                                backgroundColor: cellLevel >= 2 ? cellBarActiveColor : cellBarInactiveColor,
+                                borderRadius: 2,
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: cell3Top,
+                                left: cell3Left,
+                                width: cell3Right - cell3Left,
+                                height: cell3Bottom - cell3Top,
+                                backgroundColor: cellLevel >= 3 ? cellBarActiveColor : cellBarInactiveColor,
+                                borderRadius: 2,
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: cell4Top,
+                                left: cell4Left,
+                                width: cell4Right - cell4Left,
+                                height: cell4Bottom - cell4Top,
+                                backgroundColor: cellLevel >= 4 ? cellBarActiveColor : cellBarInactiveColor,
+                                borderRadius: 2,
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                            } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-wifi.png'), style: {
+                                position: 'absolute',
+                                top: wifiTop,
+                                left: wifiLeft,
+                                width: wifiRight - wifiLeft,
+                                height: wifiBottom - wifiTop,
+                                objectFit: 'fill',
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                                filter: iconFilter,
+                            } }), (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: (0, remotion_1.staticFile)('ig-battery.png'), style: {
+                                position: 'absolute',
+                                top: batteryTop,
+                                left: batteryLeft,
+                                width: batteryRight - batteryLeft,
+                                height: batteryBottom - batteryTop,
+                                objectFit: 'fill',
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                                filter: iconFilter,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: homeIndicatorTop,
+                                left: homeIndicatorLeft,
+                                width: homeIndicatorRight - homeIndicatorLeft,
+                                height: homeIndicatorBottom - homeIndicatorTop,
+                                backgroundColor: homeIndicatorColor,
+                                borderRadius: (homeIndicatorBottom - homeIndicatorTop) / 2,
+                                pointerEvents: 'none',
+                                zIndex: 50,
+                            } }), referenceImageUrl && showReferenceImage && (!showDebugOverlay || referenceVisible) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                zIndex: 100,
+                                pointerEvents: 'none',
+                                opacity: clampedReferenceOpacity / 100,
+                            }, children: (0, jsx_runtime_1.jsx)(remotion_1.Img, { src: referenceImageUrl, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    imageRendering: 'pixelated',
+                                } }) }))] }) }), showDebugOverlay && ((0, jsx_runtime_1.jsx)(DebugOverlay_1.DebugOverlay, { width: contentWidth, height: contentHeight, zoom: zoom, scrollX: scrollX, scrollY: scrollY, referenceVisible: referenceVisible, onZoomChange: handleZoomChange, onToggleReference: handleToggleReference, currentProps: currentProps }))] }));
 }
 exports.default = BaseDmComposition;

package/dist/render/compositions/IMessageDmComposition/index.js

@@ -15,6 +15,8 @@ const ImageEditorComposition_1 = require("../ImageEditorComposition");
 const DmComposition_1 = require("../DmComposition");
 const convertPropsToElements_1 = require("./convertPropsToElements");
 const fonts_1 = require("../../utils/fonts");
+const positionResolver_1 = require("../../utils/positionResolver");
+const cropBounds_1 = require("../../utils/cropBounds");
 /**
  * Default composition props for registration
  */
@@ -286,6 +288,20 @@ const IMessageDmComposition = (props) => {
         };
         return (0, convertPropsToElements_1.convertPropsToElements)(propsWithEffectiveColors);
     }, [mergedProps, fontsLoaded]);
+    // Resolve element positions and compute crop bounds when dynamic crop enabled
+    const cropBounds = (0, react_1.useMemo)(() => {
+        const elements = conversionResult.elements;
+        if (!elements.length || !(0, cropBounds_1.isDynamicCropEnabled)(mergedProps.dynamicCrop)) {
+            return undefined;
+        }
+        const result = (0, positionResolver_1.resolveElementPositions)(elements, {});
+        const resolved = result.elements;
+        if (!resolved)
+            return undefined;
+        const w = mergedProps.width ?? 1206;
+        const h = mergedProps.height ?? 2622;
+        return (0, cropBounds_1.calculateCropBounds)(resolved, mergedProps.dynamicCrop, w, h);
+    }, [conversionResult.elements, mergedProps.dynamicCrop, mergedProps.width, mergedProps.height]);
     // Extract values with defaults
     const { width = 1206, height = 2622, backgroundColor = '#000000', headerBackgroundColor = '#171717', headerBottom = 424, lightMode = false, 
     // Profile section
@@ -318,7 +334,7 @@ const IMessageDmComposition = (props) => {
     const effectiveUsernameColor = lightMode ? '#000000' : usernameColor;
     const effectiveHomeIndicatorColor = lightMode ? '#000000' : homeIndicatorColor;
     const effectiveStatusBarColor = lightMode ? '#000000' : '#ffffff';
-    return ((0, jsx_runtime_1.jsxs)(DmComposition_1.BaseDmComposition, { width: width, height: height, backgroundColor: effectiveBackgroundColor, showDebugOverlay: showDebugOverlay, referenceImageUrl: referenceImageUrl, showReferenceImage: showReferenceImage, referenceOpacity: referenceOpacity, currentProps: { ...mergedProps }, 
+    return ((0, jsx_runtime_1.jsxs)(DmComposition_1.BaseDmComposition, { width: width, height: height, cropBounds: cropBounds, backgroundColor: effectiveBackgroundColor, showDebugOverlay: showDebugOverlay, referenceImageUrl: referenceImageUrl, showReferenceImage: showReferenceImage, referenceOpacity: referenceOpacity, currentProps: { ...mergedProps }, 
         // Status bar props
         time: time, timeRight: timeRight, timeBottom: timeBottom, timeFontSize: timeFontSize, timeLetterSpacing: timeLetterSpacing, noNotisTop: noNotisTop, noNotisBottom: noNotisBottom, noNotisLeft: noNotisLeft, noNotisRight: noNotisRight, cellLevel: cellLevel, cell1Top: cell1Top, cell1Bottom: cell1Bottom, cell1Left: cell1Left, cell1Right: cell1Right, cell2Top: cell2Top, cell2Bottom: cell2Bottom, cell2Left: cell2Left, cell2Right: cell2Right, cell3Top: cell3Top, cell3Bottom: cell3Bottom, cell3Left: cell3Left, cell3Right: cell3Right, cell4Top: cell4Top, cell4Bottom: cell4Bottom, cell4Left: cell4Left, cell4Right: cell4Right, wifiTop: wifiTop, wifiBottom: wifiBottom, wifiLeft: wifiLeft, wifiRight: wifiRight, batteryTop: batteryTop, batteryBottom: batteryBottom, batteryLeft: batteryLeft, batteryRight: batteryRight, 
         // Home indicator props

package/dist/render/compositions/IMessageDmComposition/types.d.ts

@@ -4,6 +4,7 @@
  * Types for the iMessage DM conversation composition.
  */
 import { z } from 'zod';
+import type { DynamicCropConfig } from '../../types/crop';
 /** Message sender type */
 export type ImMessageSender = 'user' | 'recipient';
 /** Message in the conversation */
@@ -194,6 +195,8 @@ export interface IMessageDmCompositionProps {
     readReceiptLeft?: number;
     readReceiptRight?: number;
     messages?: ImMessage[];
+    /** Dynamic cropping configuration - crop output to DM element bounds */
+    dynamicCrop?: DynamicCropConfig;
 }
 /**
  * Zod schema for iMessage DM composition props (for Remotion)
@@ -391,6 +394,7 @@ export declare const iMessageDmPropsSchema: z.ZodObject<{
         imageUrl?: string | undefined;
         groupWithPrevious?: boolean | undefined;
     }>, "many">>;
+    dynamicCrop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
 }, "strip", z.ZodTypeAny, {
     backgroundColor?: string | undefined;
     lightMode?: boolean | undefined;
@@ -404,6 +408,7 @@ export declare const iMessageDmPropsSchema: z.ZodObject<{
         imageUrl?: string | undefined;
         groupWithPrevious?: boolean | undefined;
     }[] | undefined;
+    dynamicCrop?: Record<string, any> | undefined;
     width?: number | undefined;
     height?: number | undefined;
     fps?: number | undefined;
@@ -585,6 +590,7 @@ export declare const iMessageDmPropsSchema: z.ZodObject<{
         imageUrl?: string | undefined;
         groupWithPrevious?: boolean | undefined;
     }[] | undefined;
+    dynamicCrop?: Record<string, any> | undefined;
     width?: number | undefined;
     height?: number | undefined;
     fps?: number | undefined;

package/dist/render/compositions/IMessageDmComposition/types.js

@@ -222,4 +222,6 @@ exports.iMessageDmPropsSchema = zod_1.z.object({
         imageUrl: zod_1.z.string().optional(),
         groupWithPrevious: zod_1.z.boolean().optional(),
     })).optional(),
+    // Dynamic crop - crop output to element bounds
+    dynamicCrop: zod_1.z.record(zod_1.z.any()).optional(),
 });

package/dist/render/compositions/InstagramDmComposition/convertPublicToProps.js

@@ -126,6 +126,8 @@ function convertPublicToProps(input) {
         // Disable debug/reference overlays for production renders
         showDebugOverlay: false,
         showReferenceImage: false,
+        // Pass through dynamic crop if provided
+        dynamicCrop: input.dynamicCrop,
     };
     return props;
 }

package/dist/render/compositions/InstagramDmComposition/index.js

@@ -16,6 +16,8 @@ const ImageEditorComposition_1 = require("../ImageEditorComposition");
 const DmComposition_1 = require("../DmComposition");
 const theme_1 = require("./theme");
 const convertPropsToElements_1 = require("./convertPropsToElements");
+const positionResolver_1 = require("../../utils/positionResolver");
+const cropBounds_1 = require("../../utils/cropBounds");
 /**
  * Default composition props for registration
  */
@@ -268,11 +270,20 @@ function InstagramDmComposition(props) {
         };
         return (0, convertPropsToElements_1.convertPropsToElements)(propsWithThemeColors);
     }, [props, isLightMode, colors.recipientBubble, colors.headerBg, colors.divider, colors.footerBg]);
+    // Resolve element positions and compute crop bounds when dynamic crop enabled
+    const cropBounds = (0, react_1.useMemo)(() => {
+        const result = (0, positionResolver_1.resolveElementPositions)(elements, {});
+        const resolved = result.elements;
+        if (!(0, cropBounds_1.isDynamicCropEnabled)(props.dynamicCrop) || !resolved) {
+            return undefined;
+        }
+        return (0, cropBounds_1.calculateCropBounds)(resolved, props.dynamicCrop, width, height);
+    }, [elements, props.dynamicCrop, width, height]);
     // Compute effective colors based on theme
     const effectiveHomeIndicatorColor = isLightMode ? '#000000' : homeIndicatorColor;
     const effectiveStatusBarColor = isLightMode ? '#000000' : '#ffffff';
     const headerIconFilter = isLightMode ? 'invert(1)' : 'none';
-    return ((0, jsx_runtime_1.jsxs)(DmComposition_1.BaseDmComposition, { width: width, height: height, backgroundColor: colors.background, showDebugOverlay: showDebugOverlay, referenceImageUrl: referenceImageUrl, showReferenceImage: showReferenceImage, referenceOpacity: referenceOpacity, currentProps: { ...props }, 
+    return ((0, jsx_runtime_1.jsxs)(DmComposition_1.BaseDmComposition, { width: width, height: height, cropBounds: cropBounds, backgroundColor: colors.background, showDebugOverlay: showDebugOverlay, referenceImageUrl: referenceImageUrl, showReferenceImage: showReferenceImage, referenceOpacity: referenceOpacity, currentProps: { ...props }, 
         // Status bar props
         time: time, timeRight: timeRight, timeBottom: timeBottom, timeFontSize: timeFontSize, timeLetterSpacing: timeLetterSpacing, noNotisTop: noNotisTop, noNotisBottom: noNotisBottom, noNotisLeft: noNotisLeft, noNotisRight: noNotisRight, cellLevel: cellLevel, cell1Top: cell1Top, cell1Bottom: cell1Bottom, cell1Left: cell1Left, cell1Right: cell1Right, cell2Top: cell2Top, cell2Bottom: cell2Bottom, cell2Left: cell2Left, cell2Right: cell2Right, cell3Top: cell3Top, cell3Bottom: cell3Bottom, cell3Left: cell3Left, cell3Right: cell3Right, cell4Top: cell4Top, cell4Bottom: cell4Bottom, cell4Left: cell4Left, cell4Right: cell4Right, wifiTop: wifiTop, wifiBottom: wifiBottom, wifiLeft: wifiLeft, wifiRight: wifiRight, batteryTop: batteryTop, batteryBottom: batteryBottom, batteryLeft: batteryLeft, batteryRight: batteryRight, 
         // Home indicator props

package/dist/render/compositions/InstagramDmComposition/types.d.ts

@@ -3,6 +3,7 @@
  *
  * Minimal types for the stripped-down composition.
  */
+import type { DynamicCropConfig } from '../../types/crop';
 /** Instagram theme - light or dark mode */
 export type IgTheme = 'light' | 'dark';
 /** Message sender type */
@@ -212,4 +213,6 @@ export interface InstagramDmCompositionProps {
     dividerLineY?: number;
     dividerLineColor?: string;
     headerBackgroundColor?: string;
+    /** Dynamic cropping configuration - crop output to element bounds */
+    dynamicCrop?: DynamicCropConfig;
 }

package/dist/render/types/instagram-dm-public.d.ts

@@ -4,6 +4,7 @@
  * These are the types exposed to users via the automation node.
  * They provide a simpler interface than the full InstagramDmCompositionProps.
  */
+import type { DynamicCropConfig } from './crop';
 /** Message sender side */
 export type IgDmSender = 'user' | 'recipient';
 /** Theme for the DM composition */
@@ -57,4 +58,6 @@ export interface InstagramDmPublicInput {
      * Required if any message has isStoryReply=true.
      */
     storyImageUrl?: string;
+    /** Dynamic cropping configuration - crop output to DM element bounds */
+    dynamicCrop?: DynamicCropConfig;
 }

package/dist/render.d.ts

@@ -100,6 +100,8 @@ export interface SubmitInstagramDmRenderJobParams {
     messages: CreateDmMessage[];
     /** Image attachment URL (used for story reply) */
     imageAttachmentUrl?: string;
+    /** Dynamic crop configuration - crop output to DM element bounds */
+    dynamicCrop?: import('./render/types/crop').DynamicCropConfig;
 }
 interface ImDmMessageInternal {
     id: string;
@@ -132,6 +134,8 @@ export interface SubmitIMessageDmRenderJobParams {
     unreadBadgeText?: string;
     /** Message header timestamp text (e.g., "Today 2:15 PM") */
     messageHeaderTimestampText?: string;
+    /** Dynamic crop configuration - crop output to DM element bounds */
+    dynamicCrop?: import('./render/types/crop').DynamicCropConfig;
 }
 /**
  * Submit an image render job to the Modal renderer.

package/dist/render.js

@@ -314,6 +314,7 @@ async function submitInstagramDmRenderJob(params) {
                         theme: params.theme,
                         messages: transformedMessages,
                         storyImageUrl: hasStoryReply ? params.imageAttachmentUrl : undefined,
+                        dynamicCrop: params.dynamicCrop,
                     },
                 },
                 output_type: 'image',
@@ -362,6 +363,7 @@ async function submitIMessageDmRenderJob(params) {
                         readReceiptText: params.readReceiptText,
                         unreadBadgeText: params.unreadBadgeText,
                         messageHeaderTimestampText: params.messageHeaderTimestampText,
+                        dynamicCrop: params.dynamicCrop,
                     },
                 },
                 output_type: 'image',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.5.43",
+  "version": "4.5.44",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",