@elah/editor 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# @elah/editor
+
+Engine-first video timeline SDK for React. Internally layered as `core/` → `timeline/` → `editor/`.
+
+See the repo root [README](../../README.md) for project overview and the [core architecture reference](src/core/Architecture.md) for a cold-start guide to the engine.
+
+## Install
+
+This package is part of the monorepo workspace:
+
+```bash
+npm install
+```
+
+Peer dependencies: `react`, `react-dom` (>= 18).
+
+## Quick start
+
+```tsx
+import { EditorProvider, Timeline } from '@elah/editor'
+
+function App() {
+  return (
+    <EditorProvider fps={30}>
+      <Timeline style={{ height: 300 }} />
+    </EditorProvider>
+  )
+}
+```
+
+## Import media files
+
+Register local files into the media library from a file input or drop handler:
+
+```ts
+import { importFiles, useMediaLibraryStore } from '@elah/editor'
+
+async function onFilesSelected(files: FileList | File[]) {
+  const list = Array.from(files)
+  const assets = await importFiles(list)
+
+  // Assets are in the store immediately; thumbnails arrive shortly after.
+  console.log(useMediaLibraryStore.getState().assets)
+
+  // Subscribe in React via useMediaLibrary() for UI updates.
+  return assets
+}
+```
+
+`importFiles`:
+
+- Creates object URLs and probes duration/dimensions via DOM media elements
+- Skips unsupported MIME types with a console warning
+- Registers assets in `useMediaLibraryStore` synchronously
+- Generates JPEG thumbnails on the main thread and patches `thumbnailUrl` asynchronously
+
+## AssetPanel
+
+Browse, drop, and drag media assets from a sidebar panel. Render as a sibling of `<Timeline>` inside `<EditorProvider>`:
+
+```tsx
+import { EditorProvider, Timeline, AssetPanel } from '@elah/editor'
+
+function App() {
+  return (
+    <EditorProvider fps={30}>
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <AssetPanel style={{ width: 220 }} />
+        <Timeline style={{ flex: 1 }} />
+      </div>
+    </EditorProvider>
+  )
+}
+```
+
+- **Add** opens a file picker; **drop** onto the panel imports via `importFiles`
+- Thumbnails appear asynchronously after import
+- Drag a thumbnail onto a timeline track lane to create a clip (see Timeline drop below)
+
+## Timeline drop
+
+With `<AssetPanel>` and `<Timeline>` as siblings inside `<EditorProvider>`, drag a thumbnail onto any track lane:
+
+- Drop position becomes the clip `startFrame` (respects timeline zoom)
+- Clip duration comes from the asset (`durationSec × project.fps`; images default to 5 seconds)
+- Video/image assets go on video tracks; audio on audio tracks
+- When snap is enabled (`usePlaybackStore.snapEnabled`), the drop snaps to the playhead and nearby clip edges
+
+No extra wiring beyond `TrackRow` — `useTimelineDrop` is attached automatically per lane.
+
+## Render pixels with `<Preview>`
+
+`<Preview>` mounts the WebGL2 `GpuRenderer`, drives the RAF loop, and paints
+interactive transform overlays — drag / uniform-scale for video & image clips
+(`MediaTransformOverlay`), and drag / resize / inline-edit for text clips
+(`TextOverlay`) — plus the project's audio.
+Inject a **demuxer factory** so the SDK never hard-depends on a decode backend:
+
+```tsx
+import { EditorProvider, Preview, createMediabunnyBackend } from '@elah/editor'
+import * as mediabunny from 'mediabunny'
+
+const demuxerFactory = () =>
+  createMediabunnyBackend(mediabunny, { blobResolver: (src) => fetch(src).then((r) => r.blob()) })
+
+function App() {
+  return (
+    <EditorProvider fps={30}>
+      <Preview demuxerFactory={demuxerFactory} style={{ height: 480 }} />
+    </EditorProvider>
+  )
+}
+```
+
+Omit `demuxerFactory` for a synthetic dev preview (no media files, no mediabunny).
+For a lower-level renderer handle, `GpuRenderer` is exported directly. See
+[`src/core/renderer/README.md`](src/core/renderer/README.md).
+
+## Export to MP4
+
+```ts
+import { exportVideo } from '@elah/editor'
+
+const blob = await exportVideo(engine.getProject(), {
+  videoBitrate: 8_000_000,
+  onProgress: ({ frame, totalFrames }) => setPct(Math.round((frame / totalFrames) * 100)),
+})
+```
+
+Runs in a worker; reuses `resolveTimeline` + the renderer's placement math. See
+[`src/core/export/README.md`](src/core/export/README.md).
+
+## Package layout
+
+```
+src/
+  core/       types, engine, playback, resolver, stores, assets, media, export, debug, actions
+  timeline/   Timeline UI + hooks
+  editor/     EditorProvider, AssetPanel, Preview, useResolvedScene
+```
+
+## Keyboard shortcuts
+
+The `<Timeline>` component registers these global keyboard shortcuts when focused:
+
+| Key | Action |
+|---|---|
+| **Space** | Play / pause |
+| **S** | Split selected clip at playhead |
+| **Delete** / **Backspace** | Delete selected clip(s) |
+| **Ctrl/Cmd + C** | Copy selected clip(s) to clipboard |
+| **Ctrl/Cmd + V** | Paste copied clip(s) — placed at current playhead position, same track |
+| **Ctrl/Cmd + Z** | Undo |
+| **Ctrl/Cmd + Shift + Z** / **Ctrl/Cmd + Y** | Redo |
+| **Ctrl/Cmd + scroll** | Zoom in / out |
+| **← / →** | Step one frame back / forward |
+
+**Right-click** any clip to open a context menu with a **Delete** option.
+
+## Scripts
+
+```bash
+npm run typecheck   # from packages/editor
+npm run test
+```
+
+## License
+
+To be decided — see root README.

