ugcinc-render 1.8.222 → 1.8.224

package/dist/index.d.mts

@@ -941,8 +941,33 @@ interface InstagramDmCompositionProps {
     headerBackgroundColor?: string;
     /** Dynamic cropping configuration - crop output to element bounds */
     dynamicCrop?: DynamicCropConfig;
+    /** Center the crop container vertically within the canvas (for preview display) */
+    cropVerticalCenter?: boolean;
 }
 
+/**
+ * Convert InstagramDmComposition props to ImageEditorElements
+ *
+ * This module transforms the IG DM composition props into an array of
+ * ImageEditorElements that can be rendered by ImageEditorComposition.
+ */
+
+/**
+ * Result of converting props to elements
+ */
+interface ConversionResult$1 {
+    /** Elements to render via ImageEditorComposition */
+    elements: ImageEditorElement[];
+    /** Image URLs keyed by inputId */
+    imageUrls: Record<string, string>;
+}
+/**
+ * Convert InstagramDmComposition props to ImageEditorElements
+ *
+ * This is the main entry point that orchestrates all element generation.
+ */
+declare function convertPropsToElements$1(props: InstagramDmCompositionProps): ConversionResult$1;
+
 /**
  * Default composition props for registration
  */
@@ -1177,7 +1202,34 @@ interface IMessageDmCompositionProps {
     messages?: ImMessage[];
     /** Dynamic cropping configuration - crop output to DM element bounds */
     dynamicCrop?: DynamicCropConfig;
+    /** Center the crop container vertically within the canvas (for preview display) */
+    cropVerticalCenter?: boolean;
+}
+
+/**
+ * Convert iMessage DM Composition props to ImageEditorElements
+ *
+ * This module transforms the composition props into renderable message elements.
+ * Header, footer, and status bar elements are rendered directly in the composition JSX.
+ */
+
+/** Tail render data for SVG rendering */
+interface TailRenderData {
+    id: string;
+    isUser: boolean;
+    messageLeft: number;
+    messageRight: number;
+    messageBottom: number;
+}
+/** Result of converting props to elements */
+interface ConversionResult {
+    elements: ImageEditorElement[];
+    imageUrls: Record<string, string>;
+    tails: TailRenderData[];
+    width: number;
+    height: number;
 }
+declare function convertPropsToElements(props: IMessageDmCompositionProps): ConversionResult;
 
 /**
  * iMessage DM Composition
@@ -1203,6 +1255,8 @@ interface BaseDmCompositionProps {
     height: number;
     /** When set, crop output to these bounds (for dynamic crop) */
     cropBounds?: CropBounds;
+    /** Center the crop container vertically within the canvas (preview only — actual renders use calculateMetadata for output dimensions) */
+    cropVerticalCenter?: boolean;
     /** Background color */
     backgroundColor: string;
     /** Show debug overlay with crosshair and coordinates */
@@ -1300,7 +1354,7 @@ interface BaseDmCompositionProps {
     /** Status bar elements color (time, cell bars, icons) - defaults to white */
     statusBarColor?: string;
 }
-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): react_jsx_runtime.JSX.Element | null;
+declare function BaseDmComposition({ width, height, cropBounds, cropVerticalCenter, 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): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Debug Overlay Component
@@ -1809,4 +1863,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, DeduplicationPreview, type DeduplicationPreviewProps, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, DeduplicationPreview, type DeduplicationPreviewProps, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPropsToElements as convertIMessagePropsToElements, convertPropsToElements$1 as convertInstagramPropsToElements, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };

package/dist/index.d.ts

@@ -941,8 +941,33 @@ interface InstagramDmCompositionProps {
     headerBackgroundColor?: string;
     /** Dynamic cropping configuration - crop output to element bounds */
     dynamicCrop?: DynamicCropConfig;
+    /** Center the crop container vertically within the canvas (for preview display) */
+    cropVerticalCenter?: boolean;
 }
 
+/**
+ * Convert InstagramDmComposition props to ImageEditorElements
+ *
+ * This module transforms the IG DM composition props into an array of
+ * ImageEditorElements that can be rendered by ImageEditorComposition.
+ */
+
+/**
+ * Result of converting props to elements
+ */
+interface ConversionResult$1 {
+    /** Elements to render via ImageEditorComposition */
+    elements: ImageEditorElement[];
+    /** Image URLs keyed by inputId */
+    imageUrls: Record<string, string>;
+}
+/**
+ * Convert InstagramDmComposition props to ImageEditorElements
+ *
+ * This is the main entry point that orchestrates all element generation.
+ */
+declare function convertPropsToElements$1(props: InstagramDmCompositionProps): ConversionResult$1;
+
 /**
  * Default composition props for registration
  */
