entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,450 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useState, useMemo, useCallback, useSyncExternalStore, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cx } from '../../../utils/cx.js';
+import { timelineMainRowStyle, timelineBodyStyle, timelineCanvasStyle, timelineOverlayLayerStyle, ariaLiveRegionStyle, timelineShellStyle, timelineToolbarStyle, timelineFooterStyle } from './Timeline.css.js';
+import { TIMELINE_SLOT } from './Timeline.types.js';
+import { TimelineStoreContext } from './TimelineContext.js';
+import { resolveLoop, snapFrame, nextFollowView } from './timelineCoords.js';
+import { computeRows } from './timelineLayout.js';
+import { TimelineStore } from './TimelineStore.js';
+import { TimelineTrackHeaders } from './TimelineTrackHeaders.js';
+import { useTimelineDraw } from './useTimelineDraw.js';
+import { useTimelineGestures } from './useTimelineGestures.js';
+import { useTimelinePlayback } from './useTimelinePlayback.js';
+import { clamp } from '../../../utils/mathUtils.js';
+
+const RULER_HEIGHT = 22;
+const LOOP_STRIP_HEIGHT = 12;
+function getSlotKind(el) {
+    const marker = el.type[TIMELINE_SLOT];
+    return marker ?? null;
+}
+function categorizeChildren(children) {
+    const slots = {
+        toolbar: null,
+        footer: null,
+        minimap: null,
+        trackScale: null,
+        overlay: [],
+    };
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child)) {
+            if (child !== null && child !== undefined && child !== false) {
+                slots.overlay.push(child);
+            }
+            return;
+        }
+        const kind = getSlotKind(child);
+        const props = child.props;
+        if (kind === 'track-scale') {
+            slots.trackScale = child.props;
+            return;
+        }
+        if (kind === 'toolbar') {
+            slots.toolbar = (jsx("div", { className: cx(timelineToolbarStyle, props.className), style: props.style, children: props.children }));
+        }
+        else if (kind === 'footer') {
+            slots.footer = (jsx("div", { className: cx(timelineFooterStyle, props.className), style: props.style, children: props.children }));
+        }
+        else if (kind === 'minimap') {
+            slots.minimap = child;
+        }
+        else {
+            slots.overlay.push(child);
+        }
+    });
+    return slots;
+}
+/**
+ * Horizontal multi-track animation timeline / dope sheet. Tracks hold
+ * keyframes (the shared `CurveKeyframe` model) along a frame-based time axis;
+ * a playhead scrubs across all tracks. Canvas-rendered keyframes with DOM
+ * chrome, store-driven via `useSyncExternalStore`.
+ *
+ * Children read live state via `useTimelineContext()` / `useTimelineGeometry()`
+ * / `useTimelinePlayhead()` / `useTimelineSelection()`.
+ */
+const Timeline = (props) => {
+    const { tracks, onTracksChange, onTracksChangeComplete, startFrame = 0, endFrame, fps = 30, frame, defaultFrame, onFrameChange, onFrameChangeComplete, view, defaultView, onViewChange, minFramesVisible = 1, maxFramesVisible, selection, defaultSelection, onSelectionChange, editable = true, allowAddKeyframe = true, allowDeleteKeyframe = true, snap = true, mode, defaultMode, onModeChange, playing, defaultPlaying, onPlayingChange, loop, defaultLoop, onLoopChange, followMode = 'smooth', loopStrip = false, loopHandles = 'edges', groups, onGroupsChange, trackHeight = 28, expandedTrackHeight = 96, groupHeaderHeight = 22, showRuler = true, showPlayhead = true, trackHeaderWidth = 160, responsive = true, height, playheadColor, backgroundColor, trackScale: trackScaleProp, renderOverlay, renderTrackHeader, formatTime, ariaLabel = 'Timeline', className, style, testId, id, children, ref, } = props;
+    const bodyRef = useRef(null);
+    const canvasRef = useRef(null);
+    const headerColumnRef = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const [scrollTop, setScrollTop] = useState(0);
+    const fullView = useMemo(() => ({ startFrame, endFrame }), [startFrame, endFrame]);
+    // ── Controlled / uncontrolled state ──
+    const [frameState, setFrame] = useControlledState({
+        value: frame,
+        defaultValue: defaultFrame,
+        onChange: onFrameChange,
+        fallback: startFrame,
+    });
+    const [viewState, setView] = useControlledState({
+        value: view,
+        defaultValue: defaultView,
+        onChange: onViewChange,
+        fallback: fullView,
+    });
+    const [selectionState, setSelection] = useControlledState({
+        value: selection,
+        defaultValue: defaultSelection,
+        onChange: onSelectionChange,
+        fallback: [],
+    });
+    const [modeState] = useControlledState({
+        value: mode,
+        defaultValue: defaultMode,
+        onChange: onModeChange,
+        fallback: 'dope-sheet',
+    });
+    const [playingState, setPlaying] = useControlledState({
+        value: playing,
+        defaultValue: defaultPlaying,
+        onChange: onPlayingChange,
+        fallback: false,
+    });
+    const [loopState, setLoop] = useControlledState({
+        value: loop,
+        defaultValue: defaultLoop,
+        onChange: onLoopChange,
+        fallback: false,
+    });
+    const loopRegion = useMemo(() => resolveLoop(loopState, startFrame, endFrame), [loopState, startFrame, endFrame]);
+    // ── Groups (controlled or uncontrolled) ──
+    const [internalGroups, setInternalGroups] = useState(groups ?? []);
+    const groupsState = groups ?? internalGroups;
+    const setGroups = useCallback((next) => {
+        if (groups === undefined)
+            setInternalGroups(next);
+        onGroupsChange?.(next);
+    }, [groups, onGroupsChange]);
+    // ── Row layout (variable heights: expanded lanes + group headers) ──
+    const layout = useMemo(() => computeRows(tracks, {
+        trackHeight,
+        expandedHeight: expandedTrackHeight,
+        groupHeaderHeight,
+        globalGraph: modeState === 'graph',
+        groups: groupsState,
+    }), [
+        tracks,
+        trackHeight,
+        expandedTrackHeight,
+        groupHeaderHeight,
+        modeState,
+        groupsState,
+    ]);
+    // ── Store ──
+    const store = useMemo(() => new TimelineStore(), []);
+    const drag = useSyncExternalStore(store.subscribeDrag, store.getDrag);
+    const hover = useSyncExternalStore(store.subscribeHover, store.getHover);
+    const hoverPlayhead = useSyncExternalStore(store.subscribeHoverPlayhead, store.getHoverPlayhead);
+    const hoverLoop = useSyncExternalStore(store.subscribeHoverLoop, store.getHoverLoop);
+    useLayoutEffect(() => {
+        store.setGeometry({
+            view: viewState,
+            size,
+            trackHeight,
+            scrollTop,
+            startFrame,
+            endFrame,
+            fps,
+            mode: modeState,
+        });
+    }, [
+        store,
+        viewState,
+        size,
+        trackHeight,
+        scrollTop,
+        startFrame,
+        endFrame,
+        fps,
+        modeState,
+    ]);
+    useLayoutEffect(() => {
+        store.setPlayhead({ frame: frameState, playing: playingState });
+    }, [store, frameState, playingState]);
+    useLayoutEffect(() => {
+        store.setSelection(selectionState);
+    }, [store, selectionState]);
+    // ── Seek helpers (snap + clamp) ──
+    const applyFrame = useCallback((f) => clamp(snapFrame(f, snap), startFrame, endFrame), [snap, startFrame, endFrame]);
+    const seekLive = useCallback((f) => {
+        setFrame(applyFrame(f));
+    }, [setFrame, applyFrame]);
+    // Consumer callbacks live behind refs so the handlers that fire them keep a
+    // stable identity even when the parent passes a fresh inline function every
+    // render (component-patterns.md rules #3 / #11).
+    const onFrameCompleteRef = useLatest(onFrameChangeComplete);
+    const seekCommit = useCallback((f) => {
+        const v = applyFrame(f);
+        setFrame(v);
+        onFrameCompleteRef.current?.(v);
+    }, [setFrame, applyFrame, onFrameCompleteRef]);
+    // ── Playback (optional built-in rAF loop) ──
+    const setFrameRaw = useCallback((f) => {
+        setFrame(clamp(f, startFrame, endFrame));
+    }, [setFrame, startFrame, endFrame]);
+    const handlePlaybackEnd = useCallback(() => {
+        setPlaying(false);
+    }, [setPlaying]);
+    useTimelinePlayback({
+        playing: playingState,
+        frame: frameState,
+        fps,
+        startFrame,
+        endFrame,
+        loop: loopState,
+        onAdvance: setFrameRaw,
+        onEnd: handlePlaybackEnd,
+    });
+    // ── Follow-playhead during playback ──
+    // `smooth` keeps the playhead centred in the view — the view slides
+    // continuously once the playhead reaches the centre (one frame per tick,
+    // so visually smooth). `paged` waits until the playhead leaves the view
+    // and then jumps forward by a full span (After Effects vs Premiere style).
+    // `off` leaves the view alone.
+    useLayoutEffect(() => {
+        if (!playingState)
+            return;
+        const next = nextFollowView(followMode, viewState, frameState, startFrame, endFrame);
+        if (next)
+            setView(next);
+    }, [
+        playingState,
+        followMode,
+        frameState,
+        viewState,
+        setView,
+        startFrame,
+        endFrame,
+    ]);
+    // ── Track-edit helpers ──
+    // Track-change callbacks behind refs (same rationale as `seekCommit`): the
+    // gesture hook + header handlers stay stable while the parent may pass fresh
+    // inline `onTracksChange` / `onTracksChangeComplete` each render.
+    const onTracksChangeRef = useLatest(onTracksChange);
+    const onTracksChangeCompleteRef = useLatest(onTracksChangeComplete);
+    const setTracksLive = useCallback((t) => {
+        onTracksChangeRef.current?.(t);
+    }, [onTracksChangeRef]);
+    const commitTracks = useCallback((t) => {
+        onTracksChangeCompleteRef.current?.(t);
+    }, [onTracksChangeCompleteRef]);
+    const handleReorderTracks = useCallback((next) => {
+        setTracksLive(next);
+        commitTracks(next);
+    }, [setTracksLive, commitTracks]);
+    const handleToggleTrackExpanded = useCallback((trackId) => {
+        const next = tracks.map(t => t.id === trackId ? { ...t, expanded: !t.expanded } : t);
+        setTracksLive(next);
+        commitTracks(next);
+    }, [tracks, setTracksLive, commitTracks]);
+    const handleToggleGroupCollapsed = useCallback((groupId) => {
+        setGroups(groupsState.map(g => g.id === groupId ? { ...g, collapsed: !g.collapsed } : g));
+    }, [groupsState, setGroups]);
+    // ── View helpers + imperative handle ──
+    const rangeSpan = Math.max(1, endFrame - startFrame);
+    const clampView = useCallback((v) => {
+        const maxSpan = maxFramesVisible ?? rangeSpan;
+        const span = Math.min(maxSpan, Math.max(minFramesVisible, v.endFrame - v.startFrame));
+        const center = (v.startFrame + v.endFrame) / 2;
+        return { startFrame: center - span / 2, endFrame: center + span / 2 };
+    }, [minFramesVisible, maxFramesVisible, rangeSpan]);
+    const requestZoomToFit = useCallback((paddingFrames) => {
+        const p = paddingFrames ?? 0;
+        setView(clampView({ startFrame: startFrame - p, endFrame: endFrame + p }));
+    }, [setView, clampView, startFrame, endFrame]);
+    // Live reads for the imperative `zoomToSelection`, kept in refs so the
+    // callback (wired into the store handle below) has a stable identity.
+    const selectionRef = useLatest(selectionState);
+    const tracksRef = useLatest(tracks);
+    const requestZoomToSelection = useCallback(() => {
+        const sel = selectionRef.current;
+        if (sel.length === 0)
+            return;
+        // O(|selection|) walk: index tracks once, look up the keyframe per ref.
+        const tracksById = new Map(tracksRef.current.map(t => [t.id, t]));
+        let min = Infinity;
+        let max = -Infinity;
+        for (const ref of sel) {
+            const track = tracksById.get(ref.trackId);
+            if (!track)
+                continue;
+            const kf = track.keyframes.find(k => k.id === ref.keyframeId);
+            if (!kf)
+                continue;
+            if (kf.x < min)
+                min = kf.x;
+            if (kf.x > max)
+                max = kf.x;
+        }
+        if (!Number.isFinite(min) || !Number.isFinite(max))
+            return;
+        const pad = Math.max(1, (max - min) * 0.1);
+        setView(clampView({ startFrame: min - pad, endFrame: max + pad }));
+    }, [selectionRef, tracksRef, setView, clampView]);
+    const requestSetView = useCallback((v) => {
+        setView(clampView(v));
+    }, [setView, clampView]);
+    useLayoutEffect(() => {
+        store.configureHandle({
+            focus: () => bodyRef.current?.focus(),
+            getElement: () => bodyRef.current,
+            seek: seekCommit,
+            setPlaying,
+            setView: requestSetView,
+            zoomToFit: requestZoomToFit,
+            zoomToSelection: requestZoomToSelection,
+        });
+    }, [
+        store,
+        seekCommit,
+        setPlaying,
+        requestSetView,
+        requestZoomToFit,
+        requestZoomToSelection,
+    ]);
+    useImperativeHandle(ref, () => store.handle, [store]);
+    // ── Responsive sizing ──
+    useResizeObserver(bodyRef, entry => {
+        const { width, height: h } = entry.contentRect;
+        setSize(prev => prev.width === width && prev.height === h ? prev : { width, height: h });
+    });
+    // ── Vertical scroll ──
+    const rulerHeight = showRuler ? RULER_HEIGHT : 0;
+    const loopStripHeight = loopStrip ? LOOP_STRIP_HEIGHT : 0;
+    const chromeHeight = rulerHeight + loopStripHeight;
+    const maxScrollTop = Math.max(0, layout.contentHeight - (size.height - chromeHeight));
+    // Clamp the scroll offset when the scrollable area shrinks (content removed
+    // or viewport grown). Adjusting state during render is React's documented
+    // alternative to a layout effect here — it avoids an extra commit, and the
+    // guard makes it self-terminating.
+    if (scrollTop > maxScrollTop) {
+        setScrollTop(maxScrollTop);
+    }
+    const scrollBy = useCallback((deltaPixels) => {
+        setScrollTop(s => clamp(s + deltaPixels, 0, maxScrollTop));
+    }, [maxScrollTop]);
+    // ── Gestures ──
+    const { handlers, onWheel } = useTimelineGestures({
+        containerRef: bodyRef,
+        store,
+        view: viewState,
+        size,
+        tracks,
+        selection: selectionState,
+        frame: frameState,
+        startFrame,
+        endFrame,
+        trackHeight,
+        scrollTop,
+        rulerHeight,
+        loopStripHeight,
+        loopHandles,
+        snap,
+        editable,
+        allowAddKeyframe,
+        allowDeleteKeyframe,
+        showPlayhead,
+        rows: layout.rows,
+        trackTops: layout.trackTops,
+        expandedHeight: expandedTrackHeight,
+        groups: groupsState,
+        minFramesVisible,
+        maxFramesVisible,
+        loopRegion,
+        maxScrollTop,
+        seekLive,
+        seekCommit,
+        setSelection,
+        setTracks: setTracksLive,
+        commitTracks: commitTracks,
+        setView,
+        setLoop,
+        scrollBy,
+        setGroups,
+    });
+    // Native non-passive wheel listener (React onWheel is passive). Attach to
+    // both the track body and the left header column so vertical scrolling works
+    // when the cursor is over the track names too. `onWheel` is a stable
+    // `useCallback` (it reads live state through a ref), so this effect attaches
+    // once and never re-subscribes.
+    useEffect(() => {
+        const body = bodyRef.current;
+        const header = headerColumnRef.current;
+        body?.addEventListener('wheel', onWheel, { passive: false });
+        header?.addEventListener('wheel', onWheel, { passive: false });
+        return () => {
+            body?.removeEventListener('wheel', onWheel);
+            header?.removeEventListener('wheel', onWheel);
+        };
+    }, [onWheel]);
+    // ── Slots + draw ──
+    const slots = useMemo(() => categorizeChildren(children), [children]);
+    // Prop wins; the deprecated `<Timeline.TrackScale />` slot still works.
+    const trackScale = trackScaleProp ?? slots.trackScale ?? undefined;
+    useTimelineDraw({
+        canvasRef,
+        size,
+        view: viewState,
+        startFrame,
+        endFrame,
+        fps,
+        frame: frameState,
+        rows: layout.rows,
+        scrollTop,
+        rulerHeight,
+        loopStripHeight,
+        loopHandles,
+        showPlayhead,
+        selection: selectionState,
+        hover,
+        hoverPlayhead,
+        marquee: drag.marquee,
+        loopRegion,
+        loopHover: drag.kind === 'none' ? hoverLoop : null,
+        ...(backgroundColor !== undefined ? { backgroundColor } : {}),
+        ...(playheadColor !== undefined ? { playheadColor } : {}),
+        ...(trackScale ? { trackScale } : {}),
+        ...(renderOverlay ? { renderOverlay } : {}),
+        ...(formatTime ? { formatTime } : {}),
+    });
+    // ── Layout ──
+    // Announce the playhead on discrete moves (keyboard / click), but stay quiet
+    // during continuous scrub drags and playback so AT isn't flooded.
+    const liveMessage = drag.kind === 'none' && !playingState
+        ? `Playhead at frame ${Math.round(frameState)}`
+        : '';
+    const shellHeight = height !== undefined ? `${height}px` : responsive ? '100%' : '240px';
+    return (jsx(TimelineStoreContext.Provider, { value: store, children: jsxs("div", { className: cx(timelineShellStyle, className), "data-testid": testId, id: id, style: { height: shellHeight, ...style }, children: [slots.toolbar, jsxs("div", { className: timelineMainRowStyle, children: [jsx(TimelineTrackHeaders, { ref: headerColumnRef, rows: layout.rows, contentHeight: layout.contentHeight, tracks: tracks, rulerHeight: chromeHeight, scrollTop: scrollTop, width: trackHeaderWidth, selection: selectionState, editable: editable, renderTrackHeader: renderTrackHeader, onReorderTracks: handleReorderTracks, onToggleGroupCollapsed: handleToggleGroupCollapsed, onToggleTrackExpanded: handleToggleTrackExpanded }), jsxs("div", { ref: bodyRef, className: timelineBodyStyle, "data-dragging": drag.kind !== 'none' || undefined, "data-hover-target": drag.kind !== 'none'
+                                ? undefined
+                                : hoverPlayhead
+                                    ? 'playhead'
+                                    : hoverLoop === 'start' || hoverLoop === 'end'
+                                        ? 'loop-edge'
+                                        : hoverLoop === 'body'
+                                            ? 'loop-body'
+                                            : undefined, role: "group", "aria-label": ariaLabel, "aria-roledescription": "Timeline", 
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- focusable interactive canvas surface
+                            tabIndex: 0, onPointerDown: handlers.onPointerDown, onPointerMove: handlers.onPointerMove, onPointerUp: handlers.onPointerUp, onPointerCancel: handlers.onPointerCancel, onPointerLeave: handlers.onPointerLeave, onDoubleClick: handlers.onDoubleClick, onKeyDown: handlers.onKeyDown, children: [jsx("canvas", { ref: canvasRef, className: timelineCanvasStyle }), jsx("div", { className: timelineOverlayLayerStyle, children: slots.overlay }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: liveMessage })] })] }), slots.minimap
+                    ? React.cloneElement(slots.minimap, {
+                        setView: requestSetView,
+                    })
+                    : null, slots.footer] }) }));
+};
+Timeline.displayName = 'Timeline';
+
+export { Timeline };
+//# sourceMappingURL=Timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sources":["../../../../../../src/components/editor/Timeline/Timeline.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA;AACA;AAWA;;;AAGA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;;;;AAIE;AACE;;;;AAIJ;AACA;AAKA;AACE;;;AAGF;;;AASO;;;AASA;AACL;;;AAEA;;AAEJ;AACA;AACF;AAEA;;;;;;;;AAQG;AACI;AACL;AA4DA;AACA;AACA;AAEA;;;;AAUA;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;;;AAQD;AAGA;AACA;;;AAGI;AACF;;;;AAUI;;;AAGA;AACD;;;;;;;AAQF;;AAKH;AACA;AACA;AACA;AAIA;;;AAOI;;;;;;;AAOA;AACD;AACH;;;;;;;;;;AAUC;;AAGC;;;AAIA;AACF;;AAIA;AAIA;AAEI;AACF;;;;AAMF;AACA;AAEI;;AAEA;;;AAOJ;;;AAMA;;AAEA;AACA;AACE;AACA;;;;AAIA;AACA;AACA;AACD;;;;;;;;AASC;;AACA;AAOA;;AACF;;;;;;;;AAQC;;;;;AAOD;AACA;AACA;AAEI;AACF;AAGF;AAEI;AACF;AAGF;;;AAIE;AAGF;AAEI;;;;AAQJ;AAEI;AAKF;;AAMF;AACA;AAEI;;AAKA;AACA;;AAKJ;AAEI;AACA;;;;AASJ;AACA;AACA;AACE;AACA;;;;;AAIA;AACA;;AAEE;;;AAEA;;AACA;AAAgB;AAChB;AAAgB;;AAElB;;AACA;AACA;;AAGF;AAEI;AACF;;;;AAOE;AACA;;AAEA;AACA;AACA;AACD;AACH;;;;;;;AAOC;AAED;;AAIA;;AAEE;AAGF;;;;AAMA;;;;;;AAUA;;;AAIA;AAEI;AACF;;AAMF;AACE;;AAEA;;;AAGA;AACA;;;;;;;;;;;;;;;AAeA;AACA;;;;;;;;AAQA;AACA;;;;;AAKD;;;;;;;AAQC;AACA;AACA;AACA;AACA;AACE;AACA;AACF;AACF;;AAIA;;;AAIA;;;AAGE;;;;AAIA;;;;;;;AAOA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACD;;;;;;;;AAcD;AAmCc;AACA;AACE;AACA;AACE;;AAEE;;;AAOV;;AAsBE;;;AAOd;AAEA;;"}

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

