@elah/timeline 0.1.0

package/dist/AudioDropDialog.d.ts

@@ -0,0 +1 @@
+export declare function AudioDropDialog(): import("react/jsx-runtime").JSX.Element | null;

package/dist/AudioDropDialog.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAudioDropDialogStore } from './audioDropDialog.store';
+const CHOICES = [
+    {
+        choice: 'both',
+        label: 'Video + Audio',
+        hint: 'Add the video and its audio on a separate audio track',
+        primary: true,
+    },
+    { choice: 'video-only', label: 'Video only', hint: 'Drop the audio track' },
+    { choice: 'audio-only', label: 'Audio only', hint: 'Add just the audio, no video' },
+];
+export function AudioDropDialog() {
+    const open = useAudioDropDialogStore((s) => s.open);
+    const assetName = useAudioDropDialogStore((s) => s.assetName);
+    const respond = useAudioDropDialogStore((s) => s.respond);
+    if (!open)
+        return null;
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": "Choose how to add this media", style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1000,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(5, 7, 12, 0.6)',
+            backdropFilter: 'blur(2px)',
+            fontFamily: 'sans-serif',
+        }, children: _jsxs("div", { style: {
+                width: 380,
+                maxWidth: '90vw',
+                background: '#171D2B',
+                border: '1px solid #232938',
+                borderRadius: 12,
+                boxShadow: '0 24px 60px rgba(0,0,0,0.55)',
+                padding: 22,
+            }, children: [_jsx("h2", { style: {
+                        margin: 0,
+                        fontSize: 15,
+                        fontWeight: 700,
+                        color: '#F3F4F6',
+                        letterSpacing: '-0.01em',
+                    }, children: "This video has audio" }), _jsxs("p", { style: {
+                        margin: '6px 0 18px',
+                        fontSize: 12,
+                        lineHeight: 1.5,
+                        color: '#9CA3AF',
+                    }, children: ["How should", ' ', _jsx("span", { style: { color: '#E5E7EB', fontWeight: 600 }, children: assetName }), ' ', "be added to the timeline?"] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: CHOICES.map(({ choice, label, hint, primary }) => (_jsxs("button", { type: "button", onClick: () => respond(choice), style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
+                            gap: 2,
+                            width: '100%',
+                            padding: '10px 14px',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                            borderRadius: 8,
+                            border: primary ? '1px solid #2563EB' : '1px solid #2A3142',
+                            background: primary ? 'rgba(37, 99, 235, 0.16)' : '#1B2230',
+                            color: '#F3F4F6',
+                            transition: 'background 0.12s, border-color 0.12s',
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.background = primary
+                                ? 'rgba(37, 99, 235, 0.28)'
+                                : '#222B3C';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.background = primary
+                                ? 'rgba(37, 99, 235, 0.16)'
+                                : '#1B2230';
+                        }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: 600 }, children: label }), _jsx("span", { style: { fontSize: 11, color: '#9CA3AF' }, children: hint })] }, choice))) })] }) }));
+}

package/dist/ClipBlock.d.ts

@@ -0,0 +1,8 @@
+import type { Clip } from '@elah/core';
+interface ClipBlockProps {
+    clip: Clip;
+    zoom: number;
+    trackHeight: number;
+}
+export declare const ClipBlock: import("react").NamedExoticComponent<ClipBlockProps>;
+export {};

package/dist/ClipBlock.js