@@ -1177,7 +1202,34 @@ interface IMessageDmCompositionProps {
     messages?: ImMessage[];
     /** Dynamic cropping configuration - crop output to DM element bounds */
     dynamicCrop?: DynamicCropConfig;
+    /** Center the crop container vertically within the canvas (for preview display) */
+    cropVerticalCenter?: boolean;
+}
+
+/**
+ * Convert iMessage DM Composition props to ImageEditorElements
+ *
+ * This module transforms the composition props into renderable message elements.
+ * Header, footer, and status bar elements are rendered directly in the composition JSX.
+ */
+
+/** Tail render data for SVG rendering */
+interface TailRenderData {
+    id: string;
+    isUser: boolean;
+    messageLeft: number;
+    messageRight: number;
+    messageBottom: number;
+}
+/** Result of converting props to elements */
+interface ConversionResult {
+    elements: ImageEditorElement[];
+    imageUrls: Record<string, string>;
+    tails: TailRenderData[];
+    width: number;
+    height: number;
 }
+declare function convertPropsToElements(props: IMessageDmCompositionProps): ConversionResult;
 
 /**
  * iMessage DM Composition
@@ -1203,6 +1255,8 @@ interface BaseDmCompositionProps {
     height: number;
     /** When set, crop output to these bounds (for dynamic crop) */
     cropBounds?: CropBounds;
+    /** Center the crop container vertically within the canvas (preview only — actual renders use calculateMetadata for output dimensions) */
+    cropVerticalCenter?: boolean;
     /** Background color */
     backgroundColor: string;
     /** Show debug overlay with crosshair and coordinates */
@@ -1300,7 +1354,7 @@ interface BaseDmCompositionProps {
     /** Status bar elements color (time, cell bars, icons) - defaults to white */
     statusBarColor?: string;
 }
-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): react_jsx_runtime.JSX.Element | null;
+declare function BaseDmComposition({ width, height, cropBounds, cropVerticalCenter, 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): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Debug Overlay Component
@@ -1809,4 +1863,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, DeduplicationPreview, type DeduplicationPreviewProps, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };
+export { type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseBubbleStyle, BaseDmComposition, type BaseDmCompositionProps, type BaseEditorConfig, type BaseMessage, type BaseMessageType, type BaseSegment, type BlendMode, BorderRadiusConfig, type BubbleRadii, CaptionOverlay, CaptionOverlayProps, type Channel, type ColorFilterConfig, type ColorShiftConfig, CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DebugOverlay, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, DeduplicationPreview, type DeduplicationPreviewProps, type DiagonalFilterConfig, type DiagonalFilterType, DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FitMode, FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientColor, type GradientOverlayConfig, IMessageDmComposition, type IMessageDmCompositionProps, type IgDmMessage, type IgDmSender, type IgDmTheme, type IgTheme, type ImMessage, type ImMessageSender, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, ImageEditorElement, ImageElement, type ImageElementProps, type ImageMessage, type ImageSegment, type ImageSequenceSegment, InstagramDmComposition, type InstagramDmCompositionProps, type InstagramDmPublicInput, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, MediaBubble, type MediaBubbleProps, type Message, MessageBubble, type MessageBubbleProps, type MessageGroup, type MessageOrTyping, type MessagePosition, type MessageReaction, type MessageSender, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, PositionResolutionResult, type PositionedMessage, ProfilePic, type ProfilePicProps, Reaction, type ReactionProps, type ReadReceipt, type ReadReceiptState, RelativePositionConfigX, RelativePositionConfigY, RenderRoot, ScreenshotAnimation, ScreenshotAnimationProps, type Segment, SegmentType, type SpeedConfig, type StaticSegment, TYPING_ANIMATION, TextElement, type TextElementProps, type TextMessage, type TextSegment, TextStyleProperties, TimeValue, type TraceRemovalConfig, TypingIndicator, type TypingIndicatorProps, type TypingIndicatorStyle, type TypingMessage, type UserProfile, type ValidationError, type VideoCodec, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VideoSequenceSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, bubbleRadiiToCss, calculateBubbleRadii, convertPropsToElements as convertIMessagePropsToElements, convertPropsToElements$1 as convertInstagramPropsToElements, convertPublicToProps, defaultIMessageDmProps, defaultInstagramDmProps, flattenGroups, groupMessages, isDeduplicationLevel, resolveDeduplicationConfig, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, validatePublicInput };

