@elah/timeline 0.1.0

package/dist/Timeline.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { useTracksStore } from '@elah/core';
+import { usePlaybackStore } from '@elah/core';
+import { useSelectionStore } from '@elah/core';
+import { splitClipAtPlayhead } from '@elah/core';
+import { useEditor } from '@elah/core';
+import { Ruler } from './Ruler';
+import { Playhead } from './Playhead';
+import { TrackRow } from './TrackRow';
+import { AudioDropDialog } from './AudioDropDialog';
+const SIDEBAR_WIDTH = 160;
+function buildPasteOptions(clip, startFrame) {
+    const base = {
+        trackId: clip.trackId,
+        name: clip.name,
+        startFrame,
+        durationFrames: clip.durationFrames,
+        volume: clip.volume,
+        opacity: clip.opacity,
+        transform: clip.transform,
+    };
+    if (clip.type === 'text') {
+        return {
+            ...base,
+            type: 'text',
+            text: {
+                content: clip.content ?? '',
+                fontSize: clip.fontSize,
+                color: clip.color,
+                fontFamily: clip.fontFamily,
+                fontWeight: clip.fontWeight,
+                textAlign: clip.textAlign,
+            },
+        };
+    }
+    return {
+        ...base,
+        type: clip.type,
+        src: clip.src ?? '',
+        assetId: clip.assetId,
+    };
+}
+export const Timeline = memo(forwardRef(function Timeline({ fps = 30, className, style }, ref) {
+    const { engine, playback } = useEditor();
+    const scrollRef = useRef(null);
+    const rulerWrapRef = useRef(null);
+    const clipboardRef = useRef([]);
+    const fitToWindow = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const available = el.clientWidth - SIDEBAR_WIDTH;
+        if (available <= 0)
+            return;
+        const totalFrames = useTracksStore.getState().totalFrames;
+        const frames = Math.max(totalFrames, fps * 10);
+        usePlaybackStore.getState().setZoom(available / frames);
+    }, [fps]);
+    useImperativeHandle(ref, () => ({ engine, playback, fitToWindow }), [engine, playback, fitToWindow]);
+    const tracks = useTracksStore((s) => s.tracks);
+    const totalFrames = useTracksStore((s) => s.totalFrames);
+    const zoom = usePlaybackStore((s) => s.zoom);
+    const setZoom = usePlaybackStore((s) => s.setZoom);
+    const setCurrentFrame = usePlaybackStore((s) => s.setCurrentFrame);
+    const syncRulerScroll = useCallback(() => {
+        if (rulerWrapRef.current && scrollRef.current) {
+            rulerWrapRef.current.scrollLeft = scrollRef.current.scrollLeft;
+        }
+    }, []);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const handleWheel = (e) => {
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            const direction = e.deltaY > 0 ? -0.5 : 0.5;
+            setZoom(usePlaybackStore.getState().zoom + direction);
+        };
+        el.addEventListener('wheel', handleWheel, { passive: false });
+        return () => el.removeEventListener('wheel', handleWheel);
+    }, [setZoom]);
+    useEffect(() => {
+        const handleKey = (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable)
+                return;
+            if (e.code === 'Space') {
+                e.preventDefault();
+                usePlaybackStore.getState().togglePlayPause();
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                engine.undo();
+            }
+            if ((e.ctrlKey || e.metaKey) &&
+                (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+                e.preventDefault();
+                engine.redo();
+            }
+            if (e.key === 's' &&
+                !e.ctrlKey &&
+                !e.metaKey &&
+                !e.shiftKey &&
+                !e.altKey) {
+                e.preventDefault();
+                const result = splitClipAtPlayhead(engine);
+                if (!result.ok) {
+                    console.warn('[timeline] split-at-playhead failed:', result.reason);
+                }
+            }
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                const selected = useSelectionStore.getState().selectedClipIds;
+                if (selected.size === 0)
+                    return;
+                e.preventDefault();
+                engine.batch(() => {
+                    for (const clipId of selected) {
+                        const found = engine.findClip(clipId);
+                        if (found)
+                            engine.removeClip(clipId, found.trackId);
+                    }
+                }, 'Delete clip');
+                useSelectionStore.getState().clearSelection();
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'c' && !e.shiftKey) {
+                const selected = useSelectionStore.getState().selectedClipIds;
+                if (selected.size === 0)
+                    return;
+                e.preventDefault();
+                const snaps = [];
+                for (const clipId of selected) {
+                    const found = engine.findClip(clipId);
+                    if (found)
+                        snaps.push({ ...found.clip });
+                }
+                clipboardRef.current = snaps;
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v' && !e.shiftKey) {
+                const clips = clipboardRef.current;
+                if (clips.length === 0)
+                    return;
+                e.preventDefault();
+                const minStart = Math.min(...clips.map((c) => c.startFrame));
+                const pasteFrame = Math.max(...clips.map((c) => c.startFrame + c.durationFrames));
+                const newIds = [];
+                engine.batch(() => {
+                    for (const src of clips) {
+                        const offset = src.startFrame - minStart;
+                        const options = buildPasteOptions(src, pasteFrame + offset);
+                        const newClip = engine.addClip(options);
+                        if (src.sourceStartFrame !== 0 || src.sourceDurationFrames !== src.durationFrames) {
+                            engine.updateClip(newClip.id, newClip.trackId, {
+                                sourceStartFrame: src.sourceStartFrame,
+                                sourceDurationFrames: src.sourceDurationFrames,
+                            });
+                        }
+                        newIds.push(newClip.id);
+                    }
+                }, 'Paste clip');
+                useSelectionStore.getState().selectClips(newIds);
+            }
+            if (e.code === 'ArrowRight' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                e.preventDefault();
+                const { currentFrame, setCurrentFrame } = usePlaybackStore.getState();
+                setCurrentFrame(currentFrame + 1);
+            }
+            if (e.code === 'ArrowLeft' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                e.preventDefault();
+                const { currentFrame, setCurrentFrame } = usePlaybackStore.getState();
+                setCurrentFrame(Math.max(0, currentFrame - 1));
+            }
+        };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [engine]);
+    const rulerHeight = 24;
+    const totalHeight = tracks.reduce((sum, t) => sum + t.height, 0);
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            background: '#0A0D14',
+            color: '#F3F4F6',
+            overflow: 'hidden',
+            position: 'relative',
+            fontFamily: 'sans-serif',
+            ...style,
+        }, children: [_jsxs("div", { style: { display: 'flex' }, children: [_jsx("div", { style: {
+                            width: SIDEBAR_WIDTH,
+                            flexShrink: 0,
+                            height: rulerHeight,
+                            background: '#121722',
+                            borderRight: '1px solid #232938',
+                            borderBottom: '1px solid #1A1F2B',
+                        } }), _jsx("div", { ref: rulerWrapRef, style: { flex: 1, overflow: 'hidden' }, children: _jsx(Ruler, { fps: fps, totalFrames: Math.max(totalFrames, fps * 10), zoom: zoom, height: rulerHeight, onSeek: setCurrentFrame }) })] }), _jsxs("div", { ref: scrollRef, onScroll: syncRulerScroll, style: {
+                    flex: 1,
+                    overflow: 'auto',
+                    position: 'relative',
+                    minHeight: 0,
+                }, children: [tracks.map((track) => (_jsx(TrackRow, { track: track, totalFrames: Math.max(totalFrames, fps * 10), zoom: zoom, fps: fps }, track.id))), tracks.length === 0 && (_jsx("div", { style: {
+                            padding: 24,
+                            color: '#555',
+                            fontSize: 13,
+                            textAlign: 'center',
+                        }, children: "No tracks yet. Add a track to get started." }))] }), _jsx(Playhead, { zoom: zoom, height: "100%", scrollContainerRef: scrollRef, sidebarWidth: SIDEBAR_WIDTH }), _jsx(AudioDropDialog, {})] }));
+}));

