10 files changed, 505 insertions, 56 deletions

diff --git a/apps/web/src/lib/clipboard/handlers/elements.ts b/apps/web/src/lib/clipboard/handlers/elements.ts
new file mode 100644
index 00000000..1b58ac78
--- /dev/null
+++ b/apps/web/src/lib/clipboard/handlers/elements.ts
@@ -0,0 +1,48 @@
+import { PasteCommand } from "@/lib/commands/timeline";
+import type { ClipboardHandler } from "../types";
+
+export const ElementsClipboardHandler = {
+	type: "elements",
+
+	canCopy({ selectedElements }) {
+		return selectedElements.length > 0;
+	},
+
+	copy({ editor, selectedElements }) {
+		if (selectedElements.length === 0) {
+			return null;
+		}
+
+		const results = editor.timeline.getElementsWithTracks({
+			elements: selectedElements,
+		});
+		const items = results.map(({ track, element }) => {
+			const { id: _elementId, ...elementWithoutId } = element;
+			return {
+				trackId: track.id,
+				trackType: track.type,
+				element: elementWithoutId,
+			};
+		});
+
+		if (items.length === 0) {
+			return null;
+		}
+
+		return {
+			type: "elements",
+			items,
+		};
+	},
+
+	paste(entry, context) {
+		if (entry.items.length === 0) {
+			return null;
+		}
+
+		return new PasteCommand({
+			time: context.time,
+			clipboardItems: entry.items,
+		});
+	},
+} satisfies ClipboardHandler<"elements">;
diff --git a/apps/web/src/lib/clipboard/handlers/index.ts b/apps/web/src/lib/clipboard/handlers/index.ts
new file mode 100644
index 00000000..29d4d1d0
--- /dev/null
+++ b/apps/web/src/lib/clipboard/handlers/index.ts
@@ -0,0 +1,49 @@
+import type {
+	ClipboardEntry,
+	ClipboardEntryType,
+	ClipboardHandler,
+	ClipboardHandlerMap,
+	CopyContext,
+	PasteContext,
+} from "../types";
+import { ElementsClipboardHandler } from "./elements";
+import { KeyframesClipboardHandler } from "./keyframes";
+
+export const clipboardHandlers = {
+	elements: ElementsClipboardHandler,
+	keyframes: KeyframesClipboardHandler,
+} satisfies ClipboardHandlerMap;
+
+export const clipboardCopyHandlers = [
+	KeyframesClipboardHandler,
+	ElementsClipboardHandler,
+] as const satisfies readonly ClipboardHandler<ClipboardEntryType>[];
+
+export function copyClipboardEntry({
+	context,
+}: {
+	context: CopyContext;
+}): ClipboardEntry | null {
+	for (const handler of clipboardCopyHandlers) {
+		if (!handler.canCopy(context)) {
+			continue;
+		}
+
+		return handler.copy(context);
+	}
+
+	return null;
+}
+
+export function buildPasteClipboardCommand({
+	entry,
+	context,
+}: {
+	entry: ClipboardEntry;
+	context: PasteContext;
+}) {
+	const handler = clipboardHandlers[entry.type] as ClipboardHandler<
+		typeof entry.type
+	>;
+	return handler.paste(entry as never, context);
+}
diff --git a/apps/web/src/lib/clipboard/handlers/keyframes.ts b/apps/web/src/lib/clipboard/handlers/keyframes.ts
new file mode 100644
index 00000000..b746c179
--- /dev/null
+++ b/apps/web/src/lib/clipboard/handlers/keyframes.ts
@@ -0,0 +1,170 @@
+import { getKeyframeById } from "@/lib/animation";
+import type { SelectedKeyframeRef } from "@/lib/animation/types";
+import type { TimelineElement } from "@/lib/timeline";
+import { PasteKeyframesCommand } from "@/lib/commands/timeline";
+import type {
+	ClipboardHandler,
+	KeyframeClipboardCurvePatch,
+	KeyframeClipboardItem,
+} from "../types";
+
+function resolveSingleSourceElement({
+	selectedKeyframes,
+}: {
+	selectedKeyframes: SelectedKeyframeRef[];
+}) {
+	const firstKeyframe = selectedKeyframes[0];
+	if (!firstKeyframe) {
+		return null;
+	}
+
+	const sourceElement = {
+		trackId: firstKeyframe.trackId,
+		elementId: firstKeyframe.elementId,
+	};
+	const isSingleSource = selectedKeyframes.every(
+		(keyframe) =>
+			keyframe.trackId === sourceElement.trackId &&
+			keyframe.elementId === sourceElement.elementId,
+	);
+
+	return isSingleSource ? sourceElement : null;
+}
+
+function getCurvePatches({
+	element,
+	propertyPath,
+	keyframeId,
+}: {
+	element: TimelineElement;
+	propertyPath: KeyframeClipboardItem["propertyPath"];
+	keyframeId: string;
+}): KeyframeClipboardCurvePatch[] {
+	const binding = element.animations?.bindings[propertyPath];
+	if (!binding) {
+		return [];
+	}
+
+	return binding.components.flatMap((component) => {
+		const channel = element.animations?.channels[component.channelId];
+		if (channel?.kind !== "scalar") {
+			return [];
+		}
+
+		const keyframe = channel.keys.find(
+			(candidate) => candidate.id === keyframeId,
+		);
+		if (!keyframe) {
+			return [];
+		}
+
+		return [
+			{
+				componentKey: component.key,
+				patch: {
+					leftHandle: keyframe.leftHandle ?? null,
+					rightHandle: keyframe.rightHandle ?? null,
+					segmentToNext: keyframe.segmentToNext,
+					tangentMode: keyframe.tangentMode,
+				},
+			},
+		];
+	});
+}
+
+function buildClipboardItem({
+	element,
+	propertyPath,
+	keyframeId,
+}: {
+	element: TimelineElement;
+	propertyPath: KeyframeClipboardItem["propertyPath"];
+	keyframeId: string;
+}): (Omit<KeyframeClipboardItem, "timeOffset"> & { time: number }) | null {
+	const keyframe = getKeyframeById({
+		animations: element.animations,
+		propertyPath,
+		keyframeId,
+	});
+	if (!keyframe) {
+		return null;
+	}
+
+	return {
+		propertyPath,
+		time: keyframe.time,
+		value: keyframe.value,
+		interpolation: keyframe.interpolation,
+		curvePatches: getCurvePatches({
+			element,
+			propertyPath,
+			keyframeId,
+		}),
+	};
+}
+
+export const KeyframesClipboardHandler = {
+	type: "keyframes",
+
+	canCopy({ selectedKeyframes }) {
+		return selectedKeyframes.length > 0;
+	},
+
+	copy({ editor, selectedKeyframes }) {
+		const sourceElement = resolveSingleSourceElement({ selectedKeyframes });
+		if (!sourceElement) {
+			return null;
+		}
+
+		const [result] = editor.timeline.getElementsWithTracks({
+			elements: [sourceElement],
+		});
+		if (!result) {
+			return null;
+		}
+
+		const rawItems = selectedKeyframes.flatMap((keyframeRef) => {
+			const item = buildClipboardItem({
+				element: result.element,
+				propertyPath: keyframeRef.propertyPath,
+				keyframeId: keyframeRef.keyframeId,
+			});
+			return item ? [item] : [];
+		});
+		if (rawItems.length === 0) {
+			return null;
+		}
+
+		const minTime = Math.min(...rawItems.map((item) => item.time));
+		const items = rawItems
+			.map(({ time, ...item }) => ({
+				...item,
+				timeOffset: time - minTime,
+			}))
+			.sort(
+				(left, right) =>
+					left.timeOffset - right.timeOffset ||
+					left.propertyPath.localeCompare(right.propertyPath),
+			);
+
+		return {
+			type: "keyframes",
+			sourceElement,
+			items,
+		};
+	},
+
+	paste(entry, { selectedElements, time }) {
+		const targetElement = selectedElements[0];
+		if (!targetElement || entry.items.length === 0) {
+			return null;
+		}
+
+		return new PasteKeyframesCommand({
+			trackId: targetElement.trackId,
+			elementId: targetElement.elementId,
+			time,
+			clipboardItems: entry.items,
+		});
+	},
+} satisfies ClipboardHandler<"keyframes">;
diff --git a/apps/web/src/lib/clipboard/index.ts b/apps/web/src/lib/clipboard/index.ts
new file mode 100644
index 00000000..76d5bddf
--- /dev/null
+++ b/apps/web/src/lib/clipboard/index.ts
@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./handlers";
diff --git a/apps/web/src/lib/clipboard/types.ts b/apps/web/src/lib/clipboard/types.ts
new file mode 100644
index 00000000..41e107ef
--- /dev/null
+++ b/apps/web/src/lib/clipboard/types.ts
@@ -0,0 +1,79 @@
+import type { EditorCore } from "@/core";
+import type {
+	AnimationInterpolation,
+	AnimationPath,
+	AnimationValue,
+	ScalarCurveKeyframePatch,
+	SelectedKeyframeRef,
+} from "@/lib/animation/types";
+import type { Command } from "@/lib/commands/base-command";
+import type {
+	CreateTimelineElement,
+	ElementRef,
+	TrackType,
+} from "@/lib/timeline";
+
+export interface ElementClipboardItem {
+	trackId: string;
+	trackType: TrackType;
+	element: CreateTimelineElement;
+}
+
+export interface KeyframeClipboardCurvePatch {
+	componentKey: string;
+	patch: ScalarCurveKeyframePatch;
+}
+
+export interface KeyframeClipboardItem {
+	propertyPath: AnimationPath;
+	timeOffset: number;
+	value: AnimationValue;
+	interpolation: AnimationInterpolation;
+	curvePatches: KeyframeClipboardCurvePatch[];
+}
+
+export interface ElementsClipboardEntry {
+	type: "elements";
+	items: ElementClipboardItem[];
+}
+
+export interface KeyframesClipboardEntry {
+	type: "keyframes";
+	sourceElement: ElementRef;
+	items: KeyframeClipboardItem[];
+}
+
+export interface ClipboardEntryByType {
+	elements: ElementsClipboardEntry;
+	keyframes: KeyframesClipboardEntry;
+}
+
+export type ClipboardEntry = ClipboardEntryByType[keyof ClipboardEntryByType];
+export type ClipboardEntryType = keyof ClipboardEntryByType;
+
+export interface CopyContext {
+	editor: EditorCore;
+	selectedElements: ElementRef[];
+	selectedKeyframes: SelectedKeyframeRef[];
+}
+
+export interface PasteContext {
+	editor: EditorCore;
+	selectedElements: ElementRef[];
+	selectedKeyframes: SelectedKeyframeRef[];
+	time: number;
+}
+
+export interface ClipboardHandler<TType extends ClipboardEntryType> {
+	type: TType;
+	canCopy(context: CopyContext): boolean;
+	copy(context: CopyContext): ClipboardEntryByType[TType] | null;
+	paste(
+		entry: ClipboardEntryByType[TType],
+		context: PasteContext,
+	): Command | null;
+}
+
+export type ClipboardHandlerMap = {
+	[TType in ClipboardEntryType]: ClipboardHandler<TType>;
+};
diff --git a/apps/web/src/lib/commands/timeline/clipboard/index.ts b/apps/web/src/lib/commands/timeline/clipboard/index.ts
index 11a8bed4..e893b62b 100644
--- a/apps/web/src/lib/commands/timeline/clipboard/index.ts
+++ b/apps/web/src/lib/commands/timeline/clipboard/index.ts
@@ -1 +1,2 @@
 export { PasteCommand } from "./paste";
