entangle-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,280 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useLayoutEffect, useEffect, useMemo } from 'react';
+import { resolveVarValue } from '../../primitives/canvas/canvasTheme.js';
+import '../../../utils/devWarn.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import { vars } from '../../../theme/contract.css.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 { timelineMinimapStyle } from './Timeline.css.js';
+import { TIMELINE_SLOT } from './Timeline.types.js';
+import { useTimelineGeometry, useTimelinePlayhead } from './TimelineContext.js';
+import { clamp } from '../../../utils/mathUtils.js';
+
+/**
+ * Compact overview strip showing the full frame range, the current viewport
+ * rectangle (draggable), the playhead, and small dots for every keyframe.
+ * Picked out of `<Timeline>` children by the `TIMELINE_SLOT` symbol — its
+ * position in the child tree does not affect placement (always rendered below
+ * the track area).
+ */
+function TimelineMinimapImpl(props) {
+    const { tracks, height = 40, markerColor, viewportColor, className, style, setView, } = props;
+    // Subscribe only to the slices the minimap actually reads — selection,
+    // hover, drag and mode changes do not invalidate this strip.
+    const geometry = useTimelineGeometry();
+    const playhead = useTimelinePlayhead();
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+    const [width, setWidth] = useState(0);
+    useResizeObserver(containerRef, entry => {
+        setWidth(w => w === entry.contentRect.width ? w : entry.contentRect.width);
+    });
+    const range = Math.max(1, geometry.endFrame - geometry.startFrame);
+    const pxToFrame = useCallback((px) => geometry.startFrame + (clamp(px, 0, width) / Math.max(1, width)) * range, [geometry.startFrame, range, width]);
+    // ── Render ──
+    // Canonical canvas template (component-patterns.md rule #7): the whole draw
+    // body lives inside `scheduleDraw`, closing over its reactive inputs and
+    // listing them in deps. Theme colors are resolved per-frame (never cached in
+    // state). The layout effect just depends on `scheduleDraw`.
+    const rafRef = useRef(0);
+    const scheduleDraw = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            const canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            const renderCtx = canvas.getContext('2d');
+            if (!renderCtx)
+                return;
+            const w = Math.max(1, width);
+            const h = Math.max(1, height);
+            const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+            const targetW = Math.max(1, Math.round(w * dpr));
+            const targetH = Math.max(1, Math.round(h * dpr));
+            if (canvas.width !== targetW || canvas.height !== targetH) {
+                canvas.width = targetW;
+                canvas.height = targetH;
+            }
+            renderCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const bg = resolveVarValue(canvas, vars.colors.background.inset);
+            const border = resolveVarValue(canvas, vars.colors.border.default);
+            const marker = markerColor ?? resolveVarValue(canvas, vars.colors.accent.secondary);
+            const accent = viewportColor ?? resolveVarValue(canvas, vars.colors.accent.primary);
+            renderCtx.clearRect(0, 0, w, h);
+            renderCtx.fillStyle = bg;
+            renderCtx.fillRect(0, 0, w, h);
+            // Keyframe markers (small vertical ticks)
+            renderCtx.fillStyle = marker;
+            renderCtx.globalAlpha = 0.6;
+            for (const track of tracks) {
+                if (track.hidden)
+                    continue;
+                for (const kf of track.keyframes) {
+                    const x = Math.round(((kf.x - geometry.startFrame) / range) * w);
+                    renderCtx.fillRect(x, h * 0.25, 1, h * 0.5);
+                }
+            }
+            renderCtx.globalAlpha = 1;
+            // Viewport rectangle
+            const vx = ((geometry.view.startFrame - geometry.startFrame) / range) * w;
+            const vw = ((geometry.view.endFrame - geometry.view.startFrame) / range) * w;
+            renderCtx.save();
+            renderCtx.fillStyle = accent;
+            renderCtx.globalAlpha = 0.16;
+            renderCtx.fillRect(vx, 0, vw, h);
+            renderCtx.globalAlpha = 1;
+            renderCtx.strokeStyle = accent;
+            renderCtx.lineWidth = 1;
+            renderCtx.strokeRect(vx + 0.5, 0.5, Math.max(0, vw - 1), h - 1);
+            // Edge "grippers" — small filled bars centred vertically on each edge
+            // hint that the viewport rectangle is resizable (zoom).
+            const gripH = Math.max(6, h * 0.4);
+            const gripY = (h - gripH) / 2;
+            renderCtx.fillRect(vx - 1, gripY, 2, gripH);
+            renderCtx.fillRect(vx + vw - 1, gripY, 2, gripH);
+            renderCtx.restore();
+            // Playhead
+            const px = Math.round(((playhead.frame - geometry.startFrame) / range) * w) + 0.5;
+            renderCtx.strokeStyle = accent;
+            renderCtx.lineWidth = 1;
+            renderCtx.beginPath();
+            renderCtx.moveTo(px, 0);
+            renderCtx.lineTo(px, h);
+            renderCtx.stroke();
+            // Top + bottom borders
+            renderCtx.fillStyle = border;
+            renderCtx.fillRect(0, 0, w, 1);
+        });
+    }, [
+        width,
+        height,
+        range,
+        geometry.startFrame,
+        geometry.view.startFrame,
+        geometry.view.endFrame,
+        playhead.frame,
+        tracks,
+        markerColor,
+        viewportColor,
+    ]);
+    useLayoutEffect(() => {
+        scheduleDraw();
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleDraw]);
+    // ── Interactions: drag viewport, resize edges, click outside to center ──
+    const EDGE_PICK_PX = 6;
+    const dragRef = useRef(null);
+    const span = geometry.view.endFrame - geometry.view.startFrame;
+    const setViewSpan = useCallback((start) => {
+        if (!setView)
+            return;
+        const clamped = clamp(start, geometry.startFrame, geometry.endFrame - span);
+        setView({ startFrame: clamped, endFrame: clamped + span });
+    }, [setView, geometry.startFrame, geometry.endFrame, span]);
+    const setViewRaw = useCallback((next) => {
+        if (!setView)
+            return;
+        setView(next);
+    }, [setView]);
+    const frameToPx = useCallback((frame) => ((frame - geometry.startFrame) / range) * Math.max(1, width), [geometry.startFrame, range, width]);
+    const onPointerDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const frame = pxToFrame(x);
+        e.preventDefault();
+        container.setPointerCapture(e.pointerId);
+        const startPx = frameToPx(geometry.view.startFrame);
+        const endPx = frameToPx(geometry.view.endFrame);
+        // Edge-resize takes priority: lets the user zoom by dragging the
+        // viewport rect's left or right edge.
+        if (Math.abs(x - startPx) <= EDGE_PICK_PX) {
+            dragRef.current = {
+                pointerId: e.pointerId,
+                mode: 'resize-start',
+                grabOffset: 0,
+            };
+            return;
+        }
+        if (Math.abs(x - endPx) <= EDGE_PICK_PX) {
+            dragRef.current = {
+                pointerId: e.pointerId,
+                mode: 'resize-end',
+                grabOffset: 0,
+            };
+            return;
+        }
+        const inside = frame >= geometry.view.startFrame && frame <= geometry.view.endFrame;
+        if (inside) {
+            dragRef.current = {
+                pointerId: e.pointerId,
+                mode: 'move',
+                grabOffset: frame - geometry.view.startFrame,
+            };
+        }
+        else {
+            dragRef.current = {
+                pointerId: e.pointerId,
+                mode: 'jump',
+                grabOffset: 0,
+            };
+            setViewSpan(frame - span / 2);
+        }
+    }, [
+        pxToFrame,
+        frameToPx,
+        geometry.view.startFrame,
+        geometry.view.endFrame,
+        setViewSpan,
+        span,
+    ]);
+    const onPointerMove = useCallback((e) => {
+        const drag = dragRef.current;
+        if (drag?.pointerId !== e.pointerId)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const frame = pxToFrame(x);
+        switch (drag.mode) {
+            case 'move':
+                setViewSpan(frame - drag.grabOffset);
+                break;
+            case 'jump':
+                setViewSpan(frame - span / 2);
+                break;
+            case 'resize-start': {
+                const newStart = clamp(frame, geometry.startFrame, geometry.view.endFrame - 1);
+                setViewRaw({
+                    startFrame: newStart,
+                    endFrame: geometry.view.endFrame,
+                });
+                break;
+            }
+            case 'resize-end': {
+                const newEnd = clamp(frame, geometry.view.startFrame + 1, geometry.endFrame);
+                setViewRaw({
+                    startFrame: geometry.view.startFrame,
+                    endFrame: newEnd,
+                });
+                break;
+            }
+        }
+    }, [
+        pxToFrame,
+        setViewSpan,
+        setViewRaw,
+        span,
+        geometry.startFrame,
+        geometry.endFrame,
+        geometry.view.startFrame,
+        geometry.view.endFrame,
+    ]);
+    const endDrag = useCallback((e) => {
+        const drag = dragRef.current;
+        if (drag?.pointerId !== e.pointerId)
+            return;
+        const container = containerRef.current;
+        if (container?.hasPointerCapture(e.pointerId)) {
+            container.releasePointerCapture(e.pointerId);
+        }
+        dragRef.current = null;
+    }, []);
+    // Redraw when DPR changes
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const handler = () => {
+            scheduleDraw();
+        };
+        mq.addEventListener('change', handler);
+        return () => {
+            mq.removeEventListener('change', handler);
+        };
+    }, [scheduleDraw]);
+    const wrapperStyle = useMemo(() => ({ height, ...style }), [height, style]);
+    return (jsx("div", { ref: containerRef, className: cx(timelineMinimapStyle, className), style: wrapperStyle, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, role: "region", "aria-label": "Timeline overview", children: jsx("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block' } }) }));
+}
+const TimelineMinimap = Object.assign(TimelineMinimapImpl, {
+    displayName: 'Timeline.Minimap',
+    [TIMELINE_SLOT]: 'minimap',
+});
+
+export { TimelineMinimap };
+//# sourceMappingURL=TimelineMinimap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineMinimap.js","sources":["../../../../../../src/components/editor/Timeline/TimelineMinimap.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA;;;;;;AAMG;AACH;AACE;;;AAYA;AACA;AACA;AACA;;AAGA;;AAIA;AAEA;;;;;;;AAYA;AAEA;AACE;AACA;AACE;AACA;;;AAEA;;;;AAIA;AAEA;AACA;AACA;AACE;AACA;;AAEF;AAEA;AACA;AACA;AAEA;;AAIA;;;AAIA;AACA;AACA;;;AAEE;;AAEE;;;AAGJ;;AAGA;;;AAIA;AACA;;AAEA;AACA;AACA;;;;AAKA;;AAEA;AACA;;;;AAMA;AACA;;AAEA;AACA;;;AAIA;;AAEF;AACF;;;;AAIE;;;AAGA;;;;AAID;;AAGC;AACA;AACE;AACF;AACF;;;AAMA;AAMA;AACA;AAEI;;AACA;AAKA;AACF;AAIF;AAEI;;;AAEF;AAIF;AAMA;AAEI;;AACA;AACA;;AACA;;AAEA;;AAEA;;;;;;;;AAQI;AACA;;;;;;;AAOA;AACA;;;;AAIJ;;;;AAKI;AACA;;;;;;AAKA;AACA;;AAEF;;AAEJ;;;;;;;AAQC;AAGH;AAEI;AACA;;AACA;AACA;;AACA;;AAEA;AACA;AACE;AACE;;AAEF;AACE;;;AAGA;AAKA;AACE;AACA;AACD;;;;AAID;AAKA;AACE;AACA;AACD;;;;AAIP;;;;;AAME;AACA;;;AAGD;AAGH;AACE;AACA;;AACA;;AAEE;;AAEF;;;;;;AAMA;;AAIE;AACF;AACA;AACA;AACE;AACF;AACF;;AAOA;AAkBF;;AAGE;;AAED;;"}

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

@@ -0,0 +1,289 @@
+import { xToFrame, frameToX } from './timelineCoords.js';
+import { selectionKey } from './timelineSelection.js';
+
+const ZERO_SIZE = { width: 0, height: 0 };
+const DEFAULT_VIEW = { startFrame: 0, endFrame: 1 };
+/**
+ * Single source of truth for Timeline runtime state — geometry, playhead,
+ * selection. Designed for `useSyncExternalStore`: each slice has its own
+ * subscribe/get pair so subscribers re-render only when their slice changes.
+ * Controlled props are mirrored into the store by the component before paint.
+ */
+class TimelineStore {
+    constructor() {
+        this.geometry = {
+            view: DEFAULT_VIEW,
+            size: ZERO_SIZE,
+            trackHeight: 28,
+            scrollTop: 0,
+            startFrame: 0,
+            endFrame: 1,
+            fps: 30,
+            mode: 'dope-sheet',
+        };
+        this.playhead = { frame: 0, playing: false };
+        this.selection = [];
+        this.selectionKeys = new Set();
+        this.drag = { kind: 'none', marquee: null };
+        this.hover = null;
+        this.hoverPlayhead = false;
+        this.hoverLoop = null;
+        this.snapshot = this.computeSnapshot();
+        this.allListeners = new Set();
+        this.geometryListeners = new Set();
+        this.playheadListeners = new Set();
+        this.selectionListeners = new Set();
+        this.dragListeners = new Set();
+        this.hoverListeners = new Set();
+        this.hoverPlayheadListeners = new Set();
+        this.hoverLoopListeners = new Set();
+        // ── Public read API (arrow functions so they can be passed as callbacks) ──
+        this.getSnapshot = () => this.snapshot;
+        this.getGeometry = () => this.geometry;
+        this.getPlayhead = () => this.playhead;
+        this.getSelection = () => this.selection;
+        this.getDrag = () => this.drag;
+        this.getHover = () => this.hover;
+        this.getHoverPlayhead = () => this.hoverPlayhead;
+        this.getHoverLoop = () => this.hoverLoop;
+        this.isSelected = (ref) => this.selectionKeys.has(selectionKey(ref));
+        this.isHovered = (ref) => this.hover !== null &&
+            this.hover.trackId === ref.trackId &&
+            this.hover.keyframeId === ref.keyframeId;
+        // ── Subscriptions ──
+        this.subscribe = (cb) => {
+            this.allListeners.add(cb);
+            return () => {
+                this.allListeners.delete(cb);
+            };
+        };
+        this.subscribeGeometry = (cb) => {
+            this.geometryListeners.add(cb);
+            return () => {
+                this.geometryListeners.delete(cb);
+            };
+        };
+        this.subscribePlayhead = (cb) => {
+            this.playheadListeners.add(cb);
+            return () => {
+                this.playheadListeners.delete(cb);
+            };
+        };
+        this.subscribeSelection = (cb) => {
+            this.selectionListeners.add(cb);
+            return () => {
+                this.selectionListeners.delete(cb);
+            };
+        };
+        this.subscribeDrag = (cb) => {
+            this.dragListeners.add(cb);
+            return () => {
+                this.dragListeners.delete(cb);
+            };
+        };
+        this.subscribeHover = (cb) => {
+            this.hoverListeners.add(cb);
+            return () => {
+                this.hoverListeners.delete(cb);
+            };
+        };
+        this.subscribeHoverPlayhead = (cb) => {
+            this.hoverPlayheadListeners.add(cb);
+            return () => {
+                this.hoverPlayheadListeners.delete(cb);
+            };
+        };
+        this.subscribeHoverLoop = (cb) => {
+            this.hoverLoopListeners.add(cb);
+            return () => {
+                this.hoverLoopListeners.delete(cb);
+            };
+        };
+        // ── Imperative handle ──
+        /**
+         * Stable handle whose methods proxy to the current store state and to the
+         * request handlers wired by the component. Stable for the store's lifetime.
+         */
+        this.handle = {
+            focus: () => {
+                this.handlers?.focus();
+            },
+            getElement: () => this.handlers?.getElement() ?? null,
+            seek: (frame) => {
+                this.handlers?.seek(frame);
+            },
+            play: () => {
+                this.handlers?.setPlaying(true);
+            },
+            pause: () => {
+                this.handlers?.setPlaying(false);
+            },
+            toggle: () => {
+                this.handlers?.setPlaying(!this.playhead.playing);
+            },
+            getFrame: () => this.playhead.frame,
+            zoomToFit: (paddingFrames) => {
+                this.handlers?.zoomToFit(paddingFrames);
+            },
+            zoomToSelection: () => {
+                this.handlers?.zoomToSelection();
+            },
+            getView: () => this.geometry.view,
+            setView: (view) => {
+                this.handlers?.setView(view);
+            },
+            frameToX: (frame) => frameToX(frame, this.geometry.view, this.geometry.size.width),
+            xToFrame: (x) => xToFrame(x, this.geometry.view, this.geometry.size.width),
+        };
+        this.handlers = null;
+    }
+    // ── Mutators ──
+    setGeometry(partial) {
+        const next = {
+            view: partial.view ?? this.geometry.view,
+            size: partial.size ?? this.geometry.size,
+            trackHeight: partial.trackHeight ?? this.geometry.trackHeight,
+            scrollTop: partial.scrollTop ?? this.geometry.scrollTop,
+            startFrame: partial.startFrame ?? this.geometry.startFrame,
+            endFrame: partial.endFrame ?? this.geometry.endFrame,
+            fps: partial.fps ?? this.geometry.fps,
+            mode: partial.mode ?? this.geometry.mode,
+        };
+        if (geometryEqual(next, this.geometry))
+            return;
+        this.geometry = next;
+        this.snapshot = this.computeSnapshot();
+        this.geometryListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setPlayhead(partial) {
+        const next = {
+            frame: partial.frame ?? this.playhead.frame,
+            playing: partial.playing ?? this.playhead.playing,
+        };
+        if (next.frame === this.playhead.frame &&
+            next.playing === this.playhead.playing) {
+            return;
+        }
+        this.playhead = next;
+        this.snapshot = this.computeSnapshot();
+        this.playheadListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setSelection(next) {
+        const nextKeys = new Set(next.map(selectionKey));
+        if (setsEqual(nextKeys, this.selectionKeys))
+            return;
+        this.selection = next;
+        this.selectionKeys = nextKeys;
+        this.snapshot = this.computeSnapshot();
+        this.selectionListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setDrag(next) {
+        if (next.kind === this.drag.kind &&
+            marqueeEqual(next.marquee, this.drag.marquee)) {
+            return;
+        }
+        this.drag = next;
+        this.dragListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setHover(next) {
+        if ((next === null && this.hover === null) ||
+            (next !== null &&
+                this.hover !== null &&
+                next.trackId === this.hover.trackId &&
+                next.keyframeId === this.hover.keyframeId)) {
+            return;
+        }
+        this.hover = next;
+        this.hoverListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setHoverPlayhead(next) {
+        if (next === this.hoverPlayhead)
+            return;
+        this.hoverPlayhead = next;
+        this.hoverPlayheadListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setHoverLoop(next) {
+        if (next === this.hoverLoop)
+            return;
+        this.hoverLoop = next;
+        this.hoverLoopListeners.forEach(cb => {
+            cb();
+        });
+    }
+    /** Wired up by `Timeline.tsx` so the handle/gestures can request changes. */
+    configureHandle(handlers) {
+        this.handlers = handlers;
+    }
+    computeSnapshot() {
+        const { view, size, startFrame, endFrame, fps, mode } = this.geometry;
+        return {
+            view,
+            size,
+            startFrame,
+            endFrame,
+            fps,
+            mode,
+            frame: this.playhead.frame,
+            playing: this.playhead.playing,
+            selection: this.selection,
+            frameToX: (f) => frameToX(f, view, size.width),
+            xToFrame: (x) => xToFrame(x, view, size.width),
+        };
+    }
+}
+function viewEqual(a, b) {
+    return a.startFrame === b.startFrame && a.endFrame === b.endFrame;
+}
+function sizeEqual(a, b) {
+    return a.width === b.width && a.height === b.height;
+}
+function geometryEqual(a, b) {
+    return (viewEqual(a.view, b.view) &&
+        sizeEqual(a.size, b.size) &&
+        a.trackHeight === b.trackHeight &&
+        a.scrollTop === b.scrollTop &&
+        a.startFrame === b.startFrame &&
+        a.endFrame === b.endFrame &&
+        a.fps === b.fps &&
+        a.mode === b.mode);
+}
+function setsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const key of a) {
+        if (!b.has(key))
+            return false;
+    }
+    return true;
+}
+function marqueeEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+}
+
+export { TimelineStore };
+//# sourceMappingURL=TimelineStore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineStore.js","sources":["../../../../../../src/components/editor/Timeline/TimelineStore.ts"],"sourcesContent":[null],"names":["frameToXFn","xToFrameFn"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { TIMELINE_SLOT } from './Timeline.types.js';
+
+/**
+ * Toolbar strip rendered above the timeline body (transport, mode toggle,
+ * zoom controls). Picked out of `<Timeline>` children by the `TIMELINE_SLOT`
+ * symbol — its position in the child tree does not affect placement.
+ */
+const TimelineToolbarImpl = () => null;
+const TimelineToolbar = Object.assign(TimelineToolbarImpl, {
+    displayName: 'Timeline.Toolbar',
+    [TIMELINE_SLOT]: 'toolbar',
+});
+
+export { TimelineToolbar };
+//# sourceMappingURL=TimelineToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineToolbar.js","sources":["../../../../../../src/components/editor/Timeline/TimelineToolbar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;AAIG;AACH,MAAM,mBAAmB,GAA0C,MAAM,IAAI;MAEhE,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;AAChE,IAAA,WAAW,EAAE,kBAAkB;IAC/B,CAAC,aAAa,GAAG,SAAkB;AACpC,CAAA;;;;"}