@elah/editor 0.2.1 → 0.3.0

package/dist/editor/AssetPanel/AssetPanel.js

@@ -1,16 +1,18 @@
 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';
+import { importFiles, importUrl, MEDIA_DRAG_MIME, mediaDragKindMime, useMediaLibrary, useMediaLibraryStore, } from '@elah/core';
+import { cn } from '@elah/timeline';
+import { isActivationKey, useAssetActivation, } from '../activation';
 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)' },
+const KIND_TOKEN = {
+    video: { label: 'VIDEO', fg: 'var(--elah-tag-video-fg)', bg: 'var(--elah-tag-video-bg)' },
+    audio: { label: 'AUDIO', fg: 'var(--elah-tag-audio-fg)', bg: 'var(--elah-tag-audio-bg)' },
+    image: { label: 'IMAGE', fg: 'var(--elah-tag-image-fg)', bg: 'var(--elah-tag-image-bg)' },
 };
 function formatDuration(sec) {
     if (!Number.isFinite(sec) || sec <= 0)
@@ -45,11 +47,12 @@ function buildImportToast(skipped) {
         tone: unsupported.length > 0 ? 'warn' : 'info',
     };
 }
-function AssetThumbnail({ asset, onDelete }) {
+function AssetThumbnail({ asset, onDelete, onActivate, }) {
     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.setData(mediaDragKindMime(asset.kind), '');
         e.dataTransfer.effectAllowed = 'copy';
     }, [asset.id]);
     const handleContextMenu = useCallback((e) => {
@@ -62,100 +65,55 @@ function AssetThumbnail({ asset, onDelete }) {
         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: {
+    const handleActivate = useCallback(() => onActivate?.(asset), [asset, onActivate]);
+    const handleActivateKey = useCallback((e) => {
+        if (!onActivate || !isActivationKey(e.key))
+            return;
+        e.preventDefault();
+        onActivate(asset);
+    }, [asset, onActivate]);
+    const tag = KIND_TOKEN[asset.kind];
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { draggable: true, role: onActivate ? 'button' : undefined, tabIndex: onActivate ? 0 : undefined, className: "elah-media-card flex items-center gap-[10px] px-[10px] py-2 rounded-md cursor-grab select-none bg-ed-card border border-ed-border transition-[background,border-color] duration-[150ms]", onDragStart: onDragStart, onClick: onActivate ? handleActivate : undefined, onKeyDown: onActivate ? handleActivateKey : undefined, onContextMenu: handleContextMenu, title: asset.name, children: [_jsx("div", { className: "relative shrink-0 bg-ed-bg rounded-sm border border-ed-border-subtle overflow-hidden", style: { width: THUMB_SIZE, height: THUMB_SIZE }, children: asset.thumbnailUrl ? (_jsx("img", { src: asset.thumbnailUrl, alt: "", draggable: false, className: "w-full h-full object-cover block" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-xl text-ed-text-muted", children: KIND_ICONS[asset.kind] })) }), _jsxs("div", { className: "flex flex-col gap-[3px] min-w-0", children: [_jsx("span", { className: "text-[11px] text-ed-text overflow-hidden text-ellipsis whitespace-nowrap", children: asset.name }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("span", { className: "text-[8px] font-bold tracking-[0.06em] px-[5px] py-[2px] rounded-sm", style: { color: tag.fg, background: tag.bg }, children: tag.label }), _jsx("span", { className: "text-[10px] text-ed-text-muted font-mono", children: formatDuration(asset.durationSec) })] })] })] }), ctxMenu && createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[9998]", onMouseDown: closeCtxMenu }), _jsx("div", { style: {
                             position: 'fixed',
                             top: ctxMenu.y,
                             left: ctxMenu.x,
                             zIndex: 9999,
-                            background: '#1E2433',
-                            border: '1px solid #2D3548',
-                            borderRadius: 6,
+                            background: 'var(--elah-bg-elevated)',
+                            border: '1px solid var(--elah-outline)',
+                            borderRadius: 'var(--elah-radius-sm)',
                             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) => {
+                            boxShadow: 'var(--elah-menu-shadow, 0 8px 24px rgba(0,0,0,0.5))',
+                            fontFamily: 'var(--elah-font-ui)',
+                        }, children: _jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleDelete, className: "block w-full px-[14px] py-[7px] text-left bg-transparent border-none text-ed-error text-[13px] cursor-pointer tracking-[0.01em]", onMouseEnter: (e) => {
                                 ;
-                                e.currentTarget.style.background = 'rgba(255,107,107,0.12)';
+                                e.currentTarget.style.background = 'color-mix(in srgb, var(--elah-color-error) 12%, transparent)';
                             }, onMouseLeave: (e) => {
                                 ;
                                 e.currentTarget.style.background = 'none';
                             }, children: "Delete" }) })] }), document.body)] }));
 }
