@hyperframes/studio 0.8.6 → 0.8.8

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

@@ -0,0 +1,126 @@
+import { Eye, EyeSlash, SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
+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.
+ *
+ * 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 ? `Unmute track${suffix}` : `Mute track${suffix}`;
+  return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
+}
+
+function visibilityButtonIcon(showAsMute: boolean, hidden: boolean) {
+  const Icon = showAsMute ? (hidden ? SpeakerSlash : SpeakerHigh) : hidden ? EyeSlash : Eye;
+  return <Icon size={14} weight="bold" aria-hidden="true" />;
+}
+
+export function VisibilityButton({
+  hidden,
+  trackNumber,
+  trackDisplayNumber,
+  visible,
+  isAudioTrack,
+  onToggle,
+}: {
+  hidden: boolean;
+  trackNumber: number;
+  trackDisplayNumber: number | null;
+  visible: boolean;
+  isAudioTrack?: boolean;
+  onToggle: TimelineEditCallbacks["onToggleTrackHidden"];
+}) {
+  if (!visible) return <span aria-hidden="true" className="h-6 w-6 shrink-0" />;
+  // 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);
+  const label = visibilityButtonLabel(showAsMute, hidden, suffix);
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
+        hidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
+      }`}
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={(event) => {
+        event.stopPropagation();
+        void onToggle?.(trackNumber, !hidden, trackDisplayNumber);
+      }}
+    >
+      {visibilityButtonIcon(showAsMute, hidden)}
+    </button>
+  );
+}
+
+// The header a track gets when it has no keyframe clip to disclose: label, clip
+// count, eye. Not deprecated — it is the live path for every track without lanes.
+export function PlainTrackHeader({
+  trackNumber,
+  trackDisplayNumber,
+  trackLabel,
+  clipCount,
+  showTrackLabel,
+  isTrackHidden,
+  isAudioTrack,
+  isGroupMuted,
+  isSoloed,
+  onToggleSolo,
+  onToggleTrackHidden,
+}: {
+  trackNumber: number;
+  trackDisplayNumber: number | null;
+  trackLabel: string;
+  clipCount: number;
+  isTrackHidden: boolean;
+  isAudioTrack: boolean;
+  onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
+  showTrackLabel: boolean;
+  isGroupMuted: boolean;
+  isSoloed: boolean;
+  onToggleSolo?: (options?: { add?: boolean }) => void;
+}) {
+  return (
+    <>
+      {isAudioTrack && (
+        <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+      )}
+      {showTrackLabel && (
+        <span
+          className={`min-w-0 flex-1 truncate text-[11px] ${
+            isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""
+          }`}
+          title={isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel}
+        >
+          {trackLabel}
+        </span>
+      )}
+      {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
+      <VisibilityButton
+        hidden={isTrackHidden}
+        trackNumber={trackNumber}
+        trackDisplayNumber={trackDisplayNumber}
+        visible
+        isAudioTrack={isAudioTrack}
+        onToggle={onToggleTrackHidden}
+      />
+      {isAudioTrack && onToggleSolo && (
+        <TimelineSoloButton isSoloed={isSoloed} onToggle={onToggleSolo} />
+      )}
+    </>
+  );
+}

package/src/player/components/VideoThumbnail.tsx

@@ -110,13 +110,18 @@ export const VideoThumbnail = memo(function VideoThumbnail({
       )}
       {snapshot.status === "loading" && urls.length === 0 && (
         <div
-          className="absolute inset-0 animate-pulse"
+          className="absolute inset-0 animate-pulse motion-reduce:animate-none"
           style={{
             background:
               "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
           }}
         />
       )}
+      {snapshot.status === "error" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-neutral-900/60">
+          <span className="rounded bg-black/50 px-1 text-[8px] text-neutral-500">no preview</span>
+        </div>
+      )}
       {label && (
         <div
           className="absolute inset-x-0 bottom-0 z-10 px-1.5 pb-0.5 pt-3"

package/src/player/components/menuKeyboardNav.ts

@@ -0,0 +1,47 @@
+import { useEffect, type RefObject } from "react";
+
+/**
+ * APG menu keyboard basics for the timeline context menus: focuses the first
+ * menu item on open, moves focus with ArrowUp/ArrowDown/Home/End, and restores
+ * focus to the previously focused element when the menu unmounts. Pair with
+ * `role="menu"` on the container and `role="menuitem"` on the buttons
+ * (dismiss/Escape handling stays in useContextMenuDismiss).
+ */
+export function useMenuKeyboardNav(menuRef: RefObject<HTMLDivElement | null>): void {
+  useEffect(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    const previouslyFocused = document.activeElement;
+
+    const items = () =>
+      Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')).filter(
+        (el) => !el.disabled,
+      );
+    items()[0]?.focus();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+        return;
+      }
+      const list = items();
+      if (list.length === 0) return;
+      e.preventDefault();
+      const idx = list.findIndex((el) => el === document.activeElement);
+      let next: number;
+      if (e.key === "ArrowDown") next = idx < 0 ? 0 : (idx + 1) % list.length;
+      else if (e.key === "ArrowUp")
+        next = idx < 0 ? list.length - 1 : (idx - 1 + list.length) % list.length;
+      else if (e.key === "Home") next = 0;
+      else next = list.length - 1;
+      list[next]?.focus();
+    };
+    menu.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      menu.removeEventListener("keydown", onKeyDown);
+      if (previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [menuRef]);
+}

package/src/player/components/timelineCallbacks.ts

@@ -67,7 +67,46 @@ 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. */
+  onSetAudioGroupAttributeQuiet?: (
+    groupId: string,
+    attr: string,
+    value: string | null,
+    label: string,
+  ) => Promise<void>;
+  /** C1's ungrouped-track FX pointer: "Group these clips" — write
+   *  `data-audio-group` on every one of them, atomically. Same shape B6's
+   *  carve auto-grouping uses. */
+  onGroupClips?: (clipIds: readonly string[], groupId: string) => Promise<void>;
+  /** C1's single-clip FX write: addressed by the clip itself rather than the
+   *  current selection, mirroring `onSetAudioGroupAttributeLive/Quiet`. */
+  onSetElementAttributeLive?: (
+    element: TimelineElement,
+    attr: string,
+    value: string | null,
+  ) => void;
+  onSetElementAttributeQuiet?: (
+    element: TimelineElement,
+    attr: string,
+    value: string | null,
+    label: string,
+  ) => Promise<void>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;

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

@@ -58,6 +58,10 @@ function model(overrides: Partial<Parameters<typeof buildTimelineLogicalRows>[0]
     selectedElementId: "active",
     selectedElementIds: new Set(),
     expandedClipIds: new Set(["active"]),
+    expandedGroupIds: new Set(),
+    expandedLaneOwnerIds: new Set(),
+    groups: [],
+    trackGroupOf: new Map(),
     gsapAnimations: new Map([
       [
         "active",
@@ -244,6 +248,10 @@ describe("resolveTimelineNavigationTarget", () => {
       selectedElementId: null,
       selectedElementIds: new Set(),
       expandedClipIds: new Set(),
+      expandedGroupIds: new Set(),
+      expandedLaneOwnerIds: new Set(),
+      groups: [],
+      trackGroupOf: new Map(),
       gsapAnimations: new Map(),
     });
 

package/src/player/components/timelineKeyboardNavigation.ts

@@ -1,6 +1,7 @@
 import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../store/playerStore";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { groupAutomationLanes } from "./automationLaneData";
 import {
   timelineKeyframeSelectionKey,
   type TimelineKeyframeTarget,
@@ -8,11 +9,13 @@ import {
 import {
   timelineClipFocusId,
   timelineEaseFocusId,
+  timelineGroupRowId,
   timelineKeyframeFocusId,
   timelinePropertyRowId,
   timelineTrackRowId,
 } from "./timelineNavigationIdentity";
 import { resolveTrackKeyframeClip } from "./useTimelineTrackLayout";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 
 export type TimelineNavigationKey =
   | "ArrowLeft"
@@ -54,9 +57,11 @@ export interface TimelineLogicalRow {
   kind: "row";
   physicalTrackKey: number;
   logicalIndex: number;
-  level: 1 | 2;
+  level: 1 | 2 | 3;
   parentId: string | null;
   elementId: string | null;
+  /** Set only on a group's own row (level 1, no clips of its own). */
+  groupId?: string;
   expandable: boolean;
   expanded: boolean;
   propertyGroup?: PropertyGroupName;
@@ -65,13 +70,19 @@ export interface TimelineLogicalRow {
 
 export type TimelineLogicalTarget = TimelineLogicalRow | TimelineLogicalItem;
 
-interface BuildTimelineLogicalRowsInput {
+export interface BuildTimelineLogicalRowsInput {
   tracks: readonly (readonly [number, readonly TimelineElement[]])[];
   displayTrackOrder: readonly number[];
   laneCounts: ReadonlyMap<string, number>;
   selectedElementId: string | null;
   selectedElementIds: ReadonlySet<string>;
   expandedClipIds: ReadonlySet<string>;
+  /** Groups whose member rows the caret has shown (structural, not lanes). */
+  expandedGroupIds: ReadonlySet<string>;
+  /** Rows (clip id or group id) whose automation-lane rows the `∿` button opened. */
+  expandedLaneOwnerIds: ReadonlySet<string>;
+  groups: readonly TimelineTrackGroupInfo[];
+  trackGroupOf: ReadonlyMap<number, TimelineTrackGroupInfo>;
   gsapAnimations: ReadonlyMap<string, readonly GsapAnimation[]>;
 }
 
@@ -106,6 +117,35 @@ function clipItems(rowId: string, elements: readonly TimelineElement[]): Timelin
     });
 }
 
+/** A track's active clip (if any), its element id, and its automation lanes. */
+function resolveActiveTrackClip(
+  elements: readonly TimelineElement[],
+  laneCounts: BuildTimelineLogicalRowsInput["laneCounts"],
+  selectedElementId: string | null,
+  selectedElementIds: ReadonlySet<string>,
+  gsapAnimations: BuildTimelineLogicalRowsInput["gsapAnimations"],
+): {
+  activeClip: TimelineElement | null;
+  activeId: string | null;
+  lanes: ReturnType<typeof getTimelinePropertyLanes>;
+} {
+  const activeClip = resolveTrackKeyframeClip(
+    elements,
+    laneCounts,
+    selectedElementId,
+    selectedElementIds,
+  );
+  const activeId = activeClip ? elementId(activeClip) : null;
+  const lanes = activeClip
+    ? getTimelinePropertyLanes(
+        gsapAnimations.get(elementId(activeClip)) ?? [],
+        activeClip.start,
+        activeClip.duration,
+      )
+    : [];
+  return { activeClip, activeId, lanes };
+}
+
 function keyframeTarget(
   keyframe: ReturnType<typeof getTimelinePropertyLanes>[number]["keyframes"][number],
 ): TimelineKeyframeTarget {
@@ -167,6 +207,42 @@ function propertyItems(
   return items;
 }
 
+/** A clip's lanes are visible when either the caret or the `∿` button opened it. */
+function isRowOpen(
+  activeId: string | null,
+  expandedClipIds: ReadonlySet<string>,
+  expandedLaneOwnerIds: ReadonlySet<string>,
+): boolean {
+  if (activeId === null) return false;
+  return expandedClipIds.has(activeId) || expandedLaneOwnerIds.has(activeId);
+}
+
+/** A single automation-lane row, one level deeper than the track/group row that owns it. */
+function buildLaneRow(
+  track: number,
+  logicalIndex: number,
+  activeId: string,
+  activeClip: TimelineElement,
+  lane: ReturnType<typeof getTimelinePropertyLanes>[number],
+  level: 2 | 3,
+  parentId: string,
+): TimelineLogicalRow {
+  const laneRowId = timelinePropertyRowId(activeId, lane.group);
+  return {
+    id: laneRowId,
+    kind: "row",
+    physicalTrackKey: track,
+    logicalIndex,
+    level,
+    parentId,
+    elementId: activeId,
+    expandable: false,
+    expanded: false,
+    propertyGroup: lane.group,
+    items: propertyItems(laneRowId, activeClip, lane.keyframes),
+  };
+}
+
 /** Canonical model of the treegrid, independent of which virtual rows or clips are mounted. */
 export function buildTimelineLogicalRows({
   tracks,
@@ -175,57 +251,98 @@ export function buildTimelineLogicalRows({
   selectedElementId,
   selectedElementIds,
   expandedClipIds,
+  expandedGroupIds,
+  expandedLaneOwnerIds,
+  groups,
+  trackGroupOf,
   gsapAnimations,
 }: BuildTimelineLogicalRowsInput): TimelineLogicalRow[] {
   const trackMap = new Map(tracks);
+  const groupByAnchor = new Map(groups.map((group) => [group.anchorKey, group]));
   const rows: TimelineLogicalRow[] = [];
-  for (const track of displayTrackOrder) {
+
+  // A real track's own row (level 1 ungrouped, level 2 under a group) plus,
+  // when its clip's lanes are open, the lane rows one level deeper.
+  function emitTrack(track: number, level: 1 | 2, parentId: string | null): void {
     const elements = trackMap.get(track) ?? [];
     const trackId = timelineTrackRowId(track);
-    const activeClip = resolveTrackKeyframeClip(
+    const { activeClip, activeId, lanes } = resolveActiveTrackClip(
       elements,
       laneCounts,
       selectedElementId,
       selectedElementIds,
+      gsapAnimations,
     );
-    const activeId = activeClip ? elementId(activeClip) : null;
-    const lanes = activeClip
-      ? getTimelinePropertyLanes(
-          gsapAnimations.get(elementId(activeClip)) ?? [],
-          activeClip.start,
-          activeClip.duration,
-        )
-      : [];
-    const expanded = activeId !== null && expandedClipIds.has(activeId) && lanes.length > 0;
+    const expanded = isRowOpen(activeId, expandedClipIds, expandedLaneOwnerIds) && lanes.length > 0;
     rows.push({
       id: trackId,
       kind: "row",
       physicalTrackKey: track,
       logicalIndex: rows.length,
-      level: 1,
-      parentId: null,
+      level,
+      parentId,
       elementId: activeId,
       expandable: lanes.length > 0,
       expanded,
       items: clipItems(trackId, elements),
     });
-    if (!expanded || !activeClip) continue;
+    if (!expanded || !activeClip || !activeId) return;
     for (const lane of lanes) {
-      const rowId = timelinePropertyRowId(activeId, lane.group);
-      rows.push({
-        id: rowId,
-        kind: "row",
-        physicalTrackKey: track,
-        logicalIndex: rows.length,
-        level: 2,
-        parentId: trackId,
-        elementId: activeId,
-        expandable: false,
-        expanded: false,
-        propertyGroup: lane.group,
-        items: propertyItems(rowId, activeClip, lane.keyframes),
-      });
+      rows.push(
+        buildLaneRow(track, rows.length, activeId, activeClip, lane, level === 1 ? 2 : 3, trackId),
+      );
+    }
+  }
+
+  // A group's own row (level 1) plus, when its `∿` is open, its own
+  // automation-lane rows (level 2) — structural content deferred to whatever
+  // step wires group automation editing; this reserves the rows and their
+  // count.
+  function emitGroup(group: TimelineTrackGroupInfo): void {
+    const groupRowId = timelineGroupRowId(group.id);
+    const groupExpanded = expandedGroupIds.has(group.id);
+    rows.push({
+      id: groupRowId,
+      kind: "row",
+      physicalTrackKey: group.anchorKey,
+      logicalIndex: rows.length,
+      level: 1,
+      parentId: null,
+      elementId: null,
+      groupId: group.id,
+      expandable: group.memberTracks.length > 0,
+      expanded: groupExpanded,
+      items: [],
+    });
+    if (expandedLaneOwnerIds.has(group.id)) {
+      const memberElements = group.memberTracks.flatMap((track) => trackMap.get(track) ?? []);
+      for (const laneGroup of groupAutomationLanes(memberElements)) {
+        rows.push({
+          id: `${groupRowId}::${laneGroup.key}`,
+          kind: "row",
+          physicalTrackKey: group.anchorKey,
+          logicalIndex: rows.length,
+          level: 2,
+          parentId: groupRowId,
+          elementId: null,
+          expandable: false,
+          expanded: false,
+          items: [],
+        });
+      }
+    }
+    if (!groupExpanded) return;
+    for (const track of group.memberTracks) emitTrack(track, 2, groupRowId);
+  }
+
+  for (const key of displayTrackOrder) {
+    const group = groupByAnchor.get(key);
+    if (group) {
+      emitGroup(group);
+      continue;
     }
+    if (trackGroupOf.has(key)) continue; // emitted above, under its group
+    emitTrack(key, 1, null);
   }
   return rows;
 }