feat(studio): vibrant preset colours, each with its own background

Saturation roughly doubles — the muted 26-46% band was chosen to stay out
of the way, and stayed so far out of it that the titles read as grey text
with a hint of tint. They are 68-92% now, and light enough (58-78%) to
carry on the panel's near-black ground.

Two hues moved rather than brightened. The voice presets sat at hue 155,
which is the accent (#3CE6AC is hue 160) — saturating them there would
have made "Clean Voice" read as automated or playing, which is what that
green means everywhere else in the panel. They are blues now, and a test
keeps every title at least 20° clear of the accent.

**Each preset also gets its own background**, derived from its title hue
rather than picked: nineteen hand-chosen pairs is nineteen chances for
one to clash with its own title, and a hue rotation cannot. Same hue at
22% saturation and 11% lightness, so a rack with several presets reads as
several regions instead of one long list, while staying dark enough that
every control on top of it is unaffected.

The repair family deliberately shares one colour and therefore one
background — they are workshop tools, not characters — so the uniqueness
test covers the character family only.

Verified in a running studio with five presets applied: five distinct
title colours over five matching washes, and the accent still reads as
the only green in the panel.

Falsified: a washed-out colour, a title on the accent's hue, a background
bright enough to fight the controls, and a background hue unhooked from
its title each fail a test.

studio 3730 passing, 18 todo.

Author: vanceingalls

packages/studio/src/components/editor/propertyPanelFxPresetStyle.test.ts

@@ -4,6 +4,7 @@ import { HF_AUDIO_FX_PRESETS } from "@hyperframes/core/audio-fx-presets";
 import {
   FX_PRESET_STYLE,
   FX_PRESET_STYLE_DEFAULT,
+  fxPresetBackground,
   fxPresetStyle,
 } from "./propertyPanelFxPresetStyle.js";
 
@@ -58,21 +59,57 @@ describe("per-preset title treatments", () => {
     }
   });
 
