refactor: split animation helpers by domain

3 files changed, 277 insertions, 275 deletions

diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
index 734b514f..80fc171b 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-color-property.ts
@@ -1,95 +1,95 @@
-import { useEditor } from "@/editor/use-editor";

-import {

-	getKeyframeAtTime,

-	hasKeyframesForPath,

-	upsertElementKeyframe,

-} from "@/animation";

-import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types";

-import type { TimelineElement } from "@/timeline";

-

-export function useKeyframedColorProperty({

-	trackId,

-	elementId,

-	animations,

-	propertyPath,

-	localTime,

-	isPlayheadWithinElementRange,

-	resolvedColor,

-	buildBaseUpdates,

-}: {

-	trackId: string;

-	elementId: string;

-	animations: ElementAnimations | undefined;

-	propertyPath: AnimationPropertyPath;

-	localTime: number;

-	isPlayheadWithinElementRange: boolean;

-	resolvedColor: string;

-	buildBaseUpdates: ({ value }: { value: string }) => Partial<TimelineElement>;

-}) {

-	const editor = useEditor();

-

-	const hasAnimatedKeyframes = hasKeyframesForPath({ animations, propertyPath });

-	const keyframeAtTime = isPlayheadWithinElementRange

-		? getKeyframeAtTime({ animations, propertyPath, time: localTime })

-		: null;

-	const keyframeIdAtTime = keyframeAtTime?.id ?? null;

-	const isKeyframedAtTime = keyframeAtTime !== null;

-	const shouldUseAnimatedChannel =

-		hasAnimatedKeyframes && isPlayheadWithinElementRange;

-

-	const onChange = ({ color }: { color: string }) => {

-		if (shouldUseAnimatedChannel) {

-			editor.timeline.previewElements({

-				updates: [

-					{

-						trackId,

-						elementId,

-						updates: {

-							animations: upsertElementKeyframe({

-								animations,

-								propertyPath,

-								time: localTime,

-								value: color,

-							}),

-						},

-					},

-				],

-			});

-			return;

-		}

-

-		editor.timeline.previewElements({

-			updates: [{ trackId, elementId, updates: buildBaseUpdates({ value: color }) }],

-		});

-	};

-

-	const onChangeEnd = () => editor.timeline.commitPreview();

-

-	const toggleKeyframe = () => {

-		if (!isPlayheadWithinElementRange) {

-			return;

-		}

-

-		if (keyframeIdAtTime) {

-			editor.timeline.removeKeyframes({

-				keyframes: [{ trackId, elementId, propertyPath, keyframeId: keyframeIdAtTime }],

-			});

-			return;

-		}

-

-		editor.timeline.upsertKeyframes({

-			keyframes: [

-				{ trackId, elementId, propertyPath, time: localTime, value: resolvedColor },

-			],

-		});

-	};

-

-	return {

-		isKeyframedAtTime,

-		hasAnimatedKeyframes,

-		keyframeIdAtTime,

-		onChange,

-		onChangeEnd,

-		toggleKeyframe,

-	};

-}

