@hyperframes/studio 0.8.59 → 0.8.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "description": "",
   "repository": {
     "type": "git",
@@ -51,11 +51,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.59",
-    "@hyperframes/parsers": "0.8.59",
-    "@hyperframes/player": "0.8.59",
-    "@hyperframes/studio-server": "0.8.59",
-    "@hyperframes/sdk": "0.8.59"
+    "@hyperframes/core": "0.8.60",
+    "@hyperframes/player": "0.8.60",
+    "@hyperframes/sdk": "0.8.60",
+    "@hyperframes/parsers": "0.8.60",
+    "@hyperframes/studio-server": "0.8.60"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -71,7 +71,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.59"
+    "@hyperframes/producer": "0.8.60"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioHeader.tsx

@@ -5,6 +5,7 @@ import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
 import { Dock } from "./dock/Dock";
+import { InspectorIcon } from "./icons/InspectorIcon";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -247,19 +248,7 @@ export function StudioHeader({
                 "h-full rounded-none",
                 inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent",
               )}
-              icon={
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-                </svg>
-              }
+              icon={<InspectorIcon size={16} />}
               onClick={() => {
                 if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
                   trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });

package/src/components/TimelineToolbar.test.tsx

@@ -6,10 +6,14 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
+import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
+import { readStudioUiPreferences } from "../utils/studioUiPreferences";
+import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
 
 vi.mock("../contexts/StudioContext", () => ({
   useStudioShellContext: () => ({
+    previewIframeRef: { current: null },
     editHistory: { canUndo: false, canRedo: false },
     handleUndo: vi.fn(),
     handleRedo: vi.fn(),
@@ -172,3 +176,41 @@ describe("TimelineToolbar — keyframes on audio tracks", () => {
     act(() => root.unmount());
   });
 });
+
+describe("TimelineToolbar audio meters", () => {
+  it("keeps fresh preferences hidden until the user opts in and persists the choice", () => {
+    localStorage.clear();
+    useAudioMetersVisible.setState(useAudioMetersVisible.getInitialState());
+    usePlayerStore.setState({
+      elements: [{ id: "music", key: "music", tag: "audio", start: 0, duration: 10, track: 1 }],
+    });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    try {
+      act(() =>
+        root.render(
+          <>
+            <TimelineToolbar />
+            <AudioMeterStrip />
+          </>,
+        ),
+      );
+      const button = host.querySelector<HTMLButtonElement>(
+        'button[aria-label="Toggle audio meters"]',
+      );
+      expect(readStudioUiPreferences().audioMetersVisible).toBeUndefined();
+      expect(button?.getAttribute("aria-pressed")).toBe("false");
+      expect(host.querySelector('[data-testid="audio-meter-strip"]')).toBeNull();
+      if (!button) throw new Error("audio meter toggle not rendered");
+      act(() => button.click());
+      expect(button.getAttribute("aria-pressed")).toBe("true");
+      expect(host.querySelector('[data-testid="audio-meter-strip"]')).not.toBeNull();
+      expect(readStudioUiPreferences().audioMetersVisible).toBe(true);
+    } finally {
+      act(() => root.unmount());
+      useAudioMetersVisible.setState(useAudioMetersVisible.getInitialState());
+      localStorage.clear();
+    }
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -1,12 +1,5 @@
 import { useEffect, useRef } from "react";
-import {
-  Image,
-  Magnet,
-  MagnifyingGlassMinus,
-  MagnifyingGlassPlus,
-  SpeakerHigh,
-  Waves,
-} from "@phosphor-icons/react";
+import { Image, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 import {
   useEnableKeyframes,
   isPlayheadWithinTween,
@@ -23,6 +16,8 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { AudioMetersIcon } from "./icons/AudioMetersIcon";
+import { RippleEditIcon } from "./icons/RippleEditIcon";
 import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
 import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
@@ -252,7 +247,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               aria-pressed={rippleEditEnabled}
               className={rippleEditEnabled ? flatActive : flatIdle}
             >
-              <Waves size={16} weight="bold" aria-hidden="true" />
+              <RippleEditIcon size={16} />
             </button>
           </Tooltip>
           {projectHasAudio && (
@@ -264,7 +259,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
                 aria-pressed={audioMetersVisible}
                 className={audioMetersVisible ? flatActive : flatIdle}
               >
-                <SpeakerHigh size={16} weight="bold" aria-hidden="true" />
+                <AudioMetersIcon size={16} />
               </button>
             </Tooltip>
           )}

package/src/components/editor/propertyPanelFill.tsx

@@ -1,6 +1,6 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { useMemo, useRef, useState } from "react";
-import { Plus, RotateCcw, X } from "../../icons/SystemIcons";
+import { Plus, X } from "../../icons/SystemIcons";
 import {
   buildDefaultGradientModel,
   insertGradientStop,
@@ -8,6 +8,7 @@ import {
   serializeGradient,
   type GradientModel,
 } from "./gradientValue";
+import { ReverseGradientIcon } from "../icons/ReverseGradientIcon";
 import { IMAGE_EXT } from "../../utils/mediaTypes";
 import { FIELD, LABEL, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import {
@@ -358,7 +359,7 @@ export function GradientField({
             }}
             className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600"
           >
-            <RotateCcw size={12} />
+            <ReverseGradientIcon size={16} />
             Reverse
           </button>
         </div>

package/src/components/icons/AudioMetersIcon.tsx

@@ -0,0 +1,16 @@
+export function AudioMetersIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" />
+    </svg>
+  );
+}

package/src/components/icons/InspectorIcon.tsx

@@ -0,0 +1,18 @@
+export function InspectorIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="2" width="13" height="12" rx="1.5" />
+      <path d="M4 6h8M6 4.5v3M4 10h8m-2-1.5v3" />
+    </svg>
+  );
+}

package/src/components/icons/ReverseGradientIcon.tsx

@@ -0,0 +1,23 @@
+export function ReverseGradientIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 3h12m-2-2 2 2-2 2M14 8H2m2-2L2 8l2 2" />
+      <g fill="currentColor" stroke="none">
+        <path d="M2 12h3v2H2z" opacity="0.25" />
+        <path d="M5 12h3v2H5z" opacity="0.5" />
+        <path d="M8 12h3v2H8z" opacity="0.75" />
+        <path d="M11 12h3v2h-3z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/icons/RippleEditIcon.tsx

@@ -0,0 +1,19 @@
+export function RippleEditIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="8" width="4" height="5" rx="0.5" />
+      <rect x="10.5" y="8" width="4" height="5" rx="0.5" />
+      <path d="M13 4H6m2-2L6 4l2 2" />
+    </svg>
+  );
+}

package/src/components/nle/AudioMeterStrip.test.tsx

@@ -2,12 +2,19 @@
 // fallow-ignore-file code-duplication
 
 import { act } from "react";
+import { MAX_AUDIO_GAIN } from "@hyperframes/core/audio-gain";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { usePlayerStore } from "../../player/store/playerStore";
 import type { TimelineElement } from "../../player/store/timelineElement";
 import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
-import { AudioMeterStrip } from "./AudioMeterStrip";
+import { SILENT_CHANNEL } from "../../utils/audioMeterMath";
+import {
+  AudioMeterStrip,
+  evictGoneMeterState,
+  followMeterHook,
+  stepAndPaintStrips,
+} from "./AudioMeterStrip";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -17,6 +24,51 @@ vi.mock("../../contexts/StudioContext", () => ({
   useStudioShellContext: () => ({ previewIframeRef }),
 }));
 
+const onSetAudioGroupAttributeLive = vi.fn();
+const onSetAudioGroupAttributeQuiet = vi.fn();
+vi.mock("../../contexts/TimelineEditContext", () => ({
+  useTimelineEditContextOptional: () => ({
+    onSetAudioGroupAttributeLive,
+    onSetAudioGroupAttributeQuiet,
+  }),
+}));
+
+function stubTrackRect(): () => void {
+  const original = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function (): DOMRect {
+    return {
+      left: 0,
+      top: 0,
+      right: 8,
+      bottom: 100,
+      width: 8,
+      height: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+  };
+  return () => {
+    Element.prototype.getBoundingClientRect = original;
+  };
+}
+
+function drag(fader: HTMLElement, clientY: number) {
+  const restoreRect = stubTrackRect();
+  const original = Element.prototype.setPointerCapture;
+  Element.prototype.setPointerCapture = vi.fn();
+  try {
+    for (const type of ["pointerdown", "pointermove", "pointerup"]) {
+      act(() =>
+        fader.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, clientY })),
+      );
+    }
+  } finally {
+    Element.prototype.setPointerCapture = original;
+    restoreRect();
+  }
+}
+
 const makeHook = (groups: Record<string, { l: number; r: number }> = {}) => ({
   start: vi.fn(),
   stop: vi.fn(),
@@ -39,8 +91,10 @@ beforeEach(() => {
   frames = [];
   vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => frames.push(cb));
   vi.stubGlobal("cancelAnimationFrame", () => {});
-  usePlayerStore.setState({ elements: [] });
+  usePlayerStore.setState({ elements: [], audioVolume: 1 });
   useAudioMetersVisible.setState({ visible: true });
+  onSetAudioGroupAttributeLive.mockClear();
+  onSetAudioGroupAttributeQuiet.mockClear();
 });
 const roots: Root[] = [];
 afterEach(() => {
@@ -64,7 +118,7 @@ describe("AudioMeterStrip", () => {
     expect(mount().host.querySelector("[data-testid=audio-meter-strip]")).toBeNull();
   });
 
-  it("shows one strip per group plus Master, and hides when toggled off", () => {
+  it("shows one strip per group plus Monitor, and hides when toggled off", () => {
     usePlayerStore.setState({
       elements: [
         clip({ id: "1", audioGroup: "music", audioGroupLabel: "Music" }),
@@ -74,7 +128,8 @@ describe("AudioMeterStrip", () => {
     const { host } = mount();
     expect(host.textContent).toContain("Music");
     expect(host.textContent).toContain("vo");
-    expect(host.textContent).toContain("Master");
+    expect(host.textContent).toContain("Monitor");
+    expect(host.textContent).not.toContain("Master");
     act(() => useAudioMetersVisible.getState().setVisible(false));
     expect(host.querySelector("[data-testid=audio-meter-strip]")).toBeNull();
   });
@@ -84,12 +139,12 @@ describe("AudioMeterStrip", () => {
     const first = makeHook({ vo: { l: 1, r: 1 } });
     setHook(first);
     const { host, root } = mount();
-    const fill = host.querySelector<HTMLElement>("[class*=bg-green-500]")!;
-    expect(fill.style.transform).toBe("scaleY(0)");
+    const mask = host.querySelector<HTMLElement>("[data-testid=meter-mask]")!;
+    expect(mask.style.height).toBe("100%");
     tick();
     tick();
     expect(first.start).toHaveBeenCalledTimes(1);
-    expect(fill.style.transform).toBe("scaleY(1)");
+    expect(mask.style.height).toBe("0%");
     const peak = host.querySelector<HTMLElement>("[data-testid=meter-peak]")!;
     expect(peak.style.bottom).toBe("100%");
     expect(peak.style.transform).toBe("translateY(1px)");
@@ -121,4 +176,220 @@ describe("AudioMeterStrip", () => {
     tick();
     expect(second.read).toHaveBeenCalled();
   });
+
+  it("keeps authored gain 2 above unity and writes exactly 1 at the midpoint", () => {
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo", audioGroupVolume: 2 })] });
+    const { host } = mount();
+    const fader = host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+    expect(Number(fader.getAttribute("aria-valuenow"))).toBeGreaterThan(0);
+    expect(Number(fader.getAttribute("aria-valuenow"))).toBeLessThan(100);
+    expect(fader.getAttribute("aria-valuetext")).toBe("+6.0 dB");
+    expect(parseFloat(fader.querySelector<HTMLElement>("div")!.style.bottom)).toBeGreaterThan(50);
+    drag(fader, 50);
+    expect(onSetAudioGroupAttributeLive).toHaveBeenCalledWith("vo", "data-volume", "1");
+    expect(onSetAudioGroupAttributeQuiet).toHaveBeenCalledExactlyOnceWith(
+      "vo",
+      "data-volume",
+      "1",
+      "Set volume",
+    );
+  });
+
+  it("drags a group to the shared +12 dB ceiling", () => {
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+    const fader = mount().host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+    drag(fader, 0);
+    expect(Number(onSetAudioGroupAttributeQuiet.mock.calls[0]![2])).toBeCloseTo(MAX_AUDIO_GAIN, 6);
+    expect(onSetAudioGroupAttributeLive).toHaveBeenCalledWith("vo", "data-volume", "3.981072");
+  });
+
+  it.each([0.5, 1, 2, 3.98])(
+    "round-trips authored group gain %s through its displayed thumb",
+    (gain) => {
+      usePlayerStore.setState({ elements: [clip({ audioGroup: "vo", audioGroupVolume: gain })] });
+      const fader = mount().host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+      const thumb = fader.firstElementChild as HTMLElement;
+      drag(fader, 100 - parseFloat(thumb.style.bottom));
+      expect(Number(onSetAudioGroupAttributeQuiet.mock.calls[0]![2])).toBeCloseTo(gain, 6);
+    },
+  );
+
+  it("preserves low authored gain instead of rounding it to mute", () => {
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+    const fader = mount().host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+    drag(fader, 85);
+    expect(onSetAudioGroupAttributeQuiet).toHaveBeenCalledExactlyOnceWith(
+      "vo",
+      "data-volume",
+      "0.007943",
+      "Set volume",
+    );
+  });
+
+  it("keeps the Monitor fader within the player store range", () => {
+    usePlayerStore.setState({ elements: [clip({})] });
+    const fader = mount().host.querySelector<HTMLElement>('[aria-label="Monitor volume"]')!;
+    expect(fader.getAttribute("aria-valuemin")).toBe("-100");
+    expect(fader.getAttribute("aria-valuemax")).toBe("0");
+    drag(fader, 100);
+    expect(usePlayerStore.getState().audioVolume).toBe(0);
+    drag(fader, 0);
+    expect(usePlayerStore.getState().audioVolume).toBe(1);
+    act(() => fader.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true })));
+    expect(usePlayerStore.getState().audioVolume).toBe(1);
+    expect(fader.getAttribute("aria-valuetext")).toBe("0.0 dB");
+    expect(onSetAudioGroupAttributeQuiet).not.toHaveBeenCalled();
+  });
+
+  it.each(["pointercancel", "lostpointercapture"])(
+    "finishes %s once and ignores subsequent hovering",
+    (event) => {
+      const restoreRect = stubTrackRect();
+      const original = Element.prototype.setPointerCapture;
+      Element.prototype.setPointerCapture = vi.fn();
+      try {
+        usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+        const fader = mount().host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+        for (const [type, clientY] of [
+          ["pointerdown", 50],
+          [event, 0],
+          ["pointermove", 0],
+          ["pointerup", 0],
+        ] as const) {
+          act(() =>
+            fader.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, clientY })),
+          );
+        }
+        expect(onSetAudioGroupAttributeLive).toHaveBeenCalledExactlyOnceWith(
+          "vo",
+          "data-volume",
+          "1",
+        );
+        expect(onSetAudioGroupAttributeQuiet).toHaveBeenCalledExactlyOnceWith(
+          "vo",
+          "data-volume",
+          "1",
+          "Set volume",
+        );
+      } finally {
+        Element.prototype.setPointerCapture = original;
+        restoreRect();
+      }
+    },
+  );
+
+  it.each([
+    ["Home", "0"],
+    ["End", "3.981072"],
+    ["PageUp", "1.318257"],
+    ["PageDown", "0.251189"],
+  ])("supports the %s slider key", (key, gain) => {
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+    const fader = mount().host.querySelector<HTMLElement>('[aria-label="vo volume"]')!;
+    act(() => fader.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true })));
+    expect(onSetAudioGroupAttributeQuiet).toHaveBeenCalledExactlyOnceWith(
+      "vo",
+      "data-volume",
+      gain,
+      "Set volume",
+    );
+  });
+
+  it("nudges by an equal visual step and exposes the gain readout", () => {
+    usePlayerStore.setState({ elements: [clip({})], audioVolume: 1 });
+    const fader = mount().host.querySelector<HTMLElement>('[aria-label="Monitor volume"]')!;
+    act(() =>
+      fader.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true })),
+    );
+    expect(fader.getAttribute("aria-valuenow")).toBe("-2");
+    expect(fader.getAttribute("aria-valuetext")).toBe("-1.2 dB");
+    act(() => fader.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true })));
+    expect(usePlayerStore.getState().audioVolume).toBeCloseTo(1, 12);
+    expect(fader.getAttribute("aria-valuenow")).toBe("0");
+  });
+});
+
+describe("followMeterHook", () => {
+  it("leaves the same hook attached", () => {
+    const hook = makeHook();
+    expect(followMeterHook(hook, hook)).toBe(hook);
+    expect(hook.stop).not.toHaveBeenCalled();
+    expect(hook.start).not.toHaveBeenCalled();
+  });
+
+  it("stops the old hook and starts the new one", () => {
+    const first = makeHook();
+    const second = makeHook();
+    expect(followMeterHook(first, second)).toBe(second);
+    expect(first.stop).toHaveBeenCalledTimes(1);
+    expect(second.start).toHaveBeenCalledTimes(1);
+  });
+
+  it("still attaches the new hook when stop() throws", () => {
+    const first = makeHook();
+    first.stop.mockImplementation(() => {
+      throw new Error("dead realm");
+    });
+    const second = makeHook();
+    expect(followMeterHook(first, second)).toBe(second);
+    expect(second.start).toHaveBeenCalledTimes(1);
+  });
+
+  it("returns the live hook even when start() throws", () => {
+    const live = makeHook();
+    live.start.mockImplementation(() => {
+      throw new Error("not ready");
+    });
+    expect(followMeterHook(null, live)).toBe(live);
+  });
+});
+
+describe("evictGoneMeterState", () => {
+  it("drops ids that are no longer in the strip list", () => {
+    const rest: [typeof SILENT_CHANNEL, typeof SILENT_CHANNEL] = [SILENT_CHANNEL, SILENT_CHANNEL];
+    const state = new Map<string | null, typeof rest>([
+      ["gone", rest],
+      ["vo", rest],
+      [null, rest],
+    ]);
+    evictGoneMeterState(state, new Set(["vo", null]));
+    expect([...state.keys()]).toEqual(["vo", null]);
+  });
+});
+
+describe("stepAndPaintStrips", () => {
+  it("paints a loud group and skips a silent strip already at rest", () => {
+    const loudMask = document.createElement("div");
+    const restMask = document.createElement("div");
+    restMask.style.height = "50%";
+    const rest: [typeof SILENT_CHANNEL, typeof SILENT_CHANNEL] = [SILENT_CHANNEL, SILENT_CHANNEL];
+    const state = new Map<string | null, typeof rest>([["rest", rest]]);
+    const bars = new Map([
+      [
+        "loud",
+        [
+          { mask: loudMask, peak: null },
+          { mask: null, peak: null },
+        ] as const,
+      ],
+      [
+        "rest",
+        [
+          { mask: restMask, peak: null },
+          { mask: null, peak: null },
+        ] as const,
+      ],
+    ]);
+    stepAndPaintStrips(
+      [{ id: "loud" }, { id: "rest" }],
+      state,
+      bars as never,
+      { master: { l: 0, r: 0 }, groups: { loud: { l: 1, r: 1 } } },
+      0,
+      16,
+    );
+    expect(loudMask.style.height).toBe("0%");
+    expect(restMask.style.height).toBe("50%");
+    expect(state.has("loud")).toBe(true);
+  });
 });