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.

1 files changed, 30 insertions, 8 deletions

diff --git a/apps/web/src/lib/commands/timeline/element/update-element-trim.ts b/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
index 99c63287..6afcb9d0 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
@@ -1,18 +1,35 @@
 import { Command } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
+import { clampAnimationsToDuration } from "@/lib/animation";
 
 export class UpdateElementTrimCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
+	private readonly elementId: string;
+	private readonly trimStart: number;
+	private readonly trimEnd: number;
+	private readonly startTime: number | undefined;
+	private readonly duration: number | undefined;
 
-	constructor(
-		private elementId: string,
-		private trimStart: number,
-		private trimEnd: number,
-		private startTime?: number,
-		private duration?: number,
-	) {
+	constructor({
+		elementId,
+		trimStart,
+		trimEnd,
+		startTime,
+		duration,
+	}: {
+		elementId: string;
+		trimStart: number;
+		trimEnd: number;
+		startTime?: number;
+		duration?: number;
+	}) {
 		super();
+		this.elementId = elementId;
+		this.trimStart = trimStart;
+		this.trimEnd = trimEnd;
+		this.startTime = startTime;
+		this.duration = duration;
 	}
 
 	execute(): void {
@@ -25,12 +42,17 @@ export class UpdateElementTrimCommand extends Command {
 					return element;
 				}
 
+				const nextDuration = this.duration ?? element.duration;
 				return {
 					...element,
 					trimStart: this.trimStart,
 					trimEnd: this.trimEnd,
 					startTime: this.startTime ?? element.startTime,
-					duration: this.duration ?? element.duration,
+					duration: nextDuration,
+					animations: clampAnimationsToDuration({
+						animations: element.animations,
+						duration: nextDuration,
+					}),
 				};
 			});
 			return { ...track, elements: newElements } as typeof track;