+import { useEditor } from "@/editor/use-editor";
+import {
+	getKeyframeAtTime,
+	hasKeyframesForPath,
+} from "@/animation";
+import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types";
+import type { TimelineElement } from "@/timeline";
+import { upsertElementKeyframe } from "@/timeline/animation-properties";
+
+export function useKeyframedColorProperty({
+	trackId,
+	elementId,
+	animations,
+	propertyPath,
+	localTime,
+	isPlayheadWithinElementRange,
+	resolvedColor,
+	buildBaseUpdates,
+}: {
+	trackId: string;
+	elementId: string;
+	animations: ElementAnimations | undefined;
+	propertyPath: AnimationPropertyPath;
+	localTime: number;
+	isPlayheadWithinElementRange: boolean;
+	resolvedColor: string;
+	buildBaseUpdates: ({ value }: { value: string }) => Partial<TimelineElement>;
+}) {
+	const editor = useEditor();
+
+	const hasAnimatedKeyframes = hasKeyframesForPath({ animations, propertyPath });
+	const keyframeAtTime = isPlayheadWithinElementRange
+		? getKeyframeAtTime({ animations, propertyPath, time: localTime })
+		: null;
+	const keyframeIdAtTime = keyframeAtTime?.id ?? null;
+	const isKeyframedAtTime = keyframeAtTime !== null;
+	const shouldUseAnimatedChannel =
+		hasAnimatedKeyframes && isPlayheadWithinElementRange;
+
+	const onChange = ({ color }: { color: string }) => {
+		if (shouldUseAnimatedChannel) {
+			editor.timeline.previewElements({
+				updates: [
+					{
+						trackId,
+						elementId,
+						updates: {
+							animations: upsertElementKeyframe({
+								animations,
+								propertyPath,
+								time: localTime,
+								value: color,
+							}),
+						},
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.previewElements({
+			updates: [{ trackId, elementId, updates: buildBaseUpdates({ value: color }) }],
+		});
+	};
+
+	const onChangeEnd = () => editor.timeline.commitPreview();
+
+	const toggleKeyframe = () => {
+		if (!isPlayheadWithinElementRange) {
+			return;
+		}
+
+		if (keyframeIdAtTime) {
+			editor.timeline.removeKeyframes({
+				keyframes: [{ trackId, elementId, propertyPath, keyframeId: keyframeIdAtTime }],
+			});
+			return;
+		}
+
+		editor.timeline.upsertKeyframes({
+			keyframes: [
+				{ trackId, elementId, propertyPath, time: localTime, value: resolvedColor },
+			],
+		});
+	};
+
+	return {
+		isKeyframedAtTime,
+		hasAnimatedKeyframes,
+		keyframeIdAtTime,
+		onChange,
+		onChangeEnd,
+		toggleKeyframe,
+	};
+}
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
index 9dd39768..32222b7a 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts
@@ -1,174 +1,174 @@
-import { useEditor } from "@/editor/use-editor";

-import {

-	getKeyframeAtTime,

-	hasKeyframesForPath,

-	upsertElementKeyframe,

-} from "@/animation";

-import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types";

-import type { TimelineElement } from "@/timeline";

-import { snapToStep } from "@/utils/math";

-import { usePropertyDraft } from "./use-property-draft";

-

-export function useKeyframedNumberProperty({

-	trackId,

-	elementId,

-	animations,

-	propertyPath,

-	localTime,

-	isPlayheadWithinElementRange,

-	displayValue,

-	parse,

-	valueAtPlayhead,

-	step,

-	buildBaseUpdates,

-	buildAdditionalKeyframes,

-}: {

-	trackId: string;

-	elementId: string;

-	animations: ElementAnimations | undefined;

-	propertyPath: AnimationPropertyPath;

-	localTime: number;

-	isPlayheadWithinElementRange: boolean;

-	displayValue: string;

-	parse: (input: string) => number | null;

-	valueAtPlayhead: number;

-	step?: number;

-	buildBaseUpdates: ({ value }: { value: number }) => Partial<TimelineElement>;

-	buildAdditionalKeyframes?: ({

-		value,

-	}: { value: number }) => Array<{ propertyPath: AnimationPropertyPath; value: number }>;

-}) {

-	const editor = useEditor();

-	const snapValue = (value: number) =>

-		step != null ? snapToStep({ value, step }) : value;

-

-	const hasAnimatedKeyframes = hasKeyframesForPath({ animations, propertyPath });

-	const keyframeAtTime = isPlayheadWithinElementRange

-		? getKeyframeAtTime({ animations, propertyPath, time: localTime })

-		: null;

-	const keyframeIdAtTime = keyframeAtTime?.id ?? null;

-	const isKeyframedAtTime = keyframeAtTime !== null;

-	const shouldUseAnimatedChannel =

-		hasAnimatedKeyframes && isPlayheadWithinElementRange;

-

-	const previewValue = ({ value }: { value: number }) => {

-		const nextValue = snapValue(value);

-		if (shouldUseAnimatedChannel) {

-			const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];

-			const updatedAnimations = [

-				{ propertyPath, value: nextValue },

-				...additionalKeyframes,

-			].reduce(

-				(currentAnimations, keyframe) =>

-					upsertElementKeyframe({

-						animations: currentAnimations,

-						propertyPath: keyframe.propertyPath,

-						time: localTime,

-						value: keyframe.value,

-					}),

-				animations,

-			);

-			editor.timeline.previewElements({

-				updates: [

-					{

-						trackId,

-						elementId,

-						updates: { animations: updatedAnimations },

-					},

-				],

-			});

-			return;

-		}

-

-		editor.timeline.previewElements({

-			updates: [

-				{

-					trackId,

-					elementId,

-					updates: buildBaseUpdates({ value: nextValue }),

-				},

-			],

-		});

-	};

-

-	const propertyDraft = usePropertyDraft({

-		displayValue,

-		parse: (input) => {

-			const parsedValue = parse(input);

-			return parsedValue === null ? null : snapValue(parsedValue);

-		},

-		onPreview: (value) => previewValue({ value }),

-		onCommit: () => editor.timeline.commitPreview(),

-	});

-

-	const toggleKeyframe = () => {

-		if (!isPlayheadWithinElementRange) {

-			return;

-		}

-

-		if (keyframeIdAtTime) {

-			editor.timeline.removeKeyframes({

-				keyframes: [

-					{

-						trackId,

-						elementId,

-						propertyPath,

-						keyframeId: keyframeIdAtTime,

-					},

-				],

-			});

-			return;

-		}

-

-		editor.timeline.upsertKeyframes({

-			keyframes: [

-				{

-					trackId,

-					elementId,

-					propertyPath,

-					time: localTime,

-					value: snapValue(valueAtPlayhead),

-				},

-			],

-		});

-	};

-

-	const commitValue = ({ value }: { value: number }) => {

-		const nextValue = snapValue(value);

-		if (shouldUseAnimatedChannel) {

-			const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];

-			editor.timeline.upsertKeyframes({

-				keyframes: [

-					{ trackId, elementId, propertyPath, time: localTime, value: nextValue },

-					...additionalKeyframes.map((keyframe) => ({

-						trackId,

-						elementId,

-						propertyPath: keyframe.propertyPath,

-						time: localTime,

-						value: keyframe.value,

-					})),

-				],

-			});

-			return;

-		}

-

-		editor.timeline.updateElements({

-			updates: [

-				{

-					trackId,

-					elementId,

-					patch: buildBaseUpdates({ value: nextValue }),

-				},

-			],

-		});

-	};

-

-	return {

-		...propertyDraft,

-		hasAnimatedKeyframes,

-		isKeyframedAtTime,

-		keyframeIdAtTime,

-		toggleKeyframe,

-		commitValue,

-	};

-}

+import { useEditor } from "@/editor/use-editor";
+import {
+	getKeyframeAtTime,
+	hasKeyframesForPath,
+} from "@/animation";
+import type { AnimationPropertyPath, ElementAnimations } from "@/animation/types";
+import type { TimelineElement } from "@/timeline";
+import { upsertElementKeyframe } from "@/timeline/animation-properties";
+import { snapToStep } from "@/utils/math";
+import { usePropertyDraft } from "./use-property-draft";
+
+export function useKeyframedNumberProperty({
+	trackId,
+	elementId,
+	animations,
+	propertyPath,
+	localTime,
+	isPlayheadWithinElementRange,
+	displayValue,
+	parse,
+	valueAtPlayhead,
+	step,
+	buildBaseUpdates,
+	buildAdditionalKeyframes,
+}: {
+	trackId: string;
+	elementId: string;
+	animations: ElementAnimations | undefined;
+	propertyPath: AnimationPropertyPath;
+	localTime: number;
+	isPlayheadWithinElementRange: boolean;
+	displayValue: string;
+	parse: (input: string) => number | null;
+	valueAtPlayhead: number;
+	step?: number;
+	buildBaseUpdates: ({ value }: { value: number }) => Partial<TimelineElement>;
+	buildAdditionalKeyframes?: ({
+		value,
+	}: { value: number }) => Array<{ propertyPath: AnimationPropertyPath; value: number }>;
+}) {
+	const editor = useEditor();
+	const snapValue = (value: number) =>
+		step != null ? snapToStep({ value, step }) : value;
+
+	const hasAnimatedKeyframes = hasKeyframesForPath({ animations, propertyPath });
+	const keyframeAtTime = isPlayheadWithinElementRange
+		? getKeyframeAtTime({ animations, propertyPath, time: localTime })
+		: null;
+	const keyframeIdAtTime = keyframeAtTime?.id ?? null;
+	const isKeyframedAtTime = keyframeAtTime !== null;
+	const shouldUseAnimatedChannel =
+		hasAnimatedKeyframes && isPlayheadWithinElementRange;
+
+	const previewValue = ({ value }: { value: number }) => {
+		const nextValue = snapValue(value);
+		if (shouldUseAnimatedChannel) {
+			const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];
+			const updatedAnimations = [
+				{ propertyPath, value: nextValue },
+				...additionalKeyframes,
+			].reduce(
+				(currentAnimations, keyframe) =>
+					upsertElementKeyframe({
+						animations: currentAnimations,
+						propertyPath: keyframe.propertyPath,
+						time: localTime,
+						value: keyframe.value,
+					}),
+				animations,
+			);
+			editor.timeline.previewElements({
+				updates: [
+					{
+						trackId,
+						elementId,
+						updates: { animations: updatedAnimations },
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.previewElements({
+			updates: [
+				{
+					trackId,
+					elementId,
+					updates: buildBaseUpdates({ value: nextValue }),
+				},
+			],
+		});
+	};
+
+	const propertyDraft = usePropertyDraft({
+		displayValue,
+		parse: (input) => {
+			const parsedValue = parse(input);
+			return parsedValue === null ? null : snapValue(parsedValue);
+		},
+		onPreview: (value) => previewValue({ value }),
+		onCommit: () => editor.timeline.commitPreview(),
+	});
+
+	const toggleKeyframe = () => {
+		if (!isPlayheadWithinElementRange) {
+			return;
+		}
+
+		if (keyframeIdAtTime) {
+			editor.timeline.removeKeyframes({
+				keyframes: [
+					{
+						trackId,
+						elementId,
+						propertyPath,
+						keyframeId: keyframeIdAtTime,
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.upsertKeyframes({
+			keyframes: [
+				{
+					trackId,
+					elementId,
+					propertyPath,
+					time: localTime,
+					value: snapValue(valueAtPlayhead),
+				},
+			],
+		});
+	};
+
+	const commitValue = ({ value }: { value: number }) => {
+		const nextValue = snapValue(value);
+		if (shouldUseAnimatedChannel) {
+			const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];
+			editor.timeline.upsertKeyframes({
+				keyframes: [
+					{ trackId, elementId, propertyPath, time: localTime, value: nextValue },
+					...additionalKeyframes.map((keyframe) => ({
+						trackId,
+						elementId,
+						propertyPath: keyframe.propertyPath,
+						time: localTime,
+						value: keyframe.value,
+					})),
+				],
+			});
+			return;
+		}
+
+		editor.timeline.updateElements({
+			updates: [
+				{
+					trackId,
+					elementId,
+					patch: buildBaseUpdates({ value: nextValue }),
+				},
+			],
+		});
+	};
+
+	return {
+		...propertyDraft,
+		hasAnimatedKeyframes,
+		isKeyframedAtTime,
+		keyframeIdAtTime,
+		toggleKeyframe,
+		commitValue,
+	};
+}
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
index b0b6f01a..18e027c7 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-param-property.ts
@@ -3,16 +3,18 @@
 import { useEditor } from "@/editor/use-editor";
 import {
 	buildGraphicParamPath,
-	coerceAnimationValueForParam,
 	getKeyframeAtTime,
-	getParamDefaultInterpolation,
-	getParamValueKind,
 	hasKeyframesForPath,
 	upsertPathKeyframe,
 } from "@/animation";
 import type {
 	ElementAnimations,
 } from "@/animation/types";
+import {
+	coerceAnimationParamValue,
+	getAnimationParamDefaultInterpolation,
+	getAnimationParamValueKind,
+} from "@/animation/animated-params";
 import type { ParamDefinition } from "@/params";
 import type { TimelineElement } from "@/timeline";
 
@@ -79,12 +81,12 @@ export function useKeyframedParamProperty({
 								propertyPath,
 								time: localTime,
 								value,
-								kind: getParamValueKind({ param }),
-								defaultInterpolation: getParamDefaultInterpolation({
+								kind: getAnimationParamValueKind({ param }),
+								defaultInterpolation: getAnimationParamDefaultInterpolation({
 									param,
 								}),
 								coerceValue: ({ value: nextValue }) =>
-									coerceAnimationValueForParam({
+									coerceAnimationParamValue({
 										param,
 										value: nextValue,
 									}),