entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/Timeline/useTimelineGestures.js

@@ -0,0 +1,587 @@
+"use client";
+import { useRef, useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { xToFrame, yToValue, snapFrame } from './timelineCoords.js';
+import { moveSelectedKeyframesGraph, moveSelectedKeyframes, setKeyframeTangent, valueAtPointer, addKeyframe, makeKeyframe, pasteKeyframes, copySelectedKeyframes, removeSelectedKeyframes } from './timelineEdits.js';
+import { hitTestTimeline, keyframesInRect } from './timelineHitTest.js';
+import { sameRef } from './timelineSelection.js';
+import { clamp } from '../../../utils/mathUtils.js';
+
+const CLICK_THRESHOLD_PX = 3;
+const KEYBOARD_LARGE_STEP = 10;
+function localPoint(e, container) {
+    if (!container)
+        return { x: 0, y: 0 };
+    const rect = container.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+}
+function nextSelection(selection, ref, additive) {
+    const exists = selection.some(r => sameRef(r, ref));
+    if (additive) {
+        return exists
+            ? selection.filter(r => !sameRef(r, ref))
+            : [...selection, ref];
+    }
+    return exists ? selection : [ref];
+}
+function mergeSelection(base, add) {
+    const result = [...base];
+    for (const ref of add) {
+        if (!result.some(r => sameRef(r, ref)))
+            result.push(ref);
+    }
+    return result;
+}
+/**
+ * Pointer / wheel / keyboard gesture machine for `<Timeline>`. The hook is
+ * called every render with a fresh `options` object (live props + the
+ * component's action callbacks, several of which change identity on every
+ * frame). They are read through a single `useLatest` ref so the returned
+ * handlers keep a **stable identity for the component's lifetime** — they are
+ * attached to the DOM (`onPointerDown=…`) and to a native `wheel` listener, so
+ * stability is what keeps listeners from re-attaching every render. Reads
+ * happen at event time, by which point the ref already holds the latest
+ * committed options. Drag state (cursor + marquee) is written to the store,
+ * not React state.
+ */
+function useTimelineGestures(options) {
+    // Single live snapshot of every option/action. `useLatest` keeps it synced
+    // to the most recently committed render, so handlers below never need the
+    // individual values in their dependency arrays.
+    const optsRef = useLatest(options);
+    const stateRef = useRef(null);
+    const clipboardRef = useRef(null);
+    const hitAt = useCallback((point) => {
+        const o = optsRef.current;
+        return hitTestTimeline({
+            point,
+            view: o.view,
+            size: o.size,
+            rows: o.rows,
+            scrollTop: o.scrollTop,
+            rulerHeight: o.rulerHeight,
+            loopStripHeight: o.loopStripHeight,
+            loopHandles: o.loopHandles,
+            frame: o.frame,
+            showPlayhead: o.showPlayhead,
+            loopRegion: o.loopRegion,
+            isSelected: (t, k) => o.selection.some(r => r.trackId === t && r.keyframeId === k),
+        });
+    }, [optsRef]);
+    const moveFromState = useCallback((state, point) => {
+        const o = optsRef.current;
+        const view = o.view;
+        const width = o.size.width;
+        const curFrame = xToFrame(point.x, view, width);
+        const delta = curFrame - (state.startFramePos ?? curFrame);
+        const origTracks = state.origTracks ?? o.tracks;
+        const sel = state.moveSelection ?? [];
+        if (state.graphMove) {
+            return moveSelectedKeyframesGraph(origTracks, sel, delta, point.y - state.startY, o.trackHeight, o.expandedHeight, o.snap, o.startFrame, o.endFrame);
+        }
+        return moveSelectedKeyframes(origTracks, sel, delta, o.snap, o.startFrame, o.endFrame);
+    }, [optsRef]);
+    const tangentOffset = useCallback((state, point) => {
+        const o = optsRef.current;
+        const ref = state.tangentRef;
+        if (!ref)
+            return null;
+        const geom = o.trackTops.get(ref.trackId);
+        if (!geom)
+            return null;
+        const tracks = state.origTracks ?? o.tracks;
+        const track = tracks.find(t => t.id === ref.trackId);
+        const kf = track?.keyframes.find(k => k.id === ref.keyframeId);
+        if (!track || !kf)
+            return null;
+        const screenTop = o.rulerHeight + o.loopStripHeight + geom.top - o.scrollTop;
+        const range = geom.range;
+        return {
+            x: xToFrame(point.x, o.view, o.size.width) - kf.x,
+            y: yToValue(point.y, range, screenTop, geom.height) - kf.y,
+        };
+    }, [optsRef]);
+    const onPointerDown = useCallback((e) => {
+        const o = optsRef.current;
+        const container = o.containerRef.current;
+        if (!container)
+            return;
+        const point = localPoint(e, container);
+        const view = o.view;
+        const width = o.size.width;
+        if (e.button === 1) {
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'pan',
+                startX: point.x,
+                startY: point.y,
+                startView: view,
+            };
+            o.store.setDrag({ kind: 'pan', marquee: null });
+            return;
+        }
+        if (e.button !== 0)
+            return;
+        const hit = hitAt(point);
+        if (hit.kind === 'loop-start' ||
+            hit.kind === 'loop-end' ||
+            hit.kind === 'loop-body') {
+            const region = o.loopRegion;
+            if (!region)
+                return;
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'loop',
+                startX: point.x,
+                startY: point.y,
+                loopWhich: hit.kind === 'loop-start'
+                    ? 'start'
+                    : hit.kind === 'loop-end'
+                        ? 'end'
+                        : 'body',
+                startLoop: region,
+            };
+            o.store.setDrag({ kind: 'scrub', marquee: null });
+            return;
+        }
+        // Alt+drag on the ruler creates / narrows the loop region — works
+        // even when looping is currently off (the drag flips `loop` to a
+        // sub-range object via `setLoop`). Gated on the ruler band so it still
+        // fires when the drag starts right on the playhead line.
+        if (e.altKey &&
+            point.y < o.rulerHeight &&
+            (hit.kind === 'ruler' || hit.kind === 'playhead')) {
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            const anchorFrame = xToFrame(point.x, view, width);
+            const anchor = clamp(anchorFrame, o.startFrame, o.endFrame);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'loop',
+                startX: point.x,
+                startY: point.y,
+                loopWhich: 'create',
+                startLoop: { startFrame: anchor, endFrame: anchor },
+            };
+            o.store.setDrag({ kind: 'scrub', marquee: null });
+            o.setLoop({ startFrame: anchor, endFrame: anchor });
+            return;
+        }
+        // Plain drag on the dedicated loop strip = loop create (no Alt needed).
+        if (hit.kind === 'loop-strip') {
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            const anchorFrame = xToFrame(point.x, view, width);
+            const anchor = clamp(anchorFrame, o.startFrame, o.endFrame);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'loop',
+                startX: point.x,
+                startY: point.y,
+                loopWhich: 'create',
+                startLoop: { startFrame: anchor, endFrame: anchor },
+            };
+            o.store.setDrag({ kind: 'scrub', marquee: null });
+            o.setLoop({ startFrame: anchor, endFrame: anchor });
+            return;
+        }
+        if (hit.kind === 'ruler' || hit.kind === 'playhead') {
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'scrub',
+                startX: point.x,
+                startY: point.y,
+            };
+            o.store.setDrag({ kind: 'scrub', marquee: null });
+            o.seekLive(xToFrame(point.x, view, width));
+            return;
+        }
+        if (hit.kind === 'tangent') {
+            e.preventDefault();
+            container.setPointerCapture(e.pointerId);
+            stateRef.current = {
+                pointerId: e.pointerId,
+                mode: 'tangent',
+                startX: point.x,
+                startY: point.y,
+                origTracks: o.tracks,
+                tangentRef: { trackId: hit.trackId, keyframeId: hit.keyframeId },
+                tangentWhich: hit.which,
+            };
+            o.store.setDrag({ kind: 'move', marquee: null });
+            return;
+        }
+        if (hit.kind === 'group') {
+            const groups = o.groups;
+            o.setGroups(groups.map(g => g.id === hit.groupId ? { ...g, collapsed: !g.collapsed } : g));
+            return;
+        }
+        if (hit.kind === 'keyframe') {
+            const additive = e.shiftKey || e.ctrlKey || e.metaKey;
+            const ref = { trackId: hit.trackId, keyframeId: hit.keyframeId };
+            const sel = nextSelection(o.selection, ref, additive);
+            o.setSelection(sel);
+            if (o.editable) {
+                e.preventDefault();
+                container.setPointerCapture(e.pointerId);
+                stateRef.current = {
+                    pointerId: e.pointerId,
+                    mode: 'move',
+                    startX: point.x,
+                    startY: point.y,
+                    origTracks: o.tracks,
+                    moveSelection: sel,
+                    graphMove: o.trackTops.get(hit.trackId)?.graph ?? false,
+                    startFramePos: xToFrame(point.x, view, width),
+                };
+                o.store.setDrag({ kind: 'move', marquee: null });
+            }
+            return;
+        }
+        // empty / outside → marquee box-select
+        const additive = e.shiftKey || e.ctrlKey || e.metaKey;
+        e.preventDefault();
+        container.setPointerCapture(e.pointerId);
+        stateRef.current = {
+            pointerId: e.pointerId,
+            mode: 'marquee',
+            startX: point.x,
+            startY: point.y,
+            additive,
+        };
+        o.store.setDrag({
+            kind: 'marquee',
+            marquee: { x: point.x, y: point.y, width: 0, height: 0 },
+        });
+    }, [optsRef, hitAt]);
+    const onPointerMove = useCallback((e) => {
+        const o = optsRef.current;
+        const container = o.containerRef.current;
+        if (!container)
+            return;
+        const point = localPoint(e, container);
+        const state = stateRef.current;
+        // Hover-tracking: only when no active drag (so the diamond / circle can
+        // grow under the cursor as a "grabbable" affordance; playhead glows
+        // when the cursor is over the line or its head).
+        if (!state) {
+            const hit = hitAt(point);
+            if (hit.kind === 'keyframe') {
+                o.store.setHover({
+                    trackId: hit.trackId,
+                    keyframeId: hit.keyframeId,
+                });
+            }
+            else {
+                o.store.setHover(null);
+            }
+            o.store.setHoverPlayhead(hit.kind === 'playhead');
+            o.store.setHoverLoop(hit.kind === 'loop-start'
+                ? 'start'
+                : hit.kind === 'loop-end'
+                    ? 'end'
+                    : hit.kind === 'loop-body'
+                        ? 'body'
+                        : null);
+        }
+        if (state?.pointerId !== e.pointerId)
+            return;
+        const view = o.view;
+        const width = o.size.width;
+        if (state.mode === 'loop') {
+            const frame = xToFrame(point.x, view, width);
+            const sl = state.startLoop;
+            if (sl && state.loopWhich === 'create') {
+                const cur = clamp(frame, o.startFrame, o.endFrame);
+                o.setLoop({
+                    startFrame: Math.min(sl.startFrame, cur),
+                    endFrame: Math.max(sl.startFrame, cur),
+                });
+            }
+            else if (sl && state.loopWhich === 'start') {
+                o.setLoop({
+                    startFrame: clamp(frame, o.startFrame, sl.endFrame),
+                    endFrame: sl.endFrame,
+                });
+            }
+            else if (sl && state.loopWhich === 'end') {
+                o.setLoop({
+                    startFrame: sl.startFrame,
+                    endFrame: clamp(frame, sl.startFrame, o.endFrame),
+                });
+            }
+            else if (sl) {
+                const span = sl.endFrame - sl.startFrame;
+                const delta = frame - xToFrame(state.startX, view, width);
+                const ns = clamp(sl.startFrame + delta, o.startFrame, o.endFrame - span);
+                o.setLoop({ startFrame: ns, endFrame: ns + span });
+            }
+            return;
+        }
+        if (state.mode === 'scrub') {
+            o.seekLive(xToFrame(point.x, view, width));
+            return;
+        }
+        if (state.mode === 'pan') {
+            const startView = state.startView ?? view;
+            const span = startView.endFrame - startView.startFrame;
+            const dxFrames = ((point.x - state.startX) / Math.max(1, width)) * span;
+            o.setView({
+                startFrame: startView.startFrame - dxFrames,
+                endFrame: startView.endFrame - dxFrames,
+            });
+            return;
+        }
+        if (state.mode === 'tangent') {
+            const offset = tangentOffset(state, point);
+            if (offset && state.tangentRef && state.tangentWhich) {
+                o.setTracks(setKeyframeTangent(state.origTracks ?? o.tracks, state.tangentRef, state.tangentWhich, offset));
+            }
+            return;
+        }
+        if (state.mode === 'move') {
+            o.setTracks(moveFromState(state, point));
+            return;
+        }
+        // Only 'marquee' remains after the early returns above.
+        o.store.setDrag({
+            kind: 'marquee',
+            marquee: {
+                x: Math.min(state.startX, point.x),
+                y: Math.min(state.startY, point.y),
+                width: Math.abs(point.x - state.startX),
+                height: Math.abs(point.y - state.startY),
+            },
+        });
+    }, [optsRef, hitAt, tangentOffset, moveFromState]);
+    const onPointerLeave = useCallback(() => {
+        const o = optsRef.current;
+        o.store.setHover(null);
+        o.store.setHoverPlayhead(false);
+        o.store.setHoverLoop(null);
+    }, [optsRef]);
+    const endGesture = useCallback((e, cancelled) => {
+        const o = optsRef.current;
+        const state = stateRef.current;
+        if (state?.pointerId !== e.pointerId)
+            return;
+        const container = o.containerRef.current;
+        if (container?.hasPointerCapture(e.pointerId)) {
+            container.releasePointerCapture(e.pointerId);
+        }
+        const point = localPoint(e, container);
+        const view = o.view;
+        const size = o.size;
+        if (!cancelled) {
+            if (state.mode === 'loop' && state.loopWhich === 'create') {
+                // Bare Alt-click (no drag) on the ruler: don't leave a zero-width
+                // loop hanging around — clear it.
+                if (Math.abs(point.x - state.startX) < CLICK_THRESHOLD_PX) {
+                    o.setLoop(false);
+                }
+            }
+            else if (state.mode === 'scrub') {
+                o.seekCommit(xToFrame(point.x, view, size.width));
+            }
+            else if (state.mode === 'move') {
+                o.commitTracks(moveFromState(state, point));
+            }
+            else if (state.mode === 'tangent') {
+                const offset = tangentOffset(state, point);
+                if (offset && state.tangentRef && state.tangentWhich) {
+                    o.commitTracks(setKeyframeTangent(state.origTracks ?? o.tracks, state.tangentRef, state.tangentWhich, offset));
+                }
+            }
+            else if (state.mode === 'marquee') {
+                const rect = {
+                    x: Math.min(state.startX, point.x),
+                    y: Math.min(state.startY, point.y),
+                    width: Math.abs(point.x - state.startX),
+                    height: Math.abs(point.y - state.startY),
+                };
+                if (rect.width < CLICK_THRESHOLD_PX &&
+                    rect.height < CLICK_THRESHOLD_PX) {
+                    if (!state.additive)
+                        o.setSelection([]);
+                }
+                else {
+                    const found = keyframesInRect({
+                        x: rect.x,
+                        y: rect.y - o.rulerHeight - o.loopStripHeight + o.scrollTop,
+                        width: rect.width,
+                        height: rect.height,
+                    }, view, size, o.rows);
+                    const base = state.additive ? o.selection : [];
+                    o.setSelection(mergeSelection(base, found));
+                }
+            }
+        }
+        o.store.setDrag({ kind: 'none', marquee: null });
+        stateRef.current = null;
+    }, [optsRef, moveFromState, tangentOffset]);
+    const onPointerUp = useCallback((e) => {
+        endGesture(e, false);
+    }, [endGesture]);
+    const onPointerCancel = useCallback((e) => {
+        endGesture(e, true);
+    }, [endGesture]);
+    const onDoubleClick = useCallback((e) => {
+        const o = optsRef.current;
+        if (!o.editable || !o.allowAddKeyframe)
+            return;
+        const container = o.containerRef.current;
+        if (!container)
+            return;
+        const point = localPoint(e, container);
+        const hit = hitAt(point);
+        if (hit.kind !== 'empty')
+            return;
+        const track = o.tracks.find(t => t.id === hit.trackId);
+        if (!track || track.locked)
+            return;
+        const view = o.view;
+        const width = o.size.width;
+        const frame = clamp(snapFrame(xToFrame(point.x, view, width), o.snap), o.startFrame, o.endFrame);
+        const value = valueAtPointer({
+            pointerY: point.y,
+            frame,
+            track,
+            geometry: o.trackTops.get(track.id),
+            rulerHeight: o.rulerHeight + o.loopStripHeight,
+            scrollTop: o.scrollTop,
+        });
+        const next = addKeyframe(o.tracks, track.id, makeKeyframe(frame, value));
+        o.setTracks(next);
+        o.commitTracks(next);
+    }, [optsRef, hitAt]);
+    const onWheel = useCallback((e) => {
+        const o = optsRef.current;
+        const container = o.containerRef.current;
+        if (!container)
+            return;
+        e.preventDefault();
+        const view = o.view;
+        const width = Math.max(1, o.size.width);
+        const span = view.endFrame - view.startFrame;
+        if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            const delta = e.shiftKey ? e.deltaY : e.deltaX;
+            const panFrames = (delta / width) * span;
+            o.setView({
+                startFrame: view.startFrame + panFrames,
+                endFrame: view.endFrame + panFrames,
+            });
+            return;
+        }
+        // Plain vertical wheel scrolls tracks when they overflow; Ctrl/Cmd zooms.
+        if (!e.ctrlKey && !e.metaKey && o.maxScrollTop > 0) {
+            o.scrollBy(e.deltaY);
+            return;
+        }
+        const rangeSpan = Math.max(1, o.endFrame - o.startFrame);
+        const maxSpan = o.maxFramesVisible ?? rangeSpan;
+        const factor = Math.exp(e.deltaY * 0.0015);
+        const newSpan = clamp(span * factor, o.minFramesVisible, maxSpan);
+        const point = localPoint(e, container);
+        const frac = point.x / width;
+        const cursorFrame = view.startFrame + frac * span;
+        const newStart = cursorFrame - frac * newSpan;
+        o.setView({
+            startFrame: newStart,
+            endFrame: newStart + newSpan,
+        });
+    }, [optsRef]);
+    const onKeyDown = useCallback((e) => {
+        const o = optsRef.current;
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                e.preventDefault();
+                const dir = e.key === 'ArrowLeft' ? -1 : 1;
+                const step = (e.shiftKey ? KEYBOARD_LARGE_STEP : 1) * dir;
+                o.seekCommit(o.frame + step);
+                return;
+            }
+            case 'Home':
+                e.preventDefault();
+                o.seekCommit(o.startFrame);
+                return;
+            case 'End':
+                e.preventDefault();
+                o.seekCommit(o.endFrame);
+                return;
+            case 'Delete':
+            case 'Backspace': {
+                if (!o.editable || !o.allowDeleteKeyframe)
+                    return;
+                const sel = o.selection;
+                if (sel.length === 0)
+                    return;
+                e.preventDefault();
+                const next = removeSelectedKeyframes(o.tracks, sel);
+                o.setTracks(next);
+                o.commitTracks(next);
+                o.setSelection([]);
+                return;
+            }
+            case 'c':
+            case 'C': {
+                if (!(e.ctrlKey || e.metaKey))
+                    return;
+                e.preventDefault();
+                clipboardRef.current = copySelectedKeyframes(o.tracks, o.selection);
+                return;
+            }
+            case 'v':
+            case 'V': {
+                if (!(e.ctrlKey || e.metaKey) || !o.editable)
+                    return;
+                const clip = clipboardRef.current;
+                if (!clip || clip.entries.length === 0)
+                    return;
+                e.preventDefault();
+                const pasted = pasteKeyframes(o.tracks, clip, o.frame);
+                o.setTracks(pasted.tracks);
+                o.commitTracks(pasted.tracks);
+                o.setSelection(pasted.refs);
+                return;
+            }
+            default:
+                return;
+        }
+    }, [optsRef]);
+    const handlers = useMemo(() => ({
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel,
+        onPointerLeave,
+        onDoubleClick,
+        onKeyDown,
+    }), [
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel,
+        onPointerLeave,
+        onDoubleClick,
+        onKeyDown,
+    ]);
+    return { handlers, onWheel };
+}
+
+export { useTimelineGestures };
+//# sourceMappingURL=useTimelineGestures.js.map

