docs: rewrite agents file

.github/CONTRIBUTING.md

@@ -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
 

.github/workflows/bun-ci.yml

@@ -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:

.gitignore

@@ -22,5 +22,3 @@ bun.lockb
 .open-next
 
 target/
-
-.cargo-tools/

.tokeignore

@@ -1,7 +0,0 @@
-*.json
-*.svg
-*.xml
-*.lock
-**/dist/**
-**/build/**
-**/node_modules/**

AGENTS.md

@@ -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
 
@@ -21,17 +15,3 @@ Each app is a frontend that calls into Rust. Logic is never duplicated between a
 
 - Read components before using them. They may already apply classes, which affects what you need to pass and how to override them.
 
-### TypeScript
-
-Function signatures should make the call site readable and let the function evolve without breaking callers. Positional parameters fail both: `formatTime(30, 24)` hides which number is which, and adding, removing, or reordering an argument silently breaks every caller whose types happen to still line up. A single destructured object fixes both at once - each argument names itself at the call site, and the shape can grow without churn. So signatures default to one object parameter:
-
-```tsx
-// ❌ meaning depends on order; the shape can't evolve without touching every caller
-function formatTime(seconds: number, fps: number) { ... }
-
-// ✅ each argument names itself; fields can be added, reordered, or made optional freely
-function formatTime({ seconds, fps }: { seconds: number; fps: number }) { ... }
-```
-
-The one real exception is type predicates (`element is VideoElement`) — the language requires a positional subject, so the reasoning above doesn't get to apply.
-

Cargo.toml

@@ -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",
 ]

README.md

@@ -1,5 +1,129 @@
-# OpenCut (Legacy)
+<table width="100%">
+  <tr>
+    <td align="left" width="120">
+      <img src="apps/web/public/logos/opencut/1k/logo-white-black.png" alt="OpenCut Logo" width="100" />
+    </td>
+    <td align="right">
+      <h1>OpenCut</span></h1>
+      <h3 style="margin-top: -10px;">A free, open-source video editor for web, desktop, and mobile.</h3>
+    </td>
+  </tr>
+</table>
 
-This is the original OpenCut codebase. It's archived and no longer maintained.
+## Sponsors
 
-The rewrite is happening at [opencut-app/opencut](https://github.com/opencut-app/opencut).
+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.
+
+<a href="https://vercel.com/oss">
+  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
+</a>
+
+<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 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](LICENSE)
+
+---
+
+![Star History Chart](https://api.star-history.com/svg?repos=opencut-app/opencut&type=Date)

apps/desktop/src/main.rs

@@ -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 {

apps/web/.env.example

@@ -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

apps/web/.gitignore

@@ -7,8 +7,4 @@
 
 .next/
 
-.font-cache/
-
-next-env.d.ts
-
-*.tsbuildinfo
+.font-cache/

apps/web/Dockerfile

@@ -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

apps/web/content-collections.ts

@@ -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 };
 	},
 });

apps/web/content/changelog/0.1.0.md

@@ -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."

apps/web/content/changelog/0.2.0.md

@@ -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."

apps/web/content/changelog/0.3.0.md

@@ -1,114 +1,82 @@
----
-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."
-changes:
-  - type: new
-    text: "Added a brand page with downloadable brand assets. Assets are also accessible directly from the header logo context menu."
-  - type: fixed
-    text: "Sponsor logos now correctly invert in dark mode."
-  - type: improved
-    text: "Added a changelog link to the footer."
-  - 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."
-  - 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
-    text: "Clicking a selected element no longer keeps the rest of the selection."
-  - type: improved
-    text: "More vertical space between timeline tracks. Selection outlines on adjacent tracks no longer overlap each other."
-  - type: fixed
-    text: "Track labels on the left side of the timeline were misaligned with the tracks on the right."
-  - type: improved
-    text: "Holding Shift or Ctrl while drag-selecting in the timeline now adds to your existing selection instead of replacing it. Matches how Shift/Ctrl+click already worked."
-  - type: improved
-    text: "Timeline track rows now highlight when they contain a selected element, making it easier to see which tracks are active at a glance."
-  - type: fixed
-    text: "Clicking in the empty space below timeline tracks now seeks the playhead."
-  - type: fixed
-    text: "Timeline vertical scroll now works anywhere in the panel, not just over the track labels. The header no longer scrolls with the tracks."
-  - type: new
-    text: "Scale now has separate width and height controls. You can stretch or squash elements independently on each axis."
-  - type: improved
-    text: "System fonts (Arial, Helvetica, Times New Roman, and others) now appear in the font picker alongside Google Fonts."
-  - type: fixed
-    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: new
-    text: "Volume control for audio and video elements."
-  - 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
-    text: "Audio waveforms have gotten an upgrade. The old ones were inaccurate, prone to crashing, and not very useful. The new ones are RMS-based, properly scaled, and only render what's visible so they don't slow things down."
-  - 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."
-  - 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
-    text: "Images with a blur effect at 0% intensity would disappear completely when a blurred background was also active. Now 0% blur correctly renders the image unchanged."
-  - 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."
-  - type: improved
-    text: "The settings panel has been redesigned with a cleaner layout and better organization."
-  - 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
-    text: "Blur looked pixelated at higher intensities instead of producing a real blur. Both the canvas background blur and the blur effect are now fixed."
-  - type: new
-    text: "Custom canvas size. Instead of being locked to a handful of presets, you can now enter any width and height you want."
-  - 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."
-  - 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."
-
----
+---
+version: "0.3.0"
+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."
+  - type: fixed
+    text: "Sponsor logos now correctly invert in dark mode."
+  - type: improved
+    text: "Added a changelog link to the footer."
+  - 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. 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
+    text: "Clicking a selected element no longer keeps the rest of the selection."
+  - type: improved
+    text: "More vertical space between timeline tracks. Selection outlines on adjacent tracks no longer overlap each other."
+  - type: fixed
+    text: "Track labels on the left side of the timeline were misaligned with the tracks on the right."
+  - type: improved
+    text: "Holding Shift or Ctrl while drag-selecting in the timeline now adds to your existing selection instead of replacing it. Matches how Shift/Ctrl+click already worked."
+  - type: improved
+    text: "Timeline track rows now highlight when they contain a selected element, making it easier to see which tracks are active at a glance."
+  - type: fixed
+    text: "Clicking in the empty space below timeline tracks now seeks the playhead."
+  - type: fixed
+    text: "Timeline vertical scroll now works anywhere in the panel, not just over the track labels. The header no longer scrolls with the tracks."
+  - type: new
+    text: "Scale now has separate width and height controls. You can stretch or squash elements independently on each axis."
+  - type: improved
+    text: "System fonts (Arial, Helvetica, Times New Roman, and others) now appear in the font picker alongside Google Fonts."
+  - type: fixed
+    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: 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, 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
+    text: "Audio waveforms have gotten an upgrade. The old ones were inaccurate, prone to crashing, and not very useful. The new ones are RMS-based, properly scaled, and only render what's visible so they don't slow things down."
+  - 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 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
+    text: "Images with a blur effect at 0% intensity would disappear completely when a blurred background was also active. Now 0% blur correctly renders the image unchanged."
+  - 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, 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
+    text: "Blur looked pixelated at higher intensities instead of producing a real blur. Both the canvas background blur and the blur effect are now fixed."
+  - type: new
+    text: "Custom canvas size. Instead of being locked to a handful of presets, you can now enter any width and height you want."
+  - 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 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."
+
+---

apps/web/drizzle.config.ts

@@ -1,26 +1,23 @@
-import type { Config } from "drizzle-kit";
-import * as dotenv from "dotenv";
-
-if (process.env.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",
-	dialect: "postgresql",
-	migrations: {
-		table: "drizzle_migrations",
-	},
-	dbCredentials: {
-		url: databaseUrl,
-	},
-	out: "./migrations",
-	strict: process.env.NODE_ENV === "production",
-} satisfies Config;
+import type { Config } from "drizzle-kit";
+import * as dotenv from "dotenv";
+import { webEnv } from "@opencut/env/web";
+
+// Load the right env file based on environment
+if (webEnv.NODE_ENV === "production") {
+	dotenv.config({ path: ".env.production" });
+} else {
+	dotenv.config({ path: ".env.local" });
+}
+
+export default {
+	schema: "./src/schema.ts",
+	dialect: "postgresql",
+	migrations: {
+		table: "drizzle_migrations",
+	},
+	dbCredentials: {
+		url: webEnv.DATABASE_URL,
+	},
+	out: "./migrations",
+	strict: webEnv.NODE_ENV === "production",
+} satisfies Config;

apps/web/next-env.d.ts

@@ -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.

apps/web/next.config.ts

@@ -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",
 	},

apps/web/package.json

@@ -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",

apps/web/src/actions/keybindings/migrations/v6-to-v7.ts

@@ -1,19 +0,0 @@
-import type { KeybindingConfig } from "@/actions/keybinding";
-
-interface V6State {
-	keybindings: KeybindingConfig;
-	isCustomized: boolean;
-}
-
-export function v6ToV7({ state }: { state: unknown }): unknown {
-	const v6 = state as V6State;
-	const keybindings = { ...v6.keybindings };
-
-	for (const key of Object.keys(keybindings) as Array<keyof KeybindingConfig>) {
-		if (keybindings[key] === ("split-element" as never)) {
-			keybindings[key] = "split";
-		}
-	}
-
-	return { ...v6, keybindings };
-}

apps/web/src/actions/use-keybindings.ts

@@ -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[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,
-	]);
-}

apps/web/src/animation/__tests__/animated-params.test.ts

@@ -1,241 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import {
-	coerceAnimationParamValue,
-	getAnimationParamDefaultInterpolation,
-	getAnimationParamNumericRange,
-	getAnimationParamValueKind,
-} from "@/animation/animated-params";
-
-describe("animated params", () => {
-	test("snaps and clamps number params", () => {
-		expect(
-			coerceAnimationParamValue({
-				param: {
-					key: "intensity",
-					label: "Intensity",
-					type: "number",
-					default: 0,
-					min: 0,
-					max: 1,
-					step: 0.25,
-				},
-				value: 0.62,
-			}),
-		).toBe(0.5);
-
-		expect(
-			coerceAnimationParamValue({
-				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(coerceAnimationParamValue({ param, value: Number.NaN })).toBeNull();
-		expect(coerceAnimationParamValue({ param, value: "0.5" })).toBeNull();
-		expect(coerceAnimationParamValue({ param, value: true })).toBeNull();
-	});
-
-	test("passthrough with step <= 0 guard", () => {
-		expect(
-			coerceAnimationParamValue({
-				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(coerceAnimationParamValue({ param, value: "normal" })).toBe("normal");
-		expect(coerceAnimationParamValue({ param, value: "multiply" })).toBe("multiply");
-	});
-
-	test("rejects select values outside the allowed options", () => {
-		expect(
-			coerceAnimationParamValue({
-				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(coerceAnimationParamValue({ param, value: 42 })).toBeNull();
-		expect(coerceAnimationParamValue({ param, value: null })).toBeNull();
-		expect(coerceAnimationParamValue({ 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(coerceAnimationParamValue({ param, value: true })).toBe(true);
-		expect(coerceAnimationParamValue({ param, value: false })).toBe(false);
-		expect(coerceAnimationParamValue({ param, value: 1 })).toBeNull();
-		expect(coerceAnimationParamValue({ 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(coerceAnimationParamValue({ param, value: "#ff0000" })).toBe("#ff0000");
-		expect(coerceAnimationParamValue({ param, value: 0xff0000 })).toBeNull();
-		expect(coerceAnimationParamValue({ param, value: null })).toBeNull();
-	});
-
-	test("getAnimationParamValueKind maps param type to binding kind", () => {
-		expect(
-			getAnimationParamValueKind({
-				param: {
-					key: "n",
-					label: "N",
-					type: "number",
-					default: 0,
-					min: 0,
-					step: 1,
-				},
-			}),
-		).toBe("number");
-		expect(
-			getAnimationParamValueKind({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBe("color");
-		expect(
-			getAnimationParamValueKind({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBe("discrete");
-		expect(
-			getAnimationParamValueKind({
-				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(
-			getAnimationParamDefaultInterpolation({
-				param: {
-					key: "n",
-					label: "N",
-					type: "number",
-					default: 0,
-					min: 0,
-					step: 1,
-				},
-			}),
-		).toBe("linear");
-		expect(
-			getAnimationParamDefaultInterpolation({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBe("linear");
-		expect(
-			getAnimationParamDefaultInterpolation({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBe("hold");
-		expect(
-			getAnimationParamDefaultInterpolation({
-				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(
-			getAnimationParamNumericRange({
-				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(
-			getAnimationParamNumericRange({
-				param: { key: "c", label: "C", type: "color", default: "#fff" },
-			}),
-		).toBeUndefined();
-		expect(
-			getAnimationParamNumericRange({
-				param: { key: "b", label: "B", type: "boolean", default: false },
-			}),
-		).toBeUndefined();
-	});
-});

apps/web/src/animation/__tests__/binding-values.test.ts

@@ -1,26 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import {
-	composeAnimationValue,
-	createAnimationBinding,
-} from "@/animation/binding-values";
-
-describe("binding values", () => {
-	test("formats composed animated colors as hex", () => {
-		const binding = createAnimationBinding({
-			path: "color",
-			kind: "color",
-		});
-
-		expect(
-			composeAnimationValue({
-				binding,
-				componentValues: {
-					r: 1,
-					g: 0,
-					b: 0,
-					a: 1,
-				},
-			}),
-		).toBe("#ff0000");
-	});
-});

apps/web/src/animation/animated-params.ts

@@ -1,83 +0,0 @@
-import { snapToStep } from "@/utils/math";
-import type { ParamDefinition } from "@/params";
-import type { DynamicAnimationPathValue, NumericSpec } from "./types";
-
-export function getAnimationParamValueKind({
-	param,
-}: {
-	param: ParamDefinition;
-}): "number" | "color" | "discrete" {
-	if (param.type === "number") {
-		return "number";
-	}
-
-	if (param.type === "color") {
-		return "color";
-	}
-
-	return "discrete";
-}
-
-export function getAnimationParamDefaultInterpolation({
-	param,
-}: {
-	param: ParamDefinition;
-}): "linear" | "hold" {
-	return param.type === "number" || param.type === "color" ? "linear" : "hold";
-}
-
-export function getAnimationParamNumericRange({
-	param,
-}: {
-	param: ParamDefinition;
-}): NumericSpec | undefined {
-	if (param.type !== "number") {
-		return undefined;
-	}
-
-	return {
-		min: param.min,
-		max: param.max,
-		step: param.step,
-	};
-}
-
-/**
- * `coerceAnimationParamValue` accepts `unknown` rather than a narrow
- * `DynamicAnimationPathValue` because it doubles as a runtime gate for
- * untrusted inputs (persisted state, paste payloads, programmatic updates).
- * The caller does not need to pre-validate; null means "this value cannot live
- * on this param".
- */
-export function coerceAnimationParamValue({
-	param,
-	value,
-}: {
-	param: ParamDefinition;
-	value: unknown;
-}): DynamicAnimationPathValue | null {
-	if (param.type === "number") {
-		if (typeof value !== "number" || Number.isNaN(value)) {
-			return null;
-		}
-
-		const steppedValue = snapToStep({ value, step: param.step });
-		const minValue = param.min;
-		const maxValue = param.max ?? Number.POSITIVE_INFINITY;
-		return Math.min(maxValue, Math.max(minValue, steppedValue));
-	}
-
-	if (param.type === "color") {
-		return typeof value === "string" ? value : null;
-	}
-
-	if (param.type === "boolean") {
-		return typeof value === "boolean" ? value : null;
-	}
-
-	if (typeof value !== "string") {
-		return null;
-	}
-
-	return param.options.some((option) => option.value === value) ? value : null;
-}

