@elah/editor 0.2.1 → 0.3.0

package/dist/editor/Preview/ShapeOverlay.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore, computeContainViewport, } from '@elah/core';
+import { useResolvedScene } from '../useResolvedScene';
+const DEFAULT_SCALE = 0.5;
+const DEFAULT_CENTER = 0.5;
+const MIN_BOX_PX = 28;
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 4;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const clamp01 = (v) => clamp(v, 0, 1);
+function baseTransform(t) {
+    return {
+        x: t?.x ?? DEFAULT_CENTER,
+        y: t?.y ?? DEFAULT_CENTER,
+        scale: t?.scale ?? DEFAULT_SCALE,
+        rotation: t?.rotation ?? 0,
+        anchor: t?.anchor ?? { x: 0.5, y: 0.5 },
+    };
+}
+export function ShapeOverlay() {
+    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 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 shortSide = Math.min(stage.width, stage.height);
+        return scene.shapes.map((clip) => {
+            const t = baseTransform(clip.transform);
+            const sideStage = t.scale * shortSide;
+            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 left = centerScreenX - w / 2;
+            const top = centerScreenY - h / 2;
+            return {
+                clip,
+                rect: { left, top, width: w, height: h },
+                centerScreenX,
+                centerScreenY,
+            };
+        });
+    }, [scene.shapes, 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 next = clamp(g.base.scale * ratio, MIN_SCALE, MAX_SCALE);
+            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 shape' : 'Resize shape');
+    }, [engine]);
+    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: baseTransform(item.clip.transform),
+            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) => {
+        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: baseTransform(item.clip.transform),
+            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, stage.width, stage.height]);
+    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;
+                    const selected = selectedClipIds.has(clip.id);
+                    const boxStyle = {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        boxSizing: 'border-box',
+                        border: selected
+                            ? '1px solid var(--elah-selection-color, #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: '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));
+                })] }));
+}
+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/StageBorder.js

@@ -16,14 +16,14 @@ export function StageBorder() {
         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: {
+    return (_jsx("div", { ref: rootRef, className: "absolute inset-0 z-[1] pointer-events-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)',
+                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))',
                 boxSizing: 'border-box',
             } })) }));
 }

package/dist/editor/Preview/TextOverlay.js

@@ -163,7 +163,7 @@ export function TextOverlay() {
             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: () => {
+    return (_jsxs("div", { ref: rootRef, className: "absolute inset-0 z-[4] pointer-events-none overflow-hidden", children: [!isPlaying && (ownsSelection || editingId) && (_jsx("div", { className: "absolute inset-0 pointer-events-auto", onPointerDown: () => {
                     if (editingId)
                         commitEditing();
                     clearSelection();
@@ -179,7 +179,7 @@ export function TextOverlay() {
                         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: isEditing ? 'text' : 'move',
                         pointerEvents: isEditing ? 'none' : 'auto',
@@ -193,8 +193,8 @@ export function TextOverlay() {
                                 ...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',
@@ -227,7 +227,7 @@ export function TextOverlay() {
                     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',
+                    border: '1px solid var(--elah-selection-color, #4c9aff)',
                     outline: 'none',
                     resize: 'none',
                     padding: 0,

package/dist/editor/Preview/TransitionOverlay.js

@@ -57,11 +57,7 @@ export const TransitionOverlay = forwardRef(function TransitionOverlay(_, ref) {
             }
         },
     }), []);
-    return (_jsx("div", { ref: rootRef, style: {
-            position: 'absolute',
-            inset: 0,
+    return (_jsx("div", { ref: rootRef, className: "absolute inset-0 pointer-events-none overflow-hidden", style: {
             zIndex: 1,
-            pointerEvents: 'none',
-            overflow: 'hidden',
         } }));
 });

package/dist/editor/SourcePanel/SourcePanel.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties } from 'react';
+import { type AssetActivationHandler } from '../activation';
+export interface SourcePanelClassNames {
+    root?: string;
+    tabBar?: string;
+    tab?: string;
+    tabActive?: string;
+    toolbar?: string;
+    ingestButton?: string;
+    searchInput?: string;
+    sortChip?: string;
+    sortChipActive?: string;
+    card?: string;
+    cardTitle?: string;
+    cardMeta?: string;
+    thumb?: string;
+    badge?: string;
+    badgeVideo?: string;
+    badgeAudio?: string;
+    badgeImage?: string;
+    tile?: string;
+    tileLabel?: string;
+    dropzone?: string;
+    toast?: string;
+    error?: string;
+}
+export interface SourcePanelProps {
+    style?: CSSProperties;
+    className?: string;
+    defaultLane?: Lane;
+    classNames?: SourcePanelClassNames;
+    activateOnTap?: boolean;
+    onAssetActivate?: AssetActivationHandler;
+}
+type Lane = 'media' | 'elements';
+export declare function SourcePanel({ style, className, defaultLane, classNames, activateOnTap, onAssetActivate, }: SourcePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};