ugcinc 3.84.5 → 3.85.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { StatsClient } from './stats';
 export { OrganizationClient } from './org';
 export { RenderClient } from './render';
 export { AutomationsClient, getAllNodes, getNodeByType, getOutputSchema } from './automations';
+export { NodeTypes, isAsyncExecutor, isEditModel, isImageToVideoModel } from './types';
 export type { PropertySchema } from './automations';
 export { portId, isValidPortId, portIdToTitle, normalizeToPortId, PortIdSchema } from './port-id';
 export type { PortId } from './port-id';
@@ -18,4 +19,4 @@ export { MediaClient } from './media';
 export { CommentsClient } from './comments';
 export type { RenderJobResponse, RenderJobStatus, SubmitImageRenderJobParams, SubmitVideoRenderJobParams, SubmitScreenshotAnimationRenderJobParams, SubmitInstagramDmRenderJobParams, SubmitIMessageDmRenderJobParams, IgDmMessage, ImDmMessage, RenderVideoEditorConfig, } from './render';
 export type { ClientConfig, } from './base';
-export type { SuccessResponse, ErrorResponse, ApiResponse, Account, AccountStat, AccountTask, EditProfileInfo, Task, TaskType, Post, PostType, PostStatus, PostStat, ApiKey, EditorConfig, VideoEditorNodeConfig, VideoEditorChannel, VideoEditorSegment, VideoEditorVideoSegment, VideoEditorAudioSegment, VideoEditorImageSegment, VideoEditorTextSegment, TimeMode, SegmentTimelinePosition, ImageEditorNodeConfig, ImageEditorElement, ImageEditorNodeInput, ImageEditorNodeOutput, DimensionPresetKey, EditorChannel, TimeValue, BaseSegmentProps, VisualSegmentProps, EditorSegment, VideoSegment, AudioSegment, ImageSegment, TextSegment, StaticSegment, PositionAnchor, RelativePositionConfig, GetAccountsParams, GetAccountStatsParams, GetAccountStatusParams, UpdateAccountInfoParams, UpdateAccountSocialParams, GetTasksParams, GetPostsParams, CreateSlideshowParams, GetPostStatsParams, GetPostStatusParams, CreateVideoParams, RefreshStatsParams, RefreshStatsResponse, RefreshStatsError, DailyAggregatedStat, GetDailyAggregatedStatsParams, DailyPostStat, GetDailyPostStatsParams, TopAccount, GetTopAccountsParams, TopPost, GetTopPostsParams, MediaType, NodePort, ResolvedPorts, NodeControlConfig, NodeTypeEnum, WorkflowNodeDefinition, WorkflowDefinition, CanvasState, TemplateNode, AutomationTemplate, AutomationRun, NodeRun, ExecutorNode, ExecutionEdge, OutputSchemaProperty, SelectionMode, ExhaustionBehavior, SelectionConfig, SelectionState, OutputMode, NodeOutputValues, OutputInput, OutputNodeConfig, ObjectSchemaFieldLevel3, ObjectSchemaFieldLevel2, ObjectSchemaField, ManualTriggerOutput, ManualTriggerNodeConfig, TriggerIterationMode, IterationExhaustionBehavior, CollectionSelectionMode, TriggerCollectionConfig, DayOfWeek, RecurrenceMediaOutput, RecurrenceMediaConfig, RecurrenceNodeConfig, AccountNodeConfig, MediaNodeEnabledType, RecurrenceMediaEnabledType, MediaNodeOutput, MediaNodeConfig, PostSchedulingMode, PostSchedulingConfig, AutoPostMode, AutoPostInputType, AutoPostInput, AutoPostNodeConfig, SaveToMediaInput, SaveToMediaNodeConfig, DeduplicateNodeConfig, ForEachOutputProperty, ForEachInputPort, ForEachNodeConfig, RandomValueType, RandomInputPort, RandomNodeMode, RandomNodeConfig, IfLogicOperator, IfBooleanInput, IfPassthroughInput, IfNodeConfig, RandomRouteBranch, RandomRoutePassthroughInput, RandomRouteObjectField, RandomRouteNodeConfig, BranchDefinition, BranchValueConfig, BranchPassthroughInput, BranchNodeConfig, VideoImportPlatform, VideoImportQuality, VideoImportNodeConfig, AutoCaptionPreset, AutoCaptionFontWeight, AutoCaptionPosition, AutoCaptionNodeConfig, ScreenshotAnimationNodeConfig, CreateDmMessage, CreateDmNodeConfig, DestructureSelection, DestructureNodeConfig, VideoGenerationNodeConfig, ArrayType, PortType, LLMOutputField, LLMNodeConfig, UserMedia, SocialAudio, Media, MediaUse, GetMediaParams, CreateSocialAudioParams, UploadMediaParams, UploadMediaResponse, UpdateMediaTagParams, DeleteMediaParams, DeleteMediaResponse, CreateMediaFromUrlParams, ImportTextParams, ImportTextResponse, GetMediaUseParams, GetMediaUseResponse, Comment, CommentStatus, CreateCommentParams, CreateCommentResponse, GetCommentsParams, ValidationErrorType, ValidationError, ExportedNode, ExportedConnection, ExportedTemplate, AutomationExport, ExportedExecutor, ExportedEdge, ExportedRun, AutomationRunExport, } from './types';
+export type { SuccessResponse, ErrorResponse, ApiResponse, Account, AccountStat, AccountTask, EditProfileInfo, Task, TaskType, Post, PostType, PostStatus, PostStat, ApiKey, EditorConfig, VideoEditorNodeConfig, VideoEditorChannel, VideoEditorSegment, VideoEditorVideoSegment, VideoEditorAudioSegment, VideoEditorImageSegment, VideoEditorTextSegment, TimeMode, SegmentTimelinePosition, ImageEditorNodeConfig, ImageEditorElement, ImageEditorNodeInput, ImageEditorNodeOutput, VideoEditorNodeInput, DimensionPresetKey, EditorChannel, TimeValue, BaseSegmentProps, VisualSegmentProps, EditorSegment, VideoSegment, AudioSegment, ImageSegment, TextSegment, StaticSegment, PositionAnchor, RelativePositionConfig, GetAccountsParams, GetAccountStatsParams, GetAccountStatusParams, UpdateAccountInfoParams, UpdateAccountSocialParams, GetTasksParams, GetPostsParams, CreateSlideshowParams, GetPostStatsParams, GetPostStatusParams, CreateVideoParams, RefreshStatsParams, RefreshStatsResponse, RefreshStatsError, DailyAggregatedStat, GetDailyAggregatedStatsParams, DailyPostStat, GetDailyPostStatsParams, TopAccount, GetTopAccountsParams, TopPost, GetTopPostsParams, MediaType, NodePort, ResolvedPort, ResolvedPorts, NodeControlConfig, NodeTypeEnum, WorkflowNodeDefinition, WorkflowDefinition, CanvasState, TemplateNode, AutomationTemplate, AutomationRun, NodeRun, ExecutorNode, ExecutionEdge, OutputSchemaProperty, SelectionMode, ExhaustionBehavior, SelectionConfig, SelectionState, OutputMode, NodeOutputValues, OutputInput, OutputNodeConfig, ObjectSchemaFieldLevel3, ObjectSchemaFieldLevel2, ObjectSchemaField, ManualTriggerOutput, ManualTriggerNodeConfig, TriggerIterationMode, IterationExhaustionBehavior, CollectionSelectionMode, TriggerCollectionConfig, DayOfWeek, RecurrenceMediaOutput, RecurrenceMediaConfig, RecurrenceNodeConfig, AccountNodeConfig, MediaNodeEnabledType, RecurrenceMediaEnabledType, MediaNodeOutput, MediaNodeConfig, PostSchedulingMode, PostSchedulingConfig, AutoPostMode, AutoPostInputType, AutoPostInput, AutoPostNodeConfig, SaveToMediaInput, SaveToMediaNodeConfig, DeduplicateNodeConfig, ForEachOutputProperty, ForEachInputPort, ForEachNodeConfig, RandomValueType, RandomInputPort, RandomNodeMode, RandomNodeConfig, IfLogicOperator, IfBooleanInput, IfPassthroughInput, IfNodeConfig, RandomRouteBranch, RandomRoutePassthroughInput, RandomRouteObjectField, RandomRouteNodeConfig, BranchDefinition, BranchValueConfig, BranchPassthroughInput, BranchNodeConfig, VideoImportPlatform, VideoImportQuality, VideoImportNodeConfig, AutoCaptionPreset, AutoCaptionFontWeight, AutoCaptionPosition, AutoCaptionNodeConfig, ScreenshotAnimationNodeConfig, CreateDmMessage, CreateDmNodeConfig, DestructureSelection, DestructureNodeConfig, ImageGenerationTextModel, ImageGenerationEditModel, ImageGenerationModel, ImageGenerationNodeConfig, CustomModelParamType, CustomModelInputParam, CustomModelNodeConfig, VideoGenerationTextToVideoModel, VideoGenerationImageToVideoModel, VideoGenerationModel, VideoGenerationNodeConfig, ArrayType, PortType, LLMOutputField, LLMApiKeys, LLMNodeConfig, UserMedia, SocialAudio, Media, MediaUse, GetMediaParams, CreateSocialAudioParams, UploadMediaParams, UploadMediaResponse, UpdateMediaTagParams, DeleteMediaParams, DeleteMediaResponse, CreateMediaFromUrlParams, ImportTextParams, ImportTextResponse, GetMediaUseParams, GetMediaUseResponse, FilterMediaParams, FilterMediaResponse, Comment, CommentStatus, CreateCommentParams, CreateCommentResponse, GetCommentsParams, ValidationErrorType, ValidationError, ExportedNode, ExportedConnection, ExportedTemplate, AutomationExport, ExportedExecutor, ExportedEdge, ExportedRun, AutomationRunExport, AccountData, FlowControlOutput, NodeType, ExecutorContext, NodeExecutor, ExecutorAsyncJobStatus, AsyncNodeExecutor, } from './types';

