@elah/editor 0.4.1 → 1.0.0

package/dist/editor/Preview/ShapeOverlay.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { computeContainViewport } from '@elah/core';
-import { useTimelineEngine, useSelectionStore, usePlaybackStore, } from '@elah/react';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore } from '@elah/react';
 import { useResolvedScene } from '../useResolvedScene';
 const DEFAULT_SCALE = 0.5;
 const DEFAULT_CENTER = 0.5;
@@ -17,9 +17,11 @@ function baseTransform(t) {
         scale: t?.scale ?? DEFAULT_SCALE,
         rotation: t?.rotation ?? 0,
         anchor: t?.anchor ?? { x: 0.5, y: 0.5 },
+        scaleX: t?.scaleX ?? 1,
+        scaleY: t?.scaleY ?? 1,
     };
 }
-export function ShapeOverlay() {
+export const ShapeOverlay = memo(function ShapeOverlay() {
     const engine = useTimelineEngine();
     const scene = useResolvedScene();
     const isPlaying = usePlaybackStore((s) => s.isPlaying);
@@ -48,14 +50,17 @@ export function ShapeOverlay() {
         const shortSide = Math.min(stage.width, stage.height);
         return scene.shapes.map((clip) => {
             const t = baseTransform(clip.transform);
-            const sideStage = t.scale * shortSide;
+            const baseSideStage = t.scale * shortSide;
+            const widthStage = baseSideStage * (t.scaleX ?? 1);
+            const heightStage = baseSideStage * (t.scaleY ?? 1);
             const cxStage = t.x * stage.width;
             const cyStage = t.y * stage.height;
             const centerScreenX = fit.x + cxStage * scale;
             const centerScreenY = fit.y + cyStage * scale;
-            const rawSide = sideStage * scale;
-            const w = Math.max(rawSide, MIN_BOX_PX);
-            const h = Math.max(rawSide, MIN_BOX_PX);
+            const rawW = widthStage * scale;
+            const rawH = heightStage * scale;
+            const w = Math.max(rawW, MIN_BOX_PX);
+            const h = Math.max(rawH, MIN_BOX_PX);
             const left = centerScreenX - w / 2;
             const top = centerScreenY - h / 2;
             return {
@@ -67,6 +72,13 @@ export function ShapeOverlay() {
         });
     }, [scene.shapes, stage.width, stage.height, fit, scale]);
     const ownsSelection = useMemo(() => items.some((it) => selectedClipIds.has(it.clip.id)), [items, selectedClipIds]);
+    const readAuthored = useCallback((clip) => {
+        const found = engine.findClip(clip.id);
+        if (!found) {
+            return { trackId: clip.trackId, base: baseTransform(clip.transform) };
+        }
+        return { trackId: found.trackId, base: baseTransform(found.clip.transform) };
+    }, [engine]);
     const handlePointerMove = useCallback((e) => {
         const g = gestureRef.current;
         if (!g)
@@ -79,10 +91,37 @@ export function ShapeOverlay() {
             engine.previewClip(g.id, g.trackId, { transform: { ...g.base, x, y } });
         }
         else {
-            const dist = Math.hypot(e.clientX - g.centerClientX, e.clientY - g.centerClientY);
-            const ratio = g.startDist > 0 ? dist / g.startDist : 1;
-            const next = clamp(g.base.scale * ratio, MIN_SCALE, MAX_SCALE);
-            engine.previewClip(g.id, g.trackId, { transform: { ...g.base, scale: next } });
+            const h = g.handle;
+            const halfW0 = g.halfW0;
+            const halfH0 = g.halfH0;
+            const dxStage = (e.clientX - g.startClientX) / scale;
+            const dyStage = (e.clientY - g.startClientY) / scale;
+            const shortSide = Math.min(g.stageW, g.stageH);
+            const minHalf = (MIN_SCALE * shortSide) / 2;
+            const maxHalf = (MAX_SCALE * shortSide) / 2;
+            let newHalfW = h.sx !== 0 ? clamp(halfW0 + h.sx * dxStage, minHalf, maxHalf) : halfW0;
+            let newHalfH = h.sy !== 0 ? clamp(halfH0 + h.sy * dyStage, minHalf, maxHalf) : halfH0;
+            if (e.shiftKey) {
+                const ratioW = newHalfW / halfW0;
+                const ratioH = newHalfH / halfH0;
+                const ratio = h.sx !== 0 && h.sy !== 0 ? Math.max(ratioW, ratioH) : h.sx !== 0 ? ratioW : ratioH;
+                newHalfW = clamp(halfW0 * ratio, minHalf, maxHalf);
+                newHalfH = clamp(halfH0 * ratio, minHalf, maxHalf);
+            }
+            const centerX = g.anchorStageX + h.sx * newHalfW;
+            const centerY = g.anchorStageY + h.sy * newHalfH;
+            const baseHalf = (g.base.scale * shortSide) / 2;
+            const scaleX = newHalfW / Math.max(1, baseHalf);
+            const scaleY = newHalfH / Math.max(1, baseHalf);
+            engine.previewClip(g.id, g.trackId, {
+                transform: {
+                    ...g.base,
+                    x: centerX / g.stageW,
+                    y: centerY / g.stageH,
+                    scaleX,
+                    scaleY,
+                },
+            });
         }
     }, [engine, scale]);
     const endGesture = useCallback((e) => {
@@ -101,42 +140,45 @@ export function ShapeOverlay() {
         if (!selectedClipIds.has(item.clip.id))
             selectClip(item.clip.id);
         e.currentTarget.setPointerCapture(e.pointerId);
+        const authored = readAuthored(item.clip);
         gestureRef.current = {
             type: 'move',
             id: item.clip.id,
-            trackId: item.clip.trackId,
-            base: baseTransform(item.clip.transform),
+            trackId: authored.trackId,
+            base: authored.base,
             stageW: stage.width,
             stageH: stage.height,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            centerClientX: 0,
-            centerClientY: 0,
-            startDist: 0,
         };
-    }, [selectedClipIds, selectClip, stage.width, stage.height]);
-    const beginResize = useCallback((e, item) => {
+    }, [selectedClipIds, selectClip, stage.width, stage.height, readAuthored]);
+    const beginResize = useCallback((e, item, handle) => {
         e.stopPropagation();
         if (!selectedClipIds.has(item.clip.id))
             selectClip(item.clip.id);
         e.currentTarget.setPointerCapture(e.pointerId);
-        const rootRect = rootRef.current?.getBoundingClientRect();
-        const centerClientX = (rootRect?.left ?? 0) + item.centerScreenX;
-        const centerClientY = (rootRect?.top ?? 0) + item.centerScreenY;
+        const { trackId, base } = readAuthored(item.clip);
+        const shortSide = Math.min(stage.width, stage.height);
+        const halfW0 = (base.scale * shortSide * (base.scaleX ?? 1)) / 2;
+        const halfH0 = (base.scale * shortSide * (base.scaleY ?? 1)) / 2;
+        const centerX = base.x * stage.width;
+        const centerY = base.y * stage.height;
         gestureRef.current = {
             type: 'resize',
             id: item.clip.id,
-            trackId: item.clip.trackId,
-            base: baseTransform(item.clip.transform),
+            trackId,
+            base,
             stageW: stage.width,
             stageH: stage.height,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            centerClientX,
-            centerClientY,
-            startDist: Math.hypot(e.clientX - centerClientX, e.clientY - centerClientY),
+            handle: { sx: handle.sx, sy: handle.sy },
+            anchorStageX: centerX - handle.sx * halfW0,
+            anchorStageY: centerY - handle.sy * halfH0,
+            halfW0,
+            halfH0,
         };
-    }, [selectedClipIds, selectClip, stage.width, stage.height]);
+    }, [selectedClipIds, selectClip, stage.width, stage.height, readAuthored]);
     return (_jsxs("div", { ref: rootRef, className: "absolute inset-0 z-[3] 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;
@@ -157,23 +199,27 @@ export function ShapeOverlay() {
                         touchAction: 'none',
                     };
                     return (_jsx("div", { style: boxStyle, onPointerDown: (e) => beginMove(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, children: selected &&
-                            CORNERS.map((corner) => (_jsx("div", { onPointerDown: (e) => beginResize(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
+                            HANDLES.map((handle) => (_jsx("div", { onPointerDown: (e) => beginResize(e, item, handle), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
                                     position: 'absolute',
-                                    ...corner.pos,
+                                    ...handle.pos,
                                     width: 10,
                                     height: 10,
                                     background: 'var(--elah-selection-handle, #fff)',
                                     border: '1px solid var(--elah-selection-color, #4c9aff)',
                                     borderRadius: 2,
-                                    cursor: corner.cursor,
+                                    cursor: handle.cursor,
                                     pointerEvents: 'auto',
                                     touchAction: 'none',
-                                } }, corner.key))) }, clip.id));
+                                } }, handle.key))) }, clip.id));
                 })] }));
