@elah/editor 0.3.1 → 0.4.0

package/README.md

@@ -16,7 +16,9 @@ Ships `EditorProvider`, `Preview` (WebGL2 canvas + interactive transform overlay
 npm install @elah/editor
 ```
 
-Peer dependencies: `react`, `react-dom` >= 18.
+Peer dependencies: `react`, `react-dom` >= 18, `lucide-react` >= 0.400.0 (used by the
+bundled `@elah/timeline` UI for clip icons — install it alongside `react`/`react-dom`
+even though nothing in your own code imports it).
 
 **Bundle size:** ~10 KiB gzipped for the editor layer (51 KiB raw); ~63 KiB gzipped for the full SDK graph (`core` + `timeline` + `editor`, 330 KiB raw). `mediabunny` is injected, never bundled — see [BUNDLE_STRATEGY.md](../../BUNDLE_STRATEGY.md).
 
@@ -142,12 +144,26 @@ Runs in a web worker. Reuses `resolveTimeline` + the GPU renderer's placement ma
 ## Package layers
 
 ```
-@elah/core      — engine, playback, resolver, stores, media, export (framework-agnostic)
-@elah/timeline  — React timeline UI components and hooks
-@elah/editor    — EditorProvider, Preview, AssetPanel + re-exports everything above
+@elah/core      — engine, playback, resolver, vanilla stores, media, export (framework-agnostic)
+@elah/react     — React bindings: EditorContext, store hooks, audio hooks
+@elah/timeline  — React timeline UI components and hooks (consumes @elah/core + @elah/react)
+@elah/editor    — EditorProvider, Preview, AssetPanel + re-exports @elah/core, @elah/react, @elah/timeline
+@elah/cli       — headless split/trim/build/export/serve on top of @elah/core
 ```
 
-Use `@elah/editor` for the full experience. Use `@elah/core` directly for headless or custom rendering pipelines.
+Use `@elah/editor` for the full in-browser experience. Use `@elah/core` directly
+for headless or custom rendering pipelines, or pair it with `@elah/react` if you
+want the hooks without the timeline UI. Use `@elah/cli` for automation,
+AI-generation pipelines, and server-side rendering.
+
+**One active project per page.** `@elah/core`'s stores (`tracksStore`,
+`playbackStore`, `selectionStore`, `transitionsStore`, `mediaLibraryStore`) are
+module-level singletons, and `<EditorProvider>` wires the `TimelineEngine` /
+`PlaybackEngine` it creates into those same shared stores. Mounting a second
+`<EditorProvider>` on the same page (two independent projects at once) will have
+both instances overwrite each other's state — there is currently no per-instance
+scoping. If you need multiple concurrent editors, isolate each in its own
+tab/window/iframe.
 
 ---
 
@@ -156,5 +172,6 @@ Use `@elah/editor` for the full experience. Use `@elah/core` directly for headle
 - [Website](https://www.elah.dev)
 - [GitHub](https://github.com/elahlabs/elah)
 - [Discord](https://discord.gg/8CeZ2XbPy)
+- [Headless CLI — @elah/cli](https://www.npmjs.com/package/@elah/cli)
 - [License](https://github.com/elahlabs/elah/blob/main/LICENSE)
 - [Commercial licensing](mailto:paul@elah.dev)

package/dist/editor/AssetPanel/AssetPanel.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { importFiles, importUrl, MEDIA_DRAG_MIME, mediaDragKindMime, useMediaLibrary, useMediaLibraryStore, } from '@elah/core';
+import { importFiles, importUrl, MEDIA_DRAG_MIME, mediaDragKindMime, } from '@elah/core';
+import { useMediaLibrary, useMediaLibraryStore } from '@elah/react';
 import { cn } from '@elah/timeline';
 import { isActivationKey, useAssetActivation, } from '../activation';
 const KIND_ICONS = {

package/dist/editor/EditorProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
-import { TimelineEngine, PlaybackEngine, useTracksStore, usePlaybackStore, useTransitionsStore, EditorContext, installTraceGlobal, trace, } from '@elah/core';
+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 = useMemo(() => new TimelineEngine({
         fps,

package/dist/editor/Preview/MediaTransformOverlay.js

@@ -1,6 +1,7 @@
 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 { resolveDrawRect, transformFromContainRect, computeContainViewport, } from '@elah/core';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore, useMediaLibraryStore, } from '@elah/react';
 import { useResolvedScene } from '../useResolvedScene';
 const MIN_BOX_PX = 28;
 const BOX_PAD = 0;

package/dist/editor/Preview/Preview.js

@@ -2,8 +2,8 @@ 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, useMediaLibraryStore, preloadProjectImages, warmImageSrc } from '@elah/core';
+import { useTimelineEngine, usePlaybackEngine, useMediaLibraryStore } from '@elah/react';
+import { AudioPlaybackController, preloadProjectImages, warmImageSrc } from '@elah/core';
 import { cn } from '@elah/timeline';
 import { TextOverlay } from './TextOverlay';
 import { ShapeOverlay } from './ShapeOverlay';

package/dist/editor/Preview/ShapeOverlay.js

@@ -1,6 +1,7 @@
 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 { computeContainViewport } from '@elah/core';
+import { useTimelineEngine, useSelectionStore, usePlaybackStore, } from '@elah/react';
 import { useResolvedScene } from '../useResolvedScene';
 const DEFAULT_SCALE = 0.5;
 const DEFAULT_CENTER = 0.5;

package/dist/editor/Preview/StageBorder.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { computeContainViewport, useTracksStore } from '@elah/core';
+import { computeContainViewport } from '@elah/core';
+import { useTracksStore } from '@elah/react';
 export function StageBorder() {
     const rootRef = useRef(null);
     const [size, setSize] = useState({ width: 0, height: 0 });

package/dist/editor/Preview/TextOverlay.js

@@ -1,6 +1,7 @@
 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 { 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;

package/dist/editor/SourcePanel/SourcePanel.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { importFiles, importUrl, MEDIA_DRAG_MIME, mediaDragKindMime, useMediaLibrary, useMediaLibraryStore, } from '@elah/core';
+import { importFiles, importUrl, MEDIA_DRAG_MIME, mediaDragKindMime, } from '@elah/core';
+import { useMediaLibrary, useMediaLibraryStore } from '@elah/react';
 import { ELEMENT_DRAG_MIME, cn } from '@elah/timeline';
 import { isActivationKey, useAssetActivation, } from '../activation';
 const KIND_ICONS = { video: '▶', audio: '♪', image: '◻' };

package/dist/editor/activation.d.ts

@@ -1,4 +1,4 @@
-import { type MediaAsset } from '@elah/core';
+import type { MediaAsset } from '@elah/core';
 import { type ElementKind, type ShapeVariant } from '@elah/timeline';
 export interface ActivationToast {
     message: string;

package/dist/editor/activation.js

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { EditorContext } from '@elah/core';
+import { EditorContext } from '@elah/react';
 import { insertElement, insertMediaAsset, } from '@elah/timeline';
 export function isActivationKey(key) {
     return key === 'Enter' || key === ' ';

package/dist/editor/useResolvedScene.js

@@ -1,5 +1,6 @@
 import { useMemo, useRef } from 'react';
-import { useTimelineEngine, useTracksStore, usePlaybackStore, resolveTimeline, } from '@elah/core';
+import { resolveTimeline } from '@elah/core';
+import { useTimelineEngine, useTracksStore, usePlaybackStore, } from '@elah/react';
 export function useResolvedScene(frameOverride) {
     const engine = useTimelineEngine();
     const playbackFrame = usePlaybackStore((s) => (s.isPlaying ? null : s.currentFrame));

package/dist/index.d.ts

@@ -18,11 +18,12 @@ export { AudioPlaybackController } from '@elah/core';
 export type { AudioPlaybackControllerOptions } from '@elah/core';
 export { defaultAudioResolver } from '@elah/core';
 export type { AudioResolver } from '@elah/core';
-export { useMediaLibrary, useMediaLibraryStore, MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl } from '@elah/core';
+export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl } from '@elah/core';
+export { useMediaLibrary, useMediaLibraryStore } from '@elah/react';
 export type { MediaAsset, MediaKind, DragMediaPayload, ImportFilesOptions, ImportFilesResult, SkippedImport } from '@elah/core';
-export { useTracksStore } from '@elah/core';
-export { usePlaybackStore } from '@elah/core';
-export { useSelectionStore } from '@elah/core';
+export { useTracksStore } from '@elah/react';
+export { usePlaybackStore } from '@elah/react';
+export { useSelectionStore } from '@elah/react';
 export { createVideoClip } from '@elah/core';
 export { createAudioClip } from '@elah/core';
 export { createTextClip } from '@elah/core';
@@ -48,7 +49,9 @@ export { ELEMENT_DRAG_MIME } 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 { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/core';
+export { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
+export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';
+export type { AudioMixerApi, MasterVolumeApi, TrackLevel } from '@elah/react';
 export { useResolvedScene } from './editor/useResolvedScene';
 export { AssetPanel } from './editor/AssetPanel';
 export type { AssetPanelProps } from './editor/AssetPanel';

package/dist/index.js

@@ -7,10 +7,11 @@ export { createDefaultDemuxerFactory, createMediabunnyBackend, isMediabunnyCompa
 export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from '@elah/core';
 export { AudioPlaybackController } from '@elah/core';
 export { defaultAudioResolver } from '@elah/core';
-export { useMediaLibrary, useMediaLibraryStore, MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl } from '@elah/core';
-export { useTracksStore } from '@elah/core';
-export { usePlaybackStore } from '@elah/core';
-export { useSelectionStore } from '@elah/core';
+export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl } from '@elah/core';
+export { useMediaLibrary, useMediaLibraryStore } from '@elah/react';
+export { useTracksStore } from '@elah/react';
+export { usePlaybackStore } from '@elah/react';
+export { useSelectionStore } from '@elah/react';
 export { createVideoClip } from '@elah/core';
 export { createAudioClip } from '@elah/core';
 export { createTextClip } from '@elah/core';
@@ -30,7 +31,8 @@ export { useTimelineDrop } from '@elah/timeline';
 export { insertMediaAsset, insertElement } from '@elah/timeline';
 export { ELEMENT_DRAG_MIME } from '@elah/timeline';
 export { EditorProvider } from './editor/EditorProvider';
-export { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/core';
+export { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
+export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';
 export { useResolvedScene } from './editor/useResolvedScene';
 export { AssetPanel } from './editor/AssetPanel';
 export { ElementsPanel } from './editor/ElementsPanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elah/editor",
-  "version": "0.3.1",
+  "version": "0.4.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",
@@ -55,11 +55,13 @@
   "license": "Apache-2.0",
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.400.0"
   },
   "dependencies": {
-    "@elah/core": "^0.3.0",
-    "@elah/timeline": "^0.3.0",
+    "@elah/core": "^0.4.0",
+    "@elah/react": "^0.4.0",
+    "@elah/timeline": "^0.4.0",
     "immer": "^10.1.1",
     "zustand": "^5.0.3"
   },
@@ -67,6 +69,7 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "autoprefixer": "^10.4.21",
+    "lucide-react": "^0.511.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",