-export function AssetPanel({ style, className }) {
+export function AssetPanel({ style, className, activateOnTap, onAssetActivate, }) {
     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 [urlInputOpen, setUrlInputOpen] = useState(false);
+    const [urlValue, setUrlValue] = useState('');
+    const activationEnabled = activateOnTap === true || Boolean(onAssetActivate);
+    const activateAsset = useAssetActivation({
+        activateOnTap,
+        onAssetActivate,
+        setToast,
+    });
     const handleDeleteAsset = useCallback((id) => {
         removeAsset(id);
     }, [removeAsset]);
+    const handleAssetActivate = useCallback((asset) => {
+        void activateAsset({ kind: 'media-asset', asset });
+    }, [activateAsset]);
     useEffect(() => {
         if (!toast)
             return;
@@ -175,6 +133,36 @@ export function AssetPanel({ style, className }) {
             setImporting(false);
         }
     }, []);
+    const handleImportUrl = useCallback(async () => {
+        const url = urlValue.trim();
+        if (!url)
+            return;
+        setImporting(true);
+        try {
+            await importUrl(url);
+            setUrlValue('');
+            setUrlInputOpen(false);
+        }
+        catch (err) {
+            setToast({
+                message: `Failed to import URL: ${err instanceof Error ? err.message : String(err)}`,
+                tone: 'warn',
+            });
+        }
+        finally {
+            setImporting(false);
+        }
+    }, [urlValue]);
+    const onUrlKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            void handleImportUrl();
+        }
+        else if (e.key === 'Escape') {
+            setUrlInputOpen(false);
+            setUrlValue('');
+        }
+    }, [handleImportUrl]);
     const onBrowseClick = useCallback(() => {
         fileInputRef.current?.click();
     }, []);
