ugcinc-render 1.3.13 → 1.4.0

package/dist/index.d.mts

@@ -457,6 +457,15 @@ interface VideoEditorNodeConfig {
     previewUrls?: Record<string, string>;
     previewTextValues?: Record<string, string>;
 }
+/**
+ * Segment position on timeline (calculated from segment timing properties)
+ */
+interface SegmentTimelinePosition {
+    /** Start time in milliseconds */
+    startMs: number;
+    /** Duration in milliseconds */
+    durationMs: number;
+}
 
 /**
  * Segment types for the rendering system
@@ -756,6 +765,8 @@ interface ImageEditorCompositionProps {
     imageUrls?: Record<string, string | null>;
     /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
     textValues?: Record<string, string>;
+    /** Dynamic crop configuration */
+    dynamicCrop?: DynamicCropConfig;
 }
 /**
  * ImageEditorComposition renders a complete image editor configuration.
@@ -790,7 +801,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, dynamicCrop, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -1144,6 +1155,87 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
  */
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
+/**
+ * Utility functions for calculating dynamic crop bounds
+ */
+
+/**
+ * Calculate dynamic crop bounds based on element positions
+ *
+ * @param elements - Array of resolved elements with absolute positions
+ * @param dynamicCrop - Crop configuration
+ * @param canvasWidth - Original canvas width
+ * @param canvasHeight - Original canvas height
+ * @returns CropBounds with x, y, width, height
+ */
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+/**
+ * Check if dynamic crop is enabled (either vertical or horizontal)
+ */
+declare function isDynamicCropEnabled(dynamicCrop: DynamicCropConfig | undefined): boolean;
+
+/**
+ * Timeline utility functions for video editor
+ *
+ * These functions calculate segment positions on the timeline based on
+ * the segment/overlay timing model. Used by both the webapp UI and
+ * the VideoEditorComposition for rendering.
+ */
+
+/**
+ * Create a default TimeValue for segment offsets
+ */
+declare function defaultOffset(mode?: TimeMode): TimeValue;
+/**
+ * Get base segments (no parentId) for a channel
+ * Base segments are the primary timeline elements that overlays attach to
+ */
+declare function getBaseSegments(channel: VideoEditorChannel): VideoEditorSegment[];
+/**
+ * Get overlays for a specific parent segment (or global overlays if parentId is null)
+ */
+declare function getOverlays(channel: VideoEditorChannel, parentId: string | null): VideoEditorSegment[];
+/**
+ * Calculate segment position on timeline
+ *
+ * For base segments:
+ * - Position is calculated from offset and previous segments
+ * - Duration is from the duration property or default (5 seconds)
+ *
+ * For overlay segments:
+ * - Position is calculated relative to parent using relativeStart/relativeEnd
+ * - relativeStart/relativeEnd are fractions (0-1) of parent duration
+ */
+declare function getSegmentTimelinePosition(segment: VideoEditorSegment, baseSegments: VideoEditorSegment[], channel: VideoEditorChannel): SegmentTimelinePosition;
+/**
+ * Check if a segment is visible at a given time
+ */
+declare function isSegmentVisibleAtTime(segment: VideoEditorSegment, time: number, channel: VideoEditorChannel): boolean;
+/**
+ * Calculate estimated total duration based on segments
+ */
+declare function calculateEstimatedDuration(channels: VideoEditorChannel[]): number;
+/**
+ * Calculate the timeline content end time (used for both ruler and scroll width)
+ */
+declare function calculateTimelineContentEnd(channel: VideoEditorChannel): number;
+/**
+ * Format time in mm:ss.ms
+ */
+declare function formatTime(ms: number): string;
+/**
+ * Parse time string to milliseconds
+ */
+declare function parseTime(timeStr: string): number;
+/**
+ * Generate a unique segment ID
+ */
+declare function generateSegmentId(): string;
+/**
+ * Generate a unique overlay ID
+ */
+declare function generateOverlayId(): string;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1203,4 +1295,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: 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, RenderRoot, 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 };
+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, 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, 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

@@ -457,6 +457,15 @@ interface VideoEditorNodeConfig {
     previewUrls?: Record<string, string>;
     previewTextValues?: Record<string, string>;
 }
