refactor: move track pruning into a post-command reactor

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

@@ -265,7 +265,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

@@ -261,7 +261,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),
-		);
-
-		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) {
-			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 = [];
-
-		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) {
-			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/timeline/placement/__tests__/resolve.test.ts

@@ -1,53 +1,7 @@
 import { describe, expect, test } from "bun:test";
-import type {
-	AudioElement,
-	AudioTrack,
-	GraphicElement,
-	GraphicTrack,
-	TextElement,
-	TextTrack,
-	TimelineTrack,
-	VideoElement,
-	VideoTrack,
-} from "@/lib/timeline";
-import type { Transform } from "@/lib/rendering";
+import type { ElementType, TimelineElement, TimelineTrack, TrackType } from "@/lib/timeline";
 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,
@@ -55,171 +9,61 @@ function buildElement({
 	duration,
 }: {
 	id: string;
-	type: TestElement["type"];
+	type: ElementType;
 	startTime: number;
 	duration: number;
-}): 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}`);
+}): TimelineElement {
+	return {
+		id,
+		type,
+		name: id,
+		startTime,
+		duration,
+		trimStart: 0,
+		trimEnd: 0,
+	} as TimelineElement;
 }
 
-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: {
+function buildTrack({
+	id,
+	type,
+	elements = [],
+	isMain = false,
+}: {
 	id: string;
-	type: "audio";
-	elements?: AudioTrack["elements"];
+	type: TrackType;
+	elements?: TimelineElement[];
 	isMain?: boolean;
-}): 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,
-			};
+}): TimelineTrack {
+	if (type === "video") {
+		return {
+			id,
+			type,
+			name: id,
+			elements: elements as TimelineTrack["elements"],
+			isMain,
+			muted: false,
+			hidden: false,
+		};
 	}
 
-	throw new Error(`Unsupported test track type: ${type}`);
+	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,
+	};
 }
 
 function buildTimeSpan({
@@ -280,9 +124,7 @@ 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" }),
 		];
@@ -414,9 +256,7 @@ 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" }),
 		];
@@ -441,16 +281,12 @@ 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,7 +44,9 @@ function buildExistingTrackResult({
 		trackId: track.id,
 		trackIndex,
 		trackType: track.type,
-		...(adjustedStartTime !== requestedStartTime ? { adjustedStartTime } : {}),
+		...(adjustedStartTime !== requestedStartTime
+			? { adjustedStartTime }
+			: {}),
 	};
 }
 
@@ -112,24 +114,6 @@ 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
@@ -143,9 +127,7 @@ 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;
 		}
@@ -200,16 +182,15 @@ export function resolveTrackPlacement({
 			});
 		}
 
+		const insertDirection =
+			!isPreferredTrackCompatible && strategy.verticalDragDirection
+				? strategy.verticalDragDirection
+				: strategy.hoverDirection;
 		const { insertIndex, insertPosition } = resolvePreferredNewTrackPlacement({
 			tracks,
 			trackType,
 			preferredIndex: strategy.trackIndex,
-			direction: getInsertDirection({
-				hoverDirection: strategy.hoverDirection,
-				verticalDragDirection: !isPreferredTrackCompatible
-					? strategy.verticalDragDirection
-					: null,
-			}),
+			direction: insertDirection,
 		});
 		return buildNewTrackResult({
 			trackType,