+export { PasteKeyframesCommand } from "./paste-keyframes";
diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts b/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts
new file mode 100644
index 00000000..210afbd3
--- /dev/null
+++ b/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts
@@ -0,0 +1,135 @@
+import { EditorCore } from "@/core";
+import {
+	getKeyframeAtTime,
+	resolveAnimationTarget,
+	updateScalarKeyframeCurve,
+	upsertPathKeyframe,
+} from "@/lib/animation";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
+import type { KeyframeClipboardItem } from "@/lib/clipboard";
+import type { SceneTracks, TimelineElement } from "@/lib/timeline";
+import { updateElementInSceneTracks } from "@/lib/timeline";
+import { generateUUID } from "@/utils/id";
+
+function pasteKeyframesIntoElement({
+	element,
+	time,
+	clipboardItems,
+}: {
+	element: TimelineElement;
+	time: number;
+	clipboardItems: KeyframeClipboardItem[];
+}): TimelineElement {
+	let nextElement = element;
+
+	for (const item of clipboardItems) {
+		const target = resolveAnimationTarget({
+			element: nextElement,
+			path: item.propertyPath,
+		});
+		if (!target) {
+			continue;
+		}
+
+		const keyframeTime = Math.max(
+			0,
+			Math.min(time + item.timeOffset, nextElement.duration),
+		);
+		const nextAnimations = upsertPathKeyframe({
+			animations: nextElement.animations,
+			propertyPath: item.propertyPath,
+			time: keyframeTime,
+			value: item.value,
+			interpolation: item.interpolation,
+			keyframeId: generateUUID(),
+			kind: target.kind,
+			defaultInterpolation: target.defaultInterpolation,
+			coerceValue: target.coerceValue,
+		});
+		const pastedKeyframe = getKeyframeAtTime({
+			animations: nextAnimations,
+			propertyPath: item.propertyPath,
+			time: keyframeTime,
+		});
+
+		let patchedAnimations = nextAnimations;
+		if (pastedKeyframe) {
+			for (const curvePatch of item.curvePatches) {
+				const nextPatchedAnimations = updateScalarKeyframeCurve({
+					animations: patchedAnimations,
+					propertyPath: item.propertyPath,
+					componentKey: curvePatch.componentKey,
+					keyframeId: pastedKeyframe.id,
+					patch: curvePatch.patch,
+				});
+				patchedAnimations = nextPatchedAnimations ?? patchedAnimations;
+			}
+		}
+
+		nextElement = {
+			...nextElement,
+			animations: patchedAnimations,
+		};
+	}
+
+	return nextElement;
+}
+
+export class PasteKeyframesCommand extends Command {
+	private savedState: SceneTracks | null = null;
+	private readonly trackId: string;
+	private readonly elementId: string;
+	private readonly time: number;
+	private readonly clipboardItems: KeyframeClipboardItem[];
+
+	constructor({
+		trackId,
+		elementId,
+		time,
+		clipboardItems,
+	}: {
+		trackId: string;
+		elementId: string;
+		time: number;
+		clipboardItems: KeyframeClipboardItem[];
+	}) {
+		super();
+		this.trackId = trackId;
+		this.elementId = elementId;
+		this.time = time;
+		this.clipboardItems = clipboardItems;
+	}
+
+	execute(): CommandResult | undefined {
+		if (this.clipboardItems.length === 0) {
+			return undefined;
+		}
+
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.scenes.getActiveScene().tracks;
+
+		const updatedTracks = updateElementInSceneTracks({
+			tracks: this.savedState,
+			trackId: this.trackId,
+			elementId: this.elementId,
+			update: (element) =>
+				pasteKeyframesIntoElement({
+					element,
+					time: this.time,
+					clipboardItems: this.clipboardItems,
+				}),
+		});
+
+		editor.timeline.updateTracks(updatedTracks);
+		return undefined;
+	}
+
+	undo(): void {
+		if (!this.savedState) {
+			return;
+		}
+
+		const editor = EditorCore.getInstance();
+		editor.timeline.updateTracks(this.savedState);
+	}
+}
diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
index 6ccf96fb..347c4f68 100644
--- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts
+++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
@@ -1,10 +1,7 @@
 import { Command, type CommandResult } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
