fix(studio): let a track disclose its automation without a tween

The lane was mounted inside the property-lanes wrapper, which renders only for a
track's GSAP keyframe clip — so an audio clip with no tween resolved to nothing:
no disclosure caret, no reserved height, no lanes. Verified on a composition with
one `<audio>`, an envelope, and no tweens anywhere: 0 carets, 0 lanes. The
attribute still wrote and the render still baked it, so the feature failed
silently for exactly the tracks it exists for. Same composition now: 1 caret, and
expanding it draws the Volume lane.

Automation counts as something to disclose. `resolveTrackKeyframeClip` takes a
counter alongside the keyframe lane counts and qualifies a clip on either; the
header asks the same counter about the clip it already holds. A function rather
than another map threaded through the props: every caller then reads one cached
parse, so the height a row reserves and the lanes drawn in it cannot drift apart.

That drift is also fixed for the lane's own offset, which passed the raw tween
count where every other consumer uses distinct property groups. Two tweens on one
property drew one keyframe lane but pushed the automation lane down by two,
spilling into the next track; one tween on two properties did the inverse and
drew it over a diamond lane, stealing its pointer events. It now reads the same
`laneCounts` map the reserved height and the drawn lanes use.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: vanceingalls

packages/studio/src/player/components/TimelineLanes.tsx

