docs: rewrite agents file

refactor: clean up number formatting and step handling in property tabs
chore: remove dead songs tab
2026-07-13 21:52:53 +02:00 · 2026-03-29 12:53:37 +02:00 · 2026-03-27 21:24:59 +01:00 · 2026-03-27 21:23:38 +01:00 · 2026-03-27 21:22:46 +01:00 · 2026-03-27 21:21:31 +01:00
815 changed files with 41403 additions and 66126 deletions
@@ -45,9 +45,10 @@ Thank you for your interest in contributing to OpenCut! This document provides g
 5. Install dependencies: `bun install`
 6. Start the development server: `bun run dev`

-> **Note:** Web development uses the published `opencut-wasm` package by default, so a fresh clone does not need a local WASM build.
+> **Note:** If you see an error like `Unsupported URL Type "workspace:*"` when running `npm install`, you have two options:
 >
-> If you are editing `rust/wasm`, run `bun run build:wasm`, then `cd rust/wasm/pkg && bun link`, then `cd ../../../apps/web && bun link opencut-wasm`.
+> 1. Upgrade to a recent npm version (v9 or later), which has full workspace protocol support.
+> 2. Use an alternative package manager such as **bun** or **pnpm**.

 ### Desktop setup

@@ -168,7 +169,7 @@ Working on `apps/desktop`? See [`apps/desktop/README.md`](../apps/desktop/README
 2. Make your changes
 3. Run the relevant checks for the area you touched:

-   - Web changes: from `apps/web`, run `bun run lint` and `bun run format`
+   - Web changes: from `apps/web`, run `bun run lint` and `bunx biome format --write .`
   - Desktop changes: run `./apps/desktop/script/setup` if your environment isn't set up yet

 4. Commit your changes with a descriptive message
@@ -176,8 +177,8 @@ Working on `apps/desktop`? See [`apps/desktop/README.md`](../apps/desktop/README

 ## Code Style

- We use ESLint for linting and Prettier for formatting
- Run `bun run format` from the `apps/web` directory to format code
+- We use Biome for code formatting and linting
+- Run `bunx biome format --write .` from the `apps/web` directory to format code
 - Run `bun run lint` from the `apps/web` directory to check for linting issues
 - Follow the existing code patterns

@@ -4,10 +4,12 @@ applyTo: "**/*.{ts,tsx,js,jsx}"

 # Project Context

-Strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects, enforced via ESLint (linting) and Prettier (formatting).
+Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.

 ## Key Principles

+- Zero configuration required
+- Subsecond performance
 - Maximum type safety
 - AI-friendly code generation

@@ -31,31 +31,16 @@ jobs:
      MARBLE_WORKSPACE_KEY: "placeholder"
      FREESOUND_CLIENT_ID: "placeholder"
      FREESOUND_API_KEY: "placeholder"
+      CLOUDFLARE_ACCOUNT_ID: "placeholder"
+      R2_ACCESS_KEY_ID: "placeholder"
+      R2_SECRET_ACCESS_KEY: "placeholder"
+      R2_BUCKET_NAME: "placeholder"
+      MODAL_TRANSCRIPTION_URL: "https://placeholder.example.com"
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

-      - name: Install Rust wasm target
-        run: rustup target add wasm32-unknown-unknown
-
-      - name: Install wasm-pack
-        uses: jetli/wasm-pack-action@v0.4.0
-        with:
-          version: latest
-
-      - name: Cache Rust build artifacts
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            target
-          key: ${{ runner.os }}-cargo-${{ hashFiles('Cargo.lock') }}
-
-      - name: Build WASM
-        run: wasm-pack build rust/wasm --target bundler --out-dir pkg
-
      - name: Install Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76
        with:
@@ -22,7 +22,3 @@ bun.lockb
 .open-next

 target/
-
-.cargo-tools/
-
-rust-migration-notes.md
@@ -1,6 +0,0 @@
-.next
-node_modules
-dist
-build
-target
-rust/wasm/pkg
@@ -1,3 +0,0 @@
-{
-	"useTabs": true
-}
@@ -1,7 +0,0 @@
-*.json
-*.svg
-*.xml
-*.lock
-**/dist/**
-**/build/**
-**/node_modules/**
@@ -7,7 +7,14 @@
 	"editor.formatOnSave": true,
 	"editor.formatOnPaste": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
+		"source.fixAll.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
 	},
-	"emmet.showExpandedAbbreviation": "never"
+	"emmet.showExpandedAbbreviation": "never",
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
 }
@@ -1,19 +1,13 @@
 # Agents.md

-## Architecture
+## Apps

-An ongoing migration is moving all business logic into `rust/`. Each app under `apps/` is a UI shell — it owns rendering, interaction, and platform-specific concerns, but never owns logic. The UI framework for any given app is a replaceable detail.
+- Web
+- Desktop

-### `rust/`
+## Rust

-The single source of truth for all non-UI code. Everything platform-agnostic belongs here: no components, no hooks, no framework imports.
-
-### `apps/`
-
-Each app is a frontend that calls into Rust. Logic is never duplicated between apps — only UI is, because each platform may use an entirely different framework and language to build it.
-
- `web/` — Next.js
- `desktop/` — GPUI
+Shared code between apps live in `rust/`, not in `packages/`

 ## Web

@@ -2,10 +2,4 @@
 resolver = "2"
 members = [
    "apps/desktop",
-    "rust/crates/time",
-    "rust/crates/bridge",
-    "rust/crates/effects",
-    "rust/crates/gpu",
-    "rust/crates/masks",
-    "rust/wasm", "rust/crates/compositor",
 ]
@@ -1,4 +1,4 @@
-Copyright 2025-2026 OpenCut
+Copyright 2025 OpenCut

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

@@ -1,44 +1,129 @@
 <table width="100%">
  <tr>
    <td align="left" width="120">
-      <img src="https://assets.opencut.app/branding/symbol.svg" alt="OpenCut Logo" width="100" />
+      <img src="apps/web/public/logos/opencut/1k/logo-white-black.png" alt="OpenCut Logo" width="100" />
    </td>
    <td align="right">
-      <h1>OpenCut</h1>
-      <h3 style="margin-top: -10px;">A free and open source video editor for web, desktop, and mobile.</h3>
+      <h1>OpenCut</span></h1>
+      <h3 style="margin-top: -10px;">A free, open-source video editor for web, desktop, and mobile.</h3>
    </td>
  </tr>
 </table>

-[![Discord](https://img.shields.io/discord/1386309140057690133?label=Discord&logo=discord&logoColor=fff&color=5865F2&style=flat)](https://discord.gg/zmR9N35cjK)
-[![X](https://img.shields.io/badge/follow-%40opencutapp-000?logo=x&logoColor=fff&style=flat)](https://x.com/opencutapp)
-[![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat)](LICENSE)
-
-## Status
-
-**OpenCut is being rewritten from the ground up.** What's coming:
-
- An Editor API
- First-class third party plugins (made possible by a plugin-first architecture)
- Desktop, mobile, and browser from one codebase (Rust core)
- MCP server (for AI agents)
- Headless mode (automation, batch rendering)
- A scripting tab directly in the editor
-
-You can still find the previous version at [opencut-app/opencut-classic](https://github.com/opencut-app/opencut-classic), which is the one to reach for today. [opencut.app](https://opencut.app) still runs the classic version; the rewrite will live at [new.opencut.app](https://new.opencut.app) until it's ready to take over.
-
 ## Sponsors

-OpenCut is supported by companies that believe in open source creator tools.
+Thanks to [Vercel](https://vercel.com?utm_source=github-opencut&utm_campaign=oss) and [fal.ai](https://fal.ai?utm_source=github-opencut&utm_campaign=oss) for their support of open-source software.

- [**fal.ai**](https://fal.ai?utm_source=github-opencut&utm_campaign=oss): Generative image, video, and audio models all in one place.
+<a href="https://vercel.com/oss">
+  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
+</a>

-Want your logo here? Reach out at [sponsor@opencut.app](mailto:sponsor@opencut.app).
+<a href="https://fal.ai">
+  <img alt="Powered by fal.ai" src="https://img.shields.io/badge/Powered%20by-fal.ai-000000?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMCAxMEwxMy4wOSAxNS43NEwxMiAyMkwxMC45MSAxNS43NEw0IDEwTDEwLjkxIDguMjZMMTIgMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=" />
+</a>
+
+## Why?
+
+- **Privacy**: Your videos stay on your device
+- **Free features**: Most basic CapCut features are now paywalled 
+- **Simple**: People want editors that are easy to use - CapCut proved that
+
+## Features
+
+- Timeline-based editing
+- Multi-track support
+- Real-time preview
+- No watermarks or subscriptions
+- Analytics provided by [Databuddy](https://www.databuddy.cc?utm_source=opencut), 100% Anonymized & Non-invasive.
+- Blog powered by [Marble](https://marblecms.com?utm_source=opencut), Headless CMS.
+
+## Project Structure
+
+- `apps/web/` – Main Next.js web application
+- `apps/desktop/` – Native desktop app (in progress)
+- `src/components/` – UI and editor components
+- `src/hooks/` – Custom React hooks
+- `src/lib/` – Utility and API logic
+- `src/stores/` – State management (Zustand, etc.)
+- `src/types/` – TypeScript types
+
+## Getting Started
+
+### Prerequisites
+
+- [Bun](https://bun.sh/docs/installation)
+- [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/)
+
+> **Note:** Docker is optional but recommended for running the local database and Redis. If you only want to work on frontend features, you can skip it.
+
+### Setup
+
+1. Fork and clone the repository
+
+2. Copy the environment file:
+
+   ```bash
+   # Unix/Linux/Mac
+   cp apps/web/.env.example apps/web/.env.local
+
+   # Windows PowerShell
+   Copy-Item apps/web/.env.example apps/web/.env.local
+   ```
+
+3. Start the database and Redis:
+
+   ```bash
+   docker compose up -d db redis serverless-redis-http
+   ```
+
+4. Install dependencies and start the dev server:
+
+   ```bash
+   bun install
+   bun dev:web
+   ```
+
+The application will be available at [http://localhost:3000](http://localhost:3000).
+
+The `.env.example` has sensible defaults that match the Docker Compose config — it should work out of the box.
+
+### Desktop setup
+
+Desktop is opt-in. If you're only working on the web app, skip this entirely.
+
+If you want to get ready for `apps/desktop`, see [`apps/desktop/README.md`](apps/desktop/README.md). It's a two-step setup: Rust toolchain first, then desktop native dependencies.
+
+### Self-Hosting with Docker
+
+To run everything (including a production build of the app) in Docker:
+
+```bash
+docker compose up -d
+```
+
+The app will be available at [http://localhost:3100](http://localhost:3100).

 ## Contributing

-We're not set up to take outside contributions yet while the architecture is being designed. If you want to follow along, ask questions, or just hang out, [join the Discord](https://discord.gg/zmR9N35cjK) or [open an issue](https://github.com/opencut-app/opencut/issues).
+We welcome contributions! While we're actively developing and refactoring certain areas, there are plenty of opportunities to contribute effectively.
+
+**🎯 Focus areas:** Timeline functionality, project management, performance, bug fixes, and UI improvements outside the preview panel.
+
+**⚠️ Avoid for now:** Preview panel enhancements (fonts, stickers, effects) and export functionality - we're refactoring these with a new binary rendering approach.
+
+See our [Contributing Guide](.github/CONTRIBUTING.md) for detailed setup instructions, development guidelines, and complete focus area guidance.
+
+**Quick start for contributors:**
+
+- Fork the repo and clone locally
+- Follow the setup instructions in CONTRIBUTING.md
+- Working on `apps/desktop`? See [`apps/desktop/README.md`](apps/desktop/README.md) for setup
+- Create a feature branch and submit a PR

 ## License

-[MIT](LICENSE)
+[MIT LICENSE](LICENSE)
+
+---
+
+![Star History Chart](https://api.star-history.com/svg?repos=opencut-app/opencut&type=Date)
@@ -1,6 +1,6 @@
 use gpui::{
-    div, prelude::*, px, rgb, size, App, Application, Bounds, Context, SharedString, Window,
-    WindowBounds, WindowOptions,
+    App, Application, Bounds, Context, SharedString, Window, WindowBounds, WindowOptions, div,
+    prelude::*, px, rgb, size,
 };

 struct AppWindow {
@@ -19,3 +19,10 @@ MARBLE_WORKSPACE_KEY=your_workspace_key_here

 FREESOUND_CLIENT_ID=your_client_id_here
 FREESOUND_API_KEY=your_api_key_here
+
+CLOUDFLARE_ACCOUNT_ID=your_account_id_here
+R2_ACCESS_KEY_ID=your_access_key_here
+R2_SECRET_ACCESS_KEY=your_secret_key_here
+R2_BUCKET_NAME=opencut-transcription # whatever you named your r2 bucket
+
+MODAL_TRANSCRIPTION_URL=your_modal_url_here
@@ -8,7 +8,3 @@
 .next/

 .font-cache/
-
-next-env.d.ts
-
-*.tsbuildinfo
@@ -14,9 +14,14 @@ COPY bun.lock bun.lock
 COPY turbo.json turbo.json

 COPY apps/web/package.json apps/web/package.json
+COPY packages/env/package.json packages/env/package.json
+COPY packages/ui/package.json packages/ui/package.json
+
 RUN bun install

 COPY apps/web/ apps/web/
+COPY packages/env/ packages/env/
+COPY packages/ui/ packages/ui/

 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
@@ -29,6 +34,11 @@ ENV UPSTASH_REDIS_REST_TOKEN="example_token"
 ENV NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 ENV NEXT_PUBLIC_MARBLE_API_URL=$NEXT_PUBLIC_MARBLE_API_URL
 ENV MARBLE_WORKSPACE_KEY=$MARBLE_WORKSPACE_KEY
+ENV CLOUDFLARE_ACCOUNT_ID="build-placeholder"
+ENV R2_ACCESS_KEY_ID="build-placeholder"
+ENV R2_SECRET_ACCESS_KEY="build-placeholder"
+ENV R2_BUCKET_NAME="build-placeholder"
+ENV MODAL_TRANSCRIPTION_URL="http://localhost:0"

 ENV FREESOUND_CLIENT_ID=$FREESOUND_CLIENT_ID
 ENV FREESOUND_API_KEY=$FREESOUND_API_KEY
@@ -3,16 +3,14 @@ import { z } from "zod";

 const changelog = defineCollection({
 	name: "changelog",
-	directory: "src/lib/changelog/entries",
+	directory: "content/changelog",
 	include: "*.md",
 	schema: z.object({
 		content: z.string(),
 		version: z.string(),
 		date: z.string(),
-		published: z.boolean().default(true),
 		title: z.string(),
 		description: z.string().optional(),
-		summary: z.string().optional(),
 		changes: z.array(
 			z.object({
 				type: z.string(),
@@ -22,12 +20,10 @@ const changelog = defineCollection({
 	}),
 	transform: async (doc, { collection }) => {
 		const allDocs = await collection.documents();
-		const publishedDocs = allDocs.filter((entry) => entry.published !== false);
-		const sorted = [...publishedDocs].sort((a, b) =>
+		const sorted = [...allDocs].sort((a, b) =>
 			b.version.localeCompare(a.version, undefined, { numeric: true }),
 		);
-		const isLatest =
-			doc.published !== false && sorted[0]?.version === doc.version;
+		const isLatest = sorted[0]?.version === doc.version;
 		return { ...doc, isLatest };
 	},
 });
@@ -1,10 +1,8 @@
 ---
 version: "0.1.0"
 date: "2026-02-23"
-published: true
 title: "Editor foundation"
 description: "This first release focuses on making editing faster, clearer, and more reliable for day-to-day use."
-summary: "Properties panel overhaul, 1,000+ fonts, blend modes, a new color picker, and direct manipulation in the preview."
 changes:
  - type: new
    text: "Rebuilt the properties panel from scratch. Number inputs now support math expressions and click-drag scrubbing instead of just typing values in."
@@ -1,10 +1,8 @@
 ---
 version: "0.2.0"
 date: "2026-03-01"
-published: true
 title: "Motion & effects"
 description: "This release adds the foundation for motion and effects, alongside many improvements & fixes."
-summary: "Keyframe animation, a new effects system with per-clip blur, and ripple editing mode."
 changes:
  - type: new
    text: "Keyframe animation system for animating element properties over time."
@@ -1,10 +1,8 @@
 ---
 version: "0.3.0"
-date: "2026-04-15"
-published: true
-title: "Masks, animation & more"
-description: "This release adds masks, a graph editor for keyframe curves, volume and speed controls, preview zoom, canvas backgrounds, stickers, and a lot more."
-summary: "Masks, graph editor for curves, volume & speed controls, preview zoom, canvas backgrounds, and stickers."
+date: "2026-03-04"
+title: "Brand & polish"
+description: "This release adds a brand page with downloadable assets, alongside a few fixes and improvements."
 changes:
  - type: new
    text: "Added a brand page with downloadable brand assets. Assets are also accessible directly from the header logo context menu."
@@ -15,7 +13,7 @@ changes:
  - type: fixed
    text: "Media asset cards in the grid view were larger than their thumbnails, leaving empty space around each item. Cards now size to their content."
  - type: improved
-    text: "Playback performance is dramatically better. The editor used to slow to a crawl during playback, and audio would stutter when interacting with elements mid-play. Both are fixed."
+    text: "Playback performance is dramatically better. The editor used to slow to a crawl during playback, and audio would stutter when interacting with elements mid-play. Both are fixed. Playback now runs at a consistent 60fps."
  - type: fixed
    text: "Project thumbnails now generate correctly even when the timeline is empty. If you set a background color or gradient with no clips, the thumbnail reflects that instead of staying blank."
  - type: fixed
@@ -40,10 +38,10 @@ changes:
    text: "MP4 exports with audio failed on Firefox. The export now completes successfully regardless of browser."
  - type: improved
    text: "Your projects can disappear if your disk runs low on space. OpenCut now asks the browser to protect them."
-  - type: improved
-    text: "The properties panel has been redesigned with a tabbed layout."
+  - type: fixed
+    text: "Opening the mask or effects panel for one element, then selecting a different element, would keep the wrong panel open and hide the transform handles for the new selection. Each element now remembers its own panel state independently."
  - type: new
-    text: "Volume control for audio and video elements."
+    text: "Volume control for audio and video elements, both in the properties panel and inline on timeline clips."
  - type: new
    text: "Speed control for video and audio clips. Includes a maintain pitch option so audio doesn't chipmunk or deepen when you change the rate."
  - type: improved
@@ -51,7 +49,7 @@ changes:
  - type: improved
    text: "The timeline now opens scrolled to the bottom, so your main video track is visible right away instead of being hidden above the fold."
  - type: fixed
-    text: "Snap guides in the preview panel didn't show when moving a full-canvas element to the center of the frame."
+    text: "Snap guides didn't show when moving a full-canvas element to the center of the frame."
  - type: fixed
    text: "The rotation handle could float above the editor UI when an element was near the top of the canvas. It now clips to the preview area."
  - type: fixed
@@ -59,9 +57,11 @@ changes:
  - type: fixed
    text: "Section titles in the properties panel showed the wrong text color when the section wasn't collapsible. Non-collapsible titles now use the correct muted style."
  - type: new
-    text: "Masks. Hide or reveal parts of any video or image layer. Choose from split, rectangle, ellipse, star, heart, diamond, and cinematic bars. Adjust position, size, rotation, feather, and stroke in the properties panel, or drag the handles in the preview."
+    text: "Masks. Hide or reveal parts of any video or image layer. Choose from split, rectangle, ellipse, star, heart, diamond, text, and custom masks. Adjust position, size, rotation, feather, and stroke in the properties panel, or drag the handles in the preview."
  - type: improved
    text: "The settings panel has been redesigned with a cleaner layout and better organization."
+  - type: new
+    text: "Layout guides are back and expanded. TikTok was the only option before. Now includes a grid guide plus TikTok, Instagram Reels, YouTube Shorts, and Snapchat Spotlight."
  - type: new
    text: "Canvas backgrounds are back. Set a blur, solid color, or gradient as the canvas background from the new Background tab in the settings panel."
  - type: fixed
@@ -71,44 +71,12 @@ changes:
  - type: new
    text: "Preview zoom and panning. Zoom into the canvas to work on fine details, and pan around to navigate when zoomed in."
  - type: new
-    text: "Stickers panel now has content. Browse and add country flags and shapes."
+    text: "Stickers panel now has content. Browse and add logos, country flags, and shapes."
  - type: improved
    text: "You can now select multiple assets in the assets panel. Useful for deleting several at once."
  - type: fixed
    text: "Auto-generated captions were sometimes inaccurate. The underlying issue has been fixed."
  - type: new
    text: "You can now import transcript files to generate captions instead of running auto-transcription."
-  - type: new
-    text: "Graph editor for keyframe curves. Shape the easing between keyframes by dragging bezier handles."
-  - type: fixed
-    text: "Text element handles no longer shift position as you type."
-  - type: new
-    text: "Multiple selected timeline clips move and resize together."
-  - type: fixed
-    text: "The rotation handle drifted further and further from the element as the canvas size got smaller. On a 100x100 project it was almost off-screen. The gap is now a fixed size regardless of canvas dimensions or zoom."
-  - type: new
-    text: "Position X and Y can now be animated independently."
-  - type: new
-    text: "Keyframes can be copied and pasted between elements."
-  - type: new
-    text: 'Timeline clips can expand to show a lane for each animated property. Right-click a clip -> "Expand keyframes" to see all properties in their own rows.'
-  - type: improved
-    text: "If your browser doesn't support GPU-accelerated rendering, the editor now shows a notice explaining why and suggests switching to another browser."
-  - type: technical
-    text: "Ripple editing now has a proper algorithmic foundation. The old inline approach was replaced with a diff-based system in `src/lib/ripple/`: track snapshots before and after an operation are compared as interval sets, vacated intervals are computed (accounting for elements moved to other tracks), and the result is a list of explicit `RippleAdjustment` values applied in a separate pass. Composable, testable, and independent of the command that triggered it."
-  - type: technical
-    text: "Time is now represented as `MediaTime`, an integer tick count at 120,000 ticks per second, defined in `rust/crates/time`. Previously, floating-point seconds were used throughout, which accumulated rounding errors and made frame alignment imprecise. 120,000 was chosen because it divides evenly by every standard frame rate denominator, including drop-frame rates: 23.976 maps to 5,005 ticks/frame, 29.97 to 4,004, 30 to 4,000. `FrameRate` is a rational `{numerator, denominator}` type rather than a float. All time arithmetic, frame snapping, and timecode formatting are implemented in Rust and exposed via WASM."
-  - type: technical
-    text: "Track ordering is now enforced at the type level. `SceneTracks` replaces a flat track array with three explicit fields: `overlay`, `main` (a singleton `VideoTrack`), and `audio`. The type makes it structurally impossible to mix track kinds or misplace a track."
-  - type: technical
-    text: "The WebGL renderer has been replaced with a Rust/wgpu compositor compiled to WASM. The `rust/` crate tree covers compositing (`rust/crates/compositor`), effects (`rust/crates/effects`), masks with JFA-based feathering (`rust/crates/masks`), GPU context (`rust/crates/gpu`), and time (`rust/crates/time`). WASM bindings live in `rust/wasm/` and are consumed from TypeScript through `src/lib/wasm/`. The old GLSL shaders and WebGL utilities are gone."
-  - type: technical
-    text: "`src/types/` and `src/constants/` have been dissolved. All types and constants now live alongside the code that owns them inside `src/lib/`. The `packages/env` and `packages/ui` internal packages were also folded into the web app, with icons at `src/components/icons/` and env at `src/lib/env/`."
-  - type: technical
-    text: "The web app can now deploy to Cloudflare Workers via OpenNext. `wrangler.jsonc` and `apps/web/open-next.config.ts` are included for anyone self-hosting."
-  - type: technical
-    text: "`apps/desktop/` is a new GPUI + Rust app. It is early: there is a `main.rs` and a working build setup, but no features yet."
-  - type: technical
-    text: "16 new storage migration steps were added (v9 through v25), covering the schema changes accumulated during this release cycle."

 ---
@@ -1,26 +1,23 @@
 import type { Config } from "drizzle-kit";
 import * as dotenv from "dotenv";
+import { webEnv } from "@opencut/env/web";

-if (process.env.NODE_ENV === "production") {
+// Load the right env file based on environment
+if (webEnv.NODE_ENV === "production") {
 	dotenv.config({ path: ".env.production" });
 } else {
 	dotenv.config({ path: ".env.local" });
 }

-const databaseUrl = process.env.DATABASE_URL;
-if (!databaseUrl) {
-	throw new Error("DATABASE_URL is not set");
-}
-
 export default {
-	schema: "./src/lib/db/schema.ts",
+	schema: "./src/schema.ts",
 	dialect: "postgresql",
 	migrations: {
 		table: "drizzle_migrations",
 	},
 	dbCredentials: {
-		url: databaseUrl,
+		url: webEnv.DATABASE_URL,
 	},
 	out: "./migrations",
-	strict: process.env.NODE_ENV === "production",
+	strict: webEnv.NODE_ENV === "production",
 } satisfies Config;
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1,8 +1,19 @@
 import type { NextConfig } from "next";
 import { withBotId } from "botid/next/config";
 import { withContentCollections } from "@content-collections/next";
+import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+
+initOpenNextCloudflareForDev();

 const nextConfig: NextConfig = {
+	turbopack: {
+		rules: {
+			"*.glsl": {
+				loaders: [require.resolve("raw-loader")],
+				as: "*.js",
+			},
+		},
+	},
 	compiler: {
 		removeConsole: process.env.NODE_ENV === "production",
 	},
@@ -9,9 +9,9 @@
    "start": "next start",
    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "format": "prettier src --write",
+    "lint": "biome check src/",
+    "lint:fix": "biome check src/ --write",
+    "format": "biome format src/ --write",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push:local": "cross-env NODE_ENV=development drizzle-kit push",
@@ -19,9 +19,11 @@
  },
  "dependencies": {
    "@hello-pangea/dnd": "^18.0.1",
-    "@hugeicons/core-free-icons": "^3.3.0",
+    "@hugeicons/core-free-icons": "^3.1.1",
    "@hugeicons/react": "^1.1.6",
    "@huggingface/transformers": "^3.8.1",
+    "@opencut/env": "workspace:*",
+    "@opencut/ui": "workspace:*",
    "@opennextjs/cloudflare": "^1.18.0",
    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-checkbox": "^1.3.3",
@@ -52,7 +54,6 @@
    "nanoid": "^5.1.5",
    "next": "16.1.3",
    "next-themes": "^0.4.4",
-    "opencut-wasm": "^0.2.10",
    "pg": "^8.16.2",
    "postgres": "^3.4.5",
    "radix-ui": "^1.4.3",
@@ -76,7 +77,7 @@
    "unified": "^11.0.5",
    "use-deep-compare-effect": "^1.8.1",
    "wavesurfer.js": "^7.9.8",
-    "zod": "4.3.6",
+    "zod": "^3.25.67",
    "zustand": "^5.0.2"
  },
  "devDependencies": {
@@ -94,6 +95,7 @@
    "dotenv": "^16.5.0",
    "drizzle-kit": "^0.31.4",
    "postcss": "^8",
+    "raw-loader": "^4.0.2",
    "sharp": "^0.34.5",
    "tailwindcss": "^4.2.1",
    "typescript": "^5.8.3",
@@ -0,0 +1,3 @@
+<svg width="588" height="512" viewBox="0 0 588 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M294 0L588 512H0L294 0Z" fill="black"/>
+</svg>
@@ -1,274 +0,0 @@
-"use client";
-
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import type { TActionWithOptionalArgs } from "@/actions";
-import { getDefaultShortcuts } from "@/actions";
-import { isTypableDOMElement } from "@/utils/browser";
-import { isAppleDevice } from "@/utils/platform";
-import type {
-	Key,
-	KeybindingConfig,
-	ModifierKeys,
-	ShortcutKey,
-} from "@/actions/keybinding";
-import { isKey } from "@/actions/keybinding";
-import { runMigrations, CURRENT_VERSION } from "./keybindings/migrations";
-
-export interface KeybindingConflict {
-	key: ShortcutKey;
-	existingAction: TActionWithOptionalArgs;
-	newAction: TActionWithOptionalArgs;
-}
-
-interface KeybindingsState {
-	keybindings: Map<ShortcutKey, TActionWithOptionalArgs>;
-	isCustomized: boolean;
-	overlayDepth: number;
-	openOverlayIds: string[];
-	isLoadingProject: boolean;
-	isRecording: boolean;
-
-	updateKeybinding: (params: {
-		key: ShortcutKey;
-		action: TActionWithOptionalArgs;
-	}) => void;
-	removeKeybinding: (key: ShortcutKey) => void;
-	resetToDefaults: () => void;
-	importKeybindings: (config: KeybindingConfig) => void;
-	exportKeybindings: () => Record<string, TActionWithOptionalArgs>;
-	openOverlay: (overlayId: string) => void;
-	closeOverlay: (overlayId: string) => void;
-	setLoadingProject: (loading: boolean) => void;
-	setIsRecording: (isRecording: boolean) => void;
-	validateKeybinding: (params: {
-		key: ShortcutKey;
-		action: TActionWithOptionalArgs;
-	}) => KeybindingConflict | null;
-	getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];
-	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
-}
-
-type PersistedState = {
-	keybindings: Record<string, TActionWithOptionalArgs>;
-	isCustomized: boolean;
-};
-
-function isDOMElement(element: EventTarget | null): element is HTMLElement {
-	return element instanceof HTMLElement;
-}
-
-function isPersistedState(value: unknown): value is PersistedState {
-	if (!value || typeof value !== "object") return false;
-	if (!("keybindings" in value) || !("isCustomized" in value)) return false;
-	const { keybindings, isCustomized } = value;
-	return (
-		typeof keybindings === "object" &&
-		keybindings !== null &&
-		typeof isCustomized === "boolean"
-	);
-}
-
-export const useKeybindingsStore = create<KeybindingsState>()(
-	persist(
-		(set, get) => ({
-			keybindings: getDefaultShortcuts(),
-			isCustomized: false,
-			overlayDepth: 0,
-			openOverlayIds: [],
-			isLoadingProject: false,
-			isRecording: false,
-
-			openOverlay: (overlayId) =>
-				set((s) => {
-					const openOverlayIds = s.openOverlayIds.includes(overlayId)
-						? s.openOverlayIds
-						: [...s.openOverlayIds, overlayId];
-					return {
-						openOverlayIds,
-						overlayDepth: openOverlayIds.length,
-					};
-				}),
-			closeOverlay: (overlayId) =>
-				set((s) => {
-					const openOverlayIds = s.openOverlayIds.filter(
-						(id) => id !== overlayId,
-					);
-					return {
-						openOverlayIds,
-						overlayDepth: openOverlayIds.length,
-					};
-				}),
-			setLoadingProject: (loading) => {
-				set({ isLoadingProject: loading });
-			},
-
-			updateKeybinding: ({ key, action }) => {
-				set((state) => {
-					const next = new Map(state.keybindings);
-					next.set(key, action);
-					return {
-						keybindings: next,
-						isCustomized: true,
-					};
-				});
-			},
-
-			removeKeybinding: (key) => {
-				set((state) => {
-					const next = new Map(state.keybindings);
-					next.delete(key);
-					return {
-						keybindings: next,
-						isCustomized: true,
-					};
-				});
-			},
-
-			resetToDefaults: () => {
-				set({
-					keybindings: getDefaultShortcuts(),
-					isCustomized: false,
-				});
-			},
-
-			importKeybindings: (config) => {
-				const next = new Map<ShortcutKey, TActionWithOptionalArgs>();
-				for (const [key, action] of Object.entries(config)) {
-					if (typeof key !== "string" || key.length === 0) {
-						throw new Error(`Invalid key format: ${key}`);
-					}
-					if (action !== undefined) {
-						// Public type's keys are `ShortcutKey`; trust the caller's typing.
-						// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-						next.set(key as ShortcutKey, action);
-					}
-				}
-				set({
-					keybindings: next,
-					isCustomized: true,
-				});
-			},
-
-			exportKeybindings: () => {
-				return Object.fromEntries(get().keybindings);
-			},
-
-			validateKeybinding: ({ key, action }) => {
-				const existingAction = get().keybindings.get(key);
-				if (existingAction && existingAction !== action) {
-					return {
-						key,
-						existingAction,
-						newAction: action,
-					};
-				}
-				return null;
-			},
-			setIsRecording: (isRecording) => {
-				set({ isRecording });
-			},
-
-			getKeybindingsForAction: (action) => {
-				const result: ShortcutKey[] = [];
-				for (const [key, mapped] of get().keybindings) {
-					if (mapped === action) result.push(key);
-				}
-				return result;
-			},
-
-			getKeybindingString: (ev) => generateKeybindingString(ev),
-		}),
-		{
-			name: "opencut-keybindings",
-			version: CURRENT_VERSION,
-			partialize: (state): PersistedState => ({
-				keybindings: Object.fromEntries(state.keybindings),
-				isCustomized: state.isCustomized,
-			}),
-			migrate: (persisted, version) =>
-				runMigrations({ state: persisted, fromVersion: version }),
-			merge: (persisted, current) => {
-				if (!isPersistedState(persisted)) return current;
-				const entries = Object.entries(persisted.keybindings);
-				// Persistence boundary: keys are normalized by the migration chain.
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-				const typedEntries = entries as Array<
-					[ShortcutKey, TActionWithOptionalArgs]
-				>;
-				return {
-					...current,
-					keybindings: new Map(typedEntries),
-					isCustomized: persisted.isCustomized,
-				};
-			},
-		},
-	),
-);
-
-function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
-	const target = ev.target;
-	const modifierKey = getActiveModifier(ev);
-	const key = getPressedKey(ev);
-	if (!key) return null;
-
-	if (modifierKey) {
-		if (
-			modifierKey === "shift" &&
-			isDOMElement(target) &&
-			isTypableDOMElement({ element: target })
-		) {
-			return null;
-		}
-
-		return `${modifierKey}+${key}`;
-	}
-
-	if (isDOMElement(target) && isTypableDOMElement({ element: target })) {
-		return null;
-	}
-
-	return key;
-}
-
-function getPressedKey(ev: KeyboardEvent): Key | null {
-	const raw = (ev.key ?? "").toLowerCase();
-	const code = ev.code ?? "";
-
-	if (code === "Space" || raw === " " || raw === "spacebar" || raw === "space")
-		return "space";
-
-	if (raw === "arrowup") return "up";
-	if (raw === "arrowdown") return "down";
-	if (raw === "arrowleft") return "left";
-	if (raw === "arrowright") return "right";
-
-	if (code.startsWith("Key")) {
-		const letter = code.slice(3).toLowerCase();
-		if (isKey(letter)) return letter;
-	}
-
-	// Use physical key position for AZERTY and other non-QWERTY layouts.
-	if (code.startsWith("Digit")) {
-		const digit = code.slice(5);
-		if (isKey(digit)) return digit;
-	}
-
-	if (isKey(raw)) return raw;
-	return null;
-}
-
-function getActiveModifier(ev: KeyboardEvent): ModifierKeys | null {
-	const ctrl = isAppleDevice() ? ev.metaKey : ev.ctrlKey;
-	const alt = ev.altKey;
-	const shift = ev.shiftKey;
-
-	if (ctrl && alt && shift) return "ctrl+alt+shift";
-	if (ctrl && alt) return "ctrl+alt";
-	if (ctrl && shift) return "ctrl+shift";
-	if (alt && shift) return "alt+shift";
-	if (ctrl) return "ctrl";
-	if (alt) return "alt";
-	if (shift) return "shift";
-	return null;
-}
@@ -1,144 +0,0 @@
-import {
-	afterEach,
-	beforeEach,
-	describe,
-	expect,
-	mock,
-	test,
-} from "bun:test";
-import {
-	decodePersistedKeybindingsState,
-	migratePersistedKeybindingsState,
-	parseImportedKeybindings,
-	serializeKeybindingsState,
-} from "../persistence";
-
-describe("keybinding persistence", () => {
-	let warnSpy: ReturnType<typeof mock>;
-	let originalWarn: typeof console.warn;
-
-	beforeEach(() => {
-		originalWarn = console.warn;
-		warnSpy = mock(() => {});
-		console.warn = warnSpy;
-	});
-
-	afterEach(() => {
-		console.warn = originalWarn;
-	});
-
-	test("migrates legacy persisted keybindings before decoding them", () => {
-		const migrated = migratePersistedKeybindingsState({
-			state: {
-				keybindings: {
-					s: "split-selected",
-					"ctrl+v": "paste-selected",
-				},
-				isCustomized: true,
-			},
-			fromVersion: 2,
-		});
-
-		const decoded = decodePersistedKeybindingsState({ state: migrated });
-		expect(decoded).not.toBeNull();
-		if (!decoded) throw new Error("Expected migrated keybindings to decode");
-
-		expect(decoded.isCustomized).toBe(true);
-		expect(decoded.keybindings.get("s")).toBe("split");
-		expect(decoded.keybindings.get("ctrl+v")).toBe("paste-copied");
-		expect(decoded.keybindings.get("escape")).toBe("cancel-interaction");
-		expect(warnSpy).not.toHaveBeenCalled();
-	});
-
-	test("filters invalid persisted entries at the boundary and warns", () => {
-		const decoded = decodePersistedKeybindingsState({
-			state: {
-				keybindings: {
-					space: "toggle-play",
-					"shift+bogus": "toggle-play",
-					"ctrl+v": "not-an-action",
-				},
-				isCustomized: false,
-			},
-		});
-
-		expect(decoded).not.toBeNull();
-		if (!decoded) throw new Error("Expected persisted keybindings to decode");
-
-		expect(Array.from(decoded.keybindings.entries())).toEqual([
-			["space", "toggle-play"],
-		]);
-		expect(warnSpy).toHaveBeenCalledTimes(1);
-	});
-
-	test("returns null and warns when persisted shape is unrecognizable", () => {
-		const decoded = decodePersistedKeybindingsState({ state: "garbage" });
-		expect(decoded).toBeNull();
-		expect(warnSpy).toHaveBeenCalledTimes(1);
-	});
-
-	test("round-trips actions that have no default shortcut", () => {
-		// `stop-playback` is a valid `TActionWithOptionalArgs` but is not in the
-		// defaults table; the validator must still accept it.
-		const serialized = serializeKeybindingsState({
-			keybindings: new Map([
-				["space", "toggle-play"],
-				["x", "stop-playback"],
-				["b", "toggle-bookmark"],
-			]),
-			isCustomized: true,
-		});
-
-		const decoded = decodePersistedKeybindingsState({ state: serialized });
-		expect(decoded).not.toBeNull();
-		if (!decoded) throw new Error("Expected round-tripped keybindings");
-
-		expect(decoded.keybindings.get("space")).toBe("toggle-play");
-		expect(decoded.keybindings.get("x")).toBe("stop-playback");
-		expect(decoded.keybindings.get("b")).toBe("toggle-bookmark");
-		expect(warnSpy).not.toHaveBeenCalled();
-	});
-});
-
-describe("parseImportedKeybindings", () => {
-	test("accepts a valid configuration", () => {
-		const result = parseImportedKeybindings({
-			config: {
-				space: "toggle-play",
-				x: "stop-playback",
-			},
-		});
-
-		expect(result.get("space")).toBe("toggle-play");
-		expect(result.get("x")).toBe("stop-playback");
-	});
-
-	test("throws on non-object input", () => {
-		expect(() => parseImportedKeybindings({ config: null })).toThrow(
-			/JSON object/,
-		);
-		expect(() => parseImportedKeybindings({ config: [] })).toThrow(
-			/JSON object/,
-		);
-	});
-
-	test("throws on non-string action values", () => {
-		expect(() =>
-			parseImportedKeybindings({ config: { space: 42 } }),
-		).toThrow(/expected string/);
-	});
-
-	test("throws on invalid shortcut keys", () => {
-		expect(() =>
-			parseImportedKeybindings({
-				config: { "shift+bogus": "toggle-play" },
-			}),
-		).toThrow(/shift\+bogus/);
-	});
-
-	test("throws on invalid actions", () => {
-		expect(() =>
-			parseImportedKeybindings({ config: { space: "not-an-action" } }),
-		).toThrow(/not-an-action/);
-	});
-});
@@ -1,22 +0,0 @@
-import { getPersistedKeybindingsState } from "../persisted-state";
-
-export function v2ToV3({ state }: { state: unknown }): unknown {
-	const v2 = getPersistedKeybindingsState({ state });
-	if (!v2) return state;
-
-	const renames: Record<string, string> = {
-		"split-selected": "split",
-		"split-selected-left": "split-left",
-		"split-selected-right": "split-right",
-	};
-
-	const migrated = { ...v2.keybindings };
-	for (const [key, action] of Object.entries(migrated)) {
-		const renamedAction = action ? renames[action] : undefined;
-		if (renamedAction) {
-			migrated[key] = renamedAction;
-		}
-	}
-
-	return { ...v2, keybindings: migrated };
-}
@@ -1,20 +0,0 @@
-import { getPersistedKeybindingsState } from "../persisted-state";
-
-export function v3ToV4({ state }: { state: unknown }): unknown {
-	const v3 = getPersistedKeybindingsState({ state });
-	if (!v3) return state;
-
-	const renames: Record<string, string> = {
-		"paste-selected": "paste-copied",
-	};
-
-	const migrated = { ...v3.keybindings };
-	for (const [key, action] of Object.entries(migrated)) {
-		const renamedAction = action ? renames[action] : undefined;
-		if (renamedAction) {
-			migrated[key] = renamedAction;
-		}
-	}
-
-	return { ...v3, keybindings: migrated };
-}
@@ -1,15 +0,0 @@
-import { getPersistedKeybindingsState } from "../persisted-state";
-
-export function v6ToV7({ state }: { state: unknown }): unknown {
-	const v6 = getPersistedKeybindingsState({ state });
-	if (!v6) return state;
-	const keybindings = { ...v6.keybindings };
-
-	for (const [key, action] of Object.entries(keybindings)) {
-		if (action === "split-element") {
-			keybindings[key] = "split";
-		}
-	}
-
-	return { ...v6, keybindings };
-}
@@ -1,37 +0,0 @@
-export type PersistedKeybindingConfig = Record<string, string | undefined>;
-
-export interface PersistedKeybindingsState {
-	keybindings: PersistedKeybindingConfig;
-	isCustomized: boolean;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-export function getPersistedKeybindingsState({
-	state,
-}: {
-	state: unknown;
-}): PersistedKeybindingsState | null {
-	if (!isRecord(state)) return null;
-
-	const { keybindings, isCustomized } = state;
-	if (!isRecord(keybindings) || typeof isCustomized !== "boolean") {
-		return null;
-	}
-
-	const normalizedKeybindings: PersistedKeybindingConfig = {};
-	for (const [key, action] of Object.entries(keybindings)) {
-		if (action !== undefined && typeof action !== "string") {
-			return null;
-		}
-
-		normalizedKeybindings[key] = action;
-	}
-
-	return {
-		keybindings: normalizedKeybindings,
-		isCustomized,
-	};
-}
@@ -1,119 +0,0 @@
-import type { ShortcutKey } from "@/actions/keybinding";
-import { isShortcutKey } from "@/actions/keybinding";
-import type { TActionWithOptionalArgs } from "@/actions";
-import { isActionWithOptionalArgs } from "@/actions";
-import { runMigrations } from "./migrations";
-import {
-	getPersistedKeybindingsState,
-	type PersistedKeybindingsState,
-} from "./persisted-state";
-
-export interface DecodedKeybindingsState {
-	keybindings: Map<ShortcutKey, TActionWithOptionalArgs>;
-	isCustomized: boolean;
-}
-
-export function serializeKeybindingsState({
-	keybindings,
-	isCustomized,
-}: DecodedKeybindingsState): PersistedKeybindingsState {
-	return {
-		keybindings: Object.fromEntries(keybindings),
-		isCustomized,
-	};
-}
-
-export function migratePersistedKeybindingsState({
-	state,
-	fromVersion,
-}: {
-	state: unknown;
-	fromVersion: number;
-}): unknown {
-	return runMigrations({ state, fromVersion });
-}
-
-/**
- * Decode a persisted/migrated keybindings blob into the in-memory shape.
- *
- * Lossy by design: invalid entries are dropped and a warning is emitted, so the
- * user falls back to (mostly) sensible defaults instead of a broken store.
- * Returns `null` if the top-level shape is unrecognizable, in which case the
- * caller should keep its current state.
- */
-export function decodePersistedKeybindingsState({
-	state,
-}: {
-	state: unknown;
-}): DecodedKeybindingsState | null {
-	const persisted = getPersistedKeybindingsState({ state });
-	if (!persisted) {
-		console.warn(
-			"[keybindings] Persisted state has unexpected shape; keeping current keybindings.",
-			state,
-		);
-		return null;
-	}
-
-	const keybindings = new Map<ShortcutKey, TActionWithOptionalArgs>();
-	const dropped: Array<{ key: string; action: string | undefined }> = [];
-	for (const [key, action] of Object.entries(persisted.keybindings)) {
-		if (action === undefined) continue;
-		if (!isShortcutKey(key) || !isActionWithOptionalArgs(action)) {
-			dropped.push({ key, action });
-			continue;
-		}
-
-		keybindings.set(key, action);
-	}
-
-	if (dropped.length > 0) {
-		console.warn(
-			"[keybindings] Dropped invalid persisted entries:",
-			dropped,
-		);
-	}
-
-	return {
-		keybindings,
-		isCustomized: persisted.isCustomized,
-	};
-}
-
-/**
- * Parse a user-supplied keybindings configuration (typically the output of
- * `JSON.parse` on an imported file).
- *
- * Strict by design: throws on the first invalid entry so the caller can surface
- * the failure to the user instead of silently producing a half-applied import.
- * Accepts `unknown` because the input has already crossed a trust boundary.
- */
-export function parseImportedKeybindings({
-	config,
-}: {
-	config: unknown;
-}): Map<ShortcutKey, TActionWithOptionalArgs> {
-	if (typeof config !== "object" || config === null || Array.isArray(config)) {
-		throw new Error("Imported keybindings must be a JSON object");
-	}
-
-	const result = new Map<ShortcutKey, TActionWithOptionalArgs>();
-	for (const [key, action] of Object.entries(config)) {
-		if (action === undefined) continue;
-		if (typeof action !== "string") {
-			throw new Error(
-				`Invalid action for "${key}": expected string, got ${typeof action}`,
-			);
-		}
-		if (!isShortcutKey(key)) {
-			throw new Error(`Invalid shortcut key: ${JSON.stringify(key)}`);
-		}
-		if (!isActionWithOptionalArgs(action)) {
-			throw new Error(
-				`Invalid action for "${key}": ${JSON.stringify(action)}`,
-			);
-		}
-		result.set(key, action);
-	}
-	return result;
-}
@@ -1,87 +0,0 @@
-import { useEffect } from "react";
-import { invokeAction } from "@/actions";
-import { useEditor } from "@/editor/use-editor";
-import { useKeybindingsStore } from "@/actions/keybindings-store";
-import { isTypableDOMElement } from "@/utils/browser";
-
-/**
- * a composable that hooks to the caller component's
- * lifecycle and hooks to the keyboard events to fire
- * the appropriate actions based on keybindings
- */
-export function useKeybindingsListener() {
-	const editor = useEditor();
-	const {
-		keybindings,
-		getKeybindingString,
-		overlayDepth,
-		isLoadingProject,
-		isRecording,
-	} = useKeybindingsStore();
-
-	useEffect(() => {
-		const eventOptions: AddEventListenerOptions = { capture: true };
-		const handleKeyDown = (ev: KeyboardEvent) => {
-			const normalizedKey = (ev.key ?? "").toLowerCase();
-
-			if (overlayDepth > 0 || isLoadingProject || isRecording) {
-				return;
-			}
-
-			const binding = getKeybindingString(ev);
-			const activeElement = document.activeElement;
-			const isTextInput =
-				activeElement instanceof HTMLElement &&
-				isTypableDOMElement({ element: activeElement });
-			const boundAction = binding ? keybindings.get(binding) : undefined;
-
-			if (normalizedKey === "escape" && isTextInput) {
-				activeElement.blur();
-				return;
-			}
-
-			if (!binding) return;
-			if (!boundAction) return;
-
-			if (isTextInput) return;
-			if (boundAction === "paste-copied") {
-				if (!editor.clipboard.hasEntry()) return;
-				ev.preventDefault();
-				invokeAction("paste-copied", undefined, "keypress");
-				return;
-			}
-
-			ev.preventDefault();
-
-			switch (boundAction) {
-				case "seek-forward":
-					invokeAction("seek-forward", { seconds: 1 }, "keypress");
-					break;
-				case "seek-backward":
-					invokeAction("seek-backward", { seconds: 1 }, "keypress");
-					break;
-				case "jump-forward":
-					invokeAction("jump-forward", { seconds: 5 }, "keypress");
-					break;
-				case "jump-backward":
-					invokeAction("jump-backward", { seconds: 5 }, "keypress");
-					break;
-				default:
-					invokeAction(boundAction, undefined, "keypress");
-			}
-		};
-
-		document.addEventListener("keydown", handleKeyDown, eventOptions);
-
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown, eventOptions);
-		};
-	}, [
-		keybindings,
-		getKeybindingString,
-		overlayDepth,
-		isLoadingProject,
-		isRecording,
-		editor,
-	]);
-}
@@ -1,241 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import {
-	coerceParamValue,
-	getParamDefaultInterpolation,
-	getParamNumericRange,
-	getParamValueKind,
-} from "@/params";
-
-describe("animated params", () => {
-	test("snaps and clamps number params", () => {
-		expect(
-			coerceParamValue({
-				param: {
-					key: "intensity",
-					label: "Intensity",
-					type: "number",
-					default: 0,
-					min: 0,
-					max: 1,
-					step: 0.25,
-				},
-				value: 0.62,
-			}),
-		).toBe(0.5);
-
-		expect(
-			coerceParamValue({
-				param: {
-					key: "intensity",
-					label: "Intensity",
-					type: "number",
-					default: 0,
-					min: 0,
-					max: 1,
-					step: 0.25,
-				},
-				value: 1.2,
-			}),
-		).toBe(1);
-	});
-
-	test("rejects NaN and non-number values for number params", () => {
-		const param = {
-			key: "intensity",
-			label: "Intensity",
-			type: "number" as const,
-			default: 0,
-			min: 0,
-			max: 1,
-			step: 0.25,
-		};
-		expect(coerceParamValue({ param, value: Number.NaN })).toBeNull();
-		expect(coerceParamValue({ param, value: "0.5" })).toBeNull();
-		expect(coerceParamValue({ param, value: true })).toBeNull();
-	});
-
-	test("passthrough with step <= 0 guard", () => {
-		expect(
-			coerceParamValue({
-				param: {
-					key: "x",
-					label: "X",
-					type: "number",
-					default: 0,
-					min: 0,
-					step: 0,
-				},
-				value: 0.123,
-			}),
-		).toBe(0.123);
-	});
-
-	test("accepts valid select values", () => {
-		const param = {
-			key: "blend",
-			label: "Blend",
-			type: "select" as const,
-			default: "normal",
-			options: [
-				{ value: "normal", label: "Normal" },
-				{ value: "multiply", label: "Multiply" },
-			],
-		};
-		expect(coerceParamValue({ param, value: "normal" })).toBe("normal");
-		expect(coerceParamValue({ param, value: "multiply" })).toBe("multiply");
-	});
-
-	test("rejects select values outside the allowed options", () => {
-		expect(
-			coerceParamValue({
-				param: {
-					key: "blend",
-					label: "Blend",
-					type: "select",
-					default: "normal",
-					options: [
-						{ value: "normal", label: "Normal" },
-						{ value: "multiply", label: "Multiply" },
-					],
-				},
-				value: "screen",
-			}),
-		).toBeNull();
-	});
-
-	test("rejects non-string select values", () => {
-		const param = {
-			key: "blend",
-			label: "Blend",
-			type: "select" as const,
-			default: "normal",
-			options: [{ value: "normal", label: "Normal" }],
-		};
-		expect(coerceParamValue({ param, value: 42 })).toBeNull();
-		expect(coerceParamValue({ param, value: null })).toBeNull();
-		expect(coerceParamValue({ param, value: undefined })).toBeNull();
-	});
-
-	test("boolean params accept booleans and reject other types", () => {
-		const param = {
-			key: "visible",
-			label: "Visible",
-			type: "boolean" as const,
-			default: true,
-		};
-		expect(coerceParamValue({ param, value: true })).toBe(true);
-		expect(coerceParamValue({ param, value: false })).toBe(false);
-		expect(coerceParamValue({ param, value: 1 })).toBeNull();
-		expect(coerceParamValue({ param, value: "true" })).toBeNull();
-	});
-
-	test("color params accept strings and reject other types", () => {
-		const param = {
-			key: "fill",
-			label: "Fill",
-			type: "color" as const,
-			default: "#ffffff",
-		};
-		expect(coerceParamValue({ param, value: "#ff0000" })).toBe("#ff0000");
-		expect(coerceParamValue({ param, value: 0xff0000 })).toBeNull();
-		expect(coerceParamValue({ param, value: null })).toBeNull();
-	});
-
-	test("getAnimationParamValueKind maps param type to binding kind", () => {
-		expect(
-			getParamValueKind({
-				param: {
-					key: "n",
-					label: "N",
-					type: "number",
-					default: 0,
-					min: 0,
-					step: 1,
-				},
-			}),
-		).toBe("number");
-		expect(
-			getParamValueKind({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBe("color");
-		expect(
-			getParamValueKind({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBe("discrete");
-		expect(
-			getParamValueKind({
-				param: {
-					key: "s",
-					label: "S",
-					type: "select",
-					default: "a",
-					options: [{ value: "a", label: "A" }],
-				},
-			}),
-		).toBe("discrete");
-	});
-
-	test("getAnimationParamDefaultInterpolation is linear for continuous, hold for discrete", () => {
-		expect(
-			getParamDefaultInterpolation({
-				param: {
-					key: "n",
-					label: "N",
-					type: "number",
-					default: 0,
-					min: 0,
-					step: 1,
-				},
-			}),
-		).toBe("linear");
-		expect(
-			getParamDefaultInterpolation({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBe("linear");
-		expect(
-			getParamDefaultInterpolation({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBe("hold");
-		expect(
-			getParamDefaultInterpolation({
-				param: {
-					key: "s",
-					label: "S",
-					type: "select",
-					default: "a",
-					options: [{ value: "a", label: "A" }],
-				},
-			}),
-		).toBe("hold");
-	});
-
-	test("getAnimationParamNumericRange returns spec for number params, undefined otherwise", () => {
-		expect(
-			getParamNumericRange({
-				param: {
-					key: "intensity",
-					label: "Intensity",
-					type: "number",
-					default: 0.5,
-					min: 0,
-					max: 1,
-					step: 0.1,
-				},
-			}),
-		).toEqual({ min: 0, max: 1, step: 0.1 });
-		expect(
-			getParamNumericRange({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBeUndefined();
-		expect(
-			getParamNumericRange({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBeUndefined();
-	});
-});
@@ -1,90 +0,0 @@
-import type { ScalarAnimationKey } from "@/animation/types";
-
-const BEZIER_SOLVE_ITERATIONS = 20;
-
-export function getBezierPoint({
-	progress,
-	p0,
-	p1,
-	p2,
-	p3,
-}: {
-	progress: number;
-	p0: number;
-	p1: number;
-	p2: number;
-	p3: number;
-}) {
-	const mt = 1 - progress;
-	return (
-		mt * mt * mt * p0 +
-		3 * mt * mt * progress * p1 +
-		3 * mt * progress * progress * p2 +
-		progress * progress * progress * p3
-	);
-}
-
-export function getDefaultRightHandle({
-	leftKey,
-	rightKey,
-}: {
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-}) {
-	const span = rightKey.time - leftKey.time;
-	const valueDelta = rightKey.value - leftKey.value;
-	return {
-		dt: span / 3,
-		dv: valueDelta / 3,
-	};
-}
-
-export function getDefaultLeftHandle({
-	leftKey,
-	rightKey,
-}: {
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-}) {
-	const span = rightKey.time - leftKey.time;
-	const valueDelta = rightKey.value - leftKey.value;
-	return {
-		dt: -span / 3,
-		dv: -valueDelta / 3,
-	};
-}
-
-export function solveBezierProgressForTime({
-	time,
-	leftKey,
-	rightKey,
-}: {
-	time: number;
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-}) {
-	let lower = 0;
-	let upper = 1;
-	const rightHandle =
-		leftKey.rightHandle ?? getDefaultRightHandle({ leftKey, rightKey });
-	const leftHandle =
-		rightKey.leftHandle ?? getDefaultLeftHandle({ leftKey, rightKey });
-
-	for (let iteration = 0; iteration < BEZIER_SOLVE_ITERATIONS; iteration++) {
-		const mid = (lower + upper) / 2;
-		const estimate = getBezierPoint({
-			progress: mid,
-			p0: leftKey.time,
-			p1: leftKey.time + rightHandle.dt,
-			p2: rightKey.time + leftHandle.dt,
-			p3: rightKey.time,
-		});
-		if (estimate < time) {
-			lower = mid;
-		} else {
-			upper = mid;
-		}
-	}
-
-	return (lower + upper) / 2;
-}
@@ -1,57 +0,0 @@
-import type {
-	AnimationChannel,
-	ChannelData,
-	CompositeChannelData,
-} from "@/animation/types";
-
-const LEGACY_ANIMATION_STORAGE_KEYS = new Set(["bindings", "channels"]);
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null;
-}
-
-export function isLeafChannelData(
-	data: ChannelData | undefined,
-): data is AnimationChannel {
-	return isRecord(data) && Array.isArray(data.keys);
-}
-
-export function isCompositeChannelData(
-	data: ChannelData | undefined,
-): data is CompositeChannelData {
-	return isRecord(data) && !Array.isArray(data.keys);
-}
-
-export function getChannelsFromData({
-	data,
-}: {
-	data: ChannelData | undefined;
-}): AnimationChannel[] {
-	if (isLeafChannelData(data)) {
-		return [data];
-	}
-	if (!isCompositeChannelData(data)) {
-		return [];
-	}
-	return Object.values(data).filter(isLeafChannelData);
-}
-
-export function getChannelEntriesFromData({
-	data,
-}: {
-	data: ChannelData | undefined;
-}): Array<[string, AnimationChannel]> {
-	if (isLeafChannelData(data)) {
-		return [["value", data]];
-	}
-	if (!isCompositeChannelData(data)) {
-		return [];
-	}
-	return Object.entries(data).flatMap(([componentKey, channel]) =>
-		isLeafChannelData(channel) ? [[componentKey, channel]] : [],
-	);
-}
-
-export function isAnimationStorageKey({ key }: { key: string }): boolean {
-	return !LEGACY_ANIMATION_STORAGE_KEYS.has(key);
-}
@@ -1,96 +0,0 @@
-import {
-	getDefaultLeftHandle,
-	getDefaultRightHandle,
-} from "@/animation/bezier";
-import type {
-	CurveHandle,
-	NormalizedCubicBezier,
-	ScalarAnimationKey,
-} from "@/animation/types";
-import { roundMediaTime } from "@/wasm";
-
-const VALUE_EPSILON = 1e-6;
-
-function clamp01({ value }: { value: number }): number {
-	return Math.max(0, Math.min(1, value));
-}
-
-export function getNormalizedCubicBezierForScalarSegment({
-	leftKey,
-	rightKey,
-	referenceSpanValue,
-}: {
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-	/** Fallback Y-axis scale used when the segment is flat (spanValue ≈ 0). */
-	referenceSpanValue?: number;
-}): NormalizedCubicBezier | null {
-	const spanTime = rightKey.time - leftKey.time;
-	const spanValue = rightKey.value - leftKey.value;
-	const effectiveSpanValue =
-		Math.abs(spanValue) > VALUE_EPSILON
-			? spanValue
-			: referenceSpanValue !== undefined && Math.abs(referenceSpanValue) > VALUE_EPSILON
-				? referenceSpanValue
-				: null;
-
-	if (spanTime === 0 || effectiveSpanValue === null) {
-		return null;
-	}
-
-	const rightHandle =
-		leftKey.rightHandle ?? getDefaultRightHandle({ leftKey, rightKey });
-	const leftHandle =
-		rightKey.leftHandle ?? getDefaultLeftHandle({ leftKey, rightKey });
-
-	return [
-		clamp01({ value: rightHandle.dt / spanTime }),
-		rightHandle.dv / effectiveSpanValue,
-		clamp01({ value: 1 + leftHandle.dt / spanTime }),
-		1 + leftHandle.dv / effectiveSpanValue,
-	];
-}
-
-export function getCurveHandlesForNormalizedCubicBezier({
-	leftKey,
-	rightKey,
-	cubicBezier,
-	referenceSpanValue,
-}: {
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-	cubicBezier: NormalizedCubicBezier;
-	/** Fallback Y-axis scale used when the segment is flat (spanValue ≈ 0). */
-	referenceSpanValue?: number;
-}): {
-	rightHandle: CurveHandle;
-	leftHandle: CurveHandle;
-} | null {
-	const spanTime = rightKey.time - leftKey.time;
-	const spanValue = rightKey.value - leftKey.value;
-	const effectiveSpanValue =
-		Math.abs(spanValue) > VALUE_EPSILON
-			? spanValue
-			: referenceSpanValue !== undefined && Math.abs(referenceSpanValue) > VALUE_EPSILON
-				? referenceSpanValue
-				: null;
-
-	if (spanTime === 0 || effectiveSpanValue === null) {
-		return null;
-	}
-
-	const [rawX1, y1, rawX2, y2] = cubicBezier;
-	const x1 = clamp01({ value: rawX1 });
-	const x2 = clamp01({ value: rawX2 });
-
-	return {
-		rightHandle: {
-			dt: roundMediaTime({ time: spanTime * x1 }),
-			dv: effectiveSpanValue * y1,
-		},
-		leftHandle: {
-			dt: roundMediaTime({ time: spanTime * (x2 - 1) }),
-			dv: effectiveSpanValue * (y2 - 1),
-		},
-	};
-}
@@ -1,102 +0,0 @@
-import type {
-	ElementAnimations,
-	EffectParamPath,
-} from "@/animation/types";
-import type { ParamValues } from "@/params";
-import { removeElementKeyframe } from "./keyframes";
-import { resolveAnimationPathValueAtTime } from "./resolve";
-
-export const EFFECT_PARAM_PATH_PREFIX = "effects.";
-export const EFFECT_PARAM_PATH_SUFFIX = ".params.";
-
-export function buildEffectParamPath({
-	effectId,
-	paramKey,
-}: {
-	effectId: string;
-	paramKey: string;
-}): EffectParamPath {
-	return `${EFFECT_PARAM_PATH_PREFIX}${effectId}${EFFECT_PARAM_PATH_SUFFIX}${paramKey}`;
-}
-
-export function isEffectParamPath(
-	propertyPath: string,
-): propertyPath is EffectParamPath {
-	return (
-		propertyPath.startsWith(EFFECT_PARAM_PATH_PREFIX) &&
-		propertyPath.includes(EFFECT_PARAM_PATH_SUFFIX)
-	);
-}
-
-export function parseEffectParamPath({
-	propertyPath,
-}: {
-	propertyPath: string;
-}): { effectId: string; paramKey: string } | null {
-	if (!isEffectParamPath(propertyPath)) {
-		return null;
-	}
-
-	const withoutPrefix = propertyPath.slice(EFFECT_PARAM_PATH_PREFIX.length);
-	const separatorIndex = withoutPrefix.indexOf(EFFECT_PARAM_PATH_SUFFIX);
-	if (separatorIndex <= 0) {
-		return null;
-	}
-
-	const effectId = withoutPrefix.slice(0, separatorIndex);
-	const paramKey = withoutPrefix.slice(
-		separatorIndex + EFFECT_PARAM_PATH_SUFFIX.length,
-	);
-	if (!effectId || !paramKey) {
-		return null;
-	}
-
-	return { effectId, paramKey };
-}
-
-export function resolveEffectParamsAtTime({
-	effectId,
-	params,
-	animations,
-	localTime,
-}: {
-	effectId: string;
-	params: ParamValues;
-	animations: ElementAnimations | undefined;
-	localTime: number;
-}): ParamValues {
-	const safeLocalTime = Math.max(0, localTime);
-	const resolved: ParamValues = {};
-
-	for (const [paramKey, staticValue] of Object.entries(params)) {
-		const path = buildEffectParamPath({ effectId, paramKey });
-		resolved[paramKey] = animations?.[path]
-			? resolveAnimationPathValueAtTime({
-					animations,
-					propertyPath: path,
-					localTime: safeLocalTime,
-					fallbackValue: staticValue,
-				})
-			: staticValue;
-	}
-
-	return resolved;
-}
-
-export function removeEffectParamKeyframe({
-	animations,
-	effectId,
-	paramKey,
-	keyframeId,
-}: {
-	animations: ElementAnimations | undefined;
-	effectId: string;
-	paramKey: string;
-	keyframeId: string;
-}): ElementAnimations | undefined {
-	return removeElementKeyframe({
-		animations,
-		propertyPath: buildEffectParamPath({ effectId, paramKey }),
-		keyframeId,
-	});
-}
@@ -1,114 +0,0 @@
-import type {
-	AnimationPath,
-	ElementAnimations,
-	ChannelData,
-	ScalarAnimationChannel,
-	ScalarGraphChannel,
-	ScalarGraphKeyframeContext,
-} from "@/animation/types";
-import type { ChannelEasingMode } from "@/params";
-import { isCompositeChannelData, isLeafChannelData } from "./channel-data";
-import { isScalarChannel } from "./interpolation";
-
-export interface EditableScalarChannels {
-	easingMode: ChannelEasingMode;
-	channels: ScalarGraphChannel[];
-}
-
-function isScalarAnimationChannel(
-	channel: ChannelData | undefined,
-): channel is ScalarAnimationChannel {
-	return isLeafChannelData(channel) && isScalarChannel(channel);
-}
-
-function getEasingModeForChannelData({
-	data,
-}: {
-	data: ChannelData | undefined;
-}): ChannelEasingMode {
-	return isCompositeChannelData(data) &&
-		["r", "g", "b", "a"].every((componentKey) => componentKey in data)
-		? "shared"
-		: "independent";
-}
-
-export function getEditableScalarChannels({
-	animations,
-	propertyPath,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-}): EditableScalarChannels | null {
-	const data = animations?.[propertyPath];
-	if (!data) {
-		return null;
-	}
-
-	const channelEntries = isLeafChannelData(data)
-		? [["value", data] as const]
-		: Object.entries(data);
-	const channels = channelEntries.flatMap(([componentKey, channel]) => {
-		if (!isScalarAnimationChannel(channel)) {
-			return [];
-		}
-
-		return [
-			{
-				propertyPath,
-				componentKey,
-				channel,
-			} satisfies ScalarGraphChannel,
-		];
-	});
-
-	return { easingMode: getEasingModeForChannelData({ data }), channels };
-}
-
-export function getEditableScalarChannel({
-	animations,
-	propertyPath,
-	componentKey,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	componentKey: string;
-}): ScalarGraphChannel | null {
-	const result = getEditableScalarChannels({ animations, propertyPath });
-	return result?.channels.find((channel) => channel.componentKey === componentKey) ?? null;
-}
-
-export function getScalarKeyframeContext({
-	animations,
-	propertyPath,
-	componentKey,
-	keyframeId,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	componentKey: string;
-	keyframeId: string;
-}): ScalarGraphKeyframeContext | null {
-	const scalarChannel = getEditableScalarChannel({
-		animations,
-		propertyPath,
-		componentKey,
-	});
-	if (!scalarChannel) {
-		return null;
-	}
-
-	const keyframeIndex = scalarChannel.channel.keys.findIndex(
-		(keyframe) => keyframe.id === keyframeId,
-	);
-	if (keyframeIndex < 0) {
-		return null;
-	}
-
-	return {
-		...scalarChannel,
-		keyframe: scalarChannel.channel.keys[keyframeIndex],
-		keyframeIndex,
-		previousKey: scalarChannel.channel.keys[keyframeIndex - 1] ?? null,
-		nextKey: scalarChannel.channel.keys[keyframeIndex + 1] ?? null,
-	};
-}
@@ -1,65 +0,0 @@
-import type {
-	ElementAnimations,
-	GraphicParamPath,
-} from "@/animation/types";
-import type { ParamDefinition, ParamValues } from "@/params";
-import { resolveAnimationPathValueAtTime } from "./resolve";
-
-export const GRAPHIC_PARAM_PATH_PREFIX = "params.";
-
-export function buildGraphicParamPath({
-	paramKey,
-}: {
-	paramKey: string;
-}): GraphicParamPath {
-	return `${GRAPHIC_PARAM_PATH_PREFIX}${paramKey}`;
-}
-
-export function isGraphicParamPath(
-	propertyPath: string,
-): propertyPath is GraphicParamPath {
-	return propertyPath.startsWith(GRAPHIC_PARAM_PATH_PREFIX);
-}
-
-export function parseGraphicParamPath({
-	propertyPath,
-}: {
-	propertyPath: string;
-}): { paramKey: string } | null {
-	if (!isGraphicParamPath(propertyPath)) {
-		return null;
-	}
-
-	const paramKey = propertyPath.slice(GRAPHIC_PARAM_PATH_PREFIX.length);
-	return paramKey.length > 0 ? { paramKey } : null;
-}
-
-export function resolveGraphicParamsAtTime({
-	params,
-	definitions,
-	animations,
-	localTime,
-}: {
-	params: ParamValues;
-	definitions: ParamDefinition[];
-	animations?: ElementAnimations;
-	localTime: number;
-}): ParamValues {
-	const resolved: ParamValues = { ...params };
-
-	for (const param of definitions) {
-		const path = buildGraphicParamPath({ paramKey: param.key });
-		if (!animations?.[path]) {
-			continue;
-		}
-
-		resolved[param.key] = resolveAnimationPathValueAtTime({
-			animations,
-			propertyPath: path,
-			localTime: Math.max(0, localTime),
-			fallbackValue: params[param.key] ?? param.default,
-		});
-	}
-
-	return resolved;
-}
@@ -1,425 +0,0 @@
-import type {
-	AnimationChannel,
-	AnimationInterpolation,
-	Channel,
-	DiscreteAnimationChannel,
-	DiscreteValue,
-	ScalarAnimationChannel,
-	ScalarAnimationKey,
-	ScalarSegmentType,
-} from "@/animation/types";
-import type { ParamValue } from "@/params";
-import { mediaTime } from "@/wasm";
-import {
-	getBezierPoint,
-	getDefaultLeftHandle,
-	getDefaultRightHandle,
-	solveBezierProgressForTime,
-} from "./bezier";
-import { clamp } from "@/utils/math";
-
-function byTimeAscending({
-	leftTime,
-	rightTime,
-}: {
-	leftTime: number;
-	rightTime: number;
-}): number {
-	return leftTime - rightTime;
-}
-
-function isWithinTimePair({
-	time,
-	leftTime,
-	rightTime,
-}: {
-	time: number;
-	leftTime: number;
-	rightTime: number;
-}): boolean {
-	return time >= leftTime && time <= rightTime;
-}
-
-function lerpNumber({
-	leftValue,
-	rightValue,
-	progress,
-}: {
-	leftValue: number;
-	rightValue: number;
-	progress: number;
-}): number {
-	return leftValue + (rightValue - leftValue) * progress;
-}
-
-function normalizeRightHandle({
-	handle,
-	leftKey,
-	rightKey,
-}: {
-	handle: ScalarAnimationKey["rightHandle"];
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-}) {
-	if (!handle) {
-		return undefined;
-	}
-
-	const span = mediaTime({
-		ticks: Math.max(1, rightKey.time - leftKey.time),
-	});
-	return {
-		dt: mediaTime({
-			ticks: Math.min(span, Math.max(0, handle.dt)),
-		}),
-		dv: handle.dv,
-	};
-}
-
-function normalizeLeftHandle({
-	handle,
-	leftKey,
-	rightKey,
-}: {
-	handle: ScalarAnimationKey["leftHandle"];
-	leftKey: ScalarAnimationKey;
-	rightKey: ScalarAnimationKey;
-}) {
-	if (!handle) {
-		return undefined;
-	}
-
-	const span = mediaTime({
-		ticks: Math.max(1, rightKey.time - leftKey.time),
-	});
-	return {
-		dt: mediaTime({
-			ticks: Math.max(-span, Math.min(0, handle.dt)),
-		}),
-		dv: handle.dv,
-	};
-}
-
-function normalizeScalarKey({
-	key,
-}: {
-	key: ScalarAnimationKey;
-}): ScalarAnimationKey {
-	return {
-		...key,
-		tangentMode: key.tangentMode ?? "flat",
-		segmentToNext: key.segmentToNext ?? "linear",
-	};
-}
-
-export function normalizeScalarChannel({
-	channel,
-}: {
-	channel: ScalarAnimationChannel;
-}): ScalarAnimationChannel {
-	const sortedKeys = [...channel.keys]
-		.map((key) => normalizeScalarKey({ key }))
-		.sort((leftKey, rightKey) =>
-			byTimeAscending({
-				leftTime: leftKey.time,
-				rightTime: rightKey.time,
-			}),
-		);
-	const nextKeys = sortedKeys.map((key, index) => {
-		const previousKey = sortedKeys[index - 1];
-		const nextKey = sortedKeys[index + 1];
-		return {
-			...key,
-			leftHandle:
-				previousKey != null
-					? normalizeLeftHandle({
-							handle: key.leftHandle,
-							leftKey: previousKey,
-							rightKey: key,
-						})
-					: undefined,
-			rightHandle:
-				nextKey != null
-					? normalizeRightHandle({
-							handle: key.rightHandle,
-							leftKey: key,
-							rightKey: nextKey,
-						})
-					: undefined,
-		};
-	});
-
-	return {
-		...channel,
-		keys: nextKeys,
-	};
-}
-
-export function normalizeDiscreteChannel({
-	channel,
-}: {
-	channel: DiscreteAnimationChannel;
-}): DiscreteAnimationChannel {
-	return {
-		...channel,
-		keys: [...channel.keys].sort((leftKeyframe, rightKeyframe) =>
-			byTimeAscending({
-				leftTime: leftKeyframe.time,
-				rightTime: rightKeyframe.time,
-			}),
-		),
-	};
-}
-
-export function isScalarChannel(channel: AnimationChannel): channel is ScalarAnimationChannel {
-	return (
-		"extrapolation" in channel ||
-		channel.keys.some((keyframe) => "segmentToNext" in keyframe)
-	);
-}
-
-export function normalizeChannel({
-	channel,
-}: {
-	channel: ScalarAnimationChannel;
-}): ScalarAnimationChannel;
-export function normalizeChannel({
-	channel,
-}: {
-	channel: DiscreteAnimationChannel;
-}): DiscreteAnimationChannel;
-export function normalizeChannel({
-	channel,
-}: {
-	channel: AnimationChannel;
-}): AnimationChannel;
-export function normalizeChannel({
-	channel,
-}: {
-	channel: AnimationChannel;
-}): AnimationChannel {
-	return isScalarChannel(channel)
-		? normalizeScalarChannel({ channel })
-		: normalizeDiscreteChannel({ channel });
-}
-
-function extrapolateScalarEdge({
-	mode,
-	edgeKey,
-	neighborKey,
-	time,
-}: {
-	mode: "hold" | "linear";
-	edgeKey: ScalarAnimationKey;
-	neighborKey: ScalarAnimationKey | undefined;
-	time: number;
-}) {
-	if (mode === "hold" || !neighborKey) {
-		return edgeKey.value;
-	}
-
-	const span = neighborKey.time - edgeKey.time;
-	if (span === 0) {
-		return edgeKey.value;
-	}
-
-	return edgeKey.value + ((time - edgeKey.time) / span) * (neighborKey.value - edgeKey.value);
-}
-
-export function getScalarSegmentInterpolation({
-	segment,
-}: {
-	segment: ScalarSegmentType;
-}): AnimationInterpolation {
-	if (segment === "step") {
-		return "hold";
-	}
-
-	return segment === "bezier" ? "bezier" : "linear";
-}
-
-export function getScalarChannelValueAtTime({
-	channel,
-	time,
-	fallbackValue,
-}: {
-	channel: Channel<number> | undefined;
-	time: number;
-	fallbackValue: number;
-}): number {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	const normalizedChannel = normalizeScalarChannel({ channel });
-	const firstKey = normalizedChannel.keys[0];
-	const lastKey = normalizedChannel.keys[normalizedChannel.keys.length - 1];
-	if (!firstKey || !lastKey) {
-		return fallbackValue;
-	}
-
-	if (time <= firstKey.time) {
-		if (time < firstKey.time) {
-			return extrapolateScalarEdge({
-				mode: normalizedChannel.extrapolation?.before ?? "hold",
-				edgeKey: firstKey,
-				neighborKey: normalizedChannel.keys[1],
-				time,
-			});
-		}
-
-		return firstKey.value;
-	}
-
-	if (time >= lastKey.time) {
-		if (time > lastKey.time) {
-			return extrapolateScalarEdge({
-				mode: normalizedChannel.extrapolation?.after ?? "hold",
-				edgeKey: lastKey,
-				neighborKey: normalizedChannel.keys[normalizedChannel.keys.length - 2],
-				time,
-			});
-		}
-
-		return lastKey.value;
-	}
-
-	for (
-		let keyIndex = 0;
-		keyIndex < normalizedChannel.keys.length - 1;
-		keyIndex++
-	) {
-		const leftKey = normalizedChannel.keys[keyIndex];
-		const rightKey = normalizedChannel.keys[keyIndex + 1];
-		if (time === rightKey.time) {
-			return rightKey.value;
-		}
-
-		if (
-			!isWithinTimePair({
-				time,
-				leftTime: leftKey.time,
-				rightTime: rightKey.time,
-			})
-		) {
-			continue;
-		}
-
-		if (leftKey.segmentToNext === "step") {
-			return leftKey.value;
-		}
-
-		const span = rightKey.time - leftKey.time;
-		if (span === 0) {
-			return rightKey.value;
-		}
-
-		const progress = clamp({
-			value: (time - leftKey.time) / span,
-			min: 0,
-			max: 1,
-		});
-		if (leftKey.segmentToNext === "linear") {
-			return lerpNumber({
-				leftValue: leftKey.value,
-				rightValue: rightKey.value,
-				progress,
-			});
-		}
-
-		const curveProgress = solveBezierProgressForTime({
-			time,
-			leftKey,
-			rightKey,
-		});
-		const rightHandle =
-			leftKey.rightHandle ?? getDefaultRightHandle({ leftKey, rightKey });
-		const leftHandle =
-			rightKey.leftHandle ?? getDefaultLeftHandle({ leftKey, rightKey });
-		return getBezierPoint({
-			progress: curveProgress,
-			p0: leftKey.value,
-			p1: leftKey.value + rightHandle.dv,
-			p2: rightKey.value + leftHandle.dv,
-			p3: rightKey.value,
-		});
-	}
-
-	return lastKey.value;
-}
-
-export function getDiscreteChannelValueAtTime({
-	channel,
-	time,
-	fallbackValue,
-}: {
-	channel: Channel<DiscreteValue> | undefined;
-	time: number;
-	fallbackValue: DiscreteValue;
-}): DiscreteValue {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	const normalizedChannel = normalizeDiscreteChannel({ channel });
-	let currentValue = fallbackValue;
-	for (const key of normalizedChannel.keys) {
-		if (time < key.time) {
-			break;
-		}
-		currentValue = key.value;
-	}
-	return currentValue;
-}
-
-export function getChannelValueAtTime({
-	channel,
-	time,
-	fallbackValue,
-}: {
-	channel: Channel<number> | undefined;
-	time: number;
-	fallbackValue: number;
-}): number;
-export function getChannelValueAtTime<TValue extends DiscreteValue>({
-	channel,
-	time,
-	fallbackValue,
-}: {
-	channel: DiscreteAnimationChannel | undefined;
-	time: number;
-	fallbackValue: TValue;
-}): TValue;
-export function getChannelValueAtTime({
-	channel,
-	time,
-	fallbackValue,
-}: {
-	channel: AnimationChannel | undefined;
-	time: number;
-	fallbackValue: ParamValue;
-}): ParamValue {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	if (typeof fallbackValue === "number") {
-		return isScalarChannel(channel)
-			? getScalarChannelValueAtTime({
-					channel,
-					time,
-					fallbackValue,
-				})
-			: fallbackValue;
-	}
-
-	if (typeof fallbackValue !== "string" && typeof fallbackValue !== "boolean") {
-		return fallbackValue;
-	}
-
-	return getDiscreteChannelValueAtTime({
-		channel: isScalarChannel(channel) ? undefined : channel,
-		time,
-		fallbackValue,
-	});
-}
@@ -1,314 +0,0 @@
-import type {
-	AnimationChannel,
-	AnimationPath,
-	ChannelData,
-	ElementAnimations,
-	ElementKeyframe,
-} from "@/animation/types";
-import { formatLinearRgba } from "@/params";
-import {
-	getChannelEntriesFromData,
-	isAnimationStorageKey,
-} from "./channel-data";
-import {
-	getChannelValueAtTime,
-	getScalarSegmentInterpolation,
-	isScalarChannel,
-} from "./interpolation";
-import { isAnimationPath } from "./path";
-
-function getChannelFallbackValue({
-	channel,
-}: {
-	channel: AnimationChannel;
-}) {
-	if (channel.keys.length === 0) {
-		return isScalarChannel(channel) ? 0 : false;
-	}
-
-	return channel.keys[0].value;
-}
-
-interface ChannelKeyframeMatch {
-	componentKey: string;
-	componentIndex: number;
-	channel: AnimationChannel;
-	keyframe: AnimationChannel["keys"][number];
-}
-
-function getChannelKeyframeMatches({
-	data,
-}: {
-	data: ChannelData | undefined;
-}): ChannelKeyframeMatch[] {
-	return getChannelEntriesFromData({ data }).flatMap(
-		([componentKey, channel], componentIndex) => {
-			if (channel.keys.length === 0) {
-				return [];
-			}
-
-			return channel.keys.map((keyframe) => ({
-				componentKey,
-				componentIndex,
-				channel,
-				keyframe,
-			}));
-		},
-	);
-}
-
-function getUniqueChannelKeyframeMatches({
-	data,
-}: {
-	data: ChannelData | undefined;
-}): ChannelKeyframeMatch[] {
-	const sortedMatches = getChannelKeyframeMatches({
-		data,
-	}).sort(
-		(leftMatch, rightMatch) =>
-			leftMatch.keyframe.time - rightMatch.keyframe.time ||
-			leftMatch.componentIndex - rightMatch.componentIndex,
-	);
-	const uniqueMatches: ChannelKeyframeMatch[] = [];
-
-	for (const match of sortedMatches) {
-		const previousMatch = uniqueMatches[uniqueMatches.length - 1];
-		if (
-			!previousMatch ||
-			previousMatch.keyframe.time !== match.keyframe.time
-		) {
-			uniqueMatches.push(match);
-			continue;
-		}
-
-		if (
-			previousMatch.componentIndex !== 0 &&
-			match.componentIndex === 0
-		) {
-			uniqueMatches[uniqueMatches.length - 1] = match;
-		}
-	}
-
-	return uniqueMatches;
-}
-
-function getPreferredChannelKeyframeMatch({
-	matches,
-}: {
-	matches: ChannelKeyframeMatch[];
-}): ChannelKeyframeMatch | null {
-	return (
-		matches.find((match) => match.componentIndex === 0) ??
-		matches[0] ??
-		null
-	);
-}
-
-function getChannelValue({
-	channel,
-	time,
-}: {
-	channel: AnimationChannel;
-	time: number;
-}) {
-	const fallbackValue = getChannelFallbackValue({ channel });
-	if (typeof fallbackValue === "number") {
-		return getChannelValueAtTime({
-			channel: isScalarChannel(channel) ? channel : undefined,
-			time,
-			fallbackValue,
-		});
-	}
-	return getChannelValueAtTime({
-		channel: !isScalarChannel(channel) ? channel : undefined,
-		time,
-		fallbackValue,
-	});
-}
-
-function getComposedChannelDataValueAtTime({
-	data,
-	time,
-}: {
-	data: ChannelData | undefined;
-	time: number;
-}) {
-	const entries = getChannelEntriesFromData({ data });
-	if (entries.length === 0) {
-		return null;
-	}
-	if (entries.length === 1 && entries[0]?.[0] === "value") {
-		return getChannelValue({ channel: entries[0][1], time });
-	}
-
-	const componentValues = Object.fromEntries(
-		entries.map(([componentKey, channel]) => [
-			componentKey,
-			getChannelValue({ channel, time }),
-		]),
-	);
-	if (
-		typeof componentValues.r === "number" &&
-		typeof componentValues.g === "number" &&
-		typeof componentValues.b === "number" &&
-		typeof componentValues.a === "number"
-	) {
-		return formatLinearRgba({
-			color: {
-				r: componentValues.r,
-				g: componentValues.g,
-				b: componentValues.b,
-				a: componentValues.a,
-			},
-		});
-	}
-	return null;
-}
-
-function getKeyframeInterpolation({
-	channel,
-	keyframe,
-}: {
-	channel: AnimationChannel;
-	keyframe: AnimationChannel["keys"][number];
-}) {
-	return isScalarChannel(channel) && "segmentToNext" in keyframe
-		? getScalarSegmentInterpolation({ segment: keyframe.segmentToNext })
-		: "hold";
-}
-
-function toElementKeyframe({
-	data,
-	propertyPath,
-	keyframeMatch,
-}: {
-	data: ChannelData | undefined;
-	propertyPath: AnimationPath;
-	keyframeMatch: ChannelKeyframeMatch;
-}): ElementKeyframe | null {
-	const value = getComposedChannelDataValueAtTime({
-		data,
-		time: keyframeMatch.keyframe.time,
-	});
-	if (value === null) {
-		return null;
-	}
-
-	return {
-		propertyPath,
-		id: keyframeMatch.keyframe.id,
-		time: keyframeMatch.keyframe.time,
-		value,
-		interpolation: getKeyframeInterpolation({
-			channel: keyframeMatch.channel,
-			keyframe: keyframeMatch.keyframe,
-		}),
-	};
-}
-
-export function getElementKeyframes({
-	animations,
-}: {
-	animations: ElementAnimations | undefined;
-}): ElementKeyframe[] {
-	if (!animations) {
-		return [];
-	}
-
-	return Object.entries(animations).filter(([key]) =>
-		isAnimationStorageKey({ key }),
-	).flatMap(
-		([propertyPath, data]) => {
-			if (!data || !isAnimationPath(propertyPath)) {
-				return [];
-			}
-
-			return getUniqueChannelKeyframeMatches({
-				data,
-			}).flatMap((keyframeMatch) => {
-				const keyframe = toElementKeyframe({
-					data,
-					propertyPath,
-					keyframeMatch,
-				});
-				if (!keyframe) {
-					return [];
-				}
-
-				return [keyframe];
-			});
-		},
-	);
-}
-
-export function hasKeyframesForPath({
-	animations,
-	propertyPath,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-}): boolean {
-	return getChannelEntriesFromData({ data: animations?.[propertyPath] }).some(
-		([, channel]) => channel.keys.length > 0,
-	);
-}
-
-export function getKeyframeAtTime({
-	animations,
-	propertyPath,
-	time,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	time: number;
-}): ElementKeyframe | null {
-	const data = animations?.[propertyPath];
-	if (!data) {
-		return null;
-	}
-
-	const keyframeMatch = getPreferredChannelKeyframeMatch({
-		matches: getChannelKeyframeMatches({ data }).filter(
-			({ keyframe }) => keyframe.time === time,
-		),
-	});
-	if (!keyframeMatch) {
-		return null;
-	}
-
-	return toElementKeyframe({
-		data,
-		propertyPath,
-		keyframeMatch,
-	});
-}
-
-export function getKeyframeById({
-	animations,
-	propertyPath,
-	keyframeId,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}): ElementKeyframe | null {
-	const data = animations?.[propertyPath];
-	if (!data) {
-		return null;
-	}
-
-	const keyframeMatch = getPreferredChannelKeyframeMatch({
-		matches: getChannelKeyframeMatches({ data }).filter(
-			({ keyframe }) => keyframe.id === keyframeId,
-		),
-	});
-	if (!keyframeMatch) {
-		return null;
-	}
-
-	return toElementKeyframe({
-		data,
-		propertyPath,
-		keyframeMatch,
-	});
-}
@@ -1,22 +0,0 @@
-import type { AnimationPath, AnimationPropertyPath } from "@/animation/types";
-import { ANIMATION_PROPERTY_PATHS } from "./types";
-import { isEffectParamPath } from "./effect-param-channel";
-import { isGraphicParamPath } from "./graphic-param-channel";
-
-const ANIMATION_PROPERTY_PATH_SET = new Set<string>(ANIMATION_PROPERTY_PATHS);
-
-export function isAnimationPropertyPath(
-	propertyPath: string,
-): propertyPath is AnimationPropertyPath {
-	return ANIMATION_PROPERTY_PATH_SET.has(propertyPath);
-}
-
-export function isAnimationPath(
-	propertyPath: string,
-): propertyPath is AnimationPath {
-	return (
-		isAnimationPropertyPath(propertyPath) ||
-		isGraphicParamPath(propertyPath) ||
-		isEffectParamPath(propertyPath)
-	);
-}
@@ -1,153 +0,0 @@
-import type {
-	AnimationPath,
-	ElementAnimations,
-} from "@/animation/types";
-import { formatLinearRgba, parseColorToLinearRgba } from "@/params";
-import type { ParamValue } from "@/params";
-import { isCompositeChannelData, isLeafChannelData } from "./channel-data";
-import {
-	getChannelValueAtTime,
-	isScalarChannel,
-} from "./interpolation";
-
-export function getElementLocalTime({
-	timelineTime,
-	elementStartTime,
-	elementDuration,
-}: {
-	timelineTime: number;
-	elementStartTime: number;
-	elementDuration: number;
-}): number {
-	const localTime = timelineTime - elementStartTime;
-	if (localTime <= 0) {
-		return 0;
-	}
-
-	if (localTime >= elementDuration) {
-		return elementDuration;
-	}
-
-	return localTime;
-}
-
-export function resolveAnimationPathValueAtTime({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	localTime: number;
-	fallbackValue: number;
-}): number;
-export function resolveAnimationPathValueAtTime({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	localTime: number;
-	fallbackValue: string;
-}): string;
-export function resolveAnimationPathValueAtTime({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	localTime: number;
-	fallbackValue: boolean;
-}): boolean;
-export function resolveAnimationPathValueAtTime({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	localTime: number;
-	fallbackValue: ParamValue;
-}): ParamValue;
-export function resolveAnimationPathValueAtTime({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	localTime: number;
-	fallbackValue: ParamValue;
-}): ParamValue {
-	const data = animations?.[propertyPath];
-	if (!data) {
-		return fallbackValue;
-	}
-	if (isLeafChannelData(data)) {
-		if (typeof fallbackValue === "number") {
-			return getChannelValueAtTime({
-				channel: isScalarChannel(data) ? data : undefined,
-				time: localTime,
-				fallbackValue,
-			});
-		}
-		if (typeof fallbackValue === "string" || typeof fallbackValue === "boolean") {
-			return getChannelValueAtTime({
-				channel: !isScalarChannel(data) ? data : undefined,
-				time: localTime,
-				fallbackValue,
-			});
-		}
-		return fallbackValue;
-	}
-	if (!isCompositeChannelData(data)) {
-		return fallbackValue;
-	}
-
-	if (
-		typeof fallbackValue !== "string" ||
-		!("r" in data) ||
-		!("g" in data) ||
-		!("b" in data) ||
-		!("a" in data)
-	) {
-		return fallbackValue;
-	}
-
-	const fallbackComponents = parseColorToLinearRgba({ color: fallbackValue });
-	if (fallbackComponents === null) {
-		return fallbackValue;
-	}
-
-	return formatLinearRgba({
-		color: {
-			r: getChannelValueAtTime({
-				channel: data.r && isScalarChannel(data.r) ? data.r : undefined,
-				time: localTime,
-				fallbackValue: fallbackComponents.r,
-			}),
-			g: getChannelValueAtTime({
-				channel: data.g && isScalarChannel(data.g) ? data.g : undefined,
-				time: localTime,
-				fallbackValue: fallbackComponents.g,
-			}),
-			b: getChannelValueAtTime({
-				channel: data.b && isScalarChannel(data.b) ? data.b : undefined,
-				time: localTime,
-				fallbackValue: fallbackComponents.b,
-			}),
-			a: getChannelValueAtTime({
-				channel: data.a && isScalarChannel(data.a) ? data.a : undefined,
-				time: localTime,
-				fallbackValue: fallbackComponents.a,
-			}),
-		},
-	});
-}
@@ -1 +0,0 @@
-export const MIN_TRANSFORM_SCALE = 0.01;
@@ -1,157 +0,0 @@
-import type { MediaTime } from "@/wasm";
-import type { ParamValue } from "@/params";
-
-export const ANIMATION_PROPERTY_PATHS = [
-	"transform.positionX",
-	"transform.positionY",
-	"transform.scaleX",
-	"transform.scaleY",
-	"transform.rotate",
-	"opacity",
-	"volume",
-	"color",
-	"background.color",
-	"background.paddingX",
-	"background.paddingY",
-	"background.offsetX",
-	"background.offsetY",
-	"background.cornerRadius",
-] as const;
-
-export type AnimationPropertyPath = (typeof ANIMATION_PROPERTY_PATHS)[number];
-export type GraphicParamPath = `params.${string}`;
-export type EffectParamPath = `effects.${string}.params.${string}`;
-export type AnimationPath = string;
-
-export const ANIMATION_PROPERTY_GROUPS = {
-	"transform.scale": ["transform.scaleX", "transform.scaleY"],
-} as const satisfies Record<string, ReadonlyArray<AnimationPropertyPath>>;
-
-export type AnimationPropertyGroup = keyof typeof ANIMATION_PROPERTY_GROUPS;
-
-export type DiscreteValue = boolean | string;
-
-export interface NumericSpec {
-	min?: number;
-	max?: number;
-	step?: number;
-}
-export type AnimationColorPropertyPath = Extract<
-	AnimationPropertyPath,
-	"color" | "background.color"
->;
-export type AnimationNumericPropertyPath = Exclude<
-	AnimationPropertyPath,
-	AnimationColorPropertyPath
->;
-
-export type ContinuousKeyframeInterpolation = "linear" | "hold" | "bezier";
-export type DiscreteKeyframeInterpolation = "hold";
-export type AnimationInterpolation =
-	| ContinuousKeyframeInterpolation
-	| DiscreteKeyframeInterpolation;
-
-export type ScalarSegmentType = "step" | "linear" | "bezier";
-export type TangentMode = "auto" | "aligned" | "broken" | "flat";
-export type ChannelExtrapolationMode = "hold" | "linear";
-
-export interface CurveHandle {
-	dt: MediaTime;
-	dv: number;
-}
-
-interface BaseAnimationKeyframe<TValue extends ParamValue> {
-	id: string;
-	time: MediaTime; // relative to element start time
-	value: TValue;
-}
-
-export interface ScalarAnimationKey extends BaseAnimationKeyframe<number> {
-	leftHandle?: CurveHandle;
-	rightHandle?: CurveHandle;
-	segmentToNext: ScalarSegmentType;
-	tangentMode: TangentMode;
-}
-
-export type DiscreteAnimationKey = BaseAnimationKeyframe<DiscreteValue>;
-
-export type Keyframe<TValue extends ParamValue = ParamValue> =
-	TValue extends number
-		? ScalarAnimationKey
-		: TValue extends DiscreteValue
-			? DiscreteAnimationKey
-			: never;
-
-export interface ScalarChannel {
-	keys: ScalarAnimationKey[];
-	extrapolation?: {
-		before: ChannelExtrapolationMode;
-		after: ChannelExtrapolationMode;
-	};
-}
-
-export interface DiscreteChannel {
-	keys: DiscreteAnimationKey[];
-}
-
-export type Channel<TValue extends ParamValue = ParamValue> =
-	TValue extends number
-		? ScalarChannel
-		: TValue extends DiscreteValue
-			? DiscreteChannel
-			: never;
-
-export type ScalarAnimationChannel = Channel<number>;
-export type DiscreteAnimationChannel = Channel<DiscreteValue>;
-export type AnimationChannel = Channel;
-
-export type CompositeChannelData = Record<string, AnimationChannel | undefined>;
-export type ChannelData = AnimationChannel | CompositeChannelData;
-
-export interface ElementAnimations {
-	[propertyPath: AnimationPath]: ChannelData | undefined;
-}
-
-export type NormalizedCubicBezier = [number, number, number, number];
-
-export interface ScalarGraphChannelTarget {
-	propertyPath: AnimationPath;
-	componentKey: string;
-}
-
-export interface ScalarGraphChannel extends ScalarGraphChannelTarget {
-	channel: ScalarAnimationChannel;
-}
-
-export interface ScalarGraphKeyframeRef extends ScalarGraphChannelTarget {
-	keyframeId: string;
-}
-
-export interface ScalarGraphKeyframeContext extends ScalarGraphChannel {
-	keyframe: ScalarAnimationKey;
-	keyframeIndex: number;
-	previousKey: ScalarAnimationKey | null;
-	nextKey: ScalarAnimationKey | null;
-}
-
-export interface ScalarCurveKeyframePatch {
-	leftHandle?: CurveHandle | null;
-	rightHandle?: CurveHandle | null;
-	segmentToNext?: ScalarSegmentType;
-	tangentMode?: TangentMode;
-}
-
-export interface ElementKeyframe {
-	propertyPath: AnimationPath;
-	id: string;
-	time: MediaTime;
-	value: ParamValue;
-	interpolation: AnimationInterpolation;
-}
-
-export interface SelectedKeyframeRef {
-	trackId: string;
-	elementId: string;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}
@@ -1,61 +0,0 @@
-import type {
-	AnimationColorPropertyPath,
-	AnimationNumericPropertyPath,
-	ElementAnimations,
-} from "./types";
-import { resolveAnimationPathValueAtTime } from "./resolve";
-
-export function resolveOpacityAtTime({
-	baseOpacity,
-	animations,
-	localTime,
-}: {
-	baseOpacity: number;
-	animations: ElementAnimations | undefined;
-	localTime: number;
-}): number {
-	return resolveAnimationPathValueAtTime({
-		animations,
-		propertyPath: "opacity",
-		localTime: Math.max(0, localTime),
-		fallbackValue: baseOpacity,
-	});
-}
-
-export function resolveNumberAtTime({
-	baseValue,
-	animations,
-	propertyPath,
-	localTime,
-}: {
-	baseValue: number;
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationNumericPropertyPath;
-	localTime: number;
-}): number {
-	return resolveAnimationPathValueAtTime({
-		animations,
-		propertyPath,
-		localTime: Math.max(0, localTime),
-		fallbackValue: baseValue,
-	});
-}
-
-export function resolveColorAtTime({
-	baseColor,
-	animations,
-	propertyPath,
-	localTime,
-}: {
-	baseColor: string;
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationColorPropertyPath;
-	localTime: number;
-}): string {
-	return resolveAnimationPathValueAtTime({
-		animations,
-		propertyPath,
-		localTime: Math.max(0, localTime),
-		fallbackValue: baseColor,
-	});
-}
@@ -1,4 +1,4 @@
-import { auth } from "@/auth/server";
+import { auth } from "@/lib/auth/server";
 import { toNextJsHandler } from "better-auth/next-js";

 export const { POST, GET } = toNextJsHandler(auth);
@@ -1,31 +0,0 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
-import { checkRateLimit } from "@/auth/rate-limit";
-import { submitFeedback, MAX_MESSAGE_LENGTH } from "@/feedback";
-
-const submitSchema = z.object({
-	message: z
-		.string()
-		.min(1, "Message is required")
-		.max(MAX_MESSAGE_LENGTH, "Message too long"),
-});
-
-export async function POST(request: NextRequest) {
-	const { limited } = await checkRateLimit({ request });
-	if (limited) {
-		return NextResponse.json({ error: "Too many requests" }, { status: 429 });
-	}
-
-	const body = await request.json();
-	const result = submitSchema.safeParse(body);
-
-	if (!result.success) {
-		return NextResponse.json(
-			{ error: "Invalid input", details: result.error.flatten().fieldErrors },
-			{ status: 400 },
-		);
-	}
-
-	const entry = await submitFeedback(result.data);
-	return NextResponse.json({ entry }, { status: 201 });
-}
@@ -1,7 +1,7 @@
-import { webEnv } from "@/env/web";
+import { webEnv } from "@opencut/env/web";
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { checkRateLimit } from "@/auth/rate-limit";
+import { checkRateLimit } from "@/lib/rate-limit";

 const searchParamsSchema = z.object({
 	q: z.string().max(500, "Query too long").optional(),
@@ -4,8 +4,8 @@ import { notFound } from "next/navigation";
 import { BasePage } from "@/app/base-page";
 import Prose from "@/components/ui/prose";
 import { Separator } from "@/components/ui/separator";
-import { getPosts, getSinglePost, processHtmlContent } from "@/blog/query";
-import type { Author, Post } from "@/blog/types";
+import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog/query";
+import type { Author, Post } from "@/lib/blog/types";

 type PageProps = {
 	params: Promise<{ slug: string }>;
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { BasePage } from "@/app/base-page";
 import { Separator } from "@/components/ui/separator";
-import { getPosts } from "@/blog/query";
-import type { Post } from "@/blog/types";
+import { getPosts } from "@/lib/blog/query";
+import type { Post } from "@/lib/blog/types";

 export const metadata: Metadata = {
 	title: "Blog - OpenCut",
@@ -190,7 +190,7 @@ export default function BrandPage() {
 				</div>

 				<div className="flex flex-col gap-3">
-					<h2 className="font-semibold text-lg">What&apos;s not allowed</h2>
+					<h2 className="font-semibold text-lg">What's not allowed</h2>
 					<ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">
 						{[
 							"Using OpenCut in the name of your product, service, or domain.",
@@ -2,26 +2,27 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { BasePage } from "@/app/base-page";
+import { allChangelogs } from "content-collections";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { getReleaseByVersion, getSortedReleases } from "@/changelog/utils";
+import { getSortedReleases } from "../utils";
 import {
 	ReleaseArticle,
 	ReleaseMeta,
 	ReleaseTitle,
 	ReleaseDescription,
 	ReleaseChanges,
-} from "@/changelog/components/release";
-import { CopyMarkdownButton } from "@/changelog/components/copy-markdown-button";
+} from "../components/release";
+import { CopyMarkdownButton } from "../components/copy-markdown-button";

 type Props = { params: Promise<{ version: string }> };

 export async function generateStaticParams() {
-	return getSortedReleases().map((release) => ({ version: release.version }));
+	return allChangelogs.map((r) => ({ version: r.version }));
 }

 export async function generateMetadata({ params }: Props): Promise<Metadata> {
 	const { version } = await params;
-	const release = getReleaseByVersion({ version });
+	const release = allChangelogs.find((r) => r.version === version);
 	if (!release) return {};
 	return {
 		title: `${release.title} (${release.version}) - OpenCut Changelog`,
@@ -32,8 +33,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function ReleaseDetailPage({ params }: Props) {
 	const { version } = await params;
 	const releases = getSortedReleases();
-	const index = releases.findIndex((entry) => entry.version === version);
+	const index = releases.findIndex((r) => r.version === version);
+
 	if (index === -1) notFound();
+
 	const release = releases[index];
 	const newer = index > 0 ? releases[index - 1] : null;
 	const older = index < releases.length - 1 ? releases[index + 1] : null;
@@ -49,20 +52,20 @@ export default async function ReleaseDetailPage({ params }: Props) {
 					All releases
 				</Link>

-				<ReleaseArticle variant="detail">
-					<div className="flex flex-col gap-4">
-						<div className="flex items-center justify-between">
-							<ReleaseMeta release={release} />
-							<CopyMarkdownButton
-								description={release.description}
-								changes={release.changes}
-							/>
-						</div>
-						<ReleaseTitle as="h1">{release.title}</ReleaseTitle>
-						{release.description && (
-							<ReleaseDescription>{release.description}</ReleaseDescription>
-						)}
+			<ReleaseArticle variant="detail">
+				<div className="flex flex-col gap-4">
+					<div className="flex items-center justify-between">
+						<ReleaseMeta release={release} />
+						<CopyMarkdownButton
+							description={release.description}
+							changes={release.changes}
+						/>
 					</div>
+					<ReleaseTitle as="h1">{release.title}</ReleaseTitle>
+					{release.description && (
+						<ReleaseDescription>{release.description}</ReleaseDescription>
+					)}
+				</div>
 					<ReleaseChanges release={release} />
 				</ReleaseArticle>

@@ -2,11 +2,7 @@

 import { useState } from "react";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
-import {
-	getSectionTitle,
-	groupAndOrderChanges,
-	isSectionCollapsible,
-} from "../utils";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
 import type { Change } from "../utils";
 import { cn } from "@/utils/ui";
 import { Button } from "@/components/ui/button";
@@ -27,18 +23,7 @@ function buildMarkdown({
 	const { grouped, orderedTypes } = groupAndOrderChanges({ changes });

 	for (const type of orderedTypes) {
-		if (isSectionCollapsible({ type })) {
-			lines.push(
-				buildCollapsibleMarkdownSection({
-					title: getSectionTitle({ type }),
-					changes: grouped[type],
-				}),
-				"",
-			);
-			continue;
-		}
-
-		lines.push(`## ${getSectionTitle({ type })}`);
+		lines.push(`## ${getSectionTitle(type)}`);
 		for (const change of grouped[type]) {
 			lines.push(`- ${change.text}`);
 		}
@@ -48,18 +33,6 @@ function buildMarkdown({
 	return lines.join("\n").trimEnd();
 }

-function buildCollapsibleMarkdownSection({
-	title,
-	changes,
-}: {
-	title: string;
-	changes: Change[];
-}): string {
-	const bulletLines = changes.map((change) => `- ${change.text}`).join("\n");
-
-	return `<details>\n<summary>${title}</summary>\n\n${bulletLines}\n\n</details>`;
-}
-
 export function CopyMarkdownButton({
 	description,
 	changes,
@@ -81,10 +54,7 @@ export function CopyMarkdownButton({
 			size="sm"
 			variant="text"
 			onClick={handleCopy}
-			className={cn(
-				"flex items-center gap-1.5",
-				copied && "pointer-events-none",
-			)}
+			className={cn("flex items-center gap-1.5", copied && "pointer-events-none")}
 			title="Copy as markdown"
 		>
 			{copied ? (
@@ -1,16 +1,8 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { cn } from "@/utils/ui";
-import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
-import {
-	getSectionTitle,
-	groupAndOrderChanges,
-	isSectionCollapsible,
-	type Change,
-	type Release,
-} from "../utils";
-import { ArrowRightIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
+import type { Release } from "../utils";

 export function ReleaseArticle({
 	variant,
@@ -93,61 +85,22 @@ export function ReleaseChanges({ release }: { release: Release }) {
 	return (
 		<div className="flex flex-col gap-4">
 			{orderedTypes.map((type) => (
-				<ReleaseChangeSection key={type} type={type} changes={grouped[type]} />
+				<div key={type} className="flex flex-col gap-1.5">
+					<h3 className="text-base font-semibold text-foreground">
+						{getSectionTitle(type)}:
+					</h3>
+					<ul className="list-disc pl-5 space-y-1.5">
+						{grouped[type].map((change) => (
+							<li
+								key={change.text}
+								className="text-base text-foreground leading-relaxed"
+							>
+								{change.text}
+							</li>
+						))}
+					</ul>
+				</div>
 			))}
 		</div>
 	);
 }
-
-function ReleaseChangeSection({
-	type,
-	changes,
-}: {
-	type: string;
-	changes: Change[];
-}) {
-	const title = getSectionTitle({ type });
-
-	if (isSectionCollapsible({ type })) {
-		return (
-			<details className="group flex flex-col gap-1.5">
-				<summary className="flex w-fit cursor-pointer list-none items-center gap-1.5 text-base font-semibold text-foreground [&::-webkit-details-marker]:hidden">
-					<span>{title}:</span>
-					<HugeiconsIcon
-						icon={ArrowRightIcon}
-						className="size-3 shrink-0 text-muted-foreground group-open:rotate-90"
-					/>
-				</summary>
-				<ReleaseChangeList changes={changes} />
-			</details>
-		);
-	}
-
-	return (
-		<div className="flex flex-col gap-1.5">
-			<h3 className="text-base font-semibold text-foreground">{title}:</h3>
-			<ReleaseChangeList changes={changes} />
-		</div>
-	);
-}
-
-function ReleaseChangeList({
-	changes,
-	className,
-}: {
-	changes: Change[];
-	className?: string;
-}) {
-	return (
-		<ul className={cn("list-disc space-y-1.5 pl-5", className)}>
-			{changes.map((change) => (
-				<li
-					key={change.text}
-					className="text-base leading-relaxed text-foreground"
-				>
-					<ReactMarkdownWrapper inline>{change.text}</ReactMarkdownWrapper>
-				</li>
-			))}
-		</ul>
-	);
-}
@@ -1,17 +1,14 @@
 import type { Metadata } from "next";
 import { BasePage } from "@/app/base-page";
 import { Separator } from "@/components/ui/separator";
-import {
-	type Release as ReleaseType,
-	getSortedReleases,
-} from "@/changelog/utils";
+import { type Release as ReleaseType, getSortedReleases } from "./utils";
 import {
 	ReleaseArticle,
 	ReleaseMeta,
 	ReleaseTitle,
 	ReleaseDescription,
 	ReleaseChanges,
-} from "@/changelog/components/release";
+} from "./components/release";

 export const metadata: Metadata = {
 	title: "Changelog - OpenCut",
@@ -0,0 +1,43 @@
+import { allChangelogs } from "content-collections";
+
+export type Change = { type: string; text: string };
+export type Release = (typeof allChangelogs)[number];
+
+const knownSectionOrder = ["new", "improved", "fixed", "breaking"];
+
+const knownSectionTitles: Record<string, string> = {
+	new: "Features",
+	improved: "Improvements",
+	fixed: "Fixes",
+	breaking: "Breaking Changes",
+};
+
+export function getSectionTitle(type: string): string {
+	return (
+		knownSectionTitles[type] ?? type.charAt(0).toUpperCase() + type.slice(1)
+	);
+}
+
+export function groupAndOrderChanges({ changes }: { changes: Change[] }) {
+	const grouped = changes.reduce<Record<string, Change[]>>((acc, change) => {
+		if (!acc[change.type]) acc[change.type] = [];
+		acc[change.type].push(change);
+		return acc;
+	}, {});
+
+	const customTypes = Object.keys(grouped).filter(
+		(type) => !knownSectionOrder.includes(type),
+	);
+	const orderedTypes = [
+		...knownSectionOrder.filter((type) => grouped[type]?.length > 0),
+		...customTypes,
+	];
+
+	return { grouped, orderedTypes };
+}
+
+export function getSortedReleases() {
+	return [...allChangelogs].sort((a, b) =>
+		b.version.localeCompare(a.version, undefined, { numeric: true }),
+	);
+}
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Card, CardContent } from "@/components/ui/card";
-import { EXTERNAL_TOOLS } from "@/site/external-tools";
+import { EXTERNAL_TOOLS } from "@/constants/site-constants";
 import { BasePage } from "../base-page";

 export const metadata: Metadata = {
@@ -8,32 +8,15 @@ import {
 } from "@/components/ui/resizable";
 import { AssetsPanel } from "@/components/editor/panels/assets";
 import { PropertiesPanel } from "@/components/editor/panels/properties";
-import { Timeline } from "@/timeline/components";
-import { PreviewPanel } from "@/preview/components";
+import { Timeline } from "@/components/editor/panels/timeline";
+import { PreviewPanel } from "@/components/editor/panels/preview";
 import { EditorHeader } from "@/components/editor/editor-header";
 import { EditorProvider } from "@/components/providers/editor-provider";
 import { Onboarding } from "@/components/editor/onboarding";
-import { MigrationDialog } from "@/project/components/migration-dialog";
-import { usePanelStore } from "@/editor/panel-store";
-import { usePasteMedia } from "@/media/use-paste-media";
+import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { usePanelStore } from "@/stores/panel-store";
+import { usePasteMedia } from "@/hooks/use-paste-media";
 import { MobileGate } from "@/components/editor/mobile-gate";
-import { useMemo, useState } from "react";
-import { useEditor } from "@/editor/use-editor";
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Button } from "@/components/ui/button";
-import { ChangelogNotification } from "@/changelog/components/changelog-notification";
-import {
-	createPreviewOverlayControl,
-	isPreviewOverlayVisible,
-	mergePreviewOverlaySources,
-} from "@/preview/overlays";
-import { usePreviewStore } from "@/preview/preview-store";
-import { getGuidePreviewOverlaySource } from "@/guides";
-import {
-	bookmarkNotesPreviewOverlay,
-	getBookmarkPreviewOverlaySource,
-} from "@/timeline/bookmarks/index";

 export default function Editor() {
 	const params = useParams();
@@ -43,101 +26,29 @@ export default function Editor() {
 		<MobileGate>
 			<EditorProvider projectId={projectId}>
 				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
-					<DegradedRendererBanner />
 					<EditorHeader />
 					<div className="min-h-0 min-w-0 flex-1">
 						<EditorLayout />
 					</div>
 					<Onboarding />
 					<MigrationDialog />
-					<ChangelogNotification />
 				</div>
 			</EditorProvider>
 		</MobileGate>
 	);
 }

-function DegradedRendererBanner() {
-	const isDegraded = useEditor((e) => e.renderer.isDegraded);
-	const [dismissed, setDismissed] = useState(false);
-	if (!isDegraded || dismissed) return null;
-
-	return (
-		<div className="bg-accent border-b h-9 flex items-center justify-center gap-2 text-xs text-muted-foreground">
-			<span>For the best experience, open OpenCut in Chrome.</span>
-			<Button
-				variant="text"
-				size="icon"
-				className="p-0 w-auto [&_svg]:size-3.5"
-				onClick={() => setDismissed(true)}
-				aria-label="Dismiss"
-			>
-				<HugeiconsIcon icon={Cancel01Icon} />
-			</Button>
-		</div>
-	);
-}
-
 function EditorLayout() {
 	usePasteMedia();
 	const { panels, setPanel } = usePanelStore();
-	const activeScene = useEditor((editor) =>
-		editor.scenes.getActiveSceneOrNull(),
-	);
-	const currentTime = useEditor((editor) => editor.playback.getCurrentTime());
-	const activeGuide = usePreviewStore((state) => state.activeGuide);
-	const overlays = usePreviewStore((state) => state.overlays);
-	const setOverlayVisibility = usePreviewStore(
-		(state) => state.setOverlayVisibility,
-	);
-	const showBookmarkNotes = isPreviewOverlayVisible({
-		overlay: bookmarkNotesPreviewOverlay,
-		overlays,
-	});
-
-	const overlaySource = useMemo(
-		() =>
-			mergePreviewOverlaySources({
-				sources: [
-					getGuidePreviewOverlaySource({
-						guideId: activeGuide,
-					}),
-					activeScene
-						? getBookmarkPreviewOverlaySource({
-								bookmarks: activeScene.bookmarks,
-								time: currentTime,
-								isVisible: showBookmarkNotes,
-							})
-						: {
-								definitions: [bookmarkNotesPreviewOverlay],
-								instances: [],
-							},
-				],
-			}),
-		[activeGuide, activeScene, currentTime, showBookmarkNotes],
-	);
-
-	const overlayControls = useMemo(
-		() =>
-			overlaySource.definitions.map((overlay) =>
-				createPreviewOverlayControl({ overlay, overlays }),
-			),
-		[overlaySource.definitions, overlays],
-	);

 	return (
 		<ResizablePanelGroup
 			direction="vertical"
 			className="size-full gap-[0.18rem]"
 			onLayout={(sizes) => {
-				setPanel({
-					panel: "mainContent",
-					size: sizes[0] ?? panels.mainContent,
-				});
-				setPanel({
-					panel: "timeline",
-					size: sizes[1] ?? panels.timeline,
-				});
+				setPanel("mainContent", sizes[0] ?? panels.mainContent);
+				setPanel("timeline", sizes[1] ?? panels.timeline);
 			}}
 		>
 			<ResizablePanel
@@ -150,12 +61,9 @@ function EditorLayout() {
 					direction="horizontal"
 					className="size-full gap-[0.19rem] px-3"
 					onLayout={(sizes) => {
-						setPanel({ panel: "tools", size: sizes[0] ?? panels.tools });
-						setPanel({ panel: "preview", size: sizes[1] ?? panels.preview });
-						setPanel({
-							panel: "properties",
-							size: sizes[2] ?? panels.properties,
-						});
+						setPanel("tools", sizes[0] ?? panels.tools);
+						setPanel("preview", sizes[1] ?? panels.preview);
+						setPanel("properties", sizes[2] ?? panels.properties);
 					}}
 				>
 					<ResizablePanel
@@ -174,11 +82,7 @@ function EditorLayout() {
 						minSize={30}
 						className="min-h-0 min-w-0 flex-1"
 					>
-						<PreviewPanel
-							overlayControls={overlayControls}
-							overlayInstances={overlaySource.instances}
-							onOverlayVisibilityChange={setOverlayVisibility}
-						/>
+						<PreviewPanel />
 					</ResizablePanel>

 					<ResizableHandle withHandle />
@@ -28,8 +28,6 @@
  --destructive-foreground: hsl(0, 0%, 100%);
  --constructive: hsl(141, 71%, 48%);
  --constructive-foreground: hsl(0, 0%, 100%);
-  --caution: hsl(38, 92%, 50%);
-  --caution-foreground: hsl(0, 0%, 10%);
  --border: hsl(0 0% 91%);
  --input: hsl(0, 0%, 100%);
  --ring: hsl(0, 0%, 55%);
@@ -86,8 +84,6 @@
  --border: hsl(0 0% 16%);
  --input: hsl(0 0% 5%);
  --ring: hsl(0, 0%, 50%);
-  --caution: hsl(38, 92%, 60%);
-  --caution-foreground: hsl(0, 0%, 10%);
  --sidebar-background: hsl(0 0% 8%);
  --sidebar-foreground: hsl(0 0% 95%);
  --sidebar-primary: hsl(0 0% 95%);
@@ -193,9 +189,6 @@
  --color-constructive: var(--constructive);
  --color-constructive-foreground: var(--constructive-foreground);

-  --color-caution: var(--caution);
-  --color-caution-foreground: var(--caution-foreground);
-
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
@@ -2,11 +2,10 @@ import { ThemeProvider } from "next-themes";
 import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
-import { ChangelogNotification } from "@/changelog/components/changelog-notification";
 import { TooltipProvider } from "../components/ui/tooltip";
 import { baseMetaData } from "./metadata";
 import { BotIdClient } from "botid/client";
-import { webEnv } from "@/env/web";
+import { webEnv } from "@opencut/env/web";
 import { Inter } from "next/font/google";

 const siteFont = Inter({ subsets: ["latin"] });
@@ -36,6 +35,13 @@ export default function RootLayout({
 							crossOrigin="anonymous"
 							strategy="beforeInteractive"
 						/>
+
+						{/* code to figma */}
+						{/* <script
+							dangerouslySetInnerHTML={{
+								__html: `(function(){var s=document.createElement('script');s.src='https://mcp.figma.com/mcp/html-to-design/capture.js';document.head.appendChild(s);})();`,
+							}}
+						/> */}
 					</>
 				)}
 			</head>
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { SITE_INFO, SITE_URL } from "@/site/brand";
+import { SITE_INFO, SITE_URL } from "@/constants/site-constants";

 export const baseMetaData: Metadata = {
 	metadataBase: new URL(SITE_URL),
@@ -2,7 +2,7 @@ import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import type { Metadata } from "next";
-import { SITE_URL } from "@/site/brand";
+import { SITE_URL } from "@/constants/site-constants";

 export const metadata: Metadata = {
 	alternates: {
@@ -7,7 +7,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Separator } from "@/components/ui/separator";
-import { SOCIAL_LINKS } from "@/site/social";
+import { SOCIAL_LINKS } from "@/constants/site-constants";

 export const metadata: Metadata = {
 	title: "Privacy Policy - OpenCut",
@@ -57,10 +57,7 @@ export default function PrivacyPage() {
 								content is tracked
 							</li>
 							<li>You can clear local data from your browser at any time</li>
-							<li>
-								We don&apos;t sell or share your data with anyone (we don&apos;t
-								even have it)
-							</li>
+							<li>We don't sell or share your data with anyone (we don't even have it)</li>
 						</ol>
 						<p className="mt-4">
 							Questions? Email us at{" "}
@@ -175,7 +172,7 @@ export default function PrivacyPage() {
 					<a
 						href={SOCIAL_LINKS.github}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						GitHub
@@ -192,7 +189,7 @@ export default function PrivacyPage() {
 					<a
 						href={`${SOCIAL_LINKS.github}/issues`}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						GitHub repository
@@ -208,7 +205,7 @@ export default function PrivacyPage() {
 					<a
 						href={SOCIAL_LINKS.x}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						X (Twitter)
@@ -7,21 +7,21 @@ import type { KeyboardEvent, MouseEvent } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import type { EditorCore } from "@/core";
-import { MigrationDialog } from "@/project/components/migration-dialog";
-import { StoragePersistenceDialog } from "@/services/storage/components/storage-persistence-dialog";
+import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { StoragePersistenceDialog } from "@/components/editor/dialogs/storage-persistence-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useEditor } from "@/editor/use-editor";
+import { useEditor } from "@/hooks/use-editor";
 import { useProjectsStore } from "./store";
 import type {
 	TProjectMetadata,
 	TProjectSortKey,
 	TProjectSortOption,
-} from "@/project/types";
-import { formatTimecode, mediaTimeToSeconds } from "opencut-wasm";
+} from "@/lib/project/types";
+import { formatTimeCode } from "@/lib/time";
 import { formatDate } from "@/utils/date";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
@@ -46,7 +46,7 @@ import {
 	ArrowDown02Icon,
 	InformationCircleIcon,
 } from "@hugeicons/core-free-icons";
-import { OcVideoIcon } from "@/components/icons";
+import { OcVideoIcon } from "@opencut/ui/icons";
 import { Label } from "@/components/ui/label";
 import {
 	ContextMenu,
@@ -62,11 +62,11 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { DeleteProjectDialog } from "@/project/components/delete-project-dialog";
-import { ProjectInfoDialog } from "@/project/components/project-info-dialog";
-import { RenameProjectDialog } from "@/project/components/rename-project-dialog";
+import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
+import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
+import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
 import { cn } from "@/utils/ui";
-import { ChangelogNotification } from "@/changelog/components/changelog-notification";
+
 const formatProjectDuration = ({
 	duration,
 }: {
@@ -76,9 +76,8 @@ const formatProjectDuration = ({
 		return null;
 	}

-	const durationSeconds = mediaTimeToSeconds({ time: duration });
-	const format = durationSeconds >= 3600 ? "HH:MM:SS" : "MM:SS";
-	return formatTimecode({ time: duration, format }) ?? "";
+	const format = duration >= 3600 ? "HH:MM:SS" : "MM:SS";
+	return formatTimeCode({ timeInSeconds: duration, format });
 };

 const VIEW_MODE_OPTIONS = [
@@ -107,7 +106,6 @@ export default function ProjectsPage() {
 		<div className="bg-background min-h-screen">
 			<MigrationDialog />
 			<StoragePersistenceDialog />
-			<ChangelogNotification />
 			<ProjectsHeader />
 			<ProjectsToolbar projectIds={projectsToDisplay.map((p) => p.id)} />
 			<main className="mx-auto px-4 pt-2 pb-6 flex flex-col gap-4">
@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import type { TProjectSortKey } from "@/project/types";
+import type { TProjectSortKey } from "@/lib/project/types";

 export type ProjectsViewMode = "grid" | "list";

@@ -1,5 +1,5 @@
 import type { MetadataRoute } from "next";
-import { SITE_URL } from "@/site/brand";
+import { SITE_URL } from "@/constants/site-constants";

 export default function robots(): MetadataRoute.Robots {
 	return {
@@ -1,6 +1,6 @@
 import { Feed } from "feed";
-import { getPosts } from "@/blog/query";
-import { SITE_INFO, SITE_URL } from "@/site/brand";
+import { getPosts } from "@/lib/blog/query";
+import { SITE_INFO, SITE_URL } from "@/constants/site-constants";

 export async function GET() {
 	try {
@@ -1,5 +1,5 @@
-import { SITE_URL } from "@/site/brand";
-import { getPosts } from "@/blog/query";
+import { SITE_URL } from "@/constants/site-constants";
+import { getPosts } from "@/lib/blog/query";
 import type { MetadataRoute } from "next";

 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { BasePage } from "@/app/base-page";
 import { Card, CardContent } from "@/components/ui/card";
-import { SPONSORS, type Sponsor } from "@/site/sponsors";
+import { SPONSORS, type Sponsor } from "@/constants/site-constants";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
 import { cn } from "@/utils/ui";
@@ -7,7 +7,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Separator } from "@/components/ui/separator";
-import { SOCIAL_LINKS } from "@/site/social";
+import { SOCIAL_LINKS } from "@/constants/site-constants";

 export const metadata: Metadata = {
 	title: "Terms of Service - OpenCut",
@@ -51,13 +51,9 @@ export default function TermsPage() {
 								Free for personal and commercial use with no watermarks or
 								restrictions
 							</li>
+							<li>You're responsible for how you use it - don't break the law</li>
 							<li>
-								You&apos;re responsible for how you use it - don&apos;t break
-								the law
-							</li>
-							<li>
-								Service provided &quot;as is&quot; - we can&apos;t guarantee
-								perfect uptime
+								Service provided "as is" - we can't guarantee perfect uptime
 							</li>
 							<li>
 								Open source means you can review our code and self-host if
@@ -113,8 +109,8 @@ export default function TermsPage() {
 					</li>
 				</ul>
 				<p>
-					You&apos;re responsible for how you use OpenCut and the content you
-					create. Don&apos;t use it for anything illegal in your jurisdiction.
+					You're responsible for how you use OpenCut and the content you create.
+					Don't use it for anything illegal in your jurisdiction.
 				</p>
 			</section>

@@ -131,8 +127,8 @@ export default function TermsPage() {
 				<h2 className="text-2xl font-semibold">Service</h2>
 				<p>
 					OpenCut does not currently require an account. The service is provided
-					&quot;as is&quot; without warranties. While we strive for
-					reliability, we can&apos;t guarantee uninterrupted service.
+					"as is" without warranties. While we strive for reliability, we can't
+					guarantee uninterrupted service.
 				</p>
 			</section>

@@ -150,7 +146,7 @@ export default function TermsPage() {
 					<a
 						href={SOCIAL_LINKS.github}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						GitHub
@@ -165,12 +161,12 @@ export default function TermsPage() {
 					OpenCut is provided free of charge. To the extent permitted by law:
 				</p>
 				<ul className="list-disc space-y-2 pl-6">
-					<li>We&apos;re not liable for any loss of data or content</li>
+					<li>We're not liable for any loss of data or content</li>
 					<li>
 						Projects are stored in your browser and may be lost if you clear
 						browser data
 					</li>
-					<li>We&apos;re not responsible for how you use the service</li>
+					<li>We're not responsible for how you use the service</li>
 					<li>Our liability is limited to the maximum extent allowed by law</li>
 				</ul>
 				<p>
@@ -184,7 +180,7 @@ export default function TermsPage() {
 				<h2 className="text-2xl font-semibold">Service Changes</h2>
 				<p>We may update OpenCut and these terms:</p>
 				<ul className="list-disc space-y-2 pl-6">
-					<li>We&apos;ll notify you of significant changes to these terms</li>
+					<li>We'll notify you of significant changes to these terms</li>
 					<li>Continued use means you accept any updates</li>
 					<li>You can always self-host an older version if you prefer</li>
 					<li>Major changes will be discussed with the community on GitHub</li>
@@ -207,7 +203,7 @@ export default function TermsPage() {
 					<a
 						href={`${SOCIAL_LINKS.github}/issues`}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						GitHub repository
@@ -223,7 +219,7 @@ export default function TermsPage() {
 					<a
 						href={SOCIAL_LINKS.x}
 						target="_blank"
-						rel="noopener noreferrer"
+						rel="noopener"
 						className="text-primary hover:underline"
 					>
 						X (Twitter)
@@ -1,10 +0,0 @@
-export const BACKGROUND_BLUR_INTENSITY_PRESETS: Array<{
-	label: string;
-	value: number;
-}> = [
-	{ label: "Light", value: 100 },
-	{ label: "Medium", value: 200 },
-	{ label: "Heavy", value: 500 },
-] as const;
-
-export const DEFAULT_BACKGROUND_BLUR_INTENSITY = 10;
@@ -1 +0,0 @@
-export const DEFAULT_BACKGROUND_COLOR = "#000000";
@@ -1,10 +0,0 @@
-import type { TCanvasSize } from "@/project/types";
-
-export const DEFAULT_CANVAS_PRESETS: TCanvasSize[] = [
-	{ width: 1920, height: 1080 },
-	{ width: 1080, height: 1920 },
-	{ width: 1080, height: 1080 },
-	{ width: 1440, height: 1080 },
-];
-
-export const DEFAULT_CANVAS_SIZE: TCanvasSize = { width: 1920, height: 1080 };
@@ -1,87 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Button } from "@/components/ui/button";
-import { getSortedReleases } from "../utils";
-import type { Release } from "../utils";
-
-const STORAGE_KEY = "last-seen-version";
-
-export function ChangelogNotification() {
-	const [release, setRelease] = useState<Release | null>(null);
-
-	useEffect(() => {
-		const releases = getSortedReleases();
-		const latest = releases[0];
-		if (!latest) return;
-
-		let storedVersion: string | null = null;
-		try {
-			storedVersion = localStorage.getItem(STORAGE_KEY);
-		} catch {
-			// localStorage unavailable
-		}
-
-		const isOutdated =
-			storedVersion === null ||
-			storedVersion.localeCompare(latest.version, undefined, {
-				numeric: true,
-			}) < 0;
-
-		// TODO(v0.4): revert to the standard "null = first-time visitor, record silently"
-		// path. The null case intentionally shows the card for this release so existing
-		// users who never had the key get the 0.3.0 announcement.
-		if (!isOutdated) return;
-
-		try {
-			localStorage.setItem(STORAGE_KEY, latest.version);
-		} catch {
-			// ignore
-		}
-
-		setRelease(latest);
-	}, []);
-
-	if (!release) return null;
-
-	return (
-		<div className="fixed bottom-5 left-5 z-50 flex w-72 flex-col gap-3 rounded-xl border bg-card p-4 shadow-lg">
-			<div className="flex items-start justify-between gap-2">
-				<div className="flex flex-col gap-1">
-					<span className="text-sm font-semibold leading-snug">
-						{release.title}
-					</span>
-					<span className="text-xs text-muted-foreground">
-						v{release.version}
-					</span>
-				</div>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="-mr-1 -mt-1 shrink-0"
-					onClick={() => setRelease(null)}
-					aria-label="Dismiss"
-				>
-					<HugeiconsIcon icon={Cancel01Icon} className="size-4" />
-				</Button>
-			</div>
-
-			{release.summary && (
-				<p className="text-xs leading-relaxed text-muted-foreground">
-					{release.summary}
-				</p>
-			)}
-
-			<div className="flex justify-end">
-				<Button asChild size="sm">
-					<Link href="/changelog" onClick={() => setRelease(null)}>
-						See full changelog
-					</Link>
-				</Button>
-			</div>
-		</div>
-	);
-}
@@ -1,19 +0,0 @@
---
-version: "0.3.0"
-date: "2026-03-04"
-published: false
-title: "Title"
-description: "Description"
-changes:
- type: new
-  text: "Layout guides are back and expanded. TikTok was the only option before. Now includes a grid guide plus TikTok, Instagram Reels, YouTube Shorts, and Snapchat Spotlight."
- type: new
-  text: "Two new mask types: text and custom (draw any shape with the pen tool using bezier curves). Both support feather, invert, and stroke."
- type: fixed
-  text: "Preview panning now keeps working while the Masks tab is open."
- type: new
-  text: "Audio clips have a horizontal volume line you can drag up or down to change volume. The line position reflects the current volume setting and is consistent across clips: same dB always means the same position."
- type: improved
-  text: "Audio waveforms now show the actual shape of the audio. Quiet parts are visible, loud parts are tall, and any bar that peaks above 0 dBFS gets a colored tip at the top."
- type: fixed
-  text: "Trimming or cutting an audio clip no longer causes the waveform to compress or show the wrong section of audio."
@@ -1,82 +0,0 @@
-import { allChangelogs } from "content-collections";
-
-export type Change = { type: string; text: string };
-export type Release = (typeof allChangelogs)[number];
-
-type ChangeSectionConfig = {
-	title: string;
-	order: number;
-	collapsible?: boolean;
-};
-
-const knownSectionConfigs: Record<string, ChangeSectionConfig> = {
-	new: { title: "Features", order: 0 },
-	improved: { title: "Improvements", order: 1 },
-	fixed: { title: "Fixes", order: 2 },
-	breaking: { title: "Breaking Changes", order: 3 },
-	technical: {
-		title: "Technical details",
-		order: 4,
-		collapsible: true,
-	},
-};
-
-function getSectionConfig({ type }: { type: string }): ChangeSectionConfig {
-	return (
-		knownSectionConfigs[type] ?? {
-			title: type.charAt(0).toUpperCase() + type.slice(1),
-			order: Number.MAX_SAFE_INTEGER,
-		}
-	);
-}
-
-export function getSectionTitle({ type }: { type: string }): string {
-	return getSectionConfig({ type }).title;
-}
-
-export function isSectionCollapsible({ type }: { type: string }): boolean {
-	return getSectionConfig({ type }).collapsible ?? false;
-}
-
-export function groupAndOrderChanges({ changes }: { changes: Change[] }) {
-	const typeEncounterOrder = new Map<string, number>();
-	const grouped = changes.reduce<Record<string, Change[]>>((acc, change) => {
-		if (!typeEncounterOrder.has(change.type)) {
-			typeEncounterOrder.set(change.type, typeEncounterOrder.size);
-		}
-		if (!acc[change.type]) acc[change.type] = [];
-		acc[change.type].push(change);
-		return acc;
-	}, {});
-
-	const orderedTypes = Object.keys(grouped).sort((left, right) => {
-		const orderDifference =
-			getSectionConfig({ type: left }).order -
-			getSectionConfig({ type: right }).order;
-		if (orderDifference !== 0) {
-			return orderDifference;
-		}
-		return (
-			(typeEncounterOrder.get(left) ?? Number.MAX_SAFE_INTEGER) -
-			(typeEncounterOrder.get(right) ?? Number.MAX_SAFE_INTEGER)
-		);
-	});
-
-	return { grouped, orderedTypes };
-}
-
-function isPublishedRelease({ published }: Release) {
-	return published !== false;
-}
-
-export function getSortedReleases() {
-	return allChangelogs
-		.filter(isPublishedRelease)
-		.sort((a, b) =>
-			b.version.localeCompare(a.version, undefined, { numeric: true }),
-		);
-}
-
-export function getReleaseByVersion({ version }: { version: string }) {
-	return getSortedReleases().find((release) => release.version === version);
-}
@@ -1,48 +0,0 @@
-import { PasteCommand } from "@/commands/timeline";
-import type { ClipboardHandler } from "../types";
-
-export const ElementsClipboardHandler = {
-	type: "elements",
-
-	canCopy({ selectedElements }) {
-		return selectedElements.length > 0;
-	},
-
-	copy({ editor, selectedElements }) {
-		if (selectedElements.length === 0) {
-			return null;
-		}
-
-		const results = editor.timeline.getElementsWithTracks({
-			elements: selectedElements,
-		});
-		const items = results.map(({ track, element }) => {
-			const { id: _elementId, ...elementWithoutId } = element;
-			return {
-				trackId: track.id,
-				trackType: track.type,
-				element: elementWithoutId,
-			};
-		});
-
-		if (items.length === 0) {
-			return null;
-		}
-
-		return {
-			type: "elements",
-			items,
-		};
-	},
-
-	paste({ entry, context }) {
-		if (entry.items.length === 0) {
-			return null;
-		}
-
-		return new PasteCommand({
-			time: context.time,
-			clipboardItems: entry.items,
-		});
-	},
-} satisfies ClipboardHandler<"elements">;
@@ -1,49 +0,0 @@
-import type {
-	ClipboardEntry,
-	ClipboardEntryType,
-	ClipboardHandler,
-	ClipboardHandlerMap,
-	CopyContext,
-	PasteContext,
-} from "../types";
-import { ElementsClipboardHandler } from "./elements";
-import { KeyframesClipboardHandler } from "./keyframes";
-
-export const clipboardHandlers = {
-	elements: ElementsClipboardHandler,
-	keyframes: KeyframesClipboardHandler,
-} satisfies ClipboardHandlerMap;
-
-export const clipboardCopyHandlers = [
-	KeyframesClipboardHandler,
-	ElementsClipboardHandler,
-] as const satisfies readonly ClipboardHandler<ClipboardEntryType>[];
-
-export function copyClipboardEntry({
-	context,
-}: {
-	context: CopyContext;
-}): ClipboardEntry | null {
-	for (const handler of clipboardCopyHandlers) {
-		if (!handler.canCopy(context)) {
-			continue;
-		}
-
-		return handler.copy(context);
-	}
-
-	return null;
-}
-
-export function buildPasteClipboardCommand({
-	entry,
-	context,
-}: {
-	entry: ClipboardEntry;
-	context: PasteContext;
-}) {
-	const handler = clipboardHandlers[entry.type] as ClipboardHandler<
-		typeof entry.type
-	>;
-	return handler.paste({ entry: entry as never, context });
-}
@@ -1,176 +0,0 @@
-import { getKeyframeById } from "@/animation";
-import { getChannelEntriesFromData } from "@/animation/channel-data";
-import { isScalarChannel } from "@/animation/interpolation";
-import type { SelectedKeyframeRef } from "@/animation/types";
-import type { TimelineElement } from "@/timeline";
-import { PasteKeyframesCommand } from "@/commands/timeline";
-import type {
-	ClipboardHandler,
-	KeyframeClipboardCurvePatch,
-	KeyframeClipboardItem,
-} from "../types";
-import { roundMediaTime, subMediaTime, type MediaTime } from "@/wasm";
-
-function resolveSingleSourceElement({
-	selectedKeyframes,
-}: {
-	selectedKeyframes: SelectedKeyframeRef[];
-}) {
-	const firstKeyframe = selectedKeyframes[0];
-	if (!firstKeyframe) {
-		return null;
-	}
-
-	const sourceElement = {
-		trackId: firstKeyframe.trackId,
-		elementId: firstKeyframe.elementId,
-	};
-	const isSingleSource = selectedKeyframes.every(
-		(keyframe) =>
-			keyframe.trackId === sourceElement.trackId &&
-			keyframe.elementId === sourceElement.elementId,
-	);
-
-	return isSingleSource ? sourceElement : null;
-}
-
-function getCurvePatches({
-	element,
-	propertyPath,
-	keyframeId,
-}: {
-	element: TimelineElement;
-	propertyPath: KeyframeClipboardItem["propertyPath"];
-	keyframeId: string;
-}): KeyframeClipboardCurvePatch[] {
-	const data = element.animations?.[propertyPath];
-	if (!data) {
-		return [];
-	}
-
-	return getChannelEntriesFromData({ data }).flatMap(([componentKey, channel]) => {
-		if (!channel || !isScalarChannel(channel)) {
-			return [];
-		}
-
-		const keyframe = channel.keys.find(
-			(candidate) => candidate.id === keyframeId,
-		);
-		if (!keyframe) {
-			return [];
-		}
-
-		return [
-			{
-				componentKey,
-				patch: {
-					leftHandle: keyframe.leftHandle ?? null,
-					rightHandle: keyframe.rightHandle ?? null,
-					segmentToNext: keyframe.segmentToNext,
-					tangentMode: keyframe.tangentMode,
-				},
-			},
-		];
-	});
-}
-
-function buildClipboardItem({
-	element,
-	propertyPath,
-	keyframeId,
-}: {
-	element: TimelineElement;
-	propertyPath: KeyframeClipboardItem["propertyPath"];
-	keyframeId: string;
-}): (Omit<KeyframeClipboardItem, "timeOffset"> & { time: MediaTime }) | null {
-	const keyframe = getKeyframeById({
-		animations: element.animations,
-		propertyPath,
-		keyframeId,
-	});
-	if (!keyframe) {
-		return null;
-	}
-
-	return {
-		propertyPath,
-		time: keyframe.time,
-		value: keyframe.value,
-		interpolation: keyframe.interpolation,
-		curvePatches: getCurvePatches({
-			element,
-			propertyPath,
-			keyframeId,
-		}),
-	};
-}
-
-export const KeyframesClipboardHandler = {
-	type: "keyframes",
-
-	canCopy({ selectedKeyframes }) {
-		return selectedKeyframes.length > 0;
-	},
-
-	copy({ editor, selectedKeyframes }) {
-		const sourceElement = resolveSingleSourceElement({ selectedKeyframes });
-		if (!sourceElement) {
-			return null;
-		}
-
-		const [result] = editor.timeline.getElementsWithTracks({
-			elements: [sourceElement],
-		});
-		if (!result) {
-			return null;
-		}
-
-		const rawItems = selectedKeyframes.flatMap((keyframeRef) => {
-			const item = buildClipboardItem({
-				element: result.element,
-				propertyPath: keyframeRef.propertyPath,
-				keyframeId: keyframeRef.keyframeId,
-			});
-			return item ? [item] : [];
-		});
-		if (rawItems.length === 0) {
-			return null;
-		}
-
-		const minTime = Math.min(...rawItems.map((item) => item.time));
-		const minTimeMedia = roundMediaTime({ time: minTime });
-		const items = rawItems
-			.map(({ time, ...item }) => ({
-				...item,
-				timeOffset: subMediaTime({ a: time, b: minTimeMedia }),
-			}))
-			.sort(
-				(left, right) =>
-					left.timeOffset - right.timeOffset ||
-					left.propertyPath.localeCompare(right.propertyPath),
-			);
-
-		return {
-			type: "keyframes",
-			sourceElement,
-			items,
-		};
-	},
-
-	paste({
-		entry,
-		context: { selectedElements, time },
-	}) {
-		const targetElement = selectedElements[0];
-		if (!targetElement || entry.items.length === 0) {
-			return null;
-		}
-
-		return new PasteKeyframesCommand({
-			trackId: targetElement.trackId,
-			elementId: targetElement.elementId,
-			time,
-			clipboardItems: entry.items,
-		});
-	},
-} satisfies ClipboardHandler<"keyframes">;
@@ -1,2 +0,0 @@
-export * from "./types";
-export * from "./handlers";
@@ -1,80 +0,0 @@
-import type { EditorCore } from "@/core";
-import type {
-	AnimationInterpolation,
-	AnimationPath,
-	ScalarCurveKeyframePatch,
-	SelectedKeyframeRef,
-} from "@/animation/types";
-import type { ParamValue } from "@/params";
-import type { Command } from "@/commands/base-command";
-import type {
-	CreateTimelineElement,
-	ElementRef,
-	TrackType,
-} from "@/timeline";
-import type { MediaTime } from "@/wasm";
-
-export interface ElementClipboardItem {
-	trackId: string;
-	trackType: TrackType;
-	element: CreateTimelineElement;
-}
-
-export interface KeyframeClipboardCurvePatch {
-	componentKey: string;
-	patch: ScalarCurveKeyframePatch;
-}
-
-export interface KeyframeClipboardItem {
-	propertyPath: AnimationPath;
-	timeOffset: MediaTime;
-	value: ParamValue;
-	interpolation: AnimationInterpolation;
-	curvePatches: KeyframeClipboardCurvePatch[];
-}
-
-export interface ElementsClipboardEntry {
-	type: "elements";
-	items: ElementClipboardItem[];
-}
-
-export interface KeyframesClipboardEntry {
-	type: "keyframes";
-	sourceElement: ElementRef;
-	items: KeyframeClipboardItem[];
-}
-
-export interface ClipboardEntryByType {
-	elements: ElementsClipboardEntry;
-	keyframes: KeyframesClipboardEntry;
-}
-
-export type ClipboardEntry = ClipboardEntryByType[keyof ClipboardEntryByType];
-export type ClipboardEntryType = keyof ClipboardEntryByType;
-
-export interface CopyContext {
-	editor: EditorCore;
-	selectedElements: ElementRef[];
-	selectedKeyframes: SelectedKeyframeRef[];
-}
-
-export interface PasteContext {
-	editor: EditorCore;
-	selectedElements: ElementRef[];
-	selectedKeyframes: SelectedKeyframeRef[];
-	time: MediaTime;
-}
-
-export interface ClipboardHandler<TType extends ClipboardEntryType> {
-	type: TType;
-	canCopy(context: CopyContext): boolean;
-	copy(context: CopyContext): ClipboardEntryByType[TType] | null;
-	paste(args: {
-		entry: ClipboardEntryByType[TType];
-		context: PasteContext;
-	}): Command | null;
-}
-
-export type ClipboardHandlerMap = {
-	[TType in ClipboardEntryType]: ClipboardHandler<TType>;
-};
@@ -1,31 +0,0 @@
-import type { EditorSelectionPatch } from "@/selection/editor-selection";
-import type { ElementRef } from "@/timeline/types";
-
-export interface CommandResult {
-	selection?: EditorSelectionPatch;
-}
-
-export function createElementSelectionResult(
-	selectedElements: ElementRef[],
-): CommandResult {
-	return {
-		selection: {
-			selectedElements,
-			selectedKeyframes: [],
-			keyframeSelectionAnchor: null,
-			selectedMaskPoints: null,
-		},
-	};
-}
-
-export abstract class Command {
-	abstract execute(): CommandResult | undefined;
-
-	undo(): void {
-		throw new Error("Undo not implemented for this command");
-	}
-
-	redo(): CommandResult | undefined {
-		return this.execute();
-	}
-}
@@ -1,39 +0,0 @@
-import { Command, type CommandResult } from "./base-command";
-
-export class BatchCommand extends Command {
-	constructor(private commands: Command[]) {
-		super();
-	}
-
-	execute(): CommandResult | undefined {
-		let latestSelectionResult: CommandResult | undefined;
-
-		for (const command of this.commands) {
-			const result = command.execute();
-			if (result?.selection !== undefined) {
-				latestSelectionResult = result;
-			}
-		}
-
-		return latestSelectionResult;
-	}
-
-	undo(): void {
-		for (const command of [...this.commands].reverse()) {
-			command.undo();
-		}
-	}
-
-	redo(): CommandResult | undefined {
-		let latestSelectionResult: CommandResult | undefined;
-
-		for (const command of this.commands) {
-			const result = command.redo();
-			if (result?.selection !== undefined) {
-				latestSelectionResult = result;
-			}
-		}
-
-		return latestSelectionResult;
-	}
-}
@@ -1,2 +0,0 @@
-export { PasteCommand } from "./paste";
-export { PasteKeyframesCommand } from "./paste-keyframes";
@@ -1,144 +0,0 @@
-import { EditorCore } from "@/core";
-import {
-	getKeyframeAtTime,
-	updateScalarKeyframeCurve,
-	upsertPathKeyframe,
-} from "@/animation";
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { KeyframeClipboardItem } from "@/clipboard";
-import type { SceneTracks, TimelineElement } from "@/timeline";
-import { updateElementInSceneTracks } from "@/timeline";
-import { resolveAnimationTarget } from "@/timeline/animation-targets";
-import { generateUUID } from "@/utils/id";
-import {
-	addMediaTime,
-	type MediaTime,
-	maxMediaTime,
-	minMediaTime,
-	ZERO_MEDIA_TIME,
-} from "@/wasm";
-
-function pasteKeyframesIntoElement({
-	element,
-	time,
-	clipboardItems,
-}: {
-	element: TimelineElement;
-	time: MediaTime;
-	clipboardItems: KeyframeClipboardItem[];
-}): TimelineElement {
-	let nextElement = element;
-
-	for (const item of clipboardItems) {
-		const target = resolveAnimationTarget({
-			element: nextElement,
-			path: item.propertyPath,
-		});
-		if (!target) {
-			continue;
-		}
-
-		const keyframeTime = maxMediaTime({
-			a: ZERO_MEDIA_TIME,
-			b: minMediaTime({
-				a: addMediaTime({ a: time, b: item.timeOffset }),
-				b: nextElement.duration,
-			}),
-		});
-		const nextAnimations = upsertPathKeyframe({
-			animations: nextElement.animations,
-			propertyPath: item.propertyPath,
-			time: keyframeTime,
-			value: item.value,
-			interpolation: item.interpolation,
-			keyframeId: generateUUID(),
-			channelLayout: target.channelLayout,
-			coerceValue: target.coerceValue,
-		});
-		const pastedKeyframe = getKeyframeAtTime({
-			animations: nextAnimations,
-			propertyPath: item.propertyPath,
-			time: keyframeTime,
-		});
-
-		let patchedAnimations = nextAnimations;
-		if (pastedKeyframe) {
-			for (const curvePatch of item.curvePatches) {
-				const nextPatchedAnimations = updateScalarKeyframeCurve({
-					animations: patchedAnimations,
-					propertyPath: item.propertyPath,
-					componentKey: curvePatch.componentKey,
-					keyframeId: pastedKeyframe.id,
-					patch: curvePatch.patch,
-				});
-				patchedAnimations = nextPatchedAnimations ?? patchedAnimations;
-			}
-		}
-
-		nextElement = {
-			...nextElement,
-			animations: patchedAnimations,
-		};
-	}
-
-	return nextElement;
-}
-
-export class PasteKeyframesCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly time: MediaTime;
-	private readonly clipboardItems: KeyframeClipboardItem[];
-
-	constructor({
-		trackId,
-		elementId,
-		time,
-		clipboardItems,
-	}: {
-		trackId: string;
-		elementId: string;
-		time: MediaTime;
-		clipboardItems: KeyframeClipboardItem[];
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.time = time;
-		this.clipboardItems = clipboardItems;
-	}
-
-	execute(): CommandResult | undefined {
-		if (this.clipboardItems.length === 0) {
-			return undefined;
-		}
-
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) =>
-				pasteKeyframesIntoElement({
-					element,
-					time: this.time,
-					clipboardItems: this.clipboardItems,
-				}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
@@ -1,216 +0,0 @@
-import {
-	Command,
-	createElementSelectionResult,
-	type CommandResult,
-} from "@/commands/base-command";
-import { EditorCore } from "@/core";
-import type { SceneTracks, TimelineElement } from "@/timeline";
-import type { ElementClipboardItem } from "@/clipboard";
-import { generateUUID } from "@/utils/id";
-import {
-	applyPlacement,
-	resolveTrackPlacement,
-	enforceMainTrackStart,
-} from "@/timeline/placement";
-import { cloneAnimations } from "@/animation";
-import {
-	addMediaTime,
-	type MediaTime,
-	maxMediaTime,
-	subMediaTime,
-	ZERO_MEDIA_TIME,
-} from "@/wasm";
-
-export class PasteCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private pastedElements: { trackId: string; elementId: string }[] = [];
-	private readonly time: MediaTime;
-	private readonly clipboardItems: ElementClipboardItem[];
-
-	constructor({
-		time,
-		clipboardItems,
-	}: {
-		time: MediaTime;
-		clipboardItems: ElementClipboardItem[];
-	}) {
-		super();
-		this.time = time;
-		this.clipboardItems = clipboardItems;
-	}
-
-	execute(): CommandResult | undefined {
-		if (this.clipboardItems.length === 0) return undefined;
-
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-		this.pastedElements = [];
-
-		const minStart = this.clipboardItems.reduce(
-			(earliestStartTime, item) =>
-				item.element.startTime < earliestStartTime
-					? item.element.startTime
-					: earliestStartTime,
-			this.clipboardItems[0].element.startTime,
-		);
-
-		let updatedTracks = this.savedState;
-		const itemsByTrackId = groupClipboardItemsByTrackId({
-			clipboardItems: this.clipboardItems,
-		});
-
-		for (const [trackId, items] of itemsByTrackId) {
-			const elementsToAdd = buildPastedElements({
-				items,
-				minStart,
-				time: this.time,
-			});
-
-			if (elementsToAdd.length === 0) {
-				continue;
-			}
-
-			const trackType = items[0].trackType;
-			const sourceTrackIndex = [
-				...updatedTracks.overlay,
-				updatedTracks.main,
-				...updatedTracks.audio,
-			].findIndex((track) => track.id === trackId);
-			const placementResult = resolveTrackPlacement({
-				tracks: updatedTracks,
-				trackType,
-				timeSpans: elementsToAdd.map((element) => ({
-					startTime: element.startTime,
-					duration: element.duration,
-				})),
-				strategy: { type: "aboveSource", sourceTrackIndex },
-			});
-			if (!placementResult) {
-				continue;
-			}
-
-			let elementsForPlacement = elementsToAdd;
-			if (placementResult.kind === "existingTrack") {
-				const targetTrack =
-					placementResult.trackIndex < updatedTracks.overlay.length
-						? updatedTracks.overlay[placementResult.trackIndex]
-						: placementResult.trackIndex === updatedTracks.overlay.length
-							? updatedTracks.main
-							: updatedTracks.audio[
-									placementResult.trackIndex - updatedTracks.overlay.length - 1
-								];
-				if (targetTrack?.id === updatedTracks.main.id) {
-					const earliestElement = elementsToAdd.reduce((earliest, element) =>
-						element.startTime < earliest.startTime ? element : earliest,
-					);
-					const adjustedEarliestStartTime = enforceMainTrackStart({
-						tracks: updatedTracks,
-						targetTrackId: targetTrack.id,
-						requestedStartTime: earliestElement.startTime,
-					});
-					const delta = subMediaTime({
-						a: adjustedEarliestStartTime,
-						b: earliestElement.startTime,
-					});
-
-					if (delta !== ZERO_MEDIA_TIME) {
-						elementsForPlacement = elementsToAdd.map((element) => ({
-							...element,
-							startTime: maxMediaTime({
-								a: ZERO_MEDIA_TIME,
-								b: addMediaTime({ a: element.startTime, b: delta }),
-							}),
-						}));
-					}
-				}
-			}
-
-			const applied = applyPlacement({
-				tracks: updatedTracks,
-				placementResult,
-				elements: elementsForPlacement,
-			});
-			if (!applied) {
-				continue;
-			}
-
-			updatedTracks = applied.updatedTracks;
-
-			for (const element of elementsForPlacement) {
-				this.pastedElements.push({
-					trackId: applied.targetTrackId,
-					elementId: element.id,
-				});
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		if (this.pastedElements.length > 0) {
-			return createElementSelectionResult(this.pastedElements);
-		}
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getPastedElements(): { trackId: string; elementId: string }[] {
-		return this.pastedElements;
-	}
-}
-
-function groupClipboardItemsByTrackId({
-	clipboardItems,
-}: {
-	clipboardItems: ElementClipboardItem[];
-}): Map<string, ElementClipboardItem[]> {
-	const groupedItems = new Map<string, ElementClipboardItem[]>();
-
-	for (const item of clipboardItems) {
-		const existingItems = groupedItems.get(item.trackId) ?? [];
-		groupedItems.set(item.trackId, [...existingItems, item]);
-	}
-
-	return groupedItems;
-}
-
-function buildPastedElements({
-	items,
-	minStart,
-	time,
-}: {
-	items: ElementClipboardItem[];
-	minStart: MediaTime;
-	time: MediaTime;
-}): TimelineElement[] {
-	const elementsToAdd: TimelineElement[] = [];
-
-	for (const item of items) {
-		const relativeOffset = subMediaTime({
-			a: item.element.startTime,
-			b: minStart,
-		});
-		const startTime = maxMediaTime({
-			a: ZERO_MEDIA_TIME,
-			b: addMediaTime({ a: time, b: relativeOffset }),
-		});
-		const newElementId = generateUUID();
-
-		elementsToAdd.push({
-			...item.element,
-			id: newElementId,
-			startTime,
-			animations: cloneAnimations({
-				animations: item.element.animations,
-				shouldRegenerateKeyframeIds: true,
-			}),
-		} as TimelineElement);
-	}
-
-	return elementsToAdd;
-}
@@ -1,72 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { SceneTracks } from "@/timeline";
-import { EditorCore } from "@/core";
-import type { TimelineTrack } from "@/timeline";
-
-function removeTrackElements<TTrack extends TimelineTrack>({
-	track,
-	elements,
-}: {
-	track: TTrack;
-	elements: { trackId: string; elementId: string }[];
-}): TTrack {
-	const nextElements = track.elements.filter(
-		(element) =>
-			!elements.some(
-				(target) =>
-					target.trackId === track.id && target.elementId === element.id,
-			),
-	);
-
-	return { ...track, elements: nextElements } as TTrack;
-}
-
-export class DeleteElementsCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly elements: { trackId: string; elementId: string }[];
-
-	constructor({
-		elements,
-	}: {
-		elements: { trackId: string; elementId: string }[];
-	}) {
-		super();
-		this.elements = elements;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const updatedTracks: SceneTracks = {
-			overlay: this.savedState.overlay.map((track) =>
-				removeTrackElements({ track, elements: this.elements }),
-			),
-			main: removeTrackElements({
-				track: this.savedState.main,
-				elements: this.elements,
-			}),
-			audio: this.savedState.audio.map((track) =>
-				removeTrackElements({ track, elements: this.elements }),
-			),
-		};
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		return {
-			selection: {
-				selectedElements: [],
-				selectedKeyframes: [],
-				keyframeSelectionAnchor: null,
-				selectedMaskPoints: null,
-			},
-		};
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
@@ -1,11 +0,0 @@
-export { InsertElementCommand } from "./insert-element";
-export { DeleteElementsCommand } from "./delete-elements";
-export { DuplicateElementsCommand } from "./duplicate-elements";
-export { SplitElementsCommand } from "./split-elements";
-export { UpdateElementsCommand } from "./update-elements";
-export { ToggleSourceAudioSeparationCommand } from "./toggle-source-audio-separation";
-export { MoveElementCommand } from "./move-elements";
-
-export * from "./keyframes";
-export * from "./effects";
-export * from "./masks";
@@ -1,297 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import { EditorCore } from "@/core";
-import type {
-	CreateTimelineElement,
-	SceneTracks,
-	TimelineElement,
-	TrackType,
-} from "@/timeline";
-import { generateUUID } from "@/utils/id";
-import { requiresMediaId } from "@/timeline/element-utils";
-import type { MediaAsset } from "@/media/types";
-import { DEFAULT_NEW_ELEMENT_DURATION } from "@/timeline/creation";
-import { floatToFrameRate } from "@/fps/utils";
-import { graphicsRegistry, registerDefaultGraphics } from "@/graphics";
-import {
-	applyPlacement,
-	canElementGoOnTrack,
-	resolveTrackPlacement,
-	validateElementTrackCompatibility,
-} from "@/timeline/placement";
-import { roundMediaTime } from "@/wasm";
-
-type InsertElementPlacement =
-	| { mode: "explicit"; trackId: string }
-	| { mode: "auto"; trackType?: TrackType; insertIndex?: number };
-
-export interface InsertElementParams {
-	element: CreateTimelineElement;
-	placement: InsertElementPlacement;
-}
-
-export class InsertElementCommand extends Command {
-	private elementId: string;
-	private savedState: SceneTracks | null = null;
-	private targetTrackId: string | null = null;
-
-	constructor({ element, placement }: InsertElementParams) {
-		super();
-		this.elementId = generateUUID();
-		this.element = element;
-		this.placement = placement;
-	}
-
-	private element: CreateTimelineElement;
-	private placement: InsertElementPlacement;
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		if (!this.validateElementBasics({ element: this.element })) {
-			return;
-		}
-
-		const totalElementsInTimeline =
-			this.savedState.main.elements.length +
-			this.savedState.overlay.reduce(
-				(total, track) => total + track.elements.length,
-				0,
-			) +
-			this.savedState.audio.reduce(
-				(total, track) => total + track.elements.length,
-				0,
-			);
-		const isFirstElement = totalElementsInTimeline === 0;
-
-		const newElement = this.buildElement({ element: this.element });
-		const updateResult = this.applyPlacementResult({
-			tracks: this.savedState,
-			element: newElement,
-		});
-
-		if (!updateResult) {
-			return;
-		}
-
-		const { updatedTracks, targetTrackId } = updateResult;
-		this.targetTrackId = targetTrackId;
-
-		const isVisualMedia =
-			newElement.type === "video" || newElement.type === "image";
-
-		if (isFirstElement && isVisualMedia) {
-			const mediaAssets = editor.media.getAssets();
-			const activeProject = editor.project.getActive();
-			const asset = mediaAssets.find(
-				(item: MediaAsset) => item.id === newElement.mediaId,
-			);
-
-			if (asset?.width && asset?.height) {
-				const nextCanvasSize = { width: asset.width, height: asset.height };
-				const shouldSetOriginalCanvasSize =
-					!activeProject?.settings.originalCanvasSize;
-				editor.project.updateSettings({
-					settings: {
-						canvasSize: nextCanvasSize,
-						...(shouldSetOriginalCanvasSize
-							? { originalCanvasSize: nextCanvasSize }
-							: {}),
-					},
-					pushHistory: false,
-				});
-			}
-
-			if (asset?.type === "video" && asset?.fps) {
-				editor.project.updateSettings({
-					settings: { fps: floatToFrameRate(asset.fps) },
-					pushHistory: false,
-				});
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		return {
-			selection: {
-				selectedElements: [
-					{ trackId: targetTrackId, elementId: this.elementId },
-				],
-				selectedKeyframes: [],
-				keyframeSelectionAnchor: null,
-				selectedMaskPoints: null,
-			},
-		};
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getElementId(): string {
-		return this.elementId;
-	}
-
-	getTrackId(): string | null {
-		return this.targetTrackId;
-	}
-
-	private buildElement({
-		element,
-	}: {
-		element: CreateTimelineElement;
-	}): TimelineElement {
-		return {
-			...element,
-			id: this.elementId,
-			startTime: element.startTime,
-			trimStart: element.trimStart ?? 0,
-			trimEnd: element.trimEnd ?? 0,
-			duration: element.duration ?? DEFAULT_NEW_ELEMENT_DURATION,
-		} as TimelineElement;
-	}
-
-	private validateElementBasics({
-		element,
-	}: {
-		element: CreateTimelineElement;
-	}): boolean {
-		if (requiresMediaId({ element }) && !("mediaId" in element)) {
-			console.error("Element requires mediaId");
-			return false;
-		}
-
-		if (
-			element.type === "audio" &&
-			element.sourceType === "library" &&
-			!element.sourceUrl
-		) {
-			console.error("Library audio element must have sourceUrl");
-			return false;
-		}
-
-		if (element.type === "sticker" && !element.stickerId) {
-			console.error("Sticker element must have stickerId");
-			return false;
-		}
-
-		if (element.type === "graphic") {
-			registerDefaultGraphics();
-			if (
-				!element.definitionId ||
-				!graphicsRegistry.has(element.definitionId)
-			) {
-				console.error("Graphic element must have a valid definitionId");
-				return false;
-			}
-		}
-
-		if (element.type === "text" && !element.params.content) {
-			console.error("Text element must have content");
-			return false;
-		}
-
-		if (element.type === "effect" && !element.effectType) {
-			console.error("Effect element must have effectType");
-			return false;
-		}
-
-		return true;
-	}
-
-	private applyPlacementResult({
-		tracks,
-		element,
-	}: {
-		tracks: SceneTracks;
-		element: TimelineElement;
-	}): { updatedTracks: SceneTracks; targetTrackId: string } | null {
-		const placement = this.placement;
-
-		if (
-			placement.mode === "auto" &&
-			placement.trackType &&
-			!canElementGoOnTrack({
-				elementType: element.type,
-				trackType: placement.trackType,
-			})
-		) {
-			console.error(
-				`${element.type} elements cannot be placed on ${placement.trackType} tracks`,
-			);
-			return null;
-		}
-
-		const placementResult = resolveTrackPlacement({
-			tracks,
-			...(placement.mode === "auto" && placement.trackType
-				? { trackType: placement.trackType }
-				: { elementType: element.type }),
-			timeSpans: [
-				{
-					startTime: element.startTime,
-					duration: element.duration,
-				},
-			],
-			strategy:
-				placement.mode === "explicit"
-					? { type: "explicit", trackId: placement.trackId }
-					: { type: "firstAvailable" },
-		});
-		if (!placementResult) {
-			if (placement.mode === "explicit") {
-				const targetTrack =
-					tracks.main.id === placement.trackId
-						? tracks.main
-						: (tracks.overlay.find((track) => track.id === placement.trackId) ??
-							tracks.audio.find((track) => track.id === placement.trackId));
-				if (!targetTrack) {
-					console.error("Track not found:", placement.trackId);
-					return null;
-				}
-
-				const validation = validateElementTrackCompatibility({
-					element,
-					track: targetTrack,
-				});
-				console.error(validation.errorMessage);
-			}
-
-			return null;
-		}
-
-		const elementToPlace =
-			placementResult.kind === "existingTrack"
-				? {
-						...element,
-						startTime:
-							placementResult.adjustedStartTime !== undefined
-								? roundMediaTime({
-										time: placementResult.adjustedStartTime,
-									})
-								: element.startTime,
-					}
-				: element;
-
-		const appliedPlacement = applyPlacement({
-			tracks,
-			placementResult,
-			elements: [elementToPlace],
-			newTrackInsertIndexOverride:
-				placement.mode === "auto" && typeof placement.insertIndex === "number"
-					? placement.insertIndex
-					: undefined,
-		});
-		if (!appliedPlacement) {
-			return null;
-		}
-
-		return {
-			updatedTracks: appliedPlacement.updatedTracks,
-			targetTrackId: appliedPlacement.targetTrackId,
-		};
-	}
-}
@@ -1,108 +0,0 @@
-import { EditorCore } from "@/core";
-import {
-	hasKeyframesForPath,
-	removeElementKeyframe,
-} from "@/animation";
-import { Command, type CommandResult } from "@/commands/base-command";
-import { updateElementInSceneTracks } from "@/timeline";
-import type { AnimationPath } from "@/animation/types";
-import type { ParamValue } from "@/params";
-import type { SceneTracks, TimelineElement } from "@/timeline";
-import { resolveAnimationTarget } from "@/timeline/animation-targets";
-
-function removeKeyframeAndPersist({
-	element,
-	propertyPath,
-	keyframeId,
-	valueAtPlayhead,
-}: {
-	element: TimelineElement;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-	valueAtPlayhead: ParamValue | null;
-}): TimelineElement {
-	const target = resolveAnimationTarget({ element, path: propertyPath });
-	if (!target) {
-		return element;
-	}
-
-	const nextAnimations = removeElementKeyframe({
-		animations: element.animations,
-		propertyPath,
-		keyframeId,
-	});
-
-	const isChannelNowEmpty = !hasKeyframesForPath({
-		animations: nextAnimations,
-		propertyPath,
-	});
-
-	// When clearing all keyframes, preserve the value at the playhead (what the user was seeing)
-	const shouldPersistToBase = isChannelNowEmpty && valueAtPlayhead !== null;
-
-	const baseElement = shouldPersistToBase
-		? target.setBaseValue({ value: valueAtPlayhead })
-		: element;
-
-	return { ...baseElement, animations: nextAnimations };
-}
-
-export class RemoveKeyframeCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly propertyPath: AnimationPath;
-	private readonly keyframeId: string;
-	private readonly valueAtPlayhead: ParamValue | null;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		keyframeId,
-		valueAtPlayhead,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		keyframeId: string;
-		valueAtPlayhead: ParamValue | null;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.propertyPath = propertyPath;
-		this.keyframeId = keyframeId;
-		this.valueAtPlayhead = valueAtPlayhead;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) =>
-				removeKeyframeAndPersist({
-					element,
-					propertyPath: this.propertyPath,
-					keyframeId: this.keyframeId,
-					valueAtPlayhead: this.valueAtPlayhead,
-				}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
@@ -1,85 +0,0 @@
-import { EditorCore } from "@/core";
-import {
-	updateScalarKeyframeCurve,
-} from "@/animation";
-import { Command, type CommandResult } from "@/commands/base-command";
-import { updateElementInSceneTracks } from "@/timeline";
-import { resolveAnimationTarget } from "@/timeline/animation-targets";
-import type {
-	AnimationPath,
-	ScalarCurveKeyframePatch,
-} from "@/animation/types";
-import type { SceneTracks } from "@/timeline";
-
-export class UpdateScalarKeyframeCurveCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly propertyPath: AnimationPath;
-	private readonly componentKey: string;
-	private readonly keyframeId: string;
-	private readonly patch: ScalarCurveKeyframePatch;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		componentKey,
-		keyframeId,
-		patch,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		componentKey: string;
-		keyframeId: string;
-		patch: ScalarCurveKeyframePatch;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.propertyPath = propertyPath;
-		this.componentKey = componentKey;
-		this.keyframeId = keyframeId;
-		this.patch = patch;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			update: (element) => {
-				if (!resolveAnimationTarget({ element, path: this.propertyPath })) {
-					return element;
-				}
-
-				return {
-					...element,
-					animations: updateScalarKeyframeCurve({
-						animations: element.animations,
-						propertyPath: this.propertyPath,
-						componentKey: this.componentKey,
-						keyframeId: this.keyframeId,
-						patch: this.patch,
-					}),
-				};
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
@@ -1,112 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import {
-	buildEffectParamPath,
-	upsertPathKeyframe,
-} from "@/animation";
-import { updateElementInSceneTracks } from "@/timeline";
-import { isVisualElement } from "@/timeline/element-utils";
-import { resolveAnimationTarget } from "@/timeline/animation-targets";
-import type { AnimationInterpolation } from "@/animation/types";
-import type { SceneTracks } from "@/timeline";
-import {
-	type MediaTime,
-	maxMediaTime,
-	minMediaTime,
-	ZERO_MEDIA_TIME,
-} from "@/wasm";
-
-export class UpsertEffectParamKeyframeCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly effectId: string;
-	private readonly paramKey: string;
-	private readonly time: MediaTime;
-	private readonly value: number | string | boolean;
-	private readonly interpolation: AnimationInterpolation | undefined;
-	private readonly keyframeId: string | undefined;
-
-	constructor({
-		trackId,
-		elementId,
-		effectId,
-		paramKey,
-		time,
-		value,
-		interpolation,
-		keyframeId,
-	}: {
-		trackId: string;
-		elementId: string;
-		effectId: string;
-		paramKey: string;
-		time: MediaTime;
-		value: number | string | boolean;
-		interpolation?: AnimationInterpolation;
-		keyframeId?: string;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.effectId = effectId;
-		this.paramKey = paramKey;
-		this.time = time;
-		this.value = value;
-		this.interpolation = interpolation;
-		this.keyframeId = keyframeId;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isVisualElement,
-			update: (element) => {
-				const boundedTime = maxMediaTime({
-					a: ZERO_MEDIA_TIME,
-					b: minMediaTime({ a: this.time, b: element.duration }),
-				});
-				const propertyPath = buildEffectParamPath({
-					effectId: this.effectId,
-					paramKey: this.paramKey,
-				});
-				const target = resolveAnimationTarget({
-					element,
-					path: propertyPath,
-				});
-				if (!target) {
-					return element;
-				}
-
-				const animations = upsertPathKeyframe({
-					animations: element.animations,
-					propertyPath,
-					time: boundedTime,
-					value: this.value,
-					interpolation: this.interpolation,
-					keyframeId: this.keyframeId,
-					channelLayout: target.channelLayout,
-					coerceValue: target.coerceValue,
-				});
-				return { ...element, animations };
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
@@ -1,132 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import {
-	getFreeformPathClosedStateAfterPointRemoval,
-	removeFreeformPathPoints,
-} from "@/masks/freeform/path";
-import type { FreeformPathMask } from "@/masks/types";
-import { isMaskableElement, updateElementInSceneTracks } from "@/timeline";
-import type { MaskableElement, SceneTracks } from "@/timeline";
-
-function deletePointsFromFreeformPathMask({
-	mask,
-	pointIds,
-}: {
-	mask: FreeformPathMask;
-	pointIds: string[];
-}): FreeformPathMask {
-	const points = mask.params.path;
-	const nextPoints = removeFreeformPathPoints({ points, pointIds });
-	if (nextPoints.length === points.length) {
-		return mask;
-	}
-
-	return {
-		...mask,
-		params: {
-			...mask.params,
-			path: nextPoints,
-			closed: getFreeformPathClosedStateAfterPointRemoval({
-				wasClosed: mask.params.closed,
-				remainingPointCount: nextPoints.length,
-			}),
-		},
-	};
-}
-
-function deletePointsFromElementMask({
-	element,
-	maskId,
-	pointIds,
-}: {
-	element: MaskableElement;
-	maskId: string;
-	pointIds: string[];
-}): { element: MaskableElement; didDeletePoints: boolean } {
-	const currentMasks = element.masks ?? [];
-	let didDeletePoints = false;
-	const nextMasks = currentMasks.map((mask) => {
-		if (mask.id !== maskId || mask.type !== "freeform") {
-			return mask;
-		}
-
-		const nextMask = deletePointsFromFreeformPathMask({
-			mask,
-			pointIds,
-		});
-		didDeletePoints ||= nextMask !== mask;
-		return nextMask;
-	});
-
-	return {
-		element: didDeletePoints ? { ...element, masks: nextMasks } : element,
-		didDeletePoints,
-	};
-}
-
-export class DeleteFreeformPathMaskPointsCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly maskId: string;
-	private readonly pointIds: string[];
-
-	constructor({
-		trackId,
-		elementId,
-		maskId,
-		pointIds,
-	}: {
-		trackId: string;
-		elementId: string;
-		maskId: string;
-		pointIds: string[];
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.maskId = maskId;
-		this.pointIds = pointIds;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		let didDeletePoints = false;
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isMaskableElement,
-			update: (element) => {
-				if (!isMaskableElement(element)) return element;
-				const result = deletePointsFromElementMask({
-					element,
-					maskId: this.maskId,
-					pointIds: this.pointIds,
-				});
-				didDeletePoints ||= result.didDeletePoints;
-				return result.element;
-			},
-		});
-
-		if (didDeletePoints) {
-			editor.timeline.updateTracks(updatedTracks);
-			return {
-				selection: {
-					selectedMaskPoints: null,
-				},
-			};
-		}
-
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maze Winther	c2e2668701	docs: rewrite agents file	2026-03-29 12:53:37 +02:00
Maze Winther	b949fda7bc	refactor: clean up number formatting and step handling in property tabs	2026-03-27 21:24:59 +01:00
Maze Winther	8e936a7594	chore: remove dead songs tab	2026-03-27 21:23:38 +01:00
Maze Winther	96f87b050d	chore: add missing open-next config	2026-03-27 21:22:46 +01:00
Maze Winther	4b9d5f8d23	chore: update dep	2026-03-27 21:21:31 +01:00
Maze Winther	6b81afc20b	chore: rename proxy to middleware	2026-03-27 21:20:46 +01:00
Maze Winther	8918a87c33	feat: init desktop app	2026-03-27 21:15:00 +01:00
Maze Winther	f635403108	fix: add missing file	2026-03-27 01:21:35 +01:00
Maze Winther	fc0ba2d37f	chore: normalize line endings	2026-03-27 00:55:15 +01:00
Maze Winther	1660f1c76c	chore: next-env	2026-03-26 14:15:47 +01:00
Maze Winther	b89f016069	chore: update botid	2026-03-26 14:13:28 +01:00
Maze Winther	271cc27cbf	chore: init cloudflare	2026-03-26 13:54:36 +01:00
Maze Winther	b62833384d	fix: resolve typescript/lint errors	2026-03-26 13:52:30 +01:00
Maze Winther	08f5b92c3d	feat: masks, properties refactor, shaders, storage migrations, and more	2026-03-25 16:47:22 +01:00
Maze Winther	4aca4e7756	Merge branch 'main' into dev	2026-03-25 16:24:22 +01:00
Maze Winther	b7e6db90b0	chore: gitignore	2026-03-25 16:20:52 +01:00
Maze Winther	fe623357ef	untrack .cursor/	2026-03-25 16:16:42 +01:00
Maze Winther	5b3c048e20	changelog: add already-completed item	2026-03-04 21:52:45 +01:00
Maze Winther	5638974f4b	fix: captions view ui + use BatchCommand to add text elements in transcription at once	2026-03-04 21:52:22 +01:00
Maze Winther	a2580216f8	fix: assets having unreasonable widths and heights	2026-03-04 18:27:02 +01:00
Maze Winther	dd4e6780d8	changelog: new version with already-made changes	2026-03-04 17:26:54 +01:00
				`@@ -1 +0,0 @@`
				`export const DEFAULT_BACKGROUND_COLOR = "#000000";`