@elah/editor 0.1.0

package/dist/editor/Preview/MediaTransformOverlay.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore, useMediaLibraryStore, resolveDrawRect, transformFromContainRect, computeContainViewport, } from '@elah/core';
+import { useResolvedScene } from '../useResolvedScene';
+const MIN_BOX_PX = 28;
+const BOX_PAD = 0;
+const MIN_RENDER_PX = 16;
+const MAX_RENDER_STAGE_MULTIPLE = 8;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const clamp01 = (v) => clamp(v, 0, 1);
+export function MediaTransformOverlay() {
+    const engine = useTimelineEngine();
+    const scene = useResolvedScene();
+    const isPlaying = usePlaybackStore((s) => s.isPlaying);
+    const selectedClipIds = useSelectionStore((s) => s.selectedClipIds);
+    const selectClip = useSelectionStore((s) => s.selectClip);
+    const clearSelection = useSelectionStore((s) => s.clearSelection);
+    const assets = useMediaLibraryStore((s) => s.assets);
+    const rootRef = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const gestureRef = useRef(null);
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const apply = () => setSize({ width: el.clientWidth, height: el.clientHeight });
+        apply();
+        const obs = new ResizeObserver(apply);
+        obs.observe(el);
+        return () => obs.disconnect();
+    }, []);
+    const stage = scene.stage;
+    const fit = useMemo(() => computeContainViewport(size.width, size.height, stage.width, stage.height), [size.width, size.height, stage.width, stage.height]);
+    const scale = stage.width > 0 ? fit.width / stage.width : 1;
+    const items = useMemo(() => {
+        if (fit.width <= 0)
+            return [];
+        const clips = [...scene.videos, ...scene.images];
+        return clips.map((clip) => {
+            const assetId = engine.findClip(clip.id)?.clip.assetId;
+            const asset = assetId ? assets[assetId] : undefined;
+            const contentW = asset?.width ?? stage.width;
+            const contentH = asset?.height ?? stage.height;
+            const r = resolveDrawRect(clip.transform, stage.width, stage.height, contentW, contentH);
+            const centerScreenX = fit.x + (r.x + r.width / 2) * scale;
+            const centerScreenY = fit.y + (r.y + r.height / 2) * scale;
+            const rawW = r.width * scale;
+            const rawH = r.height * scale;
+            const w = Math.max(rawW, MIN_BOX_PX);
+            const h = Math.max(rawH, MIN_BOX_PX);
+            const left = rawW < MIN_BOX_PX ? centerScreenX - w / 2 : fit.x + r.x * scale;
+            const top = rawH < MIN_BOX_PX ? centerScreenY - h / 2 : fit.y + r.y * scale;
+            return {
+                clip,
+                contentW,
+                contentH,
+                rect: { left, top, width: w, height: h },
+                centerScreenX,
+                centerScreenY,
+            };
+        });
+    }, [scene.videos, scene.images, assets, engine, stage.width, stage.height, fit, scale]);
+    const ownsSelection = useMemo(() => items.some((it) => selectedClipIds.has(it.clip.id)), [items, selectedClipIds]);
+    const handlePointerMove = useCallback((e) => {
+        const g = gestureRef.current;
+        if (!g)
+            return;
+        if (g.type === 'move') {
+            const dx = (e.clientX - g.startClientX) / scale;
+            const dy = (e.clientY - g.startClientY) / scale;
+            const x = clamp01(g.base.x + dx / g.stageW);
+            const y = clamp01(g.base.y + dy / g.stageH);
+            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 minScale = MIN_RENDER_PX / Math.max(1, Math.min(g.contentW, g.contentH));
+            const maxScale = (MAX_RENDER_STAGE_MULTIPLE * Math.max(g.stageW, g.stageH)) /
+                Math.max(1, Math.max(g.contentW, g.contentH));
+            const next = clamp(g.base.scale * ratio, minScale, maxScale);
+            engine.previewClip(g.id, g.trackId, { transform: { ...g.base, scale: next } });
+        }
+    }, [engine, scale]);
+    const endGesture = useCallback((e) => {
+        const g = gestureRef.current;
+        if (!g)
+            return;
+        gestureRef.current = null;
+        const target = e.currentTarget;
+        if (target.hasPointerCapture?.(e.pointerId)) {
+            target.releasePointerCapture(e.pointerId);
+        }
+        engine.commitInteraction(g.type === 'move' ? 'Move clip' : 'Resize clip');
+    }, [engine]);
+    const baseTransformFor = useCallback((item) => item.clip.transform ??
+        transformFromContainRect(item.contentW, item.contentH, stage.width, stage.height), [stage.width, stage.height]);
+    const beginMove = useCallback((e, item) => {
+        e.stopPropagation();
+        if (!selectedClipIds.has(item.clip.id))
+            selectClip(item.clip.id);
+        e.currentTarget.setPointerCapture(e.pointerId);
+        gestureRef.current = {
+            type: 'move',
+            id: item.clip.id,
+            trackId: item.clip.trackId,
+            base: baseTransformFor(item),
+            contentW: item.contentW,
+            contentH: item.contentH,
+            stageW: stage.width,
+            stageH: stage.height,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            centerClientX: 0,
+            centerClientY: 0,
+            startDist: 0,
+        };
+    }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
+    const beginResize = useCallback((e, item) => {
+        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;
+        gestureRef.current = {
+            type: 'resize',
+            id: item.clip.id,
+            trackId: item.clip.trackId,
+            base: baseTransformFor(item),
+            contentW: item.contentW,
+            contentH: item.contentH,
+            stageW: stage.width,
+            stageH: stage.height,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            centerClientX,
+            centerClientY,
+            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 &&
+                items.map((item) => {
+                    const { clip, rect } = item;
+                    const selected = selectedClipIds.has(clip.id);
+                    const boxStyle = {
+                        position: 'absolute',
+                        left: rect.left - BOX_PAD,
+                        top: rect.top - BOX_PAD,
+                        width: rect.width + BOX_PAD * 2,
+                        height: rect.height + BOX_PAD * 2,
+                        boxSizing: 'border-box',
+                        border: selected ? '1px solid #4c9aff' : '1px solid transparent',
+                        borderRadius: 2,
+                        cursor: 'move',
+                        pointerEvents: 'auto',
+                        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: {
+                                    position: 'absolute',
+                                    ...corner.pos,
+                                    width: 10,
+                                    height: 10,
+                                    background: '#fff',
+                                    border: '1px solid #4c9aff',
+                                    borderRadius: 2,
+                                    cursor: corner.cursor,
+                                    pointerEvents: 'auto',
+                                    touchAction: 'none',
+                                } }, corner.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' },
+];

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

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+import { GpuRenderer } from '@elah/core';
+import type { DemuxerFactory } from '@elah/core';
+export interface PreviewHandle {
+    getCanvas(): HTMLCanvasElement | null;
+    getRenderer(): GpuRenderer | null;
+}
+export interface PreviewProps {
+    demuxerFactory?: DemuxerFactory;
+    debug?: boolean;
+    probeLayer?: boolean;
+    clearColor?: [number, number, number, number];
+    preserveDrawingBuffer?: boolean;
+    enableAudio?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare const Preview: import("react").ForwardRefExoticComponent<PreviewProps & import("react").RefAttributes<PreviewHandle>>;

package/dist/editor/Preview/Preview.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { TextOverlay } from './TextOverlay';
+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) {
+    const containerRef = useRef(null);
+    const rendererRef = useRef(null);
+    const transitionOverlayRef = useRef(null);
+    const engine = useTimelineEngine();
+    const playback = usePlaybackEngine();
+    useImperativeHandle(ref, () => ({
+        getCanvas: () => rendererRef.current?.getCanvas() ?? null,
+        getRenderer: () => rendererRef.current,
+    }), []);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const renderer = new GpuRenderer({
+            probeLayer,
+            demuxerFactory,
+            preserveDrawingBuffer,
+            ...(clearColor ? { clearColor } : {}),
+        });
+        renderer.mount(container);
+        renderer.setDebug(debug);
+        rendererRef.current = renderer;
+        const resize = () => {
+            const dpr = window.devicePixelRatio ?? 1;
+            renderer.resize(container.clientWidth, container.clientHeight, dpr);
+        };
+        const observer = new ResizeObserver(resize);
+        observer.observe(container);
+        resize();
+        const audio = enableAudio
+            ? new AudioPlaybackController(playback, () => engine.getProject())
+            : null;
+        audio?.start();
+        let rafId = 0;
+        const tick = () => {
+            const frame = Math.floor(playback.getFrameAt());
+            const scene = resolveTimeline(frame, engine.getProject());
+            const canvas = renderer.getCanvas();
+            if (canvas)
+                transitionOverlayRef.current?.captureIfNewTransition(scene, canvas);
+            renderer.render(scene);
+            transitionOverlayRef.current?.update(scene);
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            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, {})] }));
+});

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

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