apps/web/src/animation/bezier.ts

@@ -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;
-}

apps/web/src/animation/binding-values.ts

@@ -1,344 +0,0 @@
-import { converter, formatHex, formatHex8, parse } from "culori";
-import type {
-	AnimationBindingComponent,
-	AnimationBindingOfKind,
-	AnimationBindingInstance,
-	AnimationBindingKind,
-	ColorAnimationBinding,
-	DiscreteAnimationBinding,
-	NumberAnimationBinding,
-	AnimationPath,
-	AnimationValue,
-	DiscreteValue,
-	Vector2AnimationBinding,
-	VectorValue,
-} from "@/animation/types";
-import { clamp } from "@/utils/math";
-
-interface LinearRgba {
-	r: number;
-	g: number;
-	b: number;
-	a: number;
-}
-
-export type AnimationComponentValue = number | DiscreteValue;
-
-const toRgb = converter("rgb");
-
-function srgbToLinear({ value }: { value: number }): number {
-	return value <= 0.04045
-		? value / 12.92
-		: Math.pow((value + 0.055) / 1.055, 2.4);
-}
-
-function linearToSrgb({ value }: { value: number }): number {
-	const clamped = clamp({ value, min: 0, max: 1 });
-	return clamped <= 0.0031308
-		? clamped * 12.92
-		: 1.055 * Math.pow(clamped, 1 / 2.4) - 0.055;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null;
-}
-
-export function isVectorValue(value: unknown): value is VectorValue {
-	return isRecord(value) && typeof value.x === "number" && typeof value.y === "number";
-}
-
-export type EasingMode = "independent" | "shared";
-
-/**
- * Declares how easing curves apply to a binding's components.
- * "shared" means all components always use the same curve (e.g. color — you never
- * want to ease R independently from G/B/A). "independent" means each component
- * can have its own curve.
- */
-export function getEasingModeForKind(kind: AnimationBindingKind): EasingMode {
-	return kind === "color" ? "shared" : "independent";
-}
-
-export function getBindingComponentKeys({
-	kind,
-}: {
-	kind: AnimationBindingKind;
-}): string[] {
-	if (kind === "vector2") {
-		return ["x", "y"];
-	}
-
-	if (kind === "color") {
-		return ["r", "g", "b", "a"];
-	}
-
-	return ["value"];
-}
-
-export function buildBindingChannelId({
-	path,
-	componentKey,
-}: {
-	path: AnimationPath;
-	componentKey: string;
-}): string {
-	return `${path}:${componentKey}`;
-}
-
-function createBindingComponent<TKey extends string>({
-	path,
-	key,
-}: {
-	path: AnimationPath;
-	key: TKey;
-}): AnimationBindingComponent<TKey> {
-	return {
-		key,
-		channelId: buildBindingChannelId({ path, componentKey: key }),
-	};
-}
-
-function cloneBindingComponents<TKey extends string>({
-	components,
-}: {
-	components: AnimationBindingComponent<TKey>[];
-}): AnimationBindingComponent<TKey>[] {
-	return components.map((component) => ({ ...component }));
-}
-
-const animationBindingFactories = {
-	color: ({ path }: { path: AnimationPath }): ColorAnimationBinding => ({
-		path,
-		kind: "color",
-		colorSpace: "srgb-linear",
-		components: [
-			createBindingComponent({ path, key: "r" }),
-			createBindingComponent({ path, key: "g" }),
-			createBindingComponent({ path, key: "b" }),
-			createBindingComponent({ path, key: "a" }),
-		],
-	}),
-	vector2: ({ path }: { path: AnimationPath }): Vector2AnimationBinding => ({
-		path,
-		kind: "vector2",
-		components: [
-			createBindingComponent({ path, key: "x" }),
-			createBindingComponent({ path, key: "y" }),
-		],
-	}),
-	number: ({ path }: { path: AnimationPath }): NumberAnimationBinding => ({
-		path,
-		kind: "number",
-		components: [createBindingComponent({ path, key: "value" })],
-	}),
-	discrete: ({ path }: { path: AnimationPath }): DiscreteAnimationBinding => ({
-		path,
-		kind: "discrete",
-		components: [createBindingComponent({ path, key: "value" })],
-	}),
-} satisfies {
-	[K in AnimationBindingKind]: ({
-		path,
-	}: {
-		path: AnimationPath;
-	}) => AnimationBindingOfKind<K>;
-};
-
-export function createAnimationBinding<TKind extends AnimationBindingKind>({
-	path,
-	kind,
-}: {
-	path: AnimationPath;
-	kind: TKind;
-}): AnimationBindingOfKind<TKind>;
-export function createAnimationBinding({
-	path,
-	kind,
-}: {
-	path: AnimationPath;
-	kind: AnimationBindingKind;
-}): AnimationBindingInstance {
-	return animationBindingFactories[kind]({ path });
-}
-
-const animationBindingCloners = {
-	color: ({ binding }: { binding: ColorAnimationBinding }): ColorAnimationBinding => ({
-		...binding,
-		components: cloneBindingComponents({
-			components: binding.components,
-		}),
-	}),
-	vector2: ({
-		binding,
-	}: {
-		binding: Vector2AnimationBinding;
-	}): Vector2AnimationBinding => ({
-		...binding,
-		components: cloneBindingComponents({
-			components: binding.components,
-		}),
-	}),
-	number: ({
-		binding,
-	}: {
-		binding: NumberAnimationBinding;
-	}): NumberAnimationBinding => ({
-		...binding,
-		components: cloneBindingComponents({
-			components: binding.components,
-		}),
-	}),
-	discrete: ({
-		binding,
-	}: {
-		binding: DiscreteAnimationBinding;
-	}): DiscreteAnimationBinding => ({
-		...binding,
-		components: cloneBindingComponents({
-			components: binding.components,
-		}),
-	}),
-} satisfies {
-	[K in AnimationBindingKind]: ({
-		binding,
-	}: {
-		binding: AnimationBindingOfKind<K>;
-	}) => AnimationBindingOfKind<K>;
-};
-
-export function cloneAnimationBinding<TKind extends AnimationBindingKind>({
-	binding,
-}: {
-	binding: AnimationBindingOfKind<TKind>;
-}): AnimationBindingOfKind<TKind>;
-export function cloneAnimationBinding({
-	binding,
-}: {
-	binding: AnimationBindingInstance;
-}): AnimationBindingInstance {
-	switch (binding.kind) {
-		case "color":
-			return animationBindingCloners.color({ binding });
-		case "vector2":
-			return animationBindingCloners.vector2({ binding });
-		case "number":
-			return animationBindingCloners.number({ binding });
-		case "discrete":
-			return animationBindingCloners.discrete({ binding });
-	}
-}
-
-export function parseColorToLinearRgba({
-	color,
-}: {
-	color: string;
-}): LinearRgba | null {
-	const parsed = parse(color);
-	const rgb = parsed ? toRgb(parsed) : null;
-	if (!rgb) {
-		return null;
-	}
-
-	return {
-		r: srgbToLinear({ value: rgb.r ?? 0 }),
-		g: srgbToLinear({ value: rgb.g ?? 0 }),
-		b: srgbToLinear({ value: rgb.b ?? 0 }),
-		a: clamp({ value: rgb.alpha ?? 1, min: 0, max: 1 }),
-	};
-}
-
-export function formatLinearRgba({
-	color,
-}: {
-	color: LinearRgba;
-}): string {
-	const rgb = {
-		mode: "rgb",
-		r: linearToSrgb({ value: color.r }),
-		g: linearToSrgb({ value: color.g }),
-		b: linearToSrgb({ value: color.b }),
-		alpha: clamp({ value: color.a, min: 0, max: 1 }),
-	} as const;
-	return rgb.alpha < 1 ? formatHex8(rgb) : formatHex(rgb);
-}
-
-export function decomposeAnimationValue({
-	kind,
-	value,
-}: {
-	kind: AnimationBindingKind;
-	value: AnimationValue;
-}): Record<string, AnimationComponentValue> | null {
-	if (kind === "number") {
-		return typeof value === "number" ? { value } : null;
-	}
-
-	if (kind === "vector2") {
-		return isVectorValue(value) ? { x: value.x, y: value.y } : null;
-	}
-
-	if (kind === "color") {
-		if (typeof value !== "string") {
-			return null;
-		}
-		const parsed = parseColorToLinearRgba({ color: value });
-		if (!parsed) {
-			return null;
-		}
-		return {
-			r: parsed.r,
-			g: parsed.g,
-			b: parsed.b,
-			a: parsed.a,
-		};
-	}
-
-	return typeof value === "string" || typeof value === "boolean"
-		? { value }
-		: null;
-}
-
-export function composeAnimationValue({
-	binding,
-	componentValues,
-}: {
-	binding: AnimationBindingInstance;
-	componentValues: Record<string, AnimationComponentValue | undefined>;
-}): AnimationValue | null {
-	if (binding.kind === "number") {
-		const value = componentValues.value;
-		return typeof value === "number" ? value : null;
-	}
-
-	if (binding.kind === "vector2") {
-		const x = componentValues.x;
-		const y = componentValues.y;
-		return typeof x === "number" && typeof y === "number" ? { x, y } : null;
-	}
-
-	if (binding.kind === "color") {
-		const r = componentValues.r;
-		const g = componentValues.g;
-		const b = componentValues.b;
-		const a = componentValues.a;
-		if (
-			typeof r !== "number" ||
-			typeof g !== "number" ||
-			typeof b !== "number" ||
-			typeof a !== "number"
-		) {
-			return null;
-		}
-		return formatLinearRgba({
-			color: {
-				r,
-				g,
-				b,
-				a,
-			},
-		});
-	}
-
-	const value = componentValues.value;
-	return typeof value === "string" || typeof value === "boolean" ? value : null;
-}

apps/web/src/animation/curve-bridge.ts

@@ -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),
-		},
-	};
-}

apps/web/src/animation/effect-param-channel.ts

@@ -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?.bindings[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,
-	});
-}

apps/web/src/animation/graph-channels.ts

@@ -1,99 +0,0 @@
-import type {
-	AnimationBindingInstance,
-	AnimationPath,
-	ElementAnimations,
-	ScalarAnimationChannel,
-	ScalarGraphChannel,
-	ScalarGraphKeyframeContext,
-} from "@/animation/types";
-
-export interface EditableScalarChannels {
-	binding: AnimationBindingInstance;
-	channels: ScalarGraphChannel[];
-}
-
-function isScalarAnimationChannel(
-	channel: ElementAnimations["channels"][string],
-): channel is ScalarAnimationChannel {
-	return channel?.kind === "scalar";
-}
-
-export function getEditableScalarChannels({
-	animations,
-	propertyPath,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-}): EditableScalarChannels | null {
-	const binding = animations?.bindings[propertyPath];
-	if (!binding) {
-		return null;
-	}
-
-	const channels = binding.components.flatMap((component) => {
-		const channel = animations?.channels[component.channelId];
-		if (!isScalarAnimationChannel(channel)) {
-			return [];
-		}
-
-		return [
-			{
-				propertyPath,
-				componentKey: component.key,
-				channelId: component.channelId,
-				channel,
-			} satisfies ScalarGraphChannel,
-		];
-	});
-
-	return { binding, 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,
-	};
-}

apps/web/src/animation/graphic-param-channel.ts

@@ -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?.bindings[path]) {
-			continue;
-		}
-
-		resolved[param.key] = resolveAnimationPathValueAtTime({
-			animations,
-			propertyPath: path,
-			localTime: Math.max(0, localTime),
-			fallbackValue: params[param.key] ?? param.default,
-		});
-	}
-
-	return resolved;
-}

apps/web/src/animation/interpolation.ts