@@ -552,7 +552,7 @@ export function TimelineLanes({
                               isSelected={isSelected}
                               lanes={automationLanes}
                               pps={pps}
-                              laneCount={(gsapAnimations.get(elementKey) ?? []).length}
+                              laneCount={laneCounts.get(elementKey) ?? 0}
                               accentColor={clipStyle.accent}
                               currentTime={currentTime}
                             />

packages/studio/src/player/components/TimelineTrackHeader.tsx

@@ -4,6 +4,7 @@ import { Music } from "../../icons/SystemIcons";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { automationLaneCountOf } from "./useTimelineTrackLayout";
 import { clipTimingStart } from "../../hooks/gsapShared";
 import { LayerDisclosureRow } from "./LayerDisclosureRow";
 import { TrackClipCount } from "./TrackClipCount";
@@ -310,7 +311,11 @@ export function TimelineTrackHeader({
   // Label mode = keyframe view; the label column stays LABEL_COL_W (Timeline.tsx
   // owns the gutter past it, so a 0% diamond isn't clipped by this panel).
   const showTrackLabel = contentOrigin >= LABEL_COL_W;
-  const isKeyframeLayer = !!keyframeClip && lanes.length > 0;
+  // Automation counts as something to disclose: gating the caret on tweens alone
+  // left an audio clip's envelopes unreachable, since the track could not expand.
+  const disclosable =
+    lanes.length > 0 || (keyframeClip ? automationLaneCountOf(keyframeClip) : 0) > 0;
+  const isKeyframeLayer = !!keyframeClip && disclosable;
 
   return (
     <div
@@ -327,7 +332,7 @@ export function TimelineTrackHeader({
         borderRight: `1px solid ${theme.gutterBorder}`,
       }}
     >
-      {!keyframeClip || lanes.length === 0 ? (
+      {!keyframeClip || !disclosable ? (
         <PlainTrackHeader
           trackNumber={trackNumber}
           trackDisplayNumber={trackDisplayNumber}

packages/studio/src/player/components/useTimelineTrackLayout.test.ts

@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { LANE_H, TRACK_H } from "./timelineLayout";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
-import { useTimelineTrackLayout } from "./useTimelineTrackLayout";
+import { resolveTrackKeyframeClip, useTimelineTrackLayout } from "./useTimelineTrackLayout";
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -92,3 +92,53 @@ describe("useTimelineTrackLayout", () => {
     unmount();
   });
 });
+const audioClip = (id: string, over: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  key: id,
+  tag: "audio",
+  start: 0,
+  duration: 10,
+  track: 10,
+  ...over,
+});
+
+describe("resolveTrackKeyframeClip", () => {
+  const none = new Map<string, number>();
+
+  it("picks an audio clip that has only automation, no tweens", () => {
+    // Gating on tweens alone left an audio clip's envelopes unreachable: no
+    // clip resolved, so the track got no caret, no height and no lanes.
+    const bgm = audioClip("bgm");
+    const picked = resolveTrackKeyframeClip([bgm], none, null, new Set(), () => 1);
+    expect(picked).toBe(bgm);
+  });
+
+  it("still resolves nothing when a clip has neither", () => {
+    expect(resolveTrackKeyframeClip([audioClip("bgm")], none, null, new Set(), () => 0)).toBeNull();
+  });
+
+  it("prefers the selected clip over the one with more to show", () => {
+    const a = audioClip("a");
+    const b = audioClip("b");
+    const picked = resolveTrackKeyframeClip([a, b], new Map([["b", 4]]), "a", new Set(), (e) =>
+      e.id === "a" ? 1 : 0,
+    );
+    expect(picked).toBe(a);
+  });
+
+  it("counts tweens and automation together when breaking a tie", () => {
+    const a = audioClip("a");
+    const b = audioClip("b");
+    const picked = resolveTrackKeyframeClip(
+      [a, b],
+      new Map([
+        ["a", 1],
+        ["b", 1],
+      ]),
+      null,
+      new Set(),
+      (e) => (e.id === "b" ? 3 : 0),
+    );
+    expect(picked).toBe(b);
+  });
+});

packages/studio/src/player/components/useTimelineTrackLayout.ts

@@ -16,6 +16,17 @@ import {
 
 export { getTrackStyle } from "./timelineIcons";
 
+/**
+ * Automation lanes on one clip, or 0 for anything that is not audio.
+ *
+ * An audio clip can be worth expanding without carrying a single tween, so this
+ * counts toward whether a track has anything to disclose. A function rather than
+ * a map so every caller reads the same cached parse and none can drift.
+ */
+export function automationLaneCountOf(element: TimelineElement): number {
+  return isAudioTimelineElement(element) ? elementAutomationLanes(element).length : 0;
+}
+
 /**
  * The single keyframed element whose property lanes a track shows when expanded.
  * A track can hold several elements (same z-index is common), but keyframes are
@@ -29,10 +40,15 @@ export function resolveTrackKeyframeClip(
   laneCounts: ReadonlyMap<string, number>,
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
+  automationLaneCount: (element: TimelineElement) => number = automationLaneCountOf,
 ): TimelineElement | null {
-  const keyframed = elements.filter(
-    (element) => (laneCounts.get(element.key ?? element.id) ?? 0) >= 1,
-  );
+  // Automation counts toward "has something to disclose". Without it an audio
+  // clip carrying envelopes but no tweens resolved to null, so its track got no
+  // caret, no reserved height and no lanes — the automation was unreachable for
+  // exactly the tracks the feature is for.
+  const disclosable = (element: TimelineElement): number =>
+    (laneCounts.get(element.key ?? element.id) ?? 0) + automationLaneCount(element);
+  const keyframed = elements.filter((element) => disclosable(element) >= 1);
   if (keyframed.length === 0) return null;
   const selected = keyframed.find((element) => {
     const key = element.key ?? element.id;
@@ -41,8 +57,9 @@ export function resolveTrackKeyframeClip(
   if (selected) return selected;
   // Most lanes wins, first one on a tie (same as the old stable sort), but as a
   // reduce over the already non-empty list so there's no index to assert on.
-  const lanesOf = (element: TimelineElement) => laneCounts.get(element.key ?? element.id) ?? 0;
-  return keyframed.reduce((best, element) => (lanesOf(element) > lanesOf(best) ? element : best));
+  return keyframed.reduce((best, element) =>
+    disclosable(element) > disclosable(best) ? element : best,
+  );
 }
 
 /** Lanes per clip: the count of distinct property groups whose tween contributes
@@ -91,9 +108,7 @@ function useTimelineRowHeights(
         {
           clipId,
           laneCount: laneCounts.get(clipId) ?? 0,
-          automationLaneCount: isAudioTimelineElement(active)
-            ? elementAutomationLanes(active).length
-            : 0,
+          automationLaneCount: automationLaneCountOf(active),
         },
       ];
     });