@@ -0,0 +1,372 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTimeline } from './engine-context';
+import { useSelectionStore } from '@elah/core';
+import { usePlaybackStore } from '@elah/core';
+import { buildSnapPoints, DEFAULT_OVERLAP_TOLERANCE, resolveOverlapEdgeSnap, snapFrame, } from '@elah/core';
+import { useTracksStore } from '@elah/core';
+import { useMediaLibraryStore } from '@elah/core';
+const CLIP_STYLES = {
+    video: {
+        top: '#3B82F6',
+        mid: '#2563EB',
+        bottom: '#1D4ED8',
+        accent: '#60A5FA',
+    },
+    audio: {
+        top: '#22C55E',
+        mid: '#16A34A',
+        bottom: '#15803D',
+        accent: '#4ADE80',
+    },
+    text: {
+        top: '#A855F7',
+        mid: '#9333EA',
+        bottom: '#7E22CE',
+        accent: '#C084FC',
+    },
+    image: {
+        top: '#FBBF24',
+        mid: '#D97706',
+        bottom: '#B45309',
+        accent: '#FCD34D',
+    },
+};
+const WAVE_BARS = [
+    0.35, 0.55, 0.75, 0.45, 0.9, 0.6, 0.8, 0.5, 0.7, 0.4, 0.85, 0.55, 0.65, 0.45, 0.75,
+    0.5, 0.95, 0.6, 0.8, 0.45, 0.7, 0.55, 0.85, 0.4, 0.65, 0.75, 0.5, 0.9, 0.6, 0.45,
+];
+const TRIM_HANDLE_WIDTH = 8;
+export const ClipBlock = memo(function ClipBlock({ clip, zoom, trackHeight }) {
+    const engine = useTimeline();
+    const isSelected = useSelectionStore((s) => s.selectedClipIds.has(clip.id));
+    const selectClip = useSelectionStore((s) => s.selectClip);
+    const clearSelection = useSelectionStore((s) => s.clearSelection);
+    const snapEnabled = usePlaybackStore((s) => s.snapEnabled);
+    const asset = useMediaLibraryStore((s) => clip.assetId ? s.assets[clip.assetId] : undefined);
+    const blockRef = useRef(null);
+    const isDragging = useRef(false);
+    const [ctxMenu, setCtxMenu] = useState(null);
+    const left = clip.startFrame * zoom;
+    const width = Math.max(clip.durationFrames * zoom, 4);
+    const blockHeight = trackHeight - 10;
+    const palette = CLIP_STYLES[clip.type] ?? CLIP_STYLES.video;
+    const stripFrames = asset?.thumbnailStrip ?? (asset?.thumbnailUrl ? [asset.thumbnailUrl] : []);
+    const tileAspect = asset?.width && asset?.height ? asset.width / asset.height : 16 / 9;
+    const tileWidth = Math.max(12, blockHeight * tileAspect);
+    const tileCount = Math.min(40, Math.max(1, Math.ceil(width / tileWidth)));
+    const waveform = asset?.waveform;
+    let waveBars = WAVE_BARS;
+    if (waveform && waveform.length > 0) {
+        const count = Math.min(160, Math.max(8, Math.floor(width / 3)));
+        const sampled = new Array(count);
+        for (let i = 0; i < count; i++) {
+            sampled[i] = waveform[Math.floor((i / count) * waveform.length)];
+        }
+        waveBars = sampled;
+    }
+    const handleBodyMouseDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        selectClip(clip.id);
+        const startX = e.clientX;
+        const originalStart = clip.startFrame;
+        let currentStart = originalStart;
+        isDragging.current = false;
+        const allClips = useTracksStore.getState().clips;
+        const handleMove = (moveEvent) => {
+            isDragging.current = true;
+            if (blockRef.current) {
+                blockRef.current.style.zIndex = '30';
+            }
+            const deltaX = moveEvent.clientX - startX;
+            const deltaFrames = Math.round(deltaX / zoom);
+            let nextStart = Math.max(0, originalStart + deltaFrames);
+            if (snapEnabled) {
+                const snapPoints = buildSnapPoints(allClips, clip.id);
+                nextStart = snapFrame(nextStart, snapPoints, Math.max(1, Math.round(5 / zoom)));
+            }
+            currentStart = nextStart;
+            if (blockRef.current) {
+                blockRef.current.style.transform = `translateX(${nextStart * zoom - left}px)`;
+            }
+        };
+        const handleUp = () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            if (isDragging.current && currentStart !== originalStart) {
+                const trackClips = useTracksStore.getState().clips[clip.trackId] ?? [];
+                const settledStart = resolveOverlapEdgeSnap(currentStart, clip, trackClips, DEFAULT_OVERLAP_TOLERANCE);
+                engine.moveClip(clip.id, clip.trackId, clip.trackId, settledStart);
+            }
+            if (blockRef.current) {
+                blockRef.current.style.transform = '';
+                blockRef.current.style.zIndex = '';
+            }
+            isDragging.current = false;
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+    }, [clip, zoom, engine, selectClip, left, snapEnabled]);
+    const handleLeftTrimMouseDown = useCallback((e) => {
+        e.stopPropagation();
+        selectClip(clip.id);
+        const startX = e.clientX;
+        const originalStart = clip.startFrame;
+        const originalDuration = clip.durationFrames;
+        const anchorEnd = originalStart + originalDuration;
+        const maxDuration = clip.type === 'text' ? Infinity : clip.sourceDurationFrames;
+        const minDuration = Math.max(1, Math.ceil((TRIM_HANDLE_WIDTH * 2) / zoom));
+        const calcLeftTrim = (clientX) => {
+            const deltaFrames = Math.round((clientX - startX) / zoom);
+            let newStart = Math.max(0, originalStart + deltaFrames);
+            newStart = Math.min(newStart, anchorEnd - minDuration);
+            let newDuration = anchorEnd - newStart;
+            if (newDuration > maxDuration) {
+                newDuration = maxDuration;
+                newStart = anchorEnd - maxDuration;
+            }
+            return { newStart, newDuration };
+        };
+        const handleMove = (moveEvent) => {
+            const { newStart, newDuration } = calcLeftTrim(moveEvent.clientX);
+            if (blockRef.current) {
+                blockRef.current.style.left = `${newStart * zoom}px`;
+                blockRef.current.style.width = `${newDuration * zoom}px`;
+            }
+        };
+        const handleUp = (upEvent) => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            const { newStart, newDuration } = calcLeftTrim(upEvent.clientX);
+            if (newStart !== originalStart || newDuration !== originalDuration) {
+                engine.trimClip(clip.id, clip.trackId, newStart, newDuration);
+            }
+            if (blockRef.current) {
+                const live = engine.findClip(clip.id)?.clip;
+                const liveStart = live?.startFrame ?? originalStart;
+                const liveDuration = live?.durationFrames ?? originalDuration;
+                blockRef.current.style.left = `${liveStart * zoom}px`;
+                blockRef.current.style.width = `${Math.max(liveDuration * zoom, 4)}px`;
+            }
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+    }, [clip, zoom, engine, selectClip]);
+    const handleRightTrimMouseDown = useCallback((e) => {
+        e.stopPropagation();
+        selectClip(clip.id);
+        const startX = e.clientX;
+        const originalDuration = clip.durationFrames;
+        const maxDuration = clip.type === 'text' ? Infinity : clip.sourceDurationFrames;
+        const minDuration = Math.max(1, Math.ceil((TRIM_HANDLE_WIDTH * 2) / zoom));
+        const calcRightTrim = (clientX) => {
+            const deltaFrames = Math.round((clientX - startX) / zoom);
+            return Math.min(maxDuration, Math.max(minDuration, originalDuration + deltaFrames));
+        };
+        const handleMove = (moveEvent) => {
+            const newDuration = calcRightTrim(moveEvent.clientX);
+            if (blockRef.current) {
+                blockRef.current.style.width = `${newDuration * zoom}px`;
+            }
+        };
+        const handleUp = (upEvent) => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            const newDuration = calcRightTrim(upEvent.clientX);
+            if (newDuration !== originalDuration) {
+                engine.trimClip(clip.id, clip.trackId, clip.startFrame, newDuration);
+            }
+            if (blockRef.current) {
+                const live = engine.findClip(clip.id)?.clip;
+                const liveDuration = live?.durationFrames ?? originalDuration;
+                blockRef.current.style.width = `${Math.max(liveDuration * zoom, 4)}px`;
+            }
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+    }, [clip, zoom, engine, selectClip]);
+    const handleDelete = useCallback((e) => {
+        e.stopPropagation();
+        engine.removeClip(clip.id, clip.trackId);
+        clearSelection();
+    }, [clip.id, clip.trackId, engine, clearSelection]);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        selectClip(clip.id);
+        setCtxMenu({ x: e.clientX, y: e.clientY });
+    }, [clip.id, selectClip]);
+    const closeCtxMenu = useCallback(() => setCtxMenu(null), []);
+    const handleCtxDelete = useCallback(() => {
+        engine.removeClip(clip.id, clip.trackId);
+        clearSelection();
+        setCtxMenu(null);
+    }, [clip.id, clip.trackId, engine, clearSelection]);
+    return (_jsxs("div", { ref: blockRef, onMouseDown: handleBodyMouseDown, onContextMenu: handleContextMenu, style: {
+            position: 'absolute',
+            top: 5,
+            left,
+            width,
+            height: blockHeight,
+            borderRadius: 7,
+            boxSizing: 'border-box',
+            background: `linear-gradient(180deg, ${palette.top} 0%, ${palette.mid} 42%, ${palette.bottom} 100%)`,
+            border: isSelected
+                ? '2px solid #FF2D55'
+                : `1px solid ${palette.accent}55`,
+            boxShadow: isSelected
+                ? '0 0 14px rgba(255, 45, 85, 0.4), inset 0 1px 0 rgba(255,255,255,0.15)'
+                : 'inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.35)',
+            cursor: 'grab',
+            overflow: 'hidden',
+            userSelect: 'none',
+            willChange: 'transform',
+            zIndex: isSelected ? 5 : 1,
+        }, children: [(clip.type === 'video' || clip.type === 'image') && stripFrames.length > 0 && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                    borderRadius: 7,
+                }, children: Array.from({ length: tileCount }).map((_, i) => {
+                    const frameIdx = Math.min(stripFrames.length - 1, Math.floor((i / tileCount) * stripFrames.length));
+                    return (_jsx("div", { style: {
+                            flex: '1 1 0',
+                            minWidth: 0,
+                            height: '100%',
+                            backgroundImage: `url(${stripFrames[frameIdx]})`,
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                            boxShadow: 'inset -1px 0 0 rgba(0,0,0,0.28)',
+                        } }, i));
+                }) })), _jsx("div", { style: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: 3,
+                    background: palette.accent,
+                    opacity: 0.85,
+                    pointerEvents: 'none',
+                } }), _jsx("div", { style: {
+                    position: 'absolute',
+                    inset: '0 0 55%',
+                    background: 'linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%)',
+                    pointerEvents: 'none',
+                } }), clip.type === 'audio' && (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: TRIM_HANDLE_WIDTH,
+                    right: TRIM_HANDLE_WIDTH,
+                    bottom: 4,
+                    height: '46%',
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    gap: 1,
+                    opacity: 0.55,
+                    pointerEvents: 'none',
+                }, children: waveBars.map((h, i) => (_jsx("div", { style: {
+                        flex: '1 1 2px',
+                        minWidth: 1,
+                        maxWidth: 3,
+                        height: `${Math.max(6, h * 100)}%`,
+                        background: 'rgba(255,255,255,0.85)',
+                        borderRadius: 1,
+                    } }, i))) })), (clip.type === 'video' || clip.type === 'image') &&
+                stripFrames.length === 0 &&
+                width > 28 && (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: TRIM_HANDLE_WIDTH + 4,
+                    top: 4,
+                    bottom: 4,
+                    width: 14,
+                    borderRadius: 3,
+                    background: 'rgba(0,0,0,0.22)',
+                    border: '1px solid rgba(255,255,255,0.08)',
+                    pointerEvents: 'none',
+                } })), _jsx("div", { onMouseDown: handleLeftTrimMouseDown, style: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    width: TRIM_HANDLE_WIDTH,
+                    height: '100%',
+                    cursor: 'ew-resize',
+                    background: 'linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 100%)',
+                    zIndex: 2,
+                } }), _jsx("span", { style: {
+                    position: 'relative',
+                    zIndex: 1,
+                    display: 'block',
+                    paddingLeft: clip.type === 'video' || clip.type === 'image' ? TRIM_HANDLE_WIDTH + 22 : TRIM_HANDLE_WIDTH + 6,
+                    paddingRight: TRIM_HANDLE_WIDTH + 6,
+                    paddingTop: 5,
+                    fontSize: 10,
+                    color: 'rgba(255,255,255,0.95)',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontWeight: 600,
+                    letterSpacing: '0.01em',
+                    textShadow: '0 1px 2px rgba(0,0,0,0.45)',
+                    pointerEvents: 'none',
+                }, children: clip.type === 'text' ? (clip.content?.trim() || clip.name) : clip.name }), _jsx("div", { onMouseDown: handleRightTrimMouseDown, style: {
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    width: TRIM_HANDLE_WIDTH,
+                    height: '100%',
+                    cursor: 'ew-resize',
+                    background: 'linear-gradient(270deg, rgba(0,0,0,0.35) 0%, transparent 100%)',
+                    zIndex: 2,
+                } }), isSelected && (_jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleDelete, title: "Delete clip (Del)", "aria-label": "Delete clip", style: {
+                    position: 'absolute',
+                    top: 3,
+                    right: TRIM_HANDLE_WIDTH + 3,
+                    width: 16,
+                    height: 16,
+                    padding: 0,
+                    lineHeight: '14px',
+                    fontSize: 11,
+                    color: '#fff',
+                    background: 'rgba(0,0,0,0.5)',
+                    border: '1px solid rgba(255,255,255,0.35)',
+                    borderRadius: 4,
+                    cursor: 'pointer',
+                    zIndex: 4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: "\u00D7" })), ctxMenu && createPortal(_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 9998 }, onMouseDown: closeCtxMenu }), _jsx("div", { style: {
+                            position: 'fixed',
+                            top: ctxMenu.y,
+                            left: ctxMenu.x,
+                            zIndex: 9999,
+                            background: '#1E2433',
+                            border: '1px solid #2D3548',
+                            borderRadius: 6,
+                            padding: '4px 0',
+                            minWidth: 140,
+                            boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+                            fontFamily: 'sans-serif',
+                        }, children: _jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleCtxDelete, style: {
+                                display: 'block',
+                                width: '100%',
+                                padding: '7px 14px',
+                                textAlign: 'left',
+                                background: 'none',
+                                border: 'none',
+                                color: '#FF6B6B',
+                                fontSize: 13,
+                                cursor: 'pointer',
+                                letterSpacing: '0.01em',
+                            }, onMouseEnter: (e) => {
+                                ;
+                                e.currentTarget.style.background = 'rgba(255,107,107,0.12)';
+                            }, onMouseLeave: (e) => {
+                                ;
+                                e.currentTarget.style.background = 'none';
+                            }, children: "Delete" }) })] }), document.body)] }));
+});

