fix: align background blur with effect blur intensity scale

.github/workflows/bun-ci.yml

@@ -41,6 +41,26 @@ jobs:
       - 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:

apps/web/src/constants/project-constants.ts

@@ -16,12 +16,12 @@ export const FPS_PRESETS = [
 ] as const;
 
 export const BLUR_INTENSITY_PRESETS: { label: string; value: number }[] = [
-	{ label: "Light", value: 10 },
-	{ label: "Medium", value: 50 },
-	{ label: "Heavy", value: 100 },
+	{ label: "Light", value: 50 },
+	{ label: "Medium", value: 250 },
+	{ label: "Heavy", value: 500 },
 ] as const;
 
 export const DEFAULT_CANVAS_SIZE: TCanvasSize = { width: 1920, height: 1080 };
 export const DEFAULT_FPS = 30;
-export const DEFAULT_BLUR_INTENSITY = 10;
+export const DEFAULT_BLUR_INTENSITY = 50;
 export const DEFAULT_COLOR = "#000000";

apps/web/src/core/index.ts

@@ -1,53 +1,63 @@
-import { PlaybackManager } from "./managers/playback-manager";
-import { TimelineManager } from "./managers/timeline-manager";
-import { ScenesManager } from "./managers/scenes-manager";
-import { ProjectManager } from "./managers/project-manager";
-import { MediaManager } from "./managers/media-manager";
-import { RendererManager } from "./managers/renderer-manager";
-import { CommandManager } from "./managers/commands";
-import { SaveManager } from "./managers/save-manager";
-import { AudioManager } from "./managers/audio-manager";
-import { SelectionManager } from "./managers/selection-manager";
-import { registerDefaultEffects } from "@/lib/effects";
-import { registerDefaultMasks } from "@/lib/masks";
-
-export class EditorCore {
-	private static instance: EditorCore | null = null;
-	public readonly timeline: TimelineManager;
-	public readonly command: CommandManager;
-	public readonly playback: PlaybackManager;
-	public readonly scenes: ScenesManager;
-	public readonly project: ProjectManager;
-	public readonly media: MediaManager;
-	public readonly renderer: RendererManager;
-	public readonly save: SaveManager;
-	public readonly audio: AudioManager;
-	public readonly selection: SelectionManager;
-
-	private constructor() {
-		registerDefaultEffects();
-		registerDefaultMasks();
-		this.command = new CommandManager();
-		this.timeline = new TimelineManager(this);
-		this.playback = new PlaybackManager(this);
-		this.scenes = new ScenesManager(this);
-		this.project = new ProjectManager(this);
-		this.media = new MediaManager(this);
-		this.renderer = new RendererManager(this);
-		this.save = new SaveManager(this);
-		this.audio = new AudioManager(this);
-		this.selection = new SelectionManager(this);
-		this.save.start();
-	}
-
-	static getInstance(): EditorCore {
-		if (!EditorCore.instance) {
-			EditorCore.instance = new EditorCore();
-		}
-		return EditorCore.instance;
-	}
-
-	static reset(): void {
-		EditorCore.instance = null;
-	}
-}
+import { PlaybackManager } from "./managers/playback-manager";
+import { TimelineManager } from "./managers/timeline-manager";
+import { ScenesManager } from "./managers/scenes-manager";
+import { ProjectManager } from "./managers/project-manager";
+import { MediaManager } from "./managers/media-manager";
+import { RendererManager } from "./managers/renderer-manager";
+import { CommandManager } from "./managers/commands";
+import { SaveManager } from "./managers/save-manager";
+import { AudioManager } from "./managers/audio-manager";
+import { SelectionManager } from "./managers/selection-manager";
+import { registerDefaultEffects } from "@/lib/effects";
+import { registerDefaultMasks } from "@/lib/masks";
+import { isMainTrack } from "@/lib/timeline/placement";
+
+export class EditorCore {
+	private static instance: EditorCore | null = null;
+	public readonly timeline: TimelineManager;
+	public readonly command: CommandManager;
+	public readonly playback: PlaybackManager;
+	public readonly scenes: ScenesManager;
+	public readonly project: ProjectManager;
+	public readonly media: MediaManager;
+	public readonly renderer: RendererManager;
+	public readonly save: SaveManager;
+	public readonly audio: AudioManager;
+	public readonly selection: SelectionManager;
+
+	private constructor() {
+		registerDefaultEffects();
+		registerDefaultMasks();
+		this.command = new CommandManager(this);
+		this.timeline = new TimelineManager(this);
+		this.playback = new PlaybackManager(this);
+		this.scenes = new ScenesManager(this);
+		this.project = new ProjectManager(this);
+		this.media = new MediaManager(this);
+		this.renderer = new RendererManager(this);
+		this.save = new SaveManager(this);
+		this.audio = new AudioManager(this);
+		this.selection = new SelectionManager(this);
+		this.command.registerReactor(() => {
+			const tracks = this.timeline.getTracks();
+			const prunedTracks = tracks.filter(
+				(track) => track.elements.length > 0 || isMainTrack(track),
+			);
+			if (prunedTracks.length !== tracks.length) {
+				this.timeline.updateTracks(prunedTracks);
+			}
+		});
+		this.save.start();
+	}
+
+	static getInstance(): EditorCore {
+		if (!EditorCore.instance) {
+			EditorCore.instance = new EditorCore();
+		}
+		return EditorCore.instance;
+	}
+
+	static reset(): void {
+		EditorCore.instance = null;
+	}
+}

apps/web/src/core/managers/commands.ts