-  it("keeps every colour in one narrow lightness band", () => {
-    // A per-preset colour free-for-all would read as status. These sit where the
-    // family tints do, and the panel already spends saturation on "automated"
-    // and "bypassed".
+  it("keeps every colour vibrant, and light enough to read on the panel", () => {
+    // The rack sits on #0C0C0E. A title has to carry real colour to be worth
+    // having, and still clear contrast against near-black.
     for (const [id, style] of Object.entries(FX_PRESET_STYLE)) {
-      const match = /hsl\(\s*\d+,\s*(\d+)%,\s*(\d+)%\s*\)/.exec(style.color);
+      const match = /hsl\(\s*(\d+),\s*(\d+)%,\s*(\d+)%\s*\)/.exec(style.color);
       expect(match, `${id} is not a plain hsl() colour`).toBeTruthy();
-      const saturation = Number(match?.[1]);
-      const lightness = Number(match?.[2]);
-      expect(saturation, `${id} is too saturated to be type`).toBeLessThanOrEqual(50);
-      expect(lightness, `${id} is too dark to read on the panel`).toBeGreaterThanOrEqual(66);
-      expect(lightness, `${id} is too light to sit beside the others`).toBeLessThanOrEqual(78);
+      const saturation = Number(match?.[1 + 1]);
+      const lightness = Number(match?.[3]);
+      expect(saturation, `${id} is too washed out to read as a colour`).toBeGreaterThanOrEqual(60);
+      expect(lightness, `${id} is too dark against the panel`).toBeGreaterThanOrEqual(58);
+      expect(lightness, `${id} is so light the hue disappears`).toBeLessThanOrEqual(78);
     }
   });
 
+  it("keeps the title hues clear of the accent, which means something else", () => {
+    // The panel spends #3CE6AC (hue 160) on "automated" and "playing". A title
+    // sitting on that hue reads as a status the preset does not have.
+    for (const [id, style] of Object.entries(FX_PRESET_STYLE)) {
+      const hue = Number(/hsl\(\s*(\d+),/.exec(style.color)?.[1]);
+      const distance = Math.min(Math.abs(hue - 160), 360 - Math.abs(hue - 160));
+      expect(distance, `${id} sits on the accent's hue`).toBeGreaterThan(20);
+    }
+  });
+
+  it("backs each preset with its own hue, dark enough to sit under the panel", () => {
+    // Derived from the title rather than picked, so a background cannot drift
+    // away from the title it belongs to.
+    const seen = new Set<string>();
+    for (const [id, style] of Object.entries(FX_PRESET_STYLE)) {
+      const bg = fxPresetBackground(id);
+      expect(bg, `${id} has no background`).toBeTruthy();
+      const titleHue = /hsl\(\s*(\d+),/.exec(style.color)?.[1];
+      expect(bg, `${id}'s background is a different hue from its title`).toContain(
+        `hsl(${titleHue},`,
+      );
+      const lightness = Number(/,\s*(\d+)%\s*\)/.exec(bg ?? "")?.[1]);
+      expect(lightness, `${id}'s background would fight the controls on it`).toBeLessThanOrEqual(
+        16,
+      );
+      seen.add(bg ?? "");
+    }
+    // Presets that share a title colour share a background — the repair family
+    // is deliberately uniform — but the character ones must not.
+    const character = HF_AUDIO_FX_PRESETS.filter((p) => p.family === "character");
+    expect(new Set(character.map((p) => fxPresetBackground(p.id))).size).toBe(character.length);
+  });
+
+  it("has no background for a preset it does not know", () => {
+    expect(fxPresetBackground("not-a-preset")).toBeNull();
+  });
+
   it("falls back rather than failing for a preset it does not know", () => {
     expect(fxPresetStyle("not-a-preset")).toBe(FX_PRESET_STYLE_DEFAULT);
   });

packages/studio/src/components/editor/propertyPanelFxPresetStyle.ts

@@ -60,7 +60,7 @@ const FACE = {
 /** Plain, and what any preset without its own entry gets. */
 export const FX_PRESET_STYLE_DEFAULT: FxPresetStyle = {
   type: "text-[12px] uppercase tracking-wide",
-  color: "hsl(220, 12%, 68%)",
+  color: "hsl(220, 24%, 72%)",
   family: FACE.terminal,
 };
 
@@ -71,115 +71,137 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
   // face, because "no styling at all" is what every other row in the panel has.
   "voice-clean": {
     type: "text-[13px] font-medium tracking-tight",
-    color: "hsl(155, 34%, 70%)",
+    color: "hsl(202, 82%, 66%)",
     family: FACE.geometric,
   },
   "voice-broadcast": {
     type: "text-[13px] font-bold uppercase tracking-[0.14em]",
-    color: "hsl(155, 34%, 74%)",
+    color: "hsl(214, 84%, 70%)",
     family: FACE.editorial,
   },
   "voice-warm": {
     type: "text-[14px] italic tracking-normal",
-    color: "hsl(28, 40%, 74%)",
+    color: "hsl(32, 88%, 66%)",
     family: FACE.bookish,
   },
 
   // --- repair: workshop labels. Fixed, plain, nothing decorative ------------
   "rumble-cut": {
     type: "text-[12px] uppercase tracking-[0.18em]",
-    color: "hsl(205, 28%, 70%)",
+    color: "hsl(196, 78%, 64%)",
     family: FACE.terminal,
   },
   "room-gate": {
     type: "text-[12px] uppercase tracking-[0.18em]",
-    color: "hsl(205, 28%, 70%)",
+    color: "hsl(196, 78%, 64%)",
     family: FACE.terminal,
   },
   "boom-tame": {
     type: "text-[12px] uppercase tracking-[0.18em]",
-    color: "hsl(205, 28%, 70%)",
+    color: "hsl(196, 78%, 64%)",
     family: FACE.terminal,
   },
   "harsh-tame": {
     type: "text-[12px] uppercase tracking-[0.18em]",
-    color: "hsl(205, 28%, 70%)",
+    color: "hsl(196, 78%, 64%)",
     family: FACE.terminal,
   },
 
   // --- character: the costumes. This is where type does the work ------------
   // A phone's band is narrow; so is the tracking, on a face with no warmth.
   telephone: {
     type: "text-[13px] uppercase tracking-[0.3em]",
-    color: "hsl(190, 34%, 70%)",
+    color: "hsl(186, 85%, 62%)",
     family: FACE.terminal,
   },
   // A dial face: high-contrast serif caps, spaced like printed frequencies.
   "radio-am": {
     type: "text-[14px] uppercase tracking-[0.24em]",
-    color: "hsl(38, 40%, 72%)",
+    color: "hsl(42, 92%, 62%)",
     family: FACE.editorial,
   },
   // Shouted through a horn — the heaviest, narrowest thing available, leaning.
   megaphone: {
     type: "text-[17px] font-black italic uppercase tracking-tight",
-    color: "hsl(14, 46%, 70%)",
+    color: "hsl(12, 90%, 64%)",
     family: FACE.condensed,
   },
   // Struck on a machine, played back years later.
   "lofi-tape": {
     type: "text-[13px] tracking-wide",
-    color: "hsl(36, 30%, 68%)",
+    color: "hsl(28, 72%, 62%)",
     family: FACE.typewriter,
   },
   // Bolted to a wall in a station concourse.
   "pa-system": {
     type: "text-[13px] uppercase tracking-[0.26em]",
-    color: "hsl(210, 26%, 72%)",
+    color: "hsl(222, 80%, 70%)",
     family: FACE.engraved,
   },
   // Small, squeezed through a grille, no room for anything but the letters.
   intercom: {
     type: "text-[12px] font-bold uppercase tracking-tighter",
-    color: "hsl(96, 26%, 68%)",
+    color: "hsl(96, 68%, 60%)",
     family: FACE.terminal,
   },
   // The name is a joke and the type is in on it.
   "doofus-worble": {
     type: "text-[16px] tracking-[0.1em]",
-    color: "hsl(286, 38%, 74%)",
+    color: "hsl(288, 85%, 72%)",
     family: FACE.theatrical,
   },
 
   // --- space: rooms. Light and wide, because that is what space looks like ---
   "room-tight": {
     type: "text-[13px] uppercase tracking-[0.2em]",
-    color: "hsl(250, 26%, 72%)",
+    color: "hsl(252, 74%, 72%)",
     family: FACE.geometric,
   },
   "room-natural": {
     type: "text-[13px] uppercase tracking-[0.26em]",
-    color: "hsl(250, 26%, 74%)",
+    color: "hsl(258, 78%, 72%)",
     family: FACE.geometric,
   },
   // The biggest room gets the widest setting — the word itself opens out.
   hall: {
     type: "text-[15px] uppercase tracking-[0.4em]",
-    color: "hsl(250, 28%, 76%)",
+    color: "hsl(246, 84%, 74%)",
     family: FACE.engraved,
   },
   "slap-echo": {
     type: "text-[13px] uppercase tracking-[0.28em]",
-    color: "hsl(268, 30%, 72%)",
+    color: "hsl(274, 76%, 70%)",
     family: FACE.geometric,
   },
   "dub-throw": {
     type: "text-[14px] italic tracking-[0.3em]",
-    color: "hsl(268, 34%, 74%)",
+    color: "hsl(312, 78%, 70%)",
     family: FACE.editorial,
   },
 };
 
 export function fxPresetStyle(presetId: string): FxPresetStyle {
   return FX_PRESET_STYLE[presetId] ?? FX_PRESET_STYLE_DEFAULT;
 }
+
+/**
+ * The wash behind a preset's bracket, derived from its title colour.
+ *
+ * Derived rather than picked: nineteen hand-chosen pairs is nineteen chances
+ * for one to clash with its own title, and a hue rotation cannot. Same hue,
+ * saturation pulled right down and lightness taken to near-black, so the panel
+ * reads as tinted rather than coloured — the rack sits on `#0C0C0E` and
+ * anything with real lightness here would fight every control on top of it.
+ *
+ * Returns a CSS colour, or null when the preset has no character of its own.
+ */
+export function fxPresetBackground(presetId: string): string | null {
+  const style = FX_PRESET_STYLE[presetId];
+  if (!style) return null;
+  const hsl = /hsl\(\s*(\d+),\s*(\d+)%,\s*(\d+)%\s*\)/.exec(style.color);
+  if (!hsl) return null;
+  const hue = hsl[1];
+  // 22% saturation at 11% lightness: present enough to tell two brackets apart
+  // at a glance, dark enough that white body text still clears WCAG AA on it.
+  return `hsl(${hue}, 22%, 11%)`;
+}

packages/studio/src/components/editor/propertyPanelFxSection.tsx

@@ -35,7 +35,7 @@ import {
   type HfAudioFxJob,
 } from "@hyperframes/core/audio-fx-jobs";
 import { FxParamRow } from "./propertyPanelFxControls.js";
-import { fxPresetStyle } from "./propertyPanelFxPresetStyle.js";
+import { fxPresetBackground, fxPresetStyle } from "./propertyPanelFxPresetStyle.js";
 import { FxPresetMenu } from "./propertyPanelFxPresetMenu.js";
 import { FxEqModule } from "./propertyPanelFxEqModule.js";
 import { FxCarveModule, type AudioTrackOption } from "./propertyPanelFxCarveModule.js";
@@ -649,15 +649,21 @@ export function FxSection({
             const runKey = `${run.preset}-${run.items[0]?.i ?? 0}`;
             const collapsed = collapsedRuns.has(runKey);
             const style = fxPresetStyle(run.preset ?? "");
+            const background = fxPresetBackground(run.preset ?? "");
             return (
               <div
                 key={`preset-${run.preset}-${run.items[0]?.i}`}
                 className="hf-fx-preset-run space-y-1 rounded-[4px] border border-l-2 border-dashed border-panel-border-input p-1"
                 data-fx-preset={run.preset}
                 data-collapsed={collapsed ? "" : undefined}
                 // The bracket's edge carries the preset's own colour, the way a
-                // module's carries its family's.
-                style={{ borderLeftColor: style.color }}
+                // module's carries its family's — and the wash behind it is the
+                // same hue taken to near-black, so a rack with three presets in
+                // it reads as three regions rather than one long list.
+                style={{
+                  borderLeftColor: style.color,
+                  ...(background ? { backgroundColor: background } : {}),
+                }}
               >
                 <div className="hf-fx-preset-run-head flex min-h-6 items-center gap-1 px-0.5">
                   <button