package/dist/index.js

@@ -83,6 +83,8 @@ __export(index_exports, {
   calculateScreenshotAnimationDuration: () => calculateScreenshotAnimationDuration,
   calculateTimelineContentEnd: () => calculateTimelineContentEnd,
   canSetAsReference: () => canSetAsReference,
+  convertIMessagePropsToElements: () => convertPropsToElements2,
+  convertInstagramPropsToElements: () => convertPropsToElements,
   convertPublicToProps: () => convertPublicToProps,
   debugFontStatus: () => debugFontStatus,
   defaultIMessageDmProps: () => defaultIMessageDmProps,
@@ -3327,6 +3329,7 @@ function BaseDmComposition({
   width,
   height,
   cropBounds,
+  cropVerticalCenter = false,
   backgroundColor,
   showDebugOverlay = false,
   referenceImageUrl,
@@ -3425,6 +3428,7 @@ function BaseDmComposition({
   const cropOffsetY = cropBounds?.y ?? 0;
   const contentWidth = cropBounds ? cropBounds.width : width;
   const contentHeight = cropBounds ? cropBounds.height : height;
+  const cropContainerTop = cropBounds && cropVerticalCenter ? Math.round((height - contentHeight) / 2) : 0;
   const isStatusBarDark = statusBarColor === "#000000" || statusBarColor === "#000" || statusBarColor.toLowerCase() === "black";
   const iconFilter = isStatusBarDark ? "invert(1)" : "none";
   const cellBarActiveColor = statusBarColor;
@@ -3445,7 +3449,7 @@ function BaseDmComposition({
           {
             style: {
               position: "absolute",
-              top: 0,
+              top: cropContainerTop,
               left: 0,
               width: contentWidth,
               height: contentHeight,
@@ -5203,6 +5207,7 @@ function InstagramDmComposition(props) {
       width,
       height,
       cropBounds,
+      cropVerticalCenter: props.cropVerticalCenter,
       backgroundColor: colors.background,
       showDebugOverlay,
       referenceImageUrl,
@@ -5879,7 +5884,7 @@ function generateMessageElements2(props, calculatedMessages) {
       zIndex: 5 + i,
       text: textContent,
       font: "apple",
-      fontWeight: 400,
+      fontWeight: "normal",
       fontSize: messageFontSize,
       letterSpacing: messageLetterSpacing,
       lineHeight: lineHeightMultiplier,
@@ -5952,7 +5957,7 @@ function generateHeaderTextElements(props, calculatedMessages) {
     zIndex: 4,
     text: messageHeaderTimestampText,
     font: "apple",
-    fontWeight: 400,
+    fontWeight: "normal",
     fontSize: messageHeaderFontSize,
     letterSpacing: messageHeaderLetterSpacing,
     color: messageHeaderTextColor,
@@ -5971,7 +5976,7 @@ function generateHeaderTextElements(props, calculatedMessages) {
     zIndex: 4,
     text: messageHeaderImessageText,
     font: "apple",
-    fontWeight: 400,
+    fontWeight: "normal",
     fontSize: messageHeaderFontSize,
     letterSpacing: messageHeaderLetterSpacing,
     color: messageHeaderTextColor,
@@ -6014,7 +6019,7 @@ function generateReadReceiptElement(props, calculatedMessages) {
     zIndex: 4,
     text: readReceiptText,
     font: "apple",
-    fontWeight: 600,
+    fontWeight: "bold",
     fontSize: readReceiptFontSize,
     letterSpacing: readReceiptLetterSpacing,
     color: readReceiptColor,
@@ -6473,6 +6478,7 @@ var IMessageDmComposition = (props) => {
       width,
       height,
       cropBounds,
+      cropVerticalCenter: mergedProps.cropVerticalCenter,
       backgroundColor: effectiveBackgroundColor,
       showDebugOverlay,
       referenceImageUrl,
@@ -8154,7 +8160,8 @@ var iMessageDmPropsSchema = import_zod.z.object({
     groupWithPrevious: import_zod.z.boolean().optional()
   })).optional(),
   // Dynamic crop - crop output to element bounds
-  dynamicCrop: import_zod.z.record(import_zod.z.any()).optional()
+  dynamicCrop: import_zod.z.record(import_zod.z.any()).optional(),
+  cropVerticalCenter: import_zod.z.boolean().optional()
 });
 
 // src/Root.tsx
@@ -8821,6 +8828,8 @@ var RenderRoot = () => {
   calculateScreenshotAnimationDuration,
   calculateTimelineContentEnd,
   canSetAsReference,
+  convertIMessagePropsToElements,
+  convertInstagramPropsToElements,
   convertPublicToProps,
   debugFontStatus,
   defaultIMessageDmProps,

package/dist/index.mjs

@@ -2361,6 +2361,7 @@ function BaseDmComposition({
   width,
   height,
   cropBounds,
+  cropVerticalCenter = false,
   backgroundColor,
   showDebugOverlay = false,
   referenceImageUrl,
@@ -2459,6 +2460,7 @@ function BaseDmComposition({
   const cropOffsetY = cropBounds?.y ?? 0;
   const contentWidth = cropBounds ? cropBounds.width : width;
   const contentHeight = cropBounds ? cropBounds.height : height;
+  const cropContainerTop = cropBounds && cropVerticalCenter ? Math.round((height - contentHeight) / 2) : 0;
   const isStatusBarDark = statusBarColor === "#000000" || statusBarColor === "#000" || statusBarColor.toLowerCase() === "black";
   const iconFilter = isStatusBarDark ? "invert(1)" : "none";
   const cellBarActiveColor = statusBarColor;
@@ -2479,7 +2481,7 @@ function BaseDmComposition({
           {
             style: {
               position: "absolute",
-              top: 0,
+              top: cropContainerTop,
               left: 0,
               width: contentWidth,
               height: contentHeight,
@@ -4237,6 +4239,7 @@ function InstagramDmComposition(props) {
       width,
       height,
       cropBounds,
+      cropVerticalCenter: props.cropVerticalCenter,
       backgroundColor: colors.background,
       showDebugOverlay,
       referenceImageUrl,
@@ -4913,7 +4916,7 @@ function generateMessageElements2(props, calculatedMessages) {
       zIndex: 5 + i,
       text: textContent,
       font: "apple",
-      fontWeight: 400,
+      fontWeight: "normal",
       fontSize: messageFontSize,
       letterSpacing: messageLetterSpacing,
       lineHeight: lineHeightMultiplier,
@@ -4986,7 +4989,7 @@ function generateHeaderTextElements(props, calculatedMessages) {
     zIndex: 4,
     text: messageHeaderTimestampText,
     font: "apple",
-    fontWeight: 400,
+    fontWeight: "normal",
     fontSize: messageHeaderFontSize,
     letterSpacing: messageHeaderLetterSpacing,
     color: messageHeaderTextColor,
@@ -5005,7 +5008,7 @@ function generateHeaderTextElements(props, calculatedMessages) {
     zIndex: 4,
     text: messageHeaderImessageText,
     font: "apple",
-    fontWeight: 400,
+    fontWeight: "normal",
     fontSize: messageHeaderFontSize,
     letterSpacing: messageHeaderLetterSpacing,
     color: messageHeaderTextColor,
@@ -5048,7 +5051,7 @@ function generateReadReceiptElement(props, calculatedMessages) {
     zIndex: 4,
     text: readReceiptText,
     font: "apple",
-    fontWeight: 600,
+    fontWeight: "bold",
     fontSize: readReceiptFontSize,
     letterSpacing: readReceiptLetterSpacing,
     color: readReceiptColor,
@@ -5507,6 +5510,7 @@ var IMessageDmComposition = (props) => {
       width,
       height,
       cropBounds,
+      cropVerticalCenter: mergedProps.cropVerticalCenter,
       backgroundColor: effectiveBackgroundColor,
       showDebugOverlay,
       referenceImageUrl,
@@ -6902,7 +6906,8 @@ var iMessageDmPropsSchema = z.object({
     groupWithPrevious: z.boolean().optional()
   })).optional(),
   // Dynamic crop - crop output to element bounds
-  dynamicCrop: z.record(z.any()).optional()
+  dynamicCrop: z.record(z.any()).optional(),
+  cropVerticalCenter: z.boolean().optional()
 });
 
 // src/Root.tsx
@@ -7568,6 +7573,8 @@ export {
   calculateScreenshotAnimationDuration,
   calculateTimelineContentEnd,
   canSetAsReference,
+  convertPropsToElements2 as convertIMessagePropsToElements,
+  convertPropsToElements as convertInstagramPropsToElements,
   convertPublicToProps,
   debugFontStatus,
   defaultIMessageDmProps,

package/package.json

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