package/dist/TrackRow.d.ts

@@ -0,0 +1,9 @@
+import type { Track } from '@elah/core';
+interface TrackRowProps {
+    track: Track;
+    totalFrames: number;
+    zoom: number;
+    fps: number;
+}
+export declare const TrackRow: import("react").NamedExoticComponent<TrackRowProps>;
+export {};

package/dist/TrackRow.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useMemo } from 'react';
+import { useTracksStore } from '@elah/core';
+import { useSelectionStore } from '@elah/core';
+import { ClipBlock } from './ClipBlock';
+import { TransitionChip } from './TransitionChip';
+import { useTimelineDrop } from './useTimelineDrop';
+export const TrackRow = memo(function TrackRow({ track, totalFrames, zoom, fps, }) {
+    const rawClips = useTracksStore((s) => s.clips[track.id]) ?? [];
+    const clips = useMemo(() => [...rawClips].sort((a, b) => a.startFrame - b.startFrame), [rawClips]);
+    const adjacentPairs = useMemo(() => {
+        if (track.kind === 'audio' || track.kind === 'text')
+            return [];
+        const pairs = [];
+        for (let i = 0; i < clips.length - 1; i++) {
+            const a = clips[i];
+            const b = clips[i + 1];
+            const gap = b.startFrame - (a.startFrame + a.durationFrames);
+            if (gap >= 0 && gap <= 2) {
+                pairs.push({ from: a, to: b });
+            }
+        }
+        return pairs;
+    }, [clips, track.kind]);
+    const isActive = useSelectionStore((s) => s.activeTrackId === track.id);
+    const setActiveTrack = useSelectionStore((s) => s.setActiveTrack);
+    const [laneEl, setLaneEl] = useState(null);
+    useTimelineDrop(track.id, laneEl);
+    const rowMinWidth = Math.max(totalFrames * zoom, 800);
+    const kindAccent = track.kind === 'video'
+        ? '#2563EB'
+        : track.kind === 'audio'
+            ? '#16A34A'
+            : '#9333EA';
+    return (_jsxs("div", { style: { display: 'flex', height: track.height }, children: [_jsx("div", { onClick: () => setActiveTrack(track.id), style: {
+                    position: 'sticky',
+                    left: 0,
+                    zIndex: 6,
+                    width: 160,
+                    flexShrink: 0,
+                    borderLeft: `3px solid ${kindAccent}`,
+                    borderRight: '1px solid #232938',
+                    borderBottom: '1px solid #1A1F2B',
+                    background: isActive ? '#171D2B' : '#121722',
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingLeft: 12,
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                }, children: _jsx("span", { style: {
+                        fontSize: 11,
+                        color: isActive ? '#F3F4F6' : '#A7AFBF',
+                        fontWeight: isActive ? 600 : 500,
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                    }, children: track.name }) }), _jsxs("div", { ref: setLaneEl, style: {
+                    position: 'relative',
+                    flex: 1,
+                    minWidth: rowMinWidth,
+                    borderBottom: '1px solid #1A1F2B',
+                    background: isActive ? '#0D1017' : '#0A0D14',
+                    overflow: 'visible',
+                }, children: [clips.map((clip) => (_jsx(ClipBlock, { clip: clip, zoom: zoom, trackHeight: track.height }, clip.id))), adjacentPairs.map(({ from, to }) => (_jsx(TransitionChip, { fromClip: from, toClip: to, zoom: zoom, trackHeight: track.height, fps: fps }, `${from.id}-${to.id}`)))] })] }));
+});

