@hyperframes/studio 0.8.6 → 0.8.8

package/src/player/components/PlayerControls.tsx

@@ -6,6 +6,7 @@ import { liveTime, usePlayerStore } from "../store/playerStore";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { useSoloBannerText } from "../../hooks/useAudioSoloBridge";
 import { ShortcutsPanel } from "./ShortcutsPanel";
 import { SpeedMenu } from "./SpeedMenu";
 import { VolumeControl } from "./VolumeControl";
@@ -155,12 +156,47 @@ const FullscreenButton = memo(function FullscreenButton({
 
 /* ── Main component ──────────────────────────────────────────────── */
 
+/**
+ * "Hearing only this" notice. Solo is a PREVIEW-only gate — it never touches an
+ * attribute and never reaches the export — so the state has to say so out loud,
+ * or a soloed session reads as a broken mix.
+ */
+const SoloBanner = memo(function SoloBanner({
+  previewIframeRef,
+}: {
+  previewIframeRef: { current: HTMLIFrameElement | null };
+}) {
+  const bannerText = useSoloBannerText(previewIframeRef);
+  const clearSolo = usePlayerStore.getState().clearSolo;
+  if (bannerText === null) return null;
+  return (
+    <div
+      role="status"
+      className="flex h-7 items-center justify-center gap-2 border-b border-neutral-800 bg-neutral-900/90 px-3 text-[11px] text-neutral-300"
+    >
+      <span>
+        Hearing only <span className="font-medium text-neutral-100">{bannerText}</span> — your
+        export is not affected
+      </span>
+      <button
+        type="button"
+        onClick={() => clearSolo()}
+        className="rounded px-1.5 py-0.5 font-medium text-studio-accent transition-colors hover:text-white"
+      >
+        Clear
+      </button>
+    </div>
+  );
+});
+
 interface PlayerControlsProps {
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
   disabled?: boolean;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
+  /** Needed to read the soloed clips' labels out of the preview document. */
+  previewIframeRef?: { current: HTMLIFrameElement | null };
 }
 
 export const PlayerControls = memo(function PlayerControls({
@@ -169,6 +205,7 @@ export const PlayerControls = memo(function PlayerControls({
   disabled = false,
   isFullscreen = false,
   onToggleFullscreen,
+  previewIframeRef,
 }: PlayerControlsProps) {
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const duration = usePlayerStore((s) => s.duration);
@@ -220,73 +257,80 @@ export const PlayerControls = memo(function PlayerControls({
   });
 
   return (
-    <div
-      className="grid h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3"
-      aria-disabled={disabled || undefined}
-      style={{
-        paddingBottom: "env(safe-area-inset-bottom)",
-      }}
-    >
-      <Tooltip
-        label={timeDisplayMode === "time" ? "Switch to frame display" : "Switch to time display"}
+    <div>
+      {previewIframeRef && <SoloBanner previewIframeRef={previewIframeRef} />}
+      <div
+        className="grid h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3"
+        aria-disabled={disabled || undefined}
+        style={{
+          paddingBottom: "env(safe-area-inset-bottom)",
+        }}
       >
-        <button
-          type="button"
-          onClick={() => setTimeDisplayMode(timeDisplayMode === "time" ? "frame" : "time")}
-          disabled={disabled}
-          className="min-w-0 justify-self-start whitespace-nowrap font-mono text-[11px] tabular-nums text-neutral-400 transition-colors hover:text-neutral-200 disabled:pointer-events-none"
+        <Tooltip
+          label={timeDisplayMode === "time" ? "Switch to frame display" : "Switch to time display"}
         >
-          <span ref={timeDisplayRef}>{formatTime(0)}</span>
-          {timeDisplayMode === "time" ? (
-            <>
-              <span className="mx-0.5 text-neutral-700">/</span>
-              <span className="text-neutral-600">{formatTime(duration)}</span>
-            </>
-          ) : null}
-        </button>
-      </Tooltip>
+          <button
+            type="button"
+            onClick={() => setTimeDisplayMode(timeDisplayMode === "time" ? "frame" : "time")}
+            disabled={disabled}
+            className="min-w-0 justify-self-start whitespace-nowrap font-mono text-[11px] tabular-nums text-neutral-400 transition-colors hover:text-neutral-200 disabled:pointer-events-none"
+          >
+            <span ref={timeDisplayRef}>{formatTime(0)}</span>
+            {timeDisplayMode === "time" ? (
+              <>
+                <span className="mx-0.5 text-neutral-700">/</span>
+                <span className="text-neutral-600">{formatTime(duration)}</span>
+              </>
+            ) : null}
+          </button>
+        </Tooltip>
 
-      <Tooltip label={isPlaying ? "Pause" : "Play"}>
-        <button
-          type="button"
-          aria-label={isPlaying ? "Pause" : "Play"}
-          onClick={() => {
-            trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
-            onTogglePlay();
-          }}
-          disabled={controlsDisabled}
-          className="flex h-8 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
-        >
-          <PlayPauseMorphIcon playing={isPlaying} />
-        </button>
-      </Tooltip>
+        <Tooltip label={isPlaying ? "Pause" : "Play"}>
+          <button
+            type="button"
+            aria-label={isPlaying ? "Pause" : "Play"}
+            onClick={() => {
+              trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
+              onTogglePlay();
+            }}
+            disabled={controlsDisabled}
+            className="flex h-8 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
+          >
+            <PlayPauseMorphIcon playing={isPlaying} />
+          </button>
+        </Tooltip>
 
-      <div className="flex min-w-0 items-center justify-self-end">
-        <VolumeControl
-          audioMuted={audioMuted}
-          audioVolume={audioVolume}
-          disabled={controlsDisabled}
-          setAudioMuted={setAudioMuted}
-          setAudioVolume={setAudioVolume}
-        />
-        <SpeedMenu
-          playbackRate={playbackRate}
-          setPlaybackRate={setPlaybackRate}
-          disabled={disabled}
-        />
-        <LoopButton loopEnabled={loopEnabled} disabled={disabled} setLoopEnabled={setLoopEnabled} />
-        {onToggleFullscreen && (
-          <FullscreenButton isFullscreen={isFullscreen} onToggleFullscreen={onToggleFullscreen} />
-        )}
-        <ShortcutsPanel
-          disabled={disabled}
-          duration={duration}
-          inPoint={inPoint}
-          outPoint={outPoint}
-          setInPoint={setInPoint}
-          setOutPoint={setOutPoint}
-          onSeek={onSeek}
-        />
+        <div className="flex min-w-0 items-center justify-self-end">
+          <VolumeControl
+            audioMuted={audioMuted}
+            audioVolume={audioVolume}
+            disabled={controlsDisabled}
+            setAudioMuted={setAudioMuted}
+            setAudioVolume={setAudioVolume}
+          />
+          <SpeedMenu
+            playbackRate={playbackRate}
+            setPlaybackRate={setPlaybackRate}
+            disabled={disabled}
+          />
+          <LoopButton
+            loopEnabled={loopEnabled}
+            disabled={disabled}
+            setLoopEnabled={setLoopEnabled}
+          />
+          {onToggleFullscreen && (
+            <FullscreenButton isFullscreen={isFullscreen} onToggleFullscreen={onToggleFullscreen} />
+          )}
+          <ShortcutsPanel
+            disabled={disabled}
+            duration={duration}
+            inPoint={inPoint}
+            outPoint={outPoint}
+            setInPoint={setInPoint}
+            setOutPoint={setOutPoint}
+            onSeek={onSeek}
+          />
+        </div>
       </div>
     </div>
   );

package/src/player/components/ShortcutsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useId, memo } from "react";
+import { useState, useCallback, useEffect, useId, useRef, memo } from "react";
 import { formatTime, frameToSeconds } from "../lib/time";
 import { Tooltip } from "../../components/ui";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
@@ -19,7 +19,7 @@ const SHORTCUT_SECTIONS = [
     ],
   },
   {
-    title: "Keyframes",
+    title: "Keyframes (when an element is selected)",
     hints: [
       { key: "K", label: "Add keyframe at playhead" },
       { key: "Del", label: "Delete selected keyframe" },
@@ -37,9 +37,10 @@ const SHORTCUT_SECTIONS = [
       { key: "⌘V", label: "Paste element" },
       { key: "⌘X", label: "Cut element" },
       { key: "S", label: "Split clip at playhead" },
+      { key: "⇧Click", label: "Razor tool: split all tracks" },
       { key: "⌘G", label: "Group elements" },
       { key: "⌘⇧G", label: "Ungroup" },
-      { key: "Del", label: "Delete selected element" },
+      { key: "Del", label: "Delete selected element (no keyframe selected)" },
     ],
   },
   {
@@ -112,6 +113,20 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
   const shortcutsPanelId = useId();
   const closeShortcuts = useCallback(() => setShowShortcuts(false), []);
   const shortcutsPanelRef = useContextMenuDismiss(closeShortcuts);
+  const panelBodyRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  // Move focus into the panel on open so keyboard users can scroll and read
+  // it; hand focus back to the trigger on close.
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!showShortcuts) return;
+    const trigger = triggerRef.current;
+    panelBodyRef.current?.focus();
+    return () => {
+      trigger?.focus();
+    };
+  }, [showShortcuts]);
 
   const commitJumpFrame = useCallback(() => {
     if (disabled) return;
@@ -141,6 +156,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
     <div ref={shortcutsPanelRef} className="relative flex-shrink-0">
       <Tooltip label="Shortcuts and tools">
         <button
+          ref={triggerRef}
           type="button"
           onClick={() => setShowShortcuts((v) => !v)}
           className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors ${
@@ -169,11 +185,14 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
       {showShortcuts && (
         <div
           id={shortcutsPanelId}
+          ref={panelBodyRef}
+          tabIndex={-1}
           role="dialog"
+          aria-label="Keyboard shortcuts and tools"
           // Deliberately NOT aria-modal. This is a non-modal disclosure: focus is
           // not trapped and the rest of the editor stays operable, so claiming
           // modality would make assistive tech treat the whole app as inert.
-          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto"
+          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-none"
           style={{
             background: "#161618",
             border: "1px solid rgba(255,255,255,0.08)",

package/src/player/components/SpeedMenu.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useEffect, memo } from "react";
+import { useState, useCallback, memo } from "react";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
 
@@ -16,23 +17,10 @@ export const SpeedMenu = memo(function SpeedMenu({
   disabled,
 }: SpeedMenuProps) {
   const [showSpeedMenu, setShowSpeedMenu] = useState(false);
-  const speedMenuContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!showSpeedMenu) return;
-    const handleMouseDown = (e: MouseEvent) => {
-      if (
-        speedMenuContainerRef.current &&
-        !speedMenuContainerRef.current.contains(e.target as Node)
-      ) {
-        setShowSpeedMenu(false);
-      }
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [showSpeedMenu]);
+  const closeMenu = useCallback(() => setShowSpeedMenu(false), []);
+  // Ref on the container (trigger + menu) so trigger clicks toggle instead of
+  // close-then-reopen; Escape also dismisses.
+  const speedMenuContainerRef = useContextMenuDismiss(closeMenu);
 
   return (
     <div ref={speedMenuContainerRef} className="relative flex-shrink-0">
@@ -41,6 +29,9 @@ export const SpeedMenu = memo(function SpeedMenu({
           type="button"
           onClick={() => setShowSpeedMenu((v) => !v)}
           disabled={disabled}
+          aria-haspopup="menu"
+          aria-expanded={showSpeedMenu}
+          aria-label="Playback speed"
           className="h-7 w-8 rounded-md font-mono text-[10px] tabular-nums text-neutral-500 transition-colors hover:text-neutral-200 disabled:opacity-30"
         >
           {playbackRate === 1 ? "1x" : `${playbackRate}x`}
@@ -48,33 +39,34 @@ export const SpeedMenu = memo(function SpeedMenu({
       </Tooltip>
       {showSpeedMenu && (
         <div
+          role="menu"
+          aria-label="Playback speed options"
           className="absolute bottom-full right-0 mb-1.5 rounded-lg shadow-xl z-50 min-w-[56px] overflow-hidden"
           style={{ background: "#161618", border: "1px solid rgba(255,255,255,0.08)" }}
         >
-          {SPEED_OPTIONS.map((rate) => (
-            <button
-              key={rate}
-              onClick={() => {
-                trackStudioEvent("playback", { action: "speed_change", rate });
-                setPlaybackRate(rate);
-                setShowSpeedMenu(false);
-              }}
-              className="block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors"
-              style={{
-                color: rate === playbackRate ? "#FAFAFA" : "#71717A",
-                background: rate === playbackRate ? "rgba(255,255,255,0.06)" : "transparent",
-              }}
-              onMouseEnter={(e) => {
-                if (rate !== playbackRate)
-                  e.currentTarget.style.background = "rgba(255,255,255,0.04)";
-              }}
-              onMouseLeave={(e) => {
-                if (rate !== playbackRate) e.currentTarget.style.background = "transparent";
-              }}
-            >
-              {rate}x
-            </button>
-          ))}
+          {SPEED_OPTIONS.map((rate) => {
+            const isCurrent = rate === playbackRate;
+            return (
+              <button
+                key={rate}
+                type="button"
+                role="menuitemradio"
+                aria-checked={isCurrent}
+                onClick={() => {
+                  trackStudioEvent("playback", { action: "speed_change", rate });
+                  setPlaybackRate(rate);
+                  setShowSpeedMenu(false);
+                }}
+                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-none focus-visible:bg-white/[0.04] ${
+                  isCurrent
+                    ? "text-neutral-50 bg-white/[0.06]"
+                    : "text-neutral-500 hover:bg-white/[0.04]"
+                }`}
+              >
+                {rate}x
+              </button>
+            );
+          })}
         </div>
       )}
     </div>

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

@@ -392,7 +392,7 @@ describe("Timeline provider boundary", () => {
     const row = button.parentElement?.parentElement;
     // Row children: [TimelineTrackHeader (sticky column), time-mapped content].
     const trackContent = row?.children.item(1);
-    expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false);
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false, 1);
     expect(trackContent).toBeInstanceOf(HTMLElement);
     if (!(trackContent instanceof HTMLElement)) {
       throw new Error("Expected track content element");
@@ -556,11 +556,11 @@ describe("Timeline provider boundary", () => {
     // Keyframed clip-1 is expanded by default (AE/Figma default); its disclosure
     // lives in the left column. clip-2 has no keyframes so it never shows one.
     const collapseButton = host.querySelector<HTMLButtonElement>(
-      'button[aria-label="Collapse clip-1 keyframes"]',
+      'button[aria-label="Hide clip-1 lanes"]',
     );
     expect(collapseButton).not.toBeNull();
-    expect(host.querySelector('button[aria-label="Expand clip-2 keyframes"]')).toBeNull();
-    expect(host.querySelector('button[aria-label="Collapse clip-2 keyframes"]')).toBeNull();
+    expect(host.querySelector('button[aria-label="Show clip-2 lanes"]')).toBeNull();
+    expect(host.querySelector('button[aria-label="Hide clip-2 lanes"]')).toBeNull();
 
     const clip = host.querySelector<HTMLElement>('[data-el-id="clip-1"]');
     const row = clip?.parentElement?.parentElement;
@@ -571,7 +571,7 @@ describe("Timeline provider boundary", () => {
     expectTrackExpansion(row, [], TRACK_H);
 
     const expandButton = host.querySelector<HTMLButtonElement>(
-      'button[aria-label="Expand clip-1 keyframes"]',
+      'button[aria-label="Show clip-1 lanes"]',
     );
     expect(expandButton).not.toBeNull();
     act(() => expandButton?.click());
@@ -603,8 +603,8 @@ describe("Timeline provider boundary", () => {
     const row = host.querySelector<HTMLElement>('[data-el-id="narration-1"]')?.parentElement
       ?.parentElement;
     // A row of several clips is named for the track, so the caret is too.
-    const caret = () => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]');
-    expect(caret()?.getAttribute("aria-label")).toBe("Expand Track 1 keyframes");
+    const caret = () => host.querySelector<HTMLButtonElement>('button[aria-label$=" lanes"]');
+    expect(caret()?.getAttribute("aria-label")).toBe("Show Track 1 lanes");
 
     act(() => caret()?.click());
     // One shared volume row, and BOTH clips hold it open.
@@ -647,7 +647,7 @@ describe("Timeline provider boundary", () => {
     });
     const root = createRoot(host);
     act(() => root.render(React.createElement(Timeline)));
-    act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]')?.click());
+    act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" lanes"]')?.click());
 
     const before = [...host.querySelectorAll(".hf-automation-lane")];
     expect(before).toHaveLength(2);

package/src/player/components/Timeline.tsx

@@ -1,6 +1,5 @@
 import { useRef, useMemo, useCallback, useState, memo } from "react";
-import { useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
-import { remapBeatAnalysisToComposition } from "../../utils/beatEditActions";
+import { useAdjustedBeatAnalysis, useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { useExpandedTimelineElements } from "../hooks/useExpandedTimelineElements";
 import { defaultTimelineTheme } from "./timelineTheme";
@@ -39,7 +38,6 @@ import {
 import { useTimelineSelectionLifecycle } from "./useTimelineSelectionLifecycle";
 import { useTimelineShiftModifier } from "./useTimelineShiftModifier";
 import { useTimelineTicks } from "./useTimelineTicks";
-import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { useTimelineClipRenderWindow } from "./useTimelineClipRenderWindow";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
@@ -109,13 +107,7 @@ export const Timeline = memo(function Timeline({
   useMusicBeatAnalysis();
   const rawElements = usePlayerStore((s) => s.elements);
   const expandedElements = useExpandedTimelineElements();
-  const beatAnalysis = usePlayerStore((s) => s.beatAnalysis);
-  const musicElement = usePlayerStore((s) => getTimelineElementIndexes(s.elements).musicElement);
-  const beatEdits = usePlayerStore((s) => s.beatEdits);
-  const adjustedBeatAnalysis = useMemo(
-    () => remapBeatAnalysisToComposition(beatAnalysis, musicElement, beatEdits),
-    [beatAnalysis, musicElement, beatEdits],
-  );
+  const adjustedBeatAnalysis = useAdjustedBeatAnalysis();
   const duration = usePlayerStore((s) => s.duration);
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const timelineReady = usePlayerStore((s) => s.timelineReady);
@@ -158,6 +150,8 @@ export const Timeline = memo(function Timeline({
     laneCounts,
     rowGeometry,
     rowGeometryRef,
+    groups,
+    trackGroupOf,
   } = useTimelineTrackLayout(
     expandedElements,
     gsapAnimations,
@@ -289,6 +283,8 @@ export const Timeline = memo(function Timeline({
     laneCounts,
     selectedElementId,
     selectedElementIds,
+    groups,
+    trackGroupOf,
     gsapAnimations,
     elements: expandedElements,
     pixelsPerSecond: pps,
@@ -509,6 +505,7 @@ export const Timeline = memo(function Timeline({
           trackOrder={trackOrder}
           tracks={tracks}
           trackStyles={trackStyles}
+          groups={groups}
           laneCounts={laneCounts}
           selectedElementId={selectedElementId}
           selectedElementIds={selectedElementIds}

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

@@ -0,0 +1,81 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createRoot } from "react-dom/client";
+import { serializeAudioFxChain } from "@hyperframes/core/audio-fx";
+import { TimelineFxButton } from "./TimelineFxButton.js";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function byTextButton(host: HTMLElement, text: string): HTMLButtonElement | undefined {
+  return Array.from(host.querySelectorAll("button")).find((b) => b.textContent?.includes(text));
+}
+
+function mount(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => createRoot(host).render(node));
+  return host;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("TimelineFxButton", () => {
+  it("reads FX with no count when the chain is empty", () => {
+    const host = mount(
+      <TimelineFxButton
+        variant="chain"
+        fxChainRaw={undefined}
+        onChainChange={vi.fn()}
+        onOpenRack={vi.fn()}
+      />,
+    );
+    expect(byTextButton(host, "FX")?.textContent).toBe("FX");
+  });
+
+  it("counts only enabled nodes", () => {
+    const chain = {
+      version: 1 as const,
+      nodes: [
+        { type: "peaking", params: {}, enabled: true },
+        { type: "gain", params: {}, enabled: false },
+      ],
+    };
+    const host = mount(
+      <TimelineFxButton
+        variant="chain"
+        fxChainRaw={serializeAudioFxChain(chain)}
+        onChainChange={vi.fn()}
+        onOpenRack={vi.fn()}
+      />,
+    );
+    expect(byTextButton(host, "FX 1")).toBeDefined();
+  });
+
+  it("opens the popover on click, anchored off the button", () => {
+    const host = mount(
+      <TimelineFxButton
+        variant="chain"
+        fxChainRaw={undefined}
+        onChainChange={vi.fn()}
+        onOpenRack={vi.fn()}
+      />,
+    );
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+    act(() => byTextButton(host, "FX")?.click());
+    expect(document.querySelector('[role="dialog"]')).toBeTruthy();
+  });
+
+  it("group-pointer variant offers Group instead of a popover", () => {
+    const onGroupClips = vi.fn();
+    const host = mount(<TimelineFxButton variant="group-pointer" onGroupClips={onGroupClips} />);
+    act(() => byTextButton(host, "FX")?.click());
+    const groupButton = document.body.querySelectorAll("button");
+    const group = Array.from(groupButton).find((b) => b.textContent === "Group");
+    expect(group).toBeDefined();
+    act(() => group?.click());
+    expect(onGroupClips).toHaveBeenCalledTimes(1);
+  });
+});