@@ -1,49 +1,116 @@
-import type { Command } from "@/lib/commands";
-
-export class CommandManager {
-	private history: Command[] = [];
-	private redoStack: Command[] = [];
-
-	execute({ command }: { command: Command }): Command {
-		command.execute();
-		this.history.push(command);
-		this.redoStack = [];
-		return command;
-	}
-
-	push({ command }: { command: Command }): void {
-		this.history.push(command);
-		this.redoStack = [];
-	}
-
-	undo(): void {
-		if (this.history.length === 0) return;
-		const command = this.history.pop();
-		command?.undo();
-		if (command) {
-			this.redoStack.push(command);
-		}
-	}
-
-	redo(): void {
-		if (this.redoStack.length === 0) return;
-		const command = this.redoStack.pop();
-		command?.redo();
-		if (command) {
-			this.history.push(command);
-		}
-	}
-
-	canUndo(): boolean {
-		return this.history.length > 0;
-	}
-
-	canRedo(): boolean {
-		return this.redoStack.length > 0;
-	}
-
-	clear(): void {
-		this.history = [];
-		this.redoStack = [];
-	}
-}
+import type { EditorCore } from "@/core";
+import type { Command, CommandResult } from "@/lib/commands";
+import type { ElementRef } from "@/lib/timeline/types";
+
+interface CommandHistoryEntry {
+	command: Command;
+	previousSelection: ElementRef[];
+	selectionOverride?: ElementRef[];
+}
+
+export class CommandManager {
+	private history: CommandHistoryEntry[] = [];
+	private redoStack: CommandHistoryEntry[] = [];
+	private reactors: Array<() => void> = [];
+
+	constructor(private editor: EditorCore) {}
+
+	execute({ command }: { command: Command }): Command {
+		const previousSelection = this.getSelectionSnapshot();
+		const result = command.execute();
+		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
+		this.history.push({
+			command,
+			previousSelection,
+			selectionOverride,
+		});
+		this.redoStack = [];
+		return command;
+	}
+
+	push({ command }: { command: Command }): void {
+		this.history.push({
+			command,
+			previousSelection: this.getSelectionSnapshot(),
+		});
+		this.redoStack = [];
+	}
+
+	registerReactor(reactor: () => void): void {
+		this.reactors.push(reactor);
+	}
+
+	undo(): void {
+		if (this.history.length === 0) return;
+		const entry = this.history.pop();
+		entry?.command.undo();
+		if (entry) {
+			// Only restore selection for commands that explicitly changed it.
+			// Commands without selection intent leave selection untouched,
+			// preserving any UI-driven selection changes (clicks, box select)
+			// that happened between commands. Commands that remove elements
+			// must declare { select: [] } to clear stale refs.
+			if (entry.selectionOverride !== undefined) {
+				this.editor.selection.setSelectedElements({
+					elements: [...entry.previousSelection],
+				});
+			}
+			this.redoStack.push(entry);
+		}
+	}
+
+	redo(): void {
+		if (this.redoStack.length === 0) return;
+		const entry = this.redoStack.pop();
+		if (!entry) {
+			return;
+		}
+
+		const previousSelection = this.getSelectionSnapshot();
+		const result = entry.command.redo();
+		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
+
+		this.history.push({
+			command: entry.command,
+			previousSelection,
+			selectionOverride,
+		});
+	}
+
+	canUndo(): boolean {
+		return this.history.length > 0;
+	}
+
+	canRedo(): boolean {
+		return this.redoStack.length > 0;
+	}
+
+	clear(): void {
+		this.history = [];
+		this.redoStack = [];
+	}
+
+	private getSelectionSnapshot(): ElementRef[] {
+		return [...this.editor.selection.getSelectedElements()];
+	}
+
+	private applySelectionOverride(
+		result: CommandResult | undefined,
+	): ElementRef[] | undefined {
+		if (result?.select === undefined) {
+			return undefined;
+		}
+
+		const selectionOverride = [...result.select];
+		this.editor.selection.setSelectedElements({ elements: selectionOverride });
+		return selectionOverride;
+	}
+
+	private runReactors(): void {
+		for (const reactor of this.reactors) {
+			reactor();
+		}
+	}
+}

apps/web/src/core/managers/timeline-manager.ts

@@ -266,7 +266,7 @@ export class TimelineManager {
 		time: number;
 		clipboardItems: ClipboardItem[];
 	}): { trackId: string; elementId: string }[] {
-		const command = new PasteCommand(time, clipboardItems);
+		const command = new PasteCommand({ time, clipboardItems });
 		this.editor.command.execute({ command });
 		return command.getPastedElements();
 	}

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

@@ -265,7 +265,6 @@ export function useEditorActions() {
 				elements: selectedElements,
 				rippleEnabled: rippleEditingEnabled,
 			});
-			editor.selection.clearSelection();
 		},
 		undefined,
 	);

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