@@ -205,68 +193,51 @@ export function AssetPanel({ style, className }) {
             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',
+    return (_jsxs("div", { className: cn('flex flex-col h-full bg-transparent', className), onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: style, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: "video/*,audio/*,image/*", className: "hidden", onChange: onFileInputChange, "data-testid": "asset-file-input" }), _jsxs("div", { className: "flex items-center justify-between px-3 py-[10px] border-b border-ed-border shrink-0", children: [_jsx("span", { className: "text-[10px] font-bold text-ed-text-muted tracking-[0.08em]", children: "MEDIA" }), _jsxs("div", { className: "flex gap-[6px]", children: [_jsx("button", { type: "button", onClick: () => setUrlInputOpen((open) => !open), disabled: importing, "data-testid": "asset-url-toggle", style: {
+                                    padding: '4px 12px',
+                                    fontSize: 11,
+                                    fontWeight: 600,
+                                    background: urlInputOpen ? 'var(--elah-bg-elevated)' : 'var(--elah-bg-card)',
+                                    color: importing ? 'var(--elah-text-muted)' : 'var(--elah-accent)',
+                                    border: '1px solid var(--elah-border)',
+                                    borderRadius: 'var(--elah-radius-sm)',
+                                    cursor: importing ? 'wait' : 'pointer',
+                                }, children: "+ URL" }), _jsx("button", { type: "button", onClick: onBrowseClick, disabled: importing, style: {
+                                    padding: '4px 12px',
+                                    fontSize: 11,
+                                    fontWeight: 600,
+                                    background: importing ? 'var(--elah-bg-panel)' : 'var(--elah-bg-card)',
+                                    color: importing ? 'var(--elah-text-muted)' : 'var(--elah-accent)',
+                                    border: '1px solid var(--elah-border)',
+                                    borderRadius: 'var(--elah-radius-sm)',
+                                    cursor: importing ? 'wait' : 'pointer',
+                                }, children: importing ? '…' : '+ Add' })] })] }), urlInputOpen && (_jsxs("div", { className: "flex gap-[6px] px-3 py-2 border-b border-ed-border shrink-0", children: [_jsx("input", { type: "url", value: urlValue, onChange: (e) => setUrlValue(e.target.value), onKeyDown: onUrlKeyDown, placeholder: "https://\u2026/media.mp4", autoFocus: true, "data-testid": "asset-url-input", style: {
+                            flex: 1,
+                            minWidth: 0,
+                            padding: '5px 8px',
+                            fontSize: 11,
+                            fontFamily: 'var(--elah-font-mono)',
+                            color: 'var(--elah-text)',
+                            background: 'var(--elah-bg)',
+                            border: '1px solid var(--elah-border)',
+                            borderRadius: 'var(--elah-radius-sm)',
+                            outline: 'none',
+                        } }), _jsx("button", { type: "button", onClick: () => void handleImportUrl(), disabled: importing || urlValue.trim().length === 0, style: {
+                            padding: '5px 12px',
                             fontSize: 11,
                             fontWeight: 600,
-                            background: importing ? '#121722' : '#171D2B',
-                            color: importing ? '#6B7280' : '#E11D48',
-                            border: '1px solid #232938',
-                            borderRadius: 6,
+                            background: 'var(--elah-bg-card)',
+                            color: importing || urlValue.trim().length === 0 ? 'var(--elah-text-muted)' : 'var(--elah-accent)',
+                            border: '1px solid var(--elah-border)',
+                            borderRadius: 'var(--elah-radius-sm)',
                             cursor: importing ? 'wait' : 'pointer',
-                        }, children: importing ? '…' : '+ Add' })] }), _jsxs("div", { style: {
-                    flex: 1,
-                    overflow: 'auto',
-                    padding: 8,
-                    outline: isDragOver ? '2px dashed #E11D48' : 'none',
+                        }, children: "Add" })] })), _jsxs("div", { className: "flex-1 overflow-auto p-2 relative rounded", style: {
+                    outline: isDragOver ? '2px dashed var(--elah-accent)' : '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'}`,
+                }, children: [toast && (_jsx("div", { role: "status", className: "absolute top-2 left-2 right-2 z-[2] px-[10px] py-2 rounded-sm text-[10px] font-mono leading-[1.4] whitespace-pre-line", style: {
+                            color: toast.tone === 'warn' ? 'var(--elah-danger-text, #f5d0a9)' : 'var(--elah-info-text, #c8d8f0)',
+                            background: toast.tone === 'warn' ? 'var(--elah-danger-bg, #3a2418)' : 'var(--elah-info-bg, #1a2433)',
+                            border: `1px solid ${toast.tone === 'warn' ? 'var(--elah-danger-border, #7a4a2a)' : 'var(--elah-info-border, #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))) }))] })] }));
+                        }, children: toast.message })), assets.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center min-h-[120px] p-4 text-center text-ed-text-muted text-[11px] border border-dashed border-ed-border rounded-md", children: [_jsx("span", { className: "mb-2 text-2xl opacity-50", children: "\u2193" }), "Drop files here", _jsx("br", {}), "or click Add"] })) : (_jsx("div", { className: "flex flex-col gap-[6px]", children: assets.map((asset) => (_jsx(AssetThumbnail, { asset: asset, onDelete: handleDeleteAsset, onActivate: activationEnabled ? handleAssetActivate : undefined }, asset.id))) }))] })] }));
 }

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

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

package/dist/editor/ElementsPanel/ElementsPanel.js

@@ -1,51 +1,92 @@
 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' };
