@elah/editor 0.2.1 → 0.3.1

package/package.json

@@ -1,69 +1,75 @@
-{
-  "name": "@elah/editor",
-  "version": "0.2.1",
-  "description": "Full React video editor SDK — timeline UI, WebGL2 preview, media library, drag and drop, and MP4 export",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json"
-  },
-  "keywords": [
-    "video-editor",
-    "react",
-    "sdk",
-    "timeline",
-    "webgl",
-    "webgl2",
-    "gpu",
-    "mp4",
-    "export",
-    "media-editor",
-    "browser-video-editor",
-    "video-sdk",
-    "asset-panel",
-    "preview",
-    "typescript"
-  ],
-  "homepage": "https://www.elah.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/elahlabs/elah.git"
-  },
-  "bugs": {
-    "url": "https://github.com/elahlabs/elah/issues"
-  },
-  "license": "SEE LICENSE IN LICENSE",
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "dependencies": {
-    "@elah/core": "^0.2.1",
-    "@elah/timeline": "^0.2.1",
-    "immer": "^10.1.1",
-    "zustand": "^5.0.3"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.6"
-  }
-}
+{
+  "name": "@elah/editor",
+  "version": "0.3.1",
+  "description": "Full React video editor SDK — timeline UI, WebGL2 preview, media library, drag and drop, and MP4 export",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": ["*.css"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && tailwindcss -c ./tailwind.config.ts -i ./src/styles/index.css -o ./dist/styles.css --minify"
+  },
+  "keywords": [
+    "video-editor",
+    "react",
+    "sdk",
+    "timeline",
+    "webgl",
+    "webgl2",
+    "gpu",
+    "mp4",
+    "export",
+    "media-editor",
+    "browser-video-editor",
+    "video-sdk",
+    "asset-panel",
+    "preview",
+    "typescript"
+  ],
+  "homepage": "https://www.elah.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elahlabs/elah.git"
+  },
+  "bugs": {
+    "url": "https://github.com/elahlabs/elah/issues"
+  },
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@elah/core": "^0.3.0",
+    "@elah/timeline": "^0.3.0",
+    "immer": "^10.1.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.6"
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/styles/tokens.css

