fix: surface degraded GPU renderer notices

Move timeline and preview gestures into dedicated controllers so hooks stay thin around editor state and DOM events.

This also routes drag and playback synchronization through manager APIs and reuses persistent wasm surfaces so scrubbing, seeking, and preview rendering stay in sync.

Made-with: Cursor

AGENTS.md

@@ -21,3 +21,17 @@ 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.lock

@@ -3820,7 +3820,7 @@ dependencies = [
 
 [[package]]
 name = "opencut-wasm"
-version = "0.2.5"
+version = "0.2.10"
 dependencies = [
  "bridge",
  "compositor",

README.md

@@ -85,6 +85,19 @@ If you want to get ready for `apps/desktop`, see [`apps/desktop/README.md`](apps
 
 Only needed if you're editing `rust/wasm` and want the web app to use your local build instead of the published package.
 
+**Prerequisites** — install these once before anything else:
+
+```bash
+# Rust toolchain
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+# build the WASM package
+cargo install wasm-pack
+
+# reruns the build on file changes, used by bun dev:wasm
+cargo install cargo-watch
+```
+
 1. Build the package once from the repo root:
 
    ```bash

apps/desktop/src/main.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    App, Application, Bounds, Context, SharedString, Window, WindowBounds, WindowOptions, div,
+    div, prelude::*, px, rgb, size, App, Application, Bounds, Context, SharedString, Window,
-    prelude::*, px, rgb, size,
+    WindowBounds, WindowOptions,
 };
 
 struct AppWindow {

apps/web/drizzle.config.ts

@@ -1,22 +1,26 @@
 import type { Config } from "drizzle-kit";
 import * as dotenv from "dotenv";
-import { webEnv } from "@/lib/env/web";
 
-if (webEnv.NODE_ENV === "production") {
+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/schema.ts",
+	schema: "./src/lib/db/schema.ts",
 	dialect: "postgresql",
 	migrations: {
 		table: "drizzle_migrations",
 	},
 	dbCredentials: {
-		url: webEnv.DATABASE_URL,
+		url: databaseUrl,
 	},
 	out: "./migrations",
-	strict: webEnv.NODE_ENV === "production",
+	strict: process.env.NODE_ENV === "production",
 } satisfies Config;

apps/web/package.json

@@ -52,7 +52,7 @@
     "nanoid": "^5.1.5",
     "next": "16.1.3",
     "next-themes": "^0.4.4",
-    "opencut-wasm": "^0.2.5",
+    "opencut-wasm": "^0.2.10",
     "pg": "^8.16.2",
     "postgres": "^3.4.5",
     "radix-ui": "^1.4.3",

apps/web/src/actions/components/shortcuts-dialog.tsx

@@ -5,8 +5,8 @@ import { toast } from "sonner";
 import {
 	type KeyboardShortcut,
 	useKeyboardShortcutsHelp,
-} from "@/hooks/use-keyboard-shortcuts-help";
+} from "@/actions/use-keyboard-shortcuts-help";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { useKeybindingsStore } from "@/actions/keybindings-store";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,

apps/web/src/actions/definitions.ts

@@ -1,209 +1,209 @@
-import type {
+import type {
-	KeybindingConfig,
+	KeybindingConfig,
-	ShortcutKey,
+	ShortcutKey,
-} from "@/lib/actions/keybinding";
+} from "@/actions/keybinding";
-import type { TActionWithOptionalArgs } from "./types";
+import type { TActionWithOptionalArgs } from "./types";
-
+
-export type TActionCategory =
+export type TActionCategory =
-	| "playback"
+	| "playback"
-	| "navigation"
+	| "navigation"
-	| "editing"
+	| "editing"
-	| "selection"
+	| "selection"
-	| "history"
+	| "history"
-	| "timeline"
+	| "timeline"
-	| "controls"
+	| "controls"
-	| "assets";
+	| "assets";
-
+
-export interface TActionBaseDefinition {
+export interface TActionBaseDefinition {
-	description: string;
+	description: string;
-	category: TActionCategory;
+	category: TActionCategory;
-	args?: Record<string, unknown>;
+	args?: Record<string, unknown>;
-}
+}
-
+
-export interface TActionDefinition extends TActionBaseDefinition {
+export interface TActionDefinition extends TActionBaseDefinition {
-	defaultShortcuts?: readonly ShortcutKey[];
+	defaultShortcuts?: readonly ShortcutKey[];
-}
+}
-
+
-export const ACTIONS = {
+export const ACTIONS = {
-	"toggle-play": {
+	"toggle-play": {
-		description: "Play/Pause",
+		description: "Play/Pause",
-		category: "playback",
+		category: "playback",
-	},
+	},
-	"stop-playback": {
+	"stop-playback": {
-		description: "Stop playback",
+		description: "Stop playback",
-		category: "playback",
+		category: "playback",
-	},
+	},
-	"seek-forward": {
+	"seek-forward": {
-		description: "Seek forward 1 second",
+		description: "Seek forward 1 second",
-		category: "playback",
+		category: "playback",
-		args: { seconds: "number" },
+		args: { seconds: "number" },
-	},
+	},
-	"seek-backward": {
+	"seek-backward": {
-		description: "Seek backward 1 second",
+		description: "Seek backward 1 second",
-		category: "playback",
+		category: "playback",
-		args: { seconds: "number" },
+		args: { seconds: "number" },
-	},
+	},
-	"frame-step-forward": {
+	"frame-step-forward": {
-		description: "Frame step forward",
+		description: "Frame step forward",
-		category: "navigation",
+		category: "navigation",
-	},
+	},
-	"frame-step-backward": {
+	"frame-step-backward": {
-		description: "Frame step backward",
+		description: "Frame step backward",
-		category: "navigation",
+		category: "navigation",
-	},
+	},
-	"jump-forward": {
+	"jump-forward": {
-		description: "Jump forward 5 seconds",
+		description: "Jump forward 5 seconds",
-		category: "navigation",
+		category: "navigation",
-		args: { seconds: "number" },
+		args: { seconds: "number" },
-	},
+	},
-	"jump-backward": {
+	"jump-backward": {
-		description: "Jump backward 5 seconds",
+		description: "Jump backward 5 seconds",
-		category: "navigation",
+		category: "navigation",
-		args: { seconds: "number" },
+		args: { seconds: "number" },
-	},
+	},
-	"goto-start": {
+	"goto-start": {
-		description: "Go to timeline start",
+		description: "Go to timeline start",
-		category: "navigation",
+		category: "navigation",
-	},
+	},
-	"goto-end": {
+	"goto-end": {
-		description: "Go to timeline end",
+		description: "Go to timeline end",
-		category: "navigation",
+		category: "navigation",
-	},
+	},
-	split: {
+	split: {
-		description: "Split elements at playhead",
+		description: "Split elements at playhead",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"split-left": {
+	"split-left": {
-		description: "Split and remove left",
+		description: "Split and remove left",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"split-right": {
+	"split-right": {
-		description: "Split and remove right",
+		description: "Split and remove right",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"delete-selected": {
+	"delete-selected": {
-		description: "Delete selected elements",
+		description: "Delete current selection",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"copy-selected": {
+	"copy-selected": {
-		description: "Copy selected elements",
+		description: "Copy selected elements",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"paste-copied": {
+	"paste-copied": {
-		description: "Paste elements at playhead",
+		description: "Paste elements at playhead",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"toggle-snapping": {
+	"toggle-snapping": {
-		description: "Toggle snapping",
+		description: "Toggle snapping",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"toggle-ripple-editing": {
+	"toggle-ripple-editing": {
-		description: "Toggle ripple editing",
+		description: "Toggle ripple editing",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"toggle-source-audio": {
+	"toggle-source-audio": {
-		description: "Extract or recover source audio",
+		description: "Extract or recover source audio",
-		category: "editing",
+		category: "editing",
-	},
+	},
-	"select-all": {
+	"select-all": {
-		description: "Select all elements",
+		description: "Select all elements",
-		category: "selection",
+		category: "selection",
-	},
+	},
-	"cancel-interaction": {
+	"cancel-interaction": {
-		description: "Cancel current interaction",
+		description: "Cancel current interaction",
-		category: "controls",
+		category: "controls",
-	},
+	},
-	"deselect-all": {
+	"deselect-all": {
-		description: "Deselect all elements",
+		description: "Deselect all elements",
-		category: "selection",
+		category: "selection",
-	},
+	},
-	"duplicate-selected": {
+	"duplicate-selected": {
-		description: "Duplicate selected element",
+		description: "Duplicate selected element",
-		category: "selection",
+		category: "selection",
-	},
+	},
-	"toggle-elements-muted-selected": {
+	"toggle-elements-muted-selected": {
-		description: "Mute/unmute selected elements",
+		description: "Mute/unmute selected elements",
-		category: "selection",
+		category: "selection",
-	},
+	},
-	"toggle-elements-visibility-selected": {
+	"toggle-elements-visibility-selected": {
-		description: "Show/hide selected elements",
+		description: "Show/hide selected elements",
-		category: "selection",
+		category: "selection",
-	},
+	},
-	"toggle-bookmark": {
+	"toggle-bookmark": {
-		description: "Toggle bookmark at playhead",
+		description: "Toggle bookmark at playhead",
-		category: "timeline",
+		category: "timeline",
-	},
+	},
-	undo: {
+	undo: {
-		description: "Undo",
+		description: "Undo",
-		category: "history",
+		category: "history",
-	},
+	},
-	redo: {
+	redo: {
-		description: "Redo",
+		description: "Redo",
-		category: "history",
+		category: "history",
-	},
+	},
-	"remove-media-asset": {
+	"remove-media-asset": {
-		description: "Remove media asset",
+		description: "Remove media asset",
-		category: "assets",
+		category: "assets",
-		args: { projectId: "string", assetId: "string" },
+		args: { projectId: "string", assetId: "string" },
-	},
+	},
-	"remove-media-assets": {
+	"remove-media-assets": {
-		description: "Remove media assets",
+		description: "Remove media assets",
-		category: "assets",
+		category: "assets",
-		args: { projectId: "string", assetIds: "string[]" },
+		args: { projectId: "string", assetIds: "string[]" },
-	},
+	},
-} as const satisfies Record<string, TActionBaseDefinition>;
+} as const satisfies Record<string, TActionBaseDefinition>;
-
+
-export type TAction = keyof typeof ACTIONS;
+export type TAction = keyof typeof ACTIONS;
-
+
-const ACTION_DEFAULT_SHORTCUTS = {
+const ACTION_DEFAULT_SHORTCUTS = {
-	"toggle-play": ["space", "k"],
+	"toggle-play": ["space", "k"],
-	"seek-forward": ["l"],
+	"seek-forward": ["l"],
-	"seek-backward": ["j"],
+	"seek-backward": ["j"],
-	"frame-step-forward": ["right"],
+	"frame-step-forward": ["right"],
-	"frame-step-backward": ["left"],
+	"frame-step-backward": ["left"],
-	"jump-forward": ["shift+right"],
+	"jump-forward": ["shift+right"],
-	"jump-backward": ["shift+left"],
+	"jump-backward": ["shift+left"],
-	"goto-start": ["home", "enter"],
+	"goto-start": ["home", "enter"],
-	"goto-end": ["end"],
+	"goto-end": ["end"],
-	split: ["s"],
+	split: ["s"],
-	"split-left": ["q"],
+	"split-left": ["q"],
-	"split-right": ["w"],
+	"split-right": ["w"],
-	"delete-selected": ["backspace", "delete"],
+	"delete-selected": ["backspace", "delete"],
-	"copy-selected": ["ctrl+c"],
+	"copy-selected": ["ctrl+c"],
-	"paste-copied": ["ctrl+v"],
+	"paste-copied": ["ctrl+v"],
-	"toggle-snapping": ["n"],
+	"toggle-snapping": ["n"],
-	"select-all": ["ctrl+a"],
+	"select-all": ["ctrl+a"],
-	"cancel-interaction": ["escape"],
+	"cancel-interaction": ["escape"],
-	"duplicate-selected": ["ctrl+d"],
+	"duplicate-selected": ["ctrl+d"],
-	undo: ["ctrl+z"],
+	undo: ["ctrl+z"],
-	redo: ["ctrl+shift+z", "ctrl+y"],
+	redo: ["ctrl+shift+z", "ctrl+y"],
-} as const satisfies Partial<Record<TActionWithOptionalArgs, readonly ShortcutKey[]>>;
+} as const satisfies Partial<Record<TActionWithOptionalArgs, readonly ShortcutKey[]>>;
-
+
-const ACTION_DEFAULT_SHORTCUTS_BY_ACTION: Partial<
+const ACTION_DEFAULT_SHORTCUTS_BY_ACTION: Partial<
-	Record<TAction, readonly ShortcutKey[]>
+	Record<TAction, readonly ShortcutKey[]>
-> = ACTION_DEFAULT_SHORTCUTS;
+> = ACTION_DEFAULT_SHORTCUTS;
-
+
-export function getActionDefinition({
+export function getActionDefinition({
-	action,
+	action,
-}: {
+}: {
-	action: TAction;
+	action: TAction;
-}): TActionDefinition {
+}): TActionDefinition {
-	return {
+	return {
-		...ACTIONS[action],
+		...ACTIONS[action],
-		defaultShortcuts: ACTION_DEFAULT_SHORTCUTS_BY_ACTION[action],
+		defaultShortcuts: ACTION_DEFAULT_SHORTCUTS_BY_ACTION[action],
-	};
+	};
-}
+}
-
+
-export function getDefaultShortcuts(): KeybindingConfig {
+export function getDefaultShortcuts(): KeybindingConfig {
-	const shortcuts: KeybindingConfig = {};
+	const shortcuts: KeybindingConfig = {};
-
+
-	for (const [action, defaultShortcuts] of Object.entries(
+	for (const [action, defaultShortcuts] of Object.entries(
-		ACTION_DEFAULT_SHORTCUTS,
+		ACTION_DEFAULT_SHORTCUTS,
-	) as Array<[TActionWithOptionalArgs, readonly ShortcutKey[]]>) {
+	) as Array<[TActionWithOptionalArgs, readonly ShortcutKey[]]>) {
-		for (const shortcut of defaultShortcuts) {
+		for (const shortcut of defaultShortcuts) {
-			shortcuts[shortcut] = action;
+			shortcuts[shortcut] = action;
-		}
+		}
-	}
+	}
-
+
-	return shortcuts;
+	return shortcuts;
-}
+}

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

@@ -2,11 +2,11 @@
 
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import type { TActionWithOptionalArgs } from "@/lib/actions";
+import type { TActionWithOptionalArgs } from "@/actions";
-import { getDefaultShortcuts } from "@/lib/actions";
+import { getDefaultShortcuts } from "@/actions";
 import { isTypableDOMElement } from "@/utils/browser";
 import { isAppleDevice } from "@/utils/platform";
-import type { KeybindingConfig, ShortcutKey } from "@/lib/actions/keybinding";
+import type { KeybindingConfig, ShortcutKey } from "@/actions/keybinding";
 import { runMigrations, CURRENT_VERSION } from "./keybindings/migrations";
 
 const defaultKeybindings: KeybindingConfig = getDefaultShortcuts();

apps/web/src/actions/keybindings/migrations/v2-to-v3.ts

@@ -1,5 +1,5 @@
-import type { KeybindingConfig, ShortcutKey } from "@/lib/actions/keybinding";
+import type { KeybindingConfig, ShortcutKey } from "@/actions/keybinding";
-import type { TActionWithOptionalArgs } from "@/lib/actions";
+import type { TActionWithOptionalArgs } from "@/actions";
 
 interface V2State {
 	keybindings: KeybindingConfig;

apps/web/src/actions/keybindings/migrations/v3-to-v4.ts

@@ -1,6 +1,6 @@
-import type { TActionWithOptionalArgs } from "@/lib/actions";
+import type { TActionWithOptionalArgs } from "@/actions";
-import type { ShortcutKey } from "@/lib/actions/keybinding";
+import type { ShortcutKey } from "@/actions/keybinding";
-import type { KeybindingConfig } from "@/lib/actions/keybinding";
+import type { KeybindingConfig } from "@/actions/keybinding";
 
 interface V3State {
 	keybindings: KeybindingConfig;

apps/web/src/actions/keybindings/migrations/v4-to-v5.ts

@@ -1,4 +1,4 @@
-import type { KeybindingConfig } from "@/lib/actions/keybinding";
+import type { KeybindingConfig } from "@/actions/keybinding";
 
 interface V4State {
 	keybindings: KeybindingConfig;

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

@@ -1,4 +1,4 @@
-import type { KeybindingConfig } from "@/lib/actions/keybinding";
+import type { KeybindingConfig } from "@/actions/keybinding";
 
 interface V5State {
 	keybindings: KeybindingConfig;

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

@@ -1,4 +1,4 @@
-import type { KeybindingConfig } from "@/lib/actions/keybinding";
+import type { KeybindingConfig } from "@/actions/keybinding";
 
 interface V6State {
 	keybindings: KeybindingConfig;

apps/web/src/actions/use-action-handler.ts

@@ -5,8 +5,8 @@ import type {
 	TActionHandlerOptions,
 	TArgOfAction,
 	TInvocationTrigger,
-} from "@/lib/actions";
+} from "@/actions";
-import { bindAction, unbindAction } from "@/lib/actions";
+import { bindAction, unbindAction } from "@/actions";
 
 export function useActionHandler<A extends TAction>(
 	action: A,

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

@@ -1,39 +1,47 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { useTimelineStore } from "@/stores/timeline-store";
+import { useTimelineStore } from "@/timeline/timeline-store";
-import { useActionHandler } from "@/hooks/actions/use-action-handler";
+import { useActionHandler } from "@/actions/use-action-handler";
-import { useEditor } from "../use-editor";
+import { useEditor } from "@/editor/use-editor";
-import { useElementSelection } from "../timeline/element/use-element-selection";
+import { useElementSelection } from "@/timeline/hooks/element/use-element-selection";
-import { TICKS_PER_SECOND } from "@/lib/wasm";
+import { TICKS_PER_SECOND } from "@/wasm";
-import { useKeyframeSelection } from "../timeline/element/use-keyframe-selection";
+import { useKeyframeSelection } from "@/timeline/hooks/element/use-keyframe-selection";
-import { getElementsAtTime, hasMediaId } from "@/lib/timeline";
+import { getElementsAtTime, hasMediaId } from "@/timeline";
-import { cancelInteraction } from "@/lib/cancel-interaction";
+import { cancelInteraction } from "@/editor/cancel-interaction";
-import { invokeAction } from "@/lib/actions";
+import { invokeAction } from "@/actions";
-import { canToggleSourceAudio } from "@/lib/timeline/audio-separation";
+import { canToggleSourceAudio } from "@/timeline/audio-separation";
 import {
 	activateScope,
 	clearActiveScope,
 	type ScopeEntry,
-} from "@/lib/selection/scope";
+} from "@/selection/scope";
 
 export function useEditorActions() {
 	const editor = useEditor();
 	const { selectedElements, setElementSelection } = useElementSelection();
 	const { selectedKeyframes, clearKeyframeSelection } = useKeyframeSelection();
+	const selectedMaskPointSelection = useEditor((e) =>
+		e.selection.getSelectedMaskPointSelection(),
+	);
 	const toggleSnapping = useTimelineStore((s) => s.toggleSnapping);
 	const rippleEditingEnabled = useTimelineStore((s) => s.rippleEditingEnabled);
 	const toggleRippleEditing = useTimelineStore((s) => s.toggleRippleEditing);
 	const hasTimelineSelectionRef = useRef(false);
 	const clearTimelineSelectionRef = useRef(() => {});
+	const clearTimelineActiveSelectionRef = useRef(() => {});
 	const timelineScopeRef = useRef<ScopeEntry | null>(null);
 	const hasTimelineSelection =
-		selectedElements.length > 0 || selectedKeyframes.length > 0;
+		selectedElements.length > 0 ||
+		selectedKeyframes.length > 0 ||
+		selectedMaskPointSelection !== null;
 
 	hasTimelineSelectionRef.current = hasTimelineSelection;
 	clearTimelineSelectionRef.current = () => {
-		setElementSelection({ elements: [] });
+		editor.selection.clearSelection();
-		clearKeyframeSelection();
+	};
+	clearTimelineActiveSelectionRef.current = () => {
+		editor.selection.clearMostSpecificSelection();
 	};
 
 	if (!timelineScopeRef.current) {
@@ -42,6 +50,9 @@ export function useEditorActions() {
 			clear: () => {
 				clearTimelineSelectionRef.current();
 			},
+			clearActive: () => {
+				clearTimelineActiveSelectionRef.current();
+			},
 		};
 	}
 
@@ -257,17 +268,36 @@ export function useEditorActions() {
 	useActionHandler(
 		"delete-selected",
 		() => {
-			if (selectedKeyframes.length > 0) {
+			switch (editor.selection.getActiveSelectionKind()) {
-				editor.timeline.removeKeyframes({ keyframes: selectedKeyframes });
+				case "mask-points":
-				clearKeyframeSelection();
+					if (!selectedMaskPointSelection) {
-				return;
+						return;
+					}
+					editor.timeline.deleteCustomMaskPoints({
+						trackId: selectedMaskPointSelection.trackId,
+						elementId: selectedMaskPointSelection.elementId,
+						maskId: selectedMaskPointSelection.maskId,
+						pointIds: selectedMaskPointSelection.pointIds,
+					});
+					return;
+				case "keyframes":
+					if (selectedKeyframes.length === 0) {
+						return;
+					}
+					editor.timeline.removeKeyframes({ keyframes: selectedKeyframes });
+					clearKeyframeSelection();
+					return;
+				case "elements":
+					if (selectedElements.length === 0) {
+						return;
+					}
+					editor.timeline.deleteElements({
+						elements: selectedElements,
+					});
+					return;
+				default:
+					return;
 			}
-			if (selectedElements.length === 0) {
-				return;
-			}
-			editor.timeline.deleteElements({
-				elements: selectedElements,
-			});
 		},
 		undefined,
 	);
@@ -343,8 +373,7 @@ export function useEditorActions() {
 		"deselect-all",
 		() => {
 			if (!clearActiveScope()) {
-				setElementSelection({ elements: [] });
+				editor.selection.clearMostSpecificSelection();
-				clearKeyframeSelection();
 			}
 		},
 		undefined,

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-import { invokeAction } from "@/lib/actions";
+import { invokeAction } from "@/actions";
-import { useEditor } from "@/hooks/use-editor";
+import { useEditor } from "@/editor/use-editor";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { useKeybindingsStore } from "@/actions/keybindings-store";
 import { isTypableDOMElement } from "@/utils/browser";
 
 /**

apps/web/src/actions/use-keyboard-shortcuts-help.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import { useMemo } from "react";
-import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { useKeybindingsStore } from "@/actions/keybindings-store";
-import { ACTIONS, type TActionWithOptionalArgs } from "@/lib/actions";
+import { ACTIONS, type TActionWithOptionalArgs } from "@/actions";
 import {
 	getPlatformAlternateKey,
 	getPlatformSpecialKey,

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

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test";
 import {
 	composeAnimationValue,
 	createAnimationBinding,
-} from "@/lib/animation/binding-values";
+} from "@/animation/binding-values";
 
 describe("binding values", () => {
 	test("formats composed animated colors as hex", () => {

apps/web/src/animation/bezier.ts

@@ -1,4 +1,4 @@
-import type { ScalarAnimationKey } from "@/lib/animation/types";
+import type { ScalarAnimationKey } from "@/animation/types";
 
 const BEZIER_SOLVE_ITERATIONS = 20;
 

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

@@ -12,7 +12,7 @@ import type {
 	DiscreteValue,
 	Vector2AnimationBinding,
 	VectorValue,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import { clamp } from "@/utils/math";
 
 interface LinearRgba {

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

@@ -1,12 +1,12 @@
 import {
 	getDefaultLeftHandle,
 	getDefaultRightHandle,
-} from "@/lib/animation/bezier";
+} from "@/animation/bezier";
 import type {
 	CurveHandle,
 	NormalizedCubicBezier,
 	ScalarAnimationKey,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 
 const VALUE_EPSILON = 1e-6;
 

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

@@ -1,9 +1,9 @@
-import type { ParamValues } from "@/lib/params";
+import type { ParamValues } from "@/params";
-import type { Effect } from "@/lib/effects/types";
+import type { Effect } from "@/effects/types";
 import type {
 	ElementAnimations,
 	EffectParamPath,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import { removeElementKeyframe } from "./keyframes";
 import { resolveAnimationPathValueAtTime } from "./resolve";
 

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

@@ -5,7 +5,7 @@ import type {
 	ScalarAnimationChannel,
 	ScalarGraphChannel,
 	ScalarGraphKeyframeContext,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 
 export interface EditableScalarChannels {
 	binding: AnimationBindingInstance;

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

@@ -1,12 +1,12 @@
 import type {
 	ElementAnimations,
 	GraphicParamPath,
-} from "@/lib/animation/types";
+} from "@/animation/types";
-import type { ParamValues } from "@/lib/params";
+import type { ParamValues } from "@/params";
 import {
 	getGraphicDefinition,
 	resolveGraphicParams,
-} from "@/lib/graphics";
+} from "@/graphics";
 import { resolveAnimationPathValueAtTime } from "./resolve";
 
 export const GRAPHIC_PARAM_PATH_PREFIX = "params.";

apps/web/src/animation/interpolation.ts

@@ -7,7 +7,7 @@ import type {
 	ScalarAnimationChannel,
 	ScalarAnimationKey,
 	ScalarSegmentType,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import { clamp } from "@/utils/math";
 import {
 	getBezierPoint,

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

@@ -4,7 +4,7 @@ import type {
 	AnimationPath,
 	ElementAnimations,
 	ElementKeyframe,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import {
 	type AnimationComponentValue,
 	composeAnimationValue,

apps/web/src/animation/keyframes.ts

@@ -13,7 +13,7 @@ import type {
 	ScalarAnimationKey,
 	ScalarCurveKeyframePatch,
 	ScalarSegmentType,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import { generateUUID } from "@/utils/id";
 import {
 	cloneAnimationBinding,

apps/web/src/animation/property-groups.ts

@@ -2,8 +2,8 @@ import type {
 	AnimationPropertyGroup,
 	AnimationPropertyPath,
 	ElementAnimations,
-} from "@/lib/animation/types";
+} from "@/animation/types";
-import { ANIMATION_PROPERTY_GROUPS } from "@/lib/animation/types";
+import { ANIMATION_PROPERTY_GROUPS } from "@/animation/types";
 import { getKeyframeAtTime } from "./keyframe-query";
 
 export interface GroupKeyframeRef {

apps/web/src/animation/property-registry.ts

@@ -3,20 +3,20 @@ import type {
 	AnimationInterpolation,
 	AnimationPropertyPath,
 	AnimationValue,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import { parseColorToLinearRgba } from "./binding-values";
-import type { TimelineElement } from "@/lib/timeline";
+import type { TimelineElement } from "@/timeline";
-import { MIN_TRANSFORM_SCALE } from "@/lib/animation/transform";
+import { MIN_TRANSFORM_SCALE } from "@/animation/transform";
 import {
 	CORNER_RADIUS_MAX,
 	CORNER_RADIUS_MIN,
-} from "@/lib/text/background";
+} from "@/text/background";
 import {
 	canElementHaveAudio,
 	isVisualElement,
-} from "@/lib/timeline/element-utils";
+} from "@/timeline/element-utils";
-import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/lib/timeline/audio-constants";
+import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/timeline/audio-constants";
-import { DEFAULTS } from "@/lib/timeline/defaults";
+import { DEFAULTS } from "@/timeline/defaults";
 import { snapToStep } from "@/utils/math";
 
 export interface NumericSpec {

apps/web/src/animation/resolve.ts

@@ -5,8 +5,8 @@ import type {
 	AnimationPropertyPath,
 	AnimationValueForPath,
 	ElementAnimations,
-} from "@/lib/animation/types";
+} from "@/animation/types";
-import type { Transform } from "@/lib/rendering";
+import type { Transform } from "@/rendering";
 import {
 	type AnimationComponentValue,
 	composeAnimationValue,

apps/web/src/animation/target-resolver.ts

@@ -3,20 +3,20 @@ import type {
 	AnimationInterpolation,
 	AnimationPath,
 	AnimationValue,
-} from "@/lib/animation/types";
+} from "@/animation/types";
 import {
 	parseEffectParamPath,
 	isEffectParamPath,
-} from "@/lib/animation/effect-param-channel";
+} from "@/animation/effect-param-channel";
 import {
 	isGraphicParamPath,
 	parseGraphicParamPath,
-} from "@/lib/animation/graphic-param-channel";
+} from "@/animation/graphic-param-channel";
-import type { ParamDefinition } from "@/lib/params";
+import type { ParamDefinition } from "@/params";
-import { effectsRegistry, registerDefaultEffects } from "@/lib/effects";
+import { effectsRegistry, registerDefaultEffects } from "@/effects";
-import { getGraphicDefinition } from "@/lib/graphics";
+import { getGraphicDefinition } from "@/graphics";
-import type { TimelineElement } from "@/lib/timeline";
+import type { TimelineElement } from "@/timeline";
-import { isVisualElement } from "@/lib/timeline/element-utils";
+import { isVisualElement } from "@/timeline/element-utils";
 import { snapToStep } from "@/utils/math";
 import {
 	coerceAnimationValueForProperty,

apps/web/src/animation/timeline-snap-points.ts

@@ -0,0 +1,35 @@
+import { getElementKeyframes } from "@/animation";
+import type { SceneTracks } from "@/timeline";
+import type { SnapPoint } from "@/timeline/snapping";
+
+export function getAnimationKeyframeSnapPointsForTimeline({
+	tracks,
+	excludeElementIds,
+}: {
+	tracks: SceneTracks;
+	excludeElementIds?: Set<string>;
+}): SnapPoint[] {
+	const snapPoints: SnapPoint[] = [];
+	const orderedTracks = [...tracks.overlay, tracks.main, ...tracks.audio];
+
+	for (const track of orderedTracks) {
+		for (const element of track.elements) {
+			if (excludeElementIds?.has(element.id)) {
+				continue;
+			}
+
+			for (const keyframe of getElementKeyframes({
+				animations: element.animations,
+			})) {
+				snapPoints.push({
+					time: element.startTime + keyframe.time,
+					type: "keyframe",
+					elementId: element.id,
+					trackId: track.id,
+				});
+			}
+		}
+	}
+
+	return snapPoints;
+}

apps/web/src/animation/types.ts

@@ -1,4 +1,4 @@
-import type { ParamValues } from "@/lib/params";
+import type { ParamValues } from "@/params";
 
 export const ANIMATION_PROPERTY_PATHS = [
 	"transform.positionX",

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

@@ -1,4 +1,4 @@
-import { auth } from "@/lib/auth/server";
+import { auth } from "@/auth/server";
 import { toNextJsHandler } from "better-auth/next-js";
 
 export const { POST, GET } = toNextJsHandler(auth);

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

@@ -1,7 +1,7 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { checkRateLimit } from "@/lib/rate-limit";
+import { checkRateLimit } from "@/auth/rate-limit";
-import { submitFeedback, MAX_MESSAGE_LENGTH } from "@/lib/feedback";
+import { submitFeedback, MAX_MESSAGE_LENGTH } from "@/feedback";
 
 const submitSchema = z.object({
 	message: z

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

@@ -1,7 +1,7 @@
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { checkRateLimit } from "@/lib/rate-limit";
+import { checkRateLimit } from "@/auth/rate-limit";
 
 const searchParamsSchema = z.object({
 	q: z.string().max(500, "Query too long").optional(),

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 "@/lib/blog/query";
+import { getPosts, getSinglePost, processHtmlContent } from "@/blog/query";
-import type { Author, Post } from "@/lib/blog/types";
+import type { Author, Post } from "@/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 "@/lib/blog/query";
+import { getPosts } from "@/blog/query";
-import type { Post } from "@/lib/blog/types";
+import type { Post } from "@/blog/types";
 
 export const metadata: Metadata = {
 	title: "Blog - OpenCut",

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

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

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

@@ -3,15 +3,15 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { BasePage } from "@/app/base-page";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { getReleaseByVersion, getSortedReleases } from "@/lib/changelog/utils";
+import { getReleaseByVersion, getSortedReleases } from "@/changelog/utils";
 import {
 	ReleaseArticle,
 	ReleaseMeta,
 	ReleaseTitle,
 	ReleaseDescription,
 	ReleaseChanges,
-} from "@/lib/changelog/components/release";
+} from "@/changelog/components/release";
-import { CopyMarkdownButton } from "@/lib/changelog/components/copy-markdown-button";
+import { CopyMarkdownButton } from "@/changelog/components/copy-markdown-button";
 
 type Props = { params: Promise<{ version: string }> };
 

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

@@ -4,14 +4,14 @@ import { Separator } from "@/components/ui/separator";
 import {
 	type Release as ReleaseType,
 	getSortedReleases,
-} from "@/lib/changelog/utils";
+} from "@/changelog/utils";
 import {
 	ReleaseArticle,
 	ReleaseMeta,
 	ReleaseTitle,
 	ReleaseDescription,
 	ReleaseChanges,
-} from "@/lib/changelog/components/release";
+} from "@/changelog/components/release";
 
 export const metadata: Metadata = {
 	title: "Changelog - OpenCut",

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 "@/lib/site/external-tools";
+import { EXTERNAL_TOOLS } from "@/site/external-tools";
 import { BasePage } from "../base-page";
 
 export const metadata: Metadata = {

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

@@ -8,21 +8,30 @@ import {
 } 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 { Timeline } from "@/timeline/components";
-import { PreviewPanel } from "@/components/editor/panels/preview";
+import { PreviewPanel } from "@/preview/components";
 import { EditorHeader } from "@/components/editor/editor-header";
+import { EditorNoticeBar } from "@/components/editor/editor-notice-bar";
 import { EditorProvider } from "@/components/providers/editor-provider";
 import { Onboarding } from "@/components/editor/onboarding";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { MigrationDialog } from "@/project/components/migration-dialog";
-import { usePanelStore } from "@/stores/panel-store";
+import { usePanelStore } from "@/editor/panel-store";
-import { usePasteMedia } from "@/hooks/use-paste-media";
+import { useEditor } from "@/editor/use-editor";
+import { usePasteMedia } from "@/media/use-paste-media";
 import { MobileGate } from "@/components/editor/mobile-gate";
-import { useState } from "react";
+import { useMemo } from "react";
-import { useEditor } from "@/hooks/use-editor";
+import { ChangelogNotification } from "@/changelog/components/changelog-notification";
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
+import {
-import { HugeiconsIcon } from "@hugeicons/react";
+	createPreviewOverlayControl,
-import { Button } from "@/components/ui/button";
+	isPreviewOverlayVisible,
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+	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();
@@ -32,7 +41,7 @@ export default function Editor() {
 		<MobileGate>
 			<EditorProvider projectId={projectId}>
 				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
-					<DegradedRendererBanner />
+					<EditorNoticeBar />
 					<EditorHeader />
 					<div className="min-h-0 min-w-0 flex-1">
 						<EditorLayout />
@@ -46,30 +55,52 @@ export default function Editor() {
 	);
 }
 
-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
@@ -111,7 +142,11 @@ function EditorLayout() {
 						minSize={30}
 						className="min-h-0 min-w-0 flex-1"
 					>
-						<PreviewPanel />
+						<PreviewPanel
+							overlayControls={overlayControls}
+							overlayInstances={overlaySource.instances}
+							onOverlayVisibilityChange={setOverlayVisibility}
+						/>
 					</ResizablePanel>
 
 					<ResizableHandle withHandle />

apps/web/src/app/layout.tsx

@@ -2,11 +2,11 @@ import { ThemeProvider } from "next-themes";
 import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+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 "@/lib/env/web";
+import { webEnv } from "@/env/web";
 import { Inter } from "next/font/google";
 
 const siteFont = Inter({ subsets: ["latin"] });

apps/web/src/app/metadata.ts

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { SITE_INFO, SITE_URL } from "@/lib/site/brand";
+import { SITE_INFO, SITE_URL } from "@/site/brand";
 
 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 "@/lib/site/brand";
+import { SITE_URL } from "@/site/brand";
 
 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 "@/lib/site/social";
+import { SOCIAL_LINKS } from "@/site/social";
 
 export const metadata: Metadata = {
 	title: "Privacy Policy - OpenCut",

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

@@ -7,20 +7,20 @@ import type { KeyboardEvent, MouseEvent } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import type { EditorCore } from "@/core";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { MigrationDialog } from "@/project/components/migration-dialog";
-import { StoragePersistenceDialog } from "@/components/editor/dialogs/storage-persistence-dialog";
+import { StoragePersistenceDialog } from "@/services/storage/components/storage-persistence-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useEditor } from "@/hooks/use-editor";
+import { useEditor } from "@/editor/use-editor";
 import { useProjectsStore } from "./store";
 import type {
 	TProjectMetadata,
 	TProjectSortKey,
 	TProjectSortOption,
-} from "@/lib/project/types";
+} from "@/project/types";
 import { formatTimecode, mediaTimeToSeconds } from "opencut-wasm";
 import { formatDate } from "@/utils/date";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -62,11 +62,11 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
+import { DeleteProjectDialog } from "@/project/components/delete-project-dialog";
-import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
+import { ProjectInfoDialog } from "@/project/components/project-info-dialog";
-import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
+import { RenameProjectDialog } from "@/project/components/rename-project-dialog";
 import { cn } from "@/utils/ui";
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+import { ChangelogNotification } from "@/changelog/components/changelog-notification";
 const formatProjectDuration = ({
 	duration,
 }: {

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

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import type { TProjectSortKey } from "@/lib/project/types";
+import type { TProjectSortKey } from "@/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 "@/lib/site/brand";
+import { SITE_URL } from "@/site/brand";
 
 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 "@/lib/blog/query";
+import { getPosts } from "@/blog/query";
-import { SITE_INFO, SITE_URL } from "@/lib/site/brand";
+import { SITE_INFO, SITE_URL } from "@/site/brand";
 
 export async function GET() {
 	try {

apps/web/src/app/sitemap.ts

@@ -1,5 +1,5 @@
-import { SITE_URL } from "@/lib/site/brand";
+import { SITE_URL } from "@/site/brand";
-import { getPosts } from "@/lib/blog/query";
+import { getPosts } from "@/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 "@/lib/site/sponsors";
+import { SPONSORS, type Sponsor } from "@/site/sponsors";
 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 "@/lib/site/social";
+import { SOCIAL_LINKS } from "@/site/social";
 
 export const metadata: Metadata = {
 	title: "Terms of Service - OpenCut",

apps/web/src/auth/client.ts

@@ -1,5 +1,5 @@
 import { createAuthClient } from "better-auth/react";
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 
 export const { signIn, signUp, useSession } = createAuthClient({
 	baseURL: webEnv.NEXT_PUBLIC_SITE_URL,

apps/web/src/auth/rate-limit.ts

@@ -1,6 +1,6 @@
 import { Ratelimit } from "@upstash/ratelimit";
 import { Redis } from "@upstash/redis";
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 
 const redis = new Redis({
 	url: webEnv.UPSTASH_REDIS_REST_URL,

apps/web/src/auth/server.ts

@@ -1,8 +1,8 @@
 import { betterAuth, type RateLimit } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { Redis } from "@upstash/redis";
-import { db } from "@/lib/db";
+import { db } from "@/db";
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 
 const redis = new Redis({
 	url: webEnv.UPSTASH_REDIS_REST_URL,

apps/web/src/blog/query.ts

@@ -5,7 +5,7 @@ import type {
 	MarblePost,
 	MarblePostList,
 	MarbleTagList,
-} from "@/lib/blog/types";
+} from "@/blog/types";
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import rehypeStringify from "rehype-stringify";
@@ -47,7 +47,12 @@ const EMPTY_AUTHORS: MarbleAuthorList = {
 };
 
 function isMarbleConfigured() {
-	return !["", "placeholder", "build-placeholder", "your_workspace_key_here"].includes(key);
+	return ![
+		"",
+		"placeholder",
+		"build-placeholder",
+		"your_workspace_key_here",
+	].includes(key);
 }
 
 async function fetchFromMarble<T>({

apps/web/src/canvas/sizes.ts

@@ -1,4 +1,4 @@
-import type { TCanvasSize } from "@/lib/project/types";
+import type { TCanvasSize } from "@/project/types";
 
 export const DEFAULT_CANVAS_PRESETS: TCanvasSize[] = [
 	{ width: 1920, height: 1080 },

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

@@ -43,7 +43,7 @@ changes:
   - type: improved
     text: "The properties panel has been redesigned with a tabbed layout."
   - type: new
-    text: "Volume control for audio and video elements, both in the properties panel and inline on timeline clips."
+    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
@@ -71,7 +71,7 @@ changes:
   - type: new
     text: "Preview zoom and panning. Zoom into the canvas to work on fine details, and pan around to navigate when zoomed in."
   - type: new
-    text: "Stickers panel now has content. Browse and add logos, country flags, and shapes."
+    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

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

@@ -0,0 +1,19 @@
+---
+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/clipboard/handlers/elements.ts

@@ -1,4 +1,4 @@
-import { PasteCommand } from "@/lib/commands/timeline";
+import { PasteCommand } from "@/commands/timeline";
 import type { ClipboardHandler } from "../types";
 
 export const ElementsClipboardHandler = {

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

@@ -1,7 +1,7 @@
-import { getKeyframeById } from "@/lib/animation";
+import { getKeyframeById } from "@/animation";
-import type { SelectedKeyframeRef } from "@/lib/animation/types";
+import type { SelectedKeyframeRef } from "@/animation/types";
-import type { TimelineElement } from "@/lib/timeline";
+import type { TimelineElement } from "@/timeline";
-import { PasteKeyframesCommand } from "@/lib/commands/timeline";
+import { PasteKeyframesCommand } from "@/commands/timeline";
 import type {
 	ClipboardHandler,
 	KeyframeClipboardCurvePatch,

apps/web/src/clipboard/types.ts

@@ -5,13 +5,13 @@ import type {
 	AnimationValue,
 	ScalarCurveKeyframePatch,
 	SelectedKeyframeRef,
-} from "@/lib/animation/types";
+} from "@/animation/types";
-import type { Command } from "@/lib/commands/base-command";
+import type { Command } from "@/commands/base-command";
 import type {
 	CreateTimelineElement,
 	ElementRef,
 	TrackType,
-} from "@/lib/timeline";
+} from "@/timeline";
 
 export interface ElementClipboardItem {
 	trackId: string;

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

@@ -0,0 +1,31 @@
+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

@@ -10,7 +10,7 @@ export class BatchCommand extends Command {
 
 		for (const command of this.commands) {
 			const result = command.execute();
-			if (result?.select !== undefined) {
+			if (result?.selection !== undefined) {
 				latestSelectionResult = result;
 			}
 		}
@@ -29,7 +29,7 @@ export class BatchCommand extends Command {
 
 		for (const command of this.commands) {
 			const result = command.redo();
-			if (result?.select !== undefined) {
+			if (result?.selection !== undefined) {
 				latestSelectionResult = result;
 			}
 		}

apps/web/src/commands/media/add-media-asset.ts

@@ -1,13 +1,13 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
 import { toast } from "sonner";
-import type { MediaAsset } from "@/lib/media/types";
+import type { MediaAsset } from "@/media/types";
 import { generateUUID } from "@/utils/id";
 import { storageService } from "@/services/storage/service";
 import type { FrameRate } from "opencut-wasm";
-import { hasMediaId } from "@/lib/timeline/element-utils";
+import { hasMediaId } from "@/timeline/element-utils";
-import { frameRatesEqual, getHighestImportedVideoFps } from "@/lib/fps/utils";
+import { frameRatesEqual, getHighestImportedVideoFps } from "@/fps/utils";
-import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
+import { UpdateProjectSettingsCommand } from "@/commands/project";
 
 export class AddMediaAssetCommand extends Command {
 	private assetId: string;

apps/web/src/commands/media/remove-media-asset.ts

@@ -1,10 +1,12 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { MediaAsset } from "@/lib/media/types";
+import type { MediaAsset } from "@/media/types";
+import { buildWaveformSourceKey } from "@/media/waveform-summary";
 import { storageService } from "@/services/storage/service";
 import { videoCache } from "@/services/video-cache/service";
-import { hasMediaId } from "@/lib/timeline/element-utils";
+import { waveformCache } from "@/services/waveform-cache/service";
-import type { SceneTracks } from "@/lib/timeline";
+import { hasMediaId } from "@/timeline/element-utils";
+import type { SceneTracks } from "@/timeline";
 
 export class RemoveMediaAssetCommand extends Command {
 	private savedAssets: MediaAsset[] | null = null;
@@ -41,6 +43,12 @@ export class RemoveMediaAssetCommand extends Command {
 		}
 
 		videoCache.clearVideo({ mediaId: this.assetId });
+		waveformCache.clearSource({
+			sourceKey: buildWaveformSourceKey({
+				kind: "media",
+				id: this.assetId,
+			}),
+		});
 
 		editor.media.setAssets({
 			assets: assets.filter((media) => media.id !== this.assetId),

apps/web/src/commands/project/update-project-settings.ts

@@ -1,6 +1,6 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TProject, TProjectSettings } from "@/lib/project/types";
+import type { TProject, TProjectSettings } from "@/project/types";
 
 export class UpdateProjectSettingsCommand extends Command {
 	private savedSettings: TProjectSettings | null = null;

apps/web/src/commands/scene/create-scene.ts

@@ -1,7 +1,7 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
+import type { TScene } from "@/timeline";
-import { buildDefaultScene } from "@/lib/scenes";
+import { buildDefaultScene } from "@/timeline/scenes";
 
 export class CreateSceneCommand extends Command {
 	private savedScenes: TScene[] | null = null;

apps/web/src/commands/scene/delete-scene.ts

@@ -1,7 +1,7 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
+import type { TScene } from "@/timeline";
-import { canDeleteScene, getFallbackSceneAfterDelete } from "@/lib/scenes";
+import { canDeleteScene, getFallbackSceneAfterDelete } from "@/timeline/scenes";
 
 export class DeleteSceneCommand extends Command {
 	private savedScenes: TScene[] | null = null;

apps/web/src/commands/scene/move-bookmark.ts

@@ -1,8 +1,8 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
+import type { TScene } from "@/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
+import { updateSceneInArray } from "@/timeline/scenes";
-import { getFrameTime, moveBookmarkInArray } from "@/lib/timeline/bookmarks";
+import { getFrameTime, moveBookmarkInArray } from "@/timeline/bookmarks/index";
 
 export class MoveBookmarkCommand extends Command {
 	private savedScenes: TScene[] | null = null;

apps/web/src/commands/scene/remove-bookmark.ts

@@ -1,11 +1,11 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
+import type { TScene } from "@/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
+import { updateSceneInArray } from "@/timeline/scenes";
 import {
 	getFrameTime,
 	removeBookmarkFromArray,
-} from "@/lib/timeline/bookmarks";
+} from "@/timeline/bookmarks/index";
 
 export class RemoveBookmarkCommand extends Command {
 	private savedScenes: TScene[] | null = null;

apps/web/src/commands/scene/rename-scene.ts

@@ -1,7 +1,7 @@
-import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/commands/base-command";
 import { EditorCore } from "@/core";
-import type { TScene } from "@/lib/timeline";
+import type { TScene } from "@/timeline";
-import { updateSceneInArray } from "@/lib/scenes";
+import { updateSceneInArray } from "@/timeline/scenes";
 
 export class RenameSceneCommand extends Command {
 	private savedScenes: TScene[] | null = null;