package/dist/editor/AssetPanel/AssetPanel.d.ts

@@ -0,0 +1,6 @@
+import { type CSSProperties } from 'react';
+export interface AssetPanelProps {
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function AssetPanel({ style, className }: AssetPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/AssetPanel/AssetPanel.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { importFiles, MEDIA_DRAG_MIME, useMediaLibrary, useMediaLibraryStore, } from '@elah/core';
+const KIND_ICONS = {
+    video: '▶',
+    audio: '♪',
+    image: '◻',
+};
+const KIND_TAG = {
+    video: { label: 'VIDEO', color: '#93C5FD', bg: 'rgba(37, 99, 235, 0.2)' },
+    audio: { label: 'AUDIO', color: '#86EFAC', bg: 'rgba(22, 163, 74, 0.2)' },
+    image: { label: 'IMAGE', color: '#FCD34D', bg: 'rgba(245, 158, 11, 0.2)' },
+};
+function formatDuration(sec) {
+    if (!Number.isFinite(sec) || sec <= 0)
+        return '—';
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60);
+    return m > 0 ? `${m}:${s.toString().padStart(2, '0')}` : `${s}s`;
+}
+const THUMB_SIZE = 52;
+const TOAST_DISMISS_MS = 3000;
+function formatFileNames(files, maxNames = 3) {
+    const names = files.map((file) => file.name);
+    if (names.length <= maxNames)
+        return names.join(', ');
+    const shown = names.slice(0, maxNames).join(', ');
+    return `${shown} +${names.length - maxNames} more`;
+}
+function buildImportToast(skipped) {
+    if (skipped.length === 0)
+        return null;
+    const duplicates = skipped.filter((entry) => entry.reason === 'duplicate');
+    const unsupported = skipped.filter((entry) => entry.reason === 'unsupported');
+    const lines = [];
+    if (duplicates.length > 0) {
+        lines.push(`Skipped ${duplicates.length} duplicate file${duplicates.length === 1 ? '' : 's'}: ${formatFileNames(duplicates.map((entry) => entry.file))}`);
+    }
+    if (unsupported.length > 0) {
+        lines.push(`Skipped ${unsupported.length} unsupported file${unsupported.length === 1 ? '' : 's'}: ${formatFileNames(unsupported.map((entry) => entry.file))}`);
+    }
+    return {
+        message: lines.join('\n'),
+        tone: unsupported.length > 0 ? 'warn' : 'info',
+    };
+}
+function AssetThumbnail({ asset, onDelete }) {
+    const [ctxMenu, setCtxMenu] = useState(null);
+    const onDragStart = useCallback((e) => {
+        const payload = { kind: 'media-asset', assetId: asset.id };
+        e.dataTransfer.setData(MEDIA_DRAG_MIME, JSON.stringify(payload));
+        e.dataTransfer.effectAllowed = 'copy';
+    }, [asset.id]);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCtxMenu({ x: e.clientX, y: e.clientY });
+    }, []);
+    const closeCtxMenu = useCallback(() => setCtxMenu(null), []);
+    const handleDelete = useCallback(() => {
+        onDelete(asset.id);
+        setCtxMenu(null);
+    }, [asset.id, onDelete]);
+    const tag = KIND_TAG[asset.kind];
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { draggable: true, className: "elah-media-card", onDragStart: onDragStart, onContextMenu: handleContextMenu, title: asset.name, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '8px 10px',
+                    borderRadius: 8,
+                    cursor: 'grab',
+                    userSelect: 'none',
+                    background: '#171D2B',
+                    border: '1px solid #232938',
+                    transition: 'background 0.15s, border-color 0.15s',
+                }, children: [_jsx("div", { style: {
+                            position: 'relative',
+                            width: THUMB_SIZE,
+                            height: THUMB_SIZE,
+                            flexShrink: 0,
+                            background: '#06070A',
+                            borderRadius: 6,
+                            border: '1px solid #1A1F2B',
+                            overflow: 'hidden',
+                        }, children: asset.thumbnailUrl ? (_jsx("img", { src: asset.thumbnailUrl, alt: "", draggable: false, style: {
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'cover',
+                                display: 'block',
+                            } })) : (_jsx("div", { style: {
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontSize: 20,
+                                color: '#555',
+                            }, children: KIND_ICONS[asset.kind] })) }), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 3,
+                            minWidth: 0,
+                        }, children: [_jsx("span", { style: {
+                                    fontSize: 11,
+                                    color: '#F3F4F6',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: asset.name }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: {
+                                            fontSize: 8,
+                                            fontWeight: 700,
+                                            letterSpacing: '0.06em',
+                                            padding: '2px 5px',
+                                            borderRadius: 3,
+                                            color: tag.color,
+                                            background: tag.bg,
+                                        }, children: tag.label }), _jsx("span", { style: { fontSize: 10, color: '#6B7280', fontFamily: 'ui-monospace, monospace' }, children: formatDuration(asset.durationSec) })] })] })] }), ctxMenu && createPortal(_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 9998 }, onMouseDown: closeCtxMenu }), _jsx("div", { style: {
+                            position: 'fixed',
+                            top: ctxMenu.y,
+                            left: ctxMenu.x,
+                            zIndex: 9999,
+                            background: '#1E2433',
+                            border: '1px solid #2D3548',
+                            borderRadius: 6,
+                            padding: '4px 0',
+                            minWidth: 140,
+                            boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+                            fontFamily: 'sans-serif',
+                        }, children: _jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleDelete, style: {
+                                display: 'block',
+                                width: '100%',
+                                padding: '7px 14px',
+                                textAlign: 'left',
+                                background: 'none',
+                                border: 'none',
+                                color: '#FF6B6B',
+                                fontSize: 13,
+                                cursor: 'pointer',
+                                letterSpacing: '0.01em',
+                            }, onMouseEnter: (e) => {
+                                ;
+                                e.currentTarget.style.background = 'rgba(255,107,107,0.12)';
+                            }, onMouseLeave: (e) => {
+                                ;
+                                e.currentTarget.style.background = 'none';
+                            }, children: "Delete" }) })] }), document.body)] }));
+}
+export function AssetPanel({ style, className }) {
+    const { assets } = useMediaLibrary();
+    const removeAsset = useMediaLibraryStore((s) => s.removeAsset);
+    const fileInputRef = useRef(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [importing, setImporting] = useState(false);
+    const [toast, setToast] = useState(null);
+    const handleDeleteAsset = useCallback((id) => {
+        removeAsset(id);
+    }, [removeAsset]);
+    useEffect(() => {
+        if (!toast)
+            return;
+        const timer = globalThis.setTimeout(() => setToast(null), TOAST_DISMISS_MS);
+        return () => globalThis.clearTimeout(timer);
+    }, [toast]);
+    const handleFiles = useCallback(async (files) => {
+        const list = Array.from(files);
+        if (list.length === 0)
+            return;
+        setImporting(true);
+        try {
+            const { skipped } = await importFiles(list);
+            setToast(buildImportToast(skipped));
+        }
+        finally {
+            setImporting(false);
+        }
+    }, []);
+    const onBrowseClick = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    const onFileInputChange = useCallback((e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            void handleFiles(files);
+        }
+        e.target.value = '';
+    }, [handleFiles]);
+    const onDragOver = useCallback((e) => {
+        if (e.dataTransfer.types.includes('Files')) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+            setIsDragOver(true);
+        }
+    }, []);
+    const onDragLeave = useCallback((e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const onDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            void handleFiles(files);
+        }
+    }, [handleFiles]);
+    return (_jsxs("div", { className: className, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            background: 'transparent',
+            borderRight: 'none',
+            ...style,
+        }, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: "video/*,audio/*,image/*", style: { display: 'none' }, onChange: onFileInputChange, "data-testid": "asset-file-input" }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '10px 12px',
+                    borderBottom: '1px solid #232938',
+                    flexShrink: 0,
+                }, children: [_jsx("span", { style: { fontSize: 10, fontWeight: 700, color: '#6B7280', letterSpacing: '0.08em' }, children: "MEDIA" }), _jsx("button", { type: "button", onClick: onBrowseClick, disabled: importing, style: {
+                            padding: '4px 12px',
+                            fontSize: 11,
+                            fontWeight: 600,
+                            background: importing ? '#121722' : '#171D2B',
+                            color: importing ? '#6B7280' : '#E11D48',
+                            border: '1px solid #232938',
+                            borderRadius: 6,
+                            cursor: importing ? 'wait' : 'pointer',
+                        }, children: importing ? '…' : '+ Add' })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    overflow: 'auto',
+                    padding: 8,
+                    outline: isDragOver ? '2px dashed #E11D48' : 'none',
+                    outlineOffset: -4,
+                    borderRadius: 4,
+                    position: 'relative',
+                }, children: [toast && (_jsx("div", { role: "status", style: {
+                            position: 'absolute',
+                            top: 8,
+                            left: 8,
+                            right: 8,
+                            zIndex: 2,
+                            padding: '8px 10px',
+                            borderRadius: 6,
+                            fontSize: 10,
+                            fontFamily: 'monospace',
+                            lineHeight: 1.4,
+                            whiteSpace: 'pre-line',
+                            color: toast.tone === 'warn' ? '#f5d0a9' : '#c8d8f0',
+                            background: toast.tone === 'warn' ? '#3a2418' : '#1a2433',
+                            border: `1px solid ${toast.tone === 'warn' ? '#7a4a2a' : '#355070'}`,
+                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.35)',
+                        }, children: toast.message })), assets.length === 0 ? (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minHeight: 120,
+                            padding: 16,
+                            textAlign: 'center',
+                            color: '#6B7280',
+                            fontSize: 11,
+                            border: '1px dashed #232938',
+                            borderRadius: 8,
+                        }, children: [_jsx("span", { style: { marginBottom: 8, fontSize: 24, opacity: 0.5 }, children: "\u2193" }), "Drop files here", _jsx("br", {}), "or click Add"] })) : (_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 6,
+                        }, children: assets.map((asset) => (_jsx(AssetThumbnail, { asset: asset, onDelete: handleDeleteAsset }, asset.id))) }))] })] }));
+}