package/dist/index.js

@@ -5,7 +5,7 @@
  * Official TypeScript/JavaScript client for the UGC Inc API
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommentsClient = exports.MediaClient = exports.PortIdSchema = exports.normalizeToPortId = exports.portIdToTitle = exports.isValidPortId = exports.portId = exports.getOutputSchema = exports.getNodeByType = exports.getAllNodes = exports.AutomationsClient = exports.RenderClient = exports.OrganizationClient = exports.StatsClient = exports.PostsClient = exports.TasksClient = exports.AccountsClient = exports.UGCClient = void 0;
+exports.CommentsClient = exports.MediaClient = exports.PortIdSchema = exports.normalizeToPortId = exports.portIdToTitle = exports.isValidPortId = exports.portId = exports.isImageToVideoModel = exports.isEditModel = exports.isAsyncExecutor = exports.NodeTypes = exports.getOutputSchema = exports.getNodeByType = exports.getAllNodes = exports.AutomationsClient = exports.RenderClient = exports.OrganizationClient = exports.StatsClient = exports.PostsClient = exports.TasksClient = exports.AccountsClient = exports.UGCClient = void 0;
 var client_1 = require("./client");
 Object.defineProperty(exports, "UGCClient", { enumerable: true, get: function () { return client_1.UGCClient; } });
 var accounts_1 = require("./accounts");
