@hyperframes/studio 0.8.10 → 0.8.12

package/src/player/components/TimelineGroupRow.tsx

@@ -1,6 +1,3 @@
-import type { TimelineElement } from "../store/playerStore";
-import { usePlayerStore } from "../store/playerStore";
-import { isGroupHalfLitUnderSolo } from "../store/audioSoloSlice";
 import {
   HF_AUDIO_FX_ATTR,
   serializeAudioFxChain,
@@ -11,28 +8,43 @@ import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
 import { TimelineTrackRow } from "./TimelineTrackRow";
 import { TimelineGroupHeader } from "./TimelineGroupHeader";
-import { TimelineGroupBusStrip } from "./TimelineGroupBusStrip";
 import { groupAutomationLanes } from "./automationLaneData";
-import { LABEL_COL_W } from "./timelineLayout";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import { groupAutomationElement } from "./groupAutomationElement";
+import { TimelineAutomationLaneSlot } from "./TimelineAutomationLaneSlot";
+import { TimelineGroupLaneLabels } from "./TimelineGroupLaneLabels";
+import { LABEL_COL_W, TRACK_H } from "./timelineLayout";
+import type { UseAutomationLanesResult } from "./useAutomationLanes";
+import { useDomEditSelectionContextOptional } from "../../contexts/DomEditContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
 
+/** Accent rail on a group-owned lane — the same green the member rail uses, so
+ *  "this belongs to the group" reads the same in both places (groups doc §5). */
+const GROUP_LANE_ACCENT = "#3CE6AC";
+
 interface TimelineGroupRowProps {
   index: number;
   rowKey: number;
   group: TimelineTrackGroupInfo;
   logicalRow: TimelineLogicalRow;
-  tracks: readonly (readonly [number, readonly TimelineElement[]])[];
   top: number;
   height: number;
   virtualized: boolean;
   contentOrigin: number;
   theme: TimelineTheme;
   rovingTargetId?: string | null;
-  expandedGroupIds: ReadonlySet<string>;
+  collapsedGroupIds: ReadonlySet<string>;
   expandedLaneOwnerIds: ReadonlySet<string>;
   toggleGroupExpanded: (id: string) => void;
   toggleLaneOwnerExpanded: (id: string) => void;
+  lanes: UseAutomationLanesResult;
+  pps: number;
+  currentTime: number;
+  /** A group's lanes are in composition time (§1.3), so this is their span. */
+  compositionDuration: number;
+  beatTimes?: readonly number[];
+  contentGutter: number;
+  trackContentWidth: number;
 }
 
 /** A group's own row: the accessible shell (shared with track rows) plus the group header. */
@@ -41,31 +53,45 @@ export function TimelineGroupRow({
   rowKey,
   group,
   logicalRow,
-  tracks,
   top,
   height,
   virtualized,
   contentOrigin,
   theme,
   rovingTargetId = null,
-  expandedGroupIds,
+  collapsedGroupIds,
   expandedLaneOwnerIds,
   toggleGroupExpanded,
   toggleLaneOwnerExpanded,
+  lanes,
+  pps,
+  currentTime,
+  compositionDuration,
+  beatTimes,
+  contentGutter,
+  trackContentWidth,
 }: TimelineGroupRowProps) {
-  const memberElements = group.memberTracks.flatMap(
-    (track) => tracks.find(([t]) => t === track)?.[1] ?? [],
-  );
-  const memberLabels = group.memberTracks.map((track, i) => {
-    const owner = tracks.find(([t]) => t === track)?.[1]?.find((el) => el.audioGroup);
-    return owner?.label ?? owner?.id ?? `track ${i + 1}`;
-  });
+  // From the group, NOT from `tracks`: a collapsed group emits no member rows
+  // into the display list, and every one of these reads silently degraded to
+  // empty in that (default) state — the lane count
+  // read 0, and the bus strip fell back to "track 1", "track 2".
+  const memberElements = group.memberElements;
+  // The group wearing a clip's shape so the lane machinery can render it — see
+  // `groupAutomationElement` for why that beats a second, parallel lane path.
+  const groupElement = groupAutomationElement(group, compositionDuration);
+  // The binder writes through the dom-edit selection, so a group lane is
+  // editable exactly when the group is the selected element — which clicking
+  // its name in the header does.
+  const domSelection = useDomEditSelectionContextOptional()?.domEditSelection ?? null;
+  const isGroupSelected = domSelection?.id === group.id;
   const isLaneOpen = expandedLaneOwnerIds.has(group.id);
-  const { onSetAudioGroupAttributeLive, onSetAudioGroupAttributeQuiet } = useTimelineEditContext();
+  // Optional, like every sibling row: Timeline renders outside the edit
+  // provider in read-only hosts (Timeline.test.ts asserts it), and the throwing
+  // hook took the whole timeline down with it the moment a group existed —
+  // not just this row.
+  const { onSetAudioGroupAttributeLive, onSetAudioGroupAttributeQuiet } =
+    useTimelineEditContextOptional();
   const domEditActions = useDomEditActionsContextOptional();
-  const soloed = usePlayerStore((s) => s.soloed);
-  const toggleSolo = usePlayerStore((s) => s.toggleSolo);
-  const memberIds = memberElements.map((el) => el.key ?? el.id);
   const writeGroupFxChain = (next: HfAudioFxChain, live: boolean) => {
     const value = next.nodes.length ? serializeAudioFxChain(next) : null;
     if (live) onSetAudioGroupAttributeLive?.(group.id, HF_AUDIO_FX_ATTR, value);
@@ -95,51 +121,84 @@ export function TimelineGroupRow({
       borderColor={theme.rowBorder}
       rovingTargetId={rovingTargetId}
     >
-      <TimelineGroupHeader
-        label={group.label}
-        memberCount={group.memberTracks.length}
-        isExpanded={expandedGroupIds.has(group.id)}
-        onToggleExpanded={() => toggleGroupExpanded(group.id)}
-        laneCount={groupAutomationLanes(memberElements).length}
-        isLaneOpen={isLaneOpen}
-        onToggleLanes={() => toggleLaneOwnerExpanded(group.id)}
-        hidden={group.hidden}
-        onToggleHidden={() =>
-          onSetAudioGroupAttributeQuiet?.(
-            group.id,
-            "data-hidden",
-            group.hidden ? null : "",
-            group.hidden ? "Unmute group" : `Mute group ${group.label}`,
-          )
-        }
-        isSoloed={soloed.has(group.id)}
-        isHalfLitSolo={isGroupHalfLitUnderSolo(soloed, group.id, memberIds)}
-        onToggleSolo={(options) => toggleSolo(group.id, options)}
-        fxChain={group.fxChain}
-        onFxChainChange={(next) => writeGroupFxChain(next, false)}
-        onFxChainPreview={(next) => writeGroupFxChain(next, true)}
-        onOpenFxRack={openGroupFxRack}
-        columnWidth={contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin}
-        theme={theme}
-      />
-      {isLaneOpen && (
-        <TimelineGroupBusStrip
-          groupId={group.id}
-          volume={group.volume}
-          memberLabels={memberLabels}
-          onVolumeChange={(value) =>
-            onSetAudioGroupAttributeLive?.(group.id, "data-volume", String(value))
-          }
-          onVolumeCommit={(value) =>
-            onSetAudioGroupAttributeQuiet?.(
-              group.id,
-              "data-volume",
-              String(value),
-              "Set group volume",
-            )
-          }
+      {/* Header and its lane labels in ONE sticky column — the shape
+          `TimelineTrackHeader` already uses: a fixed TRACK_H line box with the
+          lane rows absolutely positioned beneath it, the whole thing pinned.
+          The labels used to be SIBLINGS of the header, so `absolute left-0`
+          resolved against the ROW, and the row is what scrolls horizontally —
+          they slid away with the canvas. Sticky lives here rather than on the
+          header, which keeps its own box inside; a zero-width sticky wrapper
+          around the labels alone does not work either, because as a flex item
+          after the header it starts at x = columnWidth, i.e. inside the lanes. */}
+      <div
+        className="sticky left-0 z-[12] shrink-0"
+        style={{ width: contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin }}
+      >
+        <TimelineGroupHeader
+          label={group.label}
+          memberCount={group.memberTracks.length}
+          isExpanded={!collapsedGroupIds.has(group.id)}
+          onToggleExpanded={() => toggleGroupExpanded(group.id)}
+          // The GROUP's own lanes, not its members'. `∿` is per-row (groups doc
+          // §5: "∿ is lit on vo-1 but not vo-2, the same control per row"), and
+          // counting the members' here made the group advertise curves it does
+          // not own and cannot show.
+          laneCount={groupAutomationLanes([groupElement]).length}
+          isLaneOpen={isLaneOpen}
+          onToggleLanes={() => toggleLaneOwnerExpanded(group.id)}
+          fxChain={group.fxChain}
+          onFxChainChange={(next) => writeGroupFxChain(next, false)}
+          onFxChainPreview={(next) => writeGroupFxChain(next, true)}
+          auditionSpans={memberElements}
+          onOpenFxRack={openGroupFxRack}
+          // Same width as every other row's header. The group row needs a real
+          // label column, but it gets one by turning `labelMode` on for the whole
+          // timeline (see Timeline.tsx) rather than by overhanging alone — an
+          // overhanging header paints opaquely across the rest of its row and
+          // stays pinned there through horizontal scroll.
+          columnWidth={contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin}
           theme={theme}
         />
+        {/* The group's OWN curves, under the strip. Selected-gated exactly like a
+          clip's: the binder writes through the dom-edit selection, so a lane is
+          editable once the group is selected — which clicking its name does. */}
+        {/* The label column for those lanes, on the accent rail — inside the
+            sticky column above, so they pin with the header. */}
+        {isLaneOpen && (
+          <TimelineGroupLaneLabels
+            groupElement={groupElement}
+            groupLabel={group.label}
+            top={TRACK_H}
+            columnWidth={contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin}
+            gutterBackground={theme.gutterBackground}
+            accentColor={GROUP_LANE_ACCENT}
+          />
+        )}
+      </div>
+      {isLaneOpen && (
+        // The same offset content cell a track row wraps its lanes in — the
+        // slot positions absolutely, so mounted straight on the row it resolved
+        // against the row instead and drew the envelope across the label gutter
+        // from x=0.
+        <div
+          role="gridcell"
+          aria-colindex={2}
+          style={{ width: trackContentWidth, marginLeft: contentGutter }}
+          className="relative"
+        >
+          <TimelineAutomationLaneSlot
+            elements={[groupElement]}
+            isSelected={() => isGroupSelected}
+            lanes={lanes}
+            pps={pps}
+            // Below the strip, which sits directly under the header row.
+            laneCount={0}
+            topOffset={TRACK_H}
+            accentColor={GROUP_LANE_ACCENT}
+            currentTime={currentTime}
+            beatTimes={beatTimes}
+          />
+        </div>
       )}
     </TimelineTrackRow>
   );

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

@@ -118,7 +118,7 @@ function renderLanes(options: RenderLanesOptions = {}): {
             selectedElementId: null,
             selectedElementIds: next.selectedElementIds ?? new Set(),
             expandedClipIds: new Set(next.expandedClipIds ?? []),
-            expandedGroupIds: new Set(),
+            collapsedGroupIds: new Set(),
             expandedLaneOwnerIds: new Set(),
             groups: [],
             trackGroupOf: new Map(),
@@ -203,8 +203,8 @@ describe("TimelineLanes track numbering", () => {
     const second = view.host.querySelector<HTMLButtonElement>('button[aria-label="Hide track 2"]');
     act(() => second?.click());
 
-    // Third argument is the display row the button announced, so the undo entry
-    // records the same row the user just read off it.
+    // Both, and they are different numbers: the real key acts, the display row
+    // is what the undo-history label must announce (see `onToggleTrackHidden`).
     expect(onToggleTrackHidden).toHaveBeenCalledWith(TRACK_B, true, 2);
     act(() => view.root.unmount());
   });

package/src/player/components/TimelineLanes.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useId } from "react";
+import { Fragment, useId, useMemo } from "react";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineCompactDiamonds } from "./TimelineCompactDiamonds";
@@ -9,6 +9,7 @@ import { useAutomationSelectionKeyboard } from "../../hooks/useAutomationSelecti
 import { TimelineTrackHeader } from "./TimelineTrackHeader";
 import { TimelineGroupRow } from "./TimelineGroupRow";
 import { useTimelineLaneRowIndexes, useTimelineGroupDisclosure } from "./useTimelineLaneRowIndexes";
+import { useTimelineClipDisclosure } from "./useTimelineClipDisclosure";
 import {
   isTrackRowExpanded,
   resolveTrackKeyframeClip,
@@ -22,7 +23,6 @@ import { usePlayerStore } from "../store/playerStore";
 import { isMultiDragPassenger, multiDragPassengerOffsetPx } from "./timelineMultiDragPreview";
 import { useTimelineMultiDragActorWindows } from "./useTimelineMultiDragActorWindows";
 import type { TimelineLanesProps } from "./timelineLaneProps";
-import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
 import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
 import { createClipGestureHandlers } from "./timelineClipGestureHandlers";
 import { renderClipChildren, resolveClipRenderContext } from "./timelineClipChildren";
@@ -100,29 +100,24 @@ export function TimelineLanes({
   // from resolving into a second timeline that renders the same logical rows.
   const lanesIdPrefix = `timeline-lanes${useId().replaceAll(":", "")}`;
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
-  const { expandedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } =
+  const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } =
     useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
+  // A group's automation clock is COMPOSITION time (groups doc §1.3), so its
+  // synthetic lane element spans the whole composition rather than a clip.
+  const compositionDuration = usePlayerStore((s) => s.duration);
   useAutomationSelectionKeyboard({ lanes: automationLanes });
-  const expandClips = usePlayerStore((s) => s.expandClips);
-  const setClipExpanded = usePlayerStore((s) => s.setClipExpanded);
-  const toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
   const { logicalRowsByTrack, groupByAnchor } = useTimelineLaneRowIndexes(logicalRows, groups);
-  // The caret belongs to the ROW, so it opens and closes every clip on it at
-  // once. Toggling only the active clip left the row's state depending on which
-  // sibling happened to be selected: expand one, click another, and the row
-  // collapsed under a caret that still pointed down.
-  const toggleRowExpandedTracked = (keys: readonly string[]) => {
-    const willExpand = !keys.some((key) => expandedClipIds.has(key));
-    trackStudioKeyframeLaneExpand({ expanded: willExpand });
-    if (willExpand) expandClips(keys);
-    else for (const key of keys) setClipExpanded(key, false);
-  };
-  const toggleClipExpandedTracked = (key: string) => {
-    const willExpand = !expandedClipIds.has(key);
-    trackStudioKeyframeLaneExpand({ expanded: willExpand });
-    toggleClipExpanded(key);
-  };
+  // Which tracks are group MEMBERS, so their headers can render the level-2
+  // nesting their `aria-level` already reports.
+  const groupMemberTracks = useMemo(
+    () => new Set(groups.flatMap((group) => group.memberTracks)),
+    [groups],
+  );
+  const {
+    toggleRowExpanded: toggleRowExpandedTracked,
+    toggleClipExpanded: toggleClipExpandedTracked,
+  } = useTimelineClipDisclosure();
   const actorWindows = useTimelineMultiDragActorWindows(
     multiDragPreview,
     rowsVirtualized,
@@ -163,17 +158,23 @@ export function TimelineLanes({
                 rowKey={rowKey}
                 group={group}
                 logicalRow={groupLogicalRow}
-                tracks={tracks}
                 top={rowGeometry.getRowTop(row)}
                 height={rowGeometry.getRowHeight(row)}
                 virtualized={rowsVirtualized}
                 contentOrigin={contentOrigin}
                 theme={theme}
                 rovingTargetId={keyboard.rovingTargetId}
-                expandedGroupIds={expandedGroupIds}
+                collapsedGroupIds={collapsedGroupIds}
                 expandedLaneOwnerIds={expandedLaneOwnerIds}
                 toggleGroupExpanded={toggleGroupExpanded}
                 toggleLaneOwnerExpanded={toggleLaneOwnerExpanded}
+                lanes={automationLanes}
+                pps={pps}
+                currentTime={currentTime}
+                compositionDuration={compositionDuration}
+                beatTimes={beatAnalysis?.beatTimes}
+                contentGutter={contentGutter}
+                trackContentWidth={trackContentWidth}
               />
             );
           }
@@ -290,6 +291,7 @@ export function TimelineLanes({
                 currentTime={currentTime}
                 isTrackHidden={isTrackHidden}
                 isAudioTrack={isAudioTrack}
+                isGroupMember={groupMemberTracks.has(trackNum)}
                 theme={theme}
                 onToggleClipExpanded={() => {
                   const keys = els.map(getTimelineElementIdentity);