package/dist/TransitionChip.d.ts

@@ -0,0 +1,10 @@
+import type { Clip } from '@elah/core';
+interface TransitionChipProps {
+    fromClip: Clip;
+    toClip: Clip;
+    zoom: number;
+    trackHeight: number;
+    fps: number;
+}
+export declare const TransitionChip: import("react").NamedExoticComponent<TransitionChipProps>;
+export {};

package/dist/TransitionChip.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState, useCallback } from 'react';
+import { useTimeline } from './engine-context';
+import { useTransitionsStore } from '@elah/core';
+import { TransitionPicker } from './TransitionPicker';
+const HIT_W = 24;
+const DIAMOND = 16;
+export const TransitionChip = memo(function TransitionChip({ fromClip, toClip, zoom, trackHeight, fps }) {
+    const engine = useTimeline();
+    const [pickerPos, setPickerPos] = useState(null);
+    const pickerOpen = pickerPos !== null;
+    const [hovered, setHovered] = useState(false);
+    const transition = useTransitionsStore((s) => s.transitions.find((t) => t.fromClipId === fromClip.id && t.toClipId === toClip.id));
+    const cutX = toClip.startFrame * zoom;
+    const hasTransition = Boolean(transition);
+    const lineColor = hasTransition
+        ? 'rgba(107, 140, 255, 0.9)'
+        : hovered
+            ? 'rgba(255,255,255,0.55)'
+            : 'rgba(255,255,255,0.18)';
+    const handleAdd = useCallback((kind, durationFrames, offsetFrames) => {
+        engine.addTransition({
+            fromClipId: fromClip.id,
+            toClipId: toClip.id,
+            trackId: fromClip.trackId,
+            kind,
+            durationFrames,
+            offsetFrames,
+        });
+    }, [engine, fromClip, toClip]);
+    const handleUpdate = useCallback((patch) => {
+        if (transition)
+            engine.updateTransition(transition.id, patch);
+    }, [engine, transition]);
+    const handleRemove = useCallback(() => {
+        if (transition)
+            engine.removeTransition(transition.id);
+    }, [engine, transition]);
+    const diamondTop = (trackHeight - DIAMOND) / 2;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    left: cutX - 0.5,
+                    top: 5,
+                    width: 1,
+                    height: trackHeight - 10,
+                    background: lineColor,
+                    transition: 'background 0.12s',
+                    pointerEvents: 'none',
+                    zIndex: 8,
+                } }), _jsx("div", { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: (e) => {
+                    e.stopPropagation();
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setPickerPos({ x: rect.left + rect.width / 2, y: rect.top });
+                }, title: hasTransition ? `${transition.kind} — click to change` : 'Add transition', style: {
+                    position: 'absolute',
+                    left: cutX - HIT_W / 2,
+                    top: 0,
+                    width: HIT_W,
+                    height: trackHeight,
+                    zIndex: 11,
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx("div", { style: {
+                        position: 'absolute',
+                        top: diamondTop,
+                        width: DIAMOND,
+                        height: DIAMOND,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        opacity: hasTransition ? 1 : hovered ? 1 : 0,
+                        transition: 'opacity 0.12s',
+                    }, children: hasTransition ? (_jsx("svg", { width: DIAMOND, height: DIAMOND, viewBox: "0 0 16 16", children: _jsx("rect", { x: 2, y: 2, width: 12, height: 12, rx: 2, transform: "rotate(45 8 8)", fill: "#6B8CFF", stroke: "#A5B4FC", strokeWidth: 1 }) })) : (_jsxs("svg", { width: DIAMOND, height: DIAMOND, viewBox: "0 0 16 16", children: [_jsx("rect", { x: 3, y: 3, width: 10, height: 10, rx: 1.5, transform: "rotate(45 8 8)", fill: "rgba(255,255,255,0.12)", stroke: "rgba(255,255,255,0.7)", strokeWidth: 1.5 }), _jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11", stroke: "rgba(255,255,255,0.7)", strokeWidth: 1.2 }), _jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8", stroke: "rgba(255,255,255,0.7)", strokeWidth: 1.2 })] })) }) }), pickerOpen && pickerPos && (_jsx(TransitionPicker, { anchorX: pickerPos.x, anchorY: pickerPos.y, cutFrame: toClip.startFrame, fps: fps, existing: transition, onAdd: handleAdd, onUpdate: handleUpdate, onRemove: handleRemove, onClose: () => setPickerPos(null) }))] }));
+});

