@hyperframes/studio 0.8.12 → 0.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.12",
-    "@hyperframes/sdk": "0.8.12",
-    "@hyperframes/player": "0.8.12",
-    "@hyperframes/studio-server": "0.8.12",
-    "@hyperframes/core": "0.8.12"
+    "@hyperframes/parsers": "0.8.13",
+    "@hyperframes/core": "0.8.13",
+    "@hyperframes/studio-server": "0.8.13",
+    "@hyperframes/sdk": "0.8.13",
+    "@hyperframes/player": "0.8.13"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -68,7 +68,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.12"
+    "@hyperframes/producer": "0.8.13"
   },
   "peerDependencies": {
     "react": "19",

package/src/hooks/domSelectionTimelineMirror.ts

@@ -1,4 +1,5 @@
 import type { SelectElementOptions, TimelineElement } from "../player";
+import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { findMatchingTimelineElementId, findTimelineIdByAncestor } from "../utils/studioHelpers";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { logSelect } from "../utils/selectDebug";
@@ -60,9 +61,17 @@ export function announceTimelineSelection(
     anchor,
     anchorPublished: anchor != null && publishedMembers.has(anchor),
   });
-  // A canvas target can be editable without owning a timeline row. Preserve that
-  // canvas-only selection when the timeline has nothing truthful to represent.
-  if (!timelineAnchor) return;
+  // A canvas target can be editable without owning a timeline row. Most such
+  // targets live inside a clip and must not erase its timeline context. A mixer
+  // bus is different: it is itself the editing target, so its title replaces any
+  // selected clips even though the bus has no clip row of its own.
+  if (!timelineAnchor) {
+    if (primary.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG) {
+      setTimelineSelectionSet(new Set());
+      setSelectedTimelineElementId(null);
+    }
+    return;
+  }
   // A late async primary that already belongs to the live set must preserve the
   // group. A fresh single click does not belong to it, so publish the singleton
   // first; otherwise `preserveSet` clears the set and sync wipes the canvas.

package/src/hooks/useDomSelectionSelectionGuards.test.ts

@@ -130,6 +130,121 @@ describe("useDomSelection — Variables tab preservation", () => {
   });
 });
 
