1 files changed, 6 insertions, 10 deletions

diff --git a/apps/web/src/timeline/components/audio-volume-line.tsx b/apps/web/src/timeline/components/audio-volume-line.tsx
index 1baac2bd..659bc5dc 100644
--- a/apps/web/src/timeline/components/audio-volume-line.tsx
+++ b/apps/web/src/timeline/components/audio-volume-line.tsx
@@ -3,13 +3,12 @@
 import { useCallback, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useEditor } from "@/editor/use-editor";
-import { DEFAULTS } from "@/timeline/defaults";
 import {
 	getDbFromLinePos,
 	getLinePosFromDb,
 } from "@/timeline/audio-display";
 import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/timeline/audio-constants";
-import { hasAnimatedVolume } from "@/timeline/audio-state";
+import { getElementVolume, hasAnimatedVolume } from "@/timeline/audio-state";
 import type { AudioElement } from "@/timeline/types";
 import {
 	clamp,
@@ -60,10 +59,8 @@ export function AudioVolumeLine({
 	const editor = useEditor();
 	const surfaceRef = useRef<HTMLDivElement>(null);
 	const activePointerIdRef = useRef<number | null>(null);
-	const startVolumeRef = useRef(element.volume ?? DEFAULTS.element.volume);
-	const lastPreviewVolumeRef = useRef(
-		element.volume ?? DEFAULTS.element.volume,
-	);
+	const startVolumeRef = useRef(getElementVolume({ element }));
+	const lastPreviewVolumeRef = useRef(getElementVolume({ element }));
 	const hasChangedRef = useRef(false);
 	const [isDragging, setIsDragging] = useState(false);
 	const [tooltipClientPos, setTooltipClientPos] = useState<{
@@ -72,7 +69,7 @@ export function AudioVolumeLine({
 	} | null>(null);
 
 	const hasAnimatedEnvelope = hasAnimatedVolume({ element });
-	const currentVolume = element.volume ?? DEFAULTS.element.volume;
+	const currentVolume = getElementVolume({ element });
 	const lineTop = `${getLinePosFromDb({ db: currentVolume })}%`;
 
 	const volumeLabel = `${formatNumberForDisplay({
@@ -96,7 +93,7 @@ export function AudioVolumeLine({
 					{
 						trackId,
 						elementId: element.id,
-						updates: { volume: nextVolume },
+						updates: { params: { volume: nextVolume } },
 					},
 				],
 			});
@@ -242,8 +239,7 @@ export function AudioVolumeLine({
 					)}
 					style={{ top: lineTop }}
 				/>
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: timeline volume line is a pointer-only editing surface */}
-				{/* biome-ignore lint/a11y/useKeyWithClickEvents: timeline volume line is a pointer-only editing surface */}
+				{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- custom drag widget for clip volume; pointer events drive the interaction, the click/mousedown handlers are propagation-stoppers. The a11y-correct long-term shape is <input type="range"> with a custom thumb. */}
 				<div
 					className="absolute inset-x-0 -translate-y-1/2 touch-none cursor-ns-resize pointer-events-auto"
 					style={{ top: lineTop, height: `${HIT_AREA_HEIGHT_PX}px` }}