feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 47 insertions, 8 deletions

diff --git a/apps/web/src/lib/animation/effect-param-channel.ts b/apps/web/src/lib/animation/effect-param-channel.ts
index 07efe4d8..323d9f54 100644
--- a/apps/web/src/lib/animation/effect-param-channel.ts
+++ b/apps/web/src/lib/animation/effect-param-channel.ts
@@ -1,8 +1,10 @@
-import type { Effect, EffectParamValues } from "@/types/effects";
+import type { ParamValues } from "@/lib/params";
+import type { Effect } from "@/lib/effects/types";
 import type {
 	ElementAnimations,
+	EffectParamPath,
 	NumberAnimationChannel,
-} from "@/types/animation";
+} from "@/lib/animation/types";
 import {
 	getChannel,
 	removeKeyframe,
@@ -11,19 +13,56 @@ import {
 } from "./keyframes";
 import { getChannelValueAtTime } from "./interpolation";
 
-const EFFECT_PARAM_PATH_PREFIX = "effects.";
-const EFFECT_PARAM_PATH_SUFFIX = ".params.";
+export const EFFECT_PARAM_PATH_PREFIX = "effects.";
+export const EFFECT_PARAM_PATH_SUFFIX = ".params.";
 
-function buildEffectParamPath({
+export function buildEffectParamPath({
 	effectId,
 	paramKey,
 }: {
 	effectId: string;
 	paramKey: string;
-}): string {
+}): EffectParamPath {
 	return `${EFFECT_PARAM_PATH_PREFIX}${effectId}${EFFECT_PARAM_PATH_SUFFIX}${paramKey}`;
 }
 
+export function isEffectParamPath({
+	propertyPath,
+}: {
+	propertyPath: string;
+}): propertyPath is EffectParamPath {
+	return (
+		propertyPath.startsWith(EFFECT_PARAM_PATH_PREFIX) &&
+		propertyPath.includes(EFFECT_PARAM_PATH_SUFFIX)
+	);
+}
+
+export function parseEffectParamPath({
+	propertyPath,
+}: {
+	propertyPath: string;
+}): { effectId: string; paramKey: string } | null {
+	if (!isEffectParamPath({ propertyPath })) {
+		return null;
+	}
+
+	const withoutPrefix = propertyPath.slice(EFFECT_PARAM_PATH_PREFIX.length);
+	const separatorIndex = withoutPrefix.indexOf(EFFECT_PARAM_PATH_SUFFIX);
+	if (separatorIndex <= 0) {
+		return null;
+	}
+
+	const effectId = withoutPrefix.slice(0, separatorIndex);
+	const paramKey = withoutPrefix.slice(
+		separatorIndex + EFFECT_PARAM_PATH_SUFFIX.length,
+	);
+	if (!effectId || !paramKey) {
+		return null;
+	}
+
+	return { effectId, paramKey };
+}
+
 export function resolveEffectParamsAtTime({
 	effect,
 	animations,
@@ -32,8 +71,8 @@ export function resolveEffectParamsAtTime({
 	effect: Effect;
 	animations: ElementAnimations | undefined;
 	localTime: number;
-}): EffectParamValues {
-	const resolved: EffectParamValues = {};
+}): ParamValues {
+	const resolved: ParamValues = {};
 
 	for (const [paramKey, staticValue] of Object.entries(effect.params)) {
 		const path = buildEffectParamPath({ effectId: effect.id, paramKey });