@hyperframes/studio 0.8.10 → 0.8.12

package/src/player/components/TimelineGroupHeader.tsx

@@ -1,8 +1,8 @@
-import { SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
 import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
 import { TRACK_H } from "./timelineLayout";
 import type { TimelineTheme } from "./timelineTheme";
 import { TimelineFxButton } from "./TimelineFxButton";
+import type { AuditionSpan } from "../../components/editor/useAuditionTransport.js";
 
 interface TimelineGroupHeaderProps {
   label: string;
@@ -14,20 +14,13 @@ interface TimelineGroupHeaderProps {
   laneCount: number;
   isLaneOpen: boolean;
   onToggleLanes: () => void;
-  /** The group element's own `data-hidden` — mutes every member at once. */
-  hidden: boolean;
-  onToggleHidden: () => void;
-  /** This group id is itself in the soloed set (fully lit). */
-  isSoloed: boolean;
-  /** Not soloed itself, but at least one member is (half-lit). */
-  isHalfLitSolo: boolean;
   /** `add: true` (⌘/Ctrl-click) toggles membership; a plain click is exclusive. */
-  onToggleSolo: (options?: { add?: boolean }) => void;
   /** C1: the group's serialized `data-fx-chain`, when set. */
   fxChain?: string;
   onFxChainChange: (next: HfAudioFxChain) => void;
   onFxChainPreview?: (next: HfAudioFxChain) => void;
-  onFxAuditionTransport?: (on: boolean) => void;
+  /** Member clips, so hovering a preset auditions where the group sounds. */
+  auditionSpans?: readonly AuditionSpan[];
   onOpenFxRack: () => void;
   columnWidth: number;
   theme: TimelineTheme;
@@ -35,8 +28,57 @@ interface TimelineGroupHeaderProps {
 
 /**
  * A group's own row header: caret (member disclosure) + `▤` + label + count +
- * mute + solo + FX + `∿ n` (lane disclosure).
+ * FX + `∿ n` (lane disclosure).
  */
+
+/**
+ * The group's name, which IS the way into its rack — a group is an element
+ * carrying `data-fx-chain`, so selecting it is what puts the chain in the
+ * property panel. Its own component because the header it sits in already
+ * carries six controls and was over the complexity gate with this inline.
+ */
+function GroupNameButton({
+  label,
+  memberCount,
+  onOpenFxRack,
+}: {
+  label: string;
+  memberCount: number;
+  onOpenFxRack: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      aria-label={`Open ${label} effects`}
+      title="Open effects"
+      // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
+      // claiming it here would push the controls off the right edge — and the
+      // count with them, since it rides inside this button.
+      className="flex h-6 min-w-0 items-center gap-1.5 rounded border-0 bg-transparent p-0 text-left text-[11px] text-white hover:text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={(event) => {
+        event.stopPropagation();
+        onOpenFxRack();
+      }}
+    >
+      <span aria-hidden="true" className="shrink-0 text-[12px] leading-none text-white/50">
+        ▤
+      </span>
+      {/* Wraps rather than truncating — a name that needs a hover to be read
+          is no use in a column you scan. */}
+      <span className="min-w-0 break-words text-left font-medium leading-tight">{label}</span>
+      <span
+        className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
+        aria-hidden="true"
+        title={`${memberCount} tracks`}
+      >
+        {memberCount}
+      </span>
+    </button>
+  );
+}
+
 export function TimelineGroupHeader({
   label,
   memberCount,
@@ -45,15 +87,10 @@ export function TimelineGroupHeader({
   laneCount,
   isLaneOpen,
   onToggleLanes,
-  hidden,
-  onToggleHidden,
-  isSoloed,
-  isHalfLitSolo,
-  onToggleSolo,
   fxChain,
   onFxChainChange,
   onFxChainPreview,
-  onFxAuditionTransport,
+  auditionSpans,
   onOpenFxRack,
   columnWidth,
   theme,
@@ -71,16 +108,19 @@ export function TimelineGroupHeader({
         borderRight: `1px solid ${theme.gutterBorder}`,
       }}
     >
+      {/* One line, like a track header's: caret and name, then every control
+          anchored to the right edge. The name wraps and the controls are
+          `shrink-0`, so they hold the edge and the name gives way — no second
+          line needed to keep five controls off the label. */}
       <button
         type="button"
         tabIndex={-1}
         aria-expanded={isExpanded}
         aria-label={`${isExpanded ? "Hide" : "Show"} ${label} tracks`}
         title={`${isExpanded ? "Hide" : "Show"} tracks`}
-        // Mono, like both of the property panel's disclosure carets. The size is
-        // this row's own call and not a match to either of them: the node-body
-        // caret sits under `text-[9px]`, and `hf-fx-preset-run-caret` has no
-        // size rule at all, so there is no measured target to match.
+        // 13px mono, matching the property panel's preset-run caret
+        // (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
+        // at the same size rather than a smaller one unique to this row.
         className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
           isExpanded ? "text-white" : "text-white/55 hover:text-white"
         }`}
@@ -90,91 +130,49 @@ export function TimelineGroupHeader({
           onToggleExpanded();
         }}
       >
-        {/* Swapped, not rotated: both panel carets swap, and a rotated ▸ sits
-            off-centre in its box because the glyph is not square. */}
+        {/* Swapped, not rotated: the panel's caret swaps too, and a rotated
+              ▸ sits off-centre in its box because the glyph is not square. */}
         <span aria-hidden="true">{isExpanded ? "▾" : "▸"}</span>
       </button>
-      <span aria-hidden="true" className="shrink-0 text-[12px] leading-none text-white/50">
-        ▤
-      </span>
-      <span className="min-w-0 flex-1 truncate font-medium" title={label}>
-        {label}
-      </span>
-      <span
-        className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
-        aria-hidden="true"
-        title={`${memberCount} tracks`}
-      >
-        {memberCount}
-      </span>
-      <button
-        type="button"
-        tabIndex={-1}
-        aria-label={hidden ? "Unmute group" : `Mute group ${label}`}
-        title={hidden ? "Unmute group" : `Mute group ${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/55 hover:text-white"
-        }`}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={(event) => {
-          event.stopPropagation();
-          onToggleHidden();
-        }}
-      >
-        {hidden ? (
-          <SpeakerSlash size={14} weight="bold" aria-hidden="true" />
-        ) : (
-          <SpeakerHigh size={14} weight="bold" aria-hidden="true" />
-        )}
-      </button>
-      <button
-        type="button"
-        tabIndex={-1}
-        aria-pressed={isSoloed}
-        aria-label="Hear only this"
-        title="Hear only this"
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[13px] font-semibold transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
-          isSoloed
-            ? "text-[#F5C542] hover:text-white"
-            : isHalfLitSolo
-              ? "text-[#F5C542]/50 hover:text-white"
-              : "text-white/35 hover:text-white/75"
-        }`}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={(event) => {
-          event.stopPropagation();
-          onToggleSolo({ add: event.metaKey || event.ctrlKey });
-        }}
-      >
-        <span aria-hidden="true">⌗</span>
-      </button>
-      <TimelineFxButton
-        fxChainRaw={fxChain}
-        onChainChange={onFxChainChange}
-        onChainPreview={onFxChainPreview}
-        onAuditionTransport={onFxAuditionTransport}
-        onOpenRack={onOpenFxRack}
-      />
-      <button
-        type="button"
-        tabIndex={-1}
-        aria-expanded={isLaneOpen}
-        aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
-        title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
-        className={`flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-          isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
-        }`}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={(event) => {
-          event.stopPropagation();
-          onToggleLanes();
-        }}
-      >
-        <span aria-hidden="true">∿</span>
+      <GroupNameButton label={label} memberCount={memberCount} onOpenFxRack={onOpenFxRack} />
+      {/* `ml-auto` absorbs the slack the truncating name leaves, so the controls
+          sit on the edge whatever the name's length. */}
+      <div className="ml-auto flex shrink-0 items-center gap-1.5">
+        <TimelineFxButton
+          fxChainRaw={fxChain}
+          onChainChange={onFxChainChange}
+          onChainPreview={onFxChainPreview}
+          auditionSpans={auditionSpans}
+          onOpenRack={onOpenFxRack}
+        />
+        {/* No lanes, no control: an author who opens it meets an empty row and
+            learns nothing. A track header already gates its own `∿` this way
+            (`disclosable`); the group's was the one that still offered a
+            disclosure over nothing. Automation appears by being written — from
+            the rack or a keyframe — not by opening this, so nothing is
+            unreachable while it is hidden. */}
         {laneCount > 0 && (
-          <span className="text-[9px] tabular-nums text-white/55">{laneCount}</span>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-expanded={isLaneOpen}
+            aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
+            title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
+            // Anchored right, matching every other header's lane toggle.
+            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+              isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+            }`}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => {
+              event.stopPropagation();
+              onToggleLanes();
+            }}
+          >
+            <span aria-hidden="true">∿</span>
+            <span className="text-[9px] tabular-nums text-white/55">{laneCount}</span>
+          </button>
         )}
-      </button>
+      </div>
     </div>
   );
 }

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -0,0 +1,88 @@
+/**
+ * The label column beside a group's own automation lanes.
+ *
+ * The designs draw a group lane as `▤ Volume   0.42` on an accent rail — and
+ * the rail is load-bearing, not decoration: "Scope is carried by colour, not by
+ * depth — a lane the group owns has an accent rail and names the group; a
+ * clip's lane is neutral." Two lanes both called Volume, doing entirely
+ * different things, otherwise sit eight pixels apart with nothing to tell them
+ * apart.
+ *
+ * The number is the value AT THE PLAYHEAD, not the stored seed: a readout that
+ * showed the seed would stand still while the curve is audibly working.
+ */
+
+import { sampleAutomationLane } from "@hyperframes/core/audio-automation";
+import { groupAutomationLanes } from "./automationLaneData";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+import type { TimelineElement } from "../store/playerStore";
+import { useLivePlayheadTime } from "../../hooks/useLivePlayheadTime";
+
+export function TimelineGroupLaneLabels({
+  groupElement,
+  groupLabel,
+  top,
+  columnWidth,
+  gutterBackground,
+  accentColor,
+}: {
+  /** The group wearing a clip's shape — see `groupAutomationElement`. */
+  groupElement: TimelineElement;
+  groupLabel: string;
+  /** y of the first lane, matching the canvas slot's own offset. */
+  top: number;
+  columnWidth: number;
+  gutterBackground: string;
+  accentColor: string;
+}) {
+  // The LIVE playhead, not the row's `currentTime` prop — that one only moves
+  // on seek, so the readout sat frozen while the curve was audibly working,
+  // which is precisely the failure this number exists to prevent.
+  const currentTime = useLivePlayheadTime();
+  // The SAME source the curves and the reserved height use
+  // (`TimelineGroupRow`), not raw `elementAutomationLanes`. Raw lanes are
+  // neither deduped by property nor filtered for resolvability, and the old
+  // `if (!parts) return null` consumed an index without drawing — so one
+  // unresolvable target slid every later label one row off the curve it names.
+  const laneGroups = groupAutomationLanes([groupElement]);
+  return (
+    <>
+      {laneGroups.map((laneGroup, index) => {
+        const lane = laneGroup.entries[0]?.lane;
+        if (!lane) return null;
+        const parts = { name: laneGroup.name, param: laneGroup.param };
+        // A group's clock is composition time (§1.3), so the playhead needs no
+        // clip-local rebase here — unlike a clip's lane.
+        const value = sampleAutomationLane(lane, currentTime);
+        return (
+          <div
+            key={lane.target}
+            data-group-lane-label={lane.target}
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[10px] text-white/65"
+            style={{
+              top: top + index * AUTOMATION_LANE_H,
+              width: columnWidth,
+              height: AUTOMATION_LANE_H,
+              background: gutterBackground,
+              borderLeft: `2px solid ${accentColor}`,
+            }}
+            title={`${groupLabel} · ${parts.param ? `${parts.name} · ${parts.param}` : parts.name}`}
+          >
+            <span aria-hidden="true" className="shrink-0 text-[11px] text-white/40">
+              ▤
+            </span>
+            <span className="flex min-w-0 flex-1 flex-col justify-center leading-tight">
+              <span className="truncate font-mono text-[9px] text-white/70">{parts.name}</span>
+              {parts.param ? (
+                <span className="truncate font-mono text-[9px] text-white/40">{parts.param}</span>
+              ) : null}
+            </span>
+            <span className="shrink-0 font-mono text-[9px] tabular-nums text-white/55">
+              {value.toFixed(2)}
+            </span>
+          </div>
+        );
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,146 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineGroupRow } from "./TimelineGroupRow";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
+import { defaultTimelineTheme } from "./timelineTheme";
+import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
+import type { TimelineElement } from "../store/playerStore";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../../telemetry/canary", () => ({ isCanaryEnabled: () => true }));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const member = (id: string, track: number): TimelineElement => ({
+  id,
+  domId: id,
+  tag: "audio",
+  start: 0,
+  duration: 5,
+  track,
+  audioGroup: "voiceover",
+});
+
+const GROUP: TimelineTrackGroupInfo = {
+  id: "voiceover",
+  label: "Voiceover",
+  anchorKey: -0.5,
+  memberTracks: [0, 1],
+  memberElements: [member("vo-1", 0), member("vo-2", 1)],
+  volume: 1,
+  hidden: false,
+};
+
+function renderRow(overrides: Partial<TimelineTrackGroupInfo> = {}) {
+  const onSetAudioGroupAttributeQuiet = vi.fn();
+  const onSetElementAttributeQuiet = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() =>
+    createRoot(host).render(
+      <TimelineEditProvider value={{ onSetAudioGroupAttributeQuiet, onSetElementAttributeQuiet }}>
+        <TimelineGroupRow
+          index={0}
+          rowKey={0}
+          group={{ ...GROUP, ...overrides }}
+          logicalRow={{ id: "g", level: 1, kind: "track" } as never}
+          top={0}
+          height={48}
+          virtualized={false}
+          contentOrigin={232}
+          theme={defaultTimelineTheme}
+          collapsedGroupIds={new Set()}
+          expandedLaneOwnerIds={new Set()}
+          toggleGroupExpanded={vi.fn()}
+          toggleLaneOwnerExpanded={vi.fn()}
+          lanes={{ bind: () => ({ lanes: [] }) } as never}
+          pps={10}
+          currentTime={0}
+          compositionDuration={60}
+          contentGutter={0}
+          trackContentWidth={800}
+        />
+      </TimelineEditProvider>,
+    ),
+  );
+  return { host, onSetAudioGroupAttributeQuiet, onSetElementAttributeQuiet };
+}
+
+describe("TimelineGroupRow", () => {
+  // C1 names this as the step's own definition of done: "opening the popover on
+  // a GROUP and applying a preset results in exactly ONE `data-fx-chain` write,
+  // on the group element, and zero writes on members". A group IS a bus — a
+  // write that fanned out to the members would be batch-apply wearing a bus's
+  // clothes, which is the one thing §1 rules out.
+  it("applies a preset to the group element only, never to its members", () => {
+    const { host, onSetAudioGroupAttributeQuiet, onSetElementAttributeQuiet } = renderRow();
+    const fx = Array.from(host.querySelectorAll("button")).find((b) =>
+      b.getAttribute("aria-label")?.startsWith("Effects"),
+    );
+    act(() => fx?.click());
+    const preset = document.querySelector<HTMLButtonElement>(".hf-fx-preset-item");
+    act(() => preset?.click());
+
+    expect(onSetAudioGroupAttributeQuiet).toHaveBeenCalledTimes(1);
+    const [groupId, attr] = onSetAudioGroupAttributeQuiet.mock.calls[0] ?? [];
+    expect(groupId).toBe("voiceover");
+    expect(attr).toBe("data-fx-chain");
+    // The members are the point: not one write reaches them.
+    expect(onSetElementAttributeQuiet).not.toHaveBeenCalled();
+  });
+
+  // A disclosure over nothing tells the author their group has no automation
+  // only AFTER they open an empty row. Track headers already gate their own
+  // toggle on having something to disclose; the group's did not.
+  it("hides the lane toggle until the group actually automates something", () => {
+    const laneToggle = (host: HTMLElement) =>
+      Array.from(host.querySelectorAll("button")).find((b) =>
+        /lanes$/.test(b.getAttribute("aria-label") ?? ""),
+      );
+
+    expect(laneToggle(renderRow().host)).toBeUndefined();
+
+    const automated = renderRow({
+      fxChain: JSON.stringify({
+        version: 1,
+        nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
+      }),
+      automation: JSON.stringify({
+        version: 1,
+        lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
+      }),
+    });
+    expect(laneToggle(automated.host)).toBeDefined();
+  });
+
+  // Same shape as a track header: caret and name on the left, every control in
+  // one right-anchored group. It was two lines — name, then controls — which is
+  // what let a stray child overflow the 48px box on the track side.
+  it("keeps the caret, the name and every control on one line", () => {
+    const { host } = renderRow({
+      fxChain: JSON.stringify({
+        version: 1,
+        nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
+      }),
+      automation: JSON.stringify({
+        version: 1,
+        lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
+      }),
+    });
+    const header = host.querySelector<HTMLElement>('[role="rowheader"]');
+    // Caret, name, control group — no second line.
+    expect(header?.children).toHaveLength(3);
+    const controls = header?.lastElementChild as HTMLElement | null;
+    expect(controls?.className).toContain("ml-auto");
+    // Both controls live in that group, so they share the right edge.
+    expect(controls?.querySelectorAll("button")).toHaveLength(2);
+    // The member count rides with the name, not out with the controls.
+    expect(controls?.querySelector('[title="2 tracks"]')).toBeNull();
+    act(() => undefined);
+  });
+});