@twick/video-editor 0.15.14 → 0.15.16

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

@@ -4,17 +4,6 @@ import { TimelineTickConfig } from '../components/video-editor';
 /**
  * Initial timeline data structure for new video editor projects.
  * Provides a default timeline with a sample text element to get started.
- *
- * @example
- * ```js
- * import { INITIAL_TIMELINE_DATA } from '@twick/video-editor';
- *
- * // Use as starting point for new projects
- * const newProject = {
- *   ...INITIAL_TIMELINE_DATA,
- *   tracks: [...INITIAL_TIMELINE_DATA.tracks, newTrack]
- * };
- * ```
  */
 export declare const INITIAL_TIMELINE_DATA: {
     tracks: {
@@ -39,39 +28,9 @@ export declare const INITIAL_TIMELINE_DATA: {
 /**
  * Minimum duration for timeline elements in seconds.
  * Used to prevent elements from having zero or negative duration.
- *
- * @example
- * ```js
- * import { MIN_DURATION } from '@twick/video-editor';
- *
- * const elementDuration = Math.max(duration, MIN_DURATION);
- * // Ensures element has at least 0.1 seconds duration
- * ```
  */
 export declare const MIN_DURATION = 0.1;
-/**
- * Drag operation types for timeline interactions.
- * Defines the different phases of drag operations on timeline elements.
- *
- * @example
- * ```js
- * import { DRAG_TYPE } from '@twick/video-editor';
- *
- * function handleDrag(type) {
- *   switch (type) {
- *     case DRAG_TYPE.START:
- *       // Handle drag start
- *       break;
- *     case DRAG_TYPE.MOVE:
- *       // Handle drag move
- *       break;
- *     case DRAG_TYPE.END:
- *       // Handle drag end
- *       break;
- *   }
- * }
- * ```
- */
+export declare const TIMELINE_DROP_MEDIA_TYPE = "application/x-twick-media";
 export declare const DRAG_TYPE: {
     /** Drag operation is starting */
     readonly START: "start";
@@ -80,36 +39,18 @@ export declare const DRAG_TYPE: {
     /** Drag operation has ended */
     readonly END: "end";
 };
-/**
- * Default zoom level for timeline view.
- * Controls the initial magnification of the timeline interface.
- *
- * @example
- * ```js
- * import { DEFAULT_TIMELINE_ZOOM } from '@twick/video-editor';
- *
- * const [zoom, setZoom] = useState(DEFAULT_TIMELINE_ZOOM);
- * // Timeline starts with 1.5x zoom
- * ```
- */
 export declare const DEFAULT_TIMELINE_ZOOM = 1.5;
 /**
  * Default timeline zoom configuration including min, max, step, and default values.
  * Controls the zoom behavior and constraints for the timeline view.
- *
- * @example
- * ```js
- * import { DEFAULT_TIMELINE_ZOOM_CONFIG } from '@twick/video-editor';
- *
- * // Use default zoom configuration
- * <VideoEditor
- *   editorConfig={{
- *     videoProps: { width: 1920, height: 1080 },
- *     timelineZoomConfig: DEFAULT_TIMELINE_ZOOM_CONFIG
- *   }}
- * />
- * ```
  */
+/**
+ * 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;
@@ -127,54 +68,16 @@ export declare const DEFAULT_TIMELINE_ZOOM_CONFIG: {
  *
  * Each configuration applies when the duration is less than the specified threshold.
  * Configurations are ordered by duration threshold ascending.
- *
- * @example
- * ```js
- * import { DEFAULT_TIMELINE_TICK_CONFIGS } from '@twick/video-editor';
- *
- * // Use default configurations
- * <VideoEditor
- *   editorConfig={{
- *     videoProps: { width: 1920, height: 1080 },
- *     timelineTickConfigs: DEFAULT_TIMELINE_TICK_CONFIGS
- *   }}
- * />
- * ```
  */
 export declare const DEFAULT_TIMELINE_TICK_CONFIGS: TimelineTickConfig[];
 /**
  * Default color scheme for different element types in the timeline.
  * Provides consistent visual distinction between various timeline elements.
- *
- * @example
- * ```js
- * import { DEFAULT_ELEMENT_COLORS } from '@twick/video-editor';
- *
- * const videoColor = DEFAULT_ELEMENT_COLORS.video; // "#4B2E83"
- * const textColor = DEFAULT_ELEMENT_COLORS.text;   // "#375A7F"
- *
- * // Apply colors to timeline elements
- * element.style.backgroundColor = DEFAULT_ELEMENT_COLORS[element.type];
- * ```
  */
 export declare const DEFAULT_ELEMENT_COLORS: ElementColors;
 /**
  * Available text fonts for video editor text elements.
  * Includes Google Fonts, display fonts, and custom CDN fonts.
- *
- * @example
- * ```js
- * import { AVAILABLE_TEXT_FONTS } from '@twick/video-editor';
- *
- * // Use Google Fonts
- * const googleFont = AVAILABLE_TEXT_FONTS.ROBOTO; // "Roboto"
- *
- * // Use decorative fonts
- * const decorativeFont = AVAILABLE_TEXT_FONTS.BANGERS; // "Bangers"
- *
- * // Apply font to text element
- * textElement.style.fontFamily = AVAILABLE_TEXT_FONTS.POPPINS;
- * ```
  */
 export declare const AVAILABLE_TEXT_FONTS: {
     /** Modern sans-serif font */

package/dist/helpers/function.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Creates a debounced version of a function.
+ * The function will only be called after it has not been invoked
+ * for the specified delay.
+ *
+ * Useful for expensive operations that should not run on every
+ * keystroke / mouse move (e.g. resize handlers, search, etc.).
+ */
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Creates a throttled version of a function.
+ * The function will be called at most once in every `interval`
+ * milliseconds, ignoring additional calls in between.
+ *
+ * Useful for high–frequency events like scroll / mousemove where
+ * you still want regular updates but not on every event.
+ */
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, interval: number): (...args: Parameters<T>) => void;

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,28 +1,41 @@
+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;
-    updateCanvas: (seekTime: number) => void;
+    updateCanvas: (seekTime: number, forceRefresh?: boolean) => void;
     buildCanvas: any;
+    resizeCanvas: 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;