@hyperframes/studio 0.8.6 → 0.8.8

package/src/player/components/timelineLaneProps.ts

@@ -13,6 +13,7 @@ import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
 import type { TimelineClipRenderContext } from "./TimelineTypes";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 
 /**
  * Props shared by the scroll container ({@link import("./TimelineCanvas")}) and
@@ -99,6 +100,8 @@ export interface TimelineLaneBaseProps {
    */
   onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
   beatAnalysis?: MusicBeatAnalysis | null;
+  /** Resolved audio groups, positioned in row order — see useTimelineTrackDerivations. */
+  groups: readonly TimelineTrackGroupInfo[];
 }
 
 /**

package/src/player/components/timelineLayout.ts

@@ -7,10 +7,10 @@ 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;
-
 export interface TimelineBeatEntry {
   readonly index: number;
   readonly time: number;

package/src/player/components/timelineNavigationIdentity.ts

@@ -13,6 +13,10 @@ export function timelineTrackRowId(track: number): string {
   return stableId("track", track);
 }
 
+export function timelineGroupRowId(groupId: string): string {
+  return stableId("group", groupId);
+}
+
 export function timelinePropertyRowId(elementId: string, group: PropertyGroupName): string {
   return stableId("property", elementId, group);
 }

package/src/player/components/useTimelineLaneRowIndexes.ts

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
+
+/** The four pieces of group-disclosure state a group row's header reads and writes. */
+export function useTimelineGroupDisclosure() {
+  return {
+    expandedGroupIds: usePlayerStore((s) => s.expandedGroupIds),
+    expandedLaneOwnerIds: usePlayerStore((s) => s.expandedLaneOwnerIds),
+    toggleGroupExpanded: usePlayerStore((s) => s.toggleGroupExpanded),
+    toggleLaneOwnerExpanded: usePlayerStore((s) => s.toggleLaneOwnerExpanded),
+  };
+}
+
+/** Two lookups TimelineLanes needs once per render: a row's logical rows by
+ *  physical key, and which physical key is a group's own anchor row. */
+export function useTimelineLaneRowIndexes(
+  logicalRows: readonly TimelineLogicalRow[],
+  groups: readonly TimelineTrackGroupInfo[],
+) {
+  const logicalRowsByTrack = useMemo(() => {
+    const byTrack = new Map<number, TimelineLogicalRow[]>();
+    for (const logicalRow of logicalRows) {
+      const trackRows = byTrack.get(logicalRow.physicalTrackKey) ?? [];
+      trackRows.push(logicalRow);
+      byTrack.set(logicalRow.physicalTrackKey, trackRows);
+    }
+    return byTrack;
+  }, [logicalRows]);
+
+  const groupByAnchor = useMemo(
+    () => new Map(groups.map((group) => [group.anchorKey, group])),
+    [groups],
+  );
+
+  return { logicalRowsByTrack, groupByAnchor };
+}

package/src/player/components/useTimelineLogicalFocus.ts

@@ -3,6 +3,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineRowGeometry } from "./timelineLayout";
 import type { TimelineScrollViewportSnapshot } from "./useTimelineScrollViewport";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 import { useTimelineFocusCoordinator } from "./useTimelineFocusCoordinator";
 import { usePlayerStore } from "../store/playerStore";
 import { useTimelineLogicalRows } from "./useTimelineLogicalRows";