package/dist/TransitionPicker.d.ts

@@ -0,0 +1,18 @@
+import type { TransitionKind, Transition } from '@elah/core';
+interface TransitionPickerProps {
+    anchorX: number;
+    anchorY: number;
+    cutFrame: number;
+    fps: number;
+    existing?: Transition;
+    onAdd: (kind: TransitionKind, durationFrames: number, offsetFrames: number) => void;
+    onUpdate: (patch: {
+        durationFrames?: number;
+        offsetFrames?: number;
+        kind?: TransitionKind;
+    }) => void;
+    onRemove: () => void;
+    onClose: () => void;
+}
+export declare function TransitionPicker({ anchorX, anchorY, cutFrame, fps, existing, onAdd, onUpdate, onRemove, onClose, }: TransitionPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TransitionPicker.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+const OPTIONS = [
+    {
+        kind: 'fade',
+        label: 'Fade',
+        icon: 'M4 12 Q12 4 20 12 Q12 20 4 12Z',
+    },
+    {
+        kind: 'slide',
+        label: 'Slide',
+        icon: 'M4 8h16M4 12h10M4 16h7',
+    },
+    {
+        kind: 'wipe',
+        label: 'Wipe',
+        icon: 'M4 4h16v16H4z M12 4v16',
+    },
+];
+const DEFAULT_DURATION = 15;
+const MIN_DURATION = 2;
+const MAX_DURATION = 120;
+function deriveOffset(existing, cutFrame) {
+    const half = Math.floor(existing.durationFrames / 2);
+    const center = existing.startFrame + half;
+    return center - cutFrame;
+}
+export function TransitionPicker({ anchorX, anchorY, cutFrame, fps, existing, onAdd, onUpdate, onRemove, onClose, }) {
+    const ref = useRef(null);
+    const [durationFrames, setDurationFrames] = useState(existing?.durationFrames ?? DEFAULT_DURATION);
+    const [offsetFrames, setOffsetFrames] = useState(existing ? deriveOffset(existing, cutFrame) : 0);
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [onClose]);
+    const half = Math.max(1, Math.floor(durationFrames / 2));
+    const before = half - offsetFrames;
+    const after = half + offsetFrames;
+    const maxOffset = half - 1;
+    const durationSec = (durationFrames / fps).toFixed(2);
+    const handleDurationChange = (val) => {
+        const clamped = Math.max(MIN_DURATION, Math.min(MAX_DURATION, val));
+        setDurationFrames(clamped);
+        const newHalf = Math.max(1, Math.floor(clamped / 2));
+        const clampedOffset = Math.max(-(newHalf - 1), Math.min(newHalf - 1, offsetFrames));
+        setOffsetFrames(clampedOffset);
+        if (existing)
+            onUpdate({ durationFrames: clamped, offsetFrames: clampedOffset });
+    };
+    const handleOffsetChange = (val) => {
+        const clamped = Math.max(-maxOffset, Math.min(maxOffset, val));
+        setOffsetFrames(clamped);
+        if (existing)
+            onUpdate({ offsetFrames: clamped });
+    };
+    return (_jsxs("div", { ref: ref, style: {
+            position: 'fixed',
+            left: anchorX,
+            top: anchorY - 200,
+            zIndex: 1000,
+            background: '#1A1F2B',
+            border: '1px solid #2D3548',
+            borderRadius: 10,
+            padding: 10,
+            boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+            width: 184,
+        }, children: [_jsx("div", { style: {
+                    fontSize: 10,
+                    color: '#6B7280',
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    marginBottom: 8,
+                    paddingLeft: 2,
+                }, children: "Transition" }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }, children: OPTIONS.map((opt) => {
+                    const isActive = existing?.kind === opt.kind;
+                    return (_jsxs("button", { type: "button", onClick: () => {
+                            if (existing) {
+                                onUpdate({ kind: opt.kind });
+                                onClose();
+                            }
+                            else {
+                                onAdd(opt.kind, durationFrames, offsetFrames);
+                                onClose();
+                            }
+                        }, style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            gap: 4,
+                            padding: '8px 6px',
+                            background: isActive ? '#3B4A6B' : '#232938',
+                            border: isActive ? '1px solid #6B8CFF' : '1px solid #2D3548',
+                            borderRadius: 7,
+                            cursor: 'pointer',
+                            transition: 'background 0.12s',
+                        }, onMouseEnter: (e) => {
+                            if (!isActive)
+                                e.currentTarget.style.background = '#2D3548';
+                        }, onMouseLeave: (e) => {
+                            if (!isActive)
+                                e.currentTarget.style.background = '#232938';
+                        }, children: [_jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: isActive ? '#6B8CFF' : '#9CA3AF', strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: opt.icon }) }), _jsx("span", { style: { fontSize: 9, color: isActive ? '#A5B4FC' : '#9CA3AF', fontWeight: 500 }, children: opt.label })] }, opt.kind));
+                }) }), _jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("span", { style: { fontSize: 10, color: '#9CA3AF', fontWeight: 500 }, children: "Duration" }), _jsxs("span", { style: { fontSize: 10, color: '#E5E7EB', fontFamily: 'monospace' }, children: [durationFrames, "f \u00A0", durationSec, "s"] })] }), _jsx("input", { type: "range", min: MIN_DURATION, max: MAX_DURATION, value: durationFrames, onChange: (e) => handleDurationChange(Number(e.target.value)), style: { width: '100%', accentColor: '#6B8CFF', cursor: 'pointer' } })] }), _jsxs("div", { style: { marginTop: 10 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("span", { style: { fontSize: 10, color: '#9CA3AF', fontWeight: 500 }, children: "Position" }), _jsxs("span", { style: { fontSize: 10, color: '#E5E7EB', fontFamily: 'monospace' }, children: [before, "f \u25C6 ", after, "f"] })] }), _jsx("input", { type: "range", min: -maxOffset, max: maxOffset, value: offsetFrames, onChange: (e) => handleOffsetChange(Number(e.target.value)), style: { width: '100%', accentColor: '#6B8CFF', cursor: 'pointer' } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', marginTop: 2 }, children: [_jsx("span", { style: { fontSize: 8, color: '#4B5563' }, children: "\u2190 before cut" }), _jsx("span", { style: { fontSize: 8, color: '#4B5563' }, children: "after cut \u2192" })] })] }), existing && (_jsx("button", { type: "button", onClick: () => { onRemove(); onClose(); }, style: {
+                    marginTop: 10,
+                    width: '100%',
+                    padding: '5px 0',
+                    fontSize: 10,
+                    color: '#F87171',
+                    background: 'transparent',
+                    border: '1px solid #3F2A2A',
+                    borderRadius: 6,
+                    cursor: 'pointer',
+                }, children: "Remove transition" }))] }));
+}