@@ -1,11 +1,17 @@
+import type { ElementRef } from "@/lib/timeline/types";
+
+export interface CommandResult {
+	select?: ElementRef[];
+}
+
 export abstract class Command {
-	abstract execute(): void;
+	abstract execute(): CommandResult | undefined;
 
 	undo(): void {
 		throw new Error("Undo not implemented for this command");
 	}
 
-	redo(): void {
-		this.execute();
+	redo(): CommandResult | undefined {
+		return this.execute();
 	}
 }

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

@@ -1,14 +1,21 @@
-import { Command } from "./base-command";
+import { Command, type CommandResult } from "./base-command";
 
 export class BatchCommand extends Command {
 	constructor(private commands: Command[]) {
 		super();
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
+		let latestSelectionResult: CommandResult | undefined;
+
 		for (const command of this.commands) {
-			command.execute();
+			const result = command.execute();
+			if (result?.select !== undefined) {
+				latestSelectionResult = result;
+			}
 		}
+
+		return latestSelectionResult;
 	}
 
 	undo(): void {
@@ -17,9 +24,16 @@ export class BatchCommand extends Command {
 		}
 	}
 
-	redo(): void {
+	redo(): CommandResult | undefined {
+		let latestSelectionResult: CommandResult | undefined;
+
 		for (const command of this.commands) {
-			command.execute();
+			const result = command.redo();
+			if (result?.select !== undefined) {
+				latestSelectionResult = result;
+			}
 		}
+
+		return latestSelectionResult;
 	}
 }

apps/web/src/lib/commands/index.ts

@@ -1,4 +1,5 @@
 export { Command } from "./base-command";
+export type { CommandResult } from "./base-command";
 export { BatchCommand } from "./batch-command";
 
 export * from "./timeline";

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

@@ -1,182 +1,184 @@
-import { Command } from "@/lib/commands/base-command";
-import { EditorCore } from "@/core";
-import type {
-	TimelineTrack,
-	TimelineElement,
-	ClipboardItem,
-} from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import {
-	applyPlacement,
-	resolveTrackPlacement,
-	isMainTrack,
-	enforceMainTrackStart,
-} from "@/lib/timeline/placement";
-import { cloneAnimations } from "@/lib/animation";
-
-export class PasteCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private pastedElements: { trackId: string; elementId: string }[] = [];
-	private previousSelection: { trackId: string; elementId: string }[] = [];
-
-	constructor(
-		private time: number,
-		private clipboardItems: ClipboardItem[],
-	) {
-		super();
-	}
-
-	execute(): void {
-		if (this.clipboardItems.length === 0) return;
-
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
-		this.pastedElements = [];
-
-		const minStart = Math.min(
-			...this.clipboardItems.map((item) => item.element.startTime),
-		);
-
-		const 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.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 = updatedTracks[placementResult.trackIndex];
-				if (isMainTrack(targetTrack)) {
-					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 = adjustedEarliestStartTime - earliestElement.startTime;
-
-					if (delta !== 0) {
-						elementsForPlacement = elementsToAdd.map((element) => ({
-							...element,
-							startTime: Math.max(0, element.startTime + 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) {
-			editor.selection.setSelectedElements({ elements: this.pastedElements });
-		}
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
-		}
-	}
-
-	getPastedElements(): { trackId: string; elementId: string }[] {
-		return this.pastedElements;
-	}
-}
-
-function groupClipboardItemsByTrackId({
-	clipboardItems,
-}: {
-	clipboardItems: ClipboardItem[];
-}): Map<string, ClipboardItem[]> {
-	const groupedItems = new Map<string, ClipboardItem[]>();
-
-	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: ClipboardItem[];
-	minStart: number;
-	time: number;
-}): TimelineElement[] {
-	const elementsToAdd: TimelineElement[] = [];
-
-	for (const item of items) {
-		const relativeOffset = item.element.startTime - minStart;
-		const startTime = Math.max(0, time + relativeOffset);
-		const newElementId = generateUUID();
-
-		elementsToAdd.push({
-			...item.element,
-			id: newElementId,
-			startTime,
-			animations: cloneAnimations({
-				animations: item.element.animations,
-				shouldRegenerateKeyframeIds: true,
-			}),
-		} as TimelineElement);
-	}
-
-	return elementsToAdd;
-}
-
+import { Command, type CommandResult } from "@/lib/commands/base-command";
+import { EditorCore } from "@/core";
+import type {
+	TimelineTrack,
+	TimelineElement,
+	ClipboardItem,
+} from "@/lib/timeline";
+import { generateUUID } from "@/utils/id";
+import {
+	applyPlacement,
+	resolveTrackPlacement,
+	isMainTrack,
+	enforceMainTrackStart,
+} from "@/lib/timeline/placement";
+import { cloneAnimations } from "@/lib/animation";
+
+export class PasteCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private pastedElements: { trackId: string; elementId: string }[] = [];
+	private readonly time: number;
+	private readonly clipboardItems: ClipboardItem[];
+
+	constructor({
+		time,
+		clipboardItems,
+	}: {
+		time: number;
+		clipboardItems: ClipboardItem[];
+	}) {
+		super();
+		this.time = time;
+		this.clipboardItems = clipboardItems;
+	}
+
+	execute(): CommandResult | undefined {
+		if (this.clipboardItems.length === 0) return;
+
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		this.pastedElements = [];
+
+		const minStart = Math.min(
+			...this.clipboardItems.map((item) => item.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.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 = updatedTracks[placementResult.trackIndex];
+				if (isMainTrack(targetTrack)) {
+					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 = adjustedEarliestStartTime - earliestElement.startTime;
+
+					if (delta !== 0) {
+						elementsForPlacement = elementsToAdd.map((element) => ({
+							...element,
+							startTime: Math.max(0, element.startTime + 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 { select: this.pastedElements };
+		}
+	}
+
+	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: ClipboardItem[];
+}): Map<string, ClipboardItem[]> {
+	const groupedItems = new Map<string, ClipboardItem[]>();
+
+	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: ClipboardItem[];
+	minStart: number;
+	time: number;
+}): TimelineElement[] {
+	const elementsToAdd: TimelineElement[] = [];
+
+	for (const item of items) {
+		const relativeOffset = item.element.startTime - minStart;
+		const startTime = Math.max(0, time + 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/lib/commands/timeline/element/delete-elements.ts

@@ -1,80 +1,81 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineTrack } from "@/lib/timeline";
-import { EditorCore } from "@/core";
-import { rippleShiftElements } from "@/lib/timeline";
-import { isMainTrack } from "@/lib/timeline/placement";
-
-export class DeleteElementsCommand extends Command {
-	private savedState: TimelineTrack[] | null = null;
-	private readonly elements: { trackId: string; elementId: string }[];
-	private readonly rippleEnabled: boolean;
-
-	constructor({
-		elements,
-		rippleEnabled = false,
-	}: {
-		elements: { trackId: string; elementId: string }[];
-		rippleEnabled?: boolean;
-	}) {
-		super();
-		this.elements = elements;
-		this.rippleEnabled = rippleEnabled;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-
-		const updatedTracks = this.savedState
-			.map((track) => {
-				const elementsToDeleteOnTrack = this.elements.filter(
-					(target) => target.trackId === track.id,
-				);
-				const hasElementsToDelete = elementsToDeleteOnTrack.length > 0;
-
-				if (!hasElementsToDelete) {
-					return track;
-				}
-
-				const deletedElementInfos = elementsToDeleteOnTrack
-					.map((target) =>
-						track.elements.find((element) => element.id === target.elementId),
-					)
-					.filter((element): element is NonNullable<typeof element> => element !== undefined)
-					.map((element) => ({ startTime: element.startTime, duration: element.duration }));
-
-				let elements = track.elements.filter(
-					(element) =>
-						!this.elements.some(
-							(target) =>
-								target.trackId === track.id && target.elementId === element.id,
-						),
-				);
-
-				if (this.rippleEnabled && deletedElementInfos.length > 0) {
-					const sortedByStartDesc = [...deletedElementInfos].sort(
-						(a, b) => b.startTime - a.startTime,
-					);
-					for (const { startTime, duration } of sortedByStartDesc) {
-						elements = rippleShiftElements({
-							elements,
-							afterTime: startTime,
-							shiftAmount: duration,
-						});
-					}
-				}
-
-				return { ...track, elements } as typeof track;
-			})
-			.filter((track) => track.elements.length > 0 || isMainTrack(track));
-
-		editor.timeline.updateTracks(updatedTracks);
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-		}
-	}
-}
+import { Command, type CommandResult } from "@/lib/commands/base-command";
+import type { TimelineTrack } from "@/lib/timeline";
+import { EditorCore } from "@/core";
+import { rippleShiftElements } from "@/lib/timeline";
+
+export class DeleteElementsCommand extends Command {
+	private savedState: TimelineTrack[] | null = null;
+	private readonly elements: { trackId: string; elementId: string }[];
+	private readonly rippleEnabled: boolean;
+
+	constructor({
+		elements,
+		rippleEnabled = false,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+		rippleEnabled?: boolean;
+	}) {
+		super();
+		this.elements = elements;
+		this.rippleEnabled = rippleEnabled;
+	}
+
+	execute(): CommandResult {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+
+		const updatedTracks = this.savedState.map((track) => {
+				const elementsToDeleteOnTrack = this.elements.filter(
+					(target) => target.trackId === track.id,
+				);
+				const hasElementsToDelete = elementsToDeleteOnTrack.length > 0;
+
+				if (!hasElementsToDelete) {
+					return track;
+				}
+
+				const deletedElementInfos = elementsToDeleteOnTrack
+					.map((target) =>
+						track.elements.find((element) => element.id === target.elementId),
+					)
+					.filter((element): element is NonNullable<typeof element> => element !== undefined)
+					.map((element) => ({ startTime: element.startTime, duration: element.duration }));
+
+				let elements = track.elements.filter(
+					(element) =>
+						!this.elements.some(
+							(target) =>
+								target.trackId === track.id && target.elementId === element.id,
+						),
+				);
+
+				if (this.rippleEnabled && deletedElementInfos.length > 0) {
+					const sortedByStartDesc = [...deletedElementInfos].sort(
+						(a, b) => b.startTime - a.startTime,
+					);
+					for (const { startTime, duration } of sortedByStartDesc) {
+						elements = rippleShiftElements({
+							elements,
+							afterTime: startTime,
+							shiftAmount: duration,
+						});
+					}
+				}
+
+				return { ...track, elements } as typeof track;
+			});
+
+		editor.timeline.updateTracks(updatedTracks);
+
+		return {
+			select: [],
+		};
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+}

apps/web/src/lib/commands/timeline/element/duplicate-elements.ts

@@ -1,132 +1,127 @@
-import { Command } from "@/lib/commands/base-command";
-import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
-import { generateUUID } from "@/utils/id";
-import { EditorCore } from "@/core";
-import { applyPlacement, resolveTrackPlacement } from "@/lib/timeline/placement";
-import { cloneAnimations } from "@/lib/animation";
-
-interface DuplicateElementsParams {
-	elements: { trackId: string; elementId: string }[];
-}
-
-export class DuplicateElementsCommand extends Command {
-	private duplicatedElements: { trackId: string; elementId: string }[] = [];
-	private savedState: TimelineTrack[] | null = null;
-	private previousSelection: { trackId: string; elementId: string }[] = [];
-	private elements: DuplicateElementsParams["elements"];
-
-	constructor({ elements }: DuplicateElementsParams) {
-		super();
-		this.elements = elements;
-	}
-
-	execute(): void {
-		const editor = EditorCore.getInstance();
-		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
-		this.duplicatedElements = [];
-
-		const updatedTracks = [...this.savedState];
-
-		for (const track of this.savedState) {
-			const elementsToDuplicate = this.elements.filter(
-				(elementEntry) => elementEntry.trackId === track.id,
-			);
-
-			if (elementsToDuplicate.length === 0) {
-				continue;
-			}
-
-			const elementIdsToDuplicate = new Set(
-				elementsToDuplicate.map((element) => element.elementId),
-			);
-			const newTrackElements: TimelineElement[] = [];
-
-			for (const element of track.elements) {
-				if (!elementIdsToDuplicate.has(element.id)) {
-					continue;
-				}
-
-				const newId = generateUUID();
-				newTrackElements.push(
-					buildDuplicateElement({
-						element,
-						id: newId,
-						startTime: element.startTime,
-					}),
-				);
-			}
-
-			const placementResult = resolveTrackPlacement({
-				tracks: updatedTracks,
-				trackType: track.type,
-				timeSpans: [],
-				strategy: { type: "alwaysNew", position: "highest" },
-			});
-			if (!placementResult || placementResult.kind !== "newTrack") {
-				continue;
-			}
-
-			const applied = applyPlacement({
-				tracks: updatedTracks,
-				placementResult,
-				elements: newTrackElements,
-			});
-			if (!applied) {
-				continue;
-			}
-
-			updatedTracks = applied.updatedTracks;
-
-			for (const element of newTrackElements) {
-				this.duplicatedElements.push({
-					trackId: applied.targetTrackId,
-					elementId: element.id,
-				});
-			}
-		}
-
-		editor.timeline.updateTracks(updatedTracks);
-
-		if (this.duplicatedElements.length > 0) {
-			editor.selection.setSelectedElements({
-				elements: this.duplicatedElements,
-			});
-		}
-	}
-
-	undo(): void {
-		if (this.savedState) {
-			const editor = EditorCore.getInstance();
-			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
-		}
-	}
-
-	getDuplicatedElements(): { trackId: string; elementId: string }[] {
-		return this.duplicatedElements;
-	}
-}
-
-function buildDuplicateElement({
-	element,
-	id,
-	startTime,
-}: {
-	element: TimelineElement;
-	id: string;
-	startTime: number;
-}): TimelineElement {
-	return {
-		...element,
-		id,
-		name: `${element.name} (copy)`,
-		startTime,
-		animations: cloneAnimations({
-			animations: element.animations,
-			shouldRegenerateKeyframeIds: true,
-		}),
-	};
-}
+import { Command, type CommandResult } from "@/lib/commands/base-command";
+import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
+import { generateUUID } from "@/utils/id";
+import { EditorCore } from "@/core";
+import { applyPlacement, resolveTrackPlacement } from "@/lib/timeline/placement";
+import { cloneAnimations } from "@/lib/animation";
+
+interface DuplicateElementsParams {
+	elements: { trackId: string; elementId: string }[];
+}
+
+export class DuplicateElementsCommand extends Command {
+	private duplicatedElements: { trackId: string; elementId: string }[] = [];
+	private savedState: TimelineTrack[] | null = null;
+	private elements: DuplicateElementsParams["elements"];
+
+	constructor({ elements }: DuplicateElementsParams) {
+		super();
+		this.elements = elements;
+	}
+
+	execute(): CommandResult | undefined {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		this.duplicatedElements = [];
+
+		let updatedTracks = [...this.savedState];
+
+		for (const track of this.savedState) {
+			const elementsToDuplicate = this.elements.filter(
+				(elementEntry) => elementEntry.trackId === track.id,
+			);
+
+			if (elementsToDuplicate.length === 0) {
+				continue;
+			}
+
+			const elementIdsToDuplicate = new Set(
+				elementsToDuplicate.map((element) => element.elementId),
+			);
+			const newTrackElements: TimelineElement[] = [];
+
+			for (const element of track.elements) {
+				if (!elementIdsToDuplicate.has(element.id)) {
+					continue;
+				}
+
+				const newId = generateUUID();
+				newTrackElements.push(
+					buildDuplicateElement({
+						element,
+						id: newId,
+						startTime: element.startTime,
+					}),
+				);
+			}
+
+			const placementResult = resolveTrackPlacement({
+				tracks: updatedTracks,
+				trackType: track.type,
+				timeSpans: [],
+				strategy: { type: "alwaysNew", position: "highest" },
+			});
+			if (!placementResult || placementResult.kind !== "newTrack") {
+				continue;
+			}
+
+			const applied = applyPlacement({
+				tracks: updatedTracks,
+				placementResult,
+				elements: newTrackElements,
+			});
+			if (!applied) {
+				continue;
+			}
+
+			updatedTracks = applied.updatedTracks;
+
+			for (const element of newTrackElements) {
+				this.duplicatedElements.push({
+					trackId: applied.targetTrackId,
+					elementId: element.id,
+				});
+			}
+		}
+
+		editor.timeline.updateTracks(updatedTracks);
+
+		if (this.duplicatedElements.length > 0) {
+			return {
+				select: this.duplicatedElements,
+			};
+		}
+	}
+
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
+
+	getDuplicatedElements(): { trackId: string; elementId: string }[] {
+		return this.duplicatedElements;
+	}
+}
+
+function buildDuplicateElement({
+	element,
+	id,
+	startTime,
+}: {
+	element: TimelineElement;
+	id: string;
+	startTime: number;
+}): TimelineElement {
+	return {
+		...element,
+		id,
+		name: `${element.name} (copy)`,
+		startTime,
+		animations: cloneAnimations({
+			animations: element.animations,
+			shouldRegenerateKeyframeIds: true,
+		}),
+	};
+}

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

@@ -7,7 +7,6 @@ import type {
 } from "@/lib/timeline";
 import {
 	buildEmptyTrack,
-	isMainTrack,
 	validateElementTrackCompatibility,
 	enforceMainTrackStart,
 } from "@/lib/timeline/placement";
@@ -100,7 +99,7 @@ export class MoveElementCommand extends Command {
 
 		const isSameTrack = this.sourceTrackId === this.targetTrackId;
 
-		let updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
+		const updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
 			if (isSameTrack && track.id === this.sourceTrackId) {
 				return {
 					...track,
@@ -134,21 +133,6 @@ export class MoveElementCommand extends Command {
 			return track;
 		});
 
-		if (!isSameTrack) {
-			const sourceTrackAfterMove = updatedTracks.find(
-				(track) => track.id === this.sourceTrackId,
-			);
-			if (
-				sourceTrackAfterMove &&
-				sourceTrackAfterMove.elements.length === 0 &&
-				!isMainTrack(sourceTrackAfterMove)
-			) {
-				updatedTracks = updatedTracks.filter(
-					(track) => track.id !== this.sourceTrackId,
-				);
-			}
-		}
-
 		editor.timeline.updateTracks(updatedTracks);
 	}
 

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

@@ -1,4 +1,4 @@
-import { Command } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/lib/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
@@ -9,7 +9,6 @@ import { getSourceSpanAtClipTime } from "@/lib/retime";
 export class SplitElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
 	private rightSideElements: { trackId: string; elementId: string }[] = [];
-	private previousSelection: { trackId: string; elementId: string }[] = [];
 	private readonly elements: { trackId: string; elementId: string }[];
 	private readonly splitTime: number;
 	private readonly retainSide: "both" | "left" | "right";
@@ -37,10 +36,9 @@ export class SplitElementsCommand extends Command {
 		return this.rightSideElements;
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
 		this.rightSideElements = [];
 
 		const updatedTracks = this.savedState.map((track) => {
@@ -173,9 +171,9 @@ export class SplitElementsCommand extends Command {
 		editor.timeline.updateTracks(updatedTracks);
 
 		if (this.rightSideElements.length > 0) {
-			editor.selection.setSelectedElements({
-				elements: this.rightSideElements,
-			});
+			return {
+				select: this.rightSideElements,
+			};
 		}
 	}
 
@@ -183,9 +181,6 @@ export class SplitElementsCommand extends Command {
 		if (this.savedState) {
 			const editor = EditorCore.getInstance();
 			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
 		}
 	}
 }

apps/web/src/lib/effects/definitions/blur.ts

@@ -6,11 +6,6 @@ const MAX_STEP = 4;
 const MAX_EFFECTIVE_SIGMA = MAX_SINGLE_PASS_SIGMA * MAX_STEP;
 const MAX_ITERATIONS = 8;
 
-/**
- * Builds multi-pass gaussian blur passes for a given sigma.
- * Shared by the blur effect and background blur — they each
- * compute their own sigma from their own intensity scale.
- */
 export function buildGaussianBlurPasses({
 	sigmaX,
 	sigmaY,
@@ -58,8 +53,10 @@ export function buildGaussianBlurPasses({
 	return passes;
 }
 
-function intensityToSigma(intensity: number, resolution: number, reference: number): number {
-	return (intensity / 5) * (resolution / reference);
+export const INTENSITY_TO_SIGMA_DIVISOR = 5;
+
+export function intensityToSigma({ intensity, resolution, reference }: { intensity: number; resolution: number; reference: number }): number {
+	return (intensity / INTENSITY_TO_SIGMA_DIVISOR) * (resolution / reference);
 }
 
 function parseIntensity(effectParams: Record<string, unknown>): number {
@@ -88,7 +85,7 @@ export const blurEffectDefinition: EffectDefinition = {
 			{
 				fragmentShader: blurFragmentShader,
 				uniforms: ({ effectParams, width }) => ({
-					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), width, 1920), 0.001),
+					u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: width, reference: 1920 }), 0.001),
 					u_step: 1,
 					u_direction: [1, 0],
 				}),
@@ -96,7 +93,7 @@ export const blurEffectDefinition: EffectDefinition = {
 			{
 				fragmentShader: blurFragmentShader,
 				uniforms: ({ effectParams, height }) => ({
-					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), height, 1080), 0.001),
+					u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: height, reference: 1080 }), 0.001),
 					u_step: 1,
 					u_direction: [0, 1],
 				}),
@@ -104,9 +101,9 @@ export const blurEffectDefinition: EffectDefinition = {
 		],
 		buildPasses: ({ effectParams, width, height }) => {
 			const intensity = parseIntensity(effectParams);
-			return buildGaussianBlurPasses({
-				sigmaX: intensityToSigma(intensity, width, 1920),
-				sigmaY: intensityToSigma(intensity, height, 1080),
+		return buildGaussianBlurPasses({
+				sigmaX: intensityToSigma({ intensity, resolution: width, reference: 1920 }),
+				sigmaY: intensityToSigma({ intensity, resolution: height, reference: 1080 }),
 			});
 		},
 	},

apps/web/src/lib/timeline/placement/__tests__/resolve.test.ts

@@ -1,7 +1,53 @@
 import { describe, expect, test } from "bun:test";
-import type { ElementType, TimelineElement, TimelineTrack, TrackType } from "@/lib/timeline";
+import type {
+	AudioElement,
+	AudioTrack,
+	GraphicElement,
+	GraphicTrack,
+	TextElement,
+	TextTrack,
+	TimelineTrack,
+	VideoElement,
+	VideoTrack,
+} from "@/lib/timeline";
+import type { Transform } from "@/lib/rendering";
 import { resolveTrackPlacement } from "@/lib/timeline/placement";
 
+function buildTransform(): Transform {
+	return {
+		scaleX: 1,
+		scaleY: 1,
+		position: { x: 0, y: 0 },
+		rotate: 0,
+	};
+}
+
+type TestElement = AudioElement | GraphicElement | TextElement | VideoElement;
+
+function buildElement(params: {
+	id: string;
+	type: "audio";
+	startTime: number;
+	duration: number;
+}): AudioElement;
+function buildElement(params: {
+	id: string;
+	type: "graphic";
+	startTime: number;
+	duration: number;
+}): GraphicElement;
+function buildElement(params: {
+	id: string;
+	type: "text";
+	startTime: number;
+	duration: number;
+}): TextElement;
+function buildElement(params: {
+	id: string;
+	type: "video";
+	startTime: number;
+	duration: number;
+}): VideoElement;
 function buildElement({
 	id,
 	type,
@@ -9,61 +55,171 @@ function buildElement({
 	duration,
 }: {
 	id: string;
-	type: ElementType;
+	type: TestElement["type"];
 	startTime: number;
 	duration: number;
-}): TimelineElement {
-	return {
-		id,
-		type,
-		name: id,
-		startTime,
-		duration,
-		trimStart: 0,
-		trimEnd: 0,
-	} as TimelineElement;
+}): TestElement {
+	switch (type) {
+		case "audio":
+			return {
+				id,
+				type: "audio",
+				name: id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				volume: 1,
+				sourceType: "upload",
+				mediaId: `media-${id}`,
+			} satisfies AudioElement;
+		case "graphic":
+			return {
+				id,
+				type: "graphic",
+				name: id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				definitionId: `graphic-${id}`,
+				params: {},
+				transform: buildTransform(),
+				opacity: 1,
+			} satisfies GraphicElement;
+		case "text":
+			return {
+				id,
+				type: "text",
+				name: id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				content: id,
+				fontSize: 32,
+				fontFamily: "sans-serif",
+				color: "#ffffff",
+				background: {
+					enabled: false,
+					color: "#000000",
+				},
+				textAlign: "left",
+				fontWeight: "normal",
+				fontStyle: "normal",
+				textDecoration: "none",
+				transform: buildTransform(),
+				opacity: 1,
+			} satisfies TextElement;
+		case "video":
+			return {
+				id,
+				type: "video",
+				name: id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				mediaId: `media-${id}`,
+				transform: buildTransform(),
+				opacity: 1,
+			} satisfies VideoElement;
+	}
+
+	throw new Error(`Unsupported test element type: ${type}`);
 }
 
-function buildTrack({
-	id,
-	type,
-	elements = [],
-	isMain = false,
-}: {
+type BuildTrackParams =
+	| {
+			id: string;
+			type: "audio";
+			elements?: AudioTrack["elements"];
+			isMain?: boolean;
+	  }
+	| {
+			id: string;
+			type: "graphic";
+			elements?: GraphicTrack["elements"];
+			isMain?: boolean;
+	  }
+	| {
+			id: string;
+			type: "text";
+			elements?: TextTrack["elements"];
+			isMain?: boolean;
+	  }
+	| {
+			id: string;
+			type: "video";
+			elements?: VideoTrack["elements"];
+			isMain?: boolean;
+	  };
+
+function buildTrack(params: {
 	id: string;
-	type: TrackType;
-	elements?: TimelineElement[];
+	type: "audio";
+	elements?: AudioTrack["elements"];
 	isMain?: boolean;
-}): TimelineTrack {
-	if (type === "video") {
-		return {
-			id,
-			type,
-			name: id,
-			elements: elements as TimelineTrack["elements"],
-			isMain,
-			muted: false,
-			hidden: false,
-		};
+}): AudioTrack;
+function buildTrack(params: {
+	id: string;
+	type: "graphic";
+	elements?: GraphicTrack["elements"];
+	isMain?: boolean;
+}): GraphicTrack;
+function buildTrack(params: {
+	id: string;
+	type: "text";
+	elements?: TextTrack["elements"];
+	isMain?: boolean;
+}): TextTrack;
+function buildTrack(params: {
+	id: string;
+	type: "video";
+	elements?: VideoTrack["elements"];
+	isMain?: boolean;
+}): VideoTrack;
+function buildTrack(params: BuildTrackParams): TimelineTrack {
+	const { id, type, isMain = false } = params;
+
+	switch (type) {
+		case "audio":
+			return {
+				id,
+				type: "audio",
+				name: id,
+				elements: params.elements ?? [],
+				muted: false,
+			};
+		case "graphic":
+			return {
+				id,
+				type: "graphic",
+				name: id,
+				elements: params.elements ?? [],
+				hidden: false,
+			};
+		case "text":
+			return {
+				id,
+				type: "text",
+				name: id,
+				elements: params.elements ?? [],
+				hidden: false,
+			};
+		case "video":
+			return {
+				id,
+				type: "video",
+				name: id,
+				elements: params.elements ?? [],
+				isMain,
+				muted: false,
+				hidden: false,
+			};
 	}
 
-	if (type === "audio") {
-		return {
-			id,
-			type,
-			name: id,
-			elements: elements as TimelineTrack["elements"],
-			muted: false,
-		};
-	}
-
-	return {
-		id,
-		type,
-		name: id,
-		elements: elements as TimelineTrack["elements"],
-		hidden: false,
-	};
+	throw new Error(`Unsupported test track type: ${type}`);
 }
 
 function buildTimeSpan({
@@ -124,7 +280,9 @@ describe("resolveTrackPlacement", () => {
 			buildTrack({
 				id: "text-1",
 				type: "text",
-				elements: [buildElement({ id: "a", type: "text", startTime: 0, duration: 5 })],
+				elements: [
+					buildElement({ id: "a", type: "text", startTime: 0, duration: 5 }),
+				],
 			}),
 			buildTrack({ id: "text-2", type: "text" }),
 		];
@@ -256,7 +414,9 @@ describe("resolveTrackPlacement", () => {
 			buildTrack({
 				id: "text-middle",
 				type: "text",
-				elements: [buildElement({ id: "a", type: "text", startTime: 0, duration: 5 })],
+				elements: [
+					buildElement({ id: "a", type: "text", startTime: 0, duration: 5 }),
+				],
 			}),
 			buildTrack({ id: "text-source", type: "text" }),
 		];
@@ -281,12 +441,16 @@ describe("resolveTrackPlacement", () => {
 			buildTrack({
 				id: "text-top",
 				type: "text",
-				elements: [buildElement({ id: "a", type: "text", startTime: 0, duration: 5 })],
+				elements: [
+					buildElement({ id: "a", type: "text", startTime: 0, duration: 5 }),
+				],
 			}),
 			buildTrack({
 				id: "text-source",
 				type: "text",
-				elements: [buildElement({ id: "b", type: "text", startTime: 0, duration: 5 })],
+				elements: [
+					buildElement({ id: "b", type: "text", startTime: 0, duration: 5 }),
+				],
 			}),
 		];
 

apps/web/src/lib/timeline/placement/resolve.ts

@@ -44,9 +44,7 @@ function buildExistingTrackResult({
 		trackId: track.id,
 		trackIndex,
 		trackType: track.type,
-		...(adjustedStartTime !== requestedStartTime
-			? { adjustedStartTime }
-			: {}),
+		...(adjustedStartTime !== requestedStartTime ? { adjustedStartTime } : {}),
 	};
 }
 
@@ -114,6 +112,24 @@ function resolveAlwaysNewTrack({
 	});
 }
 
+function getInsertDirection({
+	hoverDirection,
+	verticalDragDirection,
+}: {
+	hoverDirection: "above" | "below";
+	verticalDragDirection?: "up" | "down" | null;
+}): "above" | "below" {
+	if (verticalDragDirection === "up") {
+		return "above";
+	}
+
+	if (verticalDragDirection === "down") {
+		return "below";
+	}
+
+	return hoverDirection;
+}
+
 export function resolveTrackPlacement({
 	tracks,
 	...placement
@@ -127,7 +143,9 @@ export function resolveTrackPlacement({
 	const { timeSpans, strategy } = placement;
 
 	if (strategy.type === "explicit") {
-		const trackIndex = tracks.findIndex((track) => track.id === strategy.trackId);
+		const trackIndex = tracks.findIndex(
+			(track) => track.id === strategy.trackId,
+		);
 		if (trackIndex < 0) {
 			return null;
 		}
@@ -182,15 +200,16 @@ export function resolveTrackPlacement({
 			});
 		}
 
-		const insertDirection =
-			!isPreferredTrackCompatible && strategy.verticalDragDirection
-				? strategy.verticalDragDirection
-				: strategy.hoverDirection;
 		const { insertIndex, insertPosition } = resolvePreferredNewTrackPlacement({
 			tracks,
 			trackType,
 			preferredIndex: strategy.trackIndex,
-			direction: insertDirection,
+			direction: getInsertDirection({
+				hoverDirection: strategy.hoverDirection,
+				verticalDragDirection: !isPreferredTrackCompatible
+					? strategy.verticalDragDirection
+					: null,
+			}),
 		});
 		return buildNewTrackResult({
 			trackType,

apps/web/src/services/renderer/nodes/blur-background-node.ts

@@ -1,5 +1,5 @@
 import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
-import { buildGaussianBlurPasses } from "@/lib/effects/definitions/blur";
+import { buildGaussianBlurPasses, intensityToSigma } from "@/lib/effects/definitions/blur";
 import { getSourceTimeAtClipTime } from "@/lib/retime";
 import { videoCache } from "@/services/video-cache/service";
 import type { RetimeConfig } from "@/lib/timeline";
@@ -128,8 +128,8 @@ export class BlurBackgroundNode extends BaseNode<BlurBackgroundNodeParams> {
 		);
 
 		const passes = buildGaussianBlurPasses({
-			sigmaX: this.params.blurIntensity * (renderer.width / 1920),
-			sigmaY: this.params.blurIntensity * (renderer.height / 1080),
+			sigmaX: intensityToSigma({ intensity: this.params.blurIntensity, resolution: renderer.width, reference: 1920 }),
+			sigmaY: intensityToSigma({ intensity: this.params.blurIntensity, resolution: renderer.height, reference: 1080 }),
 		});
 		const effectResult = webglEffectRenderer.applyEffect({
 			source: offscreen as CanvasImageSource,

apps/web/src/services/storage/migrations/__tests__/v20-to-v21.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "bun:test";
+import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
+import { transformProjectV20ToV21 } from "../transformers/v20-to-v21";
+
+describe("V20 to V21 Migration", () => {
+	test("multiplies blur background intensity by 5", () => {
+		const result = transformProjectV20ToV21({
+			project: {
+				id: "project-v20-blur",
+				version: 20,
+				metadata: {
+					id: "project-v20-blur",
+					name: "Project",
+					createdAt: "2024-01-01T00:00:00.000Z",
+					updatedAt: "2024-01-01T00:00:00.000Z",
+				},
+				settings: {
+					fps: 30,
+					canvasSize: { width: 1920, height: 1080 },
+					background: { type: "blur", blurIntensity: 100 },
+				},
+				currentSceneId: "scene-main",
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		expect(result.project.version).toBe(21);
+		const settings = result.project.settings as Record<string, unknown>;
+		const background = settings.background as Record<string, unknown>;
+		expect(background.blurIntensity).toBe(500);
+	});
+
+	test("uses default blur intensity when blur type but intensity missing", () => {
+		const result = transformProjectV20ToV21({
+			project: {
+				id: "project-v20-blur-no-intensity",
+				version: 20,
+				settings: {
+					background: { type: "blur" },
+				},
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		const settings = result.project.settings as Record<string, unknown>;
+		const background = settings.background as Record<string, unknown>;
+		expect(background.blurIntensity).toBe(DEFAULT_BLUR_INTENSITY);
+	});
+
+	test("leaves color background unchanged", () => {
+		const result = transformProjectV20ToV21({
+			project: {
+				id: "project-v20-color",
+				version: 20,
+				settings: {
+					background: { type: "color", color: "#000000" },
+				},
+				scenes: [],
+			},
+		});
+
+		expect(result.skipped).toBe(false);
+		const settings = result.project.settings as Record<string, unknown>;
+		expect(settings.background).toEqual({ type: "color", color: "#000000" });
+	});
+
+	test("skips projects already on v21", () => {
+		const result = transformProjectV20ToV21({
+			project: {
+				id: "project-v21",
+				version: 21,
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("already v21");
+	});
+
+	test("skips projects not on v20", () => {
+		const result = transformProjectV20ToV21({
+			project: {
+				id: "project-v19",
+				version: 19,
+			},
+		});
+
+		expect(result.skipped).toBe(true);
+		expect(result.reason).toBe("not v20");
+	});
+});

apps/web/src/services/storage/migrations/index.ts

@@ -19,10 +19,11 @@ import { V16toV17Migration } from "./v16-to-v17";
 import { V17toV18Migration } from "./v17-to-v18";
 import { V18toV19Migration } from "./v18-to-v19";
 import { V19toV20Migration } from "./v19-to-v20";
+import { V20toV21Migration } from "./v20-to-v21";
 export { runStorageMigrations } from "./runner";
 export type { MigrationProgress } from "./runner";
 
-export const CURRENT_PROJECT_VERSION = 20;
+export const CURRENT_PROJECT_VERSION = 21;
 
 export const migrations = [
 	new V0toV1Migration(),
@@ -45,4 +46,5 @@ export const migrations = [
 	new V17toV18Migration(),
 	new V18toV19Migration(),
 	new V19toV20Migration(),
+	new V20toV21Migration(),
 ];

apps/web/src/services/storage/migrations/transformers/v20-to-v21.ts

@@ -0,0 +1,66 @@
+import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
+import { INTENSITY_TO_SIGMA_DIVISOR } from "@/lib/effects/definitions/blur";
+import type { MigrationResult, ProjectRecord } from "./types";
+import { getProjectId, isRecord } from "./utils";
+
+export function transformProjectV20ToV21({
+	project,
+}: {
+	project: ProjectRecord;
+}): MigrationResult<ProjectRecord> {
+	if (!getProjectId({ project })) {
+		return { project, skipped: true, reason: "no project id" };
+	}
+
+	const version = project.version;
+	if (typeof version !== "number") {
+		return { project, skipped: true, reason: "invalid version" };
+	}
+	if (version >= 21) {
+		return { project, skipped: true, reason: "already v21" };
+	}
+	if (version !== 20) {
+		return { project, skipped: true, reason: "not v20" };
+	}
+
+	return {
+		project: {
+			...migrateBackgroundBlurScale({ project }),
+			version: 21,
+		},
+		skipped: false,
+	};
+}
+
+function migrateBackgroundBlurScale({
+	project,
+}: {
+	project: ProjectRecord;
+}): ProjectRecord {
+	if (!isRecord(project.settings)) {
+		return project;
+	}
+
+	const settings = { ...project.settings };
+	const background = settings.background;
+	if (!isRecord(background) || background.type !== "blur") {
+		return { ...project, settings };
+	}
+
+	const raw = background.blurIntensity;
+	const blurIntensity =
+		typeof raw === "number" && Number.isFinite(raw)
+			? raw * INTENSITY_TO_SIGMA_DIVISOR
+			: DEFAULT_BLUR_INTENSITY;
+
+	return {
+		...project,
+		settings: {
+			...settings,
+			background: {
+				...background,
+				blurIntensity,
+			},
+		},
+	};
+}

apps/web/src/services/storage/migrations/v20-to-v21.ts

@@ -0,0 +1,16 @@
+import { StorageMigration } from "./base";
+import type { ProjectRecord } from "./transformers/types";
+import { transformProjectV20ToV21 } from "./transformers/v20-to-v21";
+
+export class V20toV21Migration extends StorageMigration {
+	from = 20;
+	to = 21;
+
+	async transform(project: ProjectRecord): Promise<{
+		project: ProjectRecord;
+		skipped: boolean;
+		reason?: string;
+	}> {
+		return transformProjectV20ToV21({ project });
+	}
+}