-}
-const CORNERS = [
-    { key: 'nw', pos: { left: -5, top: -5 }, cursor: 'nwse-resize' },
-    { key: 'ne', pos: { right: -5, top: -5 }, cursor: 'nesw-resize' },
-    { key: 'sw', pos: { left: -5, bottom: -5 }, cursor: 'nesw-resize' },
-    { key: 'se', pos: { right: -5, bottom: -5 }, cursor: 'nwse-resize' },
+});
+const HANDLES = [
+    { key: 'nw', sx: -1, sy: -1, pos: { left: -5, top: -5 }, cursor: 'nwse-resize' },
+    { key: 'n', sx: 0, sy: -1, pos: { left: '50%', top: -5, transform: 'translateX(-50%)' }, cursor: 'ns-resize' },
+    { key: 'ne', sx: 1, sy: -1, pos: { right: -5, top: -5 }, cursor: 'nesw-resize' },
+    { key: 'e', sx: 1, sy: 0, pos: { right: -5, top: '50%', transform: 'translateY(-50%)' }, cursor: 'ew-resize' },
+    { key: 'se', sx: 1, sy: 1, pos: { right: -5, bottom: -5 }, cursor: 'nwse-resize' },
+    { key: 's', sx: 0, sy: 1, pos: { left: '50%', bottom: -5, transform: 'translateX(-50%)' }, cursor: 'ns-resize' },
+    { key: 'sw', sx: -1, sy: 1, pos: { left: -5, bottom: -5 }, cursor: 'nesw-resize' },
+    { key: 'w', sx: -1, sy: 0, pos: { left: -5, top: '50%', transform: 'translateY(-50%)' }, cursor: 'ew-resize' },
 ];