package/dist/audioDropDialog.store.d.ts

@@ -0,0 +1,12 @@
+export type AudioDropChoice = 'both' | 'video-only' | 'audio-only';
+interface AudioDropDialogState {
+    open: boolean;
+    assetName: string;
+    resolve: ((choice: AudioDropChoice | null) => void) | null;
+}
+interface AudioDropDialogActions {
+    request: (assetName: string) => Promise<AudioDropChoice | null>;
+    respond: (choice: AudioDropChoice) => void;
+}
+export declare const useAudioDropDialogStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AudioDropDialogState & AudioDropDialogActions>>;
+export {};

package/dist/audioDropDialog.store.js

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+export const useAudioDropDialogStore = create((set, get) => ({
+    open: false,
+    assetName: '',
+    resolve: null,
+    request: (assetName) => {
+        get().resolve?.(null);
+        return new Promise((resolve) => {
+            set({ open: true, assetName, resolve });
+        });
+    },
+    respond: (choice) => {
+        get().resolve?.(choice);
+        set({ open: false, assetName: '', resolve: null });
+    },
+}));

package/dist/elementDrag.d.ts

@@ -0,0 +1,6 @@
+export declare const ELEMENT_DRAG_MIME = "application/x-elah-element";
+export type ElementKind = 'text';
+export interface DragElementPayload {
+    kind: 'element';
+    element: ElementKind;
+}

