feat: implement keyframe animation system

Add keyframe support for transform, opacity, and volume properties.
Includes animation engine (interpolation, mutations, resolvers), timeline
markers with selection/snapping, properties panel toggles, keyframe-aware
renderer, and full undo/redo command support.

Also refactor element command constructors to object params, extract
timeline pixel math to pixel-utils.ts, and update cursor rules.

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

@@ -1,9 +1,12 @@
 import type { EditorCore } from "@/core";
+import type { SelectedKeyframeRef } from "@/types/animation";
 
 type ElementRef = { trackId: string; elementId: string };
 
 export class SelectionManager {
 	private selectedElements: ElementRef[] = [];
+	private selectedKeyframes: SelectedKeyframeRef[] = [];
+	private keyframeSelectionAnchor: SelectedKeyframeRef | null = null;
 	private listeners = new Set<() => void>();
 
 	constructor(editor: EditorCore) {
@@ -14,13 +17,47 @@ export class SelectionManager {
 		return this.selectedElements;
 	}
 
+	getSelectedKeyframes(): SelectedKeyframeRef[] {
+		return this.selectedKeyframes;
+	}
+
+	getKeyframeSelectionAnchor(): SelectedKeyframeRef | null {
+		return this.keyframeSelectionAnchor;
+	}
+
 	setSelectedElements({ elements }: { elements: ElementRef[] }): void {
 		this.selectedElements = elements;
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	setSelectedKeyframes({
+		keyframes,
+		anchorKeyframe,
+	}: {
+		keyframes: SelectedKeyframeRef[];
+		anchorKeyframe?: SelectedKeyframeRef | null;
+	}): void {
+		this.selectedKeyframes = keyframes;
+		if (anchorKeyframe !== undefined) {
+			this.keyframeSelectionAnchor = anchorKeyframe;
+		} else if (keyframes.length === 0) {
+			this.keyframeSelectionAnchor = null;
+		}
 		this.notify();
 	}
 
 	clearSelection(): void {
 		this.selectedElements = [];
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	clearKeyframeSelection(): void {
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
 		this.notify();
 	}
 

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

@@ -5,6 +5,11 @@ import type {
 	TimelineElement,
 	ClipboardItem,
 } from "@/types/timeline";
+import type {
+	AnimationInterpolation,
+	AnimationPropertyPath,
+	AnimationValue,
+} from "@/types/animation";
 import { calculateTotalDuration } from "@/lib/timeline";
 import {
 	AddTrackCommand,
@@ -24,6 +29,9 @@ import {
 	UpdateElementStartTimeCommand,
 	MoveElementCommand,
 	TracksSnapshotCommand,
+	UpsertKeyframeCommand,
+	RemoveKeyframeCommand,
+	RetimeKeyframeCommand,
 } from "@/lib/commands/timeline";
 import { BatchCommand, PreviewTracker } from "@/lib/commands";
 import type { InsertElementParams } from "@/lib/commands/timeline/element/insert-element";
@@ -61,7 +69,11 @@ export class TimelineManager {
 		trimEnd: number;
 		pushHistory?: boolean;
 	}): void {
-		const command = new UpdateElementTrimCommand(elementId, trimStart, trimEnd);
+		const command = new UpdateElementTrimCommand({
+			elementId,
+			trimStart,
+			trimEnd,
+		});
 		if (pushHistory) {
 			this.editor.command.execute({ command });
 		} else {
@@ -80,11 +92,11 @@ export class TimelineManager {
 		duration: number;
 		pushHistory?: boolean;
 	}): void {
-		const command = new UpdateElementDurationCommand(
+		const command = new UpdateElementDurationCommand({
 			trackId,
 			elementId,
 			duration,
-		);
+		});
 		if (pushHistory) {
 			this.editor.command.execute({ command });
 		} else {
@@ -99,7 +111,10 @@ export class TimelineManager {
 		elements: { trackId: string; elementId: string }[];
 		startTime: number;
 	}): void {
-		const command = new UpdateElementStartTimeCommand(elements, startTime);
+		const command = new UpdateElementStartTimeCommand({
+			elements,
+			startTime,
+		});
 		this.editor.command.execute({ command });
 	}
 
@@ -116,13 +131,13 @@ export class TimelineManager {
 		newStartTime: number;
 		createTrack?: { type: TrackType; index: number };
 	}): void {
-		const command = new MoveElementCommand(
+		const command = new MoveElementCommand({
 			sourceTrackId,
 			targetTrackId,
 			elementId,
 			newStartTime,
 			createTrack,
-		);
+		});
 		this.editor.command.execute({ command });
 	}
 
@@ -145,7 +160,11 @@ export class TimelineManager {
 		splitTime: number;
 		retainSide?: "both" | "left" | "right";
 	}): { trackId: string; elementId: string }[] {
-		const command = new SplitElementsCommand(elements, splitTime, retainSide);
+		const command = new SplitElementsCommand({
+			elements,
+			splitTime,
+			retainSide,
+		});
 		this.editor.command.execute({ command });
 		return command.getRightSideElements();
 	}
@@ -197,7 +216,7 @@ export class TimelineManager {
 	}: {
 		elements: { trackId: string; elementId: string }[];
 	}): void {
-		const command = new DeleteElementsCommand(elements);
+		const command = new DeleteElementsCommand({ elements });
 		this.editor.command.execute({ command });
 	}
 
@@ -208,13 +227,17 @@ export class TimelineManager {
 		updates: Array<{
 			trackId: string;
 			elementId: string;
-			updates: Partial<Record<string, unknown>>;
+			updates: Partial<TimelineElement>;
 		}>;
 		pushHistory?: boolean;
 	}): void {
 		const commands = updates.map(
 			({ trackId, elementId, updates: elementUpdates }) =>
-				new UpdateElementCommand(trackId, elementId, elementUpdates),
+				new UpdateElementCommand({
+					trackId,
+					elementId,
+					updates: elementUpdates,
+				}),
 		);
 		const command =
 			commands.length === 1 ? commands[0] : new BatchCommand(commands);
@@ -225,6 +248,99 @@ export class TimelineManager {
 		}
 	}
 
+	upsertKeyframes({
+		keyframes,
+	}: {
+		keyframes: Array<{
+			trackId: string;
+			elementId: string;
+			propertyPath: AnimationPropertyPath;
+			time: number;
+			value: AnimationValue;
+			interpolation?: AnimationInterpolation;
+			keyframeId?: string;
+		}>;
+	}): void {
+		if (keyframes.length === 0) {
+			return;
+		}
+
+		const commands = keyframes.map(
+			({
+				trackId,
+				elementId,
+				propertyPath,
+				time,
+				value,
+				interpolation = "linear",
+				keyframeId,
+			}) =>
+				new UpsertKeyframeCommand({
+					trackId,
+					elementId,
+					propertyPath,
+					time,
+					value,
+					interpolation,
+					keyframeId,
+				}),
+		);
+		const command =
+			commands.length === 1 ? commands[0] : new BatchCommand(commands);
+		this.editor.command.execute({ command });
+	}
+
+	removeKeyframes({
+		keyframes,
+	}: {
+		keyframes: Array<{
+			trackId: string;
+			elementId: string;
+			propertyPath: AnimationPropertyPath;
+			keyframeId: string;
+		}>;
+	}): void {
+		if (keyframes.length === 0) {
+			return;
+		}
+
+		const commands = keyframes.map(
+			({ trackId, elementId, propertyPath, keyframeId }) =>
+				new RemoveKeyframeCommand({
+					trackId,
+					elementId,
+					propertyPath,
+					keyframeId,
+				}),
+		);
+		const command =
+			commands.length === 1 ? commands[0] : new BatchCommand(commands);
+		this.editor.command.execute({ command });
+	}
+
+	retimeKeyframe({
+		trackId,
+		elementId,
+		propertyPath,
+		keyframeId,
+		time,
+	}: {
+		trackId: string;
+		elementId: string;
+		propertyPath: AnimationPropertyPath;
+		keyframeId: string;
+		time: number;
+	}): void {
+		const command = new RetimeKeyframeCommand({
+			trackId,
+			elementId,
+			propertyPath,
+			keyframeId,
+			nextTime: time,
+		});
+		this.editor.command.execute({ command });
+	}
+
 	isPreviewActive(): boolean {
 		return this.previewTracker.isActive();
 	}
@@ -235,7 +351,7 @@ export class TimelineManager {
 		updates: Array<{
 			trackId: string;
 			elementId: string;
-			updates: Partial<Record<string, unknown>>;
+			updates: Partial<TimelineElement>;
 		}>;
 	}): void {
 		const tracks = this.getTracks();