package/dist/editor/Preview/StageBorder.js

@@ -23,8 +23,8 @@ export function StageBorder() {
                 top: fit.y,
                 width: fit.width,
                 height: fit.height,
-                border: '1px solid var(--elah-stage-border, rgba(225, 29, 72, 0.45))',
-                boxShadow: 'var(--elah-stage-glow, 0 0 20px rgba(225, 29, 72, 0.08))',
+                border: '1px solid var(--elah-stage-border, rgba(0, 194, 255, 0.45))',
+                boxShadow: 'var(--elah-stage-glow, 0 0 20px rgba(0, 194, 255, 0.08))',
                 boxSizing: 'border-box',
             } })) }));
 }

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

@@ -1 +1 @@
-export declare function TextOverlay(): import("react/jsx-runtime").JSX.Element;
+export declare const TextOverlay: import("react").NamedExoticComponent<object>;

package/dist/editor/Preview/TextOverlay.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { computeTextLayout, computeContainViewport, SIDE_MARGIN, } from '@elah/core';
-import { useTimelineEngine, useSelectionStore, usePlaybackStore, } from '@elah/react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { computeTextLayout, computeContainViewport, SIDE_MARGIN } from '@elah/core';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore } from '@elah/react';
 import { useResolvedScene } from '../useResolvedScene';
 const MIN_FONT_SIZE = 6;
 const MAX_FONT_SIZE = 4000;
 const MIN_BOX_PX = 28;
 const BOX_PAD = 4;
+const ROTATE_STEM_PX = 20;
+const ROTATE_KNOB_PX = 14;
+const ROTATE_SNAP_STEP = Math.PI / 12;
+const ROTATE_SNAP_EPS = Math.PI / 60;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const clamp01 = (v) => clamp(v, 0, 1);
 function makeTransform(x, y, base) {
@@ -18,7 +22,11 @@ function makeTransform(x, y, base) {
         anchor: base?.anchor ?? { x: 0.5, y: 0.5 },
     };
 }