@@ -15,6 +16,8 @@ interface TimelineLogicalFocusInput {
   laneCounts: ReadonlyMap<string, number>;
   selectedElementId: string | null;
   selectedElementIds: ReadonlySet<string>;
+  groups: readonly TimelineTrackGroupInfo[];
+  trackGroupOf: ReadonlyMap<number, TimelineTrackGroupInfo>;
   gsapAnimations: ReadonlyMap<string, readonly GsapAnimation[]>;
   elements: readonly TimelineElement[];
   pixelsPerSecond: number;
@@ -32,6 +35,8 @@ interface TimelineLogicalFocusInput {
 
 export function useTimelineLogicalFocus(input: TimelineLogicalFocusInput) {
   const expandedClipIds = usePlayerStore((state) => state.expandedClipIds);
+  const expandedGroupIds = usePlayerStore((state) => state.expandedGroupIds);
+  const expandedLaneOwnerIds = usePlayerStore((state) => state.expandedLaneOwnerIds);
   const projectId = usePlayerStore((state) => state.timelineProjectId);
   const logicalRows = useTimelineLogicalRows({
     tracks: input.tracks,
@@ -40,6 +45,10 @@ export function useTimelineLogicalFocus(input: TimelineLogicalFocusInput) {
     selectedElementId: input.selectedElementId,
     selectedElementIds: input.selectedElementIds,
     expandedClipIds,
+    expandedGroupIds,
+    expandedLaneOwnerIds,
+    groups: input.groups,
+    trackGroupOf: input.trackGroupOf,
     gsapAnimations: input.gsapAnimations,
   });
   const focus = useTimelineFocusCoordinator({

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

@@ -22,6 +22,10 @@ const displayTrackOrder = tracks.map(([track]) => track);
 const laneCounts = new Map<string, number>();
 const selectedElementIds = new Set<string>();
 const expandedClipIds = new Set<string>();
+const expandedGroupIds = new Set<string>();
+const expandedLaneOwnerIds = new Set<string>();
+const groups: never[] = [];
+const trackGroupOf = new Map();
 const gsapAnimations = new Map();
 
 function Harness({ snapshots }: { snapshots: Array<readonly TimelineLogicalRow[]> }) {
@@ -33,6 +37,10 @@ function Harness({ snapshots }: { snapshots: Array<readonly TimelineLogicalRow[]
     selectedElementId: null,
     selectedElementIds,
     expandedClipIds,
+    expandedGroupIds,
+    expandedLaneOwnerIds,
+    groups,
+    trackGroupOf,
     gsapAnimations,
   });
   snapshots.push(logicalRows);

package/src/player/components/useTimelineLogicalRows.ts

@@ -1,17 +1,10 @@
 import { useMemo } from "react";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import type { TimelineElement } from "../store/playerStore";
-import { buildTimelineLogicalRows } from "./timelineKeyboardNavigation";
+import {
+  buildTimelineLogicalRows,
+  type BuildTimelineLogicalRowsInput,
+} from "./timelineKeyboardNavigation";
 
-interface TimelineLogicalRowsInput {
-  tracks: readonly (readonly [number, readonly TimelineElement[]])[];
-  displayTrackOrder: readonly number[];
-  laneCounts: ReadonlyMap<string, number>;
-  selectedElementId: string | null;
-  selectedElementIds: ReadonlySet<string>;
-  expandedClipIds: ReadonlySet<string>;
-  gsapAnimations: ReadonlyMap<string, readonly GsapAnimation[]>;
-}
+type TimelineLogicalRowsInput = BuildTimelineLogicalRowsInput;
 
 /** Shared by rendering and focus coordination; stable input refs preserve memo identity. */
 export function useTimelineLogicalRows({
@@ -21,6 +14,10 @@ export function useTimelineLogicalRows({
   selectedElementId,
   selectedElementIds,
   expandedClipIds,
+  expandedGroupIds,
+  expandedLaneOwnerIds,
+  groups,
+  trackGroupOf,
   gsapAnimations,
 }: TimelineLogicalRowsInput) {
   return useMemo(
@@ -32,11 +29,19 @@ export function useTimelineLogicalRows({
         selectedElementId,
         selectedElementIds,
         expandedClipIds,
+        expandedGroupIds,
+        expandedLaneOwnerIds,
+        groups,
+        trackGroupOf,
         gsapAnimations,
       }),
     [
       displayTrackOrder,
       expandedClipIds,
+      expandedGroupIds,
+      expandedLaneOwnerIds,
+      groups,
+      trackGroupOf,
       gsapAnimations,
       laneCounts,
       selectedElementId,

package/src/player/components/useTimelineMultiDragActorWindows.ts

@@ -0,0 +1,30 @@
+import { isMultiDragActive, multiDragDeltaSeconds } from "./timelineMultiDragPreview";
+import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
+import type { TimelineTimeRange } from "../lib/timelineClipIndex";
+
+/** The extra render window a live multi-drag needs: its passengers still draw
+ *  at their ORIGIN position, offset by the drag delta, outside the normal
+ *  virtualized range. Empty when nothing is dragging. */
+export function useTimelineMultiDragActorWindows(
+  multiDragPreview: MultiDragPreviewInput | null,
+  rowsVirtualized: boolean,
+  renderTimeRange: TimelineTimeRange,
+) {
+  const multiDragDelta =
+    multiDragPreview && isMultiDragActive(multiDragPreview)
+      ? multiDragDeltaSeconds(multiDragPreview)
+      : 0;
+  const actorWindows =
+    rowsVirtualized && multiDragPreview && multiDragDelta !== 0
+      ? [
+          {
+            range: {
+              start: renderTimeRange.start - multiDragDelta,
+              end: renderTimeRange.end - multiDragDelta,
+            },
+            identities: multiDragPreview.selectedKeys,
+          },
+        ]
+      : [];
+  return actorWindows;
+}

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

@@ -2,19 +2,151 @@ import { useMemo } from "react";
 import type { TimelineElement } from "../store/playerStore";
 import { getTrackStyle, type TrackVisualStyle } from "./timelineIcons";
 
+/** One resolved audio group, positioned in the row order. */
+export interface TimelineTrackGroupInfo {
+  id: string;
+  label: string;
+  /**
+   * Synthetic sort key for the group's own row — the same fractional-key
+   * convention sub-composition expansion already uses (see
+   * timelineTrackDisplay.ts): the first (lowest) member track's number minus
+   * 0.5, so it slots in immediately above that member.
+   */
+  anchorKey: number;
+  /** Member track numbers, ascending. */
+  memberTracks: number[];
+  /** 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;
+}
+
+interface GroupMembership {
+  trackToGroupId: Map<number, string>;
+  memberTracksByGroup: Map<string, number[]>;
+  labelByGroup: Map<string, string>;
+  volumeByGroup: Map<string, number>;
+  hiddenByGroup: Map<string, boolean>;
+  fxChainByGroup: Map<string, string | undefined>;
+}
+
+/** Which track belongs to which group, and each group's label/volume/hidden/fxChain — one pass over raw tracks. */
+function resolveGroupMembership(rawTracks: [number, TimelineElement[]][]): GroupMembership {
+  const trackToGroupId = new Map<number, string>();
+  const memberTracksByGroup = new Map<string, number[]>();
+  const labelByGroup = new Map<string, string>();
+  const volumeByGroup = new Map<string, number>();
+  const hiddenByGroup = new Map<string, boolean>();
+  const fxChainByGroup = new Map<string, string | undefined>();
+  for (const [trackNum, elements] of rawTracks) {
+    const owner = elements.find((el) => el.audioGroup);
+    if (!owner?.audioGroup) continue;
+    trackToGroupId.set(trackNum, owner.audioGroup);
+    if (!labelByGroup.has(owner.audioGroup)) {
+      labelByGroup.set(owner.audioGroup, owner.audioGroupLabel ?? owner.audioGroup);
+      volumeByGroup.set(owner.audioGroup, owner.audioGroupVolume ?? 1);
+      hiddenByGroup.set(owner.audioGroup, owner.audioGroupHidden ?? false);
+      fxChainByGroup.set(owner.audioGroup, owner.audioGroupFxChain);
+    }
+    const members = memberTracksByGroup.get(owner.audioGroup) ?? [];
+    members.push(trackNum);
+    memberTracksByGroup.set(owner.audioGroup, members);
+  }
+  return {
+    trackToGroupId,
+    memberTracksByGroup,
+    labelByGroup,
+    volumeByGroup,
+    hiddenByGroup,
+    fxChainByGroup,
+  };
+}
+
+/** One group's resolved row info, built once the first time its id is seen. */
+function buildGroupInfo(
+  groupId: string,
+  fallbackTrackNum: number,
+  membership: GroupMembership,
+): TimelineTrackGroupInfo {
+  const memberTracks = [...(membership.memberTracksByGroup.get(groupId) ?? [])].sort(
+    (a, b) => a - b,
+  );
+  const fxChain = membership.fxChainByGroup.get(groupId);
+  return {
+    id: groupId,
+    label: membership.labelByGroup.get(groupId) ?? groupId,
+    anchorKey: (memberTracks[0] ?? fallbackTrackNum) - 0.5,
+    memberTracks,
+    volume: membership.volumeByGroup.get(groupId) ?? 1,
+    hidden: membership.hiddenByGroup.get(groupId) ?? false,
+    ...(fxChain ? { fxChain } : {}),
+  };
+}
+
+/** Push a group's synthetic anchor row plus its members' rows, contiguously. */
+function emitGroupRows(
+  info: TimelineTrackGroupInfo,
+  rawByTrack: ReadonlyMap<number, TimelineElement[]>,
+  trackGroupOf: Map<number, TimelineTrackGroupInfo>,
+  tracks: [number, TimelineElement[]][],
+): void {
+  tracks.push([info.anchorKey, []]);
+  for (const member of info.memberTracks) {
+    trackGroupOf.set(member, info);
+    tracks.push([member, rawByTrack.get(member) ?? []]);
+  }
+}
+
+/**
+ * Pull each group's members out of raw ascending track order and re-emit them
+ * contiguously, directly beneath a synthetic anchor row. Ungrouped tracks keep
+ * 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[]][]): {
+  tracks: [number, TimelineElement[]][];
+  groups: TimelineTrackGroupInfo[];
+  trackGroupOf: Map<number, TimelineTrackGroupInfo>;
+} {
+  const membership = resolveGroupMembership(rawTracks);
+  const rawByTrack = new Map(rawTracks);
+  const groups: TimelineTrackGroupInfo[] = [];
+  const trackGroupOf = new Map<number, TimelineTrackGroupInfo>();
+  const emitted = new Set<string>();
+  const tracks: [number, TimelineElement[]][] = [];
+
+  for (const [trackNum, elements] of rawTracks) {
+    const groupId = membership.trackToGroupId.get(trackNum);
+    if (!groupId) {
+      tracks.push([trackNum, elements]);
+      continue;
+    }
+    if (emitted.has(groupId)) continue;
+    emitted.add(groupId);
+    const info = buildGroupInfo(groupId, trackNum, membership);
+    groups.push(info);
+    emitGroupRows(info, rawByTrack, trackGroupOf, tracks);
+  }
+  return { tracks, groups, trackGroupOf };
+}
+
 /**
  * Per-render track derivations Timeline.tsx feeds the canvas/lanes: the lane →
- * clip grouping (`tracks`, ascending), per-lane visual styles, the ascending
- * `trackOrder`, and the z-override badge set. Extracted from Timeline.tsx as a
- * cohesive unit (600-line studio cap); each memo keys on the expanded display
- * element set exactly as before.
+ * clip grouping (`tracks`, group-aware order), per-lane visual styles, the
+ * matching `trackOrder`, and audio-group membership. Extracted from
+ * Timeline.tsx as a cohesive unit (600-line studio cap); each memo keys on the
+ * expanded display element set exactly as before.
  */
 export function useTimelineTrackDerivations(expandedElements: TimelineElement[]): {
   tracks: [number, TimelineElement[]][];
   trackStyles: Map<number, TrackVisualStyle>;
   trackOrder: number[];
+  groups: TimelineTrackGroupInfo[];
+  trackGroupOf: Map<number, TimelineTrackGroupInfo>;
 } {
-  const tracks = useMemo(() => {
+  const rawTracks = useMemo(() => {
     const map = new Map<number, TimelineElement[]>();
     for (const el of expandedElements) {
       const list = map.get(el.track) ?? [];
@@ -24,6 +156,11 @@ export function useTimelineTrackDerivations(expandedElements: TimelineElement[])
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
   }, [expandedElements]);
 
+  const { tracks, groups, trackGroupOf } = useMemo(
+    () => groupTimelineTracks(rawTracks),
+    [rawTracks],
+  );
+
   const trackStyles = useMemo(() => {
     const map = new Map<number, TrackVisualStyle>();
     for (const [trackNum, els] of tracks) {
@@ -34,5 +171,5 @@ export function useTimelineTrackDerivations(expandedElements: TimelineElement[])
 
   const trackOrder = useMemo(() => tracks.map(([trackNum]) => trackNum), [tracks]);
 
-  return { tracks, trackStyles, trackOrder };
+  return { tracks, trackStyles, trackOrder, groups, trackGroupOf };
 }

package/src/player/components/useTimelineTrackLayout.ts

@@ -7,12 +7,14 @@ import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
 import {
+  STRIP_H,
   TRACK_H,
   createTimelineRowGeometry,
   type TimelineRowGeometry,
   trackHeights,
   type TimelineTrackHeightClip,
 } from "./timelineLayout";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 
 export { getTrackStyle } from "./timelineIcons";
 
@@ -127,13 +129,35 @@ function computeLaneCounts(
   return laneCounts;
 }
 
+/** 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. */
+function applyGroupStripHeights(
+  tracks: readonly (readonly [number, readonly TimelineElement[]])[],
+  rowHeights: number[],
+  groups: readonly TimelineTrackGroupInfo[],
+  expandedLaneOwnerIds: ReadonlySet<string>,
+): number[] {
+  if (groups.length === 0) return rowHeights;
+  const groupByAnchor = new Map(groups.map((group) => [group.anchorKey, group]));
+  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;
+  });
+}
+
 function useTimelineRowHeights(
   tracks: [number, TimelineElement[]][],
   gsapAnimations: Map<string, GsapAnimation[]>,
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
+  groups: readonly TimelineTrackGroupInfo[],
 ) {
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
+  const expandedLaneOwnerIds = usePlayerStore((s) => s.expandedLaneOwnerIds);
   const { laneCounts, rowGeometry } = useMemo(() => {
     const laneCounts = computeLaneCounts(tracks, gsapAnimations);
     // Keyframe lanes follow only the active clip, so a track with several
@@ -163,7 +187,12 @@ function useTimelineRowHeights(
         },
       ];
     });
-    const rowHeights = trackHeights(heightTracks, expandedClipIds);
+    const rowHeights = applyGroupStripHeights(
+      tracks,
+      trackHeights(heightTracks, expandedClipIds),
+      groups,
+      expandedLaneOwnerIds,
+    );
     return {
       laneCounts,
       rowGeometry: createTimelineRowGeometry(
@@ -171,7 +200,15 @@ function useTimelineRowHeights(
         rowHeights,
       ),
     };
-  }, [expandedClipIds, gsapAnimations, tracks, selectedElementId, selectedElementIds]);
+  }, [
+    expandedClipIds,
+    expandedLaneOwnerIds,
+    gsapAnimations,
+    groups,
+    tracks,
+    selectedElementId,
+    selectedElementIds,
+  ]);
   const rowGeometryRef = useRef<TimelineRowGeometry>(rowGeometry);
   rowGeometryRef.current = rowGeometry;
   return {
@@ -188,7 +225,8 @@ export function useTimelineTrackLayout(
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
 ) {
-  const { tracks, trackStyles, trackOrder } = useTimelineTrackDerivations(expandedElements);
+  const { tracks, trackStyles, trackOrder, groups, trackGroupOf } =
+    useTimelineTrackDerivations(expandedElements);
   const trackOrderRef = useRef(trackOrder);
   trackOrderRef.current = trackOrder;
   const { laneCounts, rowGeometry, rowGeometryRef, rowHeights } = useTimelineRowHeights(
@@ -196,6 +234,7 @@ export function useTimelineTrackLayout(
     gsapAnimations,
     selectedElementId,
     selectedElementIds,
+    groups,
   );
 
   return {
@@ -207,6 +246,8 @@ export function useTimelineTrackLayout(
     rowGeometry,
     rowGeometryRef,
     rowHeights,
+    groups,
+    trackGroupOf,
   };
 }
 
@@ -227,7 +268,23 @@ function useDisplayRowHeights(
 function useDisplayTrackOrder(draggedClip: DraggedClipState | null, trackOrder: number[]) {
   return useMemo(() => {
     if (!draggedClip?.started || trackOrder.includes(draggedClip.previewTrack)) return trackOrder;
-    return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
+    // A group's members sit out of raw numeric order (pulled under their
+    // anchor row), so a plain numeric sort here would undo that grouping the
+    // moment a clip drags onto a brand-new track. Insert the new preview
+    // track only relative to other REAL (integer) tracks, leaving any
+    // fractional group-anchor keys exactly where grouping placed them.
+    const preview = draggedClip.previewTrack;
+    const result: number[] = [];
+    let inserted = false;
+    for (const key of trackOrder) {
+      if (!inserted && Number.isInteger(key) && key > preview) {
+        result.push(preview);
+        inserted = true;
+      }
+      result.push(key);
+    }
+    if (!inserted) result.push(preview);
+    return result;
   }, [draggedClip, trackOrder]);
 }