package/dist/editor/Preview/StageBorder.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { computeContainViewport, useTracksStore } from '@elah/core';
+export function StageBorder() {
+    const rootRef = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const stage = useTracksStore((s) => s.stage);
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const apply = () => setSize({ width: el.clientWidth, height: el.clientHeight });
+        apply();
+        const obs = new ResizeObserver(apply);
+        obs.observe(el);
+        return () => obs.disconnect();
+    }, []);
+    const fit = useMemo(() => computeContainViewport(size.width, size.height, stage.width, stage.height), [size.width, size.height, stage.width, stage.height]);
+    return (_jsx("div", { ref: rootRef, style: { position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', overflow: 'hidden' }, children: fit.width > 0 && fit.height > 0 && (_jsx("div", { style: {
+                position: 'absolute',
+                left: fit.x,
+                top: fit.y,
+                width: fit.width,
+                height: fit.height,
+                border: '1px solid rgba(225, 29, 72, 0.45)',
+                boxShadow: '0 0 20px rgba(225, 29, 72, 0.08)',
+                boxSizing: 'border-box',
+            } })) }));
+}

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

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

package/dist/editor/Preview/TextOverlay.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { computeTextLayout, computeContainViewport, useTimelineEngine, useSelectionStore, usePlaybackStore, SIDE_MARGIN, } from '@elah/core';
+import { useResolvedScene } from '../useResolvedScene';
+const MIN_FONT_SIZE = 6;
+const MAX_FONT_SIZE = 4000;
+const MIN_BOX_PX = 28;
+const BOX_PAD = 4;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const clamp01 = (v) => clamp(v, 0, 1);
+function makeTransform(x, y, base) {
+    return {
+        x,
+        y,
+        scale: base?.scale ?? 1,
+        rotation: base?.rotation ?? 0,
+        anchor: base?.anchor ?? { x: 0.5, y: 0.5 },
+    };
+}
+export function TextOverlay() {
+    const engine = useTimelineEngine();
+    const scene = useResolvedScene();
+    const isPlaying = usePlaybackStore((s) => s.isPlaying);
+    const selectedClipIds = useSelectionStore((s) => s.selectedClipIds);
+    const selectClip = useSelectionStore((s) => s.selectClip);
+    const clearSelection = useSelectionStore((s) => s.clearSelection);
+    const rootRef = useRef(null);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const measureRef = useRef(null);
+    const getMeasurer = useCallback(() => {
+        if (measureRef.current)
+            return measureRef.current;
+        if (typeof document === 'undefined')
+            return null;
+        const ctx = document.createElement('canvas').getContext('2d');
+        measureRef.current = ctx;
+        return ctx;
+    }, []);
+    const gestureRef = useRef(null);
+    const [editingId, setEditingId] = useState(null);
+    const [editText, setEditText] = useState('');
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const apply = () => setSize({ width: el.clientWidth, height: el.clientHeight });
+        apply();
+        const obs = new ResizeObserver(apply);
+        obs.observe(el);
+        return () => obs.disconnect();
+    }, []);
+    const stage = scene.stage;
+    const fit = useMemo(() => computeContainViewport(size.width, size.height, stage.width, stage.height), [size.width, size.height, stage.width, stage.height]);
+    const scale = stage.width > 0 ? fit.width / stage.width : 1;
+    const items = useMemo(() => {
+        const measurer = getMeasurer();
+        if (!measurer || fit.width <= 0)
+            return [];
+        return scene.texts.map((clip) => {
+            const layout = computeTextLayout(measurer, clip, stage);
+            const centerScreenX = fit.x + layout.center.x * stage.width * 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 } };
+        });
+    }, [scene.texts, stage, fit, scale, getMeasurer]);
+    const ownsSelection = useMemo(() => items.some((it) => selectedClipIds.has(it.clip.id)), [items, selectedClipIds]);
+    const handlePointerMove = useCallback((e) => {
+        const g = gestureRef.current;
+        if (!g)
+            return;
+        if (g.type === 'move') {
+            const dx = (e.clientX - g.startClientX) / scale;
+            const dy = (e.clientY - g.startClientY) / scale;
+            const nx = clamp01(g.startCenter.x + dx / stage.width);
+            const ny = clamp01(g.startCenter.y + dy / stage.height);
+            engine.previewClip(g.id, g.trackId, {
+                transform: makeTransform(nx, ny, g.startTransform),
+            });
+        }
+        else {
+            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 });
+        }
+    }, [engine, scale, stage.width, stage.height]);
+    const endGesture = useCallback((e) => {
+        const g = gestureRef.current;
+        if (!g)
+            return;
+        gestureRef.current = null;
+        const target = e.currentTarget;
+        if (target.hasPointerCapture?.(e.pointerId)) {
+            target.releasePointerCapture(e.pointerId);
+        }
+        engine.commitInteraction(g.type === 'move' ? 'Move text' : 'Resize text');
+    }, [engine]);
+    const beginMove = useCallback((e, clip, layout) => {
+        if (editingId === clip.id)
+            return;
+        e.stopPropagation();
+        if (!selectedClipIds.has(clip.id))
+            selectClip(clip.id);
+        e.currentTarget.setPointerCapture(e.pointerId);
+        gestureRef.current = {
+            type: 'move',
+            id: clip.id,
+            trackId: clip.trackId,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            startCenter: { ...layout.center },
+            startTransform: clip.transform,
+            centerClientX: 0,
+            centerClientY: 0,
+            startDist: 0,
+            startFontSize: layout.style.fontSize,
+        };
+    }, [editingId, selectedClipIds, selectClip]);
+    const beginResize = useCallback((e, item) => {
+        e.stopPropagation();
+        const { clip, layout, centerScreenX } = 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;
+        gestureRef.current = {
+            type: 'resize',
+            id: clip.id,
+            trackId: clip.trackId,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            startCenter: { ...layout.center },
+            startTransform: clip.transform,
+            centerClientX,
+            centerClientY,
+            startDist: Math.hypot(e.clientX - centerClientX, e.clientY - centerClientY),
+            startFontSize: layout.style.fontSize,
+        };
+    }, [selectedClipIds, selectClip, fit.y, stage.height, scale]);
+    const startEditing = useCallback((clip) => {
+        selectClip(clip.id);
+        setEditText(clip.content);
+        setEditingId(clip.id);
+    }, [selectClip]);
+    const commitEditing = useCallback(() => {
+        engine.commitInteraction('Edit text');
+        setEditingId(null);
+    }, [engine]);
+    const cancelEditing = useCallback(() => {
+        engine.cancelInteraction();
+        setEditingId(null);
+    }, [engine]);
+    useEffect(() => {
+        if (isPlaying && editingId)
+            commitEditing();
+    }, [isPlaying]);
+    const editingItem = editingId ? items.find((it) => it.clip.id === editingId) : undefined;
+    return (_jsxs("div", { ref: rootRef, style: { position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none', overflow: 'hidden' }, children: [!isPlaying && (ownsSelection || editingId) && (_jsx("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'auto' }, onPointerDown: () => {
+                    if (editingId)
+                        commitEditing();
+                    clearSelection();
+                } })), !isPlaying &&
+                items.map((item) => {
+                    const { clip, layout, rect } = item;
+                    const selected = selectedClipIds.has(clip.id);
+                    const isEditing = editingId === clip.id;
+                    const boxStyle = {
+                        position: 'absolute',
+                        left: rect.left - BOX_PAD,
+                        top: rect.top - BOX_PAD,
+                        width: rect.width + BOX_PAD * 2,
+                        height: rect.height + BOX_PAD * 2,
+                        boxSizing: 'border-box',
+                        border: selected ? '1px solid #4c9aff' : '1px solid transparent',
+                        borderRadius: 2,
+                        cursor: isEditing ? 'text' : 'move',
+                        pointerEvents: isEditing ? 'none' : 'auto',
+                        touchAction: 'none',
+                    };
+                    return (_jsx("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: '#fff',
+                                border: '1px solid #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);
+                    const found = engine.findClip(editingItem.clip.id);
+                    if (found)
+                        engine.previewClip(editingItem.clip.id, found.trackId, { content: next });
+                }, onPointerDown: (e) => e.stopPropagation(), onBlur: commitEditing, onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        commitEditing();
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        cancelEditing();
+                    }
+                }, onFocus: (e) => e.currentTarget.select(), style: {
+                    position: 'absolute',
+                    left: editingItem.centerScreenX - (stage.width * (1 - 2 * SIDE_MARGIN) * scale) / 2,
+                    top: fit.y + editingItem.layout.box.y * scale,
+                    width: stage.width * (1 - 2 * SIDE_MARGIN) * scale,
+                    height: editingItem.layout.box.height * scale,
+                    color: 'transparent',
+                    caretColor: editingItem.layout.style.color,
+                    background: 'transparent',
+                    font: `${editingItem.layout.style.fontWeight} ${editingItem.layout.style.fontSize * scale}px ${editingItem.layout.style.fontFamily}`,
+                    lineHeight: `${editingItem.layout.lineAdvance * scale}px`,
+                    textAlign: editingItem.layout.style.textAlign,
+                    border: '1px solid #4c9aff',
+                    outline: 'none',
+                    resize: 'none',
+                    padding: 0,
+                    margin: 0,
+                    overflow: 'hidden',
+                    whiteSpace: 'pre-wrap',
+                    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' },
+    { key: 'sw', pos: { left: -5, bottom: -5 }, cursor: 'nesw-resize' },
+    { key: 'se', pos: { right: -5, bottom: -5 }, cursor: 'nwse-resize' },
+];

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

@@ -0,0 +1,6 @@
+import type { Scene } from '@elah/core';
+export interface TransitionOverlayHandle {
+    captureIfNewTransition(scene: Scene, webglCanvas: HTMLCanvasElement): void;
+    update(scene: Scene): void;
+}
+export declare const TransitionOverlay: import("react").ForwardRefExoticComponent<import("react").RefAttributes<TransitionOverlayHandle>>;

package/dist/editor/Preview/TransitionOverlay.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const TransitionOverlay = forwardRef(function TransitionOverlay(_, ref) {
+    const rootRef = useRef(null);
+    const snapshotsRef = useRef(new Map());
+    useImperativeHandle(ref, () => ({
+        captureIfNewTransition(scene, webglCanvas) {
+            const root = rootRef.current;
+            if (!root)
+                return;
+            for (const tr of scene.transitions) {
+                if (snapshotsRef.current.has(tr.id))
+                    continue;
+                const snap = document.createElement('canvas');
+                snap.width = webglCanvas.width;
+                snap.height = webglCanvas.height;
+                const ctx2d = snap.getContext('2d');
+                if (!ctx2d)
+                    continue;
+                ctx2d.drawImage(webglCanvas, 0, 0);
+                const div = document.createElement('div');
+                div.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
+                snap.style.cssText = 'display:block;width:100%;height:100%;';
+                div.appendChild(snap);
+                root.appendChild(div);
+                snapshotsRef.current.set(tr.id, { div });
+            }
+        },
+        update(scene) {
+            const activeIds = new Set(scene.transitions.map(tr => tr.id));
+            for (const [id, { div }] of snapshotsRef.current) {
+                if (!activeIds.has(id)) {
+                    div.remove();
+                    snapshotsRef.current.delete(id);
+                }
+            }
+            for (const tr of scene.transitions) {
+                const snap = snapshotsRef.current.get(tr.id);
+                if (!snap)
+                    continue;
+                if (tr.kind === 'slide') {
+                    const sign = tr.direction === 'left' ? -1 : 1;
+                    snap.div.style.opacity = '1';
+                    snap.div.style.transform = `translateX(${sign * tr.t * 100}%)`;
+                    snap.div.style.clipPath = '';
+                }
+                else if (tr.kind === 'wipe') {
+                    snap.div.style.opacity = '1';
+                    snap.div.style.transform = '';
+                    snap.div.style.clipPath = `inset(0 ${tr.t * 100}% 0 0)`;
+                }
+                else {
+                    snap.div.style.opacity = String(1 - tr.t);
+                    snap.div.style.transform = '';
+                    snap.div.style.clipPath = '';
+                }
+            }
+        },
+    }), []);
+    return (_jsx("div", { ref: rootRef, style: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: 'none',
+            overflow: 'hidden',
+        } }));
+});

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

@@ -0,0 +1,2 @@
+export { Preview } from './Preview';
+export type { PreviewProps, PreviewHandle } from './Preview';

package/dist/editor/Preview/index.js

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

package/dist/editor/index.d.ts

@@ -0,0 +1,8 @@
+export { EditorProvider } from './EditorProvider';
+export type { EditorProviderProps } from './EditorProvider';
+export { AssetPanel } from './AssetPanel';
+export type { AssetPanelProps } from './AssetPanel';
+export { ElementsPanel } from './ElementsPanel';
+export type { ElementsPanelProps } from './ElementsPanel';
+export { Preview } from './Preview';
+export type { PreviewProps, PreviewHandle } from './Preview';

package/dist/editor/index.js

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

package/dist/editor/useResolvedScene.d.ts

@@ -0,0 +1,2 @@
+import { type Scene } from '@elah/core';
+export declare function useResolvedScene(frameOverride?: number): Scene;