@@ -0,0 +1,204 @@
+/**
+ * @elah/editor — CSS token layer
+ *
+ * Standalone dark defaults for consumers who do NOT use the elah web-app
+ * design system (globals.css). Values mirror the cool-navy palette from
+ * globals.css .elah-root so the web-app and library stay visually in sync.
+ *
+ * Web-app consumers: import globals.css as usual — it defines .elah-root with
+ * --elah-* and the Figma-derived theme (cyan accent, white playhead, etc.).
+ *
+ * Third-party consumers: import this file and optionally override .elah-root
+ * in your own stylesheet:
+ *
+ *   .elah-root {
+ *     --elah-accent: #6366f1;
+ *     --elah-bg-card: #1e1e2e;
+ *   }
+ */
+
+.elah-root {
+  /* ── Surfaces — cool near-black navy ──────────────────────────────────── */
+  --elah-bg:            #06070a; /* deepest bg — canvas, input fields      */
+  --elah-bg-secondary:  #0a0d14; /* second-deepest — timeline track areas  */
+  --elah-bg-panel:      #121722; /* panels, sidebars, ruler                */
+  --elah-bg-card:       #0d1017; /* cards, list rows, inactive track label */
+  --elah-bg-elevated:   #171d2b; /* hover, context menus, modals           */
+  --elah-bg-highest:    #1e2433; /* chips, scrollbar thumb                 */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --elah-border:        #232938; /* structural edges                       */
+  --elah-border-subtle: #1a1f2b; /* hairline — thumbnail frames, dividers  */
+  --elah-outline:       #2d3548; /* interactive / focus ring               */
+
+  /* ── Text ─────────────────────────────────────────────────────────────── */
+  --elah-text:          #f3f4f6; /* primary                                */
+  --elah-text-muted:    #9ca3af; /* labels, secondary, inactive            */
+
+  /* ── Accent — Cyan (Figma Export button #00c2ff; dark text on fill) ───── */
+  --elah-accent:        #00c2ff;
+  --elah-accent-hover:  #2bcbff;
+  --elah-accent-dim:    #7adcff; /* highlights, underlines, focus rings    */
+  --elah-accent-glow:   rgba(0, 194, 255, 0.35);
+  --elah-accent-soft:   rgba(0, 194, 255, 0.12);
+  --elah-accent-text:   #06212b; /* text on a filled accent surface        */
+
+  /* ── Semantic ─────────────────────────────────────────────────────────── */
+  --elah-color-error:   #f87171; /* delete, destructive actions            */
+
+  /* ── Timeline (white playhead, cool-gray ticks) ───────────────────────── */
+  --elah-playhead:      #ffffff; /* playhead needle                        */
+  --elah-tick-color:    #394146; /* ruler tick marks                       */
+  --elah-tick-label:    #7a858b; /* ruler timecode labels                  */
+
+  /* ── Clip colours — video ─────────────────────────────────────────────── */
+  --elah-clip-video-top:    #3b82f6;
+  --elah-clip-video-mid:    #2563eb;
+  --elah-clip-video-bottom: #1d4ed8;
+  --elah-clip-video-accent: #60a5fa;
+
+  /* ── Clip colours — audio (teal-green at rest; blue when selected) ────── */
+  --elah-clip-audio-top:    #1c8160;
+  --elah-clip-audio-mid:    #115843;
+  --elah-clip-audio-bottom: #0c2a26; /* exact body */
+  --elah-clip-audio-accent: #0d4d3c; /* exact border */
+
+  /* ── Clip colours — text (orange / rust) ──────────────────────────────── */
+  --elah-clip-text-top:    #ad5621;
+  --elah-clip-text-mid:    #8f3f18;
+  --elah-clip-text-bottom: #7a2e10; /* exact body */
+  --elah-clip-text-accent: #ad5621; /* exact border */
+
+  /* ── Clip colours — image ─────────────────────────────────────────────── */
+  --elah-clip-image-top:    #fbbf24;
+  --elah-clip-image-mid:    #d97706;
+  --elah-clip-image-bottom: #b45309;
+  --elah-clip-image-accent: #fcd34d;
+
+  /* ── Clip colours — shape (indigo) ───────────────────────────────────── */
+  --elah-clip-shape-top:    #818cf8;
+  --elah-clip-shape-mid:    #6366f1;
+  --elah-clip-shape-bottom: #4f46e5;
+  --elah-clip-shape-accent: #a5b4fc;
+
+  /* ── Clip colours — freehand (teal-green) ────────────────────────────── */
+  --elah-clip-freehand-top:    #34d399;
+  --elah-clip-freehand-mid:    #10b981;
+  --elah-clip-freehand-bottom: #059669;
+  --elah-clip-freehand-accent: #6ee7b7;
+
+  /* ── Kind tag colours — panel chips (dark defaults) ──────────────────── */
+  --elah-tag-video-fg:  #93c5fd;
+  --elah-tag-video-bg:  rgba(37, 99, 235, 0.2);
+  --elah-tag-audio-fg:  #86efac;
+  --elah-tag-audio-bg:  rgba(22, 163, 74, 0.2);
+  --elah-tag-image-fg:  #fcd34d;
+  --elah-tag-image-bg:  rgba(245, 158, 11, 0.2);
+
+  /* ── Element type colours — palette tiles ────────────────────────────── */
+  --elah-tag-text-fg:         #f0b483;
+  --elah-tag-text-bg:         rgba(173, 86, 33, 0.25);
+  --elah-tag-text-border:     rgba(173, 86, 33, 0.4);
+
+  --elah-tag-shape-fg:        #a5b4fc;
+  --elah-tag-shape-bg:        rgba(99, 102, 241, 0.2);
+  --elah-tag-shape-border:    rgba(99, 102, 241, 0.4);
+
+  --elah-tag-freehand-fg:     #6ee7b7;
+  --elah-tag-freehand-bg:     rgba(16, 185, 129, 0.18);
+  --elah-tag-freehand-border: rgba(16, 185, 129, 0.38);
+
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --elah-font-ui:   system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --elah-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
+
+  /* ── Geometry ─────────────────────────────────────────────────────────── */
+  --elah-radius-sm: 6px;
+  --elah-radius-md: 8px;
+
+  /* ── Timeline chrome (dark defaults) ──────────────────────────────────── */
+  --elah-text-on-clip: rgba(255, 255, 255, 0.95);
+
+  --elah-selection-border: #00c2ff;
+  --elah-selection-glow:   rgba(0, 194, 255, 0.4);
+
+  --elah-transition-line:       rgba(107, 140, 255, 0.9);
+  --elah-transition-line-hover: rgba(255, 255, 255, 0.55);
+  --elah-transition-line-idle:  rgba(255, 255, 255, 0.18);
+  --elah-transition-fill:       #3c3e94;
+  --elah-transition-stroke:     #525480;
+  --elah-transition-add-fill:   rgba(255, 255, 255, 0.12);
+  --elah-transition-add-stroke: rgba(255, 255, 255, 0.7);
+
+  --elah-menu-bg:     #1e2433;
+  --elah-menu-border: #2d3548;
+  --elah-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+
+  --elah-popover-bg:               #1a1f2b;
+  --elah-popover-border:           #2d3548;
+  --elah-popover-shadow:           0 8px 32px rgba(0, 0, 0, 0.6);
+  --elah-popover-option-bg:        #232938;
+  --elah-popover-option-bg-hover:  #2d3548;
+  --elah-popover-option-bg-active: #3b4a6b;
+  --elah-popover-accent:           #6b8cff;
+  --elah-popover-accent-text:      #a5b4fc;
+  --elah-popover-icon:             #9ca3af;
+
+  --elah-dialog-overlay:          rgba(5, 7, 12, 0.6);
+  --elah-dialog-bg:               #171d2b;
+  --elah-dialog-border:           #232938;
+  --elah-dialog-shadow:           0 24px 60px rgba(0, 0, 0, 0.55);
+  --elah-dialog-option-bg:        #1b2230;
+  --elah-dialog-option-bg-hover:  #222b3c;
+  --elah-dialog-option-border:    #2a3142;
+  --elah-dialog-primary-border:   #2563eb;
+  --elah-dialog-primary-bg:       rgba(37, 99, 235, 0.16);
+  --elah-dialog-primary-bg-hover: rgba(37, 99, 235, 0.28);
+
+  --elah-danger-text:     #ff6b6b;
+  --elah-danger-text-alt: #f87171;
+  --elah-danger-bg-hover: rgba(255, 107, 107, 0.12);
+  --elah-danger-border:   #3f2a2a;
+
+  /* Flat clip treatment to match the Figma — minimal gloss/highlight/shadow. */
+  --elah-effect-gloss:                  rgba(255, 255, 255, 0.04);
+  --elah-effect-inner-highlight:        rgba(255, 255, 255, 0.04);
+  --elah-effect-inner-highlight-strong: rgba(255, 255, 255, 0.06);
+  --elah-effect-clip-shadow:            0 1px 2px rgba(0, 0, 0, 0.25);
+  --elah-effect-tile-separator:         rgba(0, 0, 0, 0.28);
+  --elah-effect-waveform:               rgba(255, 255, 255, 0.85);
+  --elah-effect-placeholder-bg:         rgba(0, 0, 0, 0.22);
+  --elah-effect-placeholder-border:     rgba(255, 255, 255, 0.08);
+  --elah-effect-trim-scrim:             rgba(0, 0, 0, 0.35);
+  --elah-effect-label-shadow:           0 1px 2px rgba(0, 0, 0, 0.45);
+  --elah-effect-delete-btn-bg:          rgba(0, 0, 0, 0.5);
+  --elah-effect-delete-btn-border:      rgba(255, 255, 255, 0.35);
+  --elah-effect-delete-btn-text:        #ffffff;
+
+  /* ── Editor overlays / toasts / preview (dark defaults) ────────────────── */
+  --elah-preview-bg:       #06070a;
+  --elah-stage-border:     rgba(0, 194, 255, 0.45);
+  --elah-stage-glow:       0 0 20px rgba(0, 194, 255, 0.08);
+  --elah-selection-color:  #4c9aff;
+  --elah-selection-handle: #ffffff;
+  --elah-danger-bg:        #3a2418;
+  --elah-info-bg:          #1a2433;
+  --elah-info-border:      #355070;
+  --elah-info-text:        #c8d8f0;
+}
+
+/* Audio clips render a tinted waveform on a dark body — teal-green at rest,
+   blue when selected/active. The selected rule overrides the audio clip vars on
+   the clip element itself so the `from-clip-audio-*` gradient utilities repaint;
+   --elah-effect-waveform cascades to the waveform bars. Hooks: data-clip-type /
+   data-selected on the ClipBlock root. */
+.elah-root [data-clip-type='audio'] {
+  --elah-effect-waveform: #248f6c; /* exact green waveform */
+}
+.elah-root [data-clip-type='audio'][data-selected='true'] {
+  --elah-clip-audio-top:    #2b4a82;
+  --elah-clip-audio-mid:    #1d3460;
+  --elah-clip-audio-bottom: #162245; /* exact blue body */
+  --elah-clip-audio-accent: #4370b2; /* exact blue border */
+  --elah-effect-waveform:   #4370b2; /* exact blue waveform */
+}