chore: normalize line endings

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();

+		},

+	};

+}