refactor: unify element params

1 files changed, 90 insertions, 2 deletions

diff --git a/apps/web/src/params/index.ts b/apps/web/src/params/index.ts
index 23085407..bb57a1c4 100644
--- a/apps/web/src/params/index.ts
+++ b/apps/web/src/params/index.ts
@@ -1,4 +1,7 @@
-export type ParamValues = Record<string, number | string | boolean>;
+import { snapToStep } from "@/utils/math";
+
+export type ParamValue = number | string | boolean;
+export type ParamValues = Record<string, ParamValue>;
 
 export type ParamGroup = "stroke";
 
@@ -6,6 +9,8 @@ interface BaseParamDefinition<TKey extends string = string> {
 	key: TKey;
 	label: string;
 	group?: ParamGroup;
+	keyframable?: boolean;
+	dependencies?: Array<{ param: string; equals: ParamValue }>;
 }
 
 export interface NumberParamDefinition<TKey extends string = string>
@@ -42,9 +47,92 @@ export interface SelectParamDefinition<TKey extends string = string>
 	options: Array<{ value: string; label: string }>;
 }
 
+export interface TextParamDefinition<TKey extends string = string>
+	extends BaseParamDefinition<TKey> {
+	type: "text";
+	default: string;
+}
+
+export interface FontParamDefinition<TKey extends string = string>
+	extends BaseParamDefinition<TKey> {
+	type: "font";
+	default: string;
+}
+
 export type ParamDefinition<TKey extends string = string> =
 	| NumberParamDefinition<TKey>
 	| BooleanParamDefinition<TKey>
 	| ColorParamDefinition<TKey>
-	| SelectParamDefinition<TKey>;
+	| SelectParamDefinition<TKey>
+	| TextParamDefinition<TKey>
+	| FontParamDefinition<TKey>;
+
+export function getParamValueKind({
+	param,
+}: {
+	param: ParamDefinition;
+}): "number" | "color" | "discrete" {
+	if (param.type === "number") {
+		return "number";
+	}
+	if (param.type === "color") {
+		return "color";
+	}
+	return "discrete";
+}
 
+export function getParamDefaultInterpolation({
+	param,
+}: {
+	param: ParamDefinition;
+}): "linear" | "hold" {
+	return param.type === "number" || param.type === "color" ? "linear" : "hold";
+}
+
+export function getParamNumericRange({
+	param,
+}: {
+	param: ParamDefinition;
+}): { min?: number; max?: number; step?: number } | undefined {
+	if (param.type !== "number") {
+		return undefined;
+	}
+
+	return {
+		min: param.min,
+		max: param.max,
+		step: param.step,
+	};
+}
+
+export function coerceParamValue({
+	param,
+	value,
+}: {
+	param: ParamDefinition;
+	value: unknown;
+}): ParamValue | null {
+	if (param.type === "number") {
+		if (typeof value !== "number" || Number.isNaN(value)) {
+			return null;
+		}
+
+		const steppedValue = snapToStep({ value, step: param.step });
+		const maxValue = param.max ?? Number.POSITIVE_INFINITY;
+		return Math.min(maxValue, Math.max(param.min, steppedValue));
+	}
+
+	if (param.type === "boolean") {
+		return typeof value === "boolean" ? value : null;
+	}
+
+	if (param.type === "color" || param.type === "text" || param.type === "font") {
+		return typeof value === "string" ? value : null;
+	}
+
+	if (typeof value !== "string") {
+		return null;
+	}
+
+	return param.options.some((option) => option.value === value) ? value : null;
+}