Editor

import { EditorProvider, type InitialTrackConfig } from '@elah/editor'

const tracks: InitialTrackConfig[] = [
  { kind: 'video', name: 'Video / Image' },
  { kind: 'audio', name: 'Audio' },
  { kind: 'elements', name: 'Elements' },
]

function App() {
  return (
    <EditorProvider
      fps={30}          // frames per second (required)
      initialTracks={tracks}
    >
      {/* All children can access engine + stores */}
    </EditorProvider>
  )
}

import {
  Preview,
  createDefaultDemuxerFactory,
  type PreviewHandle,
} from '@elah/editor'
import { useRef } from 'react'

// Build the factory once outside the component
const demuxerFactory = createDefaultDemuxerFactory()

function MyPreview() {
  const ref = useRef<PreviewHandle>(null)

  // PreviewHandle exposes:
  // ref.current.getCanvas()   → HTMLCanvasElement | null
  // ref.current.getRenderer() → GpuRenderer | null

  return (
    <Preview
      ref={ref}
      demuxerFactory={demuxerFactory}
      enableAudio={true}    // default: true
      style={{ flex: 1 }}
    />
  )
}

import { AssetPanel } from '@elah/editor'

// Minimal usage
<AssetPanel style={{ width: 240, minHeight: 0, overflowY: 'auto' }} />

// The panel uses useMediaLibrary() internally. The hook returns the assets
// plus import/remove helpers — importFiles takes an Iterable<File>:
import { useMediaLibrary } from '@elah/editor'

function CustomLibrary() {
  const { assets, importFiles, removeAsset } = useMediaLibrary()

  const handleFileDrop = async (files: FileList) => {
    const result = await importFiles(files)
    console.log('imported:', result.imported)
    console.log('skipped:', result.skipped)
  }

  return (
    <div onDrop={(e) => handleFileDrop(e.dataTransfer.files)}>
      {assets.map((asset) => (
        <div key={asset.id}>{asset.name}</div>
      ))}
    </div>
  )
}

interface Transform {
  x: number        // position, normalized 0..1 of stage width
  y: number        // position, normalized 0..1 of stage height
  scale: number    // uniform scale factor (1 = native size)
  rotation: number // radians, positive = clockwise
  anchor: { x: number; y: number } // 0..1 within the clip's own box
}

// Set transform programmatically (updateClip needs the clip's trackId)
engine.updateClip(clipId, trackId, {
  transform: { x: 0.5, y: 0.4, scale: 1.2, rotation: 0, anchor: { x: 0.5, y: 0.5 } },
})

// The transform flows to both renderers:
// GpuRenderer: applies to WebGL2 textured quad
// ExportWorker: applies via resolveDrawRect() placement math

// Add a text clip. The 'text' option carries content + style
// (TextClipMetadata); it is required when type is 'text'.
engine.addClip({
  trackId: textTrack.id,
  type: 'text',
  startFrame: 0,
  durationFrames: 90,
  name: 'Title',
  text: {
    content: 'Hello World',
    fontSize: 48,
    color: '#ffffff',
    fontWeight: 'bold',     // 'normal' | 'bold'
    textAlign: 'center',    // 'left' | 'center' | 'right'
    fontFamily: 'Inter',
  },
  transform: {
    x: 0.5,
    y: 0.8, // lower third
    scale: 1,
    rotation: 0,            // radians
    anchor: { x: 0.5, y: 0.5 },
  },
})

// Entry/exit animation lives on the clip as 'textAnimation', not on 'text'.
// Set it after creation via updateClip (in/out ramp, kind is 'fade'):
engine.updateClip(clipId, textTrack.id, {
  textAnimation: { in: 'fade', out: 'fade', durationFrames: 10 },
})

// Add a fade transition between two adjacent clips on the same track.
// trackId is required; returns the created Transition (or null if the
// clips aren't found on that track).
engine.addTransition({
  fromClipId: clip1.id,
  toClipId: clip2.id,
  trackId: track.id,
  kind: 'fade',           // 'fade' | 'slide' (partial) | 'wipe' (partial)
  durationFrames: 15,
  easing: 'ease-out',     // 'linear' | 'ease-in' | 'ease-out'
})

// Read transitions
const transitions = useTransitionsStore((s) => s.transitions)

// Remove a transition
engine.removeTransition(transitionId)

const engine = useTimelineEngine()

// setStage takes (width, height) as positional args.
// Portrait (9:16 — Reels/Shorts/TikTok)
engine.setStage(1080, 1920)

// Landscape (16:9 — YouTube)
engine.setStage(1920, 1080)

// Square (1:1)
engine.setStage(1080, 1080)

// Custom
engine.setStage(2560, 1440)