@hyperframes/studio 0.8.11 → 0.8.13

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(),

package/src/player/components/timelineKeyboardNavigation.ts

@@ -77,8 +77,8 @@ export interface BuildTimelineLogicalRowsInput {
   selectedElementId: string | null;
   selectedElementIds: ReadonlySet<string>;
   expandedClipIds: ReadonlySet<string>;
-  /** Groups whose member rows the caret has shown (structural, not lanes). */
-  expandedGroupIds: ReadonlySet<string>;
+  /** Groups the caret has COLLAPSED — absent means expanded, the default. */
+  collapsedGroupIds: ReadonlySet<string>;
   /** Rows (clip id or group id) whose automation-lane rows the `∿` button opened. */
   expandedLaneOwnerIds: ReadonlySet<string>;
   groups: readonly TimelineTrackGroupInfo[];
@@ -251,7 +251,7 @@ export function buildTimelineLogicalRows({
   selectedElementId,
   selectedElementIds,
   expandedClipIds,
-  expandedGroupIds,
+  collapsedGroupIds,
   expandedLaneOwnerIds,
   groups,
   trackGroupOf,
@@ -273,7 +273,8 @@ export function buildTimelineLogicalRows({
       selectedElementIds,
       gsapAnimations,
     );
-    const expanded = isRowOpen(activeId, expandedClipIds, expandedLaneOwnerIds) && lanes.length > 0;
+    const disclosable = isTrackDisclosable(elements, lanes.length);
+    const expanded = isRowOpen(activeId, expandedClipIds, expandedLaneOwnerIds) && disclosable;
     rows.push({
       id: trackId,
       kind: "row",
@@ -282,7 +283,7 @@ export function buildTimelineLogicalRows({
       level,
       parentId,
       elementId: activeId,
-      expandable: lanes.length > 0,
+      expandable: disclosable,
       expanded,
       items: clipItems(trackId, elements),
     });
@@ -300,7 +301,7 @@ export function buildTimelineLogicalRows({
   // count.
   function emitGroup(group: TimelineTrackGroupInfo): void {
     const groupRowId = timelineGroupRowId(group.id);
-    const groupExpanded = expandedGroupIds.has(group.id);
+    const groupExpanded = !collapsedGroupIds.has(group.id);
     rows.push({
       id: groupRowId,
       kind: "row",
@@ -315,8 +316,10 @@ export function buildTimelineLogicalRows({
       items: [],
     });
     if (expandedLaneOwnerIds.has(group.id)) {
-      const memberElements = group.memberTracks.flatMap((track) => trackMap.get(track) ?? []);
-      for (const laneGroup of groupAutomationLanes(memberElements)) {
+      // The group's own member list, not `trackMap`: a COLLAPSED group can have
+      // its lane shelf open, and its members are absent from the display list —
+      // so looking them up there emitted zero lane rows for exactly that case.
+      for (const laneGroup of groupAutomationLanes(group.memberElements)) {
         rows.push({
           id: `${groupRowId}::${laneGroup.key}`,
           kind: "row",
@@ -452,3 +455,17 @@ export function resolveTimelineFocusFallback(
   }
   return nextRows[previous.rowIndex] ?? nextRows[previous.rowIndex - 1] ?? null;
 }
+
+/**
+ * Does a track have anything to open — the header's own `disclosable`.
+ *
+ * `TimelineTrackHeader` is `lanes.length > 0 || automationRows.length > 0`, and
+ * keyed on tweens alone here an audio track whose only disclosable content is
+ * AUTOMATION drew the `∿` while reporting itself unexpandable to the treegrid,
+ * so ArrowRight could not open it. Automation rows are counted per shared
+ * PROPERTY across the track's clips, the way the header counts them, not per
+ * clip.
+ */
+function isTrackDisclosable(elements: readonly TimelineElement[], laneCount: number): boolean {
+  return laneCount > 0 || groupAutomationLanes(elements).length > 0;
+}

package/src/player/components/timelineLayout.ts

@@ -7,7 +7,6 @@ export const GUTTER = 32;
 export const LABEL_COL_W = 232;
 export const TRACK_H = 48;
 export const LANE_H = 28;
-export const STRIP_H = 40; // group bus strip (B7) — one fixed block, not per-property like LANE_H
 export const RULER_H = 24;
 export const CLIP_Y = 3;
 export const CLIP_HANDLE_W = 18;

package/src/player/components/timelineViewModel.ts

@@ -4,7 +4,7 @@ import type { ResizingClipState } from "./timelineClipDragTypes";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { animationContributesLane } from "./TimelinePropertyLanes";
 
-export function hasKeyframedTimelineClips(
+function hasKeyframedTimelineClips(
   animationsByElement: ReadonlyMap<string, readonly GsapAnimation[]>,
 ): boolean {
   return Array.from(animationsByElement.values()).some((animations) =>
@@ -12,6 +12,35 @@ export function hasKeyframedTimelineClips(
   );
 }
 
+/**
+ * Does the timeline need the wide label column?
+ *
+ * Keyframed clips need it for their property-lane names. Audio GROUPS need it
+ * for the same reason a keyframed clip does — a row whose name has nowhere else
+ * to go. A track row survives a narrow gutter because its CLIPS carry the name
+ * on the bar; a group row has no clips at all, so in the 80px gutter its label
+ * rendered at zero width and its FX and lane buttons were clipped off the
+ * side.
+ *
+ * Widening the column for the whole timeline, rather than letting just the
+ * group row overhang: the header is sticky and opaque, so an oversized one
+ * painted a slab across the rest of its own row, stayed pinned there through
+ * horizontal scroll, and had the playhead drawn straight through it.
+ */
+export function timelineNeedsLabelColumn(
+  animationsByElement: ReadonlyMap<string, readonly GsapAnimation[]>,
+  elements: readonly TimelineElement[],
+): boolean {
+  return (
+    hasKeyframedTimelineClips(animationsByElement) ||
+    // The column exists FOR the group rows, so this must stay in step with
+    // whatever decides they are drawn (`useTimelineTrackDerivations`) —
+    // widening it with no group row on screen is a 232px shift of every clip
+    // with nothing to explain it.
+    elements.some((element) => Boolean(element.audioGroup))
+  );
+}
+
 export function getEffectiveTimelineDuration(
   duration: number,
   elements: readonly TimelineElement[],

package/src/player/components/trackHeaderLabelRows.tsx

@@ -0,0 +1,328 @@
+/**
+ * The rows a track header draws BELOW its own line: one per disclosed keyframe
+ * property group, one per automation envelope.
+ *
+ * Split out of `TimelineTrackHeader.tsx`, which owned all of this and stood at
+ * 763 lines against the studio's 600-line cap. Nothing else moved: these three
+ * components never read the header's state, only their own props, which is why
+ * they are the seam.
+ */
+
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+import { LANE_H, getTimelineLaneTop } from "./timelineLayout";
+import {
+  resolveLaneHeaderState,
+  type KeyframeNavigationState,
+  type TimelinePropertyLane,
+} from "./trackHeaderLaneState";
+import { valueReadout } from "./trackHeaderLaneValues";
+import { timelineLogicalRowCellId, timelinePropertyRowId } from "./timelineNavigationIdentity";
+
+// Figma layout: prev-keyframe ‹, the add/remove toggle (children), next ›.
+function PropertyGroupNavigation({
+  navigation,
+  label,
+  expandedElement,
+  onSeek,
+  children,
+}: {
+  navigation: KeyframeNavigationState;
+  label: string;
+  expandedElement: TimelineElement;
+  onSeek?: (time: number) => void;
+  children: React.ReactNode;
+}) {
+  // The 12x20px glyph is all the lane row has room for, so the WCAG 24x24
+  // target is met with a centered transparent ::before overlay instead of a
+  // bigger box; focus-visible matches every other control in this header.
+  const CHEVRON_BUTTON_CLASS =
+    "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 " +
+    "focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] " +
+    "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 " +
+    "before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+  const seekTo = (keyframe: { percentage: number } | null) => {
+    if (keyframe) {
+      onSeek?.(expandedElement.start + (keyframe.percentage / 100) * expandedElement.duration);
+    }
+  };
+  return (
+    <span className="flex shrink-0 items-center gap-0.5">
+      <button
+        type="button"
+        aria-label={`Previous ${label} keyframe`}
+        disabled={!navigation.prevKeyframe}
+        className={CHEVRON_BUTTON_CLASS}
+        onClick={(event) => {
+          event.stopPropagation();
+          seekTo(navigation.prevKeyframe);
+        }}
+      >
+        ‹
+      </button>
+      {children}
+      <button
+        type="button"
+        aria-label={`Next ${label} keyframe`}
+        disabled={!navigation.nextKeyframe}
+        className={CHEVRON_BUTTON_CLASS}
+        onClick={(event) => {
+          event.stopPropagation();
+          seekTo(navigation.nextKeyframe);
+        }}
+      >
+        ›
+      </button>
+    </span>
+  );
+}
+
+export function PropertyGroupHeaderRow({
+  lanesId,
+  lane,
+  laneIndex,
+  isLastLane,
+  expandedElement,
+  currentTime,
+  clipPercentage,
+  gutterBackground,
+  columnWidth,
+  onTogglePropertyGroupKeyframe,
+  onSeek,
+  rovingTargetId = null,
+}: {
+  lanesId: string;
+  lane: TimelinePropertyLane;
+  laneIndex: number;
+  isLastLane: boolean;
+  expandedElement: TimelineElement;
+  currentTime: number;
+  clipPercentage: number;
+  gutterBackground: string;
+  columnWidth: number;
+  onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onSeek?: (time: number) => void;
+  rovingTargetId: string | null;
+}) {
+  const elementId = expandedElement.key ?? expandedElement.id;
+  const { navigation, values, label, toggleTarget } = resolveLaneHeaderState(
+    lane,
+    currentTime,
+    clipPercentage,
+  );
+
+  return (
+    <div
+      id={timelineLogicalRowCellId(lanesId, timelinePropertyRowId(elementId, lane.group), "header")}
+      data-timeline-focus-id={timelinePropertyRowId(elementId, lane.group)}
+      data-timeline-element-id={elementId}
+      tabIndex={rovingTargetId === timelinePropertyRowId(elementId, lane.group) ? 0 : -1}
+      data-property-group={lane.group}
+      data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      style={{
+        top: getTimelineLaneTop(laneIndex),
+        // The header column narrows to contentOrigin whenever that is under
+        // LABEL_COL_W; a lane row pinned to LABEL_COL_W then hangs its value
+        // readout over the canvas, on top of the clips it is labelling.
+        width: columnWidth,
+        height: LANE_H,
+        background: gutterBackground,
+      }}
+    >
+      {/* Tree connector: vertical spine (top-half on the last lane) + branch tick. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      <span className="w-[46px] shrink-0 truncate text-white" title={label}>
+        {label}
+      </span>
+      <PropertyGroupNavigation
+        navigation={navigation}
+        label={label}
+        expandedElement={expandedElement}
+        onSeek={onSeek}
+      >
+        <button
+          type="button"
+          aria-pressed={!!navigation.currentKeyframe}
+          aria-label={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
+          title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
+          // h-6 w-6 = the 24x24 WCAG 2.2 minimum target; the ◆ glyph stays 11px.
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onClick={(event) => {
+            // Same as the disclosure caret and the eye: a control in the label
+            // column owns its click, it does not also hit the track row behind it.
+            event.stopPropagation();
+            if (toggleTarget) {
+              void onTogglePropertyGroupKeyframe?.(expandedElement, toggleTarget);
+            }
+          }}
+        >
+          {navigation.currentKeyframe ? "◆" : "◇"}
+        </button>
+      </PropertyGroupNavigation>
+      <span
+        className="min-w-0 flex-1 truncate text-right tabular-nums text-white/45"
+        title={valueReadout(lane.group, values)}
+      >
+        {valueReadout(lane.group, values)}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * One envelope's row in the label column.
+ *
+ * Named here rather than inside the lane, on the same tree connector the
+ * keyframe rows use: an automation lane is a child of its clip exactly as a
+ * property group is, and drawing its name over the envelope put the label on top
+ * of the curve it describes and scrolled it away from its own row.
+ */
+export function AutomationLaneHeaderRow({
+  target,
+  label,
+  name,
+  param,
+  alsoAutomatedBy,
+  top,
+  isLastLane,
+  gutterBackground,
+  columnWidth,
+  onRemove,
+  isCarve,
+  onReveal,
+}: {
+  /** The lane the ACTIVE clip draws in this row, or null when it draws none —
+   *  the row belongs to the property, and a clip may be absent from it. */
+  target: string | null;
+  /** The whole thing on one line: the row's identity, its tooltip, and the
+   *  remove button's name. */
+  label: string;
+  /** What the effect is — "Peaking EQ 1.6 kHz". */
+  name: string;
+  /** Which knob the envelope drives. Empty when there is no second line to draw. */
+  param: string;
+  /** Set when this clip's group automates the SAME parameter. Gain stages
+   *  multiply — 0.42 on the group under 0.80 here plays at 0.34 — so an author
+   *  who drew one curve and then another hears something quieter than either
+   *  with nothing on screen to say why (groups doc §5). Not a warning; an
+   *  explanation. */
+  alsoAutomatedBy?: string;
+  top: number;
+  isLastLane: boolean;
+  gutterBackground: string;
+  columnWidth: number;
+  onRemove?: (target: string) => void;
+  /** The carve owns this envelope and rewrites it on every re-run, so it is
+   *  shown but not the author's to edit or delete. */
+  isCarve?: boolean;
+  /** Reveal this parameter in the rack. Absent, the name is inert rather than a
+   *  button that looks live and does nothing. */
+  onReveal?: () => void;
+}) {
+  return (
+    <div
+      data-automation-lane-label={label}
+      data-timeline-lane-top={top}
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      style={{
+        top,
+        width: columnWidth,
+        height: AUTOMATION_LANE_H,
+        background: gutterBackground,
+      }}
+    >
+      {/* Tree connector, as the keyframe rows draw it: spine down the row, branch
+          tick at the name's own height. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      {/* Two lines: what the effect is, then which knob the envelope drives. On
+          one line a band's own name was the first thing truncated in a column this
+          narrow — "Peaking EQ 1.6 k…" — losing exactly the part that tells two
+          bands apart. */}
+      {/* A button, because the name IS the way to the knob: clicking it opens
+          the rack on the effect this envelope drives and scrolls to it. Nothing
+          else in the timeline can get there — a lane names a parameter, and the
+          rack is where a parameter is set. */}
+      <button
+        type="button"
+        tabIndex={-1}
+        aria-label={onReveal ? `Show ${label} in the effect rack` : undefined}
+        title={onReveal ? `Show ${label} in the effect rack` : label}
+        disabled={!onReveal}
+        className="flex min-w-0 flex-1 flex-col justify-center rounded border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          // The label column owns its click; it does not also fall through to
+          // the track row behind it and move the selection.
+          event.stopPropagation();
+          onReveal?.();
+        }}
+      >
+        <span data-automation-lane-name="" className="truncate font-mono text-[9px] text-white/70">
+          {name}
+        </span>
+        {param ? (
+          <span
+            data-automation-lane-param=""
+            className="truncate font-mono text-[9px] text-white/40"
+          >
+            {param}
+          </span>
+        ) : null}
+        {alsoAutomatedBy ? (
+          <span
+            data-automation-lane-also=""
+            className="truncate text-[9px] text-[#F5C542]/80"
+            title={`${alsoAutomatedBy} is also fading this — the two multiply.`}
+          >
+            {alsoAutomatedBy} is also fading this.
+          </span>
+        ) : null}
+      </button>
+      {/* Beside the name it labels, because that is the only place an envelope is
+          named at all: a carve writes its own lanes, and the FX panel's automate
+          toggle can only reach a parameter it still lists — so without this an
+          envelope could be created and never removed.
+
+          Only for the clip the header is showing, since that is the only one a
+          write can reach: a shared row's other envelopes belong to clips that
+          are not selected, and a button that silently removed one of them (or
+          none) would be worse than no button. */}
+      {/* Not on a carve's own lane: the carve regenerates it on the next
+          analysis, so removing one band would come back and reads as the
+          button not working. Switching the carve off in the rack is what
+          removes them, all together, which is how they were made. */}
+      {onRemove && target !== null && !isCarve && (
+        <button
+          type="button"
+          aria-label={`Remove ${label} automation`}
+          title={`Remove ${label} automation`}
+          // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            // A control in the label column owns its click; it does not also hit
+            // the track row behind it and change the selection.
+            event.stopPropagation();
+            onRemove(target);
+          }}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}