+/**
+ * Segment position on timeline (calculated from segment timing properties)
+ */
+interface SegmentTimelinePosition {
+    /** Start time in milliseconds */
+    startMs: number;
+    /** Duration in milliseconds */
+    durationMs: number;
+}
 
 /**
  * Segment types for the rendering system
@@ -756,6 +765,8 @@ interface ImageEditorCompositionProps {
     imageUrls?: Record<string, string | null>;
     /** Text values keyed by textInputId (when using elements, for autoWidth calculation) */
     textValues?: Record<string, string>;
+    /** Dynamic crop configuration */
+    dynamicCrop?: DynamicCropConfig;
 }
 /**
  * ImageEditorComposition renders a complete image editor configuration.
@@ -790,7 +801,7 @@ interface ImageEditorCompositionProps {
  * />
  * ```
  */
-declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
+declare function ImageEditorComposition({ config, sources, scale, elements, width, height, backgroundType, backgroundColor, backgroundFit, backgroundUrl, imageUrls, textValues, dynamicCrop, }: ImageEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
 interface VideoEditorCompositionProps {
     /** The editor configuration to render */
@@ -1144,6 +1155,87 @@ declare function getReferenceElementX(elements: ImageEditorElement[], elementId:
  */
 declare function getReferenceElementY(elements: ImageEditorElement[], elementId: string): ImageEditorElement | null;
 
+/**
+ * Utility functions for calculating dynamic crop bounds
+ */
+
+/**
+ * Calculate dynamic crop bounds based on element positions
+ *
+ * @param elements - Array of resolved elements with absolute positions
+ * @param dynamicCrop - Crop configuration
+ * @param canvasWidth - Original canvas width
+ * @param canvasHeight - Original canvas height
+ * @returns CropBounds with x, y, width, height
+ */
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+/**
+ * Check if dynamic crop is enabled (either vertical or horizontal)
+ */
+declare function isDynamicCropEnabled(dynamicCrop: DynamicCropConfig | undefined): boolean;
+
+/**
+ * Timeline utility functions for video editor
+ *
+ * These functions calculate segment positions on the timeline based on
+ * the segment/overlay timing model. Used by both the webapp UI and
+ * the VideoEditorComposition for rendering.
+ */
+
+/**
+ * Create a default TimeValue for segment offsets
+ */
+declare function defaultOffset(mode?: TimeMode): TimeValue;
+/**
+ * Get base segments (no parentId) for a channel
+ * Base segments are the primary timeline elements that overlays attach to
+ */
+declare function getBaseSegments(channel: VideoEditorChannel): VideoEditorSegment[];
+/**
+ * Get overlays for a specific parent segment (or global overlays if parentId is null)
+ */
+declare function getOverlays(channel: VideoEditorChannel, parentId: string | null): VideoEditorSegment[];
+/**
+ * Calculate segment position on timeline
+ *
+ * For base segments:
+ * - Position is calculated from offset and previous segments
+ * - Duration is from the duration property or default (5 seconds)
+ *
+ * For overlay segments:
+ * - Position is calculated relative to parent using relativeStart/relativeEnd
+ * - relativeStart/relativeEnd are fractions (0-1) of parent duration
+ */
+declare function getSegmentTimelinePosition(segment: VideoEditorSegment, baseSegments: VideoEditorSegment[], channel: VideoEditorChannel): SegmentTimelinePosition;
+/**
+ * Check if a segment is visible at a given time
+ */
+declare function isSegmentVisibleAtTime(segment: VideoEditorSegment, time: number, channel: VideoEditorChannel): boolean;
+/**
+ * Calculate estimated total duration based on segments
+ */
+declare function calculateEstimatedDuration(channels: VideoEditorChannel[]): number;
+/**
+ * Calculate the timeline content end time (used for both ruler and scroll width)
+ */
+declare function calculateTimelineContentEnd(channel: VideoEditorChannel): number;
+/**
+ * Format time in mm:ss.ms
+ */
+declare function formatTime(ms: number): string;
+/**
+ * Parse time string to milliseconds
+ */
+declare function parseTime(timeStr: string): number;
+/**
+ * Generate a unique segment ID
+ */
+declare function generateSegmentId(): string;
+/**
+ * Generate a unique overlay ID
+ */
+declare function generateOverlayId(): string;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1203,4 +1295,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: 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, RenderRoot, 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 };
+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, 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, 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

@@ -39,16 +39,29 @@ __export(index_exports, {
   areFontsLoaded: () => areFontsLoaded,
   buildFontString: () => buildFontString,
   calculateAutoWidthDimensions: () => calculateAutoWidthDimensions,
+  calculateCropBounds: () => calculateCropBounds,
+  calculateEstimatedDuration: () => calculateEstimatedDuration,
   calculateFitDimensions: () => calculateFitDimensions,
   calculateLineWidth: () => calculateLineWidth,
+  calculateTimelineContentEnd: () => calculateTimelineContentEnd,
   canSetAsReference: () => canSetAsReference,
+  defaultOffset: () => defaultOffset,
+  formatTime: () => formatTime,
+  generateOverlayId: () => generateOverlayId,
+  generateSegmentId: () => generateSegmentId,
+  getBaseSegments: () => getBaseSegments,
   getBorderRadii: () => getBorderRadii,
   getDependentElements: () => getDependentElements,
   getFontFamily: () => getFontFamily,
+  getOverlays: () => getOverlays,
   getReferenceElementX: () => getReferenceElementX,
   getReferenceElementY: () => getReferenceElementY,
+  getSegmentTimelinePosition: () => getSegmentTimelinePosition,
   hexToRgba: () => hexToRgba,
+  isDynamicCropEnabled: () => isDynamicCropEnabled,
+  isSegmentVisibleAtTime: () => isSegmentVisibleAtTime,
   parseHexColor: () => parseHexColor,
+  parseTime: () => parseTime,
   preloadFonts: () => preloadFonts,
   resolveElementPositions: () => resolveElementPositions,
   useFontsLoaded: () => useFontsLoaded,
@@ -799,6 +812,113 @@ function getReferenceElementY(elements, elementId) {
   return elements.find((e) => e.id === element.relativePositionY.elementId) ?? null;
 }
 
+// src/utils/cropBounds.ts
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+  if (!dynamicCrop) {
+    return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
+  }
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    elementMap.set(elem.id, elem);
+  }
+  const resolveBoundary = (boundary) => {
+    if (!boundary) return void 0;
+    if (boundary.elementId) return boundary.elementId;
+    return void 0;
+  };
+  let cropY = 0;
+  let cropHeight = canvasHeight;
+  if (dynamicCrop.vertical?.enabled) {
+    const vCrop = dynamicCrop.vertical;
+    const paddingStart = vCrop.paddingStart ?? 0;
+    const paddingEnd = vCrop.paddingEnd ?? 0;
+    if (vCrop.mode === "all-elements") {
+      let minY = canvasHeight;
+      let maxY = 0;
+      for (const elem of elements) {
+        minY = Math.min(minY, elem.y);
+        maxY = Math.max(maxY, elem.y + elem.height);
+      }
+      if (elements.length > 0) {
+        cropY = Math.max(0, minY - paddingStart);
+        const bottomY = Math.min(canvasHeight, maxY + paddingEnd);
+        cropHeight = bottomY - cropY;
+      }
+    } else if (vCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(vCrop.startBoundary);
+      const endElementId = resolveBoundary(vCrop.endBoundary);
+      let topY = 0;
+      let bottomY = canvasHeight;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          topY = startElem.y;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          bottomY = endElem.y + endElem.height;
+        }
+      }
+      cropY = Math.max(0, topY - paddingStart);
+      const adjustedBottom = Math.min(canvasHeight, bottomY + paddingEnd);
+      cropHeight = adjustedBottom - cropY;
+    }
+    if (vCrop.minSize && cropHeight < vCrop.minSize) {
+      cropHeight = vCrop.minSize;
+    }
+  }
+  let cropX = 0;
+  let cropWidth = canvasWidth;
+  if (dynamicCrop.horizontal?.enabled) {
+    const hCrop = dynamicCrop.horizontal;
+    const paddingStart = hCrop.paddingStart ?? 0;
+    const paddingEnd = hCrop.paddingEnd ?? 0;
+    if (hCrop.mode === "all-elements") {
+      let minX = canvasWidth;
+      let maxX = 0;
+      for (const elem of elements) {
+        minX = Math.min(minX, elem.x);
+        maxX = Math.max(maxX, elem.x + elem.width);
+      }
+      if (elements.length > 0) {
+        cropX = Math.max(0, minX - paddingStart);
+        const rightX = Math.min(canvasWidth, maxX + paddingEnd);
+        cropWidth = rightX - cropX;
+      }
+    } else if (hCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(hCrop.startBoundary);
+      const endElementId = resolveBoundary(hCrop.endBoundary);
+      let leftX = 0;
+      let rightX = canvasWidth;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          leftX = startElem.x;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          rightX = endElem.x + endElem.width;
+        }
+      }
+      cropX = Math.max(0, leftX - paddingStart);
+      const adjustedRight = Math.min(canvasWidth, rightX + paddingEnd);
+      cropWidth = adjustedRight - cropX;
+    }
+    if (hCrop.minSize && cropWidth < hCrop.minSize) {
+      cropWidth = hCrop.minSize;
+    }
+  }
+  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
+}
+function isDynamicCropEnabled(dynamicCrop) {
+  if (!dynamicCrop) return false;
+  return !!(dynamicCrop.vertical?.enabled || dynamicCrop.horizontal?.enabled);
+}
+
 // src/compositions/ImageEditorComposition.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getSortedSegments(config) {
