ugcinc-render 1.3.5

package/dist/index.d.ts

@@ -0,0 +1,1200 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * Base types used throughout the rendering system
+ */
+/**
+ * Time value - can be absolute (milliseconds) or relative (0-1 percentage)
+ *
+ * @example
+ * // Absolute: 500 milliseconds
+ * { type: 'absolute', value: 500 }
+ *
+ * @example
+ * // Relative: 50% of total duration
+ * { type: 'relative', value: 0.5 }
+ */
+interface TimeValue {
+    type: 'absolute' | 'relative';
+    value: number;
+}
+/**
+ * Border radius configuration for individual corners.
+ * All values in pixels, default 0 (no rounding).
+ */
+interface BorderRadiusConfig {
+    /** Top-left corner radius in pixels */
+    topLeft?: number;
+    /** Top-right corner radius in pixels */
+    topRight?: number;
+    /** Bottom-right corner radius in pixels */
+    bottomRight?: number;
+    /** Bottom-left corner radius in pixels */
+    bottomLeft?: number;
+}
+/**
+ * Fit mode for media (images/videos)
+ * - cover: Fill the area, cropping if necessary
+ * - contain: Fit within the area, letterboxing if necessary
+ * - fill: Stretch to fill the area exactly
+ */
+type FitMode = 'cover' | 'contain' | 'fill';
+/**
+ * Segment type identifiers
+ */
+type SegmentType = 'video' | 'image' | 'text' | 'audio' | 'editor';
+/**
+ * Font type identifiers
+ */
+type FontType = 'arial' | 'tiktok' | 'apple';
+/**
+ * Font weight options
+ */
+type FontWeight = 'normal' | 'bold';
+/**
+ * Text alignment options
+ */
+type TextAlignment = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Vertical alignment options
+ */
+type VerticalAlignment = 'top' | 'middle' | 'bottom';
+/**
+ * Text direction
+ */
+type TextDirection = 'ltr' | 'rtl';
+/**
+ * Text wrapping mode
+ */
+type TextWrap = 'word' | 'char' | 'none';
+/**
+ * Word break behavior
+ */
+type WordBreak = 'normal' | 'break-all' | 'break-word';
+/**
+ * Hyphenation mode
+ */
+type Hyphenation = 'none' | 'auto';
+/**
+ * Text overflow behavior
+ */
+type TextOverflow = 'clip' | 'ellipsis';
+
+/**
+ * Position and anchor types for relative element positioning
+ */
+/**
+ * Vertical anchor for Y positioning (parent element)
+ * Specifies which vertical edge of the reference element to anchor to
+ */
+type VerticalAnchor = 'top' | 'bottom';
+/**
+ * Horizontal anchor for X positioning (parent element)
+ * Specifies which horizontal edge of the reference element to anchor to
+ */
+type HorizontalAnchor = 'left' | 'right';
+/**
+ * Self anchor for X positioning
+ * Specifies which horizontal edge of THIS element to use for positioning
+ */
+type HorizontalSelfAnchor = 'left' | 'center' | 'right';
+/**
+ * Self anchor for Y positioning
+ * Specifies which vertical edge of THIS element to use for positioning
+ */
+type VerticalSelfAnchor = 'top' | 'middle' | 'bottom';
+/**
+ * Relative X position configuration
+ * When set, the segment's X position is calculated relative to another segment
+ *
+ * @example
+ * // Position this segment to the right of another segment with 10px gap
+ * { elementId: 'other-element', anchor: 'right', selfAnchor: 'left', offset: 10 }
+ */
+interface RelativePositionConfigX {
+    /** ID of the segment to position relative to */
+    elementId: string;
+    /** Which horizontal edge of the reference segment to anchor to */
+    anchor: HorizontalAnchor;
+    /** Which horizontal edge of THIS segment to use (default: opposite of anchor) */
+    selfAnchor?: HorizontalSelfAnchor;
+    /** Offset in pixels from the anchor point */
+    offset: number;
+}
+/**
+ * Relative Y position configuration
+ * When set, the segment's Y position is calculated relative to another segment
+ *
+ * @example
+ * // Position this segment below another segment with a 10px gap
+ * { elementId: 'message-1', anchor: 'bottom', selfAnchor: 'top', offset: 10 }
+ */
+interface RelativePositionConfigY {
+    /** ID of the segment to position relative to */
+    elementId: string;
+    /** Which vertical edge of the reference segment to anchor to */
+    anchor: VerticalAnchor;
+    /** Which vertical edge of THIS segment to use (default: opposite of anchor) */
+    selfAnchor?: VerticalSelfAnchor;
+    /** Offset in pixels from the anchor point */
+    offset: number;
+}
+
+/**
+ * Dynamic cropping configuration types
+ *
+ * Dynamic cropping allows the output dimensions to be calculated
+ * based on element positions at render time.
+ */
+/**
+ * Crop boundary - can be static (element ID) or dynamic (input reference)
+ */
+interface CropBoundary {
+    /** Static: reference a specific element by ID */
+    elementId?: string;
+    /** Variable: get element ID from input (creates an input port) */
+    inputRef?: string;
+}
+/**
+ * Configuration for cropping along one axis (vertical = height, horizontal = width)
+ */
+interface CropAxisConfig {
+    /** Whether cropping is enabled for this axis */
+    enabled: boolean;
+    /**
+     * Crop mode:
+     * - 'all-elements': Crop to bounding box of all visible elements
+     * - 'between-elements': Crop between specific boundary elements
+     */
+    mode: 'all-elements' | 'between-elements';
+    /** Top/left element boundary (between-elements mode only) */
+    startBoundary?: CropBoundary;
+    /** Bottom/right element boundary (between-elements mode only) */
+    endBoundary?: CropBoundary;
+    /** Padding before (top/left) in pixels */
+    paddingStart?: number;
+    /** Padding after (bottom/right) in pixels */
+    paddingEnd?: number;
+    /** Minimum dimension (prevents cropping too small) */
+    minSize?: number;
+}
+/**
+ * Dynamic crop configuration for image/video editor
+ */
+interface DynamicCropConfig {
+    /** Crop height based on elements */
+    vertical?: CropAxisConfig;
+    /** Crop width based on elements */
+    horizontal?: CropAxisConfig;
+}
+/**
+ * Result of crop bounds calculation
+ */
+interface CropBounds {
+    /** Left edge of crop area */
+    x: number;
+    /** Top edge of crop area */
+    y: number;
+    /** Width of cropped output */
+    width: number;
+    /** Height of cropped output */
+    height: number;
+}
+
+/**
+ * Raw element types for editor input
+ *
+ * These types represent the raw configuration that users define in the editor.
+ * They include relative positioning which gets resolved to absolute positions
+ * before rendering.
+ */
+
+/**
+ * Dimension preset keys for image editor
+ */
+type DimensionPresetKey = 'tiktok' | 'instagram-square' | 'instagram-post' | 'youtube' | 'twitter' | 'custom';
+/**
+ * Dimension preset configuration
+ */
+interface DimensionPreset {
+    width: number;
+    height: number;
+    label: string;
+    ratio: string;
+}
+/**
+ * Standard dimension presets
+ */
+declare const DIMENSION_PRESETS: Record<Exclude<DimensionPresetKey, 'custom'>, DimensionPreset>;
+/**
+ * Image editor element - a raw image or text layer in the editor
+ *
+ * This is the input format that includes relative positioning.
+ * It gets resolved to absolute positions before being converted to segments.
+ */
+interface ImageEditorElement {
+    /** Unique element identifier */
+    id: string;
+    /** Element type */
+    type: 'image' | 'text';
+    /** X position in pixels (may be overridden by relativePositionX) */
+    x: number;
+    /** Y position in pixels (may be overridden by relativePositionY) */
+    y: number;
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Z-index for layering */
+    zIndex: number;
+    /** Rotation in degrees clockwise */
+    rotation?: number;
+    /** Whether the element is locked from editing */
+    locked?: boolean;
+    /** Relative X positioning config - when set, x is calculated from the reference element */
+    relativePositionX?: RelativePositionConfigX;
+    /** Relative Y positioning config - when set, y is calculated from the reference element */
+    relativePositionY?: RelativePositionConfigY;
+    /** Text content */
+    text?: string;
+    /** Maps to text input port for variable text (e.g., "text_1") */
+    textInputId?: string;
+    /** Text color (hex) */
+    color?: string;
+    /** Outline width in pixels (0 = no outline) */
+    outlineWidth?: number;
+    /** Outline color */
+    strokeColor?: string;
+    /** Font family */
+    font?: FontType;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font weight */
+    fontWeight?: FontWeight;
+    /** Line height multiplier */
+    lineHeight?: number;
+    /** Letter spacing in pixels */
+    letterSpacing?: number;
+    /** Horizontal text alignment */
+    textAlign?: TextAlignment;
+    /** Vertical text alignment within bounds */
+    verticalAlign?: VerticalAlignment;
+    /** Background color for text box (hex) */
+    backgroundColor?: string;
+    /** Background opacity 0-100 */
+    backgroundOpacity?: number;
+    /** Corner radius for background box */
+    backgroundBorderRadius?: BorderRadiusConfig;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    /** When true, box shrinks to fit content (width becomes max width) */
+    autoWidth?: boolean;
+    /** Which side the box anchors to when autoWidth is true */
+    boxAlign?: 'left' | 'center' | 'right';
+    /** Maps to input port (e.g., "image_1", "image_2") */
+    inputId?: string;
+    /** How the image fits its container */
+    fit?: FitMode;
+    /** Opacity percentage 0-100 */
+    opacity?: number;
+    /** Corner radius - single number for all corners, or object for individual */
+    borderRadius?: number | BorderRadiusConfig;
+}
+/**
+ * Image editor node configuration
+ *
+ * This is the complete configuration for an image editor node,
+ * including canvas dimensions, elements, and crop settings.
+ */
+interface ImageEditorNodeConfig {
+    /** Canvas width in pixels */
+    width: number;
+    /** Canvas height in pixels */
+    height: number;
+    /** Aspect ratio string (e.g., "9:16") */
+    aspectRatio: string;
+    /** Dimension preset key */
+    dimensionPreset: DimensionPresetKey;
+    /** Elements to render */
+    elements: ImageEditorElement[];
+    /** How the background image fits the canvas */
+    backgroundFit?: FitMode;
+    /** Cached background image URL for consistent preview */
+    previewBackgroundUrl?: string;
+    /** Cached image URLs for image elements (keyed by inputId) */
+    previewImageUrls?: Record<string, string>;
+    /** Cached text values for text elements (keyed by textInputId) */
+    previewTextValues?: Record<string, string>;
+    /** Dynamic cropping configuration */
+    dynamicCrop?: DynamicCropConfig;
+}
+
+/**
+ * Video editor types for rendering
+ */
+
+/**
+ * UI helper for timing mode
+ */
+type TimeMode = 'fixed' | 'flexible';
+/**
+ * Base properties for all video editor segments
+ */
+interface VideoEditorBaseSegment {
+    id: string;
+    order: number;
+    offset: TimeValue;
+    duration?: TimeValue;
+    startTrim?: number;
+    endTrim?: number;
+    timeMode?: TimeMode;
+    parentId?: string;
+    relativeStart?: number;
+    relativeEnd?: number;
+    fadeIn?: number;
+}
+/**
+ * Base properties for visual segments
+ */
+interface VideoEditorVisualSegment extends VideoEditorBaseSegment {
+    xOffset: number;
+    yOffset: number;
+    width: number;
+    height: number;
+    zIndex?: number;
+    scale?: number;
+    rotation?: number;
+    opacity?: number;
+}
+/**
+ * Video segment
+ */
+interface VideoEditorVideoSegment extends VideoEditorVisualSegment {
+    type: 'video';
+    inputRef?: string;
+    source?: string;
+    fit?: FitMode;
+    speed?: number;
+    volume?: number;
+    borderRadius?: number | BorderRadiusConfig;
+}
+/**
+ * Audio segment
+ */
+interface VideoEditorAudioSegment extends VideoEditorBaseSegment {
+    type: 'audio';
+    inputRef?: string;
+    source?: string;
+    volume?: number;
+}
+/**
+ * Image segment
+ */
+interface VideoEditorImageSegment extends VideoEditorVisualSegment {
+    type: 'image';
+    inputRef?: string;
+    source?: string;
+    fit?: FitMode;
+    loop?: boolean;
+    borderRadius?: number | BorderRadiusConfig;
+}
+/**
+ * Text segment
+ */
+interface VideoEditorTextSegment extends VideoEditorVisualSegment {
+    type: 'text';
+    textInputRef?: string;
+    text?: string;
+    alignment?: 'left' | 'center' | 'right' | 'justify';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    direction?: 'ltr' | 'rtl';
+    padding?: number;
+    fontType?: 'tiktok' | 'apple' | 'arial';
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold';
+    lineHeight?: number;
+    letterSpacing?: number;
+    textWrap?: 'word' | 'char' | 'none';
+    wordBreak?: 'normal' | 'break-all' | 'break-word';
+    hyphenation?: 'none' | 'auto';
+    maxLines?: number;
+    textOverflow?: 'clip' | 'ellipsis';
+    ellipsis?: string;
+    color?: string;
+    backgroundColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+/**
+ * Union of all video editor segment types
+ */
+type VideoEditorSegment = VideoEditorVideoSegment | VideoEditorAudioSegment | VideoEditorImageSegment | VideoEditorTextSegment;
+/**
+ * Video editor channel
+ */
+interface VideoEditorChannel {
+    id: string;
+    name: string;
+    segments: VideoEditorSegment[];
+}
+/**
+ * Video editor node configuration
+ */
+interface VideoEditorNodeConfig {
+    width: number;
+    height: number;
+    fps: number;
+    duration?: number;
+    dimensionPreset: DimensionPresetKey;
+    channels: VideoEditorChannel[];
+    previewUrls?: Record<string, string>;
+    previewTextValues?: Record<string, string>;
+}
+
+/**
+ * Segment types for the rendering system
+ *
+ * Segments are the building blocks of compositions - they represent
+ * individual elements like text, images, videos, and audio.
+ */
+
+/**
+ * Base properties for all segments
+ */
+interface BaseSegment {
+    /** Unique segment identifier */
+    id: string;
+    /** Segment type */
+    type: SegmentType;
+    /** Public URL to media file (empty string for text/editor segments) */
+    source: string;
+    /** Sequence order within channel (0-based) */
+    order: number;
+    /** Time offset after previous segment starts */
+    offset: TimeValue;
+    /** Trim from start in milliseconds (default: 0) */
+    startTrim?: number;
+    /** Trim from end in milliseconds (default: 0) */
+    endTrim?: number;
+    /** Override segment duration (auto-calculated if omitted) */
+    duration?: TimeValue;
+    /** ID of the parent segment this overlays (timing calculated relative to parent) */
+    parentId?: string;
+    /** Start time as fraction of parent duration (0-1, default: 0). Only used when parentId is set. */
+    relativeStart?: number;
+    /** End time as fraction of parent duration (0-1, default: 1). Only used when parentId is set. */
+    relativeEnd?: number;
+    /** Duration in milliseconds for the fade-in effect (0 or undefined = no fade) */
+    fadeIn?: number;
+}
+/**
+ * Visual segment properties (video, image, text)
+ */
+interface VisualSegment extends BaseSegment {
+    type: 'video' | 'image' | 'text';
+    /** Horizontal position from left edge in pixels */
+    xOffset: number;
+    /** Vertical position from top edge in pixels */
+    yOffset: number;
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Layer order - higher values appear on top (default: 0) */
+    zIndex?: number;
+    /** Scale multiplier (1.0 = 100%, 2.0 = 200%) (default: 1) */
+    scale?: number;
+    /** Rotation in degrees clockwise (default: 0) */
+    rotation?: number;
+    /** Opacity percentage 0-100 (default: 100) */
+    opacity?: number;
+    /** Relative X positioning - when set, xOffset is calculated from the reference segment */
+    relativePositionX?: RelativePositionConfigX;
+    /** Relative Y positioning - when set, yOffset is calculated from the reference segment */
+    relativePositionY?: RelativePositionConfigY;
+}
+/**
+ * Picture segment properties (shared by video and image)
+ */
+interface PictureSegment extends VisualSegment {
+    type: 'video' | 'image';
+    /** How media fits in bounds: cover (fill+crop), contain (fit+letterbox), fill (stretch) (default: 'cover') */
+    fit?: FitMode;
+    /** Playback speed multiplier (0.5 = half speed, 2.0 = double speed) (default: 1) */
+    speed?: number;
+    /** Corner radius - single number for all corners, or object for individual corners (default: 0) */
+    borderRadius?: number | BorderRadiusConfig;
+}
+/**
+ * Video segment - displays video content with optional audio
+ */
+interface VideoSegment extends PictureSegment {
+    type: 'video';
+    /** Audio volume percentage 0-100 (0 = muted, 100 = full) (default: 100) */
+    volume?: number;
+}
+/**
+ * Image segment - static images or animated GIFs
+ */
+interface ImageSegment extends PictureSegment {
+    type: 'image';
+    /** Loop animated GIFs (default: false) */
+    loop?: boolean;
+}
+/**
+ * Text segment - rich text overlays with full typography control
+ */
+interface TextSegment extends VisualSegment {
+    type: 'text';
+    source: '';
+    /** The text content (supports emojis) */
+    text: string;
+    /** Horizontal alignment (default: 'left') */
+    alignment?: TextAlignment;
+    /** Vertical alignment within bounds (default: 'top') */
+    verticalAlign?: VerticalAlignment;
+    /** Text direction (default: 'ltr') */
+    direction?: TextDirection;
+    /** Inner padding in pixels - uniform for all sides (default: 0). Overridden by individual padding values if set. */
+    padding?: number;
+    /** Top padding in pixels (overrides uniform padding) */
+    paddingTop?: number;
+    /** Right padding in pixels (overrides uniform padding) */
+    paddingRight?: number;
+    /** Bottom padding in pixels (overrides uniform padding) */
+    paddingBottom?: number;
+    /** Left padding in pixels (overrides uniform padding) */
+    paddingLeft?: number;
+    /** Font family (default: 'arial') */
+    fontType?: FontType;
+    /** Font size in pixels (default: 40) */
+    fontSize?: number;
+    /** Font weight (default: 'normal') */
+    fontWeight?: FontWeight;
+    /** Line height multiplier (default: 1.2) */
+    lineHeight?: number;
+    /** Letter spacing in pixels (default: 0) */
+    letterSpacing?: number;
+    /** How text wraps to new lines (default: 'word') */
+    textWrap?: TextWrap;
+    /** How words break across lines (default: 'normal') */
+    wordBreak?: WordBreak;
+    /** Automatic hyphenation (default: 'none') */
+    hyphenation?: Hyphenation;
+    /** Maximum lines (0 = unlimited) (default: 0) */
+    maxLines?: number;
+    /** How overflow is handled (default: 'clip') */
+    textOverflow?: TextOverflow;
+    /** Ellipsis string for overflow (default: '...') */
+    ellipsis?: string;
+    /** Text color (default: '#000000') */
+    color?: string;
+    /** Background color in hex format #RRGGBB (default: transparent) */
+    backgroundColor?: string;
+    /** Background opacity 0-100 (default: 100) */
+    backgroundOpacity?: number;
+    /** Border radius for background box - individual corners (default: 0) */
+    backgroundBorderRadius?: BorderRadiusConfig;
+    /** Text outline color (default: none) */
+    strokeColor?: string;
+    /** Outline width in pixels (default: 0) */
+    strokeWidth?: number;
+    /** When true, box shrinks to fit content (width becomes max width) */
+    autoWidth?: boolean;
+    /** Which side the box anchors to when autoWidth is true (default: 'left') */
+    boxAlign?: 'left' | 'center' | 'right';
+}
+/**
+ * Audio segment - background audio or music
+ */
+interface AudioSegment extends BaseSegment {
+    type: 'audio';
+    /** Audio volume percentage 0-100 (default: 100) */
+    volume?: number;
+    /** Playback speed multiplier (default: 1) */
+    speed?: number;
+}
+/**
+ * Union type for all segment types
+ */
+type Segment = VideoSegment | ImageSegment | TextSegment | AudioSegment;
+/**
+ * Union type for visual segments only (for rendering)
+ */
+type VisualSegmentUnion = VideoSegment | ImageSegment | TextSegment;
+/**
+ * Static segments (for image output - no video/audio)
+ */
+type StaticSegment = ImageSegment | TextSegment;
+
+/**
+ * Editor configuration types
+ *
+ * Editors are the top-level containers that define the canvas dimensions,
+ * timing, and channels containing segments.
+ */
+
+/**
+ * A channel (track) containing segments
+ * Channels allow for parallel playback of segments
+ */
+interface Channel<T extends Segment = Segment> {
+    /** Unique channel identifier */
+    id: string;
+    /** Segments in this channel */
+    segments: T[];
+}
+/**
+ * Base editor configuration shared by all editor types
+ */
+interface BaseEditorConfig {
+    /** Canvas width in pixels */
+    width: number;
+    /** Canvas height in pixels */
+    height: number;
+    /** Frames per second (video only) */
+    fps: number;
+    /** Total duration in milliseconds (auto-calculated if 0 or undefined) */
+    duration?: number;
+}
+/**
+ * Full editor configuration with all segment types
+ * Used for video output
+ */
+interface EditorConfig extends BaseEditorConfig {
+    channels: Channel[];
+    /** Dynamic crop configuration (optional) */
+    dynamicCrop?: DynamicCropConfig;
+}
+/**
+ * Video editor configuration
+ * Supports all segment types including video and audio
+ */
+interface VideoEditorConfig extends BaseEditorConfig {
+    channels: Channel<VideoSegment | ImageSegment | TextSegment | AudioSegment>[];
+    /** Dynamic crop configuration (optional) */
+    dynamicCrop?: DynamicCropConfig;
+}
+/**
+ * Image editor configuration
+ * Only supports text and image segments (no video/audio)
+ */
+interface ImageEditorConfig extends BaseEditorConfig {
+    channels: Channel<StaticSegment>[];
+    /** Dynamic crop configuration (optional) */
+    dynamicCrop?: DynamicCropConfig;
+}
+/**
+ * Editor segment - a nested composition within another editor
+ * Allows for compositing multiple editors together
+ */
+interface EditorSegment {
+    type: 'editor';
+    /** Unique segment identifier */
+    id: string;
+    /** Empty source (editor segments don't have external sources) */
+    source: '';
+    /** Sequence order within channel */
+    order: number;
+    /** Time offset */
+    offset: {
+        type: 'absolute' | 'relative';
+        value: number;
+    };
+    /** Position and size */
+    xOffset: number;
+    yOffset: number;
+    width: number;
+    height: number;
+    /** Layer order */
+    zIndex?: number;
+    /** Scale multiplier */
+    scale?: number;
+    /** Rotation in degrees */
+    rotation?: number;
+    /** The nested editor configuration */
+    editor: EditorConfig;
+    /** How the rendered sub-editor fits in bounds */
+    fit?: 'cover' | 'contain' | 'fill';
+    /** Opacity 0-100 */
+    opacity?: number;
+    /** Playback speed for the nested composition */
+    speed?: number;
+    /** Audio volume for the nested composition */
+    volume?: number;
+}
+
+interface ImageEditorCompositionProps {
+    /** The editor configuration to render (legacy format with pre-resolved segments) */
+    config?: ImageEditorConfig;
+    /** Map of source URLs keyed by segment ID or input reference */
+    sources?: Record<string, string>;
+    /** Optional scale multiplier for high-DPI rendering */
+    scale?: number;
+    /** Raw elements with relative positioning (will be resolved internally) */
+    elements?: ImageEditorElement[];
+    /** Canvas width (required when using elements) */
+    width?: number;
+    /** Canvas height (required when using elements) */
+    height?: number;
+    /** Background fit mode (when using elements) */
+    backgroundFit?: FitMode;
+    /** Background image URL (when using elements) */
+    backgroundUrl?: string;
+    /** Image URLs keyed by inputId (when using elements) */
+    imageUrls?: Record<string, string | null>;
+    /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
+    textValues?: Record<string, string>;
+}
+/**
+ * ImageEditorComposition renders a complete image editor configuration.
+ *
+ * Features:
+ * - Background image with fit mode
+ * - Multiple text and image elements
+ * - Z-index ordering
+ * - All text styling (fonts, colors, stroke, background, etc.)
+ * - All image styling (fit, opacity, rotation, border radius)
+ * - Automatic position resolution for relative positioning
+ *
+ * @example
+ * ```tsx
+ * import { Player } from '@remotion/player';
+ * import { ImageEditorComposition } from '@ugcinc/remotion';
+ *
+ * // NEW: Pass raw elements directly (preferred)
+ * <Player
+ *   component={ImageEditorComposition}
+ *   inputProps={{
+ *     elements,
+ *     width: 1080,
+ *     height: 1920,
+ *     backgroundUrl,
+ *     imageUrls,
+ *     textValues
+ *   }}
+ *   durationInFrames={1}
+ *   fps={1}
+ *   compositionWidth={1080}
+ *   compositionHeight={1920}
+ * />
+ * ```
+ */
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+
+interface VideoEditorCompositionProps {
+    /** The editor configuration to render */
+    config: VideoEditorConfig;
+    /** Map of source URLs keyed by segment ID or input reference */
+    sources?: Record<string, string>;
+    /** Map of text content keyed by segment ID or input reference */
+    textContent?: Record<string, string>;
+    /** Optional scale multiplier for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * VideoEditorComposition renders a complete video editor configuration.
+ *
+ * Features:
+ * - Multiple channels with segments
+ * - Video, image, text, and audio segments
+ * - Timeline-based playback
+ * - Overlay segments with relative timing
+ * - Fade-in effects
+ * - Z-index ordering
+ *
+ * @example
+ * ```tsx
+ * import { Player } from '@remotion/player';
+ * import { VideoEditorComposition } from '@ugcinc/remotion';
+ *
+ * <Player
+ *   component={VideoEditorComposition}
+ *   inputProps={{ config, sources, textContent }}
+ *   durationInFrames={durationInFrames}
+ *   fps={config.fps}
+ *   compositionWidth={config.width}
+ *   compositionHeight={config.height}
+ * />
+ * ```
+ */
+declare function VideoEditorComposition({ config, sources, textContent, }: VideoEditorCompositionProps): react_jsx_runtime.JSX.Element;
+
+interface TextElementProps {
+    segment: TextSegment;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * TextElement renders text with full styling support including:
+ * - Font family, size, weight, color
+ * - Letter spacing, line height
+ * - Horizontal and vertical alignment
+ * - Text stroke/outline
+ * - Background with opacity and border radius
+ * - Padding (uniform and individual)
+ * - Auto-width with box alignment
+ * - Rotation
+ */
+declare function TextElement({ segment, scale }: TextElementProps): react_jsx_runtime.JSX.Element;
+
+interface ImageElementProps {
+    segment: ImageSegment;
+    /** The source URL of the image */
+    src: string;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * ImageElement renders images with:
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius (uniform or per-corner)
+ */
+declare function ImageElement({ segment, src, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
+
+interface VideoElementProps {
+    segment: VideoSegment;
+    /** The source URL of the video */
+    src: string;
+    /** Start frame of this segment in the composition */
+    startFrame: number;
+    /** Duration of this segment in frames */
+    durationInFrames: number;
+    /** Optional scale for high-DPI rendering */
+    scale?: number;
+}
+/**
+ * VideoElement renders videos with:
+ * - Playback speed control
+ * - Volume control
+ * - Fit modes (cover, contain, fill)
+ * - Opacity
+ * - Rotation
+ * - Border radius
+ * - Fade-in effect
+ */
+declare function VideoElement({ segment, src, startFrame, durationInFrames, scale }: VideoElementProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Font utilities for the rendering system
+ */
+
+/**
+ * Font family CSS strings for each font type
+ * These match the fonts registered in the rendering system
+ */
+declare const FONT_FAMILIES: Record<FontType, string>;
+/**
+ * Get the CSS font family string for a font type
+ */
+declare function getFontFamily(fontType: FontType): string;
+/**
+ * Build a CSS font string
+ */
+declare function buildFontString({ fontType, fontSize, fontWeight, }: {
+    fontType: FontType;
+    fontSize: number;
+    fontWeight: 'normal' | 'bold';
+}): string;
+/**
+ * Font URLs for loading web fonts
+ * These are the public URLs to the font files
+ */
+declare const FONT_URLS: {
+    tiktok: {
+        regular: string;
+        bold: string;
+    };
+    apple: {
+        regular: string;
+    };
+};
+/**
+ * Preload fonts for Remotion rendering
+ * Call this in your Root component or composition
+ */
+declare function preloadFonts(): Promise<void>;
+/**
+ * Check if fonts are loaded
+ */
+declare function areFontsLoaded(): boolean;
+
+/**
+ * Fit calculation utilities for media positioning
+ */
+
+/**
+ * Result of fit dimension calculation
+ */
+interface FitDimensions {
+    /** X offset within target area */
+    x: number;
+    /** Y offset within target area */
+    y: number;
+    /** Rendered width */
+    width: number;
+    /** Rendered height */
+    height: number;
+    /** Source X offset (for cropping) */
+    sourceX: number;
+    /** Source Y offset (for cropping) */
+    sourceY: number;
+    /** Source width to use */
+    sourceWidth: number;
+    /** Source height to use */
+    sourceHeight: number;
+}
+/**
+ * Calculate dimensions for fit modes (cover, contain, fill)
+ */
+declare function calculateFitDimensions({ sourceWidth, sourceHeight, targetWidth, targetHeight, fit, }: {
+    sourceWidth: number;
+    sourceHeight: number;
+    targetWidth: number;
+    targetHeight: number;
+    fit: FitMode;
+}): FitDimensions;
+
+/**
+ * Default values for segment properties
+ *
+ * These defaults match the server-side rendering defaults exactly
+ * to ensure consistent behavior between client preview and server render.
+ */
+
+/**
+ * Default values for text segments
+ */
+declare const TEXT_DEFAULTS: {
+    fontType: FontType;
+    fontSize: number;
+    fontWeight: FontWeight;
+    color: string;
+    alignment: TextAlignment;
+    verticalAlign: VerticalAlignment;
+    direction: TextDirection;
+    lineHeight: number;
+    letterSpacing: number;
+    padding: number;
+    textWrap: TextWrap;
+    wordBreak: WordBreak;
+    hyphenation: Hyphenation;
+    maxLines: number;
+    textOverflow: TextOverflow;
+    ellipsis: string;
+    strokeWidth: number;
+    backgroundOpacity: number;
+    autoWidth: boolean;
+    boxAlign: "left";
+};
+/**
+ * Default values for image segments
+ */
+declare const IMAGE_DEFAULTS: {
+    fit: FitMode;
+    opacity: number;
+    loop: boolean;
+    speed: number;
+};
+/**
+ * Default values for video segments
+ */
+declare const VIDEO_DEFAULTS: {
+    volume: number;
+    fit: FitMode;
+    opacity: number;
+    loop: boolean;
+    speed: number;
+};
+/**
+ * Default values for visual segment positioning
+ */
+declare const VISUAL_DEFAULTS: {
+    xOffset: number;
+    yOffset: number;
+    zIndex: number;
+    scale: number;
+    rotation: number;
+    opacity: number;
+};
+/**
+ * Apply default values to a text segment
+ */
+declare function applyTextDefaults<T extends Record<string, unknown>>(segment: T): T & typeof TEXT_DEFAULTS;
+/**
+ * Apply default values to an image segment
+ */
+declare function applyImageDefaults<T extends Record<string, unknown>>(segment: T): T & typeof IMAGE_DEFAULTS;
+/**
+ * Apply default values to a video segment
+ */
+declare function applyVideoDefaults<T extends Record<string, unknown>>(segment: T): T & typeof VIDEO_DEFAULTS;
+
+/**
+ * Text utilities for measuring and wrapping text
+ */
+
+/**
+ * Wrap text to fit within a specific width
+ * Accounts for letter spacing when measuring text width
+ */
+declare function wrapText({ text, maxWidth, letterSpacing, textWrap, maxLines, measureText, }: {
+    text: string;
+    maxWidth: number;
+    letterSpacing?: number;
+    textWrap?: 'word' | 'char' | 'none';
+    maxLines?: number;
+    measureText: (text: string) => number;
+}): string[];
+/**
+ * Calculate line width with letter spacing
+ */
+declare function calculateLineWidth({ line, letterSpacing, measureText, }: {
+    line: string;
+    letterSpacing: number;
+    measureText: (text: string) => number;
+}): number;
+/**
+ * Convert borderRadius value to array format for roundRect()
+ * Returns [topLeft, topRight, bottomRight, bottomLeft] or null if no rounding needed
+ */
+declare function getBorderRadii(borderRadius: number | BorderRadiusConfig | undefined): number[] | null;
+/**
+ * Parse hex color to RGB values
+ */
+declare function parseHexColor(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Convert hex color and opacity to rgba string
+ */
+declare function hexToRgba(hex: string, opacity?: number): string;
+
+/**
+ * Position Resolution Utility
+ *
+ * Resolves relative element positions to absolute coordinates.
+ * X and Y positions can be independently set to relative or absolute.
+ * Handles dependency resolution, circular dependency detection, and cascading updates.
+ */
+
+/**
+ * Calculate the actual width of a text element when autoWidth is enabled
+ * Returns { actualWidth, actualX } where actualX is adjusted based on boxAlign
+ */
+declare function calculateAutoWidthDimensions(elem: ImageEditorElement, textContent: string, ctx?: CanvasRenderingContext2D | null): {
+    actualWidth: number;
+    actualX: number;
+} | null;
+interface PositionResolutionError {
+    elementId: string;
+    type: 'circular_dependency' | 'missing_reference' | 'invalid_config';
+    message: string;
+    /** Which axis the error is for */
+    axis?: 'x' | 'y';
+    /** For circular dependencies, the cycle path */
+    cyclePath?: string[];
+}
+interface PositionResolutionResult {
+    /** Elements with resolved absolute positions */
+    elements: ImageEditorElement[];
+    /** Any errors encountered during resolution */
+    errors: PositionResolutionError[];
+}
+/**
+ * Resolve all relative positions to absolute coordinates
+ *
+ * X and Y are resolved independently, allowing:
+ * - X absolute, Y relative (common for vertical stacking)
+ * - X relative, Y absolute (common for horizontal stacking)
+ * - Both relative (can be to different elements)
+ * - Both absolute
+ *
+ * @param elements - Array of elements to resolve
+ * @param textValues - Optional map of textInputId -> text content for autoWidth calculation
+ */
+declare function resolveElementPositions(elements: ImageEditorElement[], textValues?: Record<string, string>): PositionResolutionResult;
+/**
+ * Check if an element can be set as a reference for another element on a specific axis
+ */
+declare function canSetAsReference(elements: ImageEditorElement[], elementId: string, proposedReferenceId: string, axis: 'x' | 'y'): boolean;
+/**
+ * Get all elements that would be affected if a given element's position/size changes
+ */
+declare function getDependentElements(elements: ImageEditorElement[], elementId: string): string[];
+/**
+ * Get the element that a given element references for X position (if any)
+ */
+declare function getReferenceElementX(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
+/**
+ * Get the element that a given element references for Y position (if any)
+ */
+declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
+
+/**
+ * Hook exports for @ugcinc/remotion
+ *
+ * Hooks for common operations like font loading, media preloading,
+ * and position resolution.
+ */
+
+/**
+ * Hook to ensure fonts are loaded before rendering
+ * Returns true when fonts are ready
+ */
+declare function useFontsLoaded(): boolean;
+/**
+ * Hook to load an image and return it when ready
+ */
+declare function useImageLoader(src: string | undefined): HTMLImageElement | null;
+/**
+ * Hook to preload multiple images
+ */
+declare function useImagePreloader(sources: Record<string, string>): {
+    loaded: boolean;
+    images: Record<string, HTMLImageElement>;
+};
+/**
+ * Hook to resolve element positions for UI overlay positioning
+ *
+ * Use this hook in the webapp to get the resolved positions of elements
+ * for positioning interaction overlays (drag handles, selection outlines, etc.)
+ *
+ * @param elements - Raw elements with relative positioning
+ * @param textValues - Optional map of textInputId -> text content for autoWidth calculation
+ * @returns Object with resolved elements and any resolution errors
+ *
+ * @example
+ * ```tsx
+ * const { elements: resolvedElements, errors } = useResolvedPositions(
+ *   elements,
+ *   previewTextValues
+ * );
+ *
+ * // Use resolvedElements for positioning overlays
+ * resolvedElements.map(elem => (
+ *   <div style={{ left: elem.x, top: elem.y, width: elem.width, height: elem.height }}>
+ *     {/* Drag handles, selection outline, etc. *\/}
+ *   </div>
+ * ))
+ * ```
+ */
+declare function useResolvedPositions(elements: ImageEditorElement[], textValues?: Record<string, string>): PositionResolutionResult;
+
+/**
+ * Remotion Root Component
+ *
+ * This file registers all available compositions with Remotion.
+ * It serves as the entry point for the Remotion bundler.
+ */
+
+declare const RemotionRoot: React.FC;
+
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RemotionRoot, type Segment, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateFitDimensions, calculateLineWidth, canSetAsReference, getBorderRadii, getDependentElements, getFontFamily, getReferenceElementX, getReferenceElementY, hexToRgba, parseHexColor, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };