@hyperframes/studio 0.8.7 → 0.8.8

package/package.json

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

package/src/components/editor/PropertyPanelFlat.tsx

@@ -14,7 +14,6 @@ import { FlatTextSection } from "./propertyPanelFlatTextSection";
 import { FlatStyleSection } from "./propertyPanelFlatStyleSections";
 import { FlatLayoutSection } from "./propertyPanelFlatLayoutSection";
 import { FlatMotionSection } from "./propertyPanelFlatMotionSection";
-import { isCanaryEnabled } from "../../telemetry/canary";
 import { AudioFxGroup } from "./propertyPanelAudioFxGroup.js";
 import { useVolumeAutomation } from "./useVolumeAutomation";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
@@ -428,10 +427,7 @@ export function PropertyPanelFlat({
       });
     }
   }
-  // Behind `audio-fx-rack`, at 0%. Gates the AUTHORING surface only: the runtime
-  // and render still honour a `data-fx-chain` already on an element, so a
-  // composition written through the skill does not go silently dry off-cohort.
-  if (sections.audioFx && isCanaryEnabled("audio-fx-rack")) {
+  if (sections.audioFx) {
     groups.push({
       id: "audio-fx",
       title: "Audio FX",

package/src/hooks/timelineTrackVisibility.test.ts

@@ -223,6 +223,37 @@ describe("toggleTimelineTrackHidden", () => {
     expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Mute track 1");
   });
 
+  // The header derives its row from the GROUP-AWARE order (a synthetic anchor
+  // row, members pulled contiguous); this function's own fallback derives it
+  // from ascending element-bearing keys. Once a group exists those disagree, so
+  // the same click announced "Mute track 2" and recorded "Mute track 1". The
+  // clicked control passes the row it showed, and that is what gets recorded.
+  it("records the display row the clicked control announced, not its own derivation", async () => {
+    const files = new Map([
+      ["index.html", `<div id="voiceover" data-start="0" data-duration="2"></div>`],
+    ]);
+    stubProjectFiles(files);
+
+    const recordEdit = vi.fn();
+
+    await toggleTimelineTrackHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [element({ id: "voiceover", domId: "voiceover", track: 0, tag: "audio" })],
+      track: 0,
+      hidden: true,
+      // Row 2 in the header: the group's anchor row sits above this member.
+      displayNumber: 2,
+      previewIframe: null,
+      writeProjectFile: async () => {},
+      recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Mute track 2");
+  });
+
   it("labels unmuting an audio-only track back on", async () => {
     const files = new Map([
       ["index.html", `<div id="voiceover" data-start="0" data-duration="2" data-hidden=""></div>`],

package/src/hooks/timelineTrackVisibility.ts

@@ -32,6 +32,13 @@ interface ToggleTimelineTrackHiddenInput {
   timelineElements: readonly TimelineElement[];
   track: number;
   hidden: boolean;
+  /**
+   * The display row the clicked control announced, when the caller has one.
+   * Absent (a keyboard path or a programmatic call), the row is derived here
+   * from ascending element-bearing keys — correct whenever no group has
+   * reordered the header.
+   */
+  displayNumber?: number | null;
   previewIframe: HTMLIFrameElement | null;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
@@ -209,6 +216,7 @@ export async function toggleTimelineTrackHidden({
   timelineElements,
   track,
   hidden,
+  displayNumber,
   previewIframe,
   writeProjectFile,
   recordEdit,
@@ -216,9 +224,12 @@ export async function toggleTimelineTrackHidden({
   pendingTimelineEditPathRef,
 }: ToggleTimelineTrackHiddenInput): Promise<string[]> {
   // `track` is the fractional sort key the callback needs; the history entry is
-  // read by a human, so it gets the display row instead.
+  // read by a human, so it gets the display row instead — the one the clicked
+  // control announced, when the caller passed it. Deriving it again here would
+  // use ascending element-bearing keys, which stop matching the header as soon
+  // as an audio group reorders the rows and inserts an anchor.
   const suffix = trackDisplaySuffix(
-    trackDisplayNumber(timelineTrackOrder(timelineElements), track),
+    displayNumber ?? trackDisplayNumber(timelineTrackOrder(timelineElements), track),
   );
   const trackElements = timelineElements.filter((element) => element.track === track);
   const isAudioOnlyTrack = trackElements.length > 0 && trackElements.every(isAudioTimelineElement);
@@ -397,14 +408,18 @@ export function useTimelineTrackVisibilityEditing({
   pendingTimelineEditPathRef,
   isRecordingRef,
   forceReloadSdkSession,
-}: UseTimelineTrackVisibilityEditingInput): (track: number, hidden: boolean) => Promise<void> {
+}: UseTimelineTrackVisibilityEditingInput): (
+  track: number,
+  hidden: boolean,
+  displayNumber?: number | null,
+) => Promise<void> {
   // Resolve the eye toggle against the EXPANDED rows the canvas actually renders:
   // virtual sub-comp children carry their own (display.track + idx) track numbers,
   // so filtering the raw store list by a virtual track number would hide the wrong
   // outer-scene sibling sharing that index.
   const expandedElements = useExpandedTimelineElements();
   return useCallback(
-    async (track: number, hidden: boolean) => {
+    async (track: number, hidden: boolean, displayNumber?: number | null) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -418,6 +433,7 @@ export function useTimelineTrackVisibilityEditing({
           timelineElements: expandedElements,
           track,
           hidden,
+          displayNumber,
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,

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

@@ -392,7 +392,7 @@ describe("Timeline provider boundary", () => {
     const row = button.parentElement?.parentElement;
     // Row children: [TimelineTrackHeader (sticky column), time-mapped content].
     const trackContent = row?.children.item(1);
-    expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false);
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false, 1);
     expect(trackContent).toBeInstanceOf(HTMLElement);
     if (!(trackContent instanceof HTMLElement)) {
       throw new Error("Expected track content element");

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

@@ -203,7 +203,9 @@ describe("TimelineLanes track numbering", () => {
     const second = view.host.querySelector<HTMLButtonElement>('button[aria-label="Hide track 2"]');
     act(() => second?.click());
 
-    expect(onToggleTrackHidden).toHaveBeenCalledWith(TRACK_B, true);
+    // Third argument is the display row the button announced, so the undo entry
+    // records the same row the user just read off it.
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(TRACK_B, true, 2);
     act(() => view.root.unmount());
   });
 

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

@@ -204,7 +204,8 @@ describe("TimelineTrackHeader", () => {
     expect(view.host.innerHTML).not.toContain("0.16666666666666666");
 
     act(() => eye?.click());
-    expect(onToggleTrackHidden).toHaveBeenCalledWith(1 / 6, true);
+    // The real fractional key acts; the display row rides along for the label.
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(1 / 6, true, 1);
     act(() => view.root.unmount());
   });
 

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

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+
+/**
+ * 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.
+ */
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PlainTrackHeader, VisibilityButton } from "./TimelineTrackPlainHeader";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderButton(props: {
+  hidden: boolean;
+  isAudioTrack?: boolean;
+  trackDisplayNumber: number | null;
+}): { host: HTMLElement; unmount: () => void; onToggle: ReturnType<typeof vi.fn> } {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const onToggle = vi.fn();
+  act(() =>
+    root.render(
+      React.createElement(VisibilityButton, {
+        hidden: props.hidden,
+        trackNumber: 7,
+        trackDisplayNumber: props.trackDisplayNumber,
+        visible: true,
+        isAudioTrack: props.isAudioTrack,
+        onToggle,
+      }),
+    ),
+  );
+  return { host, unmount: () => act(() => root.unmount()), onToggle };
+}
+
+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", () => {
+    const shown = renderButton({ hidden: false, trackDisplayNumber: 2 });
+    expect(labelOf(shown.host)).toBe("Hide track 2");
+    shown.unmount();
+    const hiddenRow = renderButton({ hidden: true, trackDisplayNumber: 2 });
+    expect(labelOf(hiddenRow.host)).toBe("Show track 2");
+    hiddenRow.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 });
+    view.host.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(view.onToggle).toHaveBeenCalledWith(7, true, 2);
+    view.unmount();
+  });
+});
+
+describe("PlainTrackHeader", () => {
+  function renderHeader(overrides: Partial<Parameters<typeof PlainTrackHeader>[0]> = {}) {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const onToggleSolo = vi.fn();
+    act(() =>
+      root.render(
+        React.createElement(PlainTrackHeader, {
+          trackNumber: 0,
+          trackDisplayNumber: 1,
+          trackLabel: "Voiceover",
+          clipCount: 1,
+          isTrackHidden: false,
+          isAudioTrack: true,
+          onToggleTrackHidden: vi.fn(),
+          showTrackLabel: true,
+          isGroupMuted: false,
+          isSoloed: false,
+          onToggleSolo,
+          ...overrides,
+        }),
+      ),
+    );
+    return { host, unmount: () => act(() => root.unmount()), onToggleSolo };
+  }
+
+  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();
+    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", () => {
+    const view = renderHeader({ isTrackHidden: true });
+    expect(labelSpan(view.host)?.className).toContain("line-through");
+    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");
+    view.unmount();
+  });
+});

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -1,15 +1,24 @@
 import { Eye, EyeSlash, SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
-import { isCanaryEnabled } from "../../telemetry/canary";
 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.
-// Gated: the relabel ships behind the canary, unlike the preview fix.
+/**
+ * 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 ? "Muted" : "Mute";
+  if (showAsMute) return hidden ? `Unmute track${suffix}` : `Mute track${suffix}`;
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 
@@ -37,7 +46,7 @@ export function VisibilityButton({
   // 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) && isCanaryEnabled("audio-track-mute");
+  const showAsMute = Boolean(isAudioTrack);
   const label = visibilityButtonLabel(showAsMute, hidden, suffix);
   return (
     <button
@@ -50,7 +59,7 @@ export function VisibilityButton({
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
-        void onToggle?.(trackNumber, !hidden);
+        void onToggle?.(trackNumber, !hidden, trackDisplayNumber);
       }}
     >
       {visibilityButtonIcon(showAsMute, hidden)}
@@ -93,9 +102,7 @@ export function PlainTrackHeader({
       {showTrackLabel && (
         <span
           className={`min-w-0 flex-1 truncate text-[11px] ${
-            isAudioTrack && (isTrackHidden || isGroupMuted) && isCanaryEnabled("audio-track-mute")
-              ? "line-through"
-              : ""
+            isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""
           }`}
           title={isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel}
         >
@@ -111,7 +118,7 @@ export function PlainTrackHeader({
         isAudioTrack={isAudioTrack}
         onToggle={onToggleTrackHidden}
       />
-      {isAudioTrack && isCanaryEnabled("audio-track-mute") && onToggleSolo && (
+      {isAudioTrack && onToggleSolo && (
         <TimelineSoloButton isSoloed={isSoloed} onToggle={onToggleSolo} />
       )}
     </>

package/src/player/components/timelineCallbacks.ts

@@ -67,7 +67,20 @@ export interface TimelineEditCallbacks {
     }>,
     options?: { coalesceKey?: string },
   ) => Promise<void> | void;
-  onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
+  /**
+   * `displayNumber` is the row the CLICKED control announced. It travels with
+   * the click because the header and the undo-history label derive the row from
+   * 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".
+   * Passing the rendered number keeps one answer instead of two derivations.
+   */
+  onToggleTrackHidden?: (
+    track: number,
+    hidden: boolean,
+    displayNumber?: number | null,
+  ) => Promise<void> | void;
   /** B7's bus strip: live-write the group's own attribute while dragging. */
   onSetAudioGroupAttributeLive?: (groupId: string, attr: string, value: string | null) => void;
   /** ...and persist one undo entry on release. */

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

@@ -0,0 +1,103 @@
+// @vitest-environment happy-dom
+
+/**
+ * Row derivation for audio groups.
+ *
+ * This ran behind the `audio-groups` canary at 0% until the rollout, so it had
+ * never executed in the enabled state in any suite — the off-cohort branch
+ * returned raw tracks and stopped. Now it reorders rows and emits synthetic
+ * anchor rows for every user, which is exactly the pair of invariants pinned
+ * here: an ungrouped project is untouched, and a group's members become
+ * contiguous under an anchor at `memberTracks[0] - 0.5`.
+ */
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+});
+
+function clip(id: string, track: number, extra: Partial<TimelineElement> = {}): TimelineElement {
+  return { id, label: id, tag: "audio", start: 0, duration: 1, track, ...extra };
+}
+
+function derive(elements: TimelineElement[]): ReturnType<typeof useTimelineTrackDerivations> {
+  let result: ReturnType<typeof useTimelineTrackDerivations> | undefined;
+  function Probe() {
+    result = useTimelineTrackDerivations(elements);
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(React.createElement(Probe)));
+  act(() => root.unmount());
+  if (!result) throw new Error("derivations did not render");
+  return result;
+}
+
+describe("useTimelineTrackDerivations", () => {
+  it("leaves an ungrouped project in raw ascending order", () => {
+    const { tracks, groups, trackGroupOf } = derive([clip("b", 2), clip("a", 0), clip("c", 1)]);
+
+    expect(tracks.map(([track]) => track)).toEqual([0, 1, 2]);
+    expect(tracks.map(([, els]) => els.map((el) => el.id))).toEqual([["a"], ["c"], ["b"]]);
+    expect(groups).toEqual([]);
+    expect(trackGroupOf.size).toBe(0);
+  });
+
+  // The reordering case: track 1 sits between the group's two members in raw
+  // order and must not be dragged into the group.
+  it("pulls interleaved members contiguous under a synthetic anchor row", () => {
+    const { tracks, groups, trackGroupOf } = derive([
+      clip("vo-1", 0, { audioGroup: "voiceover", audioGroupLabel: "Voiceover" }),
+      clip("music", 1),
+      clip("vo-2", 2, { audioGroup: "voiceover" }),
+    ]);
+
+    // Anchor immediately above the lowest member, then both members, then the
+    // ungrouped track keeps its own position after them.
+    expect(tracks.map(([track]) => track)).toEqual([-0.5, 0, 2, 1]);
+    // The anchor row owns no clips of its own.
+    expect(tracks[0]?.[1]).toEqual([]);
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0]).toMatchObject({
+      id: "voiceover",
+      label: "Voiceover",
+      anchorKey: -0.5,
+      memberTracks: [0, 2],
+    });
+
+    expect(trackGroupOf.get(0)?.id).toBe("voiceover");
+    expect(trackGroupOf.get(2)?.id).toBe("voiceover");
+    expect(trackGroupOf.has(1)).toBe(false);
+  });
+
+  it("carries the group element's own label, volume and mute onto the row", () => {
+    const { groups } = derive([
+      clip("vo-1", 3, {
+        audioGroup: "vo",
+        audioGroupLabel: "VO bus",
+        audioGroupVolume: 0.5,
+        audioGroupHidden: true,
+      }),
+    ]);
+
+    expect(groups[0]).toMatchObject({
+      label: "VO bus",
+      anchorKey: 2.5,
+      volume: 0.5,
+      hidden: true,
+    });
+  });
+
+  it("falls back to the group id and unity volume when the bus carries neither", () => {
+    const { groups } = derive([clip("sfx-1", 0, { audioGroup: "sfx" })]);
+    expect(groups[0]).toMatchObject({ id: "sfx", label: "sfx", volume: 1, hidden: false });
+  });
+});

package/src/player/components/useTimelineTrackDerivations.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { isCanaryEnabled } from "../../telemetry/canary";
 import { getTrackStyle, type TrackVisualStyle } from "./timelineIcons";
 
 /** One resolved audio group, positioned in the row order. */
@@ -157,16 +156,10 @@ export function useTimelineTrackDerivations(expandedElements: TimelineElement[])
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
   }, [expandedElements]);
 
-  const { tracks, groups, trackGroupOf } = useMemo(() => {
-    if (!isCanaryEnabled("audio-groups")) {
-      return {
-        tracks: rawTracks,
-        groups: [],
-        trackGroupOf: new Map<number, TimelineTrackGroupInfo>(),
-      };
-    }
-    return groupTimelineTracks(rawTracks);
-  }, [rawTracks]);
+  const { tracks, groups, trackGroupOf } = useMemo(
+    () => groupTimelineTracks(rawTracks),
+    [rawTracks],
+  );
 
   const trackStyles = useMemo(() => {
     const map = new Map<number, TrackVisualStyle>();