@hyperframes/studio 0.8.11 → 0.8.12

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

@@ -3,12 +3,15 @@
 /**
  * The visibility control's accessible contract.
  *
- * The audio wording ran behind the `audio-track-mute` canary at 0%, so it had
- * never rendered in any suite: it returned "Muted" / "Mute", which named the
- * CURRENT state rather than the action, and dropped the track suffix so every
- * audio row shared one accessible name. Music plus VO is the ordinary case, so
- * that is two identical buttons. Pinned here because the label and the icon are
- * the whole identity of this control.
+ * The wording ran behind the `audio-track-mute` canary at 0%, so it had never
+ * rendered in any suite: it returned "Muted" / "Mute", which named the CURRENT
+ * state rather than the action, and dropped the track suffix so every audio row
+ * shared one accessible name. Pinned here because the label, the icon and the
+ * callback's arguments are the whole identity of this control.
+ *
+ * The mute presentation itself is gone (`remove mute and solo from tracks and
+ * groups`): the control is the visibility eye it always was, and an audio row
+ * renders it only when already hidden, which is the way back out.
  */
 
 import React, { act } from "react";
@@ -24,7 +27,7 @@ afterEach(() => {
 
 function renderButton(props: {
   hidden: boolean;
-  isAudioTrack?: boolean;
+  visible?: boolean;
   trackDisplayNumber: number | null;
 }): { host: HTMLElement; unmount: () => void; onToggle: ReturnType<typeof vi.fn> } {
   const host = document.createElement("div");
@@ -37,8 +40,7 @@ function renderButton(props: {
         hidden: props.hidden,
         trackNumber: 7,
         trackDisplayNumber: props.trackDisplayNumber,
-        visible: true,
-        isAudioTrack: props.isAudioTrack,
+        visible: props.visible ?? true,
         onToggle,
       }),
     ),
@@ -49,31 +51,7 @@ function renderButton(props: {
 const labelOf = (host: HTMLElement) => host.querySelector("button")?.getAttribute("aria-label");
 
 describe("VisibilityButton", () => {
-  it("names the action, not the state, on an audible audio track", () => {
-    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
-    expect(labelOf(view.host)).toBe("Mute track 2");
-    view.unmount();
-  });
-
-  // The half that was wrong: a muted row read "Muted", so nothing told a
-  // screen-reader user that activating it would unmute.
-  it("promises the un-mute when the audio track is already muted", () => {
-    const view = renderButton({ hidden: true, isAudioTrack: true, trackDisplayNumber: 2 });
-    expect(labelOf(view.host)).toBe("Unmute track 2");
-    view.unmount();
-  });
-
-  it("keeps each audio row's name unique, so two tracks are distinguishable", () => {
-    const first = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 1 });
-    const second = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 3 });
-    expect(labelOf(first.host)).toBe("Mute track 1");
-    expect(labelOf(second.host)).toBe("Mute track 3");
-    expect(labelOf(first.host)).not.toBe(labelOf(second.host));
-    first.unmount();
-    second.unmount();
-  });
-
-  it("still says Hide/Show on a visual track", () => {
+  it("names the action, not the state", () => {
     const shown = renderButton({ hidden: false, trackDisplayNumber: 2 });
     expect(labelOf(shown.host)).toBe("Hide track 2");
     shown.unmount();
@@ -82,15 +60,34 @@ describe("VisibilityButton", () => {
     hiddenRow.unmount();
   });
 
+  it("keeps each row's name unique, so two tracks are distinguishable", () => {
+    const first = renderButton({ hidden: false, trackDisplayNumber: 1 });
+    const second = renderButton({ hidden: false, trackDisplayNumber: 3 });
+    expect(labelOf(first.host)).toBe("Hide track 1");
+    expect(labelOf(second.host)).toBe("Hide track 3");
+    expect(labelOf(first.host)).not.toBe(labelOf(second.host));
+    first.unmount();
+    second.unmount();
+  });
+
   // The callback acts on the REAL track key; the display row rides along so the
   // undo-history label announces the same row this button just did, instead of
   // re-deriving it from an ordering that has no group anchors in it.
   it("toggles the real track number and passes the row it announced", () => {
-    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
+    const view = renderButton({ hidden: false, trackDisplayNumber: 2 });
     view.host.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     expect(view.onToggle).toHaveBeenCalledWith(7, true, 2);
     view.unmount();
   });
+
+  // `visible={false}` renders a SPACER, not nothing: every row's control
+  // columns have to line up whether or not this row offers the control.
+  it("holds the column with a spacer when withheld", () => {
+    const view = renderButton({ hidden: false, visible: false, trackDisplayNumber: 2 });
+    expect(view.host.querySelector("button")).toBeNull();
+    expect(view.host.querySelector("span")).toBeTruthy();
+    view.unmount();
+  });
 });
 
 describe("PlainTrackHeader", () => {
@@ -98,7 +95,6 @@ describe("PlainTrackHeader", () => {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const onToggleSolo = vi.fn();
     act(() =>
       root.render(
         React.createElement(PlainTrackHeader, {
@@ -110,52 +106,34 @@ describe("PlainTrackHeader", () => {
           isAudioTrack: true,
           onToggleTrackHidden: vi.fn(),
           showTrackLabel: true,
-          isGroupMuted: false,
-          isSoloed: false,
-          onToggleSolo,
           ...overrides,
         }),
       ),
     );
-    return { host, unmount: () => act(() => root.unmount()), onToggleSolo };
+    return { host, unmount: () => act(() => root.unmount()) };
   }
 
-  const soloButton = (host: HTMLElement) =>
-    host.querySelector('button[aria-label="Hear only this"]');
-  const labelSpan = (host: HTMLElement) => host.querySelector("span.min-w-0");
-
-  it("offers solo on an audio track and reports its pressed state", () => {
-    const view = renderHeader({ isSoloed: true });
-    expect(soloButton(view.host)?.getAttribute("aria-pressed")).toBe("true");
-    view.unmount();
-  });
-
-  it("withholds solo from a visual track", () => {
-    const view = renderHeader({ isAudioTrack: false });
-    expect(soloButton(view.host)).toBeNull();
+  // A row that says what it is with a speaker does not also need the hide
+  // affordance sitting in the eye's slot.
+  it("withholds the eye from an audible audio track", () => {
+    const view = renderHeader();
+    expect(view.host.querySelector("button")).toBeNull();
     view.unmount();
   });
 
-  // A group-muted member is silent without being hidden itself, so the strike
-  // is the only thing that says so — and the title has to explain why, since a
-  // user who never touched THIS row's mute is looking for the reason.
-  it("strikes the label through when the row's own mute is on", () => {
+  // Withholding it unconditionally withheld the only way back: `data-hidden`
+  // silences the clip in preview and drops it from the render, and nothing else
+  // writes it, so a track hidden by hand or by "Hide all" was silent with no
+  // control anywhere to restore it.
+  it("offers it back once the audio track is hidden", () => {
     const view = renderHeader({ isTrackHidden: true });
-    expect(labelSpan(view.host)?.className).toContain("line-through");
+    expect(labelOf(view.host)).toBe("Show track 1");
     view.unmount();
   });
 
-  it("strikes it through for a group mute too, and says which", () => {
-    const view = renderHeader({ isGroupMuted: true });
-    expect(labelSpan(view.host)?.className).toContain("line-through");
-    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover (group muted)");
-    view.unmount();
-  });
-
-  it("leaves an audible row unstruck", () => {
-    const view = renderHeader();
-    expect(labelSpan(view.host)?.className).not.toContain("line-through");
-    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover");
+  it("keeps the eye on a visual track", () => {
+    const view = renderHeader({ isAudioTrack: false });
+    expect(labelOf(view.host)).toBe("Hide track 1");
     view.unmount();
   });
 });

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -1,29 +1,18 @@
-import { Eye, EyeSlash, SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
+import type React from "react";
+import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { Music } from "../../icons/SystemIcons";
-import { TimelineSoloButton } from "./TimelineSoloButton";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { TrackClipCount } from "./TrackClipCount";
 import { trackDisplaySuffix } from "./timelineTrackDisplay";
 
-/**
- * Audio tracks say "Mute", not "Hide" — the eye IS mute for sound-only rows.
- *
- * Action-phrased and per-track, like the visual branch: `hidden` here is the
- * CURRENT state, so the name has to promise the opposite. It read "Muted" /
- * "Mute" until the rollout, which named the state instead of the action (a
- * screen-reader user could not tell that activating an already-muted row would
- * unmute it) and dropped `suffix`, so every audio row shared one accessible
- * name — music plus VO being the ordinary case. The wording matches the undo
- * entry `timelineTrackVisibility` writes for the same click, where `hidden` is
- * the INCOMING state and the two therefore read inverted.
- */
-function visibilityButtonLabel(showAsMute: boolean, hidden: boolean, suffix: string): string {
-  if (showAsMute) return hidden ? `Unmute track${suffix}` : `Mute track${suffix}`;
+// Hide, plainly. The speaker variant was the mute presentation; with mute gone
+// this is the visibility eye it always was, and audio rows do not render it.
+function visibilityButtonLabel(hidden: boolean, suffix: string): string {
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 
-function visibilityButtonIcon(showAsMute: boolean, hidden: boolean) {
-  const Icon = showAsMute ? (hidden ? SpeakerSlash : SpeakerHigh) : hidden ? EyeSlash : Eye;
+function visibilityButtonIcon(hidden: boolean) {
+  const Icon = hidden ? EyeSlash : Eye;
   return <Icon size={14} weight="bold" aria-hidden="true" />;
 }
 
@@ -32,22 +21,19 @@ export function VisibilityButton({
   trackNumber,
   trackDisplayNumber,
   visible,
-  isAudioTrack,
   onToggle,
 }: {
   hidden: boolean;
   trackNumber: number;
   trackDisplayNumber: number | null;
   visible: boolean;
-  isAudioTrack?: boolean;
   onToggle: TimelineEditCallbacks["onToggleTrackHidden"];
 }) {
   if (!visible) return <span aria-hidden="true" className="h-6 w-6 shrink-0" />;
   // Display number in the text, real key in the callback. The two must not be
   // conflated in either direction.
   const suffix = trackDisplaySuffix(trackDisplayNumber);
-  const showAsMute = Boolean(isAudioTrack);
-  const label = visibilityButtonLabel(showAsMute, hidden, suffix);
+  const label = visibilityButtonLabel(hidden, suffix);
   return (
     <button
       type="button"
@@ -59,10 +45,12 @@ export function VisibilityButton({
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
+        // Display number alongside the real key: the undo-history label must
+        // announce the same row this button just did (see `onToggleTrackHidden`).
         void onToggle?.(trackNumber, !hidden, trackDisplayNumber);
       }}
     >
-      {visibilityButtonIcon(showAsMute, hidden)}
+      {visibilityButtonIcon(hidden)}
     </button>
   );
 }
@@ -77,10 +65,8 @@ export function PlainTrackHeader({
   showTrackLabel,
   isTrackHidden,
   isAudioTrack,
-  isGroupMuted,
-  isSoloed,
-  onToggleSolo,
   onToggleTrackHidden,
+  trailing,
 }: {
   trackNumber: number;
   trackDisplayNumber: number | null;
@@ -90,37 +76,61 @@ export function PlainTrackHeader({
   isAudioTrack: boolean;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
   showTrackLabel: boolean;
-  isGroupMuted: boolean;
-  isSoloed: boolean;
-  onToggleSolo?: (options?: { add?: boolean }) => void;
+  /** Trailing controls that belong on the control line — the FX entry points,
+   *  which the caller owns because only it knows the clip they act on. */
+  trailing?: React.ReactNode;
 }) {
   return (
     <>
-      {isAudioTrack && (
-        <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
-      )}
-      {showTrackLabel && (
-        <span
-          className={`min-w-0 flex-1 truncate text-[11px] ${
-            isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""
-          }`}
-          title={isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel}
-        >
-          {trackLabel}
-        </span>
-      )}
-      {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
-      <VisibilityButton
-        hidden={isTrackHidden}
-        trackNumber={trackNumber}
-        trackDisplayNumber={trackDisplayNumber}
-        visible
-        isAudioTrack={isAudioTrack}
-        onToggle={onToggleTrackHidden}
-      />
-      {isAudioTrack && onToggleSolo && (
-        <TimelineSoloButton isSoloed={isSoloed} onToggle={onToggleSolo} />
-      )}
+      {/* One line: the name, then every control pushed to the right edge. The
+          two-line split this replaced existed to stop four controls truncating
+          the name — but the name already truncates on its own (`min-w-0` plus
+          `truncate`), and the controls are `shrink-0`, so they hold the edge
+          and the name gives way instead. */}
+      <div className="flex min-w-0 items-center gap-1">
+        {isAudioTrack && (
+          <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+        )}
+        {/* No `flex-1`: the name takes only the width it needs, so the clip
+            count sits against it rather than being pushed out to meet the
+            controls. The slack goes to the `ml-auto` group below instead.
+
+            Wraps rather than truncating: a truncated name needs a hover to be
+            read at all, and a tooltip is no use to a name you are scanning a
+            column of. `break-words` so a long single token breaks instead of
+            forcing the column wider. */}
+        {showTrackLabel && (
+          <span className="min-w-0 break-words text-[11px] leading-tight">{trackLabel}</span>
+        )}
+        {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
+        {/* `ml-auto` is what anchors the group right: it absorbs the slack the
+            truncating name leaves, so the controls sit on the edge whatever the
+            name's length. */}
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          {/* Not on an audio track. The control is the old visibility eye, and
+            on audio it silences rather than hides — but a row that already says
+            what it is with a speaker does not also need the hide affordance
+            sitting in the eye's slot. `visible={false}` rather than omitting the
+            element, so the spacer keeps every row's control columns aligned.
+
+            EXCEPT when the audio track is ALREADY hidden. Withholding the
+            control unconditionally withheld the only way back: `data-hidden`
+            silences the clip in preview and drops it from the render, the
+            panel's "Muted" is the unrelated HTML `muted` attribute, and nothing
+            else writes it — so a track hidden before this rule (or by "Hide
+            all", or by hand) was silent with no control anywhere to restore it.
+            Offering the eye only in that state keeps the affordance off a normal
+            audio row while leaving the door open from the inside. */}
+          <VisibilityButton
+            hidden={isTrackHidden}
+            trackNumber={trackNumber}
+            trackDisplayNumber={trackDisplayNumber}
+            visible={!isAudioTrack || isTrackHidden}
+            onToggle={onToggleTrackHidden}
+          />
+          {trailing}
+        </div>
+      </div>
     </>
   );
 }

package/src/player/components/automationLaneData.test.ts

@@ -4,9 +4,11 @@ import {
   automationLaneLabel,
   automationLaneLabelParts,
   elementAutomation,
+  elementAutomationLanes,
   groupAutomationLanes,
   laneGroupKey,
   elementFxChain,
+  isCarveLane,
 } from "./automationLaneData";
 import type { TimelineElement } from "../store/timelineElement";
 
@@ -268,3 +270,95 @@ describe("groupAutomationLanes", () => {
     expect(groupAutomationLanes([stale]).map((g) => g.key)).toEqual(["Volume"]);
   });
 });
+
+// A carve writes its own filter bands AND the lanes that drive them, and
+// `withoutCarveLanes` replaces every one of them on each re-run — so a drag on
+// one is discarded the next time the carve analyses. The rack also counts the
+// carve as ONE module rather than the filters it compiles to, so a lane per
+// band reads as "automation on effects I removed", which is exactly how it was
+// reported.
+describe("carve-generated lanes", () => {
+  const carved = (): TimelineElement => ({
+    id: "vo",
+    tag: "audio",
+    start: 0,
+    duration: 5,
+    track: 0,
+    fxChain: JSON.stringify({
+      version: 1,
+      nodes: [
+        {
+          type: "peaking",
+          id: "n1",
+          fromCarve: true,
+          params: { frequency: 160, gain: -6, q: 1.4 },
+        },
+        { type: "peaking", id: "n2", params: { frequency: 900, gain: -3, q: 1 } },
+      ],
+    }),
+    automation: JSON.stringify({
+      version: 1,
+      lanes: [
+        {
+          target: "fx.n1.gain",
+          points: [
+            { t: 0, v: 0 },
+            { t: 1, v: -4 },
+          ],
+        },
+        {
+          target: "fx.n2.gain",
+          points: [
+            { t: 0, v: 0 },
+            { t: 1, v: -2 },
+          ],
+        },
+        {
+          target: "volume",
+          points: [
+            { t: 0, v: 1 },
+            { t: 1, v: 0.5 },
+          ],
+        },
+      ],
+    }),
+  });
+
+  // These lanes used to be withheld. A bed whose EVERY lane is the carve's —
+  // which is what a plain voiceover carve produces — then showed no automation
+  // at all and no control to reveal any, so the carve looked like it had done
+  // nothing. The ducking curve is what a carve IS; it is shown, and marked
+  // read-only because the carve rewrites it on each analysis.
+  it("draws the carve's lanes alongside the author's", () => {
+    const targets = elementAutomationLanes(carved()).map((lane) => lane.target);
+    expect(targets).toContain("fx.n1.gain");
+    expect(targets).toContain("fx.n2.gain");
+    expect(targets).toContain("volume");
+  });
+
+  it("counts a carve band as a timeline row, so the row reserves its height", () => {
+    const rows = groupAutomationLanes([carved()]);
+    expect(rows).toHaveLength(3);
+  });
+
+  it("tells a carve's lane from the author's on the same element", () => {
+    const chain = elementFxChain(carved());
+    expect(isCarveLane("fx.n1.gain", chain)).toBe(true);
+    // n2 is a hand-built peaking band with the same parameter — only the
+    // `fromCarve` tag separates them.
+    expect(isCarveLane("fx.n2.gain", chain)).toBe(false);
+    expect(isCarveLane("volume", chain)).toBe(false);
+  });
+
+  it("treats every lane as the author's when nothing is carve-tagged", () => {
+    const plain = {
+      ...carved(),
+      fxChain: JSON.stringify({
+        version: 1,
+        nodes: [{ type: "peaking", id: "n1", params: { frequency: 160, gain: -6, q: 1.4 } }],
+      }),
+    };
+    expect(elementAutomationLanes(plain).map((l) => l.target)).toContain("fx.n1.gain");
+    expect(isCarveLane("fx.n1.gain", elementFxChain(plain))).toBe(false);
+  });
+});

package/src/player/components/automationLaneData.ts

@@ -91,7 +91,30 @@ export function elementAutomation(element: TimelineElement): HfAutomation {
   });
 }
 
+/**
+ * Is this lane one the CARVE wrote, rather than the author?
+ *
+ * The carve compiles to tagged nodes and rewrites their envelopes on every
+ * re-run (`withoutCarveLanes` replaces each one), so a drag on such a lane is
+ * silently discarded the next time it analyses. Read-only rather than hidden:
+ * the ducking curve is what a carve IS, and the whole reason to look at a
+ * carved bed in the timeline is to see where it makes room. Hiding them left a
+ * bed whose every lane was the carve's showing no automation at all and no
+ * control to reveal any — which reads as the carve having done nothing.
+ */
+export function isCarveLane(target: string, chain: HfAudioFxChain | null): boolean {
+  return (chain?.nodes ?? []).some(
+    (node) => node.fromCarve && node.id && target.startsWith(`fx.${node.id}.`),
+  );
+}
+
 /** Lanes in the order they are drawn, one row each. */
+/**
+ * The lanes a TIMELINE row should draw.
+ *
+ * Every lane the element carries, the carve's included — see `isCarveLane` for
+ * why those are shown read-only instead of withheld.
+ */
 export function elementAutomationLanes(element: TimelineElement): HfAutomationLane[] {
   return elementAutomation(element).lanes;
 }

package/src/player/components/groupAutomationElement.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { groupAutomationElement } from "./groupAutomationElement";
+import { groupAutomationLanes } from "./automationLaneData";
+
+const GROUP = {
+  id: "voiceover",
+  label: "Voiceover",
+  anchorKey: 1.5,
+  automation: JSON.stringify({
+    version: 1,
+    lanes: [
+      {
+        target: "volume",
+        points: [
+          { t: 0, v: 1 },
+          { t: 5, v: 0.4 },
+        ],
+      },
+    ],
+  }),
+};
+
+describe("groupAutomationElement", () => {
+  // §1.3: "A group's automation clock is COMPOSITION time — decide it, do not
+  // inherit it." A clip-local span would land the group's fade at a different
+  // moment in preview than the render bakes it.
+  it("spans the whole composition from zero, so lane times are composition time", () => {
+    const el = groupAutomationElement(GROUP, 60);
+    expect(el.start).toBe(0);
+    expect(el.duration).toBe(60);
+  });
+
+  // The lane machinery filters with `isAudioTimelineElement`; a group that does
+  // not pass it renders nothing at all, silently.
+  it("is admitted by the lane machinery and yields the group's own lanes", () => {
+    const lanes = groupAutomationLanes([groupAutomationElement(GROUP, 60)]);
+    expect(lanes).toHaveLength(1);
+    expect(lanes[0]?.name).toBeTruthy();
+  });
+
+  // The write has to land on `<hf-audio-group>`, not on a member clip.
+  it("carries the group's DOM id, so a lane edit addresses the group element", () => {
+    expect(groupAutomationElement(GROUP, 60).domId).toBe("voiceover");
+  });
+
+  // A group with no automation draws no lanes — and must not throw doing it.
+  it("yields no lanes when the group automates nothing", () => {
+    const bare = { id: "sfx", label: "SFX", anchorKey: 2.5 };
+    expect(groupAutomationLanes([groupAutomationElement(bare, 60)])).toHaveLength(0);
+  });
+});

package/src/player/components/groupAutomationElement.ts

@@ -0,0 +1,37 @@
+/**
+ * The group, as the automation lanes see it.
+ *
+ * Lanes are keyed by `TimelineElement` everywhere — the slot, the binder, the
+ * identity used for selection. A group is not one: it has no clip id, no start
+ * and no duration, which is §1.9's "a group is the first real audio entity in
+ * the system" problem showing up in the row model. Rather than give lanes a
+ * second, parallel path, the group borrows the shape it does not have.
+ *
+ * `start: 0` and `duration` = the composition's is not a placeholder, it is the
+ * clock: the design doc fixes a group's automation clock as COMPOSITION time
+ * (§1.3), and a missing `data-start` parses as 0, which is exactly that. So a
+ * lane drawn against this element lands at the same seconds the render bakes.
+ */
+
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
+
+/** The synthetic element's track number — the group row's own anchor. */
+export function groupAutomationElement(
+  group: Pick<TimelineTrackGroupInfo, "id" | "label" | "automation" | "fxChain" | "anchorKey">,
+  compositionDuration: number,
+): TimelineElement {
+  return {
+    id: group.id,
+    // The DOM id, so a write lands on the `<hf-audio-group>` and not on a clip.
+    domId: group.id,
+    label: group.label,
+    // Audio, so `isAudioTimelineElement` admits it and the lanes render at all.
+    tag: "audio",
+    start: 0,
+    duration: compositionDuration,
+    track: group.anchorKey,
+    ...(group.automation ? { automation: group.automation } : {}),
+    ...(group.fxChain ? { fxChain: group.fxChain } : {}),
+  };
+}

package/src/player/components/timelineCallbacks.ts

@@ -73,7 +73,7 @@ export interface TimelineEditCallbacks {
    * two different orderings: the header's comes from the group-aware row list
    * (synthetic anchor rows, members pulled contiguous), the history's from a
    * plain ascending sort of element-bearing keys. Once a group exists those
-   * disagree, so the same click said "Mute track 2" and recorded "Mute track 1".
+   * disagree, so the same click said "Hide track 2" and recorded "Hide track 1".
    * Passing the rendered number keeps one answer instead of two derivations.
    */
   onToggleTrackHidden?: (
@@ -93,7 +93,11 @@ export interface TimelineEditCallbacks {
   /** C1's ungrouped-track FX pointer: "Group these clips" — write
    *  `data-audio-group` on every one of them, atomically. Same shape B6's
    *  carve auto-grouping uses. */
-  onGroupClips?: (clipIds: readonly string[], groupId: string) => Promise<void>;
+  onGroupClips?: (
+    clipIds: readonly string[],
+    groupId: string,
+    groupLabel?: string,
+  ) => Promise<void>;
   /** C1's single-clip FX write: addressed by the clip itself rather than the
    *  current selection, mirroring `onSetAudioGroupAttributeLive/Quiet`. */
   onSetElementAttributeLive?: (

package/src/player/components/timelineKeyboardNavigation.test.ts

@@ -58,7 +58,7 @@ function model(overrides: Partial<Parameters<typeof buildTimelineLogicalRows>[0]
     selectedElementId: "active",
     selectedElementIds: new Set(),
     expandedClipIds: new Set(["active"]),
-    expandedGroupIds: new Set(),
+    collapsedGroupIds: new Set(),
     expandedLaneOwnerIds: new Set(),
     groups: [],
     trackGroupOf: new Map(),
@@ -248,7 +248,7 @@ describe("resolveTimelineNavigationTarget", () => {
       selectedElementId: null,
       selectedElementIds: new Set(),
       expandedClipIds: new Set(),
-      expandedGroupIds: new Set(),
+      collapsedGroupIds: new Set(),
       expandedLaneOwnerIds: new Set(),
       groups: [],
       trackGroupOf: new Map(),