-export function TextOverlay() {
+function unscaleFontSize(layout, resolved) {
+    const s = resolved?.scale ?? 1;
+    return s > 0 ? layout.style.fontSize / s : layout.style.fontSize;
+}
+export const TextOverlay = memo(function TextOverlay() {
     const engine = useTimelineEngine();
     const scene = useResolvedScene();
     const isPlaying = usePlaybackStore((s) => s.isPlaying);
@@ -60,16 +68,45 @@ export function TextOverlay() {
         return scene.texts.map((clip) => {
             const layout = computeTextLayout(measurer, clip, stage);
             const centerScreenX = fit.x + layout.center.x * stage.width * scale;
+            const centerScreenY = fit.y + layout.center.y * stage.height * scale;
             const rawLeft = fit.x + layout.box.x * scale;
             const rawW = layout.box.width * scale;
             const w = Math.max(rawW, MIN_BOX_PX);
             const left = rawW < MIN_BOX_PX ? centerScreenX - w / 2 : rawLeft;
             const h = Math.max(layout.box.height * scale, MIN_BOX_PX);
             const top = fit.y + layout.box.y * scale;
-            return { clip, layout, centerScreenX, rect: { left, top, width: w, height: h } };
+            const rotation = clip.transform?.rotation ?? 0;
+            return {
+                clip,
+                layout,
+                centerScreenX,
+                centerScreenY,
+                rotation,
+                rect: { left, top, width: w, height: h },
+            };
         });
     }, [scene.texts, stage, fit, scale, getMeasurer]);
     const ownsSelection = useMemo(() => items.some((it) => selectedClipIds.has(it.clip.id)), [items, selectedClipIds]);
+    const readAuthored = useCallback((clip, layout) => {
+        const found = engine.findClip(clip.id);
+        if (!found) {
+            return {
+                trackId: clip.trackId,
+                transform: clip.transform,
+                center: { ...layout.center },
+                fontSize: layout.style.fontSize,
+            };
+        }
+        const authored = found.clip;
+        return {
+            trackId: found.trackId,
+            transform: authored.transform,
+            center: authored.transform
+                ? { x: authored.transform.x, y: authored.transform.y }
+                : { x: 0.5, y: 0.5 },
+            fontSize: authored.fontSize ?? unscaleFontSize(layout, clip.transform),
+        };
+    }, [engine]);
     const handlePointerMove = useCallback((e) => {
         const g = gestureRef.current;
         if (!g)
@@ -83,12 +120,30 @@ export function TextOverlay() {
                 transform: makeTransform(nx, ny, g.startTransform),
             });
         }
-        else {
+        else if (g.type === 'resize') {
             const dist = Math.hypot(e.clientX - g.centerClientX, e.clientY - g.centerClientY);
             const ratio = g.startDist > 0 ? dist / g.startDist : 1;
             const fontSize = clamp(Math.round(g.startFontSize * ratio), MIN_FONT_SIZE, MAX_FONT_SIZE);
             engine.previewClip(g.id, g.trackId, { fontSize });
         }
+        else {
+            const angle = Math.atan2(e.clientY - g.centerClientY, e.clientX - g.centerClientX);
+            let rotation = g.startRotation + (angle - g.startAngle);
+            if (e.shiftKey) {
+                rotation = Math.round(rotation / ROTATE_SNAP_STEP) * ROTATE_SNAP_STEP;
+            }
+            else {
+                const nearest = Math.round(rotation / (Math.PI / 2)) * (Math.PI / 2);
+                if (Math.abs(rotation - nearest) < ROTATE_SNAP_EPS)
+                    rotation = nearest;
+            }
+            engine.previewClip(g.id, g.trackId, {
+                transform: {
+                    ...makeTransform(g.startCenter.x, g.startCenter.y, g.startTransform),
+                    rotation,
+                },
+            });
+        }
     }, [engine, scale, stage.width, stage.height]);
     const endGesture = useCallback((e) => {
         const g = gestureRef.current;
@@ -99,7 +154,7 @@ export function TextOverlay() {
         if (target.hasPointerCapture?.(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
         }
-        engine.commitInteraction(g.type === 'move' ? 'Move text' : 'Resize text');
+        engine.commitInteraction(g.type === 'move' ? 'Move text' : g.type === 'rotate' ? 'Rotate text' : 'Resize text');
     }, [engine]);
     const beginMove = useCallback((e, clip, layout) => {
         if (editingId === clip.id)
@@ -108,44 +163,75 @@ export function TextOverlay() {
         if (!selectedClipIds.has(clip.id))
             selectClip(clip.id);
         e.currentTarget.setPointerCapture(e.pointerId);
+        const authored = readAuthored(clip, layout);
         gestureRef.current = {
             type: 'move',
             id: clip.id,
-            trackId: clip.trackId,
+            trackId: authored.trackId,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            startCenter: { ...layout.center },
-            startTransform: clip.transform,
+            startCenter: authored.center,
+            startTransform: authored.transform,
             centerClientX: 0,
             centerClientY: 0,
             startDist: 0,
-            startFontSize: layout.style.fontSize,
+            startFontSize: authored.fontSize,
+            startAngle: 0,
+            startRotation: 0,
         };
-    }, [editingId, selectedClipIds, selectClip]);
+    }, [editingId, selectedClipIds, selectClip, readAuthored]);
     const beginResize = useCallback((e, item) => {
         e.stopPropagation();
-        const { clip, layout, centerScreenX } = item;
+        const { clip, layout, centerScreenX, centerScreenY } = item;
         if (!selectedClipIds.has(clip.id))
             selectClip(clip.id);
         e.currentTarget.setPointerCapture(e.pointerId);
         const rootRect = rootRef.current?.getBoundingClientRect();
-        const centerScreenY = fit.y + layout.center.y * stage.height * scale;
         const centerClientX = (rootRect?.left ?? 0) + centerScreenX;
         const centerClientY = (rootRect?.top ?? 0) + centerScreenY;
+        const authored = readAuthored(clip, layout);
         gestureRef.current = {
             type: 'resize',
             id: clip.id,
-            trackId: clip.trackId,
+            trackId: authored.trackId,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            startCenter: { ...layout.center },
-            startTransform: clip.transform,
+            startCenter: authored.center,
+            startTransform: authored.transform,
             centerClientX,
             centerClientY,
             startDist: Math.hypot(e.clientX - centerClientX, e.clientY - centerClientY),
-            startFontSize: layout.style.fontSize,
+            startFontSize: authored.fontSize,
+            startAngle: 0,
+            startRotation: 0,
         };
-    }, [selectedClipIds, selectClip, fit.y, stage.height, scale]);
+    }, [selectedClipIds, selectClip, readAuthored]);
+    const beginRotate = useCallback((e, item) => {
+        e.stopPropagation();
+        const { clip, layout, centerScreenX, centerScreenY } = item;
+        if (!selectedClipIds.has(clip.id))
+            selectClip(clip.id);
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rootRect = rootRef.current?.getBoundingClientRect();
+        const centerClientX = (rootRect?.left ?? 0) + centerScreenX;
+        const centerClientY = (rootRect?.top ?? 0) + centerScreenY;
+        const authored = readAuthored(clip, layout);
+        gestureRef.current = {
+            type: 'rotate',
+            id: clip.id,
+            trackId: authored.trackId,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            startCenter: authored.center,
+            startTransform: authored.transform,
+            centerClientX,
+            centerClientY,
+            startDist: 0,
+            startFontSize: authored.fontSize,
+            startAngle: Math.atan2(e.clientY - centerClientY, e.clientX - centerClientX),
+            startRotation: authored.transform?.rotation ?? 0,
+        };
+    }, [selectedClipIds, selectClip, readAuthored]);
     const startEditing = useCallback((clip) => {
         selectClip(clip.id);
         setEditText(clip.content);
@@ -185,22 +271,45 @@ export function TextOverlay() {
                         cursor: isEditing ? 'text' : 'move',
                         pointerEvents: isEditing ? 'none' : 'auto',
                         touchAction: 'none',
+                        transform: item.rotation ? `rotate(${item.rotation}rad)` : undefined,
+                        transformOrigin: `${item.centerScreenX - (rect.left - BOX_PAD)}px ${item.centerScreenY - (rect.top - BOX_PAD)}px`,
                     };
-                    return (_jsx("div", { style: boxStyle, onPointerDown: (e) => beginMove(e, clip, layout), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, onDoubleClick: (e) => {
+                    return (_jsxs("div", { style: boxStyle, onPointerDown: (e) => beginMove(e, clip, layout), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, onDoubleClick: (e) => {
                             e.stopPropagation();
                             startEditing(clip);
-                        }, children: selected && !isEditing && CORNERS.map((corner) => (_jsx("div", { onPointerDown: (e) => beginResize(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
-                                position: 'absolute',
-                                ...corner.pos,
-                                width: 10,
-                                height: 10,
-                                background: 'var(--elah-selection-handle, #fff)',
-                                border: '1px solid var(--elah-selection-color, #4c9aff)',
-                                borderRadius: 2,
-                                cursor: corner.cursor,
-                                pointerEvents: 'auto',
-                                touchAction: 'none',
-                            } }, corner.key))) }, clip.id));
+                        }, children: [selected && !isEditing && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                            position: 'absolute',
+                                            left: '50%',
+                                            top: -ROTATE_STEM_PX,
+                                            width: 1,
+                                            height: ROTATE_STEM_PX,
+                                            background: 'var(--elah-selection-color, #4c9aff)',
+                                            pointerEvents: 'none',
+                                        } }), _jsx("div", { onPointerDown: (e) => beginRotate(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, title: "Rotate (Shift: 15\u00B0 steps)", style: {
+                                            position: 'absolute',
+                                            left: '50%',
+                                            top: -(ROTATE_STEM_PX + ROTATE_KNOB_PX),
+                                            transform: 'translateX(-50%)',
+                                            width: ROTATE_KNOB_PX,
+                                            height: ROTATE_KNOB_PX,
+                                            background: 'var(--elah-selection-handle, #fff)',
+                                            border: '1px solid var(--elah-selection-color, #4c9aff)',
+                                            borderRadius: '50%',
+                                            cursor: 'grab',
+                                            pointerEvents: 'auto',
+                                            touchAction: 'none',
+                                        } })] })), selected && !isEditing && CORNERS.map((corner) => (_jsx("div", { onPointerDown: (e) => beginResize(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
+                                    position: 'absolute',
+                                    ...corner.pos,
+                                    width: 10,
+                                    height: 10,
+                                    background: 'var(--elah-selection-handle, #fff)',
+                                    border: '1px solid var(--elah-selection-color, #4c9aff)',
+                                    borderRadius: 2,
+                                    cursor: corner.cursor,
+                                    pointerEvents: 'auto',
+                                    touchAction: 'none',
+                                } }, corner.key)))] }, clip.id));
                 }), !isPlaying && editingItem && (_jsx("textarea", { autoFocus: true, value: editText, onChange: (e) => {
                     const next = e.target.value;
                     setEditText(next);
@@ -238,7 +347,7 @@ export function TextOverlay() {
                     pointerEvents: 'auto',
                     boxSizing: 'border-box',
                 } }))] }));