@@ -879,8 +999,11 @@ function ImageEditorComposition({
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
-  textValues = {}
+  textValues = {},
+  dynamicCrop
 }) {
+  const canvasWidth = width ?? config?.width ?? 1080;
+  const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = (0, import_react3.useMemo)(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);
@@ -889,6 +1012,10 @@ function ImageEditorComposition({
     }
     return result.elements;
   }, [elements, textValues]);
+  const cropBounds = (0, import_react3.useMemo)(() => {
+    if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
   const segmentsFromElements = (0, import_react3.useMemo)(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -905,10 +1032,10 @@ function ImageEditorComposition({
     }
     return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   }, [resolvedElements, imageUrls, textValues]);
-  const canvasWidth = width ?? config?.width ?? 1080;
-  const canvasHeight = height ?? config?.height ?? 1920;
   const bgFit = backgroundFit ?? "cover";
   const bgUrl = backgroundUrl ?? sources.background;
+  const cropOffsetX = cropBounds?.x ?? 0;
+  const cropOffsetY = cropBounds?.y ?? 0;
   const contentSegments = segmentsFromElements ?? (() => {
     if (!config) return [];
     const sorted = getSortedSegments(config);
@@ -929,61 +1056,73 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: [
-    backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_remotion2.Img,
-      {
-        src: bgUrl,
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: canvasWidth * scale,
-          height: canvasHeight * scale,
-          objectFit: bgFit
-        }
-      }
-    ),
-    legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      BackgroundImage,
-      {
-        segment: legacyBackgroundSegment,
-        src: getSource(legacyBackgroundSegment),
-        width: canvasWidth,
-        height: canvasHeight,
-        scale
-      }
-    ),
-    contentSegments.map((segment) => {
-      if (segment.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          TextElement,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -cropOffsetX * scale,
+        top: -cropOffsetY * scale,
+        width: canvasWidth * scale,
+        height: canvasHeight * scale
+      },
+      children: [
+        backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_remotion2.Img,
           {
-            segment,
-            scale
-          },
-          segment.id
-        );
-      }
-      if (segment.type === "image") {
-        const src = segment.source || getSource(segment);
-        if (!src) {
-          console.warn(`No source found for image segment: ${segment.id}`);
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          ImageElement,
+            src: bgUrl,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: canvasWidth * scale,
+              height: canvasHeight * scale,
+              objectFit: bgFit
+            }
+          }
+        ),
+        legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          BackgroundImage,
           {
-            segment,
-            src,
+            segment: legacyBackgroundSegment,
+            src: getSource(legacyBackgroundSegment),
+            width: canvasWidth,
+            height: canvasHeight,
             scale
-          },
-          segment.id
-        );
-      }
-      return null;
-    })
-  ] });
+          }
+        ),
+        contentSegments.map((segment) => {
+          if (segment.type === "text") {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              TextElement,
+              {
+                segment,
+                scale
+              },
+              segment.id
+            );
+          }
+          if (segment.type === "image") {
+            const src = segment.source || getSource(segment);
+            if (!src) {
+              console.warn(`No source found for image segment: ${segment.id}`);
+              return null;
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              ImageElement,
+              {
+                segment,
+                src,
+                scale
+              },
+              segment.id
+            );
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
 }
 function BackgroundImage({
   segment,
@@ -1333,6 +1472,101 @@ function calculateFitDimensions({
   };
 }
 
+// src/utils/timeline.ts
+function defaultOffset(mode = "flexible") {
+  return mode === "flexible" ? { type: "relative", value: 0 } : { type: "absolute", value: 0 };
+}
+function getBaseSegments(channel) {
+  return channel.segments.filter((s) => s.parentId === void 0);
+}
+function getOverlays(channel, parentId) {
+  return channel.segments.filter((s) => s.parentId === (parentId ?? void 0));
+}
+function getSegmentTimelinePosition(segment, baseSegments, channel) {
+  if (segment.parentId) {
+    const parent = channel.segments.find((s) => s.id === segment.parentId);
+    if (parent) {
+      const parentPos = getSegmentTimelinePosition(parent, baseSegments, channel);
+      const relStart = segment.relativeStart ?? 0;
+      const relEnd = segment.relativeEnd ?? 1;
+      return {
+        startMs: parentPos.startMs + parentPos.durationMs * relStart,
+        durationMs: parentPos.durationMs * (relEnd - relStart)
+      };
+    }
+  }
+  const baseIndex = baseSegments.findIndex((s) => s.id === segment.id);
+  let accumulatedTime = 0;
+  for (let i = 0; i < baseIndex; i++) {
+    const prev = baseSegments[i];
+    if (prev) {
+      accumulatedTime += prev.duration?.type === "absolute" ? prev.duration.value : 5e3;
+    }
+  }
+  const startMs = segment.offset.type === "absolute" ? segment.offset.value : accumulatedTime;
+  const durationMs = segment.duration?.type === "absolute" ? segment.duration.value : 5e3;
+  return { startMs, durationMs };
+}
+function isSegmentVisibleAtTime(segment, time, channel) {
+  const baseSegments = getBaseSegments(channel);
+  const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
+  const endMs = startMs + durationMs;
+  return time >= startMs && time < endMs;
+}
+function calculateEstimatedDuration(channels) {
+  let maxDuration = 5e3;
+  for (const channel of channels) {
+    let channelTime = 0;
+    for (const segment of channel.segments) {
+      if (segment.parentId) continue;
+      if (segment.offset.type === "absolute") {
+        channelTime = segment.offset.value;
+      } else {
+        channelTime += 5e3;
+      }
+      if (segment.duration?.type === "absolute") {
+        channelTime += segment.duration.value;
+      } else {
+        channelTime += 5e3;
+      }
+    }
+    maxDuration = Math.max(maxDuration, channelTime);
+  }
+  return maxDuration;
+}
+function calculateTimelineContentEnd(channel) {
+  const baseSegments = getBaseSegments(channel);
+  let lastEnd = 0;
+  for (const segment of baseSegments) {
+    const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
+    lastEnd = Math.max(lastEnd, startMs + durationMs);
+  }
+  return Math.ceil((lastEnd + 2e3) / 1e3) * 1e3;
+}
+function formatTime(ms) {
+  const totalSeconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const milliseconds = Math.floor(ms % 1e3 / 10);
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${milliseconds.toString().padStart(2, "0")}`;
+}
+function parseTime(timeStr) {
+  const parts = timeStr.split(":");
+  if (parts.length !== 2) return 0;
+  const [minStr, secPart] = parts;
+  const minutes = parseInt(minStr ?? "0", 10) || 0;
+  const secParts = (secPart ?? "0").split(".");
+  const seconds = parseInt(secParts[0] ?? "0", 10) || 0;
+  const ms = parseInt((secParts[1] ?? "0").padEnd(2, "0").slice(0, 2), 10) * 10 || 0;
+  return (minutes * 60 + seconds) * 1e3 + ms;
+}
+function generateSegmentId() {
+  return `segment-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function generateOverlayId() {
+  return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
 // src/hooks/index.ts
 var import_react6 = require("react");
 function useFontsLoaded() {
@@ -1489,16 +1723,29 @@ var RenderRoot = () => {
   areFontsLoaded,
   buildFontString,
   calculateAutoWidthDimensions,
+  calculateCropBounds,
+  calculateEstimatedDuration,
   calculateFitDimensions,
   calculateLineWidth,
+  calculateTimelineContentEnd,
   canSetAsReference,
+  defaultOffset,
+  formatTime,
+  generateOverlayId,
+  generateSegmentId,
+  getBaseSegments,
   getBorderRadii,
   getDependentElements,
   getFontFamily,
+  getOverlays,
   getReferenceElementX,
   getReferenceElementY,
+  getSegmentTimelinePosition,
   hexToRgba,
+  isDynamicCropEnabled,
+  isSegmentVisibleAtTime,
   parseHexColor,
+  parseTime,
   preloadFonts,
   resolveElementPositions,
   useFontsLoaded,

package/dist/index.mjs

@@ -738,6 +738,113 @@ function getReferenceElementY(elements, elementId) {
   return elements.find((e) => e.id === element.relativePositionY.elementId) ?? null;
 }
 
+// src/utils/cropBounds.ts
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+  if (!dynamicCrop) {
+    return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
+  }
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    elementMap.set(elem.id, elem);
+  }
+  const resolveBoundary = (boundary) => {
+    if (!boundary) return void 0;
+    if (boundary.elementId) return boundary.elementId;
+    return void 0;
+  };
+  let cropY = 0;
+  let cropHeight = canvasHeight;
+  if (dynamicCrop.vertical?.enabled) {
+    const vCrop = dynamicCrop.vertical;
+    const paddingStart = vCrop.paddingStart ?? 0;
+    const paddingEnd = vCrop.paddingEnd ?? 0;
+    if (vCrop.mode === "all-elements") {
+      let minY = canvasHeight;
+      let maxY = 0;
+      for (const elem of elements) {
+        minY = Math.min(minY, elem.y);
+        maxY = Math.max(maxY, elem.y + elem.height);
+      }
+      if (elements.length > 0) {
+        cropY = Math.max(0, minY - paddingStart);
+        const bottomY = Math.min(canvasHeight, maxY + paddingEnd);
+        cropHeight = bottomY - cropY;
+      }
+    } else if (vCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(vCrop.startBoundary);
+      const endElementId = resolveBoundary(vCrop.endBoundary);
+      let topY = 0;
+      let bottomY = canvasHeight;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          topY = startElem.y;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          bottomY = endElem.y + endElem.height;
+        }
+      }
+      cropY = Math.max(0, topY - paddingStart);
+      const adjustedBottom = Math.min(canvasHeight, bottomY + paddingEnd);
+      cropHeight = adjustedBottom - cropY;
+    }
+    if (vCrop.minSize && cropHeight < vCrop.minSize) {
+      cropHeight = vCrop.minSize;
+    }
+  }
+  let cropX = 0;
+  let cropWidth = canvasWidth;
+  if (dynamicCrop.horizontal?.enabled) {
+    const hCrop = dynamicCrop.horizontal;
+    const paddingStart = hCrop.paddingStart ?? 0;
+    const paddingEnd = hCrop.paddingEnd ?? 0;
+    if (hCrop.mode === "all-elements") {
+      let minX = canvasWidth;
+      let maxX = 0;
+      for (const elem of elements) {
+        minX = Math.min(minX, elem.x);
+        maxX = Math.max(maxX, elem.x + elem.width);
+      }
+      if (elements.length > 0) {
+        cropX = Math.max(0, minX - paddingStart);
+        const rightX = Math.min(canvasWidth, maxX + paddingEnd);
+        cropWidth = rightX - cropX;
+      }
+    } else if (hCrop.mode === "between-elements") {
+      const startElementId = resolveBoundary(hCrop.startBoundary);
+      const endElementId = resolveBoundary(hCrop.endBoundary);
+      let leftX = 0;
+      let rightX = canvasWidth;
+      if (startElementId) {
+        const startElem = elementMap.get(startElementId);
+        if (startElem) {
+          leftX = startElem.x;
+        }
+      }
+      if (endElementId) {
+        const endElem = elementMap.get(endElementId);
+        if (endElem) {
+          rightX = endElem.x + endElem.width;
+        }
+      }
+      cropX = Math.max(0, leftX - paddingStart);
+      const adjustedRight = Math.min(canvasWidth, rightX + paddingEnd);
+      cropWidth = adjustedRight - cropX;
+    }
+    if (hCrop.minSize && cropWidth < hCrop.minSize) {
+      cropWidth = hCrop.minSize;
+    }
+  }
+  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
+}
+function isDynamicCropEnabled(dynamicCrop) {
+  if (!dynamicCrop) return false;
+  return !!(dynamicCrop.vertical?.enabled || dynamicCrop.horizontal?.enabled);
+}
+
 // src/compositions/ImageEditorComposition.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function getSortedSegments(config) {
@@ -818,8 +925,11 @@ function ImageEditorComposition({
   backgroundFit = "cover",
   backgroundUrl,
   imageUrls = {},
-  textValues = {}
+  textValues = {},
+  dynamicCrop
 }) {
+  const canvasWidth = width ?? config?.width ?? 1080;
+  const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = useMemo3(() => {
     if (!elements) return null;
     const result = resolveElementPositions(elements, textValues);
@@ -828,6 +938,10 @@ function ImageEditorComposition({
     }
     return result.elements;
   }, [elements, textValues]);
+  const cropBounds = useMemo3(() => {
+    if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
   const segmentsFromElements = useMemo3(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -844,10 +958,10 @@ function ImageEditorComposition({
     }
     return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   }, [resolvedElements, imageUrls, textValues]);
-  const canvasWidth = width ?? config?.width ?? 1080;
-  const canvasHeight = height ?? config?.height ?? 1920;
   const bgFit = backgroundFit ?? "cover";
   const bgUrl = backgroundUrl ?? sources.background;
+  const cropOffsetX = cropBounds?.x ?? 0;
+  const cropOffsetY = cropBounds?.y ?? 0;
   const contentSegments = segmentsFromElements ?? (() => {
     if (!config) return [];
     const sorted = getSortedSegments(config);
@@ -868,61 +982,73 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: [
-    backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
-      Img2,
-      {
-        src: bgUrl,
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: canvasWidth * scale,
-          height: canvasHeight * scale,
-          objectFit: bgFit
-        }
-      }
-    ),
-    legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ jsx3(
-      BackgroundImage,
-      {
-        segment: legacyBackgroundSegment,
-        src: getSource(legacyBackgroundSegment),
-        width: canvasWidth,
-        height: canvasHeight,
-        scale
-      }
-    ),
-    contentSegments.map((segment) => {
-      if (segment.type === "text") {
-        return /* @__PURE__ */ jsx3(
-          TextElement,
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: -cropOffsetX * scale,
+        top: -cropOffsetY * scale,
+        width: canvasWidth * scale,
+        height: canvasHeight * scale
+      },
+      children: [
+        backgroundType === "image" && bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
+          Img2,
           {
-            segment,
-            scale
-          },
-          segment.id
-        );
-      }
-      if (segment.type === "image") {
-        const src = segment.source || getSource(segment);
-        if (!src) {
-          console.warn(`No source found for image segment: ${segment.id}`);
-          return null;
-        }
-        return /* @__PURE__ */ jsx3(
-          ImageElement,
+            src: bgUrl,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: canvasWidth * scale,
+              height: canvasHeight * scale,
+              objectFit: bgFit
+            }
+          }
+        ),
+        legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ jsx3(
+          BackgroundImage,
           {
-            segment,
-            src,
+            segment: legacyBackgroundSegment,
+            src: getSource(legacyBackgroundSegment),
+            width: canvasWidth,
+            height: canvasHeight,
             scale
-          },
-          segment.id
-        );
-      }
-      return null;
-    })
-  ] });
+          }
+        ),
+        contentSegments.map((segment) => {
+          if (segment.type === "text") {
+            return /* @__PURE__ */ jsx3(
+              TextElement,
+              {
+                segment,
+                scale
+              },
+              segment.id
+            );
+          }
+          if (segment.type === "image") {
+            const src = segment.source || getSource(segment);
+            if (!src) {
+              console.warn(`No source found for image segment: ${segment.id}`);
+              return null;
+            }
+            return /* @__PURE__ */ jsx3(
+              ImageElement,
+              {
+                segment,
+                src,
+                scale
+              },
+              segment.id
+            );
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
 }
 function BackgroundImage({
   segment,
@@ -1272,6 +1398,101 @@ function calculateFitDimensions({
   };
 }
 
+// src/utils/timeline.ts
+function defaultOffset(mode = "flexible") {
+  return mode === "flexible" ? { type: "relative", value: 0 } : { type: "absolute", value: 0 };
+}
+function getBaseSegments(channel) {
+  return channel.segments.filter((s) => s.parentId === void 0);
+}
+function getOverlays(channel, parentId) {
+  return channel.segments.filter((s) => s.parentId === (parentId ?? void 0));
+}
+function getSegmentTimelinePosition(segment, baseSegments, channel) {
+  if (segment.parentId) {
+    const parent = channel.segments.find((s) => s.id === segment.parentId);
+    if (parent) {
+      const parentPos = getSegmentTimelinePosition(parent, baseSegments, channel);
+      const relStart = segment.relativeStart ?? 0;
+      const relEnd = segment.relativeEnd ?? 1;
+      return {
+        startMs: parentPos.startMs + parentPos.durationMs * relStart,
+        durationMs: parentPos.durationMs * (relEnd - relStart)
+      };
+    }
+  }
+  const baseIndex = baseSegments.findIndex((s) => s.id === segment.id);
+  let accumulatedTime = 0;
+  for (let i = 0; i < baseIndex; i++) {
+    const prev = baseSegments[i];
+    if (prev) {
+      accumulatedTime += prev.duration?.type === "absolute" ? prev.duration.value : 5e3;
+    }
+  }
+  const startMs = segment.offset.type === "absolute" ? segment.offset.value : accumulatedTime;
+  const durationMs = segment.duration?.type === "absolute" ? segment.duration.value : 5e3;
+  return { startMs, durationMs };
+}
+function isSegmentVisibleAtTime(segment, time, channel) {
+  const baseSegments = getBaseSegments(channel);
+  const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
+  const endMs = startMs + durationMs;
+  return time >= startMs && time < endMs;
+}
+function calculateEstimatedDuration(channels) {
+  let maxDuration = 5e3;
+  for (const channel of channels) {
+    let channelTime = 0;
+    for (const segment of channel.segments) {
+      if (segment.parentId) continue;
+      if (segment.offset.type === "absolute") {
+        channelTime = segment.offset.value;
+      } else {
+        channelTime += 5e3;
+      }
+      if (segment.duration?.type === "absolute") {
+        channelTime += segment.duration.value;
+      } else {
+        channelTime += 5e3;
+      }
+    }
+    maxDuration = Math.max(maxDuration, channelTime);
+  }
+  return maxDuration;
+}
+function calculateTimelineContentEnd(channel) {
+  const baseSegments = getBaseSegments(channel);
+  let lastEnd = 0;
+  for (const segment of baseSegments) {
+    const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
+    lastEnd = Math.max(lastEnd, startMs + durationMs);
+  }
+  return Math.ceil((lastEnd + 2e3) / 1e3) * 1e3;
+}
+function formatTime(ms) {
+  const totalSeconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const milliseconds = Math.floor(ms % 1e3 / 10);
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${milliseconds.toString().padStart(2, "0")}`;
+}
+function parseTime(timeStr) {
+  const parts = timeStr.split(":");
+  if (parts.length !== 2) return 0;
+  const [minStr, secPart] = parts;
+  const minutes = parseInt(minStr ?? "0", 10) || 0;
+  const secParts = (secPart ?? "0").split(".");
+  const seconds = parseInt(secParts[0] ?? "0", 10) || 0;
+  const ms = parseInt((secParts[1] ?? "0").padEnd(2, "0").slice(0, 2), 10) * 10 || 0;
+  return (minutes * 60 + seconds) * 1e3 + ms;
+}
+function generateSegmentId() {
+  return `segment-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function generateOverlayId() {
+  return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
 // src/hooks/index.ts
 import { useEffect, useState, useMemo as useMemo6 } from "react";
 function useFontsLoaded() {
@@ -1427,16 +1648,29 @@ export {
   areFontsLoaded,
   buildFontString,
   calculateAutoWidthDimensions,
+  calculateCropBounds,
+  calculateEstimatedDuration,
   calculateFitDimensions,
   calculateLineWidth,
+  calculateTimelineContentEnd,
   canSetAsReference,
+  defaultOffset,
+  formatTime,
+  generateOverlayId,
+  generateSegmentId,
+  getBaseSegments,
   getBorderRadii,
   getDependentElements,
   getFontFamily,
+  getOverlays,
   getReferenceElementX,
   getReferenceElementY,
+  getSegmentTimelinePosition,
   hexToRgba,
+  isDynamicCropEnabled,
+  isSegmentVisibleAtTime,
   parseHexColor,
+  parseTime,
   preloadFonts,
   resolveElementPositions,
   useFontsLoaded,

package/package.json

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