@elah/editor 0.6.0 → 1.0.0

package/README.md

@@ -2,10 +2,11 @@
 
 The full Elah video editor SDK for React. Combines the core engine, timeline UI, WebGL2 renderer, media library, and export pipeline into a single package.
 
-Ships `EditorProvider`, `Preview` (WebGL2 canvas + interactive transform overlays), `Timeline`, `AssetPanel`, `SourcePanel`, and `ElementsPanel`, and re-exports the public `@elah/core`, `@elah/react`, and `@elah/timeline` API — so most apps only ever import from `@elah/editor`. (Renderer and debug internals are the exception; import those from `@elah/core` directly.) Supports video, image, text, **shape**, and **freehand** clips, **multiple video tracks**, **multi-track audio**, and MP4 export.
+Ships `EditorProvider`, `Preview` (WebGL2 canvas + interactive transform overlays), `Timeline`, `AssetPanel`, `SourcePanel`, and `ElementsPanel`, and re-exports the public `@elah/core`, `@elah/react`, and `@elah/timeline` API — so most apps only ever import from `@elah/editor`. (Renderer and debug internals, and the 1.0.0 programmatic layer, are the exception; import those from `@elah/core` directly.) Supports video, image, text, **shape**, and **freehand** clips, **multiple video tracks**, **multi-track audio**, and export to MP4, WebM, GIF or a PNG sequence. Projects that use the newer **adjustment**, **generator**, **compound** and **sequence** clips, and the nine transitions, open, play, save and export; `@elah/editor` has no editing UI for those clip types yet. A selected clip does show its **keyframes** as diamonds on its bottom edge: click to seek and select, drag to retime with snapping as one undo step, Shift+click for multi-select (`<KeyframeLane>` from `@elah/timeline`, drawn automatically; `useKeySelectionStore` is re-exported here).
+
+**1.0.0:** the exports of this package follow semver. The 1.0.0 programmatic layer (effects, generators, motion helpers, VideoSpec, HTML scenes, editor ops, `packageFontsBaseUrl`) is **not** re-exported here: import it from `@elah/core`, which this package already depends on (list it in your own `package.json`). VideoSpec, HTML scenes and the op vocabulary are live in 1.0 and sit on their own entries, not the `@elah/core` root: `@elah/core/spec`, `@elah/core/html`, `@elah/core/ops` and `@elah/core/icons`; see [the changelog](../../CHANGELOG.md).
 
 [![npm](https://img.shields.io/npm/v/@elah/editor)](https://www.npmjs.com/package/@elah/editor)
-[![gzip size](https://img.shields.io/badge/gzip-~64%20KiB%20SDK-brightgreen)](../../BUNDLE_STRATEGY.md)
 [![license](https://img.shields.io/badge/license-Apache--2.0-blue)](https://github.com/elahlabs/elah/blob/main/LICENSE)
 
 ---
@@ -20,7 +21,7 @@ Peer dependencies: `react`, `react-dom` >= 18, `lucide-react` >= 0.400.0 (used b
 bundled `@elah/timeline` UI for clip icons — install it alongside `react`/`react-dom`
 even though nothing in your own code imports it).
 
-**Bundle size:** ~19 KiB gzipped for the editor layer; an app using the full SDK (`core` + `react` + `timeline` + `editor`) starts at ~64 KiB gzipped with the demuxer injected or omitted, and ~227 KiB if it calls `createDefaultDemuxerFactory()`, which pulls `mediabunny` (159 KiB) into the startup graph. Measured with code splitting — see [BUNDLE_STRATEGY.md](../../BUNDLE_STRATEGY.md).
+**Bundle size:** an editor app (`EditorProvider`, `Preview`, `Timeline`) is about **112 KiB gz** — esbuild, minified, gzipped, with `react`, `lucide-react` and `mediabunny` external — up from 68 KiB in 0.6.0, because effects, generators, sequence clips, roto masks and audio Enhance became chunks that load on first use (`prepareFeatures(project)` loads a project's features up front). [BUNDLE_STRATEGY.md](../../BUNDLE_STRATEGY.md) explains how the figures are measured (`node scripts/measure-bundle.mjs`). `@elah/core` grew substantially in 1.0.0 (it now carries the motion layer, effects and the model-facing layers); import `@elah/core/engine` directly if you need only the engine. `createDefaultDemuxerFactory()` imports `mediabunny` statically, so it pulls the codec into the startup graph; every other path loads it lazily.
 
 ---
 

package/dist/editor/Preview/Preview.js

@@ -10,12 +10,10 @@ import { TextOverlay } from './TextOverlay';
 import { ShapeOverlay } from './ShapeOverlay';
 import { MediaTransformOverlay } from './MediaTransformOverlay';
 import { PreviewLoadingOverlay } from './PreviewLoadingOverlay';
-import { TransitionOverlay } from './TransitionOverlay';
 import { StageBorder } from './StageBorder';
 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);
     const engine = useTimelineEngine();
     const playback = usePlaybackEngine();
     const [glState, setGlState] = useState('ok');
@@ -136,11 +134,7 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
             const frame = Math.floor(playback.getFrameAt());
             const project = engine.getProject();
             const scene = perf.measure('resolve', () => resolveTimeline(frame, project));
-            const canvas = renderer.getCanvas();
-            if (canvas)
-                transitionOverlayRef.current?.captureIfNewTransition(scene, canvas);
             perf.measure('render', () => renderer.render(scene));
-            transitionOverlayRef.current?.update(scene);
             lastPrewarmAt = now;
             perf.measure('prewarm', () => {
                 const prewarmScene = resolveTimeline(frame + PREWARM_HORIZON_FRAMES, project);
@@ -172,7 +166,7 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
             clipLoadStore.getState().clear();
         };
     }, [engine, playback, demuxerFactory, debug, probeLayer, preserveDrawingBuffer, enableAudio, audioResolver, reloadKey]);
-    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, {}), _jsx(PreviewLoadingOverlay, {}), glState !== 'ok' && (_jsx("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-[var(--elah-overlay-scrim,rgba(0,0,0,0.7))] text-[color:var(--elah-overlay-text,#ffffff)] text-sm", "data-testid": "preview-gl-recovery", children: glState === 'lost' ? (_jsx("span", { children: "Recovering preview\u2026" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "The preview stopped rendering (graphics context lost)." }), _jsx("button", { type: "button", className: "rounded-md border border-[color:var(--elah-overlay-border,rgba(255,255,255,0.3))] bg-[var(--elah-overlay-bg,rgba(255,255,255,0.1))] px-3 py-1.5 hover:bg-[var(--elah-overlay-bg-hover,rgba(255,255,255,0.2))]", onClick: () => {
+    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(MediaTransformOverlay, {}), _jsx(ShapeOverlay, {}), _jsx(TextOverlay, {}), _jsx(PreviewLoadingOverlay, {}), glState !== 'ok' && (_jsx("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-[var(--elah-overlay-scrim,rgba(0,0,0,0.7))] text-[color:var(--elah-overlay-text,#ffffff)] text-sm", "data-testid": "preview-gl-recovery", children: glState === 'lost' ? (_jsx("span", { children: "Recovering preview\u2026" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "The preview stopped rendering (graphics context lost)." }), _jsx("button", { type: "button", className: "rounded-md border border-[color:var(--elah-overlay-border,rgba(255,255,255,0.3))] bg-[var(--elah-overlay-bg,rgba(255,255,255,0.1))] px-3 py-1.5 hover:bg-[var(--elah-overlay-bg-hover,rgba(255,255,255,0.2))]", onClick: () => {
                                 setGlState('ok');
                                 setReloadKey((k) => k + 1);
                             }, children: "Reload preview" })] })) }))] }));

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

@@ -56,6 +56,8 @@ export { generateId } 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 { 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';
@@ -73,9 +75,10 @@ export { useTimelineDrop } from '@elah/timeline';
 export type { TimelineDropState } 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';

package/dist/index.js

@@ -31,6 +31,7 @@ export { framesToTimecode, secondsToFrames, framesToSeconds, getTotalFrames } fr
 export { generateId } from '@elah/core';
 export { transformFromContainRect, transformFromCoverRect, normalizeCrop, FULL_CROP, } from '@elah/core';
 export { snapFrame, buildSnapPoints, resolveOverlapEdgeSnap, clipsOverlap, DEFAULT_OVERLAP_TOLERANCE } 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 { createFrameSequence, frameAt, frameCount, normalizeFrameIndex, FrameSequenceController, createFramePreloader, pickFrameSource, supportsImageType, frameSequenceToProject, } from '@elah/core';
 export { PerfSummary } from '@elah/core';
 export { exportVideo } from '@elah/core';
@@ -44,7 +45,8 @@ export { useSelection } from '@elah/timeline';
 export { useTimelineDrop } from '@elah/timeline';
 export { insertMediaAsset, insertElement, growClipToAssetDuration } from '@elah/timeline';
 export { ELEMENT_DRAG_MIME } from '@elah/timeline';
-export { EditorProvider } from './editor/EditorProvider';
+export { useKeySelectionStore } from '@elah/timeline';
+export { EditorProvider } from '@elah/react';
 export { EditorContext, useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
 export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';
 export { useResolvedScene } from './editor/useResolvedScene';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elah/editor",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "Full React video editor SDK — timeline UI, WebGL2 preview, media library, drag and drop, and MP4 export",
   "type": "module",
   "main": "./dist/index.js",
@@ -59,9 +59,9 @@
     "lucide-react": ">=0.400.0"
   },
   "dependencies": {
-    "@elah/core": "^0.6.0",
-    "@elah/react": "^0.6.0",
-    "@elah/timeline": "^0.6.0",
+    "@elah/core": "^1.0.0",
+    "@elah/react": "^1.0.0",
+    "@elah/timeline": "^1.0.0",
     "immer": "^10.1.1",
     "zustand": "^5.0.3"
   },

package/dist/editor/EditorProvider.d.ts

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

package/dist/editor/EditorProvider.js

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