4 files changed, 21 insertions, 40 deletions

diff --git a/apps/web/src/timeline/animation-targets.ts b/apps/web/src/timeline/animation-targets.ts
index fcdb2915..4ee764b6 100644
--- a/apps/web/src/timeline/animation-targets.ts
+++ b/apps/web/src/timeline/animation-targets.ts
@@ -1,8 +1,6 @@
 import type {
-	AnimationBindingKind,
 	AnimationInterpolation,
 	AnimationPath,
-	AnimationValue,
 	NumericSpec,
 } from "@/animation/types";
 import {
@@ -16,9 +14,11 @@ import { getGraphicDefinition } from "@/graphics";
 import {
 	coerceParamValue,
 	getParamDefaultInterpolation,
+	getParamChannelLayout,
 	getParamNumericRange,
-	getParamValueKind,
+	type ParamChannelLayout,
 	type ParamDefinition,
+	type ParamValue,
 	type ParamValues,
 } from "@/params";
 import {
@@ -28,17 +28,16 @@ import type { TimelineElement } from "@/timeline";
 import { isVisualElement } from "@/timeline/element-utils";
 
 export interface AnimationPathDescriptor {
-	kind: AnimationBindingKind;
+	channelLayout: ParamChannelLayout;
 	defaultInterpolation: AnimationInterpolation;
 	numericRanges?: Partial<Record<string, NumericSpec>>;
-	coerceValue: ({ value }: { value: AnimationValue }) => AnimationValue | null;
-	getBaseValue: () => AnimationValue | null;
-	setBaseValue: ({ value }: { value: AnimationValue }) => TimelineElement;
+	coerceValue: ({ value }: { value: ParamValue }) => ParamValue | null;
+	getBaseValue: () => ParamValue | null;
+	setBaseValue: ({ value }: { value: ParamValue }) => TimelineElement;
 }
 
-// Number/discrete bindings expose a single component named "value"
-// (see binding-values.ts). Multi-component kinds (vector2, color) don't carry
-// numeric ranges yet — revisit when one does.
+// Leaf params expose a single component named "value". Composite params don't
+// carry numeric ranges yet — revisit when one does.
 function paramNumericRanges({
 	param,
 }: {
@@ -62,7 +61,7 @@ function buildParamDescriptor({
 	}
 
 	return {
-		kind: getParamValueKind({ param }),
+		channelLayout: getParamChannelLayout({ param }),
 		defaultInterpolation: getParamDefaultInterpolation({ param }),
 		numericRanges: paramNumericRanges({ param }),
 		coerceValue: ({ value }) => coerceParamValue({ param, value }),
diff --git a/apps/web/src/timeline/audio-separation/index.ts b/apps/web/src/timeline/audio-separation/index.ts
index dd56df5f..6917378c 100644
--- a/apps/web/src/timeline/audio-separation/index.ts
+++ b/apps/web/src/timeline/audio-separation/index.ts
@@ -121,28 +121,13 @@ function cloneVolumeAnimations({
 }: {
 	animations: ElementAnimations | undefined;
 }): ElementAnimations | undefined {
-	const volumeBinding = animations?.bindings.volume;
-	if (!volumeBinding) {
-		return undefined;
-	}
-
-	const subsetChannels = Object.fromEntries(
-		volumeBinding.components.flatMap((component) => {
-			const channel = animations?.channels[component.channelId];
-			return channel ? [[component.channelId, channel] as const] : [];
-		}),
-	);
-	if (Object.keys(subsetChannels).length === 0) {
+	const volumeData = animations?.volume;
+	if (!volumeData) {
 		return undefined;
 	}
 
 	return cloneAnimations({
-		animations: {
-			bindings: {
-				volume: volumeBinding,
-			},
-			channels: subsetChannels,
-		},
+		animations: { volume: volumeData },
 		shouldRegenerateKeyframeIds: true,
 	});
 }
diff --git a/apps/web/src/timeline/components/graph-editor/session.ts b/apps/web/src/timeline/components/graph-editor/session.ts
index d7c6b001..c5d1c133 100644
--- a/apps/web/src/timeline/components/graph-editor/session.ts
+++ b/apps/web/src/timeline/components/graph-editor/session.ts
@@ -1,11 +1,12 @@
 import {
 	getCurveHandlesForNormalizedCubicBezier,
 	getEditableScalarChannels,
-	getEasingModeForKind,
 	getNormalizedCubicBezierForScalarSegment,
 	getScalarKeyframeContext,
 	updateScalarKeyframeCurve,
 } from "@/animation";
+import { getChannelsFromData } from "@/animation/channel-data";
+import { isScalarChannel } from "@/animation/interpolation";
 import type {
 	AnimationPath,
 	ElementAnimations,
@@ -143,12 +144,9 @@ function findKeyframeTime({
 	propertyPath: AnimationPath;
 	keyframeId: string;
 }): number | null {
-	const binding = animations.bindings[propertyPath];
-	if (!binding) return null;
-
-	for (const component of binding.components) {
-		const channel = animations.channels[component.channelId];
-		if (channel?.kind !== "scalar") continue;
+	const data = animations[propertyPath];
+	for (const channel of getChannelsFromData({ data })) {
+		if (!channel || !isScalarChannel(channel)) continue;
 		const key = channel.keys.find((k) => k.id === keyframeId);
 		if (key !== undefined) return key.time;
 	}
@@ -300,8 +298,7 @@ function resolvePropertySelection({
 		}
 	}
 
-	const { binding: resolvedBinding, channels: scalarChannels } = scalarResult;
-	const easingMode = getEasingModeForKind(resolvedBinding.kind);
+	const { easingMode, channels: scalarChannels } = scalarResult;
 	const contexts = scalarChannels.flatMap((channel) => {
 		const context = getScalarKeyframeContext({
 			animations: element.animations,
diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index 74f026dc..1b549a15 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -52,7 +52,7 @@ import { getTimelinePixelsPerSecond } from "@/timeline";
 import { buildWaveformSourceKey } from "@/media/waveform-summary";
 import { addMediaTime, type MediaTime, TICKS_PER_SECOND } from "@/wasm";
 import {
-	getActionDefaultShortcuts,
+	getActionDefinition,
 	type TAction,
 	type TActionWithOptionalArgs,
 	invokeAction,
@@ -186,7 +186,7 @@ export function getKeyframeIndicators({
 }
 
 export function getDisplayShortcut({ action }: { action: TAction }) {
-	const defaultShortcuts = getActionDefaultShortcuts({ action });
+	const defaultShortcuts = getActionDefinition({ action }).defaultShortcuts;
 	if (!defaultShortcuts?.length) {
 		return "";
 	}