@elah/editor 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,133 @@
+# Elah Community License (ECL) v1.0
+
+Copyright (c) 2026 Elah Labs Private Limited
+
+All rights reserved.
+
+---
+
+## 1. Purpose
+
+The Elah Community License (ECL) is intended to support open development, community adoption, and commercial sustainability of the Elah video editing engine and related software.
+
+This license allows developers and organizations to use, modify, and integrate the Software into their own applications while protecting the Software from unauthorized resale, rebranding, or competing hosted platforms.
+
+---
+
+## 2. Definitions
+
+* **"Software"** means the source code, binaries, assets, examples, documentation, and related materials distributed under this license.
+* **"Licensor"** means Elah Labs Private Limited and its contributors.
+* **"You"** means any individual or legal entity using the Software.
+* **"Derivative Work"** means any modified version, extension, adaptation, or enhancement of the Software.
+* **"Hosted Service"** means a commercial product or platform where the Software itself is exposed as a primary service, editor, API, infrastructure layer, or SaaS offering to third parties over a network.
+
+---
+
+## 3. Permitted Uses
+
+Subject to the terms of this license, you may:
+
+* Use the Software for personal, educational, research, and commercial internal purposes.
+* Modify and extend the Software.
+* Integrate or embed the Software into your own applications, platforms, or workflows.
+* Use the Software in commercial products that are not primarily competing video editing platforms.
+* Self-host the Software for internal use.
+* Create plugins, integrations, extensions, or tooling around the Software.
+* Distribute Derivative Works under this same license.
+* Provide consulting, support, training, or integration services related to the Software.
+
+---
+
+## 4. Restrictions
+
+You may not:
+
+* Sell, sublicense, or redistribute the Software as a standalone product.
+* Rebrand the Software and present it as your own core editor engine or framework.
+* Offer the Software, or substantially similar functionality derived from it, as a commercial Hosted Service or SaaS platform without prior written permission from the Licensor.
+* Build or operate a competing commercial browser-based video editor primarily derived from the Software.
+* Remove or alter copyright notices, attribution notices, or license terms included with the Software.
+* Misrepresent your relationship with the Licensor or imply official partnership without permission.
+
+---
+
+## 5. Attribution
+
+Any public distribution of the Software or Derivative Works must include:
+
+* A copy of this license
+* Appropriate copyright notices
+* Clear indication of modifications made to the Software
+* Attribution to Elah
+
+Suggested attribution:
+
+> Powered by Elah
+
+---
+
+## 6. Commercial Licensing
+
+A separate commercial license is required for:
+
+* Hosted editor platforms or SaaS offerings
+* White-label editing platforms
+* Commercial infrastructure services built primarily around the Software
+* Enterprise redistribution agreements
+* Uses outside the permissions granted by this license
+
+Commercial licensing inquiries:
+
+[paul@elah.dev](mailto:paul@elah.dev)
+
+---
+
+## 7. Contributions
+
+Unless otherwise agreed in writing, any contribution intentionally submitted for inclusion in the Software shall be licensed under the terms of this license.
+
+---
+
+## 8. Disclaimer of Warranty
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+---
+
+## 9. Limitation of Liability
+
+IN NO EVENT SHALL THE LICENSOR OR CONTRIBUTORS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR ITS USE.
+
+---
+
+## 10. Termination
+
+This license automatically terminates if you fail to comply with its terms. Upon termination, all rights granted under this license immediately cease.
+
+---
+
+## 11. Governing Law
+
+This license shall be governed by the laws applicable in the Licensor's jurisdiction, without regard to conflict of law principles.
+
+---
+
+## 12. Entire Agreement
+
+This license constitutes the complete agreement regarding the Software and supersedes all prior agreements relating to its subject matter.
+
+---
+
+## 13. License Updates
+
+The Licensor may publish updated versions of this license in the future. Continued use of the Software after such updates constitutes acceptance of the updated license terms.
+
+---
+
+## 14. Contact
+
+For licensing questions or commercial inquiries:
+
+* Email: [paul@elah.dev](mailto:paul@elah.dev)
+* Website: https://elah.dev

package/README.md