package/dist/esm/components/editor/Timeline/useTimelineGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelineGestures.js","sources":["src/components/editor/Timeline/useTimelineGestures.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport { clamp, snapFrame, xToFrame, yToValue } from './timelineCoords';\nimport {\n  addKeyframe,\n  copySelectedKeyframes,\n  makeKeyframe,\n  moveSelectedKeyframes,\n  moveSelectedKeyframesGraph,\n  pasteKeyframes,\n  removeSelectedKeyframes,\n  setKeyframeTangent,\n  valueAtPointer,\n} from './timelineEdits';\nimport { hitTestTimeline, keyframesInRect } from './timelineHitTest';\nimport { sameRef } from './timelineSelection';\n\nimport type {\n  TimelineGroup,\n  TimelineKeyframeRef,\n  TimelineLoop,\n  TimelineSelection,\n  TimelineTrack,\n  TimelineView,\n} from './Timeline.types';\nimport type { TimelineClipboard } from './timelineEdits';\nimport type { TimelineRow, TrackGeometry } from './timelineLayout';\nimport type { TimelineStore } from './TimelineStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type { ViewportSize } from '@/components/primitives/viewport';\nimport type React from 'react';\n\nconst CLICK_THRESHOLD_PX = 3;\nconst KEYBOARD_LARGE_STEP = 10;\n\nexport interface TimelineGestureActions {\n  /** Scrub live (snaps/clamps, fires onFrameChange). */\n  seekLive: (frame: number) => void;\n  /** Scrub commit (snaps/clamps, fires onFrameChange + onFrameChangeComplete). */\n  seekCommit: (frame: number) => void;\n  setSelection: (selection: TimelineSelection) => void;\n  /** Live track update (onTracksChange). */\n  setTracks: (tracks: TimelineTrack[]) => void;\n  /** Commit (onTracksChangeComplete). */\n  commitTracks: (tracks: TimelineTrack[]) => void;\n  setView: (view: TimelineView) => void;\n  setLoop: (loop: TimelineLoop) => void;\n  scrollBy: (deltaPixels: number) => void;\n  setGroups: (groups: TimelineGroup[]) => void;\n}\n\nexport interface UseTimelineGesturesOptions extends TimelineGestureActions {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  store: TimelineStore;\n  view: TimelineView;\n  size: ViewportSize;\n  tracks: ReadonlyArray<TimelineTrack>;\n  selection: TimelineSelection;\n  frame: number;\n  startFrame: number;\n  endFrame: number;\n  trackHeight: number;\n  scrollTop: number;\n  rulerHeight: number;\n  loopStripHeight: number;\n  loopHandles: 'edges' | 'brackets';\n  snap: boolean | number;\n  editable: boolean;\n  allowAddKeyframe: boolean;\n  allowDeleteKeyframe: boolean;\n  showPlayhead: boolean;\n  rows: ReadonlyArray<TimelineRow>;\n  trackTops: ReadonlyMap<string, TrackGeometry>;\n  expandedHeight: number;\n  groups: ReadonlyArray<TimelineGroup>;\n  minFramesVisible: number;\n  maxFramesVisible: number | undefined;\n  loopRegion: { startFrame: number; endFrame: number } | null;\n  maxScrollTop: number;\n}\n\ninterface PointerState {\n  pointerId: number;\n  mode: 'scrub' | 'move' | 'marquee' | 'pan' | 'tangent' | 'loop';\n  startX: number;\n  startY: number;\n  origTracks?: ReadonlyArray<TimelineTrack>;\n  moveSelection?: TimelineSelection;\n  graphMove?: boolean;\n  startFramePos?: number;\n  startView?: TimelineView;\n  additive?: boolean;\n  tangentRef?: TimelineKeyframeRef;\n  tangentWhich?: 'in' | 'out';\n  loopWhich?: 'start' | 'end' | 'body' | 'create';\n  startLoop?: { startFrame: number; endFrame: number };\n}\n\nexport interface UseTimelineGesturesReturn {\n  handlers: {\n    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerCancel: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerLeave: () => void;\n    onDoubleClick: (e: React.MouseEvent<HTMLDivElement>) => void;\n    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n  };\n  /** Attach via a native non-passive listener so `preventDefault` works. */\n  onWheel: (e: WheelEvent) => void;\n}\n\nfunction localPoint(\n  e: { clientX: number; clientY: number },\n  container: HTMLDivElement | null\n): Point2D {\n  if (!container) return { x: 0, y: 0 };\n  const rect = container.getBoundingClientRect();\n  return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n}\n\nfunction nextSelection(\n  selection: TimelineSelection,\n  ref: TimelineKeyframeRef,\n  additive: boolean\n): TimelineSelection {\n  const exists = selection.some(r => sameRef(r, ref));\n  if (additive) {\n    return exists\n      ? selection.filter(r => !sameRef(r, ref))\n      : [...selection, ref];\n  }\n  return exists ? selection : [ref];\n}\n\nfunction mergeSelection(\n  base: TimelineSelection,\n  add: ReadonlyArray<TimelineKeyframeRef>\n): TimelineSelection {\n  const result = [...base];\n  for (const ref of add) {\n    if (!result.some(r => sameRef(r, ref))) result.push(ref);\n  }\n  return result;\n}\n\n/**\n * Pointer / wheel / keyboard gesture machine for `<Timeline>`. The hook is\n * called every render with a fresh `options` object (live props + the\n * component's action callbacks, several of which change identity on every\n * frame). They are read through a single `useLatest` ref so the returned\n * handlers keep a **stable identity for the component's lifetime** — they are\n * attached to the DOM (`onPointerDown=…`) and to a native `wheel` listener, so\n * stability is what keeps listeners from re-attaching every render. Reads\n * happen at event time, by which point the ref already holds the latest\n * committed options. Drag state (cursor + marquee) is written to the store,\n * not React state.\n */\nexport function useTimelineGestures(\n  options: UseTimelineGesturesOptions\n): UseTimelineGesturesReturn {\n  // Single live snapshot of every option/action. `useLatest` keeps it synced\n  // to the most recently committed render, so handlers below never need the\n  // individual values in their dependency arrays.\n  const optsRef = useLatest(options);\n\n  const stateRef = useRef<PointerState | null>(null);\n  const clipboardRef = useRef<TimelineClipboard | null>(null);\n\n  const hitAt = useCallback(\n    (point: Point2D) => {\n      const o = optsRef.current;\n      return hitTestTimeline({\n        point,\n        view: o.view,\n        size: o.size,\n        rows: o.rows,\n        scrollTop: o.scrollTop,\n        rulerHeight: o.rulerHeight,\n        loopStripHeight: o.loopStripHeight,\n        loopHandles: o.loopHandles,\n        frame: o.frame,\n        showPlayhead: o.showPlayhead,\n        loopRegion: o.loopRegion,\n        isSelected: (t, k) =>\n          o.selection.some(r => r.trackId === t && r.keyframeId === k),\n      });\n    },\n    [optsRef]\n  );\n\n  const moveFromState = useCallback(\n    (state: PointerState, point: Point2D): TimelineTrack[] => {\n      const o = optsRef.current;\n      const view = o.view;\n      const width = o.size.width;\n      const curFrame = xToFrame(point.x, view, width);\n      const delta = curFrame - (state.startFramePos ?? curFrame);\n      const origTracks = state.origTracks ?? o.tracks;\n      const sel = state.moveSelection ?? [];\n      if (state.graphMove) {\n        return moveSelectedKeyframesGraph(\n          origTracks,\n          sel,\n          delta,\n          point.y - state.startY,\n          o.trackHeight,\n          o.expandedHeight,\n          o.snap,\n          o.startFrame,\n          o.endFrame\n        );\n      }\n      return moveSelectedKeyframes(\n        origTracks,\n        sel,\n        delta,\n        o.snap,\n        o.startFrame,\n        o.endFrame\n      );\n    },\n    [optsRef]\n  );\n\n  const tangentOffset = useCallback(\n    (state: PointerState, point: Point2D): { x: number; y: number } | null => {\n      const o = optsRef.current;\n      const ref = state.tangentRef;\n      if (!ref) return null;\n      const geom = o.trackTops.get(ref.trackId);\n      if (!geom) return null;\n      const tracks = state.origTracks ?? o.tracks;\n      const track = tracks.find(t => t.id === ref.trackId);\n      const kf = track?.keyframes.find(k => k.id === ref.keyframeId);\n      if (!track || !kf) return null;\n      const screenTop =\n        o.rulerHeight + o.loopStripHeight + geom.top - o.scrollTop;\n      const range = geom.range;\n      return {\n        x: xToFrame(point.x, o.view, o.size.width) - kf.x,\n        y: yToValue(point.y, range, screenTop, geom.height) - kf.y,\n      };\n    },\n    [optsRef]\n  );\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      const o = optsRef.current;\n      const container = o.containerRef.current;\n      if (!container) return;\n      const point = localPoint(e, container);\n      const view = o.view;\n      const width = o.size.width;\n\n      if (e.button === 1) {\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'pan',\n          startX: point.x,\n          startY: point.y,\n          startView: view,\n        };\n        o.store.setDrag({ kind: 'pan', marquee: null });\n        return;\n      }\n      if (e.button !== 0) return;\n\n      const hit = hitAt(point);\n\n      if (\n        hit.kind === 'loop-start' ||\n        hit.kind === 'loop-end' ||\n        hit.kind === 'loop-body'\n      ) {\n        const region = o.loopRegion;\n        if (!region) return;\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'loop',\n          startX: point.x,\n          startY: point.y,\n          loopWhich:\n            hit.kind === 'loop-start'\n              ? 'start'\n              : hit.kind === 'loop-end'\n                ? 'end'\n                : 'body',\n          startLoop: region,\n        };\n        o.store.setDrag({ kind: 'scrub', marquee: null });\n        return;\n      }\n\n      // Alt+drag on the ruler creates / narrows the loop region — works\n      // even when looping is currently off (the drag flips `loop` to a\n      // sub-range object via `setLoop`). Gated on the ruler band so it still\n      // fires when the drag starts right on the playhead line.\n      if (\n        e.altKey &&\n        point.y < o.rulerHeight &&\n        (hit.kind === 'ruler' || hit.kind === 'playhead')\n      ) {\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        const anchorFrame = xToFrame(point.x, view, width);\n        const anchor = clamp(anchorFrame, o.startFrame, o.endFrame);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'loop',\n          startX: point.x,\n          startY: point.y,\n          loopWhich: 'create',\n          startLoop: { startFrame: anchor, endFrame: anchor },\n        };\n        o.store.setDrag({ kind: 'scrub', marquee: null });\n        o.setLoop({ startFrame: anchor, endFrame: anchor });\n        return;\n      }\n\n      // Plain drag on the dedicated loop strip = loop create (no Alt needed).\n      if (hit.kind === 'loop-strip') {\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        const anchorFrame = xToFrame(point.x, view, width);\n        const anchor = clamp(anchorFrame, o.startFrame, o.endFrame);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'loop',\n          startX: point.x,\n          startY: point.y,\n          loopWhich: 'create',\n          startLoop: { startFrame: anchor, endFrame: anchor },\n        };\n        o.store.setDrag({ kind: 'scrub', marquee: null });\n        o.setLoop({ startFrame: anchor, endFrame: anchor });\n        return;\n      }\n\n      if (hit.kind === 'ruler' || hit.kind === 'playhead') {\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'scrub',\n          startX: point.x,\n          startY: point.y,\n        };\n        o.store.setDrag({ kind: 'scrub', marquee: null });\n        o.seekLive(xToFrame(point.x, view, width));\n        return;\n      }\n\n      if (hit.kind === 'tangent') {\n        e.preventDefault();\n        container.setPointerCapture(e.pointerId);\n        stateRef.current = {\n          pointerId: e.pointerId,\n          mode: 'tangent',\n          startX: point.x,\n          startY: point.y,\n          origTracks: o.tracks,\n          tangentRef: { trackId: hit.trackId, keyframeId: hit.keyframeId },\n          tangentWhich: hit.which,\n        };\n        o.store.setDrag({ kind: 'move', marquee: null });\n        return;\n      }\n\n      if (hit.kind === 'group') {\n        const groups = o.groups;\n        o.setGroups(\n          groups.map(g =>\n            g.id === hit.groupId ? { ...g, collapsed: !g.collapsed } : g\n          )\n        );\n        return;\n      }\n\n      if (hit.kind === 'keyframe') {\n        const additive = e.shiftKey || e.ctrlKey || e.metaKey;\n        const ref = { trackId: hit.trackId, keyframeId: hit.keyframeId };\n        const sel = nextSelection(o.selection, ref, additive);\n        o.setSelection(sel);\n        if (o.editable) {\n          e.preventDefault();\n          container.setPointerCapture(e.pointerId);\n          stateRef.current = {\n            pointerId: e.pointerId,\n            mode: 'move',\n            startX: point.x,\n            startY: point.y,\n            origTracks: o.tracks,\n            moveSelection: sel,\n            graphMove: o.trackTops.get(hit.trackId)?.graph ?? false,\n            startFramePos: xToFrame(point.x, view, width),\n          };\n          o.store.setDrag({ kind: 'move', marquee: null });\n        }\n        return;\n      }\n\n      // empty / outside → marquee box-select\n      const additive = e.shiftKey || e.ctrlKey || e.metaKey;\n      e.preventDefault();\n      container.setPointerCapture(e.pointerId);\n      stateRef.current = {\n        pointerId: e.pointerId,\n        mode: 'marquee',\n        startX: point.x,\n        startY: point.y,\n        additive,\n      };\n      o.store.setDrag({\n        kind: 'marquee',\n        marquee: { x: point.x, y: point.y, width: 0, height: 0 },\n      });\n    },\n    [optsRef, hitAt]\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      const o = optsRef.current;\n      const container = o.containerRef.current;\n      if (!container) return;\n      const point = localPoint(e, container);\n      const state = stateRef.current;\n\n      // Hover-tracking: only when no active drag (so the diamond / circle can\n      // grow under the cursor as a \"grabbable\" affordance; playhead glows\n      // when the cursor is over the line or its head).\n      if (!state) {\n        const hit = hitAt(point);\n        if (hit.kind === 'keyframe') {\n          o.store.setHover({\n            trackId: hit.trackId,\n            keyframeId: hit.keyframeId,\n          });\n        } else {\n          o.store.setHover(null);\n        }\n        o.store.setHoverPlayhead(hit.kind === 'playhead');\n        o.store.setHoverLoop(\n          hit.kind === 'loop-start'\n            ? 'start'\n            : hit.kind === 'loop-end'\n              ? 'end'\n              : hit.kind === 'loop-body'\n                ? 'body'\n                : null\n        );\n      }\n\n      if (state?.pointerId !== e.pointerId) return;\n      const view = o.view;\n      const width = o.size.width;\n\n      if (state.mode === 'loop') {\n        const frame = xToFrame(point.x, view, width);\n        const sl = state.startLoop;\n        if (sl && state.loopWhich === 'create') {\n          const cur = clamp(frame, o.startFrame, o.endFrame);\n          o.setLoop({\n            startFrame: Math.min(sl.startFrame, cur),\n            endFrame: Math.max(sl.startFrame, cur),\n          });\n        } else if (sl && state.loopWhich === 'start') {\n          o.setLoop({\n            startFrame: clamp(frame, o.startFrame, sl.endFrame),\n            endFrame: sl.endFrame,\n          });\n        } else if (sl && state.loopWhich === 'end') {\n          o.setLoop({\n            startFrame: sl.startFrame,\n            endFrame: clamp(frame, sl.startFrame, o.endFrame),\n          });\n        } else if (sl) {\n          const span = sl.endFrame - sl.startFrame;\n          const delta = frame - xToFrame(state.startX, view, width);\n          const ns = clamp(\n            sl.startFrame + delta,\n            o.startFrame,\n            o.endFrame - span\n          );\n          o.setLoop({ startFrame: ns, endFrame: ns + span });\n        }\n        return;\n      }\n      if (state.mode === 'scrub') {\n        o.seekLive(xToFrame(point.x, view, width));\n        return;\n      }\n      if (state.mode === 'pan') {\n        const startView = state.startView ?? view;\n        const span = startView.endFrame - startView.startFrame;\n        const dxFrames = ((point.x - state.startX) / Math.max(1, width)) * span;\n        o.setView({\n          startFrame: startView.startFrame - dxFrames,\n          endFrame: startView.endFrame - dxFrames,\n        });\n        return;\n      }\n      if (state.mode === 'tangent') {\n        const offset = tangentOffset(state, point);\n        if (offset && state.tangentRef && state.tangentWhich) {\n          o.setTracks(\n            setKeyframeTangent(\n              state.origTracks ?? o.tracks,\n              state.tangentRef,\n              state.tangentWhich,\n              offset\n            )\n          );\n        }\n        return;\n      }\n      if (state.mode === 'move') {\n        o.setTracks(moveFromState(state, point));\n        return;\n      }\n      // Only 'marquee' remains after the early returns above.\n      o.store.setDrag({\n        kind: 'marquee',\n        marquee: {\n          x: Math.min(state.startX, point.x),\n          y: Math.min(state.startY, point.y),\n          width: Math.abs(point.x - state.startX),\n          height: Math.abs(point.y - state.startY),\n        },\n      });\n    },\n    [optsRef, hitAt, tangentOffset, moveFromState]\n  );\n\n  const onPointerLeave = useCallback((): void => {\n    const o = optsRef.current;\n    o.store.setHover(null);\n    o.store.setHoverPlayhead(false);\n    o.store.setHoverLoop(null);\n  }, [optsRef]);\n\n  const endGesture = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>, cancelled: boolean): void => {\n      const o = optsRef.current;\n      const state = stateRef.current;\n      if (state?.pointerId !== e.pointerId) return;\n      const container = o.containerRef.current;\n      if (container?.hasPointerCapture(e.pointerId)) {\n        container.releasePointerCapture(e.pointerId);\n      }\n      const point = localPoint(e, container);\n      const view = o.view;\n      const size = o.size;\n\n      if (!cancelled) {\n        if (state.mode === 'loop' && state.loopWhich === 'create') {\n          // Bare Alt-click (no drag) on the ruler: don't leave a zero-width\n          // loop hanging around — clear it.\n          if (Math.abs(point.x - state.startX) < CLICK_THRESHOLD_PX) {\n            o.setLoop(false);\n          }\n        } else if (state.mode === 'scrub') {\n          o.seekCommit(xToFrame(point.x, view, size.width));\n        } else if (state.mode === 'move') {\n          o.commitTracks(moveFromState(state, point));\n        } else if (state.mode === 'tangent') {\n          const offset = tangentOffset(state, point);\n          if (offset && state.tangentRef && state.tangentWhich) {\n            o.commitTracks(\n              setKeyframeTangent(\n                state.origTracks ?? o.tracks,\n                state.tangentRef,\n                state.tangentWhich,\n                offset\n              )\n            );\n          }\n        } else if (state.mode === 'marquee') {\n          const rect = {\n            x: Math.min(state.startX, point.x),\n            y: Math.min(state.startY, point.y),\n            width: Math.abs(point.x - state.startX),\n            height: Math.abs(point.y - state.startY),\n          };\n          if (\n            rect.width < CLICK_THRESHOLD_PX &&\n            rect.height < CLICK_THRESHOLD_PX\n          ) {\n            if (!state.additive) o.setSelection([]);\n          } else {\n            const found = keyframesInRect(\n              {\n                x: rect.x,\n                y: rect.y - o.rulerHeight - o.loopStripHeight + o.scrollTop,\n                width: rect.width,\n                height: rect.height,\n              },\n              view,\n              size,\n              o.rows\n            );\n            const base = state.additive ? o.selection : [];\n            o.setSelection(mergeSelection(base, found));\n          }\n        }\n      }\n\n      o.store.setDrag({ kind: 'none', marquee: null });\n      stateRef.current = null;\n    },\n    [optsRef, moveFromState, tangentOffset]\n  );\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      endGesture(e, false);\n    },\n    [endGesture]\n  );\n  const onPointerCancel = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      endGesture(e, true);\n    },\n    [endGesture]\n  );\n\n  const onDoubleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>): void => {\n      const o = optsRef.current;\n      if (!o.editable || !o.allowAddKeyframe) return;\n      const container = o.containerRef.current;\n      if (!container) return;\n      const point = localPoint(e, container);\n      const hit = hitAt(point);\n      if (hit.kind !== 'empty') return;\n      const track = o.tracks.find(t => t.id === hit.trackId);\n      if (!track || track.locked) return;\n      const view = o.view;\n      const width = o.size.width;\n      const frame = clamp(\n        snapFrame(xToFrame(point.x, view, width), o.snap),\n        o.startFrame,\n        o.endFrame\n      );\n      const value = valueAtPointer({\n        pointerY: point.y,\n        frame,\n        track,\n        geometry: o.trackTops.get(track.id),\n        rulerHeight: o.rulerHeight + o.loopStripHeight,\n        scrollTop: o.scrollTop,\n      });\n      const next = addKeyframe(o.tracks, track.id, makeKeyframe(frame, value));\n      o.setTracks(next);\n      o.commitTracks(next);\n    },\n    [optsRef, hitAt]\n  );\n\n  const onWheel = useCallback(\n    (e: WheelEvent): void => {\n      const o = optsRef.current;\n      const container = o.containerRef.current;\n      if (!container) return;\n      e.preventDefault();\n      const view = o.view;\n      const width = Math.max(1, o.size.width);\n      const span = view.endFrame - view.startFrame;\n\n      if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {\n        const delta = e.shiftKey ? e.deltaY : e.deltaX;\n        const panFrames = (delta / width) * span;\n        o.setView({\n          startFrame: view.startFrame + panFrames,\n          endFrame: view.endFrame + panFrames,\n        });\n        return;\n      }\n\n      // Plain vertical wheel scrolls tracks when they overflow; Ctrl/Cmd zooms.\n      if (!e.ctrlKey && !e.metaKey && o.maxScrollTop > 0) {\n        o.scrollBy(e.deltaY);\n        return;\n      }\n\n      const rangeSpan = Math.max(1, o.endFrame - o.startFrame);\n      const maxSpan = o.maxFramesVisible ?? rangeSpan;\n      const factor = Math.exp(e.deltaY * 0.0015);\n      const newSpan = clamp(span * factor, o.minFramesVisible, maxSpan);\n      const point = localPoint(e, container);\n      const frac = point.x / width;\n      const cursorFrame = view.startFrame + frac * span;\n      const newStart = cursorFrame - frac * newSpan;\n      o.setView({\n        startFrame: newStart,\n        endFrame: newStart + newSpan,\n      });\n    },\n    [optsRef]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>): void => {\n      const o = optsRef.current;\n      switch (e.key) {\n        case 'ArrowLeft':\n        case 'ArrowRight': {\n          e.preventDefault();\n          const dir = e.key === 'ArrowLeft' ? -1 : 1;\n          const step = (e.shiftKey ? KEYBOARD_LARGE_STEP : 1) * dir;\n          o.seekCommit(o.frame + step);\n          return;\n        }\n        case 'Home':\n          e.preventDefault();\n          o.seekCommit(o.startFrame);\n          return;\n        case 'End':\n          e.preventDefault();\n          o.seekCommit(o.endFrame);\n          return;\n        case 'Delete':\n        case 'Backspace': {\n          if (!o.editable || !o.allowDeleteKeyframe) return;\n          const sel = o.selection;\n          if (sel.length === 0) return;\n          e.preventDefault();\n          const next = removeSelectedKeyframes(o.tracks, sel);\n          o.setTracks(next);\n          o.commitTracks(next);\n          o.setSelection([]);\n          return;\n        }\n        case 'c':\n        case 'C': {\n          if (!(e.ctrlKey || e.metaKey)) return;\n          e.preventDefault();\n          clipboardRef.current = copySelectedKeyframes(o.tracks, o.selection);\n          return;\n        }\n        case 'v':\n        case 'V': {\n          if (!(e.ctrlKey || e.metaKey) || !o.editable) return;\n          const clip = clipboardRef.current;\n          if (!clip || clip.entries.length === 0) return;\n          e.preventDefault();\n          const pasted = pasteKeyframes(o.tracks, clip, o.frame);\n          o.setTracks(pasted.tracks);\n          o.commitTracks(pasted.tracks);\n          o.setSelection(pasted.refs);\n          return;\n        }\n        default:\n          return;\n      }\n    },\n    [optsRef]\n  );\n\n  const handlers = useMemo(\n    () => ({\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n      onPointerLeave,\n      onDoubleClick,\n      onKeyDown,\n    }),\n    [\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n      onPointerLeave,\n      onDoubleClick,\n      onKeyDown,\n    ]\n  );\n\n  return { handlers, onWheel };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoCA;AACA;AA+EA;AAIE;;AACA;;AAEF;AAEA;AAKE;;AAEE;AACE;AACA;;;AAGN;AAEA;AAIE;AACA;AACE;AAAwC;;AAE1C;AACF;AAEA;;;;;;;;;;;AAWG;AACG;;;;AAMJ;AAEA;AACA;AAEA;AAEI;AACA;;;;;;;;;;;;AAYE;AAED;AACH;;AAME;AACA;AACA;AACA;;;AAGA;AACA;AACE;;;AAoBJ;;AAME;AACA;AACA;AAAU;AACV;AACA;AAAW;;AAEX;;AAEA;AAAmB;AACnB;AAEA;;;AAGE;;AAEJ;AAIF;AAEI;AACA;AACA;;;AAEA;AACA;AAEA;;AAEE;;;AAGE;;;AAGA;;AAEF;;;AAGF;;AAEA;AAEA;;AAGE;AAEA;AACA;;;AAEA;;;AAGE;;;AAGA;AAEI;AACA;AACE;AACA;AACN;;AAEF;;;;;;;;AAUA;AACA;;AAGA;AACA;AACA;;;AAGE;;;AAGA;;;AAGF;AACA;;;;AAKF;;AAEE;AACA;AACA;;;AAGE;;;AAGA;;;AAGF;AACA;;;AAIF;;AAEE;;;AAGE;;;;AAIF;AACA;;;AAIF;;AAEE;;;AAGE;;;;AAIA;;;AAGF;;;AAIF;AACE;AACA;;;AAQF;AACE;AACA;AACA;AACA;AACA;;AAEE;;;AAGE;;;;AAIA;AACA;;;AAGF;;;;;AAMJ;;AAEA;;;AAGE;;;;;AAKF;AACE;;AAED;AACH;AAIF;AAEI;AACA;AACA;;;AAEA;;;;;AAME;AACA;AACE;;;AAGC;;;AAED;;;;AAKE;AACA;AACE;AACA;AACE;;;AAKV;;AACA;AACA;AAEA;AACE;AACA;;AAEE;;;;AAIC;;;;AAGC;;AAED;;;;;AAIC;AACD;;;;AAGD;;AAMA;;;;AAIJ;AACE;;;AAGF;AACE;;;;AAIE;AACA;AACD;;;AAGH;;;;;;;AAcA;;;;;AAKA;AACE;AACA;AACE;AACA;AACA;AACA;AACD;AACF;;AAKL;AACE;AACA;AACA;AACA;AACF;;AAII;AACA;AACA;;AACA;;AAEE;;;AAGF;AACA;;AAGE;;;AAGE;AACE;;;AAEG;AACL;;AACK;;;AAEA;;;;;;AAYA;AACL;AACE;AACA;AACA;AACA;;AAEF;AAEE;;AAEqB;;;;;AAKjB;;;;AAQJ;;;;;AAMN;AACA;;AAKJ;AAEI;AACF;AAGF;AAEI;AACF;AAIF;AAEI;;;AAEA;AACA;;;AAEA;AACA;;;AAEA;;AACA;AACA;AACA;;;;;;AAUE;;AAED;AACD;AACA;AACA;AACF;AAIF;AAEI;AACA;AACA;;;AAEA;AACA;;;AAIE;;;AAGE;AACA;AACD;;;;AAKH;AACE;;;AAIF;AACA;AACA;AACA;;AAEA;;AAEA;;AAEE;;AAED;AACH;AAIF;AAEI;AACA;AACE;;;AAGE;AACA;;;;AAIF;;AAEE;;AAEF;;AAEE;;AAEF;;;;AAGE;AACA;;;;AAGA;AACA;AACA;;;AAGF;;;;;AAIE;;;AAGF;;AAEE;;AACA;;;;AAGA;AACA;AACA;AACA;;;AAGF;;;AAGJ;AAIF;;;;;;;;AASG;;;;;;;;AASA;AAGH;AACF;;"}