@@ -1,384 +0,0 @@
-import type {
-	AnimationChannel,
-	AnimationInterpolation,
-	AnimationValue,
-	DiscreteAnimationChannel,
-	DiscreteValue,
-	ScalarAnimationChannel,
-	ScalarAnimationKey,
-	ScalarSegmentType,
-} from "@/animation/types";
-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",
-	};
-}
-
-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 normalizeChannel<TChannel extends AnimationChannel>({
-	channel,
-}: {
-	channel: TChannel;
-}): TChannel {
-	if (channel.kind === "scalar") {
-		return normalizeScalarChannel({
-			channel,
-		}) as TChannel;
-	}
-
-	return {
-		...channel,
-		keys: [...channel.keys].sort((leftKeyframe, rightKeyframe) =>
-			byTimeAscending({
-				leftTime: leftKeyframe.time,
-				rightTime: rightKeyframe.time,
-			}),
-		),
-	} as TChannel;
-}
-
-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: ScalarAnimationChannel | undefined;
-	time: number;
-	fallbackValue: number;
-}): number {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	const normalizedChannel = normalizeChannel({
-		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: DiscreteAnimationChannel | undefined;
-	time: number;
-	fallbackValue: DiscreteValue;
-}): DiscreteValue {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	const normalizedChannel = normalizeChannel({
-		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: AnimationChannel | undefined;
-	time: number;
-	fallbackValue: AnimationValue;
-}): AnimationValue {
-	if (!channel || channel.keys.length === 0) {
-		return fallbackValue;
-	}
-
-	if (channel.kind === "scalar") {
-		return typeof fallbackValue === "number"
-			? getScalarChannelValueAtTime({
-					channel,
-					time,
-					fallbackValue,
-				})
-			: fallbackValue;
-	}
-
-	if (typeof fallbackValue !== "string" && typeof fallbackValue !== "boolean") {
-		return fallbackValue;
-	}
-
-	return getDiscreteChannelValueAtTime({
-		channel,
-		time,
-		fallbackValue,
-	});
-}

apps/web/src/animation/keyframe-query.ts

@@ -1,294 +0,0 @@
-import type {
-	AnimationBindingInstance,
-	AnimationChannel,
-	AnimationPath,
-	ElementAnimations,
-	ElementKeyframe,
-} from "@/animation/types";
-import {
-	type AnimationComponentValue,
-	composeAnimationValue,
-} from "./binding-values";
-import {
-	getChannelValueAtTime,
-	getScalarSegmentInterpolation,
-} from "./interpolation";
-import { isAnimationPath } from "./path";
-
-function getBindingFallbackValue({
-	channel,
-}: {
-	channel: ElementAnimations["channels"][string];
-}) {
-	if (!channel || channel.keys.length === 0) {
-		return channel?.kind === "discrete" ? false : 0;
-	}
-
-	return channel.keys[0].value;
-}
-
-interface BindingKeyframeMatch {
-	componentIndex: number;
-	channel: AnimationChannel;
-	keyframe: AnimationChannel["keys"][number];
-}
-
-function getBindingKeyframeMatches({
-	animations,
-	binding,
-}: {
-	animations: ElementAnimations;
-	binding: AnimationBindingInstance;
-}): BindingKeyframeMatch[] {
-	return binding.components.flatMap((component, componentIndex) => {
-		const channel = animations.channels[component.channelId];
-		if (!channel || channel.keys.length === 0) {
-			return [];
-		}
-
-		return channel.keys.map((keyframe) => ({
-			componentIndex,
-			channel,
-			keyframe,
-		}));
-	});
-}
-
-function getUniqueBindingKeyframeMatches({
-	animations,
-	binding,
-}: {
-	animations: ElementAnimations;
-	binding: AnimationBindingInstance;
-}): BindingKeyframeMatch[] {
-	const sortedMatches = getBindingKeyframeMatches({
-		animations,
-		binding,
-	}).sort(
-		(leftMatch, rightMatch) =>
-			leftMatch.keyframe.time - rightMatch.keyframe.time ||
-			leftMatch.componentIndex - rightMatch.componentIndex,
-	);
-	const uniqueMatches: BindingKeyframeMatch[] = [];
-
-	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 getPreferredBindingKeyframeMatch({
-	matches,
-}: {
-	matches: BindingKeyframeMatch[];
-}): BindingKeyframeMatch | null {
-	return (
-		matches.find((match) => match.componentIndex === 0) ??
-		matches[0] ??
-		null
-	);
-}
-
-function getComposedBindingValueAtTime({
-	animations,
-	binding,
-	time,
-}: {
-	animations: ElementAnimations;
-	binding: AnimationBindingInstance;
-	time: number;
-}) {
-	const componentValues = Object.fromEntries(
-		binding.components.map((component) => {
-			const channel = animations.channels[component.channelId];
-			return [
-				component.key,
-				getChannelValueAtTime({
-					channel,
-					time,
-					fallbackValue: getBindingFallbackValue({ channel }),
-				}),
-			];
-		}),
-	) as Record<string, AnimationComponentValue | undefined>;
-
-	return composeAnimationValue({
-		binding,
-		componentValues,
-	});
-}
-
-function getKeyframeInterpolation({
-	channel,
-	keyframe,
-}: {
-	channel: AnimationChannel;
-	keyframe: AnimationChannel["keys"][number];
-}) {
-	return channel.kind === "scalar" && "segmentToNext" in keyframe
-		? getScalarSegmentInterpolation({ segment: keyframe.segmentToNext })
-		: "hold";
-}
-
-function toElementKeyframe({
-	animations,
-	binding,
-	propertyPath,
-	keyframeMatch,
-}: {
-	animations: ElementAnimations;
-	binding: AnimationBindingInstance;
-	propertyPath: AnimationPath;
-	keyframeMatch: BindingKeyframeMatch;
-}): ElementKeyframe | null {
-	const value = getComposedBindingValueAtTime({
-		animations,
-		binding,
-		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.bindings).flatMap(
-		([propertyPath, binding]) => {
-			if (!binding || !isAnimationPath(propertyPath)) {
-				return [];
-			}
-
-			return getUniqueBindingKeyframeMatches({
-				animations,
-				binding,
-			}).flatMap((keyframeMatch) => {
-				const keyframe = toElementKeyframe({
-					animations,
-					binding,
-					propertyPath,
-					keyframeMatch,
-				});
-				if (!keyframe) {
-					return [];
-				}
-
-				return [keyframe];
-			});
-		},
-	);
-}
-
-export function hasKeyframesForPath({
-	animations,
-	propertyPath,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-}): boolean {
-	const binding = animations?.bindings[propertyPath];
-	if (!binding) {
-		return false;
-	}
-
-	return binding.components.some((component) =>
-		Boolean(animations?.channels[component.channelId]?.keys.length),
-	);
-}
-
-export function getKeyframeAtTime({
-	animations,
-	propertyPath,
-	time,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	time: number;
-}): ElementKeyframe | null {
-	const binding = animations?.bindings[propertyPath];
-	if (!binding) {
-		return null;
-	}
-
-	const keyframeMatch = getPreferredBindingKeyframeMatch({
-		matches: getBindingKeyframeMatches({
-			animations,
-			binding,
-		}).filter(({ keyframe }) => keyframe.time === time),
-	});
-	if (!keyframeMatch) {
-		return null;
-	}
-
-	return toElementKeyframe({
-		animations,
-		binding,
-		propertyPath,
-		keyframeMatch,
-	});
-}
-
-export function getKeyframeById({
-	animations,
-	propertyPath,
-	keyframeId,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}): ElementKeyframe | null {
-	const binding = animations?.bindings[propertyPath];
-	if (!binding) {
-		return null;
-	}
-
-	const keyframeMatch = getPreferredBindingKeyframeMatch({
-		matches: getBindingKeyframeMatches({
-			animations,
-			binding,
-		}).filter(({ keyframe }) => keyframe.id === keyframeId),
-	});
-	if (!keyframeMatch) {
-		return null;
-	}
-
-	return toElementKeyframe({
-		animations,
-		binding,
-		propertyPath,
-		keyframeMatch,
-	});
-}

apps/web/src/animation/path.ts

@@ -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)
-	);
-}

apps/web/src/animation/resolve.ts

@@ -1,79 +0,0 @@
-import type {
-	AnimationPath,
-	AnimationValueForPath,
-	ElementAnimations,
-} from "@/animation/types";
-import {
-	type AnimationComponentValue,
-	composeAnimationValue,
-	decomposeAnimationValue,
-} from "./binding-values";
-import {
-	getChannelValueAtTime,
-} 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<TPath extends AnimationPath>({
-	animations,
-	propertyPath,
-	localTime,
-	fallbackValue,
-}: {
-	animations: ElementAnimations | undefined;
-	propertyPath: TPath;
-	localTime: number;
-	fallbackValue: AnimationValueForPath<TPath>;
-}): AnimationValueForPath<TPath> {
-	const binding = animations?.bindings[propertyPath];
-	if (!binding) {
-		return fallbackValue;
-	}
-
-	const fallbackComponents = decomposeAnimationValue({
-		kind: binding.kind,
-		value: fallbackValue,
-	});
-	if (!fallbackComponents) {
-		return fallbackValue;
-	}
-
-	const componentValues = Object.fromEntries(
-		binding.components.map((component) => {
-			const channel = animations?.channels[component.channelId];
-			return [
-				component.key,
-				getChannelValueAtTime({
-					channel,
-					time: localTime,
-					fallbackValue:
-						fallbackComponents[component.key] ??
-						(channel?.kind === "discrete" ? false : 0),
-				}),
-			];
-		}),
-	) as Record<string, AnimationComponentValue | undefined>;
-	return (composeAnimationValue({
-		binding,
-		componentValues,
-	}) ?? fallbackValue) as AnimationValueForPath<TPath>;
-}

apps/web/src/animation/transform.ts

@@ -1 +0,0 @@
-export const MIN_TRANSFORM_SCALE = 0.01;

apps/web/src/animation/types.ts

@@ -1,229 +0,0 @@
-import type { ParamValues } from "@/params";
-import type { MediaTime } from "@/wasm";
-
-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 =
-	| AnimationPropertyPath
-	| GraphicParamPath
-	| EffectParamPath;
-
-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 VectorValue = { x: number; y: number };
-export type DiscreteValue = boolean | string;
-export type AnimationValue = number | string | boolean | VectorValue;
-export interface AnimationPropertyValueMap {
-	"transform.positionX": number;
-	"transform.positionY": number;
-	"transform.scaleX": number;
-	"transform.scaleY": number;
-	"transform.rotate": number;
-	opacity: number;
-	volume: number;
-	color: string;
-	"background.color": string;
-	"background.paddingX": number;
-	"background.paddingY": number;
-	"background.offsetX": number;
-	"background.offsetY": number;
-	"background.cornerRadius": number;
-}
-export type DynamicAnimationPathValue = number | string | boolean;
-
-export interface NumericSpec {
-	min?: number;
-	max?: number;
-	step?: number;
-}
-export type AnimationValueForPath<TPath extends AnimationPath> =
-	TPath extends AnimationPropertyPath
-		? AnimationPropertyValueMap[TPath]
-		: TPath extends GraphicParamPath | EffectParamPath
-			? DynamicAnimationPathValue
-			: never;
-export type AnimationNumericPropertyPath = {
-	[K in AnimationPropertyPath]: AnimationValueForPath<K> extends number ? K : never;
-}[AnimationPropertyPath];
-export type AnimationColorPropertyPath = {
-	[K in AnimationPropertyPath]: AnimationValueForPath<K> extends string ? K : never;
-}[AnimationPropertyPath];
-
-export type ContinuousKeyframeInterpolation = "linear" | "hold" | "bezier";
-export type DiscreteKeyframeInterpolation = "hold";
-export type AnimationInterpolation =
-	| ContinuousKeyframeInterpolation
-	| DiscreteKeyframeInterpolation;
-
-export type PrimitiveAnimationChannelKind = "scalar" | "discrete";
-export type AnimationBindingKind = "number" | "vector2" | "color" | "discrete";
-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 number | DiscreteValue> {
-	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 interface DiscreteAnimationKey
-	extends BaseAnimationKeyframe<DiscreteValue> {}
-
-export type AnimationKeyframe = ScalarAnimationKey | DiscreteAnimationKey;
-
-export interface ScalarAnimationChannel {
-	kind: "scalar";
-	keys: ScalarAnimationKey[];
-	extrapolation?: {
-		before: ChannelExtrapolationMode;
-		after: ChannelExtrapolationMode;
-	};
-}
-
-export interface DiscreteAnimationChannel {
-	kind: "discrete";
-	keys: DiscreteAnimationKey[];
-}
-
-export type AnimationChannel =
-	| ScalarAnimationChannel
-	| DiscreteAnimationChannel;
-
-export type ElementAnimationChannelMap = Record<
-	string,
-	AnimationChannel | undefined
->;
-
-export interface AnimationBindingComponent<TKey extends string = string> {
-	key: TKey;
-	channelId: string;
-}
-
-interface BaseAnimationBinding<
-	TKind extends AnimationBindingKind,
-	TComponentKey extends string,
-> {
-	path: AnimationPath;
-	kind: TKind;
-	components: AnimationBindingComponent<TComponentKey>[];
-}
-
-export interface NumberAnimationBinding
-	extends BaseAnimationBinding<"number", "value"> {}
-
-export interface Vector2AnimationBinding
-	extends BaseAnimationBinding<"vector2", "x" | "y"> {}
-
-export interface ColorAnimationBinding
-	extends BaseAnimationBinding<"color", "r" | "g" | "b" | "a"> {
-	colorSpace: "srgb-linear";
-}
-
-export interface DiscreteAnimationBinding
-	extends BaseAnimationBinding<"discrete", "value"> {}
-
-export type AnimationBindingInstance =
-	| NumberAnimationBinding
-	| Vector2AnimationBinding
-	| ColorAnimationBinding
-	| DiscreteAnimationBinding;
-
-export interface AnimationBindingByKind {
-	number: NumberAnimationBinding;
-	vector2: Vector2AnimationBinding;
-	color: ColorAnimationBinding;
-	discrete: DiscreteAnimationBinding;
-}
-
-export type AnimationBindingOfKind<TKind extends AnimationBindingKind> =
-	AnimationBindingByKind[TKind];
-
-export type ElementAnimationBindingMap = Record<
-	string,
-	AnimationBindingInstance | undefined
->;
-
-export interface ElementAnimations {
-	bindings: ElementAnimationBindingMap;
-	channels: ElementAnimationChannelMap;
-}
-
-export type NormalizedCubicBezier = [number, number, number, number];
-
-export interface ScalarGraphChannelTarget {
-	propertyPath: AnimationPath;
-	componentKey: string;
-	channelId: 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: AnimationValue;
-	interpolation: AnimationInterpolation;
-}
-
-export interface SelectedKeyframeRef {
-	trackId: string;
-	elementId: string;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}

apps/web/src/animation/values.ts

@@ -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,
-	});
-}

apps/web/src/app/api/auth/[...all]/route.ts

@@ -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);

apps/web/src/app/api/feedback/route.ts

@@ -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 });
-}

apps/web/src/app/api/sounds/search/route.ts

