@hyperframes/studio 0.7.107 → 0.7.109

package/src/components/editor/propertyPanelFxControls.test.tsx

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FxParamRow } from "./propertyPanelFxControls";
+import type { HfAudioFxNumberParam } from "@hyperframes/core/audio-fx";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/** A frequency knob: wide range, so a clamp to the minimum is unmistakable. */
+const FREQUENCY: HfAudioFxNumberParam = {
+  kind: "number",
+  key: "frequency",
+  label: "Frequency",
+  min: 20,
+  max: 20000,
+  step: 1,
+  default: 1000,
+  unit: "Hz",
+};
+
+/** React tracks its own value on the node, so a plain assignment is ignored. */
+function setInputValue(input: HTMLInputElement, text: string): void {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  setter?.call(input, text);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function mount(value: number) {
+  const onChange = vi.fn();
+  const onCommit = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  let root!: Root;
+  act(() => {
+    root = createRoot(host);
+    root.render(
+      <FxParamRow param={FREQUENCY} value={value} onChange={onChange} onCommit={onCommit} />,
+    );
+  });
+  const number = () => host.querySelector<HTMLInputElement>(".hf-fx-number")!;
+  const slider = () => host.querySelector<HTMLInputElement>(".hf-fx-slider")!;
+  const type = (text: string) => {
+    act(() => {
+      number().focus();
+      setInputValue(number(), text);
+    });
+  };
+  /** A new value arrives through the prop — a carve, or an undo. */
+  const receive = (next: number) => {
+    act(() => {
+      root.render(
+        <FxParamRow param={FREQUENCY} value={next} onChange={onChange} onCommit={onCommit} />,
+      );
+    });
+  };
+  return { host, number, slider, onChange, onCommit, type, receive };
+}
+
+describe("FxParamRow number field", () => {
+  it("shows what is being typed instead of snapping back to the stored value", () => {
+    // Every keystroke is clamped and written live, and the live write does not
+    // refresh the prop — so a field bound to the committed value put the old
+    // number straight back. Typing 5000 wrote 20 on the first keystroke and the
+    // knob could not be typed into at all, only dragged.
+    const { number, type } = mount(1000);
+    type("5");
+    expect(number().value).toBe("5");
+    type("5000");
+    expect(number().value).toBe("5000");
+  });
+
+  it("does not write the parameter minimum while the field is empty", () => {
+    // `Number("") === 0` passes Number.isFinite, so select-all + Delete before
+    // retyping used to clamp to the minimum and live-write it — 20 Hz here.
+    const { onChange, type } = mount(1000);
+    type("");
+    expect(onChange).not.toHaveBeenCalled();
+    type("800");
+    expect(onChange).toHaveBeenLastCalledWith("frequency", 800);
+  });
+});
+
+describe("FxParamRow commit", () => {
+  it("stays quiet when a gesture changed nothing", () => {
+    // commit() hangs off pointerup, keyup and blur, all reachable without an
+    // edit. Firing then costs a source patch, a selection resync, a preview
+    // reload and an audio restart for a gesture that moved nothing.
+    const { slider, number, onCommit } = mount(1000);
+    act(() => slider().dispatchEvent(new Event("pointerup", { bubbles: true })));
+    act(() => number().dispatchEvent(new Event("blur", { bubbles: true })));
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("does not re-persist a stale value over a change that arrived meanwhile", () => {
+    // The scenario: open an EQ row, run the carve (or press undo), which
+    // rewrites the chain so this row's value becomes 400. Then click the slider
+    // thumb and release without moving it. `latest` was seeded at mount and only
+    // written by an edit, so it still held 1000 — and the release wrote it back,
+    // undoing the carve with no gesture that looks like an edit.
+    const { slider, onCommit, type, receive } = mount(1000);
+    // An edit happened earlier in this row's life, so `latest` holds 1000.
+    type("1000");
+    act(() => slider().dispatchEvent(new Event("pointerup", { bubbles: true })));
+    onCommit.mockClear();
+
+    receive(400);
+    act(() => slider().dispatchEvent(new Event("pointerup", { bubbles: true })));
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/propertyPanelFxControls.tsx

@@ -0,0 +1,356 @@
+/**
+ * Controls for one effect, generated from its registry entry.
+ *
+ * Nothing here knows what a compressor is. The registry declares each
+ * parameter's range, step, unit and scale, and this renders whatever it finds —
+ * so adding an effect or a knob upstream needs no change in the panel, and the
+ * panel cannot offer a value the renderer would reject.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Tooltip } from "../ui/Tooltip";
+import type {
+  HfAudioFxDef,
+  HfAudioFxNumberParam,
+  HfAudioFxParam,
+  HfAudioFxParamValues,
+} from "@hyperframes/core/audio-fx";
+
+/**
+ * Frequency and time controls span three or four decades, so a linear slider
+ * spends most of its travel somewhere useless. Those declare `scale: "log"` and
+ * the slider position maps exponentially instead.
+ */
+function toSlider(p: HfAudioFxNumberParam, value: number): number {
+  if (p.scale !== "log" || p.min <= 0) return value;
+  const t = (Math.log(value) - Math.log(p.min)) / (Math.log(p.max) - Math.log(p.min));
+  return p.min + t * (p.max - p.min);
+}
+
+function fromSlider(p: HfAudioFxNumberParam, position: number): number {
+  if (p.scale !== "log" || p.min <= 0) return position;
+  const t = (position - p.min) / (p.max - p.min);
+  return Math.exp(Math.log(p.min) + t * (Math.log(p.max) - Math.log(p.min)));
+}
+
+/** Enough precision to be honest without showing float noise. */
+function display(p: HfAudioFxNumberParam, value: number): string {
+  const decimals = p.step >= 1 ? 0 : p.step >= 0.1 ? 1 : 2;
+  return value.toFixed(decimals);
+}
+
+interface ParamRowProps {
+  param: HfAudioFxParam;
+  value: number | string;
+  /**
+   * The envelope's value at the playhead, when a lane drives this parameter and
+   * the playhead is over the clip. Shown in place of `value`, which by then is
+   * only the seed the lane replaced.
+   */
+  liveValue?: number;
+  /** Fires continuously while dragging — cheap, not persisted. */
+  onChange(key: string, value: number | string): void;
+  /** Fires once when the gesture ends — this is the write that persists. */
+  onCommit?(key: string, value: number | string): void;
+  disabled?: boolean;
+  /**
+   * A lane in the timeline drives this parameter. The control is disabled
+   * because a value typed here would be overwritten by the envelope on the next
+   * tick — the lane is the value now.
+   */
+  automated?: boolean;
+  /** Add a lane for this parameter, seeded at its current value. */
+  onAutomate?(key: string): void;
+  /** Delete this parameter's lane, handing the value back to the control. */
+  onRemoveAutomation?(key: string): void;
+}
+
+/**
+ * The automation toggle for one parameter: adds a lane, or deletes the one that
+ * already owns the value. Absent for parameters no envelope can drive — a
+ * WaveShaper curve, a convolution impulse, or a worklet's options.
+ */
+export function AutomationToggle({
+  paramKey,
+  label,
+  automated,
+  onAutomate,
+  onRemoveAutomation,
+}: {
+  paramKey: string;
+  label: string;
+  automated: boolean;
+  onAutomate?(key: string): void;
+  onRemoveAutomation?(key: string): void;
+}) {
+  if (!onAutomate && !onRemoveAutomation) return null;
+  return (
+    <Tooltip label={automated ? "Automated" : "Automate"}>
+      <button
+        type="button"
+        className={`hf-fx-automate w-[16px] flex-shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
+          automated
+            ? "border-panel-accent text-panel-accent"
+            : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"
+        }`}
+        aria-pressed={automated}
+        aria-label={automated ? `Remove ${label} automation` : `Automate ${label}`}
+        onClick={() => (automated ? onRemoveAutomation?.(paramKey) : onAutomate?.(paramKey))}
+      >
+        A
+      </button>
+    </Tooltip>
+  );
+}
+
+export function FxParamRow({
+  param,
+  value,
+  liveValue,
+  onChange,
+  onCommit,
+  disabled,
+  automated,
+  onAutomate,
+  onRemoveAutomation,
+}: ParamRowProps) {
+  // While dragging, the slider is driven locally. Waiting for the value to come
+  // back through the element attribute makes the control feel laggy and fights
+  // the pointer.
+  const [dragging, setDragging] = useState(false);
+  const [local, setLocal] = useState(value);
+  const latest = useRef(value);
+  /**
+   * What the gesture last asked for, held until the world agrees.
+   *
+   * Releasing ends the drag, but the value only comes back after the attribute is
+   * written and the selection resynced — and for a carve, after the analysis it
+   * kicks off. In that gap the prop still holds the pre-drag number, so dropping
+   * straight back to it made the control snap to where it started and then jump to
+   * where it was dropped. Keeping the gesture's own number until a NEW one arrives
+   * is honest either way: it is what the audio is already doing, since the live
+   * write applied on the way down.
+   */
+  const [pending, setPending] = useState<number | null>(null);
+  /**
+   * What the number field is showing while it has focus.
+   *
+   * The field cannot be bound to the committed value: every keystroke is
+   * clamped into range and written live, and the live write does not refresh
+   * the prop — so React put the old number straight back and typing `5000` into
+   * a 20..20000 knob wrote 20 on the first keystroke and never got further. Held
+   * as TEXT, so a half-typed "-" or "" is a state the field can be in rather
+   * than a number to clamp and persist.
+   */
+  const [typing, setTyping] = useState<string | null>(null);
+  /**
+   * Did this gesture actually change anything?
+   *
+   * `commit()` hangs off pointerup, keyup and blur, all of which fire without
+   * an edit — clicking a slider thumb without moving it, or tabbing through the
+   * field. Committing then re-persisted whatever `latest` happened to hold and
+   * silently reverted any change that had arrived meanwhile.
+   */
+  const edited = useRef(false);
+  useEffect(() => {
+    if (!dragging) setLocal(value);
+  }, [value, dragging]);
+  // Any inbound value is newer information than the gesture's guess — including a
+  // value that came back different from what was asked for, or an undo.
+  useEffect(() => {
+    setPending(null);
+  }, [value]);
+
+  const handleNumber = useCallback(
+    (raw: number) => {
+      const p = param as HfAudioFxNumberParam;
+      const next = Math.min(p.max, Math.max(p.min, raw));
+      latest.current = next;
+      edited.current = true;
+      setLocal(next);
+      onChange(param.key, next);
+    },
+    [param, onChange],
+  );
+
+  const commit = useCallback(() => {
+    setDragging(false);
+    // Nothing was edited, so there is nothing to persist. Without this a bare
+    // focus/blur — or a click on the slider thumb that never moved — fired a
+    // full persisting write: source patch, selection resync, preview reload and
+    // an audio restart, for a gesture that changed no value.
+    if (!edited.current) return;
+    edited.current = false;
+    if (typeof latest.current === "number") setPending(latest.current);
+    onCommit?.(param.key, latest.current);
+  }, [onCommit, param.key]);
+
+  if (param.kind === "enum") {
+    return (
+      <label className="hf-fx-row flex min-h-6 items-center gap-2" title={param.hint}>
+        <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-2">
+          {param.label}
+        </span>
+        <select
+          className="hf-fx-select min-w-0 flex-1 rounded-[3px] bg-panel-surface px-1 py-0.5 font-mono text-[10px] text-panel-text-0"
+          value={String(value)}
+          disabled={disabled}
+          onChange={(e) => {
+            // A select has no drag; the change is already the commit.
+            onChange(param.key, e.target.value);
+            onCommit?.(param.key, e.target.value);
+          }}
+        >
+          {param.options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+
+  // An envelope's value at the playhead outranks the one stored in the chain,
+  // because it is the one the audio is using — the stored number is only the seed
+  // the lane replaced. Safe against the pointer: an automated control is locked
+  // (see `locked` below), so there is no drag for this to fight.
+  const shown = dragging ? local : (liveValue ?? pending ?? value);
+  const numeric = typeof shown === "number" ? shown : Number(shown);
+  const current = Number.isFinite(numeric) ? numeric : param.default;
+
+  const locked = Boolean(disabled) || Boolean(automated);
+
+  return (
+    <label
+      className={`hf-fx-row flex min-h-6 items-center gap-2${automated ? " hf-fx-row-automated" : ""}`}
+      title={param.hint}
+      data-automated={automated ? "" : undefined}
+    >
+      <span
+        className={`hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] ${
+          automated ? "text-panel-accent" : "text-panel-text-2"
+        }`}
+      >
+        {param.label}
+      </span>
+      <input
+        className="hf-fx-slider h-1 min-w-0 flex-1 accent-panel-accent"
+        type="range"
+        min={param.min}
+        max={param.max}
+        step={(param.max - param.min) / 1000}
+        value={toSlider(param, current)}
+        disabled={locked}
+        aria-label={param.label}
+        onPointerDown={() => setDragging(true)}
+        onChange={(e) => handleNumber(fromSlider(param, Number(e.target.value)))}
+        onPointerUp={commit}
+        onKeyUp={commit}
+        onBlur={commit}
+      />
+      <input
+        className="hf-fx-number w-[54px] flex-shrink-0 rounded-[3px] bg-panel-surface px-1 py-0.5 text-right font-mono text-[10px] text-panel-text-0"
+        type="number"
+        min={param.min}
+        max={param.max}
+        step={param.step}
+        value={typing ?? display(param, current)}
+        disabled={locked}
+        onFocus={() => setTyping(display(param, current))}
+        onChange={(e) => {
+          const text = e.target.value;
+          setTyping(text);
+          // An empty field, a lone "-", or a trailing "." are all states on the
+          // way to a number, not numbers. `Number("")` is 0, which passes
+          // Number.isFinite — so clearing the field to retype used to clamp to
+          // the parameter MINIMUM and write it live: 20 Hz on a cutoff, -40 dB
+          // on a gain.
+          if (text.trim() === "") return;
+          const next = Number(text);
+          if (Number.isFinite(next)) handleNumber(next);
+        }}
+        onBlur={() => {
+          commit();
+          setTyping(null);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") commit();
+        }}
+      />
+      {param.unit ? (
+        <span className="hf-fx-unit w-[22px] flex-shrink-0 font-mono text-[9px] text-panel-text-2">
+          {param.unit}
+        </span>
+      ) : null}
+      <AutomationToggle
+        paramKey={param.key}
+        label={param.label}
+        automated={Boolean(automated)}
+        onAutomate={onAutomate}
+        onRemoveAutomation={onRemoveAutomation}
+      />
+    </label>
+  );
+}
+
+interface FxParamsProps {
+  def: HfAudioFxDef;
+  params: HfAudioFxParamValues;
+  /** What automated knobs are worth at the playhead, by parameter key. */
+  liveValues?: ReadonlyMap<string, number>;
+  onChange(params: HfAudioFxParamValues): void;
+  onCommit?(params: HfAudioFxParamValues): void;
+  disabled?: boolean;
+  /** Parameter keys this effect currently has a lane for. */
+  automatedKeys?: ReadonlySet<string>;
+  /** Absent when the effect cannot be automated at all, or nothing can write. */
+  onAutomate?(key: string): void;
+  onRemoveAutomation?(key: string): void;
+}
+
+/** Every knob the effect declares, in registry order. */
+export function FxParams({
+  def,
+  params,
+  liveValues,
+  onChange,
+  onCommit,
+  disabled,
+  automatedKeys,
+  onAutomate,
+  onRemoveAutomation,
+}: FxParamsProps) {
+  const set = useCallback(
+    (key: string, value: number | string) => onChange({ ...params, [key]: value }),
+    [params, onChange],
+  );
+  const commit = useCallback(
+    (key: string, value: number | string) => onCommit?.({ ...params, [key]: value }),
+    [params, onCommit],
+  );
+  return (
+    <div className="hf-fx-params space-y-0.5 border-t border-panel-border-input px-1.5 py-1.5">
+      {def.params.map((p) => {
+        // Only a parameter the registry marks automatable has an AudioParam
+        // behind it for an envelope to write to.
+        const canAutomate = p.kind === "number" && p.automatable === true;
+        const automated = automatedKeys?.has(p.key) ?? false;
+        return (
+          <FxParamRow
+            key={p.key}
+            param={p}
+            value={params[p.key] ?? p.default}
+            liveValue={liveValues?.get(p.key)}
+            onChange={set}
+            onCommit={commit}
+            disabled={disabled}
+            automated={automated}
+            onAutomate={canAutomate && !automated ? onAutomate : undefined}
+            onRemoveAutomation={canAutomate && automated ? onRemoveAutomation : undefined}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/editor/propertyPanelFxEqModule.tsx

@@ -0,0 +1,196 @@
+/**
+ * The Tone module: a multi-band EQ as one control surface over several nodes.
+ *
+ * Faders rather than the rack's usual horizontal sliders, because a row of them
+ * around a centre detent is what an equaliser looks like to everybody who has
+ * met one. Recognising the control is most of the value — an author who has
+ * never opened a mixer has still used bass, middle and treble.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  audioEqSummary,
+  HF_AUDIO_EQ_RANGE_DB,
+  type HfAudioEqBand,
+} from "@hyperframes/core/audio-fx-eq";
+import { FX_FAMILY_TYPE, fxFamilyTint } from "./propertyPanelFxFamily.js";
+
+export interface FxEqModuleProps {
+  eqId: string;
+  bands: HfAudioEqBand[];
+  open: boolean;
+  disabled?: boolean;
+  onToggleOpen(): void;
+  /** Dragging: heard immediately, not persisted. */
+  onPreview(bandName: string, gain: number): void;
+  /** Release: the write that persists. */
+  onCommit(bandName: string, gain: number): void;
+  onRemove(): void;
+}
+
+/** Fader travel as a percentage from the top, with 0 dB at the centre. */
+function offsetFor(gain: number): number {
+  const clamped = Math.max(-HF_AUDIO_EQ_RANGE_DB, Math.min(HF_AUDIO_EQ_RANGE_DB, gain));
+  return 50 - (clamped / (HF_AUDIO_EQ_RANGE_DB * 2)) * 100;
+}
+
+const shown = (gain: number): string => {
+  const v = Number(gain.toFixed(1));
+  return v > 0 ? `+${v}` : String(v);
+};
+
+function Fader({
+  band,
+  disabled,
+  onPreview,
+  onCommit,
+}: {
+  band: HfAudioEqBand;
+  disabled?: boolean;
+  onPreview(gain: number): void;
+  onCommit(gain: number): void;
+}) {
+  /**
+   * Held locally for the length of the gesture.
+   *
+   * The module is driven by the chain, and dragging only PREVIEWS — it does
+   * not write — so a purely controlled input re-renders back to the old value
+   * on the first move and the fader snaps out from under the pointer. Same
+   * split the rack's other controls already make.
+   */
+  const [local, setLocal] = useState(band.gain);
+  const [dragging, setDragging] = useState(false);
+  useEffect(() => {
+    if (!dragging) setLocal(band.gain);
+  }, [band.gain, dragging]);
+
+  const value = dragging ? local : band.gain;
+  const pct = offsetFor(value);
+  const moved = Math.abs(value) >= 0.05;
+
+  const move = (next: number) => {
+    setDragging(true);
+    setLocal(next);
+    onPreview(next);
+  };
+  const settle = () => {
+    if (!dragging) return;
+    setDragging(false);
+    onCommit(local);
+  };
+
+  // A range input rotated into a fader: it keeps keyboard control, focus and
+  // the platform's own pointer handling, which a div with pointer events would
+  // all have to reimplement badly.
+  return (
+    <div className="hf-fx-eq-band flex min-w-0 flex-1 flex-col items-center gap-1">
+      <div className="relative h-[74px] w-full">
+        <span className="pointer-events-none absolute inset-x-0 top-1/2 h-px bg-panel-border-input" />
+        <span
+          className="pointer-events-none absolute left-1/2 w-[3px] -translate-x-1/2 rounded-sm bg-panel-accent"
+          style={
+            // `value`, not `band.gain`: mid-drag across zero the fill would
+            // otherwise keep pointing the way it started.
+            value >= 0 ? { top: `${pct}%`, bottom: "50%" } : { top: "50%", bottom: `${100 - pct}%` }
+          }
+        />
+        <input
+          className="hf-fx-eq-fader absolute left-1/2 h-[19px] w-[74px] -translate-x-1/2 -translate-y-1/2 rotate-[-90deg] cursor-ns-resize appearance-none bg-transparent"
+          style={{ top: "50%" }}
+          type="range"
+          min={-HF_AUDIO_EQ_RANGE_DB}
+          max={HF_AUDIO_EQ_RANGE_DB}
+          step={0.5}
+          value={value}
+          disabled={disabled}
+          aria-label={`${band.name} ${shown(value)} dB`}
+          onChange={(e) => move(Number(e.target.value))}
+          onPointerUp={settle}
+          onKeyUp={settle}
+          onBlur={settle}
+        />
+      </div>
+      <span className="hf-fx-eq-name w-full truncate text-center font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
+        {band.name}
+      </span>
+      <span
+        className={`hf-fx-eq-value font-mono text-[9px] tabular-nums ${
+          moved ? "text-panel-accent" : "text-panel-text-2"
+        }`}
+      >
+        {moved ? shown(value) : "0"}
+      </span>
+    </div>
+  );
+}
+
+export function FxEqModule({
+  bands,
+  open,
+  disabled,
+  onToggleOpen,
+  onPreview,
+  onCommit,
+  onRemove,
+}: FxEqModuleProps) {
+  const preview = useCallback((name: string, gain: number) => onPreview(name, gain), [onPreview]);
+  const commit = useCallback((name: string, gain: number) => onCommit(name, gain), [onCommit]);
+
+  return (
+    <div
+      className="hf-fx-node hf-fx-eq-module rounded-[4px] border border-l-2 border-panel-border-input"
+      data-fx-node="eq"
+      data-fx-family="smart"
+      // Smart, with the carve and the leveller: three bands the author sets by
+      // ear on a control surface, not three filters they configured.
+      style={{ borderLeftColor: fxFamilyTint({ type: "eq", fromEq: "eq" }) }}
+    >
+      <div className="hf-fx-node-head flex items-center gap-1.5 px-1.5 py-1">
+        <button
+          type="button"
+          className={`hf-fx-node-name flex-1 text-left text-[11px] text-panel-text-0 ${FX_FAMILY_TYPE.smart}`}
+          aria-expanded={open}
+          onClick={onToggleOpen}
+        >
+          Tone
+        </button>
+        <span className="font-mono text-[9px] text-panel-text-2">{bands.length}-band</span>
+        <button
+          type="button"
+          className="hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-panel-danger"
+          aria-label="Remove Tone"
+          disabled={disabled}
+          onClick={onRemove}
+        >
+          ×
+        </button>
+      </div>
+
+      {open ? (
+        <div className="hf-fx-eq-body px-2 pb-2">
+          <div className="flex gap-1.5">
+            {bands.map((band) => (
+              <Fader
+                key={band.name}
+                band={band}
+                disabled={disabled}
+                onPreview={(g) => preview(band.name, g)}
+                onCommit={(g) => commit(band.name, g)}
+              />
+            ))}
+          </div>
+          <div className="mt-1.5 flex justify-between font-mono text-[8px] tracking-wide text-panel-text-2">
+            <span>CUT</span>
+            <span>BOOST</span>
+          </div>
+        </div>
+      ) : (
+        // Closed, it reads like every other module: a sentence about the sound
+        // rather than a list of values.
+        <p className="hf-fx-eq-summary px-2 pb-1.5 text-[11px] text-panel-text-2">
+          {audioEqSummary(bands)}
+        </p>
+      )}
+    </div>
+  );
+}