package/dist/elementDrag.js

@@ -0,0 +1 @@
+export const ELEMENT_DRAG_MIME = 'application/x-elah-element';

package/dist/engine-context.d.ts

@@ -0,0 +1 @@
+export declare const useTimeline: () => import("@elah/core").TimelineEngine;

package/dist/engine-context.js

@@ -0,0 +1,2 @@
+import { useTimelineEngine } from '@elah/core';
+export const useTimeline = useTimelineEngine;

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useTracks } from './useTracks';
+export { usePlayback } from './usePlayback';
+export { useSelection } from './useSelection';

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export { useTracks } from './useTracks';
+export { usePlayback } from './usePlayback';
+export { useSelection } from './useSelection';

package/dist/hooks/usePlayback.d.ts

@@ -0,0 +1,27 @@
+export declare const usePlayback: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions>, "setState" | "persist"> & {
+    setState(partial: (import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) | Partial<import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions> | ((state: import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) => (import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) | Partial<import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions>), replace?: false | undefined): unknown;
+    setState(state: (import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) | ((state: import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) => import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions, {
+            zoom: number;
+            volume: number;
+            muted: boolean;
+            playbackRate: number;
+            loop: boolean;
+            snapEnabled: boolean;
+        }, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) => void) => () => void;
+        onFinishHydration: (fn: (state: import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<import("@elah/core").PlaybackState & import("@elah/core").PlaybackActions, {
+            zoom: number;
+            volume: number;
+            muted: boolean;
+            playbackRate: number;
+            loop: boolean;
+            snapEnabled: boolean;
+        }, unknown>>;
+    };
+}>;

package/dist/hooks/usePlayback.js

@@ -0,0 +1,2 @@
+import { usePlaybackStore } from '@elah/core';
+export const usePlayback = usePlaybackStore;

package/dist/hooks/useSelection.d.ts

@@ -0,0 +1 @@
+export declare const useSelection: import("zustand").UseBoundStore<import("zustand").StoreApi<import("@elah/core").SelectionState & import("@elah/core").SelectionActions>>;

package/dist/hooks/useSelection.js

@@ -0,0 +1,2 @@
+import { useSelectionStore } from '@elah/core';
+export const useSelection = useSelectionStore;

package/dist/hooks/useTracks.d.ts

@@ -0,0 +1 @@
+export declare const useTracks: import("zustand").UseBoundStore<import("zustand").StoreApi<import("@elah/core").TracksState & import("@elah/core").TracksActions>>;

package/dist/hooks/useTracks.js

@@ -0,0 +1,2 @@
+import { useTracksStore } from '@elah/core';
+export const useTracks = useTracksStore;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Timeline } from './Timeline';
+export type { TimelineProps, TimelineRef } from './Timeline';
+export { useTimeline } from './engine-context';
+export { useTracks } from './hooks/useTracks';
+export { usePlayback } from './hooks/usePlayback';
+export { useSelection } from './hooks/useSelection';
+export { useTimelineDrop } from './useTimelineDrop';
+export { ELEMENT_DRAG_MIME } from './elementDrag';
+export type { DragElementPayload, ElementKind } from './elementDrag';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { Timeline } from './Timeline';
+export { useTimeline } from './engine-context';
+export { useTracks } from './hooks/useTracks';
+export { usePlayback } from './hooks/usePlayback';
+export { useSelection } from './hooks/useSelection';
+export { useTimelineDrop } from './useTimelineDrop';
+export { ELEMENT_DRAG_MIME } from './elementDrag';

package/dist/useTimelineDrop.d.ts

@@ -0,0 +1 @@
+export declare function useTimelineDrop(trackId: string, lane: HTMLElement | null): void;