@@ -0,0 +1,10 @@
+// ─── Slot markers ───
+/**
+ * Symbol attached to `Timeline.Toolbar` / `.Footer` so the parent
+ * `<Timeline>` can identify slot children without relying on `displayName`
+ * (clobbered by `React.memo` / Vanilla Extract recipes).
+ */
+const TIMELINE_SLOT = Symbol.for('etui.timeline.slot');
+
+export { TIMELINE_SLOT };
+//# sourceMappingURL=Timeline.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.types.js","sources":["../../../../../../src/components/editor/Timeline/Timeline.types.ts"],"sourcesContent":[null],"names":[],"mappings":"AAyGA;AAEA;;;;AAIG;AACI,MAAM,aAAa,GAAkB,MAAM,CAAC,GAAG,CAAC,oBAAoB;;;;"}

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

@@ -0,0 +1,69 @@
+"use client";
+import { createContext, useSyncExternalStore, useContext, useMemo, useCallback } from 'react';
+import { selectedTangentMode, setSelectedTangentMode } from './timelineEdits.js';
+
+const TimelineStoreContext = createContext(null);
+function useTimelineStoreInternal() {
+    const store = useContext(TimelineStoreContext);
+    if (!store) {
+        throw new Error('useTimeline* hooks must be called inside a <Timeline> component');
+    }
+    return store;
+}
+/**
+ * Subscribe to **all** Timeline state. Convenient catch-all but re-renders on
+ * every store mutation. For perf-sensitive consumers, prefer the slice hooks
+ * (`useTimelineGeometry`, `useTimelinePlayhead`, `useTimelineSelection`).
+ */
+function useTimelineContext() {
+    const store = useTimelineStoreInternal();
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+/** Subscribe to the geometry slice (view / sizes / range / mode). */
+function useTimelineGeometry() {
+    const store = useTimelineStoreInternal();
+    return useSyncExternalStore(store.subscribeGeometry, store.getGeometry);
+}
+/** Subscribe to the playhead slice (frame / playing). */
+function useTimelinePlayhead() {
+    const store = useTimelineStoreInternal();
+    return useSyncExternalStore(store.subscribePlayhead, store.getPlayhead);
+}
+/** Subscribe to the selection slice. */
+function useTimelineSelection() {
+    const store = useTimelineStoreInternal();
+    return useSyncExternalStore(store.subscribeSelection, store.getSelection);
+}
+/**
+ * Convenience hook for building a tangent-mode toggle UI (the six modes:
+ * `auto` / `linear` / `step` / `aligned` / `mirrored` / `free`). Reads the
+ * current selection from the Timeline store, exposes the unified mode (or
+ * `'mixed'`), and applies a chosen mode to every selected keyframe via the
+ * caller's `onTracksChange`.
+ *
+ * @example
+ * ```tsx
+ * function TangentBar({ tracks, onTracksChange }) {
+ *   const t = useTimelineSelectedTangentMode(tracks, onTracksChange);
+ *   if (t.current === null) return null;
+ *   return (
+ *     <>
+ *       <button onClick={() => t.set('auto')} aria-pressed={t.current === 'auto'}>auto</button>
+ *       <button onClick={() => t.set('aligned')} aria-pressed={t.current === 'aligned'}>aligned</button>
+ *       …
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function useTimelineSelectedTangentMode(tracks, onTracksChange) {
+    const selection = useTimelineSelection();
+    const current = useMemo(() => selectedTangentMode(tracks, selection), [tracks, selection]);
+    const set = useCallback((mode) => {
+        onTracksChange(setSelectedTangentMode(tracks, selection, mode));
+    }, [tracks, selection, onTracksChange]);
+    return { current, set };
+}
+
+export { TimelineStoreContext, useTimelineContext, useTimelineGeometry, useTimelinePlayhead, useTimelineSelectedTangentMode, useTimelineSelection };
+//# sourceMappingURL=TimelineContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineContext.js","sources":["../../../../../../src/components/editor/Timeline/TimelineContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AA0BA;AACE;;AAEE;;AAIF;AACF;AAEA;;;;AAIG;;AAED;;AAEF;AAEA;;AAEE;;AAEF;AAEA;;AAEE;;AAEF;AAEA;;AAEE;;AAEF;AAYA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG;AAIJ;;AAKA;;;AAMA;AACF;;"}

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

@@ -0,0 +1,16 @@
+import { TIMELINE_SLOT } from './Timeline.types.js';
+
+/**
+ * Footer strip rendered below the timeline body (status bar — selected
+ * keyframe info, current frame / timecode). Picked out of `<Timeline>`
+ * children by the `TIMELINE_SLOT` symbol — its position in the child tree
+ * does not affect placement.
+ */
+const TimelineFooterImpl = () => null;
+const TimelineFooter = Object.assign(TimelineFooterImpl, {
+    displayName: 'Timeline.Footer',
+    [TIMELINE_SLOT]: 'footer',
+});
+
+export { TimelineFooter };
+//# sourceMappingURL=TimelineFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineFooter.js","sources":["../../../../../../src/components/editor/Timeline/TimelineFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,kBAAkB,GAAyC,MAAM,IAAI;MAE9D,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;AAC9D,IAAA,WAAW,EAAE,iBAAiB;IAC9B,CAAC,aAAa,GAAG,QAAiB;AACnC,CAAA;;;;"}