@hyperframes/studio 0.8.11 → 0.8.12

package/src/player/components/useTimelineTrackDerivations.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { getTrackStyle, type TrackVisualStyle } from "./timelineIcons";
 
 /** One resolved audio group, positioned in the row order. */
@@ -15,12 +15,26 @@ export interface TimelineTrackGroupInfo {
   anchorKey: number;
   /** Member track numbers, ascending. */
   memberTracks: number[];
+  /**
+   * Every clip under this group, in member-track order — INDEPENDENT of whether
+   * the group is expanded.
+   *
+   * Collapsing a group stops emitting its member rows into `tracks`, so anything
+   * that recovered member elements by looking them up there got an empty list in
+   * the default (collapsed) state — silently disabling the
+   * automation-lane count, and the bus strip's member labels. Membership is not
+   * a display concern, so it does not travel through the display list.
+   */
+  memberElements: TimelineElement[];
   /** The group element's `data-volume`, mirrored from a member's parse (B7's slider). */
   volume: number;
   /** The group element's `data-hidden`, mirrored from a member's parse (B5's group mute). */
   hidden: boolean;
   /** The group element's serialized `data-fx-chain`, mirrored from a member's parse (C1's FX entry). */
   fxChain?: string;
+  /** The group element's serialized `data-automation` — the group's OWN lanes,
+   *  which are what its `∿` discloses (groups doc §5). */
+  automation?: string;
 }
 
 interface GroupMembership {
@@ -30,6 +44,7 @@ interface GroupMembership {
   volumeByGroup: Map<string, number>;
   hiddenByGroup: Map<string, boolean>;
   fxChainByGroup: Map<string, string | undefined>;
+  automationByGroup: Map<string, string | undefined>;
 }
 
 /** Which track belongs to which group, and each group's label/volume/hidden/fxChain — one pass over raw tracks. */
@@ -40,6 +55,7 @@ function resolveGroupMembership(rawTracks: [number, TimelineElement[]][]): Group
   const volumeByGroup = new Map<string, number>();
   const hiddenByGroup = new Map<string, boolean>();
   const fxChainByGroup = new Map<string, string | undefined>();
+  const automationByGroup = new Map<string, string | undefined>();
   for (const [trackNum, elements] of rawTracks) {
     const owner = elements.find((el) => el.audioGroup);
     if (!owner?.audioGroup) continue;
@@ -49,6 +65,7 @@ function resolveGroupMembership(rawTracks: [number, TimelineElement[]][]): Group
       volumeByGroup.set(owner.audioGroup, owner.audioGroupVolume ?? 1);
       hiddenByGroup.set(owner.audioGroup, owner.audioGroupHidden ?? false);
       fxChainByGroup.set(owner.audioGroup, owner.audioGroupFxChain);
+      automationByGroup.set(owner.audioGroup, owner.audioGroupAutomation);
     }
     const members = memberTracksByGroup.get(owner.audioGroup) ?? [];
     members.push(trackNum);
@@ -61,6 +78,7 @@ function resolveGroupMembership(rawTracks: [number, TimelineElement[]][]): Group
     volumeByGroup,
     hiddenByGroup,
     fxChainByGroup,
+    automationByGroup,
   };
 }
 
@@ -69,33 +87,50 @@ function buildGroupInfo(
   groupId: string,
   fallbackTrackNum: number,
   membership: GroupMembership,
+  rawByTrack: ReadonlyMap<number, TimelineElement[]>,
 ): TimelineTrackGroupInfo {
   const memberTracks = [...(membership.memberTracksByGroup.get(groupId) ?? [])].sort(
     (a, b) => a - b,
   );
   const fxChain = membership.fxChainByGroup.get(groupId);
+  const automation = membership.automationByGroup.get(groupId);
   return {
     id: groupId,
     label: membership.labelByGroup.get(groupId) ?? groupId,
+    // Exactly x.5, which sub-composition child rows are now kept strictly below
+    // (`useExpandedTimelineElements`) — they used to be able to land here and
+    // collide, duplicating the group header.
     anchorKey: (memberTracks[0] ?? fallbackTrackNum) - 0.5,
     memberTracks,
+    memberElements: memberTracks.flatMap((track) => rawByTrack.get(track) ?? []),
     volume: membership.volumeByGroup.get(groupId) ?? 1,
     hidden: membership.hiddenByGroup.get(groupId) ?? false,
     ...(fxChain ? { fxChain } : {}),
+    ...(automation ? { automation } : {}),
   };
 }
 