-}
+});
 const CORNERS = [
     { key: 'nw', pos: { left: -5, top: -5 }, cursor: 'nwse-resize' },
     { key: 'ne', pos: { right: -5, top: -5 }, cursor: 'nesw-resize' },

package/dist/editor/SourcePanel/SourcePanel.js

@@ -346,7 +346,7 @@ export function SourcePanel({ style, className, defaultLane = 'media', className
                                     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)',
+                                    boxShadow: 'var(--elah-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.35))',
                                 }, 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"] })) : visibleAssets.length === 0 ? (_jsx("div", { className: "text-center text-ed-text-muted text-[11px] pt-8", children: "No matches" })) : (_jsx("div", { className: "flex flex-col gap-[6px]", children: visibleAssets.map((asset) => (_jsx(ClipCard, { asset: asset, viewMode: viewMode, onDelete: handleDeleteAsset, onActivate: activationEnabled ? handleAssetActivate : undefined, slots: cardSlots }, asset.id))) }))] })] })), lane === 'elements' && (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 overflow-auto", children: [_jsx("div", { className: cn('px-[10px] py-[6px] border-b border-ed-border shrink-0', classNames?.toolbar), children: _jsx("input", { type: "search", placeholder: "Search elements\u2026", className: classNames?.searchInput, style: {
                                 width: '100%',
                                 padding: '4px 8px',

package/dist/editor/index.d.ts

@@ -1,5 +1,5 @@
-export { EditorProvider } from './EditorProvider';
-export type { EditorProviderProps } from './EditorProvider';
+export { EditorProvider } from '@elah/react';
+export type { EditorProviderProps } from '@elah/react';
 export { AssetPanel } from './AssetPanel';
 export type { AssetPanelProps } from './AssetPanel';
 export { ElementsPanel } from './ElementsPanel';

package/dist/editor/index.js

@@ -1,4 +1,4 @@
-export { EditorProvider } from './EditorProvider';
+export { EditorProvider } from '@elah/react';
 export { AssetPanel } from './AssetPanel';
 export { ElementsPanel } from './ElementsPanel';
 export { Preview } from './Preview';

package/dist/index.d.ts

@@ -1,5 +1,13 @@
-export type { Clip, Track, Project, Transform, TextAnimation, TextAnimationKind, ClipType, TrackKind, FrameCount, TimelineConfig, InitialTrackConfig, EngineEvent, Transition, TransitionKind, TransitionEasing, TransitionDirection, } from '@elah/core';
+export type { Clip, Track, Project, Transform, TextAnimation, TextAnimationKind, TextAnimationKindOption, TextAnimationEasing, MotionSpec, TextStylePreset, ClipType, TrackKind, FrameCount, TimelineConfig, InitialTrackConfig, EngineEvent, Transition, TransitionKind, TransitionEasing, TransitionDirection, LoadProjectHistory, LoadProjectTransport, ProjectLoadedEvent, } from '@elah/core';
 export { TimelineEngine } from '@elah/core';
+export { BUILT_IN_TEXT_STYLE_PRESETS, BUILT_IN_TEXT_TEMPLATES, applyTextTemplate, findTextTemplate, resolveTemplateRamp, LINE_HEIGHT, } from '@elah/core';
+export { MAX_TEMPLATE_RAMP_FRAMES, MIN_TEMPLATE_RAMP_FRAMES, } from '@elah/core';
+export type { TextTemplate, TextTemplateStyle, TextTemplateAnimation, TextTemplateStagger, } from '@elah/core';
+export { sampleTextAnimation, resolveRampFrames, TEXT_ANIMATION_EASINGS, motionForKind, DEFAULT_SHAPE_TRANSFORM, SLIDE_TRAVEL_NORMALIZED, SPIN_TRAVEL_RADIANS, } from '@elah/core';
+export type { TextAnimationSample, SampleTextAnimationArgs } from '@elah/core';
+export { PROJECT_VERSION, ProjectDocumentError, readProjectDocument, isReadableProjectDocument, isRecoverableMediaSrc, relinkProjectMedia, missingMediaSummary, } from '@elah/core';
+export type { ProjectDocumentErrorCode, ReadProjectDocumentOptions, MediaClipType, MissingMedia, RelinkMediaResult, } from '@elah/core';
+export { serializeProject, deserializeProject } from '@elah/core';
 export { PlaybackEngine } from '@elah/core';
 export type { PlaybackSnapshot, PlaybackEngineConfig } from '@elah/core';
 export { resolveTimeline } from '@elah/core';
@@ -12,6 +20,8 @@ export type { CounterSnapshot } from '@elah/core';
 export { createDefaultDemuxerFactory, createMediabunnyBackend, isMediabunnyCompatible } from '@elah/core';
 export type { MediabunnyModule, CreateMediabunnyBackendOpts } from '@elah/core';
 export type { DemuxerBackend, DemuxerFactory, MediabunnyDemuxer } from '@elah/core';
+export { sourceBlobCache, createSourceBlobCache, warmVideoSrc } from '@elah/core';
+export type { SourceBlobCache, CreateSourceBlobCacheOpts, BlobFetcher } from '@elah/core';
 export type { VideoFrameProvider, VideoFrameProviderDeps } from '@elah/core';
 export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from '@elah/core';
 export { AudioPlaybackController } from '@elah/core';
@@ -20,17 +30,16 @@ export { defaultAudioResolver } from '@elah/core';
 export type { AudioResolver } from '@elah/core';
 export { warmImageSrc, preloadProjectImages } from '@elah/core';
 export type { ImageLoader, LoadedImage } from '@elah/core';
-export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl, importBlob } from '@elah/core';
+export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl, importBlob, beginImportUrl, determineAssetHasAudio, probeHasAudio, } from '@elah/core';
 export { useMediaLibrary, useAssets, useMediaLibraryStore } from '@elah/react';
-export type { MediaAsset, MediaKind, DragMediaPayload, ImportFilesOptions, ImportFilesResult, ImportUrlOptions, ImportBlobOptions, SkippedImport, MediaLibraryState, MediaLibraryActions, } from '@elah/core';
+export type { MediaAsset, MediaKind, DragMediaPayload, MediaAssetAnalysis, MediaAssetTopObject, ImportFilesOptions, ImportFilesResult, ImportUrlOptions, ImportBlobOptions, SkippedImport, MediaLibraryState, MediaLibraryActions, } from '@elah/core';
 export type { UseMediaLibraryApi } from '@elah/react';
-export { useTracksStore } from '@elah/react';
-export { usePlaybackStore } from '@elah/react';
-export { useSelectionStore } from '@elah/react';
-export { useTransitionsStore } from '@elah/react';
+export { scheduleThumbnailById, snapshotMediaLibrary, hydrateMediaLibrary, refreshMissingThumbnails, } from '@elah/core';
+export type { MediaLibrarySnapshotEntry, HydrateMediaLibraryOptions, HydrateMediaLibraryResult, } from '@elah/core';
+export { useTracksStore, usePlaybackStore, useSelectionStore, useTransitionsStore, useTextStylePresetsStore, useClipLoadStore, } from '@elah/react';
 export type { BoundStoreHook } from '@elah/react';
-export { tracksStore, playbackStore, selectionStore, transitionsStore, mediaLibraryStore } from '@elah/core';
-export type { TracksState, TracksActions, PlaybackState, PlaybackActions, SelectionState, SelectionActions, TransitionsState, TransitionsActions, } from '@elah/core';
+export { tracksStore, playbackStore, selectionStore, transitionsStore, mediaLibraryStore, clipLoadStore, textStylePresetsStore, } from '@elah/core';
+export type { TracksState, TracksActions, PlaybackState, PlaybackActions, SelectionState, SelectionActions, TransitionsState, TransitionsActions, ClipLoadState, ClipLoadStoreState, ClipLoadStoreActions, TextStylePresetsState, TextStylePresetsActions, } from '@elah/core';
 export { createVideoClip } from '@elah/core';
 export { createAudioClip } from '@elah/core';
 export { createTextClip } from '@elah/core';
@@ -38,14 +47,20 @@ export { createImageClip } from '@elah/core';
 export { createShapeClip } from '@elah/core';
 export { createFreehandClip } from '@elah/core';
 export type { CreateClipOptions, CreateShapeClipOptions, CreateFreehandClipOptions, ShapeClipMetadata, FreehandClipMetadata, } from '@elah/core';
+export { TEXT_ANIMATION_KINDS, DEFAULT_TEXT_TRANSFORM, } from '@elah/core';
 export { splitClipAtPlayhead } from '@elah/core';
 export type { SplitAtPlayheadData } from '@elah/core';
 export type { ActionResult, ActionFailureReason } from '@elah/core';
 export { framesToTimecode, secondsToFrames, framesToSeconds, getTotalFrames } from '@elah/core';
 export { generateId } from '@elah/core';
-export { transformFromCoverRect } from '@elah/core';
+export { transformFromContainRect, transformFromCoverRect, normalizeCrop, FULL_CROP, } from '@elah/core';
+export type { CropRect } from '@elah/core';
 export { snapFrame, buildSnapPoints, resolveOverlapEdgeSnap, clipsOverlap, DEFAULT_OVERLAP_TOLERANCE } from '@elah/core';
-export { serializeProject, deserializeProject } from '@elah/core';
+export { TIMELINE_MIN_CONTENT_WIDTH, timelineContentWidth, pxToFrames, xToFrame, seekFrameAtX, snapThresholdFrames, ZOOM_MIN, ZOOM_MAX, clampZoom, computeAnchoredScrollLeft, resolveZoomAnchorX, wheelZoomStep, pinchZoom, RULER_TICK_INTERVALS_SEC, formatRulerLabel, computeRulerTicks, isCompatibleTrackKind, isClipAllowedOnTrack, TRIM_HANDLE_WIDTH_PX, isUnlimitedClipType, maxTrimDuration, minTrimDuration, minLeftTrimStart, neighbourBounds, clampLeftTrim, clampRightTrim, } from '@elah/core';
+export type { RulerTick, TrimResult, TrimLimits } from '@elah/core';
+export { createFrameSequence, frameAt, frameCount, normalizeFrameIndex, FrameSequenceController, createFramePreloader, pickFrameSource, supportsImageType, frameSequenceToProject, } from '@elah/core';
+export type { Frame, FrameSource, FrameSequence, FrameLoopMode, CreateFrameSequenceOptions, FrameSequenceSnapshot, FrameSequenceControllerOptions, FramePreloader, FramePreloaderOptions, FramePreloaderStatus, FrameSourceSizeHint, FrameSequenceToProjectOptions, } from '@elah/core';
+export { PerfSummary } from '@elah/core';
 export { exportVideo } from '@elah/core';
 export { lazyExportVideo } from '@elah/core';
 export type { ExportOptions, ExportProgress, ExportVideoCodec, ExportAudioCodec } from '@elah/core';
@@ -58,11 +73,12 @@ export { usePlayback } from '@elah/timeline';
 export { useSelection } from '@elah/timeline';
 export { useTimelineDrop } from '@elah/timeline';
 export type { TimelineDropState } from '@elah/timeline';
-export { insertMediaAsset, insertElement } from '@elah/timeline';
+export { insertMediaAsset, insertElement, growClipToAssetDuration } from '@elah/timeline';
 export { ELEMENT_DRAG_MIME } from '@elah/timeline';
+export { useKeySelectionStore } from '@elah/timeline';
 export type { DragElementPayload, ElementKind, ShapeVariant, InsertAssetOptions, InsertAssetResult, InsertAssetFailureReason, InsertedKind, } from '@elah/timeline';
-export { EditorProvider } from './editor/EditorProvider';
-export type { EditorProviderProps } from './editor/EditorProvider';
+export { EditorProvider } from '@elah/react';
+export type { EditorProviderProps } from '@elah/react';
 export { EditorContext, useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
 export type { EditorContextValue } from '@elah/react';
 export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';