@@ -1,280 +1,280 @@
-import { webEnv } from "@/env/web";
-import { type NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
-import { checkRateLimit } from "@/auth/rate-limit";
-
-const searchParamsSchema = z.object({
-	q: z.string().max(500, "Query too long").optional(),
-	type: z.enum(["songs", "effects"]).optional(),
-	page: z.coerce.number().int().min(1).max(1000).default(1),
-	page_size: z.coerce.number().int().min(1).max(150).default(20),
-	sort: z
-		.enum(["downloads", "rating", "created", "score"])
-		.default("downloads"),
-	min_rating: z.coerce.number().min(0).max(5).default(3),
-	commercial_only: z.coerce.boolean().default(true),
-});
-
-const freesoundResultSchema = z.object({
-	id: z.number(),
-	name: z.string(),
-	description: z.string(),
-	url: z.string().url(),
-	previews: z
-		.object({
-			"preview-hq-mp3": z.string().url(),
-			"preview-lq-mp3": z.string().url(),
-			"preview-hq-ogg": z.string().url(),
-			"preview-lq-ogg": z.string().url(),
-		})
-		.optional(),
-	download: z.string().url().optional(),
-	duration: z.number(),
-	filesize: z.number(),
-	type: z.string(),
-	channels: z.number(),
-	bitrate: z.number(),
-	bitdepth: z.number(),
-	samplerate: z.number(),
-	username: z.string(),
-	tags: z.array(z.string()),
-	license: z.string(),
-	created: z.string(),
-	num_downloads: z.number().optional(),
-	avg_rating: z.number().optional(),
-	num_ratings: z.number().optional(),
-});
-
-const freesoundResponseSchema = z.object({
-	count: z.number(),
-	next: z.string().url().nullable(),
-	previous: z.string().url().nullable(),
-	results: z.array(freesoundResultSchema),
-});
-
-const transformedResultSchema = z.object({
-	id: z.number(),
-	name: z.string(),
-	description: z.string(),
-	url: z.string(),
-	previewUrl: z.string().optional(),
-	downloadUrl: z.string().optional(),
-	duration: z.number(),
-	filesize: z.number(),
-	type: z.string(),
-	channels: z.number(),
-	bitrate: z.number(),
-	bitdepth: z.number(),
-	samplerate: z.number(),
-	username: z.string(),
-	tags: z.array(z.string()),
-	license: z.string(),
-	created: z.string(),
-	downloads: z.number().optional(),
-	rating: z.number().optional(),
-	ratingCount: z.number().optional(),
-});
-
-const apiResponseSchema = z.object({
-	count: z.number(),
-	next: z.string().nullable(),
-	previous: z.string().nullable(),
-	results: z.array(transformedResultSchema),
-	query: z.string().optional(),
-	type: z.string(),
-	page: z.number(),
-	pageSize: z.number(),
-	sort: z.string(),
-	minRating: z.number().optional(),
-});
-
-function buildSortParameter({ query, sort }: { query?: string; sort: string }) {
-	if (!query) return `${sort}_desc`;
-	return sort === "score" ? "score" : `${sort}_desc`;
-}
-
-function applyEffectsFilters({
-	params,
-	min_rating,
-	commercial_only,
-}: {
-	params: URLSearchParams;
-	min_rating: number;
-	commercial_only: boolean;
-}) {
-	params.append("filter", "duration:[* TO 30.0]");
-	params.append("filter", `avg_rating:[${min_rating} TO *]`);
-
-	if (commercial_only) {
-		params.append(
-			"filter",
-			'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")',
-		);
-	}
-
-	params.append(
-		"filter",
-		"tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion",
-	);
-}
-
-function transformFreesoundResult(
-	result: z.infer<typeof freesoundResultSchema>,
-) {
-	return {
-		id: result.id,
-		name: result.name,
-		description: result.description,
-		url: result.url,
-		previewUrl:
-			result.previews?.["preview-hq-mp3"] ||
-			result.previews?.["preview-lq-mp3"],
-		downloadUrl: result.download,
-		duration: result.duration,
-		filesize: result.filesize,
-		type: result.type,
-		channels: result.channels,
-		bitrate: result.bitrate,
-		bitdepth: result.bitdepth,
-		samplerate: result.samplerate,
-		username: result.username,
-		tags: result.tags,
-		license: result.license,
-		created: result.created,
-		downloads: result.num_downloads || 0,
-		rating: result.avg_rating || 0,
-		ratingCount: result.num_ratings || 0,
-	};
-}
-
-export async function GET(request: NextRequest) {
-	try {
-		const { limited } = await checkRateLimit({ request });
-		if (limited) {
-			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
-		}
-
-		const { searchParams } = new URL(request.url);
-
-		const validationResult = searchParamsSchema.safeParse({
-			q: searchParams.get("q") || undefined,
-			type: searchParams.get("type") || undefined,
-			page: searchParams.get("page") || undefined,
-			page_size: searchParams.get("page_size") || undefined,
-			sort: searchParams.get("sort") || undefined,
-			min_rating: searchParams.get("min_rating") || undefined,
-		});
-
-		if (!validationResult.success) {
-			return NextResponse.json(
-				{
-					error: "Invalid parameters",
-					details: validationResult.error.flatten().fieldErrors,
-				},
-				{ status: 400 },
-			);
-		}
-
-		const {
-			q: query,
-			type,
-			page,
-			page_size: pageSize,
-			sort,
-			min_rating,
-			commercial_only,
-		} = validationResult.data;
-
-		if (type === "songs") {
-			return NextResponse.json(
-				{
-					error: "Songs are not available yet",
-					message:
-						"Song search functionality is coming soon. Try searching for sound effects instead.",
-				},
-				{ status: 501 },
-			);
-		}
-
-		const baseUrl = "https://freesound.org/apiv2/search/text/";
-
-		const sortParam = buildSortParameter({ query, sort });
-
-		const params = new URLSearchParams({
-			query: query || "",
-			token: webEnv.FREESOUND_API_KEY,
-			page: page.toString(),
-			page_size: pageSize.toString(),
-			sort: sortParam,
-			fields:
-				"id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
-		});
-
-		const isEffectsSearch = type === "effects" || !type;
-		if (isEffectsSearch) {
-			applyEffectsFilters({ params, min_rating, commercial_only });
-		}
-
-		const response = await fetch(`${baseUrl}?${params.toString()}`);
-
-		if (!response.ok) {
-			const errorText = await response.text();
-			console.error("Freesound API error:", response.status, errorText);
-			return NextResponse.json(
-				{ error: "Failed to search sounds" },
-				{ status: response.status },
-			);
-		}
-
-		const rawData = await response.json();
-
-		const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
-		if (!freesoundValidation.success) {
-			console.error(
-				"Invalid Freesound API response:",
-				freesoundValidation.error,
-			);
-			return NextResponse.json(
-				{ error: "Invalid response from Freesound API" },
-				{ status: 502 },
-			);
-		}
-
-		const data = freesoundValidation.data;
-
-		const transformedResults = data.results.map(transformFreesoundResult);
-
-		const responseData = {
-			count: data.count,
-			next: data.next,
-			previous: data.previous,
-			results: transformedResults,
-			query: query || "",
-			type: type || "effects",
-			page,
-			pageSize,
-			sort,
-			minRating: min_rating,
-		};
-
-		const responseValidation = apiResponseSchema.safeParse(responseData);
-		if (!responseValidation.success) {
-			console.error(
-				"Invalid API response structure:",
-				responseValidation.error,
-			);
-			return NextResponse.json(
-				{ error: "Internal response formatting error" },
-				{ status: 500 },
-			);
-		}
-
-		return NextResponse.json(responseValidation.data);
-	} catch (error) {
-		console.error("Error searching sounds:", error);
-		return NextResponse.json(
-			{ error: "Internal server error" },
-			{ status: 500 },
-		);
-	}
-}
+import { webEnv } from "@opencut/env/web";
+import { type NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { checkRateLimit } from "@/lib/rate-limit";
+
+const searchParamsSchema = z.object({
+	q: z.string().max(500, "Query too long").optional(),
+	type: z.enum(["songs", "effects"]).optional(),
+	page: z.coerce.number().int().min(1).max(1000).default(1),
+	page_size: z.coerce.number().int().min(1).max(150).default(20),
+	sort: z
+		.enum(["downloads", "rating", "created", "score"])
+		.default("downloads"),
+	min_rating: z.coerce.number().min(0).max(5).default(3),
+	commercial_only: z.coerce.boolean().default(true),
+});
+
+const freesoundResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string().url(),
+	previews: z
+		.object({
+			"preview-hq-mp3": z.string().url(),
+			"preview-lq-mp3": z.string().url(),
+			"preview-hq-ogg": z.string().url(),
+			"preview-lq-ogg": z.string().url(),
+		})
+		.optional(),
+	download: z.string().url().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	num_downloads: z.number().optional(),
+	avg_rating: z.number().optional(),
+	num_ratings: z.number().optional(),
+});
+
+const freesoundResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().url().nullable(),
+	previous: z.string().url().nullable(),
+	results: z.array(freesoundResultSchema),
+});
+
+const transformedResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string(),
+	previewUrl: z.string().optional(),
+	downloadUrl: z.string().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	downloads: z.number().optional(),
+	rating: z.number().optional(),
+	ratingCount: z.number().optional(),
+});
+
+const apiResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().nullable(),
+	previous: z.string().nullable(),
+	results: z.array(transformedResultSchema),
+	query: z.string().optional(),
+	type: z.string(),
+	page: z.number(),
+	pageSize: z.number(),
+	sort: z.string(),
+	minRating: z.number().optional(),
+});
+
+function buildSortParameter({ query, sort }: { query?: string; sort: string }) {
+	if (!query) return `${sort}_desc`;
+	return sort === "score" ? "score" : `${sort}_desc`;
+}
+
+function applyEffectsFilters({
+	params,
+	min_rating,
+	commercial_only,
+}: {
+	params: URLSearchParams;
+	min_rating: number;
+	commercial_only: boolean;
+}) {
+	params.append("filter", "duration:[* TO 30.0]");
+	params.append("filter", `avg_rating:[${min_rating} TO *]`);
+
+	if (commercial_only) {
+		params.append(
+			"filter",
+			'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")',
+		);
+	}
+
+	params.append(
+		"filter",
+		"tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion",
+	);
+}
+
+function transformFreesoundResult(
+	result: z.infer<typeof freesoundResultSchema>,
+) {
+	return {
+		id: result.id,
+		name: result.name,
+		description: result.description,
+		url: result.url,
+		previewUrl:
+			result.previews?.["preview-hq-mp3"] ||
+			result.previews?.["preview-lq-mp3"],
+		downloadUrl: result.download,
+		duration: result.duration,
+		filesize: result.filesize,
+		type: result.type,
+		channels: result.channels,
+		bitrate: result.bitrate,
+		bitdepth: result.bitdepth,
+		samplerate: result.samplerate,
+		username: result.username,
+		tags: result.tags,
+		license: result.license,
+		created: result.created,
+		downloads: result.num_downloads || 0,
+		rating: result.avg_rating || 0,
+		ratingCount: result.num_ratings || 0,
+	};
+}
+
+export async function GET(request: NextRequest) {
+	try {
+		const { limited } = await checkRateLimit({ request });
+		if (limited) {
+			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+		}
+
+		const { searchParams } = new URL(request.url);
+
+		const validationResult = searchParamsSchema.safeParse({
+			q: searchParams.get("q") || undefined,
+			type: searchParams.get("type") || undefined,
+			page: searchParams.get("page") || undefined,
+			page_size: searchParams.get("page_size") || undefined,
+			sort: searchParams.get("sort") || undefined,
+			min_rating: searchParams.get("min_rating") || undefined,
+		});
+
+		if (!validationResult.success) {
+			return NextResponse.json(
+				{
+					error: "Invalid parameters",
+					details: validationResult.error.flatten().fieldErrors,
+				},
+				{ status: 400 },
+			);
+		}
+
+		const {
+			q: query,
+			type,
+			page,
+			page_size: pageSize,
+			sort,
+			min_rating,
+			commercial_only,
+		} = validationResult.data;
+
+		if (type === "songs") {
+			return NextResponse.json(
+				{
+					error: "Songs are not available yet",
+					message:
+						"Song search functionality is coming soon. Try searching for sound effects instead.",
+				},
+				{ status: 501 },
+			);
+		}
+
+		const baseUrl = "https://freesound.org/apiv2/search/text/";
+
+		const sortParam = buildSortParameter({ query, sort });
+
+		const params = new URLSearchParams({
+			query: query || "",
+			token: webEnv.FREESOUND_API_KEY,
+			page: page.toString(),
+			page_size: pageSize.toString(),
+			sort: sortParam,
+			fields:
+				"id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
+		});
+
+		const isEffectsSearch = type === "effects" || !type;
+		if (isEffectsSearch) {
+			applyEffectsFilters({ params, min_rating, commercial_only });
+		}
+
+		const response = await fetch(`${baseUrl}?${params.toString()}`);
+
+		if (!response.ok) {
+			const errorText = await response.text();
+			console.error("Freesound API error:", response.status, errorText);
+			return NextResponse.json(
+				{ error: "Failed to search sounds" },
+				{ status: response.status },
+			);
+		}
+
+		const rawData = await response.json();
+
+		const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
+		if (!freesoundValidation.success) {
+			console.error(
+				"Invalid Freesound API response:",
+				freesoundValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Invalid response from Freesound API" },
+				{ status: 502 },
+			);
+		}
+
+		const data = freesoundValidation.data;
+
+		const transformedResults = data.results.map(transformFreesoundResult);
+
+		const responseData = {
+			count: data.count,
+			next: data.next,
+			previous: data.previous,
+			results: transformedResults,
+			query: query || "",
+			type: type || "effects",
+			page,
+			pageSize,
+			sort,
+			minRating: min_rating,
+		};
+
+		const responseValidation = apiResponseSchema.safeParse(responseData);
+		if (!responseValidation.success) {
+			console.error(
+				"Invalid API response structure:",
+				responseValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Internal response formatting error" },
+				{ status: 500 },
+			);
+		}
+
+		return NextResponse.json(responseValidation.data);
+	} catch (error) {
+		console.error("Error searching sounds:", error);
+		return NextResponse.json(
+			{ error: "Internal server error" },
+			{ status: 500 },
+		);
+	}
+}

apps/web/src/app/blog/[slug]/page.tsx

@@ -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 }>;

apps/web/src/app/blog/page.tsx

@@ -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",

apps/web/src/app/brand/page.tsx

@@ -1,268 +1,268 @@
-"use client";
-
-import type { CSSProperties } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Check, Copy, Download } from "lucide-react";
-import { useState } from "react";
-import { BasePage } from "@/app/base-page";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/utils/ui";
-
-function downloadAsset(src: string) {
-	const filename = src.split("/").pop() ?? "asset.svg";
-	const a = document.createElement("a");
-	a.href = src;
-	a.download = filename;
-	a.click();
-}
-
-async function copyAsset(src: string) {
-	const res = await fetch(src);
-	const text = await res.text();
-	await navigator.clipboard.writeText(text);
-}
-
-const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
-
-type AssetTheme = "dark" | "light" | "icon";
-
-interface AssetVariant {
-	src: string;
-	theme: AssetTheme;
-	label: string;
-	width: number;
-	height: number;
-}
-
-interface AssetSection {
-	title: string;
-	description: string;
-	cols: "1" | "2";
-	assets: AssetVariant[];
-}
-
-const ASSET_SECTIONS: AssetSection[] = [
-	{
-		title: "Symbol",
-		description:
-			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
-		cols: "2",
-		assets: [
-			{
-				src: "/logos/opencut/symbol.svg",
-				theme: "dark",
-				label: "Symbol",
-				width: 400,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/symbol-light.svg",
-				theme: "light",
-				label: "Symbol",
-				width: 400,
-				height: 400,
-			},
-		],
-	},
-	{
-		title: "Lockup",
-		description:
-			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
-		cols: "2",
-		assets: [
-			{
-				src: "/logos/opencut/logo.svg",
-				theme: "dark",
-				label: "Logo",
-				width: 1809,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/logo-light.svg",
-				theme: "light",
-				label: "Logo",
-				width: 1809,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/text.svg",
-				theme: "dark",
-				label: "Text",
-				width: 1760,
-				height: 400,
-			},
-			{
-				src: "/logos/opencut/text-light.svg",
-				theme: "light",
-				label: "Text",
-				width: 1760,
-				height: 400,
-			},
-		],
-	},
-];
-
-export default function BrandPage() {
-	return (
-		<BasePage
-			maxWidth="6xl"
-			title="Brand"
-			description={
-				<>
-					Download OpenCut brand assets for use in your projects.{" "}
-					<Link
-						href="#guidelines"
-						className="underline underline-offset-4"
-						onClick={() =>
-							document
-								.getElementById("guidelines")
-								?.scrollIntoView({ behavior: "smooth" })
-						}
-					>
-						Read the brand guidelines.
-					</Link>
-				</>
-			}
-			action={
-				<Button
-					variant="outline"
-					size="lg"
-					className="mx-auto gap-2"
-					onClick={() => {
-						ALL_ASSETS().forEach((asset, i) => {
-							setTimeout(() => downloadAsset(asset.src), i * 200);
-						});
-					}}
-				>
-					<Download />
-					Download all
-				</Button>
-			}
-		>
-			<div className="flex flex-col gap-10">
-				{ASSET_SECTIONS.map((section) => (
-					<div key={section.title} className="flex flex-col gap-4">
-						<div className="flex flex-col gap-1">
-							<h2 className="font-semibold text-lg">{section.title}</h2>
-							<p className="text-muted-foreground text-sm">
-								{section.description}
-							</p>
-						</div>
-						<div
-							className={cn(
-								"grid gap-3",
-								section.cols === "2"
-									? "grid-cols-1 sm:grid-cols-2"
-									: "grid-cols-1",
-							)}
-						>
-							{section.assets.map((variant) => (
-								<AssetCard key={variant.src} variant={variant} />
-							))}
-						</div>
-					</div>
-				))}
-			</div>
-
-			<Separator />
-
-			<div id="guidelines" className="flex flex-col gap-8 text-sm">
-				<div className="flex flex-col gap-3">
-					<h2 className="font-semibold text-lg">Usage</h2>
-					<p className="text-muted-foreground text-base leading-relaxed">
-						OpenCut is open source — the code is free to use under its license.
-						That license does not cover the name or logo. You can say you use
-						OpenCut, that your project integrates with OpenCut, or that it was
-						built on top of OpenCut. You cannot name your product OpenCut, imply
-						we made or endorse your product, or use the marks commercially
-						without asking first. For anything unclear, reach out at{" "}
-						<Link
-							href="mailto:brand@opencut.app"
-							className="underline underline-offset-4"
-						>
-							brand@opencut.app
-						</Link>
-						.
-					</p>
-				</div>
-
-				<div className="flex flex-col gap-3">
-					<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.",
-							"Implying that OpenCut made, sponsors, or endorses your work.",
-							"Using the logo or name on merchandise or commercial marketing.",
-							"Modifying the marks.",
-						].map((item) => (
-							<li key={item} className="flex gap-2">
-								<span className="mt-0.5 shrink-0">-</span>
-								<span>{item}</span>
-							</li>
-						))}
-					</ul>
-				</div>
-			</div>
-		</BasePage>
-	);
-}
-
-const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
-	light: {
-		backgroundImage:
-			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
-		backgroundSize: "18px 18px",
-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
-		backgroundColor: "#000",
-	},
-	dark: {
-		backgroundImage:
-			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
-		backgroundSize: "18px 18px",
-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
-		backgroundColor: "#f5f5f5",
-	},
-};
-
-function AssetCard({ variant }: { variant: AssetVariant }) {
-	const [copied, setCopied] = useState(false);
-
-	async function handleCopy() {
-		await copyAsset(variant.src);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	}
-
-	return (
-		<Card
-			className="group relative overflow-hidden"
-			style={
-				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
-			}
-		>
-			<div className="flex h-56 items-center justify-center px-12 py-8">
-				<Image
-					src={variant.src}
-					alt={variant.label}
-					width={variant.width}
-					height={variant.height}
-					className="max-h-16 w-auto select-none object-contain"
-					draggable={false}
-					unoptimized
-				/>
-			</div>
-
-			<Button
-				variant="outline"
-				size="icon"
-				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
-				onClick={handleCopy}
-			>
-				{copied ? <Check /> : <Copy />}
-			</Button>
-		</Card>
-	);
-}
+"use client";
+
+import type { CSSProperties } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Check, Copy, Download } from "lucide-react";
+import { useState } from "react";
+import { BasePage } from "@/app/base-page";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/utils/ui";
+
+function downloadAsset(src: string) {
+	const filename = src.split("/").pop() ?? "asset.svg";
+	const a = document.createElement("a");
+	a.href = src;
+	a.download = filename;
+	a.click();
+}
+
+async function copyAsset(src: string) {
+	const res = await fetch(src);
+	const text = await res.text();
+	await navigator.clipboard.writeText(text);
+}
+
+const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
+
+type AssetTheme = "dark" | "light" | "icon";
+
+interface AssetVariant {
+	src: string;
+	theme: AssetTheme;
+	label: string;
+	width: number;
+	height: number;
+}
+
+interface AssetSection {
+	title: string;
+	description: string;
+	cols: "1" | "2";
+	assets: AssetVariant[];
+}
+
+const ASSET_SECTIONS: AssetSection[] = [
+	{
+		title: "Symbol",
+		description:
+			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/symbol.svg",
+				theme: "dark",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/symbol-light.svg",
+				theme: "light",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+		],
+	},
+	{
+		title: "Lockup",
+		description:
+			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/logo.svg",
+				theme: "dark",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/logo-light.svg",
+				theme: "light",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text.svg",
+				theme: "dark",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text-light.svg",
+				theme: "light",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+		],
+	},
+];
+
+export default function BrandPage() {
+	return (
+		<BasePage
+			maxWidth="6xl"
+			title="Brand"
+			description={
+				<>
+					Download OpenCut brand assets for use in your projects.{" "}
+					<Link
+						href="#guidelines"
+						className="underline underline-offset-4"
+						onClick={() =>
+							document
+								.getElementById("guidelines")
+								?.scrollIntoView({ behavior: "smooth" })
+						}
+					>
+						Read the brand guidelines.
+					</Link>
+				</>
+			}
+			action={
+				<Button
+					variant="outline"
+					size="lg"
+					className="mx-auto gap-2"
+					onClick={() => {
+						ALL_ASSETS().forEach((asset, i) => {
+							setTimeout(() => downloadAsset(asset.src), i * 200);
+						});
+					}}
+				>
+					<Download />
+					Download all
+				</Button>
+			}
+		>
+			<div className="flex flex-col gap-10">
+				{ASSET_SECTIONS.map((section) => (
+					<div key={section.title} className="flex flex-col gap-4">
+						<div className="flex flex-col gap-1">
+							<h2 className="font-semibold text-lg">{section.title}</h2>
+							<p className="text-muted-foreground text-sm">
+								{section.description}
+							</p>
+						</div>
+						<div
+							className={cn(
+								"grid gap-3",
+								section.cols === "2"
+									? "grid-cols-1 sm:grid-cols-2"
+									: "grid-cols-1",
+							)}
+						>
+							{section.assets.map((variant) => (
+								<AssetCard key={variant.src} variant={variant} />
+							))}
+						</div>
+					</div>
+				))}
+			</div>
+
+			<Separator />
+
+			<div id="guidelines" className="flex flex-col gap-8 text-sm">
+				<div className="flex flex-col gap-3">
+					<h2 className="font-semibold text-lg">Usage</h2>
+					<p className="text-muted-foreground text-base leading-relaxed">
+						OpenCut is open source — the code is free to use under its license.
+						That license does not cover the name or logo. You can say you use
+						OpenCut, that your project integrates with OpenCut, or that it was
+						built on top of OpenCut. You cannot name your product OpenCut, imply
+						we made or endorse your product, or use the marks commercially
+						without asking first. For anything unclear, reach out at{" "}
+						<Link
+							href="mailto:brand@opencut.app"
+							className="underline underline-offset-4"
+						>
+							brand@opencut.app
+						</Link>
+						.
+					</p>
+				</div>
+
+				<div className="flex flex-col gap-3">
+					<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.",
+							"Implying that OpenCut made, sponsors, or endorses your work.",
+							"Using the logo or name on merchandise or commercial marketing.",
+							"Modifying the marks.",
+						].map((item) => (
+							<li key={item} className="flex gap-2">
+								<span className="mt-0.5 shrink-0">-</span>
+								<span>{item}</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+		</BasePage>
+	);
+}
+
+const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
+	light: {
+		backgroundImage:
+			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#000",
+	},
+	dark: {
+		backgroundImage:
+			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#f5f5f5",
+	},
+};
+
+function AssetCard({ variant }: { variant: AssetVariant }) {
+	const [copied, setCopied] = useState(false);
+
+	async function handleCopy() {
+		await copyAsset(variant.src);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	}
+
+	return (
+		<Card
+			className="group relative overflow-hidden"
+			style={
+				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
+			}
+		>
+			<div className="flex h-56 items-center justify-center px-12 py-8">
+				<Image
+					src={variant.src}
+					alt={variant.label}
+					width={variant.width}
+					height={variant.height}
+					className="max-h-16 w-auto select-none object-contain"
+					draggable={false}
+					unoptimized
+				/>
+			</div>
+
+			<Button
+				variant="outline"
+				size="icon"
+				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
+				onClick={handleCopy}
+			>
+				{copied ? <Check /> : <Copy />}
+			</Button>
+		</Card>
+	);
+}

