feat(studio): group rows in the timeline, and a split disclosure

A group renders as its own row with member rows beneath it, and disclosure
splits into two independent controls: caret shows/hides a group's member
rows (structural), `∿` shows/hides any row's automation-lane rows. Plain
tracks lose their caret (nothing to disclose structurally) and keep only
`∿`. `expandedClipIds` keeps its existing keyframe-lane-state job;
`expandedGroupIds`/`expandedLaneOwnerIds` are new, independent sets.

Groups get a real position in the row/geometry pipeline rather than a
visual-only overlay: `useTimelineTrackDerivations` re-emits a group's member
tracks contiguously under a synthetic fractional anchor key
(firstMember - 0.5, the same fractional-key convention sub-composition
expansion already uses), so `rowGeometry`/keyboard-nav/virtualization treat
a group row as a first-class row without widening their key type away from
number. `TimelineLogicalRow.level` widens `1 | 2` to `1 | 2 | 3` (group /
member-under-group / lane), lanes always `owner.level + 1`.

All of it — grouped row emission, the header, the new expansion state — is
gated behind `isCanaryEnabled("audio-groups")`; disabled, `groups` resolves
empty and every new code path no-ops. `TimelineElement.audioGroup` (+
`audioGroupLabel`, resolved once per document via `resolveAudioGroups` from
B1) is parsed unconditionally, mirroring how `hidden`/`fxChain` already
flow DOM → manifest → TimelineElement — inert without the canary.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -1,9 +1,11 @@
-import { CaretRight } from "@phosphor-icons/react";
 import { TRACK_H } from "./timelineLayout";
 import { TrackClipCount } from "./TrackClipCount";
 
-// Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives
-// here, not on the clip bar, and re-expands a collapsed layer.
+// Layer row (Figma order: disclosure ∿, diamond, name) — the disclosure lives
+// here, not on the clip bar, and re-expands a collapsed layer. `∿` (not a
+// caret) because a group's own row keeps the caret for its structural
+// disclosure (member rows) — this button only ever means "show this row's
+// lanes", so it needs its own distinct glyph.
 export function LayerDisclosureRow({
   name,
   clipCount,
@@ -49,23 +51,20 @@ export function LayerDisclosureRow({
         tabIndex={-1}
         aria-expanded={isExpanded}
         aria-controls={lanesId}
-        aria-label={`${isExpanded ? "Collapse" : "Expand"} ${name} keyframes`}
-        title={`${isExpanded ? "Collapse" : "Expand"} keyframe lanes`}
-        // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The caret glyph stays 11px;
+        aria-label={`${isExpanded ? "Hide" : "Show"} ${name} lanes`}
+        title={`${isExpanded ? "Hide" : "Show"} lanes`}
+        // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The glyph stays 11px;
         // only the hit box grows.
-        className="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-white/55 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+          isExpanded ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+        }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
           event.stopPropagation();
           onToggleClipExpanded();
         }}
       >
-        <CaretRight
-          size={11}
-          weight="bold"
-          aria-hidden="true"
-          style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}
-        />
+        <span aria-hidden="true">∿</span>
       </button>
       {/* Decorative: the disclosure button above already names the row's keyframe
           state, and aria-label on a plain span is not exposed reliably anyway. */}