6 files changed, 690 insertions, 690 deletions
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
index 46e6cb6d..95f338e1 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts
@@ -1,24 +1,24 @@
-import { useEditor } from "@/hooks/use-editor";
-import { getElementLocalTime } from "@/lib/animation";
-import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
-
-export function useElementPlayhead({
-	startTime,
-	duration,
-}: {
-	startTime: number;
-	duration: number;
-}) {
-	const editor = useEditor();
-	const playheadTime = editor.playback.getCurrentTime();
-	const localTime = getElementLocalTime({
-		timelineTime: playheadTime,
-		elementStartTime: startTime,
-		elementDuration: duration,
-	});
-	const isPlayheadWithinElementRange =
-		playheadTime >= startTime - TIME_EPSILON_SECONDS &&
-		playheadTime <= startTime + duration + TIME_EPSILON_SECONDS;
-
-	return { localTime, isPlayheadWithinElementRange };
-}
+import { useEditor } from "@/hooks/use-editor";
+import { getElementLocalTime } from "@/lib/animation";
+import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
+
+export function useElementPlayhead({
+	startTime,
+	duration,
+}: {
+	startTime: number;
+	duration: number;
+}) {
+	const editor = useEditor();
+	const playheadTime = editor.playback.getCurrentTime();
+	const localTime = getElementLocalTime({
+		timelineTime: playheadTime,
+		elementStartTime: startTime,
+		elementDuration: duration,
+	});
+	const isPlayheadWithinElementRange =
+		playheadTime >= startTime - TIME_EPSILON_SECONDS &&
+		playheadTime <= startTime + duration + TIME_EPSILON_SECONDS;
+
+	return { localTime, isPlayheadWithinElementRange };
+}
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 957ee1c9..a42e422f 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 "@/hooks/use-editor";
-import {
-	getKeyframeAtTime,
-	hasKeyframesForPath,
-	upsertElementKeyframe,
-} from "@/lib/animation";
-import type { AnimationPropertyPath, ElementAnimations } from "@/lib/animation/types";
-import type { TimelineElement } from "@/lib/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 "@/hooks/use-editor";
+import {
+	getKeyframeAtTime,
+	hasKeyframesForPath,
+	upsertElementKeyframe,
+} from "@/lib/animation";
+import type { AnimationPropertyPath, ElementAnimations } from "@/lib/animation/types";
+import type { TimelineElement } from "@/lib/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,
+	};
+}
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 0f0168f8..ddd3d2e4 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,161 +1,161 @@
-import { useEditor } from "@/hooks/use-editor";
-import {
-	getKeyframeAtTime,
-	hasKeyframesForPath,
-	upsertElementKeyframe,
-} from "@/lib/animation";
-import type { AnimationPropertyPath, ElementAnimations } from "@/lib/animation/types";
-import type { TimelineElement } from "@/lib/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,
-}: {
-	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>;
-}) {
-	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) {
-			editor.timeline.previewElements({
-				updates: [
-					{
-						trackId,
-						elementId,
-						updates: {
-							animations: upsertElementKeyframe({
-								animations,
-								propertyPath,
-								time: localTime,
-								value: nextValue,
-							}),
-						},
-					},
-				],
-			});
-			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) {
-			editor.timeline.upsertKeyframes({
-				keyframes: [
-					{
-						trackId,
-						elementId,
-						propertyPath,
-						time: localTime,
-						value: nextValue,
-					},
-				],
-			});
-			return;
-		}
-
-		editor.timeline.updateElements({
-			updates: [
-				{
-					trackId,
-					elementId,
-					updates: buildBaseUpdates({ value: nextValue }),
-				},
-			],
-		});
-	};
-
-	return {
-		...propertyDraft,
-		hasAnimatedKeyframes,
-		isKeyframedAtTime,
-		keyframeIdAtTime,
-		toggleKeyframe,
-		commitValue,
-	};
-}
+import { useEditor } from "@/hooks/use-editor";
+import {
+	getKeyframeAtTime,
+	hasKeyframesForPath,
+	upsertElementKeyframe,
+} from "@/lib/animation";
+import type { AnimationPropertyPath, ElementAnimations } from "@/lib/animation/types";
+import type { TimelineElement } from "@/lib/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,
+}: {
+	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>;
+}) {
+	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) {
+			editor.timeline.previewElements({
+				updates: [
+					{
+						trackId,
+						elementId,
+						updates: {
+							animations: upsertElementKeyframe({
+								animations,
+								propertyPath,
+								time: localTime,
+								value: nextValue,
+							}),
+						},
+					},
+				],
+			});
+			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) {
+			editor.timeline.upsertKeyframes({
+				keyframes: [
+					{
+						trackId,
+						elementId,
+						propertyPath,
+						time: localTime,
+						value: nextValue,
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.updateElements({
+			updates: [
+				{
+					trackId,
+					elementId,
+					updates: 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 335e3fb6..92b5d634 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
@@ -1,148 +1,148 @@
-"use client";
-
-import { useEditor } from "@/hooks/use-editor";
-import {
-	buildGraphicParamPath,
-	getKeyframeAtTime,
-	getParamDefaultInterpolation,
-	getParamValueKind,
-	hasKeyframesForPath,
-	upsertPathKeyframe,
-} from "@/lib/animation";
-import type {
-	ElementAnimations,
-} from "@/lib/animation/types";
-import type { ParamDefinition } from "@/lib/params";
-import type { TimelineElement } from "@/lib/timeline";
-
-export interface KeyframedParamPropertyResult {
-	hasAnimatedKeyframes: boolean;
-	isKeyframedAtTime: boolean;
-	keyframeIdAtTime: string | null;
-	onPreview: (value: number | string | boolean) => void;
-	onCommit: () => void;
-	toggleKeyframe: () => void;
-}
-
-export function useKeyframedParamProperty({
-	param,
-	trackId,
-	elementId,
-	animations,
-	localTime,
-	isPlayheadWithinElementRange,
-	resolvedValue,
-	buildBaseUpdates,
-}: {
-	param: ParamDefinition;
-	trackId: string;
-	elementId: string;
-	animations: ElementAnimations | undefined;
-	localTime: number;
-	isPlayheadWithinElementRange: boolean;
-	resolvedValue: number | string | boolean;
-	buildBaseUpdates: ({
-		value,
-	}: {
-		value: number | string | boolean;
-	}) => Partial<TimelineElement>;
-}): KeyframedParamPropertyResult {
-	const editor = useEditor();
-	const propertyPath = buildGraphicParamPath({ paramKey: param.key });
-	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: KeyframedParamPropertyResult["onPreview"] = (value) => {
-		if (shouldUseAnimatedChannel) {
-			editor.timeline.previewElements({
-				updates: [
-					{
-						trackId,
-						elementId,
-						updates: {
-							animations: upsertPathKeyframe({
-								animations,
-								propertyPath,
-								time: localTime,
-								value,
-								valueKind: getParamValueKind({ param }),
-								defaultInterpolation: getParamDefaultInterpolation({
-									param,
-								}),
-								numericRange:
-									param.type === "number"
-										? { min: param.min, max: param.max, step: param.step }
-										: undefined,
-							}),
-						},
-					},
-				],
-			});
-			return;
-		}
-
-		editor.timeline.previewElements({
-			updates: [
-				{
-					trackId,
-					elementId,
-					updates: buildBaseUpdates({ value }),
-				},
-			],
-		});
-	};
-
-	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: resolvedValue,
-				},
-			],
-		});
-	};
-
-	return {
-		hasAnimatedKeyframes,
-		isKeyframedAtTime,
-		keyframeIdAtTime,
-		onPreview: previewValue,
-		onCommit: () => editor.timeline.commitPreview(),
-		toggleKeyframe,
-	};
-}
+"use client";
+
+import { useEditor } from "@/hooks/use-editor";
+import {
+	buildGraphicParamPath,
+	getKeyframeAtTime,
+	getParamDefaultInterpolation,
+	getParamValueKind,
+	hasKeyframesForPath,
+	upsertPathKeyframe,
+} from "@/lib/animation";
+import type {
+	ElementAnimations,
+} from "@/lib/animation/types";
+import type { ParamDefinition } from "@/lib/params";
+import type { TimelineElement } from "@/lib/timeline";
+
+export interface KeyframedParamPropertyResult {
+	hasAnimatedKeyframes: boolean;
+	isKeyframedAtTime: boolean;
+	keyframeIdAtTime: string | null;
+	onPreview: (value: number | string | boolean) => void;
+	onCommit: () => void;
+	toggleKeyframe: () => void;
+}
+
+export function useKeyframedParamProperty({
+	param,
+	trackId,
+	elementId,
+	animations,
+	localTime,
+	isPlayheadWithinElementRange,
+	resolvedValue,
+	buildBaseUpdates,
+}: {
+	param: ParamDefinition;
+	trackId: string;
+	elementId: string;
+	animations: ElementAnimations | undefined;
+	localTime: number;
+	isPlayheadWithinElementRange: boolean;
+	resolvedValue: number | string | boolean;
+	buildBaseUpdates: ({
+		value,
+	}: {
+		value: number | string | boolean;
+	}) => Partial<TimelineElement>;
+}): KeyframedParamPropertyResult {
+	const editor = useEditor();
+	const propertyPath = buildGraphicParamPath({ paramKey: param.key });
+	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: KeyframedParamPropertyResult["onPreview"] = (value) => {
+		if (shouldUseAnimatedChannel) {
+			editor.timeline.previewElements({
+				updates: [
+					{
+						trackId,
+						elementId,
+						updates: {
+							animations: upsertPathKeyframe({
+								animations,
+								propertyPath,
+								time: localTime,
+								value,
+								valueKind: getParamValueKind({ param }),
+								defaultInterpolation: getParamDefaultInterpolation({
+									param,
+								}),
+								numericRange:
+									param.type === "number"
+										? { min: param.min, max: param.max, step: param.step }
+										: undefined,
+							}),
+						},
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.previewElements({
+			updates: [
+				{
+					trackId,
+					elementId,
+					updates: buildBaseUpdates({ value }),
+				},
+			],
+		});
+	};
+
+	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: resolvedValue,
+				},
+			],
+		});
+	};
+
+	return {
+		hasAnimatedKeyframes,
+		isKeyframedAtTime,
+		keyframeIdAtTime,
+		onPreview: previewValue,
+		onCommit: () => editor.timeline.commitPreview(),
+		toggleKeyframe,
+	};
+}
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts
index 188f05cb..a342859c 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts
@@ -1,190 +1,190 @@
-import { useEditor } from "@/hooks/use-editor";
-import {
-	getKeyframeAtTime,
-	hasKeyframesForPath,
-	upsertElementKeyframe,
-} from "@/lib/animation";
-import type {
-	AnimationPropertyPath,
-	ElementAnimations,
-	VectorValue,
-} from "@/lib/animation/types";
-import type { TimelineElement } from "@/lib/timeline";
-import { snapToStep } from "@/utils/math";
-import { usePropertyDraft } from "./use-property-draft";
-
-export function useKeyframedVectorProperty({
-	trackId,
-	elementId,
-	animations,
-	propertyPath,
-	localTime,
-	isPlayheadWithinElementRange,
-	resolvedValue,
-	displayX,
-	displayY,
-	parseComponent,
-	step,
-	buildBaseUpdates,
-}: {
-	trackId: string;
-	elementId: string;
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPropertyPath;
-	localTime: number;
-	isPlayheadWithinElementRange: boolean;
-	resolvedValue: VectorValue;
-	displayX: string;
-	displayY: string;
-	parseComponent: (input: string) => number | null;
-	step?: number;
-	buildBaseUpdates: ({
-		value,
-	}: {
-		value: VectorValue;
-	}) => Partial<TimelineElement>;
-}) {
-	const editor = useEditor();
-	const snapComponentValue = (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 previewVector = ({ value }: { value: VectorValue }) => {
-		const nextValue = {
-			x: snapComponentValue(value.x),
-			y: snapComponentValue(value.y),
-		};
-		if (shouldUseAnimatedChannel) {
-			editor.timeline.previewElements({
-				updates: [
-					{
-						trackId,
-						elementId,
-						updates: {
-							animations: upsertElementKeyframe({
-								animations,
-								propertyPath,
-								time: localTime,
-								value: nextValue,
-							}),
-						},
-					},
-				],
-			});
-			return;
-		}
-
-		editor.timeline.previewElements({
-			updates: [{ trackId, elementId, updates: buildBaseUpdates({ value: nextValue }) }],
-		});
-	};
-
-	const x = usePropertyDraft({
-		displayValue: displayX,
-		parse: (input) => {
-			const parsedValue = parseComponent(input);
-			return parsedValue === null ? null : snapComponentValue(parsedValue);
-		},
-		onPreview: (xVal) =>
-			previewVector({ value: { x: xVal, y: resolvedValue.y } }),
-		onCommit: () => editor.timeline.commitPreview(),
-	});
-
-	const y = usePropertyDraft({
-		displayValue: displayY,
-		parse: (input) => {
-			const parsedValue = parseComponent(input);
-			return parsedValue === null ? null : snapComponentValue(parsedValue);
-		},
-		onPreview: (yVal) =>
-			previewVector({ value: { x: resolvedValue.x, y: yVal } }),
-		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: resolvedValue,
-				},
-			],
-		});
-	};
-
-	const commitX = ({ value }: { value: number }) => {
-		const vector: VectorValue = {
-			x: snapComponentValue(value),
-			y: snapComponentValue(resolvedValue.y),
-		};
-		if (shouldUseAnimatedChannel) {
-			editor.timeline.upsertKeyframes({
-				keyframes: [
-					{ trackId, elementId, propertyPath, time: localTime, value: vector },
-				],
-			});
-			return;
-		}
-		editor.timeline.updateElements({
-			updates: [
-				{ trackId, elementId, updates: buildBaseUpdates({ value: vector }) },
-			],
-		});
-	};
-
-	const commitY = ({ value }: { value: number }) => {
-		const vector: VectorValue = {
-			x: snapComponentValue(resolvedValue.x),
-			y: snapComponentValue(value),
-		};
-		if (shouldUseAnimatedChannel) {
-			editor.timeline.upsertKeyframes({
-				keyframes: [
-					{ trackId, elementId, propertyPath, time: localTime, value: vector },
-				],
-			});
-			return;
-		}
-		editor.timeline.updateElements({
-			updates: [
-				{ trackId, elementId, updates: buildBaseUpdates({ value: vector }) },
-			],
-		});
-	};
-
-	return {
-		x,
-		y,
-		hasAnimatedKeyframes,
-		isKeyframedAtTime,
-		keyframeIdAtTime,
-		toggleKeyframe,
-		commitX,
-		commitY,
-	};
-}
+import { useEditor } from "@/hooks/use-editor";
+import {
+	getKeyframeAtTime,
+	hasKeyframesForPath,
+	upsertElementKeyframe,
+} from "@/lib/animation";
+import type {
+	AnimationPropertyPath,
+	ElementAnimations,
+	VectorValue,
+} from "@/lib/animation/types";
+import type { TimelineElement } from "@/lib/timeline";
+import { snapToStep } from "@/utils/math";
+import { usePropertyDraft } from "./use-property-draft";
+
+export function useKeyframedVectorProperty({
+	trackId,
+	elementId,
+	animations,
+	propertyPath,
+	localTime,
+	isPlayheadWithinElementRange,
+	resolvedValue,
+	displayX,
+	displayY,
+	parseComponent,
+	step,
+	buildBaseUpdates,
+}: {
+	trackId: string;
+	elementId: string;
+	animations: ElementAnimations | undefined;
+	propertyPath: AnimationPropertyPath;
+	localTime: number;
+	isPlayheadWithinElementRange: boolean;
+	resolvedValue: VectorValue;
+	displayX: string;
+	displayY: string;
+	parseComponent: (input: string) => number | null;
+	step?: number;
+	buildBaseUpdates: ({
+		value,
+	}: {
+		value: VectorValue;
+	}) => Partial<TimelineElement>;
+}) {
+	const editor = useEditor();
+	const snapComponentValue = (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 previewVector = ({ value }: { value: VectorValue }) => {
+		const nextValue = {
+			x: snapComponentValue(value.x),
+			y: snapComponentValue(value.y),
+		};
+		if (shouldUseAnimatedChannel) {
+			editor.timeline.previewElements({
+				updates: [
+					{
+						trackId,
+						elementId,
+						updates: {
+							animations: upsertElementKeyframe({
+								animations,
+								propertyPath,
+								time: localTime,
+								value: nextValue,
+							}),
+						},
+					},
+				],
+			});
+			return;
+		}
+
+		editor.timeline.previewElements({
+			updates: [{ trackId, elementId, updates: buildBaseUpdates({ value: nextValue }) }],
+		});
+	};
+
+	const x = usePropertyDraft({
+		displayValue: displayX,
+		parse: (input) => {
+			const parsedValue = parseComponent(input);
+			return parsedValue === null ? null : snapComponentValue(parsedValue);
+		},
+		onPreview: (xVal) =>
+			previewVector({ value: { x: xVal, y: resolvedValue.y } }),
+		onCommit: () => editor.timeline.commitPreview(),
+	});
+
+	const y = usePropertyDraft({
+		displayValue: displayY,
+		parse: (input) => {
+			const parsedValue = parseComponent(input);
+			return parsedValue === null ? null : snapComponentValue(parsedValue);
+		},
+		onPreview: (yVal) =>
+			previewVector({ value: { x: resolvedValue.x, y: yVal } }),
+		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: resolvedValue,
+				},
+			],
+		});
+	};
+
+	const commitX = ({ value }: { value: number }) => {
+		const vector: VectorValue = {
+			x: snapComponentValue(value),
+			y: snapComponentValue(resolvedValue.y),
+		};
+		if (shouldUseAnimatedChannel) {
+			editor.timeline.upsertKeyframes({
+				keyframes: [
+					{ trackId, elementId, propertyPath, time: localTime, value: vector },
+				],
+			});
+			return;
+		}
+		editor.timeline.updateElements({
+			updates: [
+				{ trackId, elementId, updates: buildBaseUpdates({ value: vector }) },
+			],
+		});
+	};
+
+	const commitY = ({ value }: { value: number }) => {
+		const vector: VectorValue = {
+			x: snapComponentValue(resolvedValue.x),
+			y: snapComponentValue(value),
+		};
+		if (shouldUseAnimatedChannel) {
+			editor.timeline.upsertKeyframes({
+				keyframes: [
+					{ trackId, elementId, propertyPath, time: localTime, value: vector },
+				],
+			});
+			return;
+		}
+		editor.timeline.updateElements({
+			updates: [
+				{ trackId, elementId, updates: buildBaseUpdates({ value: vector }) },
+			],
+		});
+	};
+
+	return {
+		x,
+		y,
+		hasAnimatedKeyframes,
+		isKeyframedAtTime,
+		keyframeIdAtTime,
+		toggleKeyframe,
+		commitX,
+		commitY,
+	};
+}
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-property-draft.ts b/apps/web/src/components/editor/panels/properties/hooks/use-property-draft.ts
index 395666cb..0e7ae6a7 100644
--- a/apps/web/src/components/editor/panels/properties/hooks/use-property-draft.ts
+++ b/apps/web/src/components/editor/panels/properties/hooks/use-property-draft.ts
@@ -1,72 +1,72 @@
-import { useReducer, useRef } from "react";
-import { evaluateMathExpression } from "@/utils/math";
-
-function looksLikeExpression({ input }: { input: string }): boolean {
-	const trimmed = input.trim();
-	if (!trimmed) return false;
-	if (/[+*/]/.test(input)) return true;
-	const minusIndex = trimmed.indexOf("-");
-	return minusIndex > 0;
-}
-
-export function usePropertyDraft<T>({
-	displayValue: sourceDisplay,
-	parse,
-	onPreview,
-	onCommit,
-	supportsExpressions = true,
-}: {
-	displayValue: string;
-	parse: (input: string) => T | null;
-	onPreview: (value: T) => void;
-	onCommit: () => void;
-	supportsExpressions?: boolean;
-}) {
-	const [, forceRender] = useReducer(
-		(renderVersion: number) => renderVersion + 1,
-		0,
-	);
-	const isEditing = useRef(false);
-	const draft = useRef("");
-
-	return {
-		displayValue: isEditing.current ? draft.current : sourceDisplay,
-		scrubTo: (value: number) => {
-			const parsed = parse(String(value));
-			if (parsed !== null) onPreview(parsed);
-		},
-		commitScrub: onCommit,
-		onFocus: () => {
-			isEditing.current = true;
-			draft.current = sourceDisplay;
-			forceRender();
-		},
-		onChange: (
-			event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-		) => {
-			draft.current = event.target.value;
-			forceRender();
-
-			const parsed = parse(event.target.value);
-			if (parsed !== null) {
-				onPreview(parsed);
-			}
-		},
-		onBlur: () => {
-			if (
-				supportsExpressions &&
-				looksLikeExpression({ input: draft.current })
-			) {
-				const evaluated = evaluateMathExpression({ input: draft.current });
-				if (evaluated !== null) {
-					const parsed = parse(String(evaluated));
-					if (parsed !== null) onPreview(parsed);
-				}
-			}
-			onCommit();
-			isEditing.current = false;
-			draft.current = "";
-			forceRender();
-		},
-	};
-}
+import { useReducer, useRef } from "react";
+import { evaluateMathExpression } from "@/utils/math";
+
+function looksLikeExpression({ input }: { input: string }): boolean {
+	const trimmed = input.trim();
+	if (!trimmed) return false;
+	if (/[+*/]/.test(input)) return true;
+	const minusIndex = trimmed.indexOf("-");
+	return minusIndex > 0;
+}
+
+export function usePropertyDraft<T>({
+	displayValue: sourceDisplay,
+	parse,
+	onPreview,
+	onCommit,
+	supportsExpressions = true,
+}: {
+	displayValue: string;
+	parse: (input: string) => T | null;
+	onPreview: (value: T) => void;
+	onCommit: () => void;
+	supportsExpressions?: boolean;
+}) {
+	const [, forceRender] = useReducer(
+		(renderVersion: number) => renderVersion + 1,
+		0,
+	);
+	const isEditing = useRef(false);
+	const draft = useRef("");
+
+	return {
+		displayValue: isEditing.current ? draft.current : sourceDisplay,
+		scrubTo: (value: number) => {
+			const parsed = parse(String(value));
+			if (parsed !== null) onPreview(parsed);
+		},
+		commitScrub: onCommit,
+		onFocus: () => {
+			isEditing.current = true;
+			draft.current = sourceDisplay;
+			forceRender();
+		},
+		onChange: (
+			event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+		) => {
+			draft.current = event.target.value;
+			forceRender();
+
+			const parsed = parse(event.target.value);
+			if (parsed !== null) {
+				onPreview(parsed);
+			}
+		},
+		onBlur: () => {
+			if (
+				supportsExpressions &&
+				looksLikeExpression({ input: draft.current })
+			) {
+				const evaluated = evaluateMathExpression({ input: draft.current });
+				if (evaluated !== null) {
+					const parsed = parse(String(evaluated));
+					if (parsed !== null) onPreview(parsed);
+				}
+			}
+			onCommit();
+			isEditing.current = false;
+			draft.current = "";
+			forceRender();
+		},
+	};
+}