apps/web/src/app/changelog/[version]/page.tsx

@@ -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>
 

apps/web/src/app/changelog/components/copy-markdown-button.tsx

@@ -1,98 +1,68 @@
-"use client";
-
-import { useState } from "react";
-import { CheckIcon, ClipboardIcon } from "lucide-react";
-import {
-	getSectionTitle,
-	groupAndOrderChanges,
-	isSectionCollapsible,
-} from "../utils";
-import type { Change } from "../utils";
-import { cn } from "@/utils/ui";
-import { Button } from "@/components/ui/button";
-
-function buildMarkdown({
-	description,
-	changes,
-}: {
-	description?: string;
-	changes: Change[];
-}): string {
-	const lines: string[] = [];
-
-	if (description) {
-		lines.push(description, "");
-	}
-
-	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 })}`);
-		for (const change of grouped[type]) {
-			lines.push(`- ${change.text}`);
-		}
-		lines.push("");
-	}
-
-	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,
-}: {
-	description?: string;
-	changes: Change[];
-}) {
-	const [copied, setCopied] = useState(false);
-
-	const handleCopy = async () => {
-		const markdown = buildMarkdown({ description, changes });
-		await navigator.clipboard.writeText(markdown);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	return (
-		<Button
-			size="sm"
-			variant="text"
-			onClick={handleCopy}
-			className={cn(
-				"flex items-center gap-1.5",
-				copied && "pointer-events-none",
-			)}
-			title="Copy as markdown"
-		>
-			{copied ? (
-				<CheckIcon className="size-4" />
-			) : (
-				<ClipboardIcon className="size-4" />
-			)}
-			{copied ? "Copied!" : "Copy markdown"}
-		</Button>
-	);
-}
+"use client";
+
+import { useState } from "react";
+import { CheckIcon, ClipboardIcon } from "lucide-react";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
+import type { Change } from "../utils";
+import { cn } from "@/utils/ui";
+import { Button } from "@/components/ui/button";
+
+function buildMarkdown({
+	description,
+	changes,
+}: {
+	description?: string;
+	changes: Change[];
+}): string {
+	const lines: string[] = [];
+
+	if (description) {
+		lines.push(description, "");
+	}
+
+	const { grouped, orderedTypes } = groupAndOrderChanges({ changes });
+
+	for (const type of orderedTypes) {
+		lines.push(`## ${getSectionTitle(type)}`);
+		for (const change of grouped[type]) {
+			lines.push(`- ${change.text}`);
+		}
+		lines.push("");
+	}
+
+	return lines.join("\n").trimEnd();
+}
+
+export function CopyMarkdownButton({
+	description,
+	changes,
+}: {
+	description?: string;
+	changes: Change[];
+}) {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		const markdown = buildMarkdown({ description, changes });
+		await navigator.clipboard.writeText(markdown);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<Button
+			size="sm"
+			variant="text"
+			onClick={handleCopy}
+			className={cn("flex items-center gap-1.5", copied && "pointer-events-none")}
+			title="Copy as markdown"
+		>
+			{copied ? (
+				<CheckIcon className="size-4" />
+			) : (
+				<ClipboardIcon className="size-4" />
+			)}
+			{copied ? "Copied!" : "Copy markdown"}
+		</Button>
+	);
+}

apps/web/src/app/changelog/components/release.tsx

@@ -1,153 +1,106 @@
-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";
-
-export function ReleaseArticle({
-	variant,
-	isLatest,
-	children,
-}: {
-	variant: "list" | "detail";
-	isLatest?: boolean;
-	children: ReactNode;
-}) {
-	if (variant === "list") {
-		return (
-			<article className="relative sm:pl-10">
-				<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
-					<div
-						className={cn(
-							"size-[11px] rounded-full border-[1.5px]",
-							isLatest
-								? "border-foreground bg-foreground"
-								: "border-muted-foreground/30 bg-background",
-						)}
-					/>
-				</div>
-				<div className="flex flex-col gap-5">{children}</div>
-			</article>
-		);
-	}
-
-	return <article className="flex flex-col gap-8">{children}</article>;
-}
-
-export function ReleaseMeta({ release }: { release: Release }) {
-	return (
-		<span className="text-sm font-medium tracking-widest text-muted-foreground">
-			{release.version} — {release.date}
-		</span>
-	);
-}
-
-const titleSizes: Record<"h1" | "h2", string> = {
-	h1: "text-4xl",
-	h2: "text-2xl",
-};
-
-export function ReleaseTitle({
-	as: As,
-	href,
-	children,
-}: {
-	as: "h1" | "h2";
-	href?: string;
-	children: ReactNode;
-}) {
-	return (
-		<As className={cn("font-bold tracking-tight", titleSizes[As])}>
-			{href ? (
-				<Link href={href} className="hover:underline underline-offset-4">
-					{children}
-				</Link>
-			) : (
-				children
-			)}
-		</As>
-	);
-}
-
-export function ReleaseDescription({ children }: { children: ReactNode }) {
-	return (
-		<p className="text-base text-foreground leading-relaxed max-w-xl">
-			{children}
-		</p>
-	);
-}
-
-export function ReleaseChanges({ release }: { release: Release }) {
-	const { grouped, orderedTypes } = groupAndOrderChanges({
-		changes: release.changes,
-	});
-
-	return (
-		<div className="flex flex-col gap-4">
-			{orderedTypes.map((type) => (
-				<ReleaseChangeSection key={type} type={type} changes={grouped[type]} />
-			))}
-		</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>
-	);
-}
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { cn } from "@/utils/ui";
+import { getSectionTitle, groupAndOrderChanges } from "../utils";
+import type { Release } from "../utils";
+
+export function ReleaseArticle({
+	variant,
+	isLatest,
+	children,
+}: {
+	variant: "list" | "detail";
+	isLatest?: boolean;
+	children: ReactNode;
+}) {
+	if (variant === "list") {
+		return (
+			<article className="relative sm:pl-10">
+				<div aria-hidden className="absolute left-0 top-[3px] hidden sm:block">
+					<div
+						className={cn(
+							"size-[11px] rounded-full border-[1.5px]",
+							isLatest
+								? "border-foreground bg-foreground"
+								: "border-muted-foreground/30 bg-background",
+						)}
+					/>
+				</div>
+				<div className="flex flex-col gap-5">{children}</div>
+			</article>
+		);
+	}
+
+	return <article className="flex flex-col gap-8">{children}</article>;
+}
+
+export function ReleaseMeta({ release }: { release: Release }) {
+	return (
+		<span className="text-sm font-medium tracking-widest text-muted-foreground">
+			{release.version} — {release.date}
+		</span>
+	);
+}
+
+const titleSizes: Record<"h1" | "h2", string> = {
+	h1: "text-4xl",
+	h2: "text-2xl",
+};
+
+export function ReleaseTitle({
+	as: As,
+	href,
+	children,
+}: {
+	as: "h1" | "h2";
+	href?: string;
+	children: ReactNode;
+}) {
+	return (
+		<As className={cn("font-bold tracking-tight", titleSizes[As])}>
+			{href ? (
+				<Link href={href} className="hover:underline underline-offset-4">
+					{children}
+				</Link>
+			) : (
+				children
+			)}
+		</As>
+	);
+}
+
+export function ReleaseDescription({ children }: { children: ReactNode }) {
+	return (
+		<p className="text-base text-foreground leading-relaxed max-w-xl">
+			{children}
+		</p>
+	);
+}
+
+export function ReleaseChanges({ release }: { release: Release }) {
+	const { grouped, orderedTypes } = groupAndOrderChanges({
+		changes: release.changes,
+	});
+
+	return (
+		<div className="flex flex-col gap-4">
+			{orderedTypes.map((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>
+	);
+}

apps/web/src/app/changelog/page.tsx

@@ -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",

apps/web/src/app/changelog/utils.ts

@@ -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 }),
+	);
+}

apps/web/src/app/contributors/page.tsx