package/dist/Playhead.d.ts

@@ -0,0 +1,9 @@
+interface PlayheadProps {
+    zoom: number;
+    height: number | string;
+    color?: string;
+    scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
+    sidebarWidth?: number;
+}
+export declare function Playhead({ zoom, height, color, scrollContainerRef, sidebarWidth, }: PlayheadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Playhead.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { usePlaybackStore } from '@elah/core';
+export function Playhead({ zoom, height, color = '#FF2D55', scrollContainerRef, sidebarWidth = 0, }) {
+    const needleRef = useRef(null);
+    const zoomRef = useRef(zoom);
+    const sidebarWidthRef = useRef(sidebarWidth);
+    zoomRef.current = zoom;
+    sidebarWidthRef.current = sidebarWidth;
+    const applyPosition = (frame, scrollLeft) => {
+        if (needleRef.current) {
+            const left = sidebarWidthRef.current + frame * zoomRef.current - scrollLeft;
+            needleRef.current.style.left = `${left}px`;
+            needleRef.current.style.visibility =
+                left < sidebarWidthRef.current ? 'hidden' : 'visible';
+        }
+    };
+    useEffect(() => {
+        return usePlaybackStore.subscribe((state, prev) => {
+            if (state.currentFrame === prev.currentFrame)
+                return;
+            const scrollLeft = scrollContainerRef?.current?.scrollLeft ?? 0;
+            applyPosition(state.currentFrame, scrollLeft);
+        });
+    }, [scrollContainerRef]);
+    useEffect(() => {
+        const scrollLeft = scrollContainerRef?.current?.scrollLeft ?? 0;
+        applyPosition(usePlaybackStore.getState().currentFrame, scrollLeft);
+    }, [zoom, sidebarWidth, scrollContainerRef]);
+    useEffect(() => {
+        const el = scrollContainerRef?.current;
+        if (!el)
+            return;
+        const handleScroll = () => {
+            applyPosition(usePlaybackStore.getState().currentFrame, el.scrollLeft);
+        };
+        el.addEventListener('scroll', handleScroll, { passive: true });
+        return () => el.removeEventListener('scroll', handleScroll);
+    }, []);
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        const store = usePlaybackStore.getState();
+        const { setCurrentFrame } = store;
+        const wasPlaying = store.isPlaying;
+        if (wasPlaying)
+            store.pause();
+        const handleMove = (moveEvent) => {
+            const container = scrollContainerRef?.current;
+            const scrollLeft = container?.scrollLeft ?? 0;
+            const parent = needleRef.current?.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            const x = moveEvent.clientX - rect.left - sidebarWidthRef.current + scrollLeft;
+            setCurrentFrame(Math.max(0, Math.round(x / zoomRef.current)));
+        };
+        const handleUp = () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            if (wasPlaying)
+                usePlaybackStore.getState().play();
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+    }, [scrollContainerRef]);
+    return (_jsx("div", { ref: needleRef, onMouseDown: handleMouseDown, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 2,
+            height,
+            background: color,
+            boxShadow: `0 0 8px ${color}`,
+            zIndex: 50,
+            cursor: 'col-resize',
+            willChange: 'left',
+            pointerEvents: 'all',
+        }, children: _jsx("div", { style: {
+                position: 'absolute',
+                top: -2,
+                left: -7,
+                width: 16,
+                height: 14,
+                background: color,
+                borderRadius: '3px 3px 0 0',
+                clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+                boxShadow: `0 0 8px ${color}`,
+            } }) }));
+}