+import { useCallback, useEffect, useState } from 'react';
+import { ELEMENT_DRAG_MIME, cn } from '@elah/timeline';
+import { isActivationKey, useAssetActivation, } from '../activation';
+const ShapeRect = () => (_jsx("svg", { viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", children: _jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }) }));
+const ShapeCircle = () => (_jsx("svg", { viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("circle", { cx: "12", cy: "12", r: "9" }) }));
+const ShapeTriangle = () => (_jsx("svg", { viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", children: _jsx("polygon", { points: "12,3 22,21 2,21" }) }));
+const FreehandIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 17c3-3 5-7 8-7s4 4 7 1" }), _jsx("path", { d: "M17 11l2 2-2 2" })] }));
+const TILES = [
+    {
+        element: 'text',
+        label: 'Text',
+        icon: 'T',
+        iconStyle: {
+            background: 'var(--elah-tag-text-bg)',
+            border: '1px solid var(--elah-tag-text-border)',
+            color: 'var(--elah-tag-text-fg)',
+            fontFamily: 'Georgia, serif',
+            fontWeight: 700,
+            fontSize: 17,
+        },
+    },
+    {
+        element: 'shape',
+        shapeVariant: 'rect',
+        label: 'Rectangle',
+        icon: _jsx(ShapeRect, {}),
+        iconStyle: {
+            background: 'var(--elah-tag-shape-bg)',
+            border: '1px solid var(--elah-tag-shape-border)',
+            color: 'var(--elah-tag-shape-fg)',
+        },
+    },
+    {
+        element: 'shape',
+        shapeVariant: 'circle',
+        label: 'Circle',
+        icon: _jsx(ShapeCircle, {}),
+        iconStyle: {
+            background: 'var(--elah-tag-shape-bg)',
+            border: '1px solid var(--elah-tag-shape-border)',
+            color: 'var(--elah-tag-shape-fg)',
+        },
+    },
+    {
+        element: 'shape',
+        shapeVariant: 'triangle',
+        label: 'Triangle',
+        icon: _jsx(ShapeTriangle, {}),
+        iconStyle: {
+            background: 'var(--elah-tag-shape-bg)',
+            border: '1px solid var(--elah-tag-shape-border)',
+            color: 'var(--elah-tag-shape-fg)',
+        },
+    },
+];
+const TOAST_DISMISS_MS = 3000;
+export function ElementsPanel({ style, className, activateOnTap, onAssetActivate, }) {
+    const [toast, setToast] = useState(null);
+    const activationEnabled = activateOnTap === true || Boolean(onAssetActivate);
+    const activateAsset = useAssetActivation({
+        activateOnTap,
+        onAssetActivate,
+        setToast,
+    });
+    useEffect(() => {
+        if (!toast)
+            return;
+        const timer = globalThis.setTimeout(() => setToast(null), TOAST_DISMISS_MS);
+        return () => globalThis.clearTimeout(timer);
+    }, [toast]);
+    const makeDragStart = useCallback((element, shapeVariant) => (e) => {
+        const payload = { kind: 'element', element, shapeVariant };
         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" })] })] }) })] }));
+    const handleElementActivate = useCallback((element, shapeVariant, label) => {
+        void activateAsset({ kind: 'element', element, shapeVariant, label });
+    }, [activateAsset]);
+    return (_jsxs("div", { className: cn('flex flex-col bg-transparent', className), style: style, children: [_jsx("div", { className: "px-3 py-[10px] border-b border-ed-border shrink-0", children: _jsx("span", { className: "text-[10px] font-bold text-ed-text-muted tracking-[0.08em]", children: "ELEMENTS" }) }), toast && (_jsx("div", { role: "status", className: "mx-[10px] mt-[10px] rounded-sm px-[10px] py-2 text-[10px] font-mono leading-[1.4]", style: {
+                    color: toast.tone === 'warn' ? 'var(--elah-danger-text, #f5d0a9)' : 'var(--elah-info-text, #c8d8f0)',
+                    background: toast.tone === 'warn' ? 'var(--elah-danger-bg, #3a2418)' : 'var(--elah-info-bg, #1a2433)',
+                    border: `1px solid ${toast.tone === 'warn' ? 'var(--elah-danger-border, #7a4a2a)' : 'var(--elah-info-border, #355070)'}`,
+                }, children: toast.message })), _jsx("div", { className: "p-[10px] grid grid-cols-2 gap-[6px]", children: TILES.map(({ element, shapeVariant, label, icon, iconStyle }) => (_jsxs("div", { draggable: true, role: activationEnabled ? 'button' : undefined, tabIndex: activationEnabled ? 0 : undefined, className: "elah-element-card flex flex-col items-center justify-center gap-[6px] px-2 py-3 rounded-md cursor-grab select-none bg-ed-card border border-ed-border transition-[background,border-color] duration-[150ms] min-h-[72px]", onDragStart: makeDragStart(element, shapeVariant), onClick: activationEnabled ? () => handleElementActivate(element, shapeVariant, label) : undefined, onKeyDown: activationEnabled
+                        ? (e) => {
+                            if (!isActivationKey(e.key))
+                                return;
+                            e.preventDefault();
+                            handleElementActivate(element, shapeVariant, label);
+                        }
+                        : undefined, title: `Drag ${label} onto the elements track`, children: [_jsx("span", { className: "w-8 h-8 shrink-0 flex items-center justify-center rounded-sm", style: iconStyle, children: icon }), _jsx("span", { className: "text-[11px] text-ed-text font-medium", children: label })] }, shapeVariant ? `${element}-${shapeVariant}` : element))) })] }));
 }

package/dist/editor/Preview/MediaTransformOverlay.js

@@ -140,7 +140,7 @@ export function MediaTransformOverlay() {
             startDist: Math.hypot(e.clientX - centerClientX, e.clientY - centerClientY),
         };
     }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
-    return (_jsxs("div", { ref: rootRef, style: { position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', overflow: 'hidden' }, children: [!isPlaying && ownsSelection && (_jsx("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'auto' }, onPointerDown: () => clearSelection() })), !isPlaying &&
+    return (_jsxs("div", { ref: rootRef, className: "absolute inset-0 z-[2] pointer-events-none overflow-hidden", children: [!isPlaying && ownsSelection && (_jsx("div", { className: "absolute inset-0 pointer-events-auto", onPointerDown: () => clearSelection() })), !isPlaying &&
                 items.map((item) => {
                     const { clip, rect } = item;
                     const selected = selectedClipIds.has(clip.id);
@@ -151,7 +151,7 @@ export function MediaTransformOverlay() {
                         width: rect.width + BOX_PAD * 2,
                         height: rect.height + BOX_PAD * 2,
                         boxSizing: 'border-box',
-                        border: selected ? '1px solid #4c9aff' : '1px solid transparent',
+                        border: selected ? '1px solid var(--elah-selection-color, #4c9aff)' : '1px solid transparent',
                         borderRadius: 2,
                         cursor: 'move',
                         pointerEvents: 'auto',
@@ -163,8 +163,8 @@ export function MediaTransformOverlay() {
                                     ...corner.pos,
                                     width: 10,
                                     height: 10,
-                                    background: '#fff',
-                                    border: '1px solid #4c9aff',
+                                    background: 'var(--elah-selection-handle, #fff)',
+                                    border: '1px solid var(--elah-selection-color, #4c9aff)',
                                     borderRadius: 2,
                                     cursor: corner.cursor,
                                     pointerEvents: 'auto',

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

@@ -1,6 +1,7 @@
 import { type CSSProperties } from 'react';
 import { GpuRenderer } from '@elah/core';
 import type { DemuxerFactory } from '@elah/core';
+import type { AudioResolver } from '@elah/core';
 export interface PreviewHandle {
     getCanvas(): HTMLCanvasElement | null;
     getRenderer(): GpuRenderer | null;
@@ -12,6 +13,7 @@ export interface PreviewProps {
     clearColor?: [number, number, number, number];
     preserveDrawingBuffer?: boolean;
     enableAudio?: boolean;
+    audioResolver?: AudioResolver;
     style?: CSSProperties;
     className?: string;
 }

package/dist/editor/Preview/Preview.js

@@ -3,12 +3,14 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
 import { GpuRenderer } from '@elah/core';
 import { resolveTimeline } from '@elah/core';
 import { useTimelineEngine, usePlaybackEngine } from '@elah/core';
-import { AudioPlaybackController } from '@elah/core';
+import { AudioPlaybackController, useMediaLibraryStore, preloadProjectImages, warmImageSrc } from '@elah/core';
+import { cn } from '@elah/timeline';
 import { TextOverlay } from './TextOverlay';
+import { ShapeOverlay } from './ShapeOverlay';
 import { MediaTransformOverlay } from './MediaTransformOverlay';
 import { TransitionOverlay } from './TransitionOverlay';
 import { StageBorder } from './StageBorder';
-export const Preview = forwardRef(function Preview({ demuxerFactory, debug = false, probeLayer = false, clearColor, preserveDrawingBuffer, enableAudio = true, style, className, }, ref) {
+export const Preview = forwardRef(function Preview({ demuxerFactory, debug = false, probeLayer = false, clearColor, preserveDrawingBuffer, enableAudio = true, audioResolver, style, className, }, ref) {
     const containerRef = useRef(null);
     const rendererRef = useRef(null);
     const transitionOverlayRef = useRef(null);
@@ -39,34 +41,58 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
         observer.observe(container);
         resize();
         const audio = enableAudio
-            ? new AudioPlaybackController(playback, () => engine.getProject())
+            ? new AudioPlaybackController(playback, () => engine.getProject(), { audioResolver })
             : null;
         audio?.start();
+        let warmAudio = null;
+        const warmImages = () => preloadProjectImages(engine.getProject());
+        warmImages();
+        engine.on('change', warmImages);
+        if (audio) {
+            warmAudio = () => audio.preloadProjectAudio();
+            warmAudio();
+            engine.on('change', warmAudio);
+        }
+        const warmedAssetIds = new Set();
+        const unsubMediaLibrary = useMediaLibraryStore.subscribe((state) => {
+            for (const id of state.order) {
+                if (warmedAssetIds.has(id))
+                    continue;
+                warmedAssetIds.add(id);
+                const asset = state.assets[id];
+                if (asset?.kind === 'audio')
+                    audio?.warmAudioSrc(asset.src);
+                else if (asset?.kind === 'image')
+                    warmImageSrc(asset.src);
+            }
+        });
         let rafId = 0;
+        const PREWARM_HORIZON_FRAMES = 30;
         const tick = () => {
             const frame = Math.floor(playback.getFrameAt());
-            const scene = resolveTimeline(frame, engine.getProject());
+            const project = engine.getProject();
+            const scene = resolveTimeline(frame, project);
             const canvas = renderer.getCanvas();
             if (canvas)
                 transitionOverlayRef.current?.captureIfNewTransition(scene, canvas);
             renderer.render(scene);
             transitionOverlayRef.current?.update(scene);
+            const prewarmScene = resolveTimeline(frame + PREWARM_HORIZON_FRAMES, project);
+            renderer.prewarm(prewarmScene);
             rafId = requestAnimationFrame(tick);
         };
         rafId = requestAnimationFrame(tick);
         return () => {
             cancelAnimationFrame(rafId);
             observer.disconnect();
+            if (warmAudio)
+                engine.off('change', warmAudio);
+            engine.off('change', warmImages);
+            unsubMediaLibrary();
             audio?.destroy();
             renderer.dispose();
             rendererRef.current = null;
         };
-    }, [engine, playback, demuxerFactory, debug, probeLayer, preserveDrawingBuffer, enableAudio]);
-    return (_jsxs("div", { ref: containerRef, className: className, style: {
-            position: 'relative',
-            width: '100%',
-            height: '100%',
-            background: '#06070A',
-            ...style,
-        }, children: [_jsx(StageBorder, {}), _jsx(TransitionOverlay, { ref: transitionOverlayRef }), _jsx(MediaTransformOverlay, {}), _jsx(TextOverlay, {})] }));
+    }, [engine, playback, demuxerFactory, debug, probeLayer, preserveDrawingBuffer, enableAudio, audioResolver]);
+    return (_jsxs("div", { ref: containerRef, className: cn('relative w-full h-full bg-[var(--elah-preview-bg,#06070A)]', className), style: style, children: [_jsx(StageBorder, {}), _jsx(TransitionOverlay, { ref: transitionOverlayRef }), _jsx(MediaTransformOverlay, {}), _jsx(ShapeOverlay, {}), _jsx(TextOverlay, {})] }));
 });

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

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