+describe("useDomSelection — canvas-only targets replace timeline clips", () => {
+  beforeEach(() => {
+    deferreds.clear();
+    usePlayerStore.getState().clearSelection();
+  });
+  afterEach(() => {
+    deferreds.clear();
+    usePlayerStore.getState().clearSelection();
+  });
+
+  it("deselects every clip when an audio bus is selected", () => {
+    const store = usePlayerStore.getState();
+    store.setSelectedElementId("voice-1");
+    store.setSelectedElementIds(new Set(["voice-1", "voice-2"]));
+
+    const bus = document.createElement("hf-audio-group");
+    bus.id = "voiceover";
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe: null,
+      timelineElements: [
+        { id: "voice-1", tag: "audio", start: 0, duration: 1, track: 0 },
+        { id: "voice-2", tag: "audio", start: 1, duration: 1, track: 1 },
+      ],
+      setSelectedTimelineElementId: usePlayerStore.getState().setSelectedElementId,
+      setTimelineSelectionSet: usePlayerStore.getState().setSelectedElementIds,
+    });
+
+    act(() => harness.current().applyDomSelection(makeSelection("Voiceover", bus)));
+
+    expect(harness.current().domEditSelection?.id).toBe("voiceover");
+    expect(usePlayerStore.getState().selectedElementId).toBeNull();
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set());
+    harness.cleanup();
+  });
+
+  it("lets a bus supersede a clip selection that is still resolving", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument!;
+    const clipNode = doc.createElement("audio");
+    clipNode.id = "voice-1";
+    const busNode = doc.createElement("hf-audio-group");
+    busNode.id = "voiceover";
+    doc.body.append(clipNode, busNode);
+
+    const clip: TimelineElement = {
+      id: "voice-1",
+      domId: "voice-1",
+      tag: "audio",
+      start: 0,
+      duration: 1,
+      track: 0,
+    };
+    const bus: TimelineElement = {
+      id: "voiceover",
+      domId: "voiceover",
+      tag: "audio",
+      start: 0,
+      duration: 10,
+      track: -0.5,
+    };
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe,
+      // The bus is a synthetic row target, not a clip in the store.
+      timelineElements: [clip],
+      setSelectedTimelineElementId: usePlayerStore.getState().setSelectedElementId,
+      setTimelineSelectionSet: usePlayerStore.getState().setSelectedElementIds,
+    });
+
+    let pendingClip = Promise.resolve();
+    let pendingBus = Promise.resolve();
+    act(() => {
+      pendingClip = harness.current().handleTimelineElementSelect(clip);
+      pendingBus = harness.current().handleTimelineElementSelect(bus);
+    });
+    await act(async () => {
+      deferreds.get("voiceover")?.resolve();
+      await pendingBus;
+      deferreds.get("voice-1")?.resolve();
+      await pendingClip;
+    });
+
+    expect(harness.current().domEditSelection?.id).toBe("voiceover");
+    expect(usePlayerStore.getState().selectedElementId).toBeNull();
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set());
+    harness.cleanup();
+    iframe.remove();
+  });
+
+  it("preserves clip context for a non-bus canvas-only selection", () => {
+    const store = usePlayerStore.getState();
+    store.setSelectedElementId("voice-1");
+    const decoration = document.createElement("div");
+    decoration.id = "decoration";
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe: null,
+      timelineElements: [{ id: "voice-1", tag: "audio", start: 0, duration: 1, track: 0 }],
+      setSelectedTimelineElementId: usePlayerStore.getState().setSelectedElementId,
+      setTimelineSelectionSet: usePlayerStore.getState().setSelectedElementIds,
+    });
+
+    act(() => harness.current().applyDomSelection(makeSelection("Decoration", decoration)));
+
+    expect(usePlayerStore.getState().selectedElementId).toBe("voice-1");
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["voice-1"]));
+    harness.cleanup();
+  });
+});
+
 describe("useDomSelection — timeline-select race guard", () => {
   beforeEach(() => deferreds.clear());
   afterEach(() => deferreds.clear());

package/src/player/components/AutomationEnvelopePaths.tsx

@@ -0,0 +1,54 @@
+/** The base automation envelope plus the heavier segment grab affordance. */
+
+import type { AutomationRange, HfAutomationLane } from "@hyperframes/core/audio-automation";
+import { envelopeSegmentPath } from "./automationLaneGeometry";
+
+interface AutomationEnvelopePathsProps {
+  path: string;
+  lane: HfAutomationLane;
+  range: AutomationRange;
+  accentColor: string;
+  activeSegment: number | null;
+  xOf(t: number): number;
+  yOf(v: number): number;
+}
+
+export function AutomationEnvelopePaths({
+  path,
+  lane,
+  range,
+  accentColor,
+  activeSegment,
+  xOf,
+  yOf,
+}: AutomationEnvelopePathsProps) {
+  const activePath =
+    activeSegment === null
+      ? null
+      : envelopeSegmentPath({ lane, range, index: activeSegment, xOf, yOf });
+
+  return (
+    <>
+      <path
+        data-automation-envelope=""
+        d={path}
+        fill="none"
+        stroke={accentColor}
+        strokeWidth={1.5}
+        opacity={lane.points.length === 0 ? 0.35 : 0.95}
+      />
+      {activePath ? (
+        <path
+          data-automation-segment-active={activeSegment ?? undefined}
+          d={activePath}
+          fill="none"
+          stroke={accentColor}
+          strokeWidth={3}
+          strokeLinecap="round"
+          opacity={1}
+          pointerEvents="none"
+        />
+      ) : null}
+    </>
+  );
+}

package/src/player/components/TimelineAutomationLane.test.tsx

@@ -10,6 +10,7 @@ import { MAX_AUDIO_GAIN } from "@hyperframes/core/audio-gain";
 import {
   normalizeAutomation,
   resolveAutomationRange,
+  sampleAutomationLane,
   VOLUME_RANGE,
   type HfAutomation,
 } from "@hyperframes/core/audio-automation";
@@ -668,6 +669,118 @@ describe("TimelineAutomationLane point visibility", () => {
   });
 });
 