-import type {
-	SceneTracks,
-	TimelineElement,
-	ClipboardItem,
-} from "@/lib/timeline";
+import type { SceneTracks, TimelineElement } from "@/lib/timeline";
+import type { ElementClipboardItem } from "@/lib/clipboard";
 import { generateUUID } from "@/utils/id";
 import { applyPlacement, resolveTrackPlacement, enforceMainTrackStart } from "@/lib/timeline/placement";
 import { cloneAnimations } from "@/lib/animation";
@@ -13,14 +10,14 @@ export class PasteCommand extends Command {
 	private savedState: SceneTracks | null = null;
 	private pastedElements: { trackId: string; elementId: string }[] = [];
 	private readonly time: number;
-	private readonly clipboardItems: ClipboardItem[];
+	private readonly clipboardItems: ElementClipboardItem[];
 
 	constructor({
 		time,
 		clipboardItems,
 	}: {
 		time: number;
-		clipboardItems: ClipboardItem[];
+		clipboardItems: ElementClipboardItem[];
 	}) {
 		super();
 		this.time = time;
@@ -145,9 +142,9 @@ export class PasteCommand extends Command {
 function groupClipboardItemsByTrackId({
 	clipboardItems,
 }: {
-	clipboardItems: ClipboardItem[];
-}): Map<string, ClipboardItem[]> {
-	const groupedItems = new Map<string, ClipboardItem[]>();
+	clipboardItems: ElementClipboardItem[];
+}): Map<string, ElementClipboardItem[]> {
+	const groupedItems = new Map<string, ElementClipboardItem[]>();
 
 	for (const item of clipboardItems) {
 		const existingItems = groupedItems.get(item.trackId) ?? [];
@@ -162,7 +159,7 @@ function buildPastedElements({
 	minStart,
 	time,
 }: {
-	items: ClipboardItem[];
+	items: ElementClipboardItem[];
 	minStart: number;
 	time: number;
 }): TimelineElement[] {
diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
index c757055d..3c3d1c6b 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts
@@ -1,9 +1,7 @@
 import { EditorCore } from "@/core";
 import {
 	hasKeyframesForPath,
-	getKeyframeById,
 	removeElementKeyframe,
-	resolveAnimationPathValueAtTime,
 	resolveAnimationTarget,
 } from "@/lib/animation";
 import { Command, type CommandResult } from "@/lib/commands/base-command";
@@ -11,61 +9,22 @@ import { updateElementInSceneTracks } from "@/lib/timeline";
 import type { AnimationPath, AnimationValue } from "@/lib/animation/types";
 import type { SceneTracks, TimelineElement } from "@/lib/timeline";
 
-function sampleValueBeforeRemoval({
-	element,
-	propertyPath,
-	keyframeId,
-}: {
-	element: TimelineElement;
-	propertyPath: AnimationPath;
-	keyframeId: string;
-}): AnimationValue | null {
-	const target = resolveAnimationTarget({ element, path: propertyPath });
-	if (!target) {
-		return null;
-	}
-	const baseValue = target.getBaseValue();
-	if (baseValue === null) {
-		return null;
-	}
-
-	const keyframe = getKeyframeById({
-		animations: element.animations,
-		propertyPath,
-		keyframeId,
-	});
-	if (!keyframe) {
-		return null;
-	}
-
-	return resolveAnimationPathValueAtTime({
-		animations: element.animations,
-		propertyPath,
-		localTime: keyframe.time,
-		fallbackValue: baseValue,
-	});
-}
-
 function removeKeyframeAndPersist({
 	element,
 	propertyPath,
 	keyframeId,
+	valueAtPlayhead,
 }: {
 	element: TimelineElement;
 	propertyPath: AnimationPath;
 	keyframeId: string;
+	valueAtPlayhead: AnimationValue | null;
 }): TimelineElement {
 	const target = resolveAnimationTarget({ element, path: propertyPath });
 	if (!target) {
 		return element;
 	}
 
-	const valueBefore = sampleValueBeforeRemoval({
-		element,
-		propertyPath,
-		keyframeId,
-	});
-
 	const nextAnimations = removeElementKeyframe({
 		animations: element.animations,
 		propertyPath,
@@ -76,10 +35,12 @@ function removeKeyframeAndPersist({
 		animations: nextAnimations,
 		propertyPath,
 	});
-	const shouldPersistToBase = isChannelNowEmpty && valueBefore !== null;
+
+	// When clearing all keyframes, preserve the value at the playhead (what the user was seeing)
+	const shouldPersistToBase = isChannelNowEmpty && valueAtPlayhead !== null;
 
 	const baseElement = shouldPersistToBase
-		? target.setBaseValue({ value: valueBefore })
+		? target.setBaseValue({ value: valueAtPlayhead })
 		: element;
 
 	return { ...baseElement, animations: nextAnimations };
@@ -91,23 +52,27 @@ export class RemoveKeyframeCommand extends Command {
 	private readonly elementId: string;
 	private readonly propertyPath: AnimationPath;
 	private readonly keyframeId: string;
+	private readonly valueAtPlayhead: AnimationValue | null;
 
 	constructor({
 		trackId,
 		elementId,
 		propertyPath,
 		keyframeId,
+		valueAtPlayhead,
 	}: {
 		trackId: string;
 		elementId: string;
 		propertyPath: AnimationPath;
 		keyframeId: string;
+		valueAtPlayhead: AnimationValue | null;
 	}) {
 		super();
 		this.trackId = trackId;
 		this.elementId = elementId;
 		this.propertyPath = propertyPath;
 		this.keyframeId = keyframeId;
+		this.valueAtPlayhead = valueAtPlayhead;
 	}
 
 	execute(): CommandResult | undefined {
@@ -123,6 +88,7 @@ export class RemoveKeyframeCommand extends Command {
 					element,
 					propertyPath: this.propertyPath,
 					keyframeId: this.keyframeId,
+					valueAtPlayhead: this.valueAtPlayhead,
 				}),
 		});
 
diff --git a/apps/web/src/lib/timeline/types.ts b/apps/web/src/lib/timeline/types.ts
index 1b2c7c9b..ca9ac999 100644
--- a/apps/web/src/lib/timeline/types.ts
+++ b/apps/web/src/lib/timeline/types.ts
@@ -272,6 +272,8 @@ export type CreateTimelineElement =
 export interface ElementDragState {

 	isDragging: boolean;

 	elementId: string | null;

+	dragElementIds: string[];

+	dragTimeOffsets: Record<string, number>;

 	trackId: string | null;

 	startMouseX: number;

 	startMouseY: number;