@@ -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 = {

apps/web/src/app/editor/[project_id]/page.tsx

@@ -1,200 +1,113 @@
-"use client";
-
-import { useParams } from "next/navigation";
-import {
-	ResizablePanelGroup,
-	ResizablePanel,
-	ResizableHandle,
-} 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 { 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 { 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();
-	const projectId = params.project_id as string;
-
-	return (
-		<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("mainContent", sizes[0] ?? panels.mainContent);
-				setPanel("timeline", sizes[1] ?? panels.timeline);
-			}}
-		>
-			<ResizablePanel
-				defaultSize={panels.mainContent}
-				minSize={30}
-				maxSize={85}
-				className="min-h-0"
-			>
-				<ResizablePanelGroup
-					direction="horizontal"
-					className="size-full gap-[0.19rem] px-3"
-					onLayout={(sizes) => {
-						setPanel("tools", sizes[0] ?? panels.tools);
-						setPanel("preview", sizes[1] ?? panels.preview);
-						setPanel("properties", sizes[2] ?? panels.properties);
-					}}
-				>
-					<ResizablePanel
-						defaultSize={panels.tools}
-						minSize={15}
-						maxSize={40}
-						className="min-w-0"
-					>
-						<AssetsPanel />
-					</ResizablePanel>
-
-					<ResizableHandle withHandle />
-
-					<ResizablePanel
-						defaultSize={panels.preview}
-						minSize={30}
-						className="min-h-0 min-w-0 flex-1"
-					>
-						<PreviewPanel
-							overlayControls={overlayControls}
-							overlayInstances={overlaySource.instances}
-							onOverlayVisibilityChange={setOverlayVisibility}
-						/>
-					</ResizablePanel>
-
-					<ResizableHandle withHandle />
-
-					<ResizablePanel
-						defaultSize={panels.properties}
-						minSize={15}
-						maxSize={40}
-						className="min-w-0"
-					>
-						<PropertiesPanel />
-					</ResizablePanel>
-				</ResizablePanelGroup>
-			</ResizablePanel>
-
-			<ResizableHandle withHandle />
-
-			<ResizablePanel
-				defaultSize={panels.timeline}
-				minSize={15}
-				maxSize={70}
-				className="min-h-0 px-3 pb-3"
-			>
-				<Timeline />
-			</ResizablePanel>
-		</ResizablePanelGroup>
-	);
-}
+"use client";
+
+import { useParams } from "next/navigation";
+import {
+	ResizablePanelGroup,
+	ResizablePanel,
+	ResizableHandle,
+} from "@/components/ui/resizable";
+import { AssetsPanel } from "@/components/editor/panels/assets";
+import { PropertiesPanel } from "@/components/editor/panels/properties";
+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 "@/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";
+
+export default function Editor() {
+	const params = useParams();
+	const projectId = params.project_id as string;
+
+	return (
+		<MobileGate>
+			<EditorProvider projectId={projectId}>
+				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
+					<EditorHeader />
+					<div className="min-h-0 min-w-0 flex-1">
+						<EditorLayout />
+					</div>
+					<Onboarding />
+					<MigrationDialog />
+				</div>
+			</EditorProvider>
+		</MobileGate>
+	);
+}
+
+function EditorLayout() {
+	usePasteMedia();
+	const { panels, setPanel } = usePanelStore();
+
+	return (
+		<ResizablePanelGroup
+			direction="vertical"
+			className="size-full gap-[0.18rem]"
+			onLayout={(sizes) => {
+				setPanel("mainContent", sizes[0] ?? panels.mainContent);
+				setPanel("timeline", sizes[1] ?? panels.timeline);
+			}}
+		>
+			<ResizablePanel
+				defaultSize={panels.mainContent}
+				minSize={30}
+				maxSize={85}
+				className="min-h-0"
+			>
+				<ResizablePanelGroup
+					direction="horizontal"
+					className="size-full gap-[0.19rem] px-3"
+					onLayout={(sizes) => {
+						setPanel("tools", sizes[0] ?? panels.tools);
+						setPanel("preview", sizes[1] ?? panels.preview);
+						setPanel("properties", sizes[2] ?? panels.properties);
+					}}
+				>
+					<ResizablePanel
+						defaultSize={panels.tools}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0"
+					>
+						<AssetsPanel />
+					</ResizablePanel>
+
+					<ResizableHandle withHandle />
+
+					<ResizablePanel
+						defaultSize={panels.preview}
+						minSize={30}
+						className="min-h-0 min-w-0 flex-1"
+					>
+						<PreviewPanel />
+					</ResizablePanel>
+
+					<ResizableHandle withHandle />
+
+					<ResizablePanel
+						defaultSize={panels.properties}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0"
+					>
+						<PropertiesPanel />
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</ResizablePanel>
+
+			<ResizableHandle withHandle />
+
+			<ResizablePanel
+				defaultSize={panels.timeline}
+				minSize={15}
+				maxSize={70}
+				className="min-h-0 px-3 pb-3"
+			>
+				<Timeline />
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
+}

apps/web/src/app/globals.css

@@ -1,291 +1,284 @@
-@import "tailwindcss";
-
-/* Custom variant for dark mode */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Plugins */
-@plugin "@tailwindcss/typography";
-@plugin "tailwindcss-animate";
-
-:root {
-  --background: hsl(0, 0%, 100%);
-  --foreground: hsl(0 0% 11%);
-  --card: hsl(0, 0%, 100%);
-  --card-foreground: hsl(0 0% 11%);
-  --popover: hsl(0, 0%, 100%);
-  --popover-hover: hsl(0, 0%, 96%);
-  --popover-foreground: hsl(0 0% 2%);
-  --primary: hsl(200, 90%, 52%);
-  --primary-foreground: hsl(0, 0%, 100%);
-  --secondary: hsl(204, 100%, 97%);
-  --secondary-border: hsl(204, 100%, 94%);
-  --secondary-foreground: hsl(200, 98%, 39%);
-  --muted: hsl(0 0% 85.1%);
-  --muted-foreground: hsl(0 0% 50%);
-  --accent: hsl(0, 0%, 96%);
-  --accent-foreground: hsl(0 0% 2%);
-  --destructive: hsl(0, 83%, 50%);
-  --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%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-  --sidebar-background: hsl(0 0% 96.1%);
-  --sidebar-foreground: hsl(0 0% 2%);
-  --sidebar-primary: hsl(0 0% 2%);
-  --sidebar-primary-foreground: hsl(0 0% 91%);
-  --sidebar-accent: hsl(0 0% 85.1%);
-  --sidebar-accent-foreground: hsl(0 0% 2%);
-  --sidebar-border: hsl(0 0% 85.1%);
-  --sidebar-ring: hsl(0 0% 16.9%);
-  --sidebar: hsl(0 0% 98%);
-}
-
-.panel {
-  --background: hsl(210, 20%, 98%);
-  --foreground: hsl(0 0% 13%);
-  --card: hsl(0, 0%, 98%);
-  --card-foreground: hsl(0 0% 13%);
-  --primary-foreground: hsl(0, 0%, 98%);
-  --secondary: hsl(204, 100%, 95%);
-  --secondary-border: hsl(204, 100%, 92%);
-  --secondary-foreground: hsl(200, 98%, 37%);
-  --muted: hsl(0 0% 83.1%);
-  --muted-foreground: hsl(0 0% 48%);
-  --accent: hsl(0, 0%, 93%);
-  --accent-foreground: hsl(0 0% 5%);
-  --destructive-foreground: hsl(0, 0%, 98%);
-  --constructive-foreground: hsl(0, 0%, 98%);
-  --border: hsl(0 0% 87%);
-  --input: hsl(0 0% 93%);
-  --ring: hsl(0, 0%, 53%);
-}
-
-.dark {
-  --background: hsl(0, 0%, 5%);
-  --foreground: hsl(0 0% 87%);
-  --card: hsl(0, 0%, 5%);
-  --card-foreground: hsl(0 0% 87%);
-  --popover: hsl(0, 0%, 5%);
-  --popover-hover: hsl(0, 0%, 13%);
-  --popover-foreground: hsl(0 0% 95%);
-  --secondary: hsl(204, 100%, 12%);
-  --secondary-border: hsl(204, 100%, 15%);
-  --secondary-foreground: hsl(200, 98%, 61%);
-  --muted: hsl(0 0% 20%);
-  --accent: hsl(0, 0%, 14%);
-  --accent-foreground: hsl(0 0% 95%);
-  --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%);
-  --sidebar-primary-foreground: hsl(0 0% 15%);
-  --sidebar-accent: hsl(0 0% 20%);
-  --sidebar-accent-foreground: hsl(0 0% 95%);
-  --sidebar-border: hsl(0 0% 20%);
-  --sidebar-ring: hsl(0 0% 83.1%);
-  --sidebar: hsl(0 0% 6%);
-}
-
-.dark .panel {
-  --background: hsl(0 0% 10%);
-  --foreground: hsl(0 0% 85%);
-  --card: hsl(0, 0%, 10%);
-  --card-foreground: hsl(0 0% 85%);
-  --secondary: hsl(204, 67%, 9%);
-  --secondary-border: hsl(204, 100%, 14%);
-  --secondary-foreground: hsl(200, 98%, 63%);
-  --muted: hsl(0 0% 22%);
-  --accent: hsl(0, 0%, 15%);
-  --accent-foreground: hsl(0 0% 93%);
-  --border: hsl(0 0% 18%);
-  --input: hsl(0 0% 22%);
-  --ring: hsl(0, 0%, 52%);
-}
-
-@layer base {
-  /*
-    The default border color has changed to `currentcolor` in Tailwind CSS v4,
-    so we've added these compatibility styles to make sure everything still
-    looks the same as it did with Tailwind CSS v3.
-
-    If we ever want to remove these styles, we need to add an explicit border
-    color utility to any element that depends on these defaults.
-  */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-  /* Other default base styles */
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    /* Prevent back/forward swipe */
-    overscroll-behavior-x: contain;
-  }
-  ::selection {
-    @apply bg-primary/35 selection:text-primary-foreground;
-  }
-}
-
-@theme inline {
-  /* Responsive breakpoints */
-  --breakpoint-xs: 30rem;
-
-  /* Typography */
-  --font-sans: var(--font-inter), sans-serif;
-
-  /* Font sizes */
-  --text-xs: 0.72rem;
-  --text-sm: 0.79rem;
-  --text-base: 0.92rem;
-  --text-base--line-height: calc(1.5 / 0.95);
-  --text-xs--line-height: calc(1 / 0.8);
-
-  /* Border radius */
-  --radius-lg: 0.82rem;
-  --radius-md: 0.65rem;
-  --radius-sm: 0.35rem;
-
-  /* Palette mapped to root design tokens */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-hover: var(--popover-hover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-border: var(--secondary-border);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --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);
-
-  /* Chart colors */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* Sidebar */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@utility scrollbar-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility scrollbar-x-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:horizontal {
-    display: none;
-  }
-}
-
-@utility scrollbar-y-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:vertical {
-    display: none;
-  }
-}
-
-@utility scrollbar-thin {
-  &::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--muted-foreground);
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "tailwindcss";
+
+/* Custom variant for dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Plugins */
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+:root {
+  --background: hsl(0, 0%, 100%);
+  --foreground: hsl(0 0% 11%);
+  --card: hsl(0, 0%, 100%);
+  --card-foreground: hsl(0 0% 11%);
+  --popover: hsl(0, 0%, 100%);
+  --popover-hover: hsl(0, 0%, 96%);
+  --popover-foreground: hsl(0 0% 2%);
+  --primary: hsl(200, 90%, 52%);
+  --primary-foreground: hsl(0, 0%, 100%);
+  --secondary: hsl(204, 100%, 97%);
+  --secondary-border: hsl(204, 100%, 94%);
+  --secondary-foreground: hsl(200, 98%, 39%);
+  --muted: hsl(0 0% 85.1%);
+  --muted-foreground: hsl(0 0% 50%);
+  --accent: hsl(0, 0%, 96%);
+  --accent-foreground: hsl(0 0% 2%);
+  --destructive: hsl(0, 83%, 50%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --constructive: hsl(141, 71%, 48%);
+  --constructive-foreground: hsl(0, 0%, 100%);
+  --border: hsl(0 0% 91%);
+  --input: hsl(0, 0%, 100%);
+  --ring: hsl(0, 0%, 55%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(0 0% 96.1%);
+  --sidebar-foreground: hsl(0 0% 2%);
+  --sidebar-primary: hsl(0 0% 2%);
+  --sidebar-primary-foreground: hsl(0 0% 91%);
+  --sidebar-accent: hsl(0 0% 85.1%);
+  --sidebar-accent-foreground: hsl(0 0% 2%);
+  --sidebar-border: hsl(0 0% 85.1%);
+  --sidebar-ring: hsl(0 0% 16.9%);
+  --sidebar: hsl(0 0% 98%);
+}
+
+.panel {
+  --background: hsl(210, 20%, 98%);
+  --foreground: hsl(0 0% 13%);
+  --card: hsl(0, 0%, 98%);
+  --card-foreground: hsl(0 0% 13%);
+  --primary-foreground: hsl(0, 0%, 98%);
+  --secondary: hsl(204, 100%, 95%);
+  --secondary-border: hsl(204, 100%, 92%);
+  --secondary-foreground: hsl(200, 98%, 37%);
+  --muted: hsl(0 0% 83.1%);
+  --muted-foreground: hsl(0 0% 48%);
+  --accent: hsl(0, 0%, 93%);
+  --accent-foreground: hsl(0 0% 5%);
+  --destructive-foreground: hsl(0, 0%, 98%);
+  --constructive-foreground: hsl(0, 0%, 98%);
+  --border: hsl(0 0% 87%);
+  --input: hsl(0 0% 93%);
+  --ring: hsl(0, 0%, 53%);
+}
+
+.dark {
+  --background: hsl(0, 0%, 5%);
+  --foreground: hsl(0 0% 87%);
+  --card: hsl(0, 0%, 5%);
+  --card-foreground: hsl(0 0% 87%);
+  --popover: hsl(0, 0%, 5%);
+  --popover-hover: hsl(0, 0%, 13%);
+  --popover-foreground: hsl(0 0% 95%);
+  --secondary: hsl(204, 100%, 12%);
+  --secondary-border: hsl(204, 100%, 15%);
+  --secondary-foreground: hsl(200, 98%, 61%);
+  --muted: hsl(0 0% 20%);
+  --accent: hsl(0, 0%, 14%);
+  --accent-foreground: hsl(0 0% 95%);
+  --border: hsl(0 0% 16%);
+  --input: hsl(0 0% 5%);
+  --ring: hsl(0, 0%, 50%);
+  --sidebar-background: hsl(0 0% 8%);
+  --sidebar-foreground: hsl(0 0% 95%);
+  --sidebar-primary: hsl(0 0% 95%);
+  --sidebar-primary-foreground: hsl(0 0% 15%);
+  --sidebar-accent: hsl(0 0% 20%);
+  --sidebar-accent-foreground: hsl(0 0% 95%);
+  --sidebar-border: hsl(0 0% 20%);
+  --sidebar-ring: hsl(0 0% 83.1%);
+  --sidebar: hsl(0 0% 6%);
+}
+
+.dark .panel {
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 85%);
+  --card: hsl(0, 0%, 10%);
+  --card-foreground: hsl(0 0% 85%);
+  --secondary: hsl(204, 67%, 9%);
+  --secondary-border: hsl(204, 100%, 14%);
+  --secondary-foreground: hsl(200, 98%, 63%);
+  --muted: hsl(0 0% 22%);
+  --accent: hsl(0, 0%, 15%);
+  --accent-foreground: hsl(0 0% 93%);
+  --border: hsl(0 0% 18%);
+  --input: hsl(0 0% 22%);
+  --ring: hsl(0, 0%, 52%);
+}
+
+@layer base {
+  /*
+    The default border color has changed to `currentcolor` in Tailwind CSS v4,
+    so we've added these compatibility styles to make sure everything still
+    looks the same as it did with Tailwind CSS v3.
+
+    If we ever want to remove these styles, we need to add an explicit border
+    color utility to any element that depends on these defaults.
+  */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+  /* Other default base styles */
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* Prevent back/forward swipe */
+    overscroll-behavior-x: contain;
+  }
+  ::selection {
+    @apply bg-primary/35 selection:text-primary-foreground;
+  }
+}
+
+@theme inline {
+  /* Responsive breakpoints */
+  --breakpoint-xs: 30rem;
+
+  /* Typography */
+  --font-sans: var(--font-inter), sans-serif;
+
+  /* Font sizes */
+  --text-xs: 0.72rem;
+  --text-sm: 0.79rem;
+  --text-base: 0.92rem;
+  --text-base--line-height: calc(1.5 / 0.95);
+  --text-xs--line-height: calc(1 / 0.8);
+
+  /* Border radius */
+  --radius-lg: 0.82rem;
+  --radius-md: 0.65rem;
+  --radius-sm: 0.35rem;
+
+  /* Palette mapped to root design tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-hover: var(--popover-hover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-border: var(--secondary-border);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-constructive: var(--constructive);
+  --color-constructive-foreground: var(--constructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-x-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:horizontal {
+    display: none;
+  }
+}
+
+@utility scrollbar-y-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:vertical {
+    display: none;
+  }
+}
+
+@utility scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/web/src/app/layout.tsx

@@ -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>

apps/web/src/app/metadata.ts

@@ -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),

apps/web/src/app/page.tsx

@@ -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: {

apps/web/src/app/privacy/page.tsx

@@ -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",

apps/web/src/app/projects/store.ts

@@ -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";
 

apps/web/src/app/robots.ts

@@ -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 {

apps/web/src/app/rss.xml/route.ts

@@ -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 {

apps/web/src/app/sitemap.ts

@@ -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> {

apps/web/src/app/sponsors/page.tsx

@@ -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";

apps/web/src/app/terms/page.tsx

@@ -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",

apps/web/src/background/blur.ts

@@ -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;

apps/web/src/background/color.ts

@@ -1 +0,0 @@
-export const DEFAULT_BACKGROUND_COLOR = "#000000";

apps/web/src/canvas/sizes.ts

@@ -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 };

apps/web/src/changelog/components/changelog-notification.tsx

@@ -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>
-	);
-}

apps/web/src/changelog/entries/0.4.0.md

@@ -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."

apps/web/src/changelog/utils.ts

@@ -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);
-}

apps/web/src/clipboard/handlers/elements.ts

@@ -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">;

apps/web/src/clipboard/handlers/index.ts

@@ -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 as never, context);
-}

apps/web/src/clipboard/handlers/keyframes.ts

@@ -1,172 +0,0 @@
-import { getKeyframeById } from "@/animation";
-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 binding = element.animations?.bindings[propertyPath];
-	if (!binding) {
-		return [];
-	}
-
-	return binding.components.flatMap((component) => {
-		const channel = element.animations?.channels[component.channelId];
-		if (channel?.kind !== "scalar") {
-			return [];
-		}
-
-		const keyframe = channel.keys.find(
-			(candidate) => candidate.id === keyframeId,
-		);
-		if (!keyframe) {
-			return [];
-		}
-
-		return [
-			{
-				componentKey: component.key,
-				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, { 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">;

apps/web/src/clipboard/index.ts

@@ -1,2 +0,0 @@
-export * from "./types";
-export * from "./handlers";

apps/web/src/clipboard/types.ts

@@ -1,80 +0,0 @@
-import type { EditorCore } from "@/core";
-import type {
-	AnimationInterpolation,
-	AnimationPath,
-	AnimationValue,
-	ScalarCurveKeyframePatch,
-	SelectedKeyframeRef,
-} from "@/animation/types";
-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: AnimationValue;
-	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(
-		entry: ClipboardEntryByType[TType],
-		context: PasteContext,
-	): Command | null;
-}
-
-export type ClipboardHandlerMap = {
-	[TType in ClipboardEntryType]: ClipboardHandler<TType>;
-};

apps/web/src/commands/base-command.ts

@@ -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();
-	}
-}

apps/web/src/commands/batch-command.ts

@@ -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;
-	}
-}

apps/web/src/commands/timeline/clipboard/index.ts

@@ -1,2 +0,0 @@
-export { PasteCommand } from "./paste";
-export { PasteKeyframesCommand } from "./paste-keyframes";

apps/web/src/commands/timeline/clipboard/paste-keyframes.ts

@@ -1,145 +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(),
-			kind: target.kind,
-			defaultInterpolation: target.defaultInterpolation,
-			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);
-	}
-}

apps/web/src/commands/timeline/clipboard/paste.ts

@@ -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;
-}

apps/web/src/commands/timeline/element/delete-elements.ts

@@ -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);
-		}
-	}
-}

apps/web/src/commands/timeline/element/index.ts

@@ -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";

apps/web/src/commands/timeline/element/insert-element.ts

@@ -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.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,
-		};
-	}
-}

apps/web/src/commands/timeline/element/keyframes/remove-keyframe.ts

@@ -1,107 +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, AnimationValue } from "@/animation/types";
-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: AnimationValue | 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: AnimationValue | null;
-
-	constructor({
-		trackId,
-		elementId,
-		propertyPath,
-		keyframeId,
-		valueAtPlayhead,
-	}: {
-		trackId: string;
-		elementId: string;
-		propertyPath: AnimationPath;
-		keyframeId: string;
-		valueAtPlayhead: AnimationValue | 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);
-	}
-}

apps/web/src/commands/timeline/element/keyframes/update-scalar-keyframe-curve.ts

@@ -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);
-	}
-}

apps/web/src/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts

@@ -1,113 +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,
-					kind: target.kind,
-					defaultInterpolation: target.defaultInterpolation,
-					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);
-	}
-}

apps/web/src/commands/timeline/element/masks/delete-custom-mask-points.ts

@@ -1,131 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import {
-	getCustomMaskClosedStateAfterPointRemoval,
-	removeCustomMaskPoints,
-} from "@/masks/custom-path";
-import type { CustomMask } from "@/masks/types";
-import { isMaskableElement, updateElementInSceneTracks } from "@/timeline";
-import type { MaskableElement, SceneTracks } from "@/timeline";
-
-function deletePointsFromCustomMask({
-	mask,
-	pointIds,
-}: {
-	mask: CustomMask;
-	pointIds: string[];
-}): CustomMask {
-	const points = mask.params.path;
-	const nextPoints = removeCustomMaskPoints({ points, pointIds });
-	if (nextPoints.length === points.length) {
-		return mask;
-	}
-
-	return {
-		...mask,
-		params: {
-			...mask.params,
-			path: nextPoints,
-			closed: getCustomMaskClosedStateAfterPointRemoval({
-				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 !== "custom") {
-			return mask;
-		}
-
-		const nextMask = deletePointsFromCustomMask({
-			mask,
-			pointIds,
-		});
-		didDeletePoints ||= nextMask !== mask;
-		return nextMask;
-	});
-
-	return {
-		element: didDeletePoints ? { ...element, masks: nextMasks } : element,
-		didDeletePoints,
-	};
-}
-
-export class DeleteCustomMaskPointsCommand 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) => {
-				const result = deletePointsFromElementMask({
-					element: element as MaskableElement,
-					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);
-		}
-	}
-}

apps/web/src/commands/timeline/element/masks/index.ts

@@ -1,4 +0,0 @@
-export { DeleteCustomMaskPointsCommand } from "./delete-custom-mask-points";
-export { InsertCustomMaskPointCommand } from "./insert-custom-mask-point";
-export { RemoveMaskCommand } from "./remove-mask";
-export { ToggleMaskInvertedCommand } from "./toggle-mask-inverted";

apps/web/src/commands/timeline/element/masks/insert-custom-mask-point.ts

@@ -1,169 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import { insertPointOnCustomMaskSegment } from "@/masks/definitions/custom";
-import type { ElementBounds } from "@/preview/element-bounds";
-import type { CustomMask } from "@/masks/types";
-import { isMaskableElement, updateElementInSceneTracks } from "@/timeline";
-import type { MaskableElement, SceneTracks } from "@/timeline";
-
-function insertPointIntoCustomMask({
-	mask,
-	segmentIndex,
-	canvasPoint,
-	bounds,
-}: {
-	mask: CustomMask;
-	segmentIndex: number;
-	canvasPoint: { x: number; y: number };
-	bounds: ElementBounds;
-}): { mask: CustomMask; insertedPointId: string | null } {
-	const result = insertPointOnCustomMaskSegment({
-		params: mask.params,
-		segmentIndex,
-		canvasPoint,
-		bounds,
-	});
-	if (!result) {
-		return {
-			mask,
-			insertedPointId: null,
-		};
-	}
-
-	return {
-		mask: {
-			...mask,
-			params: result.params,
-		},
-		insertedPointId: result.pointId,
-	};
-}
-
-function insertPointIntoElementMask({
-	element,
-	maskId,
-	segmentIndex,
-	canvasPoint,
-	bounds,
-}: {
-	element: MaskableElement;
-	maskId: string;
-	segmentIndex: number;
-	canvasPoint: { x: number; y: number };
-	bounds: ElementBounds;
-}): {
-	element: MaskableElement;
-	didInsertPoint: boolean;
-	insertedPointId: string | null;
-} {
-	const currentMasks = element.masks ?? [];
-	let insertedPointId: string | null = null;
-	let didInsertPoint = false;
-
-	const nextMasks = currentMasks.map((mask) => {
-		if (mask.id !== maskId || mask.type !== "custom") {
-			return mask;
-		}
-
-		const result = insertPointIntoCustomMask({
-			mask,
-			segmentIndex,
-			canvasPoint,
-			bounds,
-		});
-		if (result.insertedPointId) {
-			insertedPointId = result.insertedPointId;
-			didInsertPoint = true;
-		}
-		return result.mask;
-	});
-
-	return {
-		element: didInsertPoint ? { ...element, masks: nextMasks } : element,
-		didInsertPoint,
-		insertedPointId,
-	};
-}
-
-export class InsertCustomMaskPointCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly trackId: string;
-	private readonly elementId: string;
-	private readonly maskId: string;
-	private readonly segmentIndex: number;
-	private readonly canvasPoint: { x: number; y: number };
-	private readonly bounds: ElementBounds;
-
-	constructor({
-		trackId,
-		elementId,
-		maskId,
-		segmentIndex,
-		canvasPoint,
-		bounds,
-	}: {
-		trackId: string;
-		elementId: string;
-		maskId: string;
-		segmentIndex: number;
-		canvasPoint: { x: number; y: number };
-		bounds: ElementBounds;
-	}) {
-		super();
-		this.trackId = trackId;
-		this.elementId = elementId;
-		this.maskId = maskId;
-		this.segmentIndex = segmentIndex;
-		this.canvasPoint = canvasPoint;
-		this.bounds = bounds;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		let didInsertPoint = false;
-		let insertedPointId: string | null = null;
-		const updatedTracks = updateElementInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			elementId: this.elementId,
-			elementPredicate: isMaskableElement,
-			update: (element) => {
-				const result = insertPointIntoElementMask({
-					element: element as MaskableElement,
-					maskId: this.maskId,
-					segmentIndex: this.segmentIndex,
-					canvasPoint: this.canvasPoint,
-					bounds: this.bounds,
-				});
-				didInsertPoint ||= result.didInsertPoint;
-				insertedPointId ??= result.insertedPointId;
-				return result.element;
-			},
-		});
-
-		if (!didInsertPoint || !insertedPointId) {
-			return undefined;
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-		return {
-			selection: {
-				selectedMaskPoints: {
-					trackId: this.trackId,
-					elementId: this.elementId,
-					maskId: this.maskId,
-					pointIds: [insertedPointId],
-				},
-			},
-		};
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}

apps/web/src/commands/timeline/element/move-elements.ts

@@ -1,183 +0,0 @@
-import {
-	Command,
-	createElementSelectionResult,
-	type CommandResult,
-} from "@/commands/base-command";
-import { EditorCore } from "@/core";
-import type { SceneTracks, TimelineElement, TimelineTrack } from "@/timeline";
-import {
-	buildEmptyTrack,
-	validateElementTrackCompatibility,
-} from "@/timeline/placement";
-import type {
-	PlannedElementMove,
-	PlannedTrackCreation,
-} from "@/timeline/group-move";
-import { findTrackInSceneTracks } from "@/timeline/track-element-update";
-
-export class MoveElementCommand extends Command {
-	private savedState: SceneTracks | null = null;
-
-	constructor({
-		moves,
-		createTracks = [],
-	}: {
-		moves: PlannedElementMove[];
-		createTracks?: PlannedTrackCreation[];
-	}) {
-		super();
-		this.moves = moves;
-		this.createTracks = createTracks;
-	}
-
-	private readonly moves: PlannedElementMove[];
-	private readonly createTracks: PlannedTrackCreation[];
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		let tracksToUpdate = this.savedState;
-		for (const createTrack of [...this.createTracks].sort(
-			(firstTrack, secondTrack) => firstTrack.index - secondTrack.index,
-		)) {
-			tracksToUpdate = insertTrackAtDisplayIndex({
-				tracks: tracksToUpdate,
-				track: buildEmptyTrack({
-					id: createTrack.id,
-					type: createTrack.type,
-				}),
-				insertIndex: createTrack.index,
-			});
-		}
-
-		const movedElementsById = new Map<string, TimelineElement>();
-		for (const move of this.moves) {
-			const sourceTrack = findTrackInSceneTracks({
-				tracks: this.savedState,
-				trackId: move.sourceTrackId,
-			});
-			const sourceElement = sourceTrack?.elements.find(
-				(trackElement) => trackElement.id === move.elementId,
-			);
-			if (!sourceTrack || !sourceElement) {
-				throw new Error("Source track or element not found");
-			}
-
-			const targetTrack = findTrackInSceneTracks({
-				tracks: tracksToUpdate,
-				trackId: move.targetTrackId,
-			});
-			if (!targetTrack) {
-				throw new Error("Target track not found");
-			}
-
-			const validation = validateElementTrackCompatibility({
-				element: sourceElement,
-				track: targetTrack,
-			});
-			if (!validation.isValid) {
-				throw new Error(validation.errorMessage);
-			}
-
-			movedElementsById.set(move.elementId, {
-				...sourceElement,
-				startTime: move.newStartTime,
-			});
-		}
-
-		const movedElementIds = new Set(this.moves.map((move) => move.elementId));
-		const movedElementsByTargetTrackId = new Map<string, TimelineElement[]>();
-		for (const move of this.moves) {
-			const movedElement = movedElementsById.get(move.elementId);
-			if (!movedElement) {
-				continue;
-			}
-
-			const nextTargetElements =
-				movedElementsByTargetTrackId.get(move.targetTrackId) ?? [];
-			nextTargetElements.push(movedElement);
-			movedElementsByTargetTrackId.set(move.targetTrackId, nextTargetElements);
-		}
-
-		const updatedTracks = mapSceneTracks({
-			tracks: tracksToUpdate,
-			update: (track) => ({
-				...track,
-				elements: [
-					...track.elements.filter(
-						(element) => !movedElementIds.has(element.id),
-					),
-					...(movedElementsByTargetTrackId.get(track.id) ?? []),
-				],
-			}),
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return createElementSelectionResult(
-			this.moves.map(({ elementId, targetTrackId }) => ({
-				trackId: targetTrackId,
-				elementId,
-			})),
-		);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
-
-function mapSceneTracks({
-	tracks,
-	update,
-}: {
-	tracks: SceneTracks;
-	update: <TTrack extends TimelineTrack>(track: TTrack) => TTrack;
-}): SceneTracks {
-	return {
-		overlay: tracks.overlay.map((track) => update(track)),
-		main: update(tracks.main),
-		audio: tracks.audio.map((track) => update(track)),
-	};
-}
-
-function insertTrackAtDisplayIndex({
-	tracks,
-	track,
-	insertIndex,
-}: {
-	tracks: SceneTracks;
-	track: TimelineTrack;
-	insertIndex: number;
-}): SceneTracks {
-	if (track.type === "audio") {
-		const audioInsertIndex = Math.max(
-			0,
-			Math.min(insertIndex - tracks.overlay.length - 1, tracks.audio.length),
-		);
-		return {
-			...tracks,
-			audio: [
-				...tracks.audio.slice(0, audioInsertIndex),
-				track,
-				...tracks.audio.slice(audioInsertIndex),
-			],
-		};
-	}
-
-	const overlayInsertIndex = Math.max(
-		0,
-		Math.min(insertIndex, tracks.overlay.length),
-	);
-	return {
-		...tracks,
-		overlay: [
-			...tracks.overlay.slice(0, overlayInsertIndex),
-			track,
-			...tracks.overlay.slice(overlayInsertIndex),
-		],
-	};
-}

apps/web/src/commands/timeline/element/split-elements.ts

@@ -1,214 +0,0 @@
-import {
-	Command,
-	createElementSelectionResult,
-	type CommandResult,
-} from "@/commands/base-command";
-import type { SceneTracks, TimelineElement } from "@/timeline";
-import { generateUUID } from "@/utils/id";
-import { EditorCore } from "@/core";
-import { isRetimableElement } from "@/timeline";
-import { splitAnimationsAtTime } from "@/animation";
-import { getSourceSpanAtClipTime } from "@/retime";
-import {
-	addMediaTime,
-	type MediaTime,
-	roundMediaTime,
-	subMediaTime,
-} from "@/wasm";
-
-export class SplitElementsCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private rightSideElements: { trackId: string; elementId: string }[] = [];
-	private readonly elements: { trackId: string; elementId: string }[];
-	private readonly splitTime: MediaTime;
-	private readonly retainSide: "both" | "left" | "right";
-
-	constructor({
-		elements,
-		splitTime,
-		retainSide = "both",
-	}: {
-		elements: { trackId: string; elementId: string }[];
-		splitTime: MediaTime;
-		retainSide?: "both" | "left" | "right";
-	}) {
-		super();
-		this.elements = elements;
-		this.splitTime = splitTime;
-		this.retainSide = retainSide;
-	}
-
-	getRightSideElements(): { trackId: string; elementId: string }[] {
-		return this.rightSideElements;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-		this.rightSideElements = [];
-
-		const splitTrack = <
-			TTrack extends { id: string; elements: TimelineElement[] },
-		>(
-			track: TTrack,
-		): TTrack => {
-			const elementsToSplit = this.elements.filter(
-				(target) => target.trackId === track.id,
-			);
-
-			if (elementsToSplit.length === 0) {
-				return track;
-			}
-
-			const elements = track.elements.flatMap((element) => {
-				const shouldSplit = elementsToSplit.some(
-					(target) => target.elementId === element.id,
-				);
-
-				if (!shouldSplit) {
-					return [element];
-				}
-
-				const effectiveStart = element.startTime;
-				const effectiveEnd = element.startTime + element.duration;
-
-				if (
-					this.splitTime <= effectiveStart ||
-					this.splitTime >= effectiveEnd
-				) {
-					return [element];
-				}
-
-				const relativeTime = subMediaTime({
-					a: this.splitTime,
-					b: element.startTime,
-				});
-				const leftVisibleDuration = relativeTime;
-				const rightVisibleDuration = subMediaTime({
-					a: element.duration,
-					b: relativeTime,
-				});
-				const retimeRef = isRetimableElement(element)
-					? element.retime
-					: undefined;
-				// Snap the source-side split point exactly once and derive the right
-				// half from it. Independently rounding both spans (left and total)
-				// would let a 1-tick rounding error desynchronise them, breaking the
-				// invariant `leftSourceSpan + rightSourceSpan == totalSourceSpan`.
-				// See the same discipline in `compute-resize.ts` (snap-once comment).
-				const leftSourceSpan = roundMediaTime({
-					time: getSourceSpanAtClipTime({
-						clipTime: leftVisibleDuration,
-						retime: retimeRef,
-					}),
-				});
-				const totalSourceSpan = roundMediaTime({
-					time: getSourceSpanAtClipTime({
-						clipTime: element.duration,
-						retime: retimeRef,
-					}),
-				});
-				const rightSourceSpan = subMediaTime({
-					a: totalSourceSpan,
-					b: leftSourceSpan,
-				});
-				const { leftAnimations, rightAnimations } = splitAnimationsAtTime({
-					animations: element.animations,
-					splitTime: relativeTime,
-					shouldIncludeSplitBoundary: true,
-				});
-				let splitResult: TimelineElement[];
-
-				const leftTrimEnd = addMediaTime({
-					a: element.trimEnd,
-					b: rightSourceSpan,
-				});
-				const rightTrimStart = addMediaTime({
-					a: element.trimStart,
-					b: leftSourceSpan,
-				});
-
-				if (this.retainSide === "left") {
-					splitResult = [
-						{
-							...element,
-							duration: leftVisibleDuration,
-							trimEnd: leftTrimEnd,
-							name: `${element.name} (left)`,
-							animations: leftAnimations,
-							...(retimeRef !== undefined ? { retime: retimeRef } : {}),
-						},
-					];
-				} else if (this.retainSide === "right") {
-					const newId = generateUUID();
-					this.rightSideElements.push({
-						trackId: track.id,
-						elementId: newId,
-					});
-					splitResult = [
-						{
-							...element,
-							id: newId,
-							startTime: this.splitTime,
-							duration: rightVisibleDuration,
-							trimStart: rightTrimStart,
-							name: `${element.name} (right)`,
-							animations: rightAnimations,
-							...(retimeRef !== undefined ? { retime: retimeRef } : {}),
-						},
-					];
-				} else {
-					const secondElementId = generateUUID();
-					this.rightSideElements.push({
-						trackId: track.id,
-						elementId: secondElementId,
-					});
-					splitResult = [
-						{
-							...element,
-							duration: leftVisibleDuration,
-							trimEnd: leftTrimEnd,
-							name: `${element.name} (left)`,
-							animations: leftAnimations,
-							...(retimeRef !== undefined ? { retime: retimeRef } : {}),
-						},
-						{
-							...element,
-							id: secondElementId,
-							startTime: this.splitTime,
-							duration: rightVisibleDuration,
-							trimStart: rightTrimStart,
-							name: `${element.name} (right)`,
-							animations: rightAnimations,
-							...(retimeRef !== undefined ? { retime: retimeRef } : {}),
-						},
-					];
-				}
-
-				return splitResult;
-			});
-
-			return { ...track, elements } as TTrack;
-		};
-
-		const updatedTracks: SceneTracks = {
-			overlay: this.savedState.overlay.map((track) => splitTrack(track)),
-			main: splitTrack(this.savedState.main),
-			audio: this.savedState.audio.map((track) => splitTrack(track)),
-		};
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		if (this.rightSideElements.length > 0) {
-			return createElementSelectionResult(this.rightSideElements);
-		}
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}

apps/web/src/commands/timeline/element/toggle-source-audio-separation.ts

@@ -1,145 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import {
-	buildSeparatedAudioElement,
-	canExtractSourceAudio,
-	isSourceAudioSeparated,
-} from "@/timeline/audio-separation";
-import {
-	applyPlacement,
-	resolveTrackPlacement,
-} from "@/timeline/placement";
-import { updateElementInSceneTracks } from "@/timeline/track-element-update";
-import type {
-	SceneTracks,
-	TimelineElement,
-	VideoElement,
-} from "@/timeline/types";
-import { generateUUID } from "@/utils/id";
-
-export class ToggleSourceAudioSeparationCommand extends Command {
-	private savedState: SceneTracks | null = null;
-
-	constructor(
-		private readonly params: {
-			trackId: string;
-			elementId: string;
-		},
-	) {
-		super();
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const sourceTrack = [
-			...this.savedState.overlay,
-			this.savedState.main,
-			...this.savedState.audio,
-		].find((track) => track.id === this.params.trackId);
-		if (!sourceTrack) {
-			return;
-		}
-		const sourceElement = sourceTrack.elements.find(
-			(element) => element.id === this.params.elementId,
-		) as TimelineElement | undefined;
-		if (!sourceElement || sourceElement.type !== "video") {
-			return;
-		}
-		const videoElement: VideoElement = sourceElement;
-
-		if (isSourceAudioSeparated({ element: videoElement })) {
-			editor.timeline.updateTracks(
-				updateSourceAudioEnabled({
-					tracks: this.savedState,
-					trackId: this.params.trackId,
-					elementId: this.params.elementId,
-					isSourceAudioEnabled: true,
-				}),
-			);
-			return;
-		}
-
-		const mediaAsset = editor.media
-			.getAssets()
-			.find((asset) => asset.id === videoElement.mediaId);
-		if (!canExtractSourceAudio(videoElement, mediaAsset)) {
-			return;
-		}
-		if (videoElement.duration <= 0) {
-			return;
-		}
-
-		const separatedAudioElement = {
-			...buildSeparatedAudioElement({
-				sourceElement: videoElement,
-			}),
-			id: generateUUID(),
-		};
-		const placementResult = resolveTrackPlacement({
-			tracks: this.savedState,
-			trackType: "audio",
-			timeSpans: [
-				{
-					startTime: separatedAudioElement.startTime,
-					duration: separatedAudioElement.duration,
-				},
-			],
-			strategy: { type: "firstAvailable" },
-		});
-		if (!placementResult) {
-			return;
-		}
-		const appliedPlacement = applyPlacement({
-			tracks: this.savedState,
-			placementResult,
-			elements: [separatedAudioElement],
-		});
-		if (!appliedPlacement) {
-			return;
-		}
-
-		editor.timeline.updateTracks(
-			updateSourceAudioEnabled({
-				tracks: appliedPlacement.updatedTracks,
-				trackId: this.params.trackId,
-				elementId: this.params.elementId,
-				isSourceAudioEnabled: false,
-			}),
-		);
-	}
-
-	undo(): void {
-		if (!this.savedState) {
-			return;
-		}
-
-		const editor = EditorCore.getInstance();
-		editor.timeline.updateTracks(this.savedState);
-	}
-}
-
-function updateSourceAudioEnabled({
-	tracks,
-	trackId,
-	elementId,
-	isSourceAudioEnabled,
-}: {
-	tracks: SceneTracks;
-	trackId: string;
-	elementId: string;
-	isSourceAudioEnabled: boolean;
-}): SceneTracks {
-	return updateElementInSceneTracks({
-		tracks,
-		trackId,
-		elementId,
-		elementPredicate: (element): element is VideoElement =>
-			element.type === "video",
-		update: (element) => ({
-			...element,
-			isSourceAudioEnabled,
-		}),
-	});
-}

apps/web/src/commands/timeline/element/update-elements.ts

@@ -1,75 +0,0 @@
-import { EditorCore } from "@/core";
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { SceneTracks, TimelineElement } from "@/timeline";
-import {
-	findTrackInSceneTracks,
-	updateElementInSceneTracks,
-} from "@/timeline";
-import { applyElementUpdate } from "@/timeline/update-pipeline";
-
-export class UpdateElementsCommand extends Command {
-	private savedState: SceneTracks | null = null;
-	private readonly updates: Array<{
-		trackId: string;
-		elementId: string;
-		patch: Partial<TimelineElement>;
-	}>;
-
-	constructor({
-		updates,
-	}: {
-		updates: Array<{
-			trackId: string;
-			elementId: string;
-			patch: Partial<TimelineElement>;
-		}>;
-	}) {
-		super();
-		this.updates = updates;
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-		let updatedTracks = this.savedState;
-
-		for (const updateEntry of this.updates) {
-			const currentTrack = findTrackInSceneTracks({
-				tracks: updatedTracks,
-				trackId: updateEntry.trackId,
-			});
-			const currentElement = currentTrack?.elements.find(
-				(element) => element.id === updateEntry.elementId,
-			);
-			if (!currentTrack || !currentElement) {
-				continue;
-			}
-
-			const nextElement = applyElementUpdate({
-				element: currentElement,
-				patch: updateEntry.patch,
-				context: {
-					tracks: updatedTracks,
-					trackId: updateEntry.trackId,
-				},
-			});
-
-			updatedTracks = updateElementInSceneTracks({
-				tracks: updatedTracks,
-				trackId: updateEntry.trackId,
-				elementId: updateEntry.elementId,
-				update: () => nextElement,
-			});
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}

apps/web/src/commands/timeline/track/add-track.ts

@@ -1,115 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { SceneTracks, TrackType } from "@/timeline";
-import { generateUUID } from "@/utils/id";
-import { EditorCore } from "@/core";
-import {
-	buildEmptyTrack,
-	getDefaultInsertIndexForTrack,
-} from "@/timeline/placement";
-
-export class AddTrackCommand extends Command {
-	private trackId: string;
-	private savedState: SceneTracks | null = null;
-
-	constructor(
-		private type: TrackType,
-		private index?: number,
-	) {
-		super();
-		this.trackId = generateUUID();
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const insertIndex =
-			this.index ??
-			getDefaultInsertIndexForTrack({
-				tracks: this.savedState,
-				trackType: this.type,
-			});
-
-		const updatedTracks =
-			this.type === "audio"
-				? buildAudioTrackState({
-						tracks: this.savedState,
-						insertIndex,
-						trackId: this.trackId,
-					})
-				: buildOverlayTrackState({
-						tracks: this.savedState,
-						insertIndex,
-						trackId: this.trackId,
-						trackType: this.type,
-					});
-
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-
-	getTrackId(): string {
-		return this.trackId;
-	}
-}
-
-function buildAudioTrackState({
-	tracks,
-	insertIndex,
-	trackId,
-}: {
-	tracks: SceneTracks;
-	insertIndex: number;
-	trackId: string;
-}): SceneTracks {
-	const audioInsertIndex = Math.max(0, insertIndex - tracks.overlay.length - 1);
-	const newTrack = buildEmptyTrack({
-		id: trackId,
-		type: "audio",
-	});
-	return {
-		...tracks,
-		audio: [
-			...tracks.audio.slice(0, audioInsertIndex),
-			newTrack,
-			...tracks.audio.slice(audioInsertIndex),
-		],
-	};
-}
-
-function buildOverlayTrackState({
-	tracks,
-	insertIndex,
-	trackId,
-	trackType,
-}: {
-	tracks: SceneTracks;
-	insertIndex: number;
-	trackId: string;
-	trackType: Exclude<TrackType, "audio">;
-}): SceneTracks {
-	const overlayInsertIndex = Math.min(insertIndex, tracks.overlay.length);
-	const newTrack =
-		trackType === "video"
-			? buildEmptyTrack({ id: trackId, type: "video" })
-			: trackType === "text"
-				? buildEmptyTrack({ id: trackId, type: "text" })
-				: trackType === "graphic"
-					? buildEmptyTrack({ id: trackId, type: "graphic" })
-					: buildEmptyTrack({ id: trackId, type: "effect" });
-	return {
-		...tracks,
-		overlay: [
-			...tracks.overlay.slice(0, overlayInsertIndex),
-			newTrack,
-			...tracks.overlay.slice(overlayInsertIndex),
-		],
-	};
-}

apps/web/src/commands/timeline/track/remove-track.ts

@@ -1,30 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import { EditorCore } from "@/core";
-import type { SceneTracks } from "@/timeline";
-
-export class RemoveTrackCommand extends Command {
-	private savedState: SceneTracks | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-		const updatedTracks: SceneTracks = {
-			...this.savedState,
-			overlay: this.savedState.overlay.filter((track) => track.id !== this.trackId),
-			audio: this.savedState.audio.filter((track) => track.id !== this.trackId),
-		};
-		editor.timeline.updateTracks(updatedTracks);
-		return undefined;
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}

apps/web/src/commands/timeline/track/toggle-track-mute.ts

@@ -1,41 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { SceneTracks } from "@/timeline";
-import { EditorCore } from "@/core";
-import { canTrackHaveAudio, findTrackInSceneTracks, updateTrackInSceneTracks } from "@/timeline";
-
-export class ToggleTrackMuteCommand extends Command {
-	private savedState: SceneTracks | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const targetTrack = findTrackInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-		});
-		if (!targetTrack) {
-			return;
-		}
-
-		const updatedTracks = updateTrackInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			update: (track) =>
-				canTrackHaveAudio(track) ? { ...track, muted: !track.muted } : track,
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}

apps/web/src/commands/timeline/track/toggle-track-visibility.ts

@@ -1,45 +0,0 @@
-import { Command, type CommandResult } from "@/commands/base-command";
-import type { SceneTracks } from "@/timeline";
-import { EditorCore } from "@/core";
-import { canTrackBeHidden, findTrackInSceneTracks, updateTrackInSceneTracks } from "@/timeline";
-
-export class ToggleTrackVisibilityCommand extends Command {
-	private savedState: SceneTracks | null = null;
-
-	constructor(private trackId: string) {
-		super();
-	}
-
-	execute(): CommandResult | undefined {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.scenes.getActiveScene().tracks;
-
-		const targetTrack = findTrackInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-		});
-		if (!targetTrack) {
-			return;
-		}
-
-		const updatedTracks = updateTrackInSceneTracks({
-			tracks: this.savedState,
-			trackId: this.trackId,
-			update: (track) => {
-				if (canTrackBeHidden(track)) {
-					return { ...track, hidden: !track.hidden };
-				}
-				return track;
-			},
-		});
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}