@@ -25,6 +25,11 @@ Object.defineProperty(exports, "AutomationsClient", { enumerable: true, get: fun
 Object.defineProperty(exports, "getAllNodes", { enumerable: true, get: function () { return automations_1.getAllNodes; } });
 Object.defineProperty(exports, "getNodeByType", { enumerable: true, get: function () { return automations_1.getNodeByType; } });
 Object.defineProperty(exports, "getOutputSchema", { enumerable: true, get: function () { return automations_1.getOutputSchema; } });
+var types_1 = require("./types");
+Object.defineProperty(exports, "NodeTypes", { enumerable: true, get: function () { return types_1.NodeTypes; } });
+Object.defineProperty(exports, "isAsyncExecutor", { enumerable: true, get: function () { return types_1.isAsyncExecutor; } });
+Object.defineProperty(exports, "isEditModel", { enumerable: true, get: function () { return types_1.isEditModel; } });
+Object.defineProperty(exports, "isImageToVideoModel", { enumerable: true, get: function () { return types_1.isImageToVideoModel; } });
 var port_id_1 = require("./port-id");
 Object.defineProperty(exports, "portId", { enumerable: true, get: function () { return port_id_1.portId; } });
 Object.defineProperty(exports, "isValidPortId", { enumerable: true, get: function () { return port_id_1.isValidPortId; } });

package/dist/media.d.ts

@@ -1,5 +1,5 @@
 import { BaseClient } from './base';
-import type { Media, SocialAudio, GetMediaParams, GetSocialAudioParams, UploadMediaResponse, UpdateMediaTagParams, UpdateMediaTagsParams, UpdateMediaTagsResponse, DeleteMediaParams, DeleteMediaResponse, CreateMediaFromUrlParams, CreateSocialAudioParams, GetUploadTokenParams, UploadTokenResponse, ImportTextParams, ImportTextResponse, GetMediaUseParams, GetMediaUseResponse, ApiResponse } from './types';
+import type { Media, SocialAudio, GetMediaParams, GetSocialAudioParams, UploadMediaResponse, UpdateMediaTagParams, UpdateMediaTagsParams, UpdateMediaTagsResponse, DeleteMediaParams, DeleteMediaResponse, CreateMediaFromUrlParams, CreateSocialAudioParams, GetUploadTokenParams, UploadTokenResponse, ImportTextParams, ImportTextResponse, GetMediaUseParams, GetMediaUseResponse, FilterMediaParams, FilterMediaResponse, ApiResponse } from './types';
 /**
  * Client for managing media files
  */
@@ -59,4 +59,13 @@ export declare class MediaClient extends BaseClient {
      * @param params.name - Use case identifier (e.g., "klipy")
      */
     getMediaUse(params: GetMediaUseParams): Promise<ApiResponse<GetMediaUseResponse>>;
+    /**
+     * Filter source IDs by usage status
+     * Returns which source IDs are available (not used) vs already used
+     * When orgId is set on the client, filters by that org only
+     * When orgId is not set, checks globally across all orgs
+     * @param params.source_ids - Array of source IDs to check
+     * @param params.name - Use case identifier (e.g., "profile_picture")
+     */
+    filter(params: FilterMediaParams): Promise<ApiResponse<FilterMediaResponse>>;
 }

package/dist/media.js

@@ -81,5 +81,16 @@ class MediaClient extends base_1.BaseClient {
     async getMediaUse(params) {
         return this.post('/media/use', params);
     }
+    /**
+     * Filter source IDs by usage status
+     * Returns which source IDs are available (not used) vs already used
+     * When orgId is set on the client, filters by that org only
+     * When orgId is not set, checks globally across all orgs
+     * @param params.source_ids - Array of source IDs to check
+     * @param params.name - Use case identifier (e.g., "profile_picture")
+     */
+    async filter(params) {
+        return this.post('/media/filter', params);
+    }
 }
 exports.MediaClient = MediaClient;

package/dist/render/Root.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Render Root Component
+ *
+ * This file registers all available compositions with the renderer.
+ * It serves as the entry point for the renderer bundler.
+ *
+ * Uses calculateMetadata for ImageEditorComposition to determine
+ * dynamic crop dimensions in the browser environment (with DOM access).
+ */
+import React from 'react';
+export declare const RenderRoot: React.FC;
+export default RenderRoot;

package/dist/render/Root.js

@@ -0,0 +1,508 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const zod_1 = require("zod");
+const ImageEditorComposition_1 = require("./compositions/ImageEditorComposition");
+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 IMessageDmComposition_1 = require("./compositions/IMessageDmComposition");
+const types_1 = require("./compositions/IMessageDmComposition/types");
+const positionResolver_1 = require("./utils/positionResolver");
+const cropBounds_1 = require("./utils/cropBounds");
+const fonts_1 = require("./utils/fonts");
+// Default props for registration (actual props passed at render time)
+const defaultImageProps = {
+    config: {
+        width: 1080,
+        height: 1920,
+        fps: 1,
+        channels: [],
+    },
+    sources: {},
+    scale: 1,
+};
+const defaultVideoProps = {
+    config: {
+        width: 1080,
+        height: 1920,
+        fps: 30,
+        channels: [],
+    },
+    sources: {},
+    scale: 1,
+};
+const defaultAutoCaptionProps = {
+    videoUrl: '',
+    width: 1080,
+    height: 1920,
+    durationMs: 1000,
+    captions: [],
+    style: {
+        fontName: 'Montserrat',
+        fontSize: 80,
+        fontWeight: 'black',
+        fontColor: '#FFFFFF',
+        highlightColor: '#FFFF00',
+        strokeColor: '#000000',
+        strokeWidth: 3,
+        position: 'bottom',
+        yOffset: 100,
+        maxWidth: 90,
+        enableAnimation: true,
+        wordsPerPage: 3,
+    },
+};
+const defaultScreenshotAnimationProps = {
+    imageUrl: 'https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3163-RY0CFNrbnSnqZpaJzi9VdslzfYLLKf.png',
+    width: 1206,
+    height: 2622,
+    pauseDurationMs: 1000,
+    flashDurationMs: 255,
+    holdDurationMs: 500,
+    borderRadius: 35,
+    borderColor: 'rgba(254, 255, 255, 1)',
+    backgroundColor: '#000000',
+};
+const screenshotAnimationSchema = zod_1.z.object({
+    imageUrl: zod_1.z.string().describe('URL of the image being screenshotted'),
+    width: zod_1.z.number().optional().default(1206).describe('Canvas width (px)'),
+    height: zod_1.z.number().optional().default(2622).describe('Canvas height (px)'),
+    pauseDurationMs: zod_1.z.number().optional().default(1000).describe('Pause before flash (ms)'),
+    flashDurationMs: zod_1.z.number().optional().default(255).describe('Flash phase duration (ms)'),
+    holdDurationMs: zod_1.z.number().optional().default(500).describe('Hold at end after animation (ms)'),
+    borderRadius: zod_1.z.number().optional().default(35).describe('Border corner radius (px)'),
+    borderColor: zod_1.z.string().optional().default('rgba(254, 255, 255, 1)').describe('Border color'),
+    backgroundColor: zod_1.z.string().optional().default('#000000').describe('Background color'),
+});
+// Gradient color schema
+const gradientColorSchema = zod_1.z.object({
+    type: zod_1.z.enum(['solid', 'linear']).describe('Color type'),
+    colors: zod_1.z.array(zod_1.z.string()).describe('Color values'),
+    angle: zod_1.z.number().optional().describe('Gradient angle in degrees'),
+});
+// Message reaction schema
+const messageReactionSchema = zod_1.z.object({
+    emoji: zod_1.z.string().describe('Reaction emoji'),
+    fromUser: zod_1.z.boolean().describe('Is reaction from user'),
+});
+// Base message schema
+const baseMessageSchema = zod_1.z.object({
+    id: zod_1.z.string().describe('Message ID'),
+    sender: zod_1.z.enum(['user', 'recipient']).describe('Message sender'),
+    reaction: messageReactionSchema.optional().describe('Message reaction'),
+});
+// Text message schema
+const textMessageSchema = baseMessageSchema.extend({
+    type: zod_1.z.literal('text'),
+    text: zod_1.z.string().describe('Message text'),
+});
+// Image message schema
+const imageMessageSchema = baseMessageSchema.extend({
+    type: zod_1.z.literal('image'),
+    imageInputId: zod_1.z.string().describe('Image input ID'),
+});
+// Story reply message schema
+const storyReplyMessageSchema = baseMessageSchema.extend({
+    type: zod_1.z.literal('story-reply'),
+    storyLabel: zod_1.z.string().describe('Story reply label'),
+    imageInputId: zod_1.z.string().describe('Story image input ID'),
+    replyText: zod_1.z.string().optional().describe('Reply text'),
+});
+// Combined message schema
+const igMessageSchema = zod_1.z.discriminatedUnion('type', [
+    textMessageSchema,
+    imageMessageSchema,
+    storyReplyMessageSchema,
+]);
+// User profile schema
+const igUserProfileSchema = zod_1.z.object({
+    username: zod_1.z.string().describe('Username'),
+    displayName: zod_1.z.string().optional().describe('Display name'),
+    avatarInputId: zod_1.z.string().describe('Avatar image input ID'),
+    verified: zod_1.z.boolean().optional().describe('Is verified'),
+    isActive: zod_1.z.boolean().optional().describe('Is active now'),
+});
+// Status bar schema
+const igStatusBarSchema = zod_1.z.object({
+    time: zod_1.z.string().describe('Status bar time'),
+    showCellular: zod_1.z.boolean().optional().default(true).describe('Show cellular icon'),
+    showWifi: zod_1.z.boolean().optional().default(true).describe('Show WiFi icon'),
+    showBattery: zod_1.z.boolean().optional().default(true).describe('Show battery icon'),
+    batteryLevel: zod_1.z.number().gte(0).lte(100).optional().default(100).describe('Battery level 0-100'),
+    isCharging: zod_1.z.boolean().optional().default(false).describe('Is charging'),
+});
+// Header config schema
+const igHeaderConfigSchema = zod_1.z.object({
+    height: zod_1.z.number().default(160).describe('Header height (px)'),
+    showBackButton: zod_1.z.boolean().default(true).describe('Show back button'),
+    showVideoCallButton: zod_1.z.boolean().default(true).describe('Show video call button'),
+    showCallButton: zod_1.z.boolean().default(true).describe('Show call button'),
+    showInfoButton: zod_1.z.boolean().default(true).describe('Show info button'),
+});
+// Footer config schema
+const igFooterConfigSchema = zod_1.z.object({
+    height: zod_1.z.number().default(130).describe('Footer height (px)'),
+    showCamera: zod_1.z.boolean().default(true).describe('Show camera button'),
+    showGallery: zod_1.z.boolean().default(true).describe('Show gallery button'),
+    showMic: zod_1.z.boolean().default(true).describe('Show mic button'),
+    showSticker: zod_1.z.boolean().default(true).describe('Show sticker button'),
+    placeholderText: zod_1.z.string().default('Message...').describe('Input placeholder'),
+    inputText: zod_1.z.string().optional().describe('Text in input field'),
+});
+// Message style schema
+const igMessageStyleSchema = zod_1.z.object({
+    // Text styling
+    fontSize: zod_1.z.number().default(42).describe('Font size (px)'),
+    fontWeight: zod_1.z.enum(['normal', 'bold']).default('normal').describe('Font weight'),
+    lineHeight: zod_1.z.number().default(1.35).describe('Line height multiplier'),
+    letterSpacing: zod_1.z.number().default(0).describe('Letter spacing (px)'),
+    // Bubble colors
+    userBubbleColor: gradientColorSchema.default({ type: 'solid', colors: ['#3797F0'] }).describe('User bubble color'),
+    recipientBubbleColor: gradientColorSchema.default({ type: 'solid', colors: ['#262626'] }).describe('Recipient bubble color'),
+    userTextColor: zod_1.z.string().default('#FFFFFF').describe('User text color'),
+    recipientTextColor: zod_1.z.string().default('#FFFFFF').describe('Recipient text color'),
+    // Bubble sizing
+    bubbleMaxWidth: zod_1.z.number().default(70).describe('Max bubble width (%)'),
+    bubblePaddingH: zod_1.z.number().default(20).describe('Bubble horizontal padding (px)'),
+    bubblePaddingV: zod_1.z.number().default(14).describe('Bubble vertical padding (px)'),
+    // Corner radii
+    bubbleRadiusOuter: zod_1.z.number().default(28).describe('Outer corner radius (px)'),
+    bubbleRadiusInner: zod_1.z.number().default(6).describe('Inner corner radius (px)'),
+    // Spacing
+    messageGapInGroup: zod_1.z.number().default(3).describe('Gap between messages in group (px)'),
+    messageGapBetweenGroups: zod_1.z.number().default(16).describe('Gap between groups (px)'),
+    sideMargin: zod_1.z.number().default(24).describe('Side margin (px)'),
+    // Media
+    mediaMaxWidth: zod_1.z.number().default(340).describe('Media max width (px)'),
+    mediaMaxHeight: zod_1.z.number().default(450).describe('Media max height (px)'),
+    mediaBorderRadius: zod_1.z.number().default(26).describe('Media border radius (px)'),
+    // Story reply
+    storyReplyLabelColor: zod_1.z.string().default('#A8A8A8').describe('Story label color'),
+    storyReplyLabelSize: zod_1.z.number().default(30).describe('Story label font size (px)'),
+    storyImageSize: zod_1.z.number().default(140).describe('Story image size (px)'),
+    storyImageRadius: zod_1.z.number().default(12).describe('Story image radius (px)'),
+    // Reactions
+    reactionSize: zod_1.z.number().default(32).describe('Reaction emoji size (px)'),
+    reactionBubbleColor: zod_1.z.string().default('#363636').describe('Reaction bubble color'),
+    reactionBorderRadius: zod_1.z.number().default(16).describe('Reaction border radius (px)'),
+    reactionOffsetY: zod_1.z.number().default(-10).describe('Reaction Y offset (px)'),
+    // Typing indicator
+    typingDotSize: zod_1.z.number().default(12).describe('Typing dot size (px)'),
+    typingDotColor: zod_1.z.string().default('#A8A8A8').describe('Typing dot color'),
+    typingDotSpacing: zod_1.z.number().default(6).describe('Typing dot spacing (px)'),
+    typingBubblePaddingH: zod_1.z.number().default(24).describe('Typing bubble H padding (px)'),
+    typingBubblePaddingV: zod_1.z.number().default(20).describe('Typing bubble V padding (px)'),
+    // Profile picture
+    profilePicSize: zod_1.z.number().default(44).describe('Profile pic size (px)'),
+    profilePicGap: zod_1.z.number().default(12).describe('Profile pic gap (px)'),
+});
+// Read receipt schema
+const readReceiptSchema = zod_1.z.object({
+    state: zod_1.z.enum(['none', 'sent', 'delivered', 'seen']).describe('Receipt state'),
+    showAvatar: zod_1.z.boolean().optional().describe('Show avatar for seen'),
+    timestamp: zod_1.z.string().optional().describe('Timestamp text'),
+});
+// Main Instagram DM composition schema (simplified - composition stripped down)
+const instagramDmSchema = zod_1.z.object({
+    // Debug overlay
+    showDebugOverlay: zod_1.z.boolean().optional().default(true).describe('Show debug overlay with mouse coordinates'),
+    // Reference overlay
+    referenceImageUrl: zod_1.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'),
+    showReferenceImage: zod_1.z.boolean().optional().default(true).describe('Show/hide reference image'),
+    referenceOpacity: zod_1.z.number().min(0).max(100).optional().default(50).describe('Reference overlay opacity (0-100)'),
+    // Canvas
+    width: zod_1.z.number().optional().default(1206).describe('Canvas width (px)'),
+    height: zod_1.z.number().optional().default(2622).describe('Canvas height (px)'),
+    durationInFrames: zod_1.z.number().optional().default(90).describe('Duration in frames'),
+    fps: zod_1.z.number().optional().default(30).describe('Frames per second'),
+    // Theme
+    theme: zod_1.z.enum(['light', 'dark']).describe('Color theme'),
+    // Footer position/style
+    footerTop: zod_1.z.number().optional().default(2363).describe('Footer top Y position'),
+    footerBottom: zod_1.z.number().optional().default(2496).describe('Footer bottom Y position'),
+    footerLeft: zod_1.z.number().optional().default(24).describe('Footer left X position'),
+    footerRight: zod_1.z.number().optional().default(1181).describe('Footer right X position'),
+    footerBgColor: zod_1.z.string().optional().default('#0a0a0a').describe('Footer background color'),
+    // Camera button position/style
+    cameraBtnTop: zod_1.z.number().optional().default(2379).describe('Camera button top Y'),
+    cameraBtnBottom: zod_1.z.number().optional().default(2481).describe('Camera button bottom Y'),
+    cameraBtnLeft: zod_1.z.number().optional().default(39).describe('Camera button left X'),
+    cameraBtnRight: zod_1.z.number().optional().default(141).describe('Camera button right X'),
+    cameraBtnBgColor: zod_1.z.string().optional().default('#5354fc').describe('Camera button background color'),
+    // Camera icon position
+    cameraIconTop: zod_1.z.number().optional().default(2400).describe('Camera icon top Y'),
+    cameraIconBottom: zod_1.z.number().optional().default(2455).describe('Camera icon bottom Y'),
+    cameraIconLeft: zod_1.z.number().optional().default(61).describe('Camera icon left X'),
+    cameraIconRight: zod_1.z.number().optional().default(119).describe('Camera icon right X'),
+    // Circle plus icon position (rightmost)
+    circlePlusIconTop: zod_1.z.number().optional().default(2395).describe('Circle plus icon top Y'),
+    circlePlusIconBottom: zod_1.z.number().optional().default(2465).describe('Circle plus icon bottom Y'),
+    circlePlusIconLeft: zod_1.z.number().optional().default(1051).describe('Circle plus icon left X'),
+    circlePlusIconRight: zod_1.z.number().optional().default(1121).describe('Circle plus icon right X'),
+    // Smile sticker icon position
+    smileStickerIconTop: zod_1.z.number().optional().default(2397).describe('Smile sticker icon top Y'),
+    smileStickerIconBottom: zod_1.z.number().optional().default(2463).describe('Smile sticker icon bottom Y'),
+    smileStickerIconLeft: zod_1.z.number().optional().default(933).describe('Smile sticker icon left X'),
+    smileStickerIconRight: zod_1.z.number().optional().default(999).describe('Smile sticker icon right X'),
+    // Camera roll icon position
+    cameraRollIconTop: zod_1.z.number().optional().default(2397).describe('Camera roll icon top Y'),
+    cameraRollIconBottom: zod_1.z.number().optional().default(2463).describe('Camera roll icon bottom Y'),
+    cameraRollIconLeft: zod_1.z.number().optional().default(813).describe('Camera roll icon left X'),
+    cameraRollIconRight: zod_1.z.number().optional().default(879).describe('Camera roll icon right X'),
+    // Microphone icon position (leftmost of right group)
+    microphoneIconTop: zod_1.z.number().optional().default(2397).describe('Microphone icon top Y'),
+    microphoneIconBottom: zod_1.z.number().optional().default(2463).describe('Microphone icon bottom Y'),
+    microphoneIconLeft: zod_1.z.number().optional().default(706).describe('Microphone icon left X'),
+    microphoneIconRight: zod_1.z.number().optional().default(758).describe('Microphone icon right X'),
+    // Message text
+    messageTextTop: zod_1.z.number().optional().default(2412).describe('Message text top Y'),
+    messageTextBottom: zod_1.z.number().optional().default(2445).describe('Message text bottom Y'),
+    messageTextLeft: zod_1.z.number().optional().default(169).describe('Message text left X'),
+    messageTextRight: zod_1.z.number().optional().default(650).describe('Message text right X'),
+    messageTextFontSize: zod_1.z.number().optional().default(48).describe('Message text font size'),
+    messageTextLetterSpacing: zod_1.z.number().optional().default(1.7).describe('Letter spacing'),
+    messageTextColor: zod_1.z.string().optional().default('#a0a8b3').describe('Message text color'),
+    messageText: zod_1.z.string().optional().default('Message...').describe('Message placeholder text'),
+    // Home indicator (bottom bar)
+    homeIndicatorTop: zod_1.z.number().optional().default(2583).describe('Home indicator top Y'),
+    homeIndicatorBottom: zod_1.z.number().optional().default(2597).describe('Home indicator bottom Y'),
+    homeIndicatorLeft: zod_1.z.number().optional().default(387).describe('Home indicator left X'),
+    homeIndicatorRight: zod_1.z.number().optional().default(818).describe('Home indicator right X'),
+    homeIndicatorColor: zod_1.z.string().optional().default('#ffffff').describe('Home indicator color'),
+    // Messages
+    messages: zod_1.z.array(zod_1.z.object({
+        id: zod_1.z.string().describe('Message ID'),
+        sender: zod_1.z.enum(['user', 'recipient']).describe('Message sender'),
+        text: zod_1.z.string().describe('Message text'),
+        groupWithPrevious: zod_1.z.boolean().optional().describe('Group with previous message (6px gap)'),
+    })).optional().default([]).describe('Array of messages'),
+    // Message area bounds
+    messageAreaTop: zod_1.z.number().optional().default(353).describe('Message area top Y (cutoff)'),
+    messageAreaBottom: zod_1.z.number().optional().default(2340).describe('Message area bottom Y (start)'),
+    // Message colors
+    recipientBubbleColor: zod_1.z.string().optional().default('#25282d').describe('Recipient bubble color'),
+    senderGradientTop: zod_1.z.string().optional().default('#b932d6').describe('Sender gradient top color'),
+    senderGradientMiddle: zod_1.z.string().optional().default('#7d38f6').describe('Sender gradient middle color'),
+    senderGradientBottom: zod_1.z.string().optional().default('#5751f9').describe('Sender gradient bottom color'),
+    bubbleTextColor: zod_1.z.string().optional().default('#f9f9f9').describe('Bubble text color'),
+    // Message typography
+    messageFontSize: zod_1.z.number().optional().default(51).describe('Message font size'),
+    messageLineHeight: zod_1.z.number().optional().default(60).describe('Message line height'),
+    messageLetterSpacing: zod_1.z.number().step(0.1).optional().default(0.8).describe('Message letter spacing'),
+    // Message padding
+    messagePaddingTop: zod_1.z.number().optional().default(27).describe('Message padding top'),
+    messagePaddingBottom: zod_1.z.number().optional().default(33).describe('Message padding bottom'),
+    sentMessagePaddingLeft: zod_1.z.number().optional().default(31).describe('Left padding for sent messages'),
+    sentMessagePaddingRight: zod_1.z.number().optional().default(38).describe('Right padding for sent messages'),
+    receivedMessagePaddingLeft: zod_1.z.number().optional().default(37).describe('Left padding for received messages'),
+    receivedMessagePaddingRight: zod_1.z.number().optional().default(28).describe('Right padding for received messages'),
+    multiLineSentMessagePaddingRight: zod_1.z.number().optional().default(51).describe('Right padding for multi-line sender messages'),
+    multiLineSentMessagePaddingLeft: zod_1.z.number().optional().default(31).describe('Left padding for multi-line sender messages'),
+    multiLineRecMessagePaddingRight: zod_1.z.number().optional().default(48).describe('Right padding for multi-line recipient messages'),
+    // Bubble corner radii
+    bubbleRadiusNormal: zod_1.z.number().optional().default(57).describe('Normal bubble corner radius'),
+    bubbleRadiusGrouped: zod_1.z.number().optional().default(12).describe('Grouped bubble corner radius'),
+    // Message spacing
+    messageGapInGroup: zod_1.z.number().optional().default(6).describe('Gap between messages in group'),
+    messageGapSameUser: zod_1.z.number().optional().default(36).describe('Gap between messages from same user'),
+    messageGapDifferentUser: zod_1.z.number().optional().default(36).describe('Gap between messages from different users'),
+    // Bubble positioning
+    recipientBubbleLeft: zod_1.z.number().optional().default(168).describe('Recipient bubble left X'),
+    senderBubbleRight: zod_1.z.number().optional().default(1182).describe('Sender bubble right X'),
+    bubbleMaxWidth: zod_1.z.number().optional().default(866).describe('Max bubble width'),
+    // Profile picture
+    profilePicUrl: zod_1.z.string().optional().default('').describe('Recipient profile picture URL'),
+    profilePicSize: zod_1.z.number().optional().default(83).describe('Profile picture size'),
+    profilePicGap: zod_1.z.number().optional().default(37).describe('Gap between profile pic and bubble'),
+    // Header - Back arrow
+    backArrowTop: zod_1.z.number().optional().default(240).describe('Back arrow top Y'),
+    backArrowBottom: zod_1.z.number().optional().default(300).describe('Back arrow bottom Y'),
+    backArrowLeft: zod_1.z.number().optional().default(78).describe('Back arrow left X'),
+    backArrowRight: zod_1.z.number().optional().default(111).describe('Back arrow right X'),
+    // Header - User profile picture
+    userPfpUrl: zod_1.z.string().optional().default('https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/884a81ce74fa88e229f6be5f76f29385-3P4rjQqfbLidxtZ7OmvgaDQNMSSIGi.jpg').describe('User profile picture URL'),
+    userPfpTop: zod_1.z.number().optional().default(220).describe('User pfp top Y'),
+    userPfpBottom: zod_1.z.number().optional().default(320).describe('User pfp bottom Y'),
+    userPfpLeft: zod_1.z.number().optional().default(179).describe('User pfp left X'),
+    userPfpRight: zod_1.z.number().optional().default(277).describe('User pfp right X'),
+    // Header - User story ring
+    userHasStory: zod_1.z.boolean().optional().default(false).describe('Show story ring around user pfp'),
+    userStoryRingColor: zod_1.z.string().optional().default('#5e656d').describe('Story ring color'),
+    userStoryRingTop: zod_1.z.number().optional().default(210).describe('Story ring outer top Y'),
+    userStoryRingBottom: zod_1.z.number().optional().default(330).describe('Story ring outer bottom Y'),
+    userStoryRingLeft: zod_1.z.number().optional().default(168).describe('Story ring outer left X'),
+    userStoryRingRight: zod_1.z.number().optional().default(288).describe('Story ring outer right X'),
+    userStoryRingWidth: zod_1.z.number().optional().default(6).describe('Story ring width'),
+    // Header - No notifications icon
+    noNotisTop: zod_1.z.number().optional().default(77).describe('No notifications top Y'),
+    noNotisBottom: zod_1.z.number().optional().default(120).describe('No notifications bottom Y'),
+    noNotisLeft: zod_1.z.number().optional().default(272).describe('No notifications left X'),
+    noNotisRight: zod_1.z.number().optional().default(312).describe('No notifications right X'),
+    // Header - Smile plus icon
+    smilePlusTop: zod_1.z.number().optional().default(234).describe('Smile plus top Y'),
+    smilePlusBottom: zod_1.z.number().optional().default(306).describe('Smile plus bottom Y'),
+    smilePlusLeft: zod_1.z.number().optional().default(663).describe('Smile plus left X'),
+    smilePlusRight: zod_1.z.number().optional().default(735).describe('Smile plus right X'),
+    // Header - Phone icon
+    phoneIconTop: zod_1.z.number().optional().default(237).describe('Phone icon top Y'),
+    phoneIconBottom: zod_1.z.number().optional().default(303).describe('Phone icon bottom Y'),
+    phoneIconLeft: zod_1.z.number().optional().default(807).describe('Phone icon left X'),
+    phoneIconRight: zod_1.z.number().optional().default(873).describe('Phone icon right X'),
+    // Header - Video icon
+    videoIconTop: zod_1.z.number().optional().default(240).describe('Video icon top Y'),
+    videoIconBottom: zod_1.z.number().optional().default(300).describe('Video icon bottom Y'),
+    videoIconLeft: zod_1.z.number().optional().default(948).describe('Video icon left X'),
+    videoIconRight: zod_1.z.number().optional().default(1020).describe('Video icon right X'),
+    // Header - Flag icon
+    flagTop: zod_1.z.number().optional().default(237).describe('Flag icon top Y'),
+    flagBottom: zod_1.z.number().optional().default(303).describe('Flag icon bottom Y'),
+    flagLeft: zod_1.z.number().optional().default(1098).describe('Flag icon left X'),
+    flagRight: zod_1.z.number().optional().default(1153).describe('Flag icon right X'),
+    // Status bar - Cell signal (0-4)
+    cellLevel: zod_1.z.number().min(0).max(4).optional().default(4).describe('Cell signal level (0-4)'),
+    cell1Top: zod_1.z.number().optional().default(102).describe('Cell bar 1 top Y'),
+    cell1Bottom: zod_1.z.number().optional().default(116).describe('Cell bar 1 bottom Y'),
+    cell1Left: zod_1.z.number().optional().default(865).describe('Cell bar 1 left X'),
+    cell1Right: zod_1.z.number().optional().default(875).describe('Cell bar 1 right X'),
+    cell2Top: zod_1.z.number().optional().default(95).describe('Cell bar 2 top Y'),
+    cell2Bottom: zod_1.z.number().optional().default(116).describe('Cell bar 2 bottom Y'),
+    cell2Left: zod_1.z.number().optional().default(881).describe('Cell bar 2 left X'),
+    cell2Right: zod_1.z.number().optional().default(891).describe('Cell bar 2 right X'),
+    cell3Top: zod_1.z.number().optional().default(87).describe('Cell bar 3 top Y'),
+    cell3Bottom: zod_1.z.number().optional().default(116).describe('Cell bar 3 bottom Y'),
+    cell3Left: zod_1.z.number().optional().default(897).describe('Cell bar 3 left X'),
+    cell3Right: zod_1.z.number().optional().default(907).describe('Cell bar 3 right X'),
+    cell4Top: zod_1.z.number().optional().default(79).describe('Cell bar 4 top Y'),
+    cell4Bottom: zod_1.z.number().optional().default(116).describe('Cell bar 4 bottom Y'),
+    cell4Left: zod_1.z.number().optional().default(913).describe('Cell bar 4 left X'),
+    cell4Right: zod_1.z.number().optional().default(923).describe('Cell bar 4 right X'),
+    // Status bar - WiFi icon
+    wifiTop: zod_1.z.number().optional().default(79).describe('WiFi icon top Y'),
+    wifiBottom: zod_1.z.number().optional().default(116).describe('WiFi icon bottom Y'),
+    wifiLeft: zod_1.z.number().optional().default(945).describe('WiFi icon left X'),
+    wifiRight: zod_1.z.number().optional().default(996).describe('WiFi icon right X'),
+    // Status bar - Battery icon
+    batteryTop: zod_1.z.number().optional().default(78).describe('Battery icon top Y'),
+    batteryBottom: zod_1.z.number().optional().default(117).describe('Battery icon bottom Y'),
+    batteryLeft: zod_1.z.number().optional().default(1018).describe('Battery icon left X'),
+    batteryRight: zod_1.z.number().optional().default(1100).describe('Battery icon right X'),
+    // Status bar - Time display
+    time: zod_1.z.string().optional().default('9:41').describe('Time string to display'),
+    timeRight: zod_1.z.number().optional().default(262).describe('Time text right X (right-aligned)'),
+    timeBottom: zod_1.z.number().optional().default(125).describe('Time text bottom Y'),
+    timeFontSize: zod_1.z.number().optional().default(52).describe('Time font size'),
+    timeLetterSpacing: zod_1.z.number().optional().default(1.6).describe('Time letter spacing'),
+    // Header - Sender username (shown in two places)
+    senderUsername: zod_1.z.string().optional().default('cheatmate_io').describe('Sender username'),
+    usernameLeft: zod_1.z.number().optional().default(306).describe('Username left X'),
+    username1Bottom: zod_1.z.number().optional().default(271).describe('Username 1 bottom Y (bold)'),
+    username1FontSize: zod_1.z.number().optional().default(51).describe('Username 1 font size'),
+    username1LetterSpacing: zod_1.z.number().optional().default(-0.2).describe('Username 1 letter spacing'),
+    username2Bottom: zod_1.z.number().optional().default(322).describe('Username 2 bottom Y'),
+    username2FontSize: zod_1.z.number().optional().default(41).describe('Username 2 font size'),
+    username2LetterSpacing: zod_1.z.number().optional().default(-0.4).describe('Username 2 letter spacing'),
+    // Header - Username right arrow icon
+    usernameArrowTop: zod_1.z.number().optional().default(231).describe('Username arrow top Y'),
+    usernameArrowBottom: zod_1.z.number().optional().default(260).describe('Username arrow bottom Y'),
+    usernameArrowLeft: zod_1.z.number().optional().default(619).describe('Username arrow left X'),
+    usernameArrowRight: zod_1.z.number().optional().default(636).describe('Username arrow right X'),
+    // Story reply (sender) - image
+    storyReplyImageWidth: zod_1.z.number().optional().default(263).describe('Story reply image width'),
+    storyReplyImageHeight: zod_1.z.number().optional().default(467).describe('Story reply image height'),
+    storyReplyImageRight: zod_1.z.number().optional().default(1133).describe('Story reply image right X'),
+    storyReplyImageGap: zod_1.z.number().optional().default(24).describe('Gap between story image and message'),
+    storyReplyImageBorderRadius: zod_1.z.number().optional().default(44).describe('Story reply image corner radius'),
+    // Story reply (sender) - side bar
+    storyReplyBarLeft: zod_1.z.number().optional().default(1170).describe('Story reply bar left X'),
+    storyReplyBarRight: zod_1.z.number().optional().default(1181).describe('Story reply bar right X'),
+    // Story reply (sender) - "You replied to their story" text
+    storyReplyTextLeft: zod_1.z.number().optional().default(728).describe('Story reply text left X'),
+    storyReplyTextGap: zod_1.z.number().optional().default(22).describe('Gap between text and story image'),
+    storyReplyTextFontSize: zod_1.z.number().optional().default(36).describe('Story reply text font size'),
+    storyReplyTextLetterSpacing: zod_1.z.number().optional().default(2.25).describe('Story reply text letter spacing'),
+    // 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'),
+});
+// Cast components to work around renderer's strict typing
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ImageComp = ImageEditorComposition_1.ImageEditorComposition;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const VideoComp = VideoEditorComposition_1.VideoEditorComposition;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AutoCaptionComp = AutoCaptionComposition_1.AutoCaptionComposition;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ScreenshotAnimationComp = ScreenshotAnimation_1.ScreenshotAnimation;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const InstagramDmComp = InstagramDmComposition_1.InstagramDmComposition;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const IMessageDmComp = IMessageDmComposition_1.IMessageDmComposition;
+/**
+ * calculateMetadata for ImageEditorComposition
+ *
+ * This runs in the browser environment BEFORE the composition renders.
+ * It calculates the correct output dimensions based on dynamic cropping,
+ * using real DOM measurement for accurate text dimensions.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const calculateImageMetadata = async ({ props }) => {
+    console.log('[calculateMetadata] Starting metadata calculation...');
+    // Get canvas dimensions from props (new element-based format)
+    const canvasWidth = props.width ?? props.config?.width ?? 1080;
+    const canvasHeight = props.height ?? props.config?.height ?? 1920;
+    // Default return if no dynamic crop
+    const defaultResult = {
+        width: canvasWidth,
+        height: canvasHeight,
+        fps: 30,
+        durationInFrames: 1,
+    };
+    // Check if we're using element-based format with dynamic crop
+    if (!props.elements || !props.dynamicCrop) {
+        console.log('[calculateMetadata] No elements or dynamicCrop, using default dimensions:', canvasWidth, 'x', canvasHeight);
+        return defaultResult;
+    }
+    // Check if dynamic crop is actually enabled
+    if (!(0, cropBounds_1.isDynamicCropEnabled)(props.dynamicCrop)) {
+        console.log('[calculateMetadata] Dynamic crop not enabled, using default dimensions:', canvasWidth, 'x', canvasHeight);
+        return defaultResult;
+    }
+    console.log('[calculateMetadata] Dynamic crop enabled, loading fonts for accurate measurement...');
+    // CRITICAL: Load fonts BEFORE measuring text
+    // This ensures text measurements match the actual rendered output
+    try {
+        await (0, fonts_1.preloadFonts)();
+        console.log('[calculateMetadata] Fonts loaded successfully');
+    }
+    catch (err) {
+        console.error('[calculateMetadata] Font loading failed:', err);
+        // Continue anyway - fallback fonts will be used
+    }
+    // Give fonts a moment to fully register after loading
+    await new Promise(resolve => setTimeout(resolve, 50));
+    console.log('[calculateMetadata] Resolving element positions with DOM measurement...');
+    // Resolve element positions with real DOM measurement
+    // This uses calculateAutoWidthDimensions which measures text in the browser
+    const { elements: resolvedElements } = (0, positionResolver_1.resolveElementPositions)(props.elements, props.textValues ?? {});
+    console.log('[calculateMetadata] Element positions resolved');
+    // Calculate crop bounds with real DOM measurement
+    const cropBounds = (0, cropBounds_1.calculateCropBounds)(resolvedElements, props.dynamicCrop, canvasWidth, canvasHeight, props.textValues);
+    const outputWidth = Math.round(cropBounds.width);
+    const outputHeight = Math.round(cropBounds.height);
+    console.log(`[calculateMetadata] Crop bounds calculated: ${canvasWidth}x${canvasHeight} -> ${outputWidth}x${outputHeight} (offset: ${cropBounds.x}, ${cropBounds.y})`);
+    return {
+        width: outputWidth,
+        height: outputHeight,
+        fps: 30,
+        durationInFrames: 1,
+    };
+};
+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 })] }));
+};
+exports.RenderRoot = RenderRoot;
+exports.default = exports.RenderRoot;

package/dist/render/components/CaptionOverlay.d.ts

@@ -0,0 +1,21 @@
+/**
+ * CaptionOverlay Component
+ *
+ * Renders TikTok-style animated captions over video content.
+ * Features:
+ * - Word-by-word highlighting based on current playback time
+ * - Proper text wrapping within configurable maxWidth bounds
+ * - Vertical positioning (top/center/bottom) with offset
+ * - Optional background with opacity and border radius
+ * - Optional bounce animation on active word
+ *
+ * This component is designed for use in both:
+ * - Remotion compositions (server-side rendering)
+ * - Client-side preview (with previewTimeMs override)
+ */
+import type { CaptionOverlayProps } from '../types/caption';
+/**
+ * CaptionOverlay renders animated captions synchronized with video playback
+ */
+export declare function CaptionOverlay({ captions, style, previewTimeMs }: CaptionOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export default CaptionOverlay;