package/dist/Ruler.d.ts

@@ -0,0 +1,12 @@
+interface RulerProps {
+    fps: number;
+    totalFrames: number;
+    zoom: number;
+    height?: number;
+    color?: string;
+    tickColor?: string;
+    labelColor?: string;
+    onSeek?: (frame: number) => void;
+}
+export declare const Ruler: import("react").NamedExoticComponent<RulerProps>;
+export {};

package/dist/Ruler.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { framesToTimecode } from '@elah/core';
+export const Ruler = memo(function Ruler({ fps, totalFrames, zoom, height = 24, color = '#121722', tickColor = '#232938', labelColor = '#6B7280', onSeek, }) {
+    const contentWidth = totalFrames * zoom;
+    const ticks = useMemo(() => {
+        const pixelsPerFrame = zoom;
+        const pixelsPerSecond = fps * pixelsPerFrame;
+        const rawSeconds = 80 / pixelsPerSecond;
+        const intervals = [
+            1 / fps,
+            0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 1200, 1800,
+        ];
+        const secondsPerTick = intervals.find((i) => i >= rawSeconds) ?? intervals[intervals.length - 1];
+        const framesPerTick = Math.max(1, Math.round(secondsPerTick * fps));
+        const result = [];
+        for (let frame = 0; frame <= totalFrames + framesPerTick; frame += framesPerTick) {
+            result.push({ frame, label: framesToTimecode(frame, fps) });
+        }
+        return result;
+    }, [fps, totalFrames, zoom]);
+    const handleClick = (e) => {
+        if (!onSeek)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        onSeek(Math.max(0, Math.round(x / zoom)));
+    };
+    return (_jsx("div", { style: {
+            position: 'relative',
+            width: contentWidth,
+            minWidth: '100%',
+            height,
+            background: color,
+            flexShrink: 0,
+            cursor: onSeek ? 'pointer' : 'default',
+            userSelect: 'none',
+        }, onClick: handleClick, children: ticks.map(({ frame, label }) => (_jsxs("div", { style: {
+                position: 'absolute',
+                left: frame * zoom,
+                top: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+            }, children: [_jsx("div", { style: {
+                        width: 1,
+                        height: height * 0.5,
+                        background: tickColor,
+                    } }), _jsx("span", { style: {
+                        fontSize: 9,
+                        color: labelColor,
+                        whiteSpace: 'nowrap',
+                        transform: 'translateX(3px)',
+                        fontFamily: 'monospace',
+                    }, children: label })] }, frame))) }));
+});

package/dist/Timeline.d.ts

@@ -0,0 +1,13 @@
+import type { TimelineEngine } from '@elah/core';
+import type { PlaybackEngine } from '@elah/core';
+export interface TimelineRef {
+    engine: TimelineEngine;
+    playback: PlaybackEngine;
+    fitToWindow: () => void;
+}
+export interface TimelineProps {
+    fps?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Timeline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<TimelineRef>>>;