@@ -1,127 +1,160 @@
-# @elah/editor
-
-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.
-
-[![npm](https://img.shields.io/npm/v/@elah/editor)](https://www.npmjs.com/package/@elah/editor)
-[![license](https://img.shields.io/badge/license-ECL--1.0-blue)](https://github.com/elahlabs/elah/blob/main/LICENSE)
-
----
-
-## Install
-
-```bash
-npm install @elah/editor
-```
-
-Peer dependencies: `react`, `react-dom` >= 18.
-
----
-
-## Quick start
-
-```tsx
-import { EditorProvider, Timeline } from '@elah/editor'
-
-function App() {
-  return (
-    <EditorProvider fps={30}>
-      <Timeline style={{ height: 300 }} />
-    </EditorProvider>
-  )
-}
-```
-
----
-
-## With preview and asset panel
-
-```tsx
-import { EditorProvider, Timeline, Preview, AssetPanel, createMediabunnyBackend } from '@elah/editor'
-import * as mediabunny from 'mediabunny'
-
-const demuxerFactory = () =>
-  createMediabunnyBackend(mediabunny, {
-    blobResolver: (src) => fetch(src).then((r) => r.blob()),
-  })
-
-function App() {
-  return (
-    <EditorProvider fps={30}>
-      <div style={{ display: 'flex', height: '100vh' }}>
-        <AssetPanel style={{ width: 220 }} />
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-          <Preview demuxerFactory={demuxerFactory} style={{ flex: 1 }} />
-          <Timeline style={{ height: 300 }} />
-        </div>
-      </div>
-    </EditorProvider>
-  )
-}
-```
-
----
-
-## Import media
-
-```ts
-import { importFiles, useMediaLibrary } from '@elah/editor'
-
-await importFiles(Array.from(fileList))
-
-// Subscribe in React
-const assets = useMediaLibrary(s => s.assets)
-```
-
----
-
-## Export to MP4
-
-```ts
-import { exportVideo } from '@elah/editor'
-
-const blob = await exportVideo(engine.getProject(), {
-  videoBitrate: 8_000_000,
-  onProgress: ({ frame, totalFrames }) => {
-    console.log(`${Math.round((frame / totalFrames) * 100)}%`)
-  },
-})
-```
-
-Runs in a web worker. Reuses `resolveTimeline` + the GPU renderer's placement math.
-
----
-
-## Keyboard shortcuts
-
-| Key | Action |
-|---|---|
-| `Space` | Play / pause |
-| `S` | Split clip at playhead |
-| `Delete` / `Backspace` | Delete selected clip(s) |
-| `Ctrl/Cmd + C` | Copy |
-| `Ctrl/Cmd + V` | Paste at playhead |
-| `Ctrl/Cmd + Z` | Undo |
-| `Ctrl/Cmd + Shift + Z` | Redo |
-| `Ctrl/Cmd + scroll` | Zoom |
-| `← / →` | Step one frame |
-
----
-
-## 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
-```
-
-Use `@elah/editor` for the full experience. Use `@elah/core` directly for headless or custom rendering pipelines.
-
----
-
-## Links
-
-- [Website](https://www.elah.dev)
-- [GitHub](https://github.com/elahlabs/elah)
-- [License](https://github.com/elahlabs/elah/blob/main/LICENSE)
-- [Commercial licensing](mailto:contact@elah.dev)
+# @elah/editor
+
+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 entire `@elah/core` and `@elah/timeline` API. Supports video, image, text, **shape**, and **freehand** clips, **multi-track audio**, and MP4 export.
+
+[![npm](https://img.shields.io/npm/v/@elah/editor)](https://www.npmjs.com/package/@elah/editor)
+[![gzip size](https://img.shields.io/badge/gzip-~63%20KiB%20full%20SDK-brightgreen)](../../BUNDLE_STRATEGY.md)
+[![license](https://img.shields.io/badge/license-ECL--1.0-blue)](https://github.com/elahlabs/elah/blob/main/LICENSE)
+
+---
+
+## Install
+
+```bash
+npm install @elah/editor
+```
+
+Peer dependencies: `react`, `react-dom` >= 18.
+
+**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).
+
+---
+
+## Quick start
+
+```tsx
+import { EditorProvider, Timeline } from '@elah/editor'
+
+function App() {
+  return (
+    <EditorProvider fps={30}>
+      <Timeline style={{ height: 300 }} />
+    </EditorProvider>
+  )
+}
+```
+
+---
+
+## Styling
+
+Import the compiled stylesheets once. They are plain CSS — your app does **not**
+need Tailwind, and no utility class names leak into your global scope (preflight
+is disabled, so nothing resets your elements):
+
+```ts
+import '@elah/timeline/styles.css'
+import '@elah/editor/styles.css'
+import '@elah/editor/styles/tokens.css' // --elah-* dark defaults (standalone)
+```
+
+When embedding inside an app that already defines `.elah-root` (mapping `--elah-*`
+onto its own design system), skip `tokens.css`. Re-theme or white-label by
+overriding `--elah-*` variables in your own `.elah-root` scope — see
+[design-tokens.md](https://github.com/elahlabs/elah/blob/main/docs/design-tokens.md).
+
+---
+
+## With preview and asset panel
+
+```tsx
+import { EditorProvider, Timeline, Preview, AssetPanel, createDefaultDemuxerFactory } from '@elah/editor'
+
+const demuxerFactory = createDefaultDemuxerFactory()
+
+function App() {
+  return (
+    <EditorProvider fps={30}>
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <AssetPanel style={{ width: 220 }} />
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+          <Preview demuxerFactory={demuxerFactory} style={{ flex: 1 }} />
+          <Timeline style={{ height: 300 }} />
+        </div>
+      </div>
+    </EditorProvider>
+  )
+}
+```
+
+---
+
+## Import media
+
+```ts
+import { importFiles, importUrl, useMediaLibrary } from '@elah/editor'
+
+await importFiles(Array.from(fileList))   // local files
+await importUrl('https://example.com/clip.mp4') // remote URL (also importBlob for blobs)
+
+// Subscribe in React — useMediaLibrary() takes no arguments and returns
+// { assets, getAsset, removeAsset, updateAsset } with assets in insertion order.
+const { assets } = useMediaLibrary()
+```
+
+### Programmatic insertion (no drag)
+
+```ts
+import { insertMediaAsset } from '@elah/editor'
+
+// Place an imported asset onto the timeline — powers tap-to-add on touch.
+// Returns a typed InsertAssetResult ({ ok, kind, trackId, clipIds } | { ok:false, reason }).
+const result = await insertMediaAsset(engine, assetId, { desiredStartFrame: 0 })
+```
+
+---
+
+## Export to MP4
+
+```ts
+import { exportVideo } from '@elah/editor'
+
+const blob = await exportVideo(engine.getProject(), {
+  videoBitrate: 8_000_000,
+  onProgress: ({ frame, totalFrames }) => {
+    console.log(`${Math.round((frame / totalFrames) * 100)}%`)
+  },
+})
+```
+
+Runs in a web worker. Reuses `resolveTimeline` + the GPU renderer's placement math.
+
+---
+
+## Keyboard shortcuts
+
+| Key | Action |
+|---|---|
+| `Space` | Play / pause |
+| `S` | Split clip at playhead |
+| `Delete` / `Backspace` | Delete selected clip(s) |
+| `Ctrl/Cmd + C` | Copy |
+| `Ctrl/Cmd + V` | Paste at playhead |
+| `Ctrl/Cmd + Z` | Undo |
+| `Ctrl/Cmd + Shift + Z` / `Ctrl/Cmd + Y` | Redo |
+| `Ctrl/Cmd + scroll` | Zoom |
+| `← / →` | Step one frame |
+
+---
+
+## 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
+```
+
+Use `@elah/editor` for the full experience. Use `@elah/core` directly for headless or custom rendering pipelines.
+
+---
+
+## Links
+
+- [Website](https://www.elah.dev)
+- [GitHub](https://github.com/elahlabs/elah)
+- [Discord](https://discord.gg/8CeZ2XbPy)
+- [License](https://github.com/elahlabs/elah/blob/main/LICENSE)
+- [Commercial licensing](mailto:paul@elah.dev)

package/dist/editor/AssetPanel/AssetPanel.d.ts

@@ -1,6 +1,9 @@
 import { type CSSProperties } from 'react';
+import { type AssetActivationHandler } from '../activation';
 export interface AssetPanelProps {
     style?: CSSProperties;
     className?: string;
+    activateOnTap?: boolean;
+    onAssetActivate?: AssetActivationHandler;
 }
-export declare function AssetPanel({ style, className }: AssetPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetPanel({ style, className, activateOnTap, onAssetActivate, }: AssetPanelProps): import("react/jsx-runtime").JSX.Element;