package/dist/editor/AssetPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { AssetPanel } from './AssetPanel';
+export type { AssetPanelProps } from './AssetPanel';

package/dist/editor/AssetPanel/index.js

@@ -0,0 +1 @@
+export { AssetPanel } from './AssetPanel';

package/dist/editor/EditorProvider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { InitialTrackConfig } from '@elah/core';
+export interface EditorProviderProps {
+    fps: number;
+    stage?: {
+        width: number;
+        height: number;
+    };
+    defaultTrackHeight?: number;
+    maxHistorySize?: number;
+    initialTracks?: InitialTrackConfig[];
+    children: ReactNode;
+}
+export declare function EditorProvider({ fps, stage, defaultTrackHeight, maxHistorySize, initialTracks, children, }: EditorProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/EditorProvider.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { TimelineEngine, PlaybackEngine, useTracksStore, usePlaybackStore, useTransitionsStore, EditorContext, installTraceGlobal, trace, } from '@elah/core';
+export function EditorProvider({ fps, stage, defaultTrackHeight, maxHistorySize, initialTracks, children, }) {
+    const engine = useMemo(() => new TimelineEngine({
+        fps,
+        stage,
+        defaultTrackHeight,
+        maxHistorySize,
+        initialTracks,
+    }), []);
+    const playback = useMemo(() => new PlaybackEngine({
+        fps,
+        getTotalFrames: () => useTracksStore.getState().totalFrames,
+    }), []);
+    useEffect(() => {
+        const syncAll = () => {
+            const project = engine.getProject();
+            useTracksStore.getState().sync(project, {
+                canUndo: engine.canUndo(),
+                canRedo: engine.canRedo(),
+            });
+            useTransitionsStore.getState().sync(project);
+        };
+        engine.on('change', syncAll);
+        engine.on('history:change', syncAll);
+        syncAll();
+        return () => {
+            engine.off('change', syncAll);
+            engine.off('history:change', syncAll);
+        };
+    }, [engine]);
+    useEffect(() => {
+        return playback.subscribe((snapshot) => {
+            const pb = usePlaybackStore.getState();
+            if (snapshot.currentFrame !== pb.currentFrame) {
+                pb.setCurrentFrame(snapshot.currentFrame);
+            }
+            if (snapshot.isPlaying && !pb.isPlaying)
+                pb.play();
+            else if (!snapshot.isPlaying && pb.isPlaying)
+                pb.pause();
+        });
+    }, [playback]);
+    useEffect(() => {
+        installTraceGlobal();
+        const s0 = usePlaybackStore.getState();
+        playback.setPlaybackRate(s0.playbackRate);
+        playback.setLoop(s0.loop);
+        if (s0.isPlaying)
+            playback.play();
+        return usePlaybackStore.subscribe((state, prev) => {
+            if (state.isPlaying !== prev.isPlaying) {
+                if (state.isPlaying)
+                    playback.play();
+                else
+                    playback.pause();
+            }
+            if (state.currentFrameEpoch !== prev.currentFrameEpoch) {
+                const willSeek = state.currentFrame !== playback.currentFrame;
+                trace('SEEK_GATE', {
+                    storeFrame: state.currentFrame,
+                    engineFrame: playback.currentFrame,
+                    willSeek,
+                });
+                if (willSeek)
+                    playback.seek(state.currentFrame);
+            }
+            if (state.playbackRate !== prev.playbackRate) {
+                playback.setPlaybackRate(state.playbackRate);
+            }
+            if (state.loop !== prev.loop) {
+                playback.setLoop(state.loop);
+            }
+        });
+    }, [playback]);
+    useEffect(() => () => playback.destroy(), [playback]);
+    const value = useMemo(() => ({ engine, playback }), [engine, playback]);
+    return (_jsx(EditorContext.Provider, { value: value, children: children }));
+}

package/dist/editor/ElementsPanel/ElementsPanel.d.ts

@@ -0,0 +1,6 @@
+import { type CSSProperties } from 'react';
+export interface ElementsPanelProps {
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function ElementsPanel({ style, className }: ElementsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/ElementsPanel/ElementsPanel.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { ELEMENT_DRAG_MIME } from '@elah/timeline';
+export function ElementsPanel({ style, className }) {
+    const onTextDragStart = useCallback((e) => {
+        const payload = { kind: 'element', element: 'text' };
+        e.dataTransfer.setData(ELEMENT_DRAG_MIME, JSON.stringify(payload));
+        e.dataTransfer.effectAllowed = 'copy';
+    }, []);
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            background: 'transparent',
+            borderBottom: '1px solid #232938',
+            ...style,
+        }, children: [_jsx("div", { style: {
+                    padding: '10px 12px',
+                    borderBottom: '1px solid #232938',
+                    flexShrink: 0,
+                }, children: _jsx("span", { style: {
+                        fontSize: 10,
+                        fontWeight: 700,
+                        color: '#6B7280',
+                        letterSpacing: '0.08em',
+                    }, children: "ELEMENTS" }) }), _jsx("div", { style: { padding: 10 }, children: _jsxs("div", { draggable: true, className: "elah-element-card", onDragStart: onTextDragStart, title: "Drag onto the Text track", style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 10,
+                        padding: '10px 12px',
+                        borderRadius: 8,
+                        cursor: 'grab',
+                        userSelect: 'none',
+                        background: '#171D2B',
+                        border: '1px solid #232938',
+                        transition: 'background 0.15s, border-color 0.15s',
+                    }, children: [_jsx("span", { style: {
+                                width: 32,
+                                height: 32,
+                                flexShrink: 0,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                borderRadius: 6,
+                                background: 'rgba(147, 51, 234, 0.25)',
+                                border: '1px solid rgba(147, 51, 234, 0.4)',
+                                color: '#C4B5FD',
+                                fontWeight: 700,
+                                fontFamily: 'Georgia, serif',
+                                fontSize: 17,
+                            }, children: "T" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }, children: [_jsx("span", { style: { fontSize: 12, color: '#F3F4F6', fontWeight: 500 }, children: "Text" }), _jsx("span", { style: { fontSize: 10, color: '#6B7280' }, children: "+ Drag onto timeline" })] })] }) })] }));
+}

package/dist/editor/ElementsPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { ElementsPanel } from './ElementsPanel';
+export type { ElementsPanelProps } from './ElementsPanel';

package/dist/editor/ElementsPanel/index.js

@@ -0,0 +1 @@
+export { ElementsPanel } from './ElementsPanel';

package/dist/editor/Preview/MediaTransformOverlay.d.ts

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