@twick/video-editor 0.15.14 → 0.15.15

package/dist/components/controls/control-manager.d.ts

@@ -1,8 +1,9 @@
 import { TimelineZoomConfig } from '../video-editor';
 
-declare const ControlManager: ({ trackZoom, setTrackZoom, zoomConfig, }: {
+declare const ControlManager: ({ trackZoom, setTrackZoom, zoomConfig, fps, }: {
     trackZoom: number;
     setTrackZoom: (zoom: number) => void;
     zoomConfig: TimelineZoomConfig;
+    fps?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ControlManager;

package/dist/components/controls/player-controls.d.ts

@@ -27,8 +27,10 @@ import { TimelineZoomConfig } from '../video-editor';
  * ```
  */
 export interface PlayerControlsProps {
-    /** Currently selected timeline element or track */
+    /** Currently selected timeline element or track (primary) */
     selectedItem: TrackElement | Track | null;
+    /** Set of selected IDs for multi-select */
+    selectedIds?: Set<string>;
     /** Current playback time in seconds */
     currentTime: number;
     /** Total duration of the timeline in seconds */
@@ -45,8 +47,8 @@ export interface PlayerControlsProps {
     onUndo?: () => void;
     /** Optional callback for redo operation */
     onRedo?: () => void;
-    /** Optional callback for delete operation */
-    onDelete?: (item: TrackElement | Track) => void;
+    /** Optional callback for delete operation (deletes all selected) */
+    onDelete?: () => void;
     /** Optional callback for split operation */
     onSplit?: (item: TrackElement, splitTime: number) => void;
     /** Current zoom level for timeline */
@@ -57,6 +59,14 @@ export interface PlayerControlsProps {
     className?: string;
     /** Timeline zoom configuration (min, max, step, default) */
     zoomConfig?: TimelineZoomConfig;
+    /** Frames per second for time display (MM:SS.FF format) */
+    fps?: number;
+    /** Callback to seek to a specific time (for jump to start/end) */
+    onSeek?: (time: number) => void;
+    /** Whether timeline follows playhead during playback */
+    followPlayheadEnabled?: boolean;
+    /** Toggle follow playhead */
+    onFollowPlayheadToggle?: () => void;
 }
 declare const PlayerControls: React.FC<PlayerControlsProps>;
 export default PlayerControls;

package/dist/components/controls/seek-control.d.ts

@@ -1,10 +1,12 @@
+import { PlayheadState } from '../track/seek-track';
 import { TimelineTickConfig } from '../video-editor';
 
-declare const SeekControl: ({ duration, zoom, timelineCount, onSeek, timelineTickConfigs, }: {
+declare const SeekControl: ({ duration, zoom, timelineCount, onSeek, timelineTickConfigs, onPlayheadUpdate, }: {
     duration: number;
     zoom: number;
     timelineCount: number;
     onSeek: (time: number) => void;
     timelineTickConfigs?: TimelineTickConfig[];
+    onPlayheadUpdate?: (state: PlayheadState) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SeekControl;

package/dist/components/player/canvas-context-menu.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+export interface CanvasContextMenuProps {
+    x: number;
+    y: number;
+    elementId: string;
+    onBringToFront: (elementId: string) => void;
+    onSendToBack: (elementId: string) => void;
+    onBringForward: (elementId: string) => void;
+    onSendBackward: (elementId: string) => void;
+    onDelete: (elementId: string) => void;
+    onClose: () => void;
+}
+/**
+ * Context menu for canvas elements: z-order actions (Bring to Front, Send to Back, etc.).
+ * Renders at the given coordinates and closes on action or click outside.
+ */
+export declare const CanvasContextMenu: React.FC<CanvasContextMenuProps>;

package/dist/components/player/player-manager.d.ts

@@ -1,3 +1,4 @@
+import { CanvasConfig } from '../../helpers/types';
 
 /**
  * PlayerManager component that manages video playback and canvas rendering.
@@ -9,6 +10,7 @@
  * @param props.videoProps - Video dimensions and background color
  * @param props.playerProps - Optional player quality settings
  * @param props.canvasMode - Whether to show canvas overlay when paused
+ * @param props.canvasConfig - Canvas behavior options (e.g. enableShiftAxisLock)
  * @returns JSX element containing player and canvas components
  *
  * @example
@@ -17,10 +19,11 @@
  *   videoProps={{ width: 1920, height: 1080, backgroundColor: '#000' }}
  *   playerProps={{ quality: 720 }}
  *   canvasMode={true}
+ *   canvasConfig={{ enableShiftAxisLock: true }}
  * />
  * ```
  */
-export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, }: {
+export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, canvasConfig, }: {
     videoProps: {
         width: number;
         height: number;
@@ -30,4 +33,5 @@ export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, }: {
         quality?: number;
     };
     canvasMode: boolean;
+    canvasConfig?: CanvasConfig;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/timeline/marquee-overlay.d.ts

@@ -0,0 +1,12 @@
+interface MarqueeRect {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+}
+interface MarqueeOverlayProps {
+    marquee: MarqueeRect | null;
+}
+/** Renders the marquee selection rectangle. Does not capture pointer events. */
+export declare function MarqueeOverlay({ marquee }: MarqueeOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/timeline/timeline-view.d.ts

@@ -1,7 +1,7 @@
-import { Track, TrackElement } from '@twick/timeline';
+import { Track, TrackElement, Size } from '@twick/timeline';
 import { ElementColors } from '../../helpers/types';
 
-declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onSelectionChange, onElementDrag, elementColors, }: {
+declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onItemSelect, onEmptyClick, onMarqueeSelect, onElementDrag, elementColors, selectedIds, playheadPositionPx, isPlayheadActive, onDropOnTimeline, videoResolution, enableDropOnTimeline, }: {
     zoomLevel: number;
     duration: number;
     tracks: Track[];
@@ -18,8 +18,26 @@ declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekT
         };
     }) => void;
     onSeek: (time: number) => void;
-    onSelectionChange: (element: TrackElement | Track) => void;
+    onItemSelect: (item: Track | TrackElement, event: React.MouseEvent) => void;
+    onEmptyClick: () => void;
+    onMarqueeSelect: (ids: Set<string>) => void;
     onDeletion: (element: TrackElement | Track) => void;
+    selectedIds: Set<string>;
     elementColors?: ElementColors;
+    /** Playhead position in pixels (for auto-scroll) */
+    playheadPositionPx?: number;
+    /** Whether playhead is moving (playing or dragging) */
+    isPlayheadActive?: boolean;
+    /** Called when a file or panel media item is dropped on the timeline */
+    onDropOnTimeline?: (params: {
+        track: Track | null;
+        timeSec: number;
+        type: "video" | "audio" | "image";
+        url: string;
+    }) => Promise<void>;
+    /** Video resolution for creating elements from dropped files */
+    videoResolution?: Size;
+    /** Whether to enable drop-on-timeline */
+    enableDropOnTimeline?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export default TimelineView;

package/dist/components/track/seek-track.d.ts

@@ -1,5 +1,9 @@
 import { TimelineTickConfig } from '../video-editor';
 
+export interface PlayheadState {
+    positionPx: number;
+    isDragging: boolean;
+}
 interface SeekTrackProps {
     currentTime: number;
     duration: number;
@@ -7,6 +11,8 @@ interface SeekTrackProps {
     onSeek: (time: number) => void;
     timelineCount?: number;
     timelineTickConfigs?: TimelineTickConfig[];
+    /** Called when playhead position or drag state changes (for auto-scroll) */
+    onPlayheadUpdate?: (state: PlayheadState) => void;
 }
-export default function SeekTrack({ currentTime, duration, zoom, onSeek, timelineCount, timelineTickConfigs, }: SeekTrackProps): import("react/jsx-runtime").JSX.Element;
+export default function SeekTrack({ currentTime, duration, zoom, onSeek, timelineCount, timelineTickConfigs, onPlayheadUpdate, }: SeekTrackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/track/track-base.d.ts

@@ -7,8 +7,9 @@ interface TrackBaseProps {
     track: Track;
     trackWidth: number;
     selectedItem: TrackElement | null;
+    selectedIds: Set<string>;
     allowOverlap?: boolean;
-    onItemSelection: (element: TrackElement) => void;
+    onItemSelection: (element: TrackElement, event: React.MouseEvent) => void;
     onDrag: ({ element, dragType, updates, }: {
         element: TrackElement;
         dragType: string;
@@ -19,5 +20,5 @@ interface TrackBaseProps {
     }) => void;
     elementColors?: ElementColors;
 }
-declare const TrackBase: ({ duration, zoom, track, trackWidth, selectedItem, onItemSelection, onDrag, allowOverlap, elementColors, }: TrackBaseProps) => import("react/jsx-runtime").JSX.Element;
+declare const TrackBase: ({ duration, zoom, track, trackWidth, selectedItem, selectedIds, onItemSelection, onDrag, allowOverlap, elementColors, }: TrackBaseProps) => import("react/jsx-runtime").JSX.Element;
 export default TrackBase;

package/dist/components/track/track-element.d.ts

@@ -4,12 +4,13 @@ import { ElementColors } from '../../helpers/types';
 export declare const TrackElementView: React.FC<{
     element: TrackElement;
     selectedItem: TrackElement | null;
+    selectedIds: Set<string>;
     parentWidth: number;
     duration: number;
     nextStart: number | null;
     prevEnd: number;
     allowOverlap: boolean;
-    onSelection: (element: TrackElement) => void;
+    onSelection: (element: TrackElement, event: React.MouseEvent) => void;
     onDrag: ({ element, dragType, updates, }: {
         element: TrackElement;
         dragType: string;

package/dist/components/track/track-header.d.ts

@@ -3,11 +3,11 @@ import { Track } from '@twick/timeline';
 
 interface TrackHeaderProps {
     track: Track;
-    selectedItem: Track | null;
-    onSelect: (track: Track) => void;
+    selectedIds: Set<string>;
+    onSelect: (track: Track, event: React.MouseEvent) => void;
     onDragStart: (e: React.DragEvent, track: Track) => void;
     onDragOver: (e: React.DragEvent) => void;
     onDrop: (e: React.DragEvent, track: Track) => void;
 }
-declare const TrackHeader: ({ track, selectedItem, onDragStart, onDragOver, onDrop, onSelect, }: TrackHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TrackHeader: ({ track, selectedIds, onDragStart, onDragOver, onDrop, onSelect, }: TrackHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TrackHeader;

package/dist/components/video-editor.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ElementColors } from '../helpers/types';
+import { CanvasConfig, ElementColors } from '../helpers/types';
 
 /**
  * Configuration for timeline tick marks at specific duration ranges.
@@ -55,6 +55,7 @@ export interface TimelineZoomConfig {
  * const editorConfig = {
  *   videoProps: { width: 1920, height: 1080 },
  *   canvasMode: true,
+ *   canvasConfig: { enableShiftAxisLock: true },
  *   timelineTickConfigs: [
  *     { durationThreshold: 30, majorInterval: 5, minorTicks: 5 },
  *     { durationThreshold: 300, majorInterval: 30, minorTicks: 6 }
@@ -87,12 +88,16 @@ export interface VideoEditorConfig {
     };
     /** Whether to use canvas mode for rendering */
     canvasMode?: boolean;
+    /** Canvas behavior options (axis lock, zoom, snapping, etc.). Used by TwickEditor and TwickStudio. */
+    canvasConfig?: CanvasConfig;
     /** Custom timeline tick configurations for different duration ranges */
     timelineTickConfigs?: TimelineTickConfig[];
     /** Custom timeline zoom configuration (min, max, step, default) */
     timelineZoomConfig?: TimelineZoomConfig;
     /** Custom element colors for timeline elements */
     elementColors?: ElementColors;
+    /** Frames per second for time display (MM:SS.FF format) */
+    fps?: number;
 }
 /**
  * Props for the VideoEditor component.

package/dist/helpers/asset-type.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Maps file MIME type or extension to timeline element type.
+ * Used for drop-on-timeline to determine which element to create.
+ */
+export type DroppableAssetType = "video" | "audio" | "image";
+export declare function getAssetTypeFromFile(file: File): DroppableAssetType | null;

package/dist/helpers/constants.d.ts

@@ -72,6 +72,11 @@ export declare const MIN_DURATION = 0.1;
  * }
  * ```
  */
+/**
+ * MIME type for media items dragged from the studio's media panels (video, audio, image)
+ * to the timeline. The data format is JSON: { type: "video"|"audio"|"image", url: string }.
+ */
+export declare const TIMELINE_DROP_MEDIA_TYPE = "application/x-twick-media";
 export declare const DRAG_TYPE: {
     /** Drag operation is starting */
     readonly START: "start";
@@ -110,6 +115,13 @@ export declare const DEFAULT_TIMELINE_ZOOM = 1.5;
  * />
  * ```
  */
+/**
+ * Default frames per second for timeline time display.
+ * Used for MM:SS.FF format (e.g. 00:15.12 = 15.4 seconds at 30fps).
+ */
+export declare const DEFAULT_FPS = 30;
+/** Snap threshold in pixels - used to convert to seconds based on zoom */
+export declare const SNAP_THRESHOLD_PX = 10;
 export declare const DEFAULT_TIMELINE_ZOOM_CONFIG: {
     /** Minimum zoom level (10%) */
     min: number;

package/dist/helpers/snap-targets.d.ts

@@ -0,0 +1,7 @@
+import { Track } from '@twick/timeline';
+
+/**
+ * Collects snap target times for the timeline.
+ * Includes: playhead, clip edges (excluding the dragging element), 0, and duration.
+ */
+export declare function getSnapTargets(tracks: Track[], currentTime: number, duration: number, excludeElementId?: string): number[];

package/dist/helpers/types.d.ts

@@ -67,3 +67,13 @@ export interface ElementColors {
     transition: string;
     animation: string;
 }
+/**
+ * Canvas behavior options for TwickEditor / TwickStudio.
+ * Customers set these via editorConfig.canvasConfig or studioConfig.
+ */
+export interface CanvasConfig {
+    /** When true, holding Shift while dragging restricts movement to horizontal or vertical (dominant axis). Default: false. */
+    enableShiftAxisLock?: boolean;
+    /** When true, element resize keeps aspect ratio (uniform scaling). Can be overridden per element via props. Default: true for media. */
+    lockAspectRatio?: boolean;
+}

package/dist/hooks/use-canvas-drop.d.ts

@@ -0,0 +1,25 @@
+import { DroppableAssetType } from '../helpers/asset-type';
+
+export interface CanvasDropPayload {
+    type: DroppableAssetType;
+    url: string;
+    canvasX?: number;
+    canvasY?: number;
+}
+/**
+ * Hook for handling file/media drops on the canvas.
+ * Accepts both files from OS and media dragged from studio panels.
+ */
+export declare function useCanvasDrop({ containerRef, videoSize, onDrop, enabled, }: {
+    containerRef: React.RefObject<HTMLElement | null>;
+    videoSize: {
+        width: number;
+        height: number;
+    };
+    onDrop: (payload: CanvasDropPayload) => Promise<void>;
+    enabled?: boolean;
+}): {
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => Promise<void>;
+};

package/dist/hooks/use-canvas-keyboard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Registers keyboard shortcuts for editor actions.
+ * - Delete, Backspace: delete
+ * - Cmd/Ctrl+Z: undo
+ * - Cmd/Ctrl+Shift+Z or Cmd/Ctrl+Y: redo
+ * Ignores events when focus is in input, textarea, or contenteditable.
+ */
+export declare function useCanvasKeyboard({ onDelete, onUndo, onRedo, enabled, }: {
+    onDelete?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    enabled?: boolean;
+}): void;

package/dist/hooks/use-marquee-selection.d.ts

@@ -0,0 +1,24 @@
+import { Track } from '@twick/timeline';
+
+export interface MarqueeRect {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+}
+interface UseMarqueeSelectionOptions {
+    duration: number;
+    zoomLevel: number;
+    labelWidth: number;
+    trackCount: number;
+    trackHeight: number;
+    tracks: Track[];
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    onMarqueeSelect: (ids: Set<string>) => void;
+    onEmptyClick: () => void;
+}
+export declare function useMarqueeSelection({ duration, zoomLevel, labelWidth, trackCount, trackHeight, tracks, containerRef, onMarqueeSelect, onEmptyClick, }: UseMarqueeSelectionOptions): {
+    marquee: MarqueeRect | null;
+    handleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export {};

package/dist/hooks/use-player-manager.d.ts

@@ -1,23 +1,29 @@
+import { CanvasDropPayload } from './use-canvas-drop';
+import { CanvasConfig } from '../helpers/types';
+
 /**
  * Custom hook to manage player state and canvas interactions.
  * Handles player data updates, canvas operations, and timeline synchronization
  * for the video editor component.
  *
  * @param videoProps - Object containing video dimensions
+ * @param canvasConfig - Canvas behavior options (e.g. enableShiftAxisLock) from editorConfig / studioConfig
  * @returns Object containing player management functions and state
  *
  * @example
  * ```js
  * const { twickCanvas, projectData, updateCanvas } = usePlayerManager({
- *   videoProps: { width: 1920, height: 1080 }
+ *   videoProps: { width: 1920, height: 1080 },
+ *   canvasConfig: { enableShiftAxisLock: true }
  * });
  * ```
  */
-export declare const usePlayerManager: ({ videoProps, }: {
+export declare const usePlayerManager: ({ videoProps, canvasConfig, }: {
     videoProps: {
         width: number;
         height: number;
     };
+    canvasConfig?: CanvasConfig;
 }) => {
     twickCanvas: any;
     projectData: any;
@@ -25,4 +31,10 @@ export declare const usePlayerManager: ({ videoProps, }: {
     buildCanvas: any;
     onPlayerUpdate: (event: CustomEvent) => void;
     playerUpdating: boolean;
+    handleDropOnCanvas: (payload: CanvasDropPayload) => Promise<void>;
+    bringToFront: any;
+    sendToBack: any;
+    bringForward: any;
+    sendBackward: any;
+    deleteElement: (elementId: string) => void;
 };

package/dist/hooks/use-playhead-scroll.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Configuration for playhead scroll behavior.
+ */
+export interface PlayheadScrollConfig {
+    /** Pixels to keep between playhead and viewport edge before auto-scrolling */
+    margin?: number;
+    /** Width of the label/track-header area (left of seek track) in pixels */
+    labelWidth?: number;
+}
+/**
+ * Scrolls the timeline container to keep the playhead visible when it reaches
+ * the viewport edge. Used during playback and when dragging the playhead.
+ *
+ * @param scrollContainerRef - Ref to the scrollable timeline container
+ * @param playheadPositionPx - Playhead position in pixels (from left of content)
+ * @param isActive - Whether to run scroll logic (playing or dragging)
+ * @param config - Optional margin and label width
+ */
+export declare function usePlayheadScroll(scrollContainerRef: React.RefObject<HTMLElement | null>, playheadPositionPx: number, isActive: boolean, config?: PlayheadScrollConfig): void;

package/dist/hooks/use-timeline-control.d.ts

@@ -20,7 +20,7 @@ import { TrackElement, Track } from '@twick/timeline';
  */
 declare const useTimelineControl: () => {
     splitElement: (element: TrackElement, currentTime: number) => void;
-    deleteItem: (item: Track | TrackElement) => void;
+    deleteItem: (item?: Track | TrackElement) => void;
     handleUndo: () => void;
     handleRedo: () => void;
 };

package/dist/hooks/use-timeline-drop.d.ts

@@ -0,0 +1,40 @@
+import { Track, VideoElement, AudioElement, ImageElement, Size } from '@twick/timeline';
+import { DroppableAssetType } from '../helpers/asset-type';
+
+export interface DropPreview {
+    trackIndex: number;
+    timeSec: number;
+    /** Approximate width for preview (based on default duration) */
+    widthPct: number;
+}
+/**
+ * Hook for handling file drops on the timeline.
+ * Computes drop position from coordinates and provides handlers for drag/drop.
+ */
+export declare function useTimelineDrop({ containerRef, scrollContainerRef, tracks, duration, zoomLevel, labelWidth, trackHeight, 
+/** Width of the track content area (timeline minus labels). Used for accurate time mapping. */
+trackContentWidth, onDrop, enabled, }: {
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Ref to scroll container; used for scrollLeft. Falls back to containerRef if not provided. */
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    tracks: Track[];
+    duration: number;
+    zoomLevel: number;
+    labelWidth: number;
+    trackHeight: number;
+    trackContentWidth?: number;
+    onDrop: (params: {
+        track: Track | null;
+        timeSec: number;
+        type: DroppableAssetType;
+        url: string;
+    }) => Promise<void>;
+    enabled?: boolean;
+}): {
+    preview: DropPreview | null;
+    isDraggingOver: boolean;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => Promise<void>;
+};
+export declare function createElementFromDrop(type: DroppableAssetType, blobUrl: string, parentSize: Size): VideoElement | AudioElement | ImageElement;

package/dist/hooks/use-timeline-selection.d.ts

@@ -0,0 +1,13 @@
+import { Track, TrackElement } from '@twick/timeline';
+
+/**
+ * Handles timeline selection with multi-select support.
+ * - Single click: replace selection
+ * - Cmd/Ctrl+click: toggle item in selection
+ * - Shift+click: range select (elements in same track, or tracks)
+ */
+export declare function useTimelineSelection(): {
+    handleItemSelect: (item: Track | TrackElement, event: React.MouseEvent) => void;
+    handleEmptyClick: () => void;
+    handleMarqueeSelect: (ids: Set<string>) => void;
+};

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { default as TimelineManager } from './components/timeline/timeline-manag
 import { usePlayerControl } from './hooks/use-player-control';
 import { useEditorManager } from './hooks/use-editor-manager';
 import { default as BrowserMediaManager } from './helpers/media-manager/browser-media-manager';
-import { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors } from './helpers/types';
+import { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors, CanvasConfig } from './helpers/types';
 import { default as BaseMediaManager } from './helpers/media-manager/base-media-manager';
 import { animationGifs, getAnimationGif } from './assets';
 import { ANIMATIONS } from './helpers/animation-manager';
@@ -14,7 +14,7 @@ import { setElementColors } from './helpers/editor.utils';
 
 export { setElementColors };
 export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors };
-export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig };
+export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig, CanvasConfig };
 export { ANIMATIONS, TEXT_EFFECTS };
 export { usePlayerControl, useEditorManager, BrowserMediaManager, BaseMediaManager, animationGifs, getAnimationGif, PlayerControls, TimelineManager, useTimelineControl };
 export * from './helpers/constants';