ugcinc-render 1.5.25 → 1.5.27

package/dist/index.d.mts

@@ -80,6 +80,74 @@ type Hyphenation = 'none' | 'auto';
  * Text overflow behavior
  */
 type TextOverflow = 'clip' | 'ellipsis';
+/**
+ * Shared text styling properties used by both render and UI text segments.
+ * This ensures feature parity between image editor and video editor text elements.
+ */
+interface TextStyleProperties {
+    /** 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) */
+    padding?: number;
+    /** Top padding in pixels */
+    paddingTop?: number;
+    /** Right padding in pixels */
+    paddingRight?: number;
+    /** Bottom padding in pixels */
+    paddingBottom?: number;
+    /** Left padding in pixels */
+    paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: 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';
+}
 
 /**
  * Position and anchor types for relative element positioning
@@ -437,32 +505,16 @@ interface VideoEditorImageSegment extends VideoEditorVisualSegment {
 }
 /**
  * Text segment (UI)
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface VideoEditorTextSegment extends VideoEditorVisualSegment {
+interface VideoEditorTextSegment extends VideoEditorVisualSegment, TextStyleProperties {
     type: 'text';
     /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
     /** Actual text content (set after textInputRef is resolved) */
     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
@@ -600,74 +652,15 @@ interface ImageSegment extends PictureSegment {
 }
 /**
  * Text segment - rich text overlays with full typography control
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface TextSegment extends VisualSegment {
+interface TextSegment extends VisualSegment, TextStyleProperties {
     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;
-    /** Extra top padding added when text has 2+ lines */
-    multiLineExtraPaddingTop?: number;
-    /** Extra right padding added when text has 2+ lines */
-    multiLineExtraPaddingRight?: number;
-    /** Extra bottom padding added when text has 2+ lines */
-    multiLineExtraPaddingBottom?: number;
-    /** Extra left padding added when text has 2+ lines */
-    multiLineExtraPaddingLeft?: 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
@@ -1365,8 +1358,11 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * 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).
  */
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, 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, RenderRoot, type Segment, type SegmentTimelinePosition, 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, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, 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, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, 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, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -80,6 +80,74 @@ type Hyphenation = 'none' | 'auto';
  * Text overflow behavior
  */
 type TextOverflow = 'clip' | 'ellipsis';
+/**
+ * Shared text styling properties used by both render and UI text segments.
+ * This ensures feature parity between image editor and video editor text elements.
+ */
+interface TextStyleProperties {
+    /** 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) */
+    padding?: number;
+    /** Top padding in pixels */
+    paddingTop?: number;
+    /** Right padding in pixels */
+    paddingRight?: number;
+    /** Bottom padding in pixels */
+    paddingBottom?: number;
+    /** Left padding in pixels */
+    paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: 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';
+}
 
 /**
  * Position and anchor types for relative element positioning
@@ -437,32 +505,16 @@ interface VideoEditorImageSegment extends VideoEditorVisualSegment {
 }
 /**
  * Text segment (UI)
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface VideoEditorTextSegment extends VideoEditorVisualSegment {
+interface VideoEditorTextSegment extends VideoEditorVisualSegment, TextStyleProperties {
     type: 'text';
     /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
     /** Actual text content (set after textInputRef is resolved) */
     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
@@ -600,74 +652,15 @@ interface ImageSegment extends PictureSegment {
 }
 /**
  * Text segment - rich text overlays with full typography control
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface TextSegment extends VisualSegment {
+interface TextSegment extends VisualSegment, TextStyleProperties {
     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;
-    /** Extra top padding added when text has 2+ lines */
-    multiLineExtraPaddingTop?: number;
-    /** Extra right padding added when text has 2+ lines */
-    multiLineExtraPaddingRight?: number;
-    /** Extra bottom padding added when text has 2+ lines */
-    multiLineExtraPaddingBottom?: number;
-    /** Extra left padding added when text has 2+ lines */
-    multiLineExtraPaddingLeft?: 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
@@ -1365,8 +1358,11 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * 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).
  */
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, 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, RenderRoot, type Segment, type SegmentTimelinePosition, 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, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, 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, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, 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, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -2126,6 +2126,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!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...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = 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
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2133,8 +2182,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/dist/index.mjs

@@ -2040,6 +2040,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!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...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = 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
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
@@ -2047,8 +2096,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/package.json

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