From 49426f19cd8eaed7cf6c47999b66fee7ee637a56 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 27 Feb 2026 16:33:57 +0100
Subject: 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.
---
 .../commands/timeline/element/split-elements.ts    | 36 +++++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

(limited to 'apps/web/src/lib/commands/timeline/element/split-elements.ts')

diff --git a/apps/web/src/lib/commands/timeline/element/split-elements.ts b/apps/web/src/lib/commands/timeline/element/split-elements.ts
index abe133c9..be89e2ff 100644
--- a/apps/web/src/lib/commands/timeline/element/split-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/split-elements.ts
@@ -2,18 +2,29 @@ import { Command } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
+import { splitAnimationsAtTime } from "@/lib/animation";
 
 export class SplitElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
 	private rightSideElements: { trackId: string; elementId: string }[] = [];
 	private previousSelection: { trackId: string; elementId: string }[] = [];
-
-	constructor(
-		private elements: { trackId: string; elementId: string }[],
-		private splitTime: number,
-		private retainSide: "both" | "left" | "right" = "both",
-	) {
+	private readonly elements: { trackId: string; elementId: string }[];
+	private readonly splitTime: number;
+	private readonly retainSide: "both" | "left" | "right";
+
+	constructor({
+		elements,
+		splitTime,
+		retainSide = "both",
+	}: {
+		elements: { trackId: string; elementId: string }[];
+		splitTime: number;
+		retainSide?: "both" | "left" | "right";
+	}) {
 		super();
+		this.elements = elements;
+		this.splitTime = splitTime;
+		this.retainSide = retainSide;
 	}
 
 	getRightSideElements(): { trackId: string; elementId: string }[] {
@@ -28,7 +39,7 @@ export class SplitElementsCommand extends Command {
 
 		const updatedTracks = this.savedState.map((track) => {
 			const elementsToSplit = this.elements.filter(
-				(el) => el.trackId === track.id,
+				(elementEntry) => elementEntry.trackId === track.id,
 			);
 
 			if (elementsToSplit.length === 0) {
@@ -39,7 +50,7 @@ export class SplitElementsCommand extends Command {
 				...track,
 				elements: track.elements.flatMap((element) => {
 					const shouldSplit = elementsToSplit.some(
-						(el) => el.elementId === element.id,
+						(elementEntry) => elementEntry.elementId === element.id,
 					);
 
 					if (!shouldSplit) {
@@ -59,6 +70,11 @@ export class SplitElementsCommand extends Command {
 					const relativeTime = this.splitTime - element.startTime;
 					const leftVisibleDuration = relativeTime;
 					const rightVisibleDuration = element.duration - relativeTime;
+					const { leftAnimations, rightAnimations } = splitAnimationsAtTime({
+						animations: element.animations,
+						splitTime: relativeTime,
+						shouldIncludeSplitBoundary: true,
+					});
 
 					if (this.retainSide === "left") {
 						return [
@@ -67,6 +83,7 @@ export class SplitElementsCommand extends Command {
 								duration: leftVisibleDuration,
 								trimEnd: element.trimEnd + rightVisibleDuration,
 								name: `${element.name} (left)`,
+								animations: leftAnimations,
 							},
 						];
 					}
@@ -85,6 +102,7 @@ export class SplitElementsCommand extends Command {
 								duration: rightVisibleDuration,
 								trimStart: element.trimStart + leftVisibleDuration,
 								name: `${element.name} (right)`,
+								animations: rightAnimations,
 							},
 						];
 					}
@@ -102,6 +120,7 @@ export class SplitElementsCommand extends Command {
 							duration: leftVisibleDuration,
 							trimEnd: element.trimEnd + rightVisibleDuration,
 							name: `${element.name} (left)`,
+							animations: leftAnimations,
 						},
 						{
 							...element,
@@ -110,6 +129,7 @@ export class SplitElementsCommand extends Command {
 							duration: rightVisibleDuration,
 							trimStart: element.trimStart + leftVisibleDuration,
 							name: `${element.name} (right)`,
+							animations: rightAnimations,
 						},
 					];
 				}),
-- 
cgit v1.3.1