-/** Push a group's synthetic anchor row plus its members' rows, contiguously. */
+/**
+ * Push a group's synthetic anchor row plus its members' rows, contiguously.
+ *
+ * A collapsed group emits its anchor and nothing else. `buildTimelineLogicalRows`
+ * already stops at the anchor when collapsed, so leaving the member rows in
+ * `tracks` left row geometry reserving a full row each for rows that then
+ * rendered as `null` — a header trailed by its members' worth of blank,
+ * unreachable dead space. Membership still lands in `trackGroupOf`: a collapsed
+ * member is hidden, not ungrouped.
+ */
 function emitGroupRows(
   info: TimelineTrackGroupInfo,
   rawByTrack: ReadonlyMap<number, TimelineElement[]>,
   trackGroupOf: Map<number, TimelineTrackGroupInfo>,
   tracks: [number, TimelineElement[]][],
+  expanded: boolean,
 ): void {
   tracks.push([info.anchorKey, []]);
   for (const member of info.memberTracks) {
     trackGroupOf.set(member, info);
-    tracks.push([member, rawByTrack.get(member) ?? []]);
+    if (expanded) tracks.push([member, rawByTrack.get(member) ?? []]);
   }
 }
 
@@ -105,7 +140,10 @@ function emitGroupRows(
  * their position; a group's members move up to sit under its anchor even when
  * other (ungrouped) tracks were interleaved between them.
  */
-function groupTimelineTracks(rawTracks: [number, TimelineElement[]][]): {
+function groupTimelineTracks(
+  rawTracks: [number, TimelineElement[]][],
+  collapsedGroupIds: ReadonlySet<string>,
+): {
   tracks: [number, TimelineElement[]][];
   groups: TimelineTrackGroupInfo[];
   trackGroupOf: Map<number, TimelineTrackGroupInfo>;
@@ -125,9 +163,9 @@ function groupTimelineTracks(rawTracks: [number, TimelineElement[]][]): {
     }
     if (emitted.has(groupId)) continue;
     emitted.add(groupId);
-    const info = buildGroupInfo(groupId, trackNum, membership);
+    const info = buildGroupInfo(groupId, trackNum, membership, rawByTrack);
     groups.push(info);
-    emitGroupRows(info, rawByTrack, trackGroupOf, tracks);
+    emitGroupRows(info, rawByTrack, trackGroupOf, tracks, !collapsedGroupIds.has(groupId));
   }
   return { tracks, groups, trackGroupOf };
 }
@@ -156,9 +194,10 @@ export function useTimelineTrackDerivations(expandedElements: TimelineElement[])
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
   }, [expandedElements]);
 