+describe("TimelineAutomationLane segment drag", () => {
+  const four: HfAutomation = {
+    version: 1,
+    lanes: [
+      {
+        target: "volume",
+        points: [
+          { t: 0, v: 1 },
+          { t: 1, v: 0.8 },
+          { t: 2, v: 0.6 },
+          { t: 3.5, v: 0.2 },
+        ],
+      },
+    ],
+  };
+
+  const previewedPoints = (props: { onPreview: ReturnType<typeof vi.fn> }) =>
+    props.onPreview.mock.calls.at(-1)?.[0].lanes[0].points as {
+      t: number;
+      v: number;
+      viaX?: number;
+      viaY?: number;
+    }[];
+
+  it("thickens the segment and offers a grab cursor only within its hit proximity", () => {
+    const { container, svg } = mount(ramp);
+    const envelope = container.querySelector<SVGPathElement>("[data-automation-envelope]");
+    expect(envelope?.getAttribute("stroke-width")).toBe("1.5");
+
+    fire(svg, "pointermove", at(2, 0.5));
+    const active = container.querySelector<SVGPathElement>("[data-automation-segment-active]");
+    expect(active).not.toBeNull();
+    expect(active?.getAttribute("stroke-width")).toBe("3");
+    expect(svg.style.cursor).toBe("grab");
+
+    // Same time span, but far enough above the drawn ramp to be background.
+    fire(svg, "pointermove", at(2, 0.9));
+    expect(container.querySelector("[data-automation-segment-active]")).toBeNull();
+    expect(svg.style.cursor).toBe("crosshair");
+  });
+
+  it("moves both segment endpoints by the same time and value delta", () => {
+    const { svg, props } = mount(four);
+    // Midpoint of the segment from (1, .8) to (2, .6).
+    fire(svg, "pointerdown", { ...at(1.5, 0.7), buttons: 1 });
+    fire(svg, "pointermove", { ...at(2, 0.5), buttons: 1 });
+
+    const points = previewedPoints(props);
+    expect(points[0]).toEqual({ t: 0, v: 1 });
+    expect(points[1]!.t).toBeCloseTo(1.5, 2);
+    expect(points[2]!.t).toBeCloseTo(2.5, 2);
+    expect(points[1]!.v).toBeCloseTo(0.6, 2);
+    expect(points[2]!.v).toBeCloseTo(0.4, 2);
+    expect(points[3]).toEqual({ t: 3.5, v: 0.2 });
+  });
+
+  it("treats a press outside the line's proximity as a background range drag", () => {
+    const onRangeSelect = vi.fn();
+    const { svg, props } = mount(four, { onRangeSelect });
+    fire(svg, "pointerdown", { ...at(1.5, 0.95), buttons: 1 });
+    fire(svg, "pointermove", { ...at(2.5, 0.95), buttons: 1 });
+    expect(onRangeSelect).toHaveBeenCalled();
+    expect(props.onPreview).not.toHaveBeenCalled();
+  });
+
+  it("preserves the segment's curve while translating its endpoints", () => {
+    const curved: HfAutomation = {
+      version: 1,
+      lanes: [
+        {
+          target: "volume",
+          points: [
+            { t: 0, v: 1 },
+            { t: 1, v: 0.8, viaX: 0.4, viaY: 0.7 },
+            { t: 2, v: 0.6 },
+            { t: 3.5, v: 0.2 },
+          ],
+        },
+      ],
+    };
+    const { svg, props } = mount(curved);
+    const lineValue = sampleAutomationLane(curved.lanes[0]!, 1.7, "linear");
+    fire(svg, "pointerdown", { ...at(1.7, lineValue), buttons: 1 });
+    fire(svg, "pointermove", { ...at(2.1, lineValue - 0.1), buttons: 1 });
+    const points = previewedPoints(props);
+    expect(points[1]?.viaX).toBe(0.4);
+    expect(points[1]?.viaY).toBe(0.7);
+  });
+
+  it("stops both endpoints together before the next breakpoint", () => {
+    const { svg, props } = mount(four);
+    fire(svg, "pointerdown", { ...at(1.5, 0.7), buttons: 1 });
+    fire(svg, "pointermove", { ...at(4, 0.7), buttons: 1, altKey: true });
+    const points = previewedPoints(props);
+    expect(points[2]!.t).toBeLessThan(points[3]!.t);
+    expect(points[3]!.t - points[2]!.t).toBeCloseTo(0.001, 4);
+    expect(points[2]!.t - points[1]!.t).toBeCloseTo(1, 4);
+  });
+
+  it("previews every move and persists the segment once on release", () => {
+    const { svg, props } = mount(four);
+    fire(svg, "pointerdown", { ...at(1.5, 0.7), buttons: 1 });
+    for (const t of [1.7, 1.9, 2.1]) {
+      fire(svg, "pointermove", { ...at(t, 0.6), buttons: 1 });
+    }
+    expect(props.onPreview).toHaveBeenCalledTimes(3);
+    expect(props.onCommit).not.toHaveBeenCalled();
+    fire(svg, "pointerup", { ...at(2.1, 0.6), buttons: 0 });
+    expect(props.onCommit).toHaveBeenCalledTimes(1);
+  });
+});
+
 /** `mount`, plus the re-render a real store update causes — the persisted
  *  automation and the new selection coming back down as props. */
 const mountRerenderable = (automation: HfAutomation, over: Record<string, unknown> = {}) => {

package/src/player/components/TimelineAutomationLane.tsx

@@ -1,21 +1,15 @@
 /**
  * Breakpoint automation over an audio clip, edited the way a DAW edits it:
  * double-click the line to add a point, drag one to shape it, right-click or
- * Shift+click a point to remove it, Alt-drag the line between two points to bend
- * it, and double-click a point to type an exact value.
+ * Shift+click a point to remove it, drag a line segment to move both endpoints,
+ * Alt-drag the line to bend it, and double-click a point to type an exact value.
  *
- * Modifiers follow Ableton's, because that is the muscle memory an automation
- * lane inherits: Shift locks a drag to one axis and fines the value down, Alt
- * over a segment curves it, and Alt during a point drag ignores the grid.
+ * Ableton-style modifiers apply: Shift locks/fines a drag, while Alt bends a
+ * segment or ignores the grid during a point drag. Background drags select a
+ * set that can be moved, deleted, or shaped together.
  *
- * Drag the background to draw a selection box around a set of breakpoints, then
- * Delete to remove them, drag any one of them to move the whole set, or
- * right-click inside the box for shapes over its span.
- *
- * The lane knows nothing about any particular effect. Which parameters it can
- * offer, their ranges, units and whether they read logarithmically all come
- * from the FX registry, so an effect gained upstream needs no change here — the
- * same principle the property panel's controls follow.
+ * Effect parameters, ranges, units, and scaling come from the FX registry, so
+ * an upstream effect needs no lane-specific code here.
  */
 
 import {
@@ -42,6 +36,7 @@ import { generateShape, type AutomationShapeId } from "./automationShapes";
 import { simplifyPoints } from "./automationSimplify";
 import { pointInSelection, pointsIn, replaceRange } from "./automationLaneSelection";
 import { defaultTimelineTheme } from "./timelineTheme";
+import { AutomationEnvelopePaths } from "./AutomationEnvelopePaths";
 
 /**
  * Drawn radius of a breakpoint.
@@ -102,7 +97,7 @@ function pointCircleStyle(
 function laneTitle(readOnly: boolean | undefined): string {
   return readOnly
     ? "Drag a box to select points, which also selects this clip; then double-click to add a point"
-    : "Double-click to add a point, drag to shape, double-click a point to type a value, right-click or Shift+click to remove it. Drag the background to draw a box around points, then Delete to remove them or drag one to move them all. Alt-drag the line to curve it. Shift locks an axis mid-drag; Alt ignores the grid.";
+    : "Double-click to add a point, drag to shape, double-click a point to type a value, right-click or Shift+click to remove it. Drag a line segment to move both endpoints. Drag the background to draw a box around points, then Delete to remove them or drag one to move them all. Alt-drag the line to curve it. Shift locks an axis mid-drag; Alt ignores the grid.";
 }
 
 /**
@@ -155,13 +150,19 @@ function pointHandleOpacity(args: {
   return !args.readOnly && args.hovered ? 1 : 0;
 }
 
-function laneCursor(readOnly: boolean | undefined, dragging: boolean, stretching: boolean): string {
+function laneCursor(
+  readOnly: boolean | undefined,
+  dragging: boolean,
+  stretching: boolean,
+  segmentHovering: boolean,
+): string {
   // A stretch handle wins over everything it might also sit above: the handle is
   // a few px wide and always overlaps whatever is under the selection edge, so
   // any other cursor there would advertise a gesture the press will not start.
   if (stretching) return "col-resize";
   if (readOnly) return "pointer";
-  return dragging ? "grabbing" : "crosshair";
+  if (dragging) return "grabbing";
+  return segmentHovering ? "grab" : "crosshair";
 }
 
 export interface TimelineAutomationLaneProps {
@@ -318,7 +319,16 @@ export function TimelineAutomationLane({
     duration,
     rangeSelection,
   });
-  const { dragIndex, curveIndex, edgeDrag, edgeHover, hint, editing } = gestures;
+  const {
+    dragIndex,
+    curveIndex,
+    segmentDragIndex,
+    segmentHoverIndex,
+    edgeDrag,
+    edgeHover,
+    hint,
+    editing,
+  } = gestures;
 
   const removeAt = useCallback(
     (index: number): void => {
@@ -426,8 +436,9 @@ export function TimelineAutomationLane({
           height: h,
           cursor: laneCursor(
             readOnly,
-            dragIndex !== null || curveIndex !== null,
+            dragIndex !== null || curveIndex !== null || segmentDragIndex !== null,
             edgeDrag !== null || edgeHover,
+            segmentHoverIndex !== null,
           ),
           opacity: readOnly ? 0.55 : 1,
           touchAction: "none",
@@ -435,7 +446,10 @@ export function TimelineAutomationLane({
         width={widthPx + PAD_X * 2}
         height={h}
         onPointerEnter={() => setHovered(true)}
-        onPointerLeave={() => setHovered(false)}
+        onPointerLeave={() => {
+          setHovered(false);
+          gestures.onPointerLeave();
+        }}
         onPointerDown={gestures.onPointerDown}
         onPointerMove={gestures.onPointerMove}
         onPointerUp={gestures.endDrag}
@@ -478,12 +492,14 @@ export function TimelineAutomationLane({
             pointerEvents="none"
           />
         ) : null}
-        <path
-          d={path}
-          fill="none"
-          stroke={accentColor}
-          strokeWidth={1.5}
-          opacity={lane.points.length === 0 ? 0.35 : 0.95}
+        <AutomationEnvelopePaths
+          path={path}
+          lane={lane}
+          range={range}
+          accentColor={accentColor}
+          activeSegment={segmentDragIndex ?? segmentHoverIndex}
+          xOf={xOf}
+          yOf={yOf}
         />
         {lane.points.map((p, i) => {
           // Endpoint-inclusive, the same rule Delete uses, so what looks caught by

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -25,6 +25,7 @@ export function TimelineGroupLaneLabels({
   columnWidth,
   gutterBackground,
   accentColor,
+  onReveal,
 }: {
   /** The group wearing a clip's shape — see `groupAutomationElement`. */
   groupElement: TimelineElement;
@@ -34,6 +35,8 @@ export function TimelineGroupLaneLabels({
   columnWidth: number;
   gutterBackground: string;
   accentColor: string;
+  /** Select the bus and reveal this lane's exact parameter in its rack. */
+  onReveal?: (target: string) => void;
 }) {
   // The LIVE playhead, not the row's `currentTime` prop — that one only moves
   // on seek, so the readout sat frozen while the curve was audibly working,
@@ -55,10 +58,13 @@ export function TimelineGroupLaneLabels({
         // clip-local rebase here — unlike a clip's lane.
         const value = sampleAutomationLane(lane, currentTime);
         return (
-          <div
+          <button
+            type="button"
+            tabIndex={-1}
             key={lane.target}
             data-group-lane-label={lane.target}
-            className="absolute left-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[10px] text-white/65"
+            aria-label={`Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`}
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-white/65 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,
@@ -67,6 +73,11 @@ export function TimelineGroupLaneLabels({
               borderLeft: `2px solid ${accentColor}`,
             }}
             title={`${groupLabel} · ${parts.param ? `${parts.name} · ${parts.param}` : parts.name}`}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => {
+              event.stopPropagation();
+              onReveal?.(lane.target);
+            }}
           >
             <span aria-hidden="true" className="shrink-0 text-[11px] text-white/40">
               ▤
@@ -80,7 +91,7 @@ export function TimelineGroupLaneLabels({
             <span className="shrink-0 font-mono text-[9px] tabular-nums text-white/55">
               {value.toFixed(2)}
             </span>
-          </div>
+          </button>
         );
       })}
     </>

package/src/player/components/TimelineGroupRow.test.tsx

@@ -6,14 +6,23 @@ import { TimelineGroupRow } from "./TimelineGroupRow";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 import { defaultTimelineTheme } from "./timelineTheme";
 import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
-import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 vi.mock("../../telemetry/canary", () => ({ isCanaryEnabled: () => true }));
+const domEditMocks = vi.hoisted(() => ({
+  handleTimelineElementSelect: vi.fn(async () => undefined),
+}));
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditSelectionContextOptional: () => null,
+  useDomEditActionsContextOptional: () => domEditMocks,
+}));
 
 afterEach(() => {
   document.body.innerHTML = "";
+  domEditMocks.handleTimelineElementSelect.mockClear();
+  usePlayerStore.setState({ revealedAudioFxTarget: null });
 });
 
 const member = (id: string, track: number): TimelineElement => ({
@@ -36,7 +45,10 @@ const GROUP: TimelineTrackGroupInfo = {
   hidden: false,
 };
 
-function renderRow(overrides: Partial<TimelineTrackGroupInfo> = {}) {
+function renderRow(
+  overrides: Partial<TimelineTrackGroupInfo> = {},
+  expandedLaneOwnerIds = new Set<string>(),
+) {
   const onSetAudioGroupAttributeQuiet = vi.fn();
   const onSetElementAttributeQuiet = vi.fn();
   const host = document.createElement("div");
@@ -55,10 +67,31 @@ function renderRow(overrides: Partial<TimelineTrackGroupInfo> = {}) {
           contentOrigin={232}
           theme={defaultTimelineTheme}
           collapsedGroupIds={new Set()}
-          expandedLaneOwnerIds={new Set()}
+          expandedLaneOwnerIds={expandedLaneOwnerIds}
           toggleGroupExpanded={vi.fn()}
           toggleLaneOwnerExpanded={vi.fn()}
-          lanes={{ bind: () => ({ lanes: [] }) } as never}
+          lanes={
+            {
+              bind: (element: TimelineElement) => {
+                const automation = element.automation
+                  ? JSON.parse(element.automation)
+                  : { version: 1, lanes: [] };
+                return {
+                  automation,
+                  lanes: automation.lanes,
+                  chain: element.fxChain ? JSON.parse(element.fxChain) : null,
+                  onPreview: vi.fn(),
+                  onCommit: vi.fn(),
+                  onSelect: vi.fn(),
+                  readOnly: true,
+                  commitTargetKey: null,
+                  selection: null,
+                  onRangeSelect: vi.fn(),
+                  onRangeClear: vi.fn(),
+                };
+              },
+            } as never
+          }
           pps={10}
           currentTime={0}
           compositionDuration={60}
@@ -72,6 +105,49 @@ function renderRow(overrides: Partial<TimelineTrackGroupInfo> = {}) {
 }
 
 describe("TimelineGroupRow", () => {
+  it("routes the group title through the guarded selection path", () => {
+    const { host } = renderRow();
+    const title = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Open Voiceover effects"]',
+    );
+
+    act(() => title?.click());
+
+    expect(domEditMocks.handleTimelineElementSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "voiceover", domId: "voiceover" }),
+    );
+  });
+
+  it("opens a group automation lane on its exact rack parameter", async () => {
+    const { host } = renderRow(
+      {
+        fxChain: JSON.stringify({
+          version: 1,
+          nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
+        }),
+        automation: JSON.stringify({
+          version: 1,
+          lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
+        }),
+      },
+      new Set(["voiceover"]),
+    );
+    const laneTitle = host.querySelector<HTMLButtonElement>('[data-group-lane-label="fx.p1.gain"]');
+
+    await act(async () => {
+      laneTitle?.click();
+      await Promise.resolve();
+    });
+
+    expect(domEditMocks.handleTimelineElementSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "voiceover", domId: "voiceover" }),
+    );
+    expect(usePlayerStore.getState().revealedAudioFxTarget).toMatchObject({
+      elementKey: "voiceover",
+      automationTarget: "fx.p1.gain",
+    });
+  });
+
   // C1 names this as the step's own definition of done: "opening the popover on
   // a GROUP and applying a preset results in exactly ONE `data-fx-chain` write,
   // on the group element, and zero writes on members". A group IS a bus — a