@hyperframes/studio 0.8.11 → 0.8.12

package/src/player/components/timelineKeyboardNavigation.ts

@@ -77,8 +77,8 @@ export interface BuildTimelineLogicalRowsInput {
   selectedElementId: string | null;
   selectedElementIds: ReadonlySet<string>;
   expandedClipIds: ReadonlySet<string>;
-  /** Groups whose member rows the caret has shown (structural, not lanes). */
-  expandedGroupIds: ReadonlySet<string>;
+  /** Groups the caret has COLLAPSED — absent means expanded, the default. */
+  collapsedGroupIds: ReadonlySet<string>;
   /** Rows (clip id or group id) whose automation-lane rows the `∿` button opened. */
   expandedLaneOwnerIds: ReadonlySet<string>;
   groups: readonly TimelineTrackGroupInfo[];
@@ -251,7 +251,7 @@ export function buildTimelineLogicalRows({
   selectedElementId,
   selectedElementIds,
   expandedClipIds,
-  expandedGroupIds,
+  collapsedGroupIds,
   expandedLaneOwnerIds,
   groups,
   trackGroupOf,
@@ -273,7 +273,8 @@ export function buildTimelineLogicalRows({
       selectedElementIds,
       gsapAnimations,
     );
-    const expanded = isRowOpen(activeId, expandedClipIds, expandedLaneOwnerIds) && lanes.length > 0;
+    const disclosable = isTrackDisclosable(elements, lanes.length);
+    const expanded = isRowOpen(activeId, expandedClipIds, expandedLaneOwnerIds) && disclosable;
     rows.push({
       id: trackId,
       kind: "row",
@@ -282,7 +283,7 @@ export function buildTimelineLogicalRows({
       level,
       parentId,
       elementId: activeId,
-      expandable: lanes.length > 0,
+      expandable: disclosable,
       expanded,
       items: clipItems(trackId, elements),
     });
@@ -300,7 +301,7 @@ export function buildTimelineLogicalRows({
   // count.
   function emitGroup(group: TimelineTrackGroupInfo): void {
     const groupRowId = timelineGroupRowId(group.id);
-    const groupExpanded = expandedGroupIds.has(group.id);
+    const groupExpanded = !collapsedGroupIds.has(group.id);
     rows.push({
       id: groupRowId,
       kind: "row",
@@ -315,8 +316,10 @@ export function buildTimelineLogicalRows({
       items: [],
     });
     if (expandedLaneOwnerIds.has(group.id)) {
-      const memberElements = group.memberTracks.flatMap((track) => trackMap.get(track) ?? []);
-      for (const laneGroup of groupAutomationLanes(memberElements)) {
+      // The group's own member list, not `trackMap`: a COLLAPSED group can have
+      // its lane shelf open, and its members are absent from the display list —
+      // so looking them up there emitted zero lane rows for exactly that case.
+      for (const laneGroup of groupAutomationLanes(group.memberElements)) {
         rows.push({
           id: `${groupRowId}::${laneGroup.key}`,
           kind: "row",
@@ -452,3 +455,17 @@ export function resolveTimelineFocusFallback(
   }
   return nextRows[previous.rowIndex] ?? nextRows[previous.rowIndex - 1] ?? null;
 }
+
+/**
+ * Does a track have anything to open — the header's own `disclosable`.
+ *
+ * `TimelineTrackHeader` is `lanes.length > 0 || automationRows.length > 0`, and
+ * keyed on tweens alone here an audio track whose only disclosable content is
+ * AUTOMATION drew the `∿` while reporting itself unexpandable to the treegrid,
+ * so ArrowRight could not open it. Automation rows are counted per shared
+ * PROPERTY across the track's clips, the way the header counts them, not per
+ * clip.
+ */
+function isTrackDisclosable(elements: readonly TimelineElement[], laneCount: number): boolean {
+  return laneCount > 0 || groupAutomationLanes(elements).length > 0;
+}

package/src/player/components/timelineLayout.ts

@@ -7,7 +7,6 @@ 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;

package/src/player/components/timelineViewModel.ts

@@ -4,7 +4,7 @@ import type { ResizingClipState } from "./timelineClipDragTypes";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { animationContributesLane } from "./TimelinePropertyLanes";
 
-export function hasKeyframedTimelineClips(
+function hasKeyframedTimelineClips(
   animationsByElement: ReadonlyMap<string, readonly GsapAnimation[]>,
 ): boolean {
   return Array.from(animationsByElement.values()).some((animations) =>
@@ -12,6 +12,35 @@ export function hasKeyframedTimelineClips(
   );
 }
 
+/**
+ * Does the timeline need the wide label column?
+ *
+ * Keyframed clips need it for their property-lane names. Audio GROUPS need it
+ * for the same reason a keyframed clip does — a row whose name has nowhere else
+ * to go. A track row survives a narrow gutter because its CLIPS carry the name
+ * on the bar; a group row has no clips at all, so in the 80px gutter its label
+ * rendered at zero width and its FX and lane buttons were clipped off the
+ * side.
+ *
+ * Widening the column for the whole timeline, rather than letting just the
+ * group row overhang: the header is sticky and opaque, so an oversized one
+ * painted a slab across the rest of its own row, stayed pinned there through
+ * horizontal scroll, and had the playhead drawn straight through it.
+ */
+export function timelineNeedsLabelColumn(
+  animationsByElement: ReadonlyMap<string, readonly GsapAnimation[]>,
+  elements: readonly TimelineElement[],
+): boolean {
+  return (
+    hasKeyframedTimelineClips(animationsByElement) ||
+    // The column exists FOR the group rows, so this must stay in step with
+    // whatever decides they are drawn (`useTimelineTrackDerivations`) —
+    // widening it with no group row on screen is a 232px shift of every clip
+    // with nothing to explain it.
+    elements.some((element) => Boolean(element.audioGroup))
+  );
+}
+
 export function getEffectiveTimelineDuration(
   duration: number,
   elements: readonly TimelineElement[],

package/src/player/components/trackHeaderLabelRows.tsx

@@ -0,0 +1,328 @@
+/**
+ * The rows a track header draws BELOW its own line: one per disclosed keyframe
+ * property group, one per automation envelope.
+ *
+ * Split out of `TimelineTrackHeader.tsx`, which owned all of this and stood at
+ * 763 lines against the studio's 600-line cap. Nothing else moved: these three
+ * components never read the header's state, only their own props, which is why
+ * they are the seam.
+ */
+
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+import { LANE_H, getTimelineLaneTop } from "./timelineLayout";
+import {
+  resolveLaneHeaderState,
+  type KeyframeNavigationState,
+  type TimelinePropertyLane,
+} from "./trackHeaderLaneState";
+import { valueReadout } from "./trackHeaderLaneValues";
+import { timelineLogicalRowCellId, timelinePropertyRowId } from "./timelineNavigationIdentity";
+
+// Figma layout: prev-keyframe ‹, the add/remove toggle (children), next ›.
+function PropertyGroupNavigation({
+  navigation,
+  label,
+  expandedElement,
+  onSeek,
+  children,
+}: {
+  navigation: KeyframeNavigationState;
+  label: string;
+  expandedElement: TimelineElement;
+  onSeek?: (time: number) => void;
+  children: React.ReactNode;
+}) {
+  // The 12x20px glyph is all the lane row has room for, so the WCAG 24x24
+  // target is met with a centered transparent ::before overlay instead of a
+  // bigger box; focus-visible matches every other control in this header.
+  const CHEVRON_BUTTON_CLASS =
+    "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 " +
+    "focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] " +
+    "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 " +
+    "before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+  const seekTo = (keyframe: { percentage: number } | null) => {
+    if (keyframe) {
+      onSeek?.(expandedElement.start + (keyframe.percentage / 100) * expandedElement.duration);
+    }
+  };
+  return (
+    <span className="flex shrink-0 items-center gap-0.5">
+      <button
+        type="button"
+        aria-label={`Previous ${label} keyframe`}
+        disabled={!navigation.prevKeyframe}
+        className={CHEVRON_BUTTON_CLASS}
+        onClick={(event) => {
+          event.stopPropagation();
+          seekTo(navigation.prevKeyframe);
+        }}
+      >
+        ‹
+      </button>
+      {children}
+      <button
+        type="button"
+        aria-label={`Next ${label} keyframe`}
+        disabled={!navigation.nextKeyframe}
+        className={CHEVRON_BUTTON_CLASS}
+        onClick={(event) => {
+          event.stopPropagation();
+          seekTo(navigation.nextKeyframe);
+        }}
+      >
+        ›
+      </button>
+    </span>
+  );
+}
+
+export function PropertyGroupHeaderRow({
+  lanesId,
+  lane,
+  laneIndex,
+  isLastLane,
+  expandedElement,
+  currentTime,
+  clipPercentage,
+  gutterBackground,
+  columnWidth,
+  onTogglePropertyGroupKeyframe,
+  onSeek,
+  rovingTargetId = null,
+}: {
+  lanesId: string;
+  lane: TimelinePropertyLane;
+  laneIndex: number;
+  isLastLane: boolean;
+  expandedElement: TimelineElement;
+  currentTime: number;
+  clipPercentage: number;
+  gutterBackground: string;
+  columnWidth: number;
+  onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onSeek?: (time: number) => void;
+  rovingTargetId: string | null;
+}) {
+  const elementId = expandedElement.key ?? expandedElement.id;
+  const { navigation, values, label, toggleTarget } = resolveLaneHeaderState(
+    lane,
+    currentTime,
+    clipPercentage,
+  );
+
+  return (
+    <div
+      id={timelineLogicalRowCellId(lanesId, timelinePropertyRowId(elementId, lane.group), "header")}
+      data-timeline-focus-id={timelinePropertyRowId(elementId, lane.group)}
+      data-timeline-element-id={elementId}
+      tabIndex={rovingTargetId === timelinePropertyRowId(elementId, lane.group) ? 0 : -1}
+      data-property-group={lane.group}
+      data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      style={{
+        top: getTimelineLaneTop(laneIndex),
+        // The header column narrows to contentOrigin whenever that is under
+        // LABEL_COL_W; a lane row pinned to LABEL_COL_W then hangs its value
+        // readout over the canvas, on top of the clips it is labelling.
+        width: columnWidth,
+        height: LANE_H,
+        background: gutterBackground,
+      }}
+    >
+      {/* Tree connector: vertical spine (top-half on the last lane) + branch tick. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      <span className="w-[46px] shrink-0 truncate text-white" title={label}>
+        {label}
+      </span>
+      <PropertyGroupNavigation
+        navigation={navigation}
+        label={label}
+        expandedElement={expandedElement}
+        onSeek={onSeek}
+      >
+        <button
+          type="button"
+          aria-pressed={!!navigation.currentKeyframe}
+          aria-label={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
+          title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
+          // h-6 w-6 = the 24x24 WCAG 2.2 minimum target; the ◆ glyph stays 11px.
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onClick={(event) => {
+            // Same as the disclosure caret and the eye: a control in the label
+            // column owns its click, it does not also hit the track row behind it.
+            event.stopPropagation();
+            if (toggleTarget) {
+              void onTogglePropertyGroupKeyframe?.(expandedElement, toggleTarget);
+            }
+          }}
+        >
+          {navigation.currentKeyframe ? "◆" : "◇"}
+        </button>
+      </PropertyGroupNavigation>
+      <span
+        className="min-w-0 flex-1 truncate text-right tabular-nums text-white/45"
+        title={valueReadout(lane.group, values)}
+      >
+        {valueReadout(lane.group, values)}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * One envelope's row in the label column.
+ *
+ * Named here rather than inside the lane, on the same tree connector the
+ * keyframe rows use: an automation lane is a child of its clip exactly as a
+ * property group is, and drawing its name over the envelope put the label on top
+ * of the curve it describes and scrolled it away from its own row.
+ */
+export function AutomationLaneHeaderRow({
+  target,
+  label,
+  name,
+  param,
+  alsoAutomatedBy,
+  top,
+  isLastLane,
+  gutterBackground,
+  columnWidth,
+  onRemove,
+  isCarve,
+  onReveal,
+}: {
+  /** The lane the ACTIVE clip draws in this row, or null when it draws none —
+   *  the row belongs to the property, and a clip may be absent from it. */
+  target: string | null;
+  /** The whole thing on one line: the row's identity, its tooltip, and the
+   *  remove button's name. */
+  label: string;
+  /** What the effect is — "Peaking EQ 1.6 kHz". */
+  name: string;
+  /** Which knob the envelope drives. Empty when there is no second line to draw. */
+  param: string;
+  /** Set when this clip's group automates the SAME parameter. Gain stages
+   *  multiply — 0.42 on the group under 0.80 here plays at 0.34 — so an author
+   *  who drew one curve and then another hears something quieter than either
+   *  with nothing on screen to say why (groups doc §5). Not a warning; an
+   *  explanation. */
+  alsoAutomatedBy?: string;
+  top: number;
+  isLastLane: boolean;
+  gutterBackground: string;
+  columnWidth: number;
+  onRemove?: (target: string) => void;
+  /** The carve owns this envelope and rewrites it on every re-run, so it is
+   *  shown but not the author's to edit or delete. */
+  isCarve?: boolean;
+  /** Reveal this parameter in the rack. Absent, the name is inert rather than a
+   *  button that looks live and does nothing. */
+  onReveal?: () => void;
+}) {
+  return (
+    <div
+      data-automation-lane-label={label}
+      data-timeline-lane-top={top}
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      style={{
+        top,
+        width: columnWidth,
+        height: AUTOMATION_LANE_H,
+        background: gutterBackground,
+      }}
+    >
+      {/* Tree connector, as the keyframe rows draw it: spine down the row, branch
+          tick at the name's own height. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      {/* Two lines: what the effect is, then which knob the envelope drives. On
+          one line a band's own name was the first thing truncated in a column this
+          narrow — "Peaking EQ 1.6 k…" — losing exactly the part that tells two
+          bands apart. */}
+      {/* A button, because the name IS the way to the knob: clicking it opens
+          the rack on the effect this envelope drives and scrolls to it. Nothing
+          else in the timeline can get there — a lane names a parameter, and the
+          rack is where a parameter is set. */}
+      <button
+        type="button"
+        tabIndex={-1}
+        aria-label={onReveal ? `Show ${label} in the effect rack` : undefined}
+        title={onReveal ? `Show ${label} in the effect rack` : label}
+        disabled={!onReveal}
+        className="flex min-w-0 flex-1 flex-col justify-center rounded border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          // The label column owns its click; it does not also fall through to
+          // the track row behind it and move the selection.
+          event.stopPropagation();
+          onReveal?.();
+        }}
+      >
+        <span data-automation-lane-name="" className="truncate font-mono text-[9px] text-white/70">
+          {name}
+        </span>
+        {param ? (
+          <span
+            data-automation-lane-param=""
+            className="truncate font-mono text-[9px] text-white/40"
+          >
+            {param}
+          </span>
+        ) : null}
+        {alsoAutomatedBy ? (
+          <span
+            data-automation-lane-also=""
+            className="truncate text-[9px] text-[#F5C542]/80"
+            title={`${alsoAutomatedBy} is also fading this — the two multiply.`}
+          >
+            {alsoAutomatedBy} is also fading this.
+          </span>
+        ) : null}
+      </button>
+      {/* Beside the name it labels, because that is the only place an envelope is
+          named at all: a carve writes its own lanes, and the FX panel's automate
+          toggle can only reach a parameter it still lists — so without this an
+          envelope could be created and never removed.
+
+          Only for the clip the header is showing, since that is the only one a
+          write can reach: a shared row's other envelopes belong to clips that
+          are not selected, and a button that silently removed one of them (or
+          none) would be worse than no button. */}
+      {/* Not on a carve's own lane: the carve regenerates it on the next
+          analysis, so removing one band would come back and reads as the
+          button not working. Switching the carve off in the rack is what
+          removes them, all together, which is how they were made. */}
+      {onRemove && target !== null && !isCarve && (
+        <button
+          type="button"
+          aria-label={`Remove ${label} automation`}
+          title={`Remove ${label} automation`}
+          // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            // A control in the label column owns its click; it does not also hit
+            // the track row behind it and change the selection.
+            event.stopPropagation();
+            onRemove(target);
+          }}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}

package/src/player/components/useTimelineClipDisclosure.ts

@@ -0,0 +1,41 @@
+/**
+ * Opening and closing a track's keyframe property lanes, with the telemetry that
+ * goes with it.
+ *
+ * Split out of `TimelineLanes.tsx` to keep that file under the studio's 600-line
+ * cap. Both callbacks were already the only place the disclosure state and its
+ * `keyframe_lane_expand` event were written together, which is what makes them a
+ * seam rather than a shuffle.
+ */
+
+import { usePlayerStore } from "../store/playerStore";
+import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
+
+export interface TimelineClipDisclosure {
+  /** 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. */
+  toggleRowExpanded: (keys: readonly string[]) => void;
+  toggleClipExpanded: (key: string) => void;
+}
+
+export function useTimelineClipDisclosure(): TimelineClipDisclosure {
+  const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
+  const expandClips = usePlayerStore((s) => s.expandClips);
+  const setClipExpanded = usePlayerStore((s) => s.setClipExpanded);
+  const toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
+
+  return {
+    toggleRowExpanded: (keys) => {
+      const willExpand = !keys.some((key) => expandedClipIds.has(key));
+      trackStudioKeyframeLaneExpand({ expanded: willExpand });
+      if (willExpand) expandClips(keys);
+      else for (const key of keys) setClipExpanded(key, false);
+    },
+    toggleClipExpanded: (key) => {
+      trackStudioKeyframeLaneExpand({ expanded: !expandedClipIds.has(key) });
+      toggleClipExpanded(key);
+    },
+  };
+}

package/src/player/components/useTimelineLaneRowIndexes.ts

@@ -6,7 +6,7 @@ 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),
+    collapsedGroupIds: usePlayerStore((s) => s.collapsedGroupIds),
     expandedLaneOwnerIds: usePlayerStore((s) => s.expandedLaneOwnerIds),
     toggleGroupExpanded: usePlayerStore((s) => s.toggleGroupExpanded),
     toggleLaneOwnerExpanded: usePlayerStore((s) => s.toggleLaneOwnerExpanded),

package/src/player/components/useTimelineLogicalFocus.ts

@@ -35,7 +35,7 @@ interface TimelineLogicalFocusInput {
 
 export function useTimelineLogicalFocus(input: TimelineLogicalFocusInput) {
   const expandedClipIds = usePlayerStore((state) => state.expandedClipIds);
-  const expandedGroupIds = usePlayerStore((state) => state.expandedGroupIds);
+  const collapsedGroupIds = usePlayerStore((state) => state.collapsedGroupIds);
   const expandedLaneOwnerIds = usePlayerStore((state) => state.expandedLaneOwnerIds);
   const projectId = usePlayerStore((state) => state.timelineProjectId);
   const logicalRows = useTimelineLogicalRows({
@@ -45,7 +45,7 @@ export function useTimelineLogicalFocus(input: TimelineLogicalFocusInput) {
     selectedElementId: input.selectedElementId,
     selectedElementIds: input.selectedElementIds,
     expandedClipIds,
-    expandedGroupIds,
+    collapsedGroupIds,
     expandedLaneOwnerIds,
     groups: input.groups,
     trackGroupOf: input.trackGroupOf,

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

@@ -22,7 +22,7 @@ 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 collapsedGroupIds = new Set<string>();
 const expandedLaneOwnerIds = new Set<string>();
 const groups: never[] = [];
 const trackGroupOf = new Map();
@@ -37,7 +37,7 @@ function Harness({ snapshots }: { snapshots: Array<readonly TimelineLogicalRow[]
     selectedElementId: null,
     selectedElementIds,
     expandedClipIds,
-    expandedGroupIds,
+    collapsedGroupIds,
     expandedLaneOwnerIds,
     groups,
     trackGroupOf,

package/src/player/components/useTimelineLogicalRows.ts

@@ -14,7 +14,7 @@ export function useTimelineLogicalRows({
   selectedElementId,
   selectedElementIds,
   expandedClipIds,
-  expandedGroupIds,
+  collapsedGroupIds,
   expandedLaneOwnerIds,
   groups,
   trackGroupOf,
@@ -29,7 +29,7 @@ export function useTimelineLogicalRows({
         selectedElementId,
         selectedElementIds,
         expandedClipIds,
-        expandedGroupIds,
+        collapsedGroupIds,
         expandedLaneOwnerIds,
         groups,
         trackGroupOf,
@@ -38,7 +38,7 @@ export function useTimelineLogicalRows({
     [
       displayTrackOrder,
       expandedClipIds,
-      expandedGroupIds,
+      collapsedGroupIds,
       expandedLaneOwnerIds,
       groups,
       trackGroupOf,