+  const collapsedGroupIds = usePlayerStore((s) => s.collapsedGroupIds);
   const { tracks, groups, trackGroupOf } = useMemo(
-    () => groupTimelineTracks(rawTracks),
-    [rawTracks],
+    () => groupTimelineTracks(rawTracks, collapsedGroupIds),
+    [rawTracks, collapsedGroupIds],
   );
 
   const trackStyles = useMemo(() => {

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

@@ -38,6 +38,125 @@ function renderTrackLayout(
   return { layout, unmount: () => act(() => root.unmount()) };
 }
 
+describe("collapsed audio groups", () => {
+  const member = (id: string, track: number): TimelineElement => ({
+    id,
+    domId: id,
+    tag: "audio",
+    start: 0,
+    duration: 5,
+    track,
+    audioGroup: "voiceover",
+  });
+
+  /** `collapsed` seeds the collapsed set — expanded is the default state. */
+  function renderGrouped(collapsed = false): {
+    layout: ReturnType<typeof useTimelineTrackLayout>;
+    unmount: () => void;
+  } {
+    if (collapsed) usePlayerStore.setState({ collapsedGroupIds: new Set(["voiceover"]) });
+    const elements = [member("voice-1", 0), member("voice-2", 1)];
+    let layout: ReturnType<typeof useTimelineTrackLayout> | undefined;
+    function Probe() {
+      layout = useTimelineTrackLayout(elements, new Map(), null, new Set());
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe)));
+    if (!layout) throw new Error("Timeline track layout did not render");
+    return { layout, unmount: () => act(() => root.unmount()) };
+  }
+
+  // The `∿` area holds the group's own automation rows. Sized without them,
+  // every lane the count had just promised was clipped out of the row — which
+  // is what "expanding automation on a group doesn't show the automation"
+  // looked like from outside.
+  it("reserves room for the group's own automation rows, not just the strip", () => {
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [
+        {
+          target: "volume",
+          points: [
+            { t: 0, v: 1 },
+            { t: 5, v: 0.4 },
+          ],
+        },
+      ],
+    });
+    const elements = [
+      { ...member("voice-1", 0), audioGroupAutomation: automation },
+      { ...member("voice-2", 1), audioGroupAutomation: automation },
+    ];
+    let layout: ReturnType<typeof useTimelineTrackLayout> | undefined;
+    function Probe() {
+      layout = useTimelineTrackLayout(elements, new Map(), null, new Set());
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => {
+      usePlayerStore.setState({ expandedLaneOwnerIds: new Set(["voiceover"]) });
+      root.render(React.createElement(Probe));
+    });
+    // The group's anchor row: the first member track minus 0.5.
+    const anchorIndex = layout!.tracks.findIndex(([track]) => track === -0.5);
+    expect(anchorIndex).toBeGreaterThanOrEqual(0);
+    const openHeight = layout!.rowHeights[anchorIndex];
+    // One lane of headroom beyond the header row itself.
+    expect(openHeight).toBe(TRACK_H + AUTOMATION_LANE_H);
+    act(() => root.unmount());
+  });
+
+  // buildTimelineLogicalRows stops emitting member rows once a group is
+  // collapsed, so TimelineLanes renders null for them. Rows left in `tracks`
+  // still reserve height, turning that null into visible dead space — the row
+  // list and the logical rows have to agree.
+  it("emits only the anchor row while the group is collapsed", () => {
+    const { layout, unmount } = renderGrouped(true);
+    expect(layout.groups).toHaveLength(1);
+    expect(layout.groups[0]!.memberTracks).toEqual([0, 1]);
+    // The anchor (0 - 0.5) and nothing else.
+    expect(layout.trackOrder).toEqual([-0.5]);
+    expect(layout.rowGeometry.rowHeights).toHaveLength(1);
+    // Membership still resolves — collapsed is hidden, not ungrouped.
+    expect(layout.trackGroupOf.get(0)?.id).toBe("voiceover");
+    unmount();
+  });
+
+  // Membership is not a display concern. Half-lit solo, the automation-lane
+  // count and the bus strip's member labels all read the group's members, and
+  // all three silently degraded to empty when those were recovered from the
+  // display list — which a collapsed group does not appear in. Collapsed is the
+  // default, so that was every group until someone opened it.
+  it("carries its member elements even while collapsed", () => {
+    const { layout, unmount } = renderGrouped(true);
+    expect(layout.trackOrder).toEqual([-0.5]); // collapsed: no member rows
+    expect(layout.groups[0]!.memberElements.map((el) => el.id)).toEqual(["voice-1", "voice-2"]);
+    unmount();
+  });
+
+  // The reason the set is stored inverted. As an expanded-set, "absent" could
+  // not tell never-touched from deliberately-collapsed, so a freshly created
+  // group started collapsed — grouping three tracks made all three vanish
+  // behind a header the user had not yet learned to open.
+  it("is expanded by default, with nothing seeded", () => {
+    const { layout, unmount } = renderGrouped();
+    expect(usePlayerStore.getState().collapsedGroupIds.size).toBe(0);
+    expect(layout.trackOrder).toEqual([-0.5, 0, 1]);
+    unmount();
+  });
+
+  it("emits the member rows once the group is expanded", () => {
+    // Expanded is the default now — nothing to seed.
+    const { layout, unmount } = renderGrouped();
+    expect(layout.trackOrder).toEqual([-0.5, 0, 1]);
+    for (const track of layout.groups[0]!.memberTracks) {
+      expect(layout.rowGeometry.getRowHeight(layout.rowGeometry.getRowIndex(track))).toBe(TRACK_H);
+    }
+    unmount();
+  });
+});
+
 describe("useTimelineTrackLayout", () => {
   it("counts a flat tween lane and reserves its expanded row height", () => {
     const elements: TimelineElement[] = [

package/src/player/components/useTimelineTrackLayout.ts

@@ -7,7 +7,6 @@ import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
 import {
-  STRIP_H,
   TRACK_H,
   createTimelineRowGeometry,
   type TimelineRowGeometry,
@@ -15,6 +14,13 @@ import {
   type TimelineTrackHeightClip,
 } from "./timelineLayout";
 import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
+import { groupAutomationElement } from "./groupAutomationElement";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+
+/** Automation rows the GROUP itself owns — its `data-automation`, not its members'. */
+function groupOwnLaneCount(group: TimelineTrackGroupInfo): number {
+  return groupAutomationLanes([groupAutomationElement(group, 0)]).length;
+}
 
 export { getTrackStyle } from "./timelineIcons";
 
@@ -132,8 +138,8 @@ function computeLaneCounts(
 /** Group anchor rows have no elements of their own (`groupTimelineTracks`
  *  pushes them as `[anchorKey, []]`), so `trackHeights` — which only ever
  *  looks at a row's clips — always gives them TRACK_H. Override those
- *  specific rows post-hoc: TRACK_H while collapsed, +STRIP_H once the
- *  group's own `∿` (bus strip) is open. */
+ *  specific rows post-hoc: TRACK_H while collapsed, plus the group's own
+ *  automation rows once its `∿` is open. */
 function applyGroupStripHeights(
   tracks: readonly (readonly [number, readonly TimelineElement[]])[],
   rowHeights: number[],
@@ -145,7 +151,9 @@ function applyGroupStripHeights(
   return tracks.map(([track], index) => {
     const group = groupByAnchor.get(track);
     if (!group || !expandedLaneOwnerIds.has(group.id)) return rowHeights[index] ?? TRACK_H;
-    return TRACK_H + STRIP_H;
+    // The group's own automation rows, which its `∿` discloses. A row sized
+    // without them clipped every lane it had just promised in the count.
+    return TRACK_H + groupOwnLaneCount(group) * AUTOMATION_LANE_H;
   });
 }
 

package/src/player/hooks/previewMessageRouter.ts

@@ -3,16 +3,16 @@
  *
  * Extracted from `useTimelinePlayer`, which had grown past the studio's 600-line
  * file cap and carried a `fallow-ignore-next-line complexity` on this function
- * admitting the same thing. Nothing here is new logic — it is the same four
- * branches (accept-gate, group levels, state, timeline) against the same refs,
- * with the suppression retired rather than moved.
+ * admitting the same thing. Nothing here is new logic — it is the same three
+ * branches (accept-gate, state, timeline) against the same refs, with the
+ * suppression retired rather than moved. The group-levels branch went with the
+ * level meter it fed (see the group volume/meter removal).
  */
 
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { ClipManifestClip, IframeWindow, PlaybackAdapter } from "../lib/playbackTypes";
 import { hasTimelinePerformanceFixtureLease } from "../lib/timelinePerformanceFixture";
 import { acceptStudioRuntimeMessage } from "../lib/runtimeProtocol";
-import { groupLevels, parseGroupLevelsMessage } from "../store/groupLevels";
 import { parseTimelineFromDOM } from "../lib/timelineDOM";
 
 /** What `processTimelineMessage` accepts — the clip-manifest postMessage. */
@@ -60,12 +60,6 @@ function acceptedPreviewMessage(
   return acceptStudioRuntimeMessage(data) ? data : null;
 }
 
-/** One meter reading per group with an active member. */
-function handleGroupLevelsMessage(data: PreviewMessage): void {
-  const levels = parseGroupLevelsMessage(data);
-  if (levels) groupLevels.notify(levels);
-}
-
 /**
  * A `state` tick doubles as a recovery hook: if the store still has no
  * elements, read the manifest straight off the iframe, and if no `timeline`
@@ -118,7 +112,6 @@ export function createPreviewMessageHandler(
     const iframe = deps.iframeRef.current;
     const data = acceptedPreviewMessage(e, iframe);
     if (!data) return;
-    if (data.type === "group-levels") return handleGroupLevelsMessage(data);
     if (data.type === "state") return handleStateMessage(deps, iframe);
     if (data.type === "timeline" && Array.isArray(data.clips)) {
       handleTimelineMessage(deps, iframe, data as unknown as ClipManifestMessage);