feat(studio): title the carve, hide voice presets off voice tracks, fix panel contrast

Three things, all found by opening the rack and looking at it.

**The carve gets a title treatment.** Presets got one because each is a
character; the carve gets one because it is the only module in the rack
that LISTENS to another track, and a plain 11px row understated that. It
keeps the smart family's monospace — what it shows is a readout, and a
display face would promise settings the author chose — but takes the
family tint as its colour and the same near-black wash the presets use.

The wash derivation moved out of `fxPresetBackground` into `fxTintWash`,
which takes a colour rather than a preset id, because the smart modules
have no catalogue entry to look up.

That surfaced a real bug: the pattern only matched integer HSL, and
`fxFamilyTint` COMPUTES its lightness, so it emits `62.0%`. The carve
rendered with no wash at all. Caught in the browser, not by a test —
there wasn't one. There is now, and it fails against the old pattern.

**Voice presets no longer show on a music bed.** `classifyAudioName` was
already deciding which tracks a carve may listen to; the same reading now
tells the shelf what the selected track is. Only a confident "music" or
"sfx" hides anything — "unknown" keeps everything, on the principle the
source picker follows: a name is a hint, and hiding what somebody came
for costs more than one shelf to scroll past. Verified both directions in
the studio: #vo shows 4 families / 19 presets, #bgm shows 3 / 16.

**Contrast.** Every small label in the rack used `panel-text-4`
(#52525B), which measures 2.29:1 on the panel — WCAG AA wants 4.5 for
text this size. 23 failing nodes. Moved the FX modules to
`panel-text-2` (#A1A1AA, 6.9:1); left the token alone, since it is
studio-wide across 35 files and redefining it is a different change.
Re-measured across the shelf, the collapsed rack, the expanded module
bodies and a populated carve: 0 failures.

Author: vanceingalls

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

@@ -895,6 +895,10 @@ export function AudioFxGroup({
       onCarveChange={(next) => void setCarve(next)}
       onCarvePreview={(next) => onSetAttributeLive(HF_AUDIO_CARVE_ATTR, JSON.stringify(next))}
       sourceOptions={sourceOptions}
+      // What this track sounds like, by the same reading that decides which
+      // OTHER tracks a carve may listen to. The shelf uses it to stop offering
+      // "My voice sounds amateur" on a music bed.
+      trackKind={classifyAudioName(element.id, element.element?.getAttribute("src"))}
       onLevel={() => void runLeveller()}
       onRemoveLevel={removeLeveller}
       levelled={chain.nodes.some((n) => n.fromLeveller)}

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

@@ -64,7 +64,7 @@ export function FxBandRuler({ band, at }: FxBandRulerProps) {
           );
         })}
       </div>
-      <p className="hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-4">
+      <p className="hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-2">
         <span className="hf-fx-ruler-name text-panel-text-1">{here.name}</span> — {here.says}
       </p>
     </div>

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

@@ -18,6 +18,7 @@ import { DEFAULT_CARVE, type HfCarveSettings } from "@hyperframes/core/audio-car
 import { fxAutomationTarget } from "@hyperframes/core/audio-automation";
 import { FxParamRow } from "./propertyPanelFxControls.js";
 import { FX_FAMILY_TYPE, fxFamilyTint } from "./propertyPanelFxFamily.js";
+import { fxTintWash } from "./propertyPanelFxPresetStyle.js";
 // Shared with the timeline's lane labels: a band is named by its frequency in
 // both places, and two formatters would drift.
 import { formatHz } from "../../player/components/automationLaneData";
@@ -96,11 +97,11 @@ function FxCarveMember({
           return (
             <span
               key={param.key}
-              className="flex items-baseline gap-1 font-mono text-[9px] text-panel-text-4"
+              className="flex items-baseline gap-1 font-mono text-[9px] text-panel-text-2"
               {...(automated ? { "data-automated": "" } : {})}
               {...(driven ? { "data-automation-live": "" } : {})}
             >
-              <span className="text-panel-text-4">{param.label}</span>
+              <span className="text-panel-text-2">{param.label}</span>
               <span
                 className="tabular-nums text-panel-text-1"
                 style={{ minWidth: `${paramValueWidthCh(param)}ch` }}
@@ -200,6 +201,14 @@ export function FxCarveModule({
         : carve.sources.length > 0
           ? "no analysis yet"
           : "pick a voice";
+  // The carve's own colour, used three ways: the module's left edge, the title,
+  // and the wash behind it. A preset gets a title treatment because it is a
+  // character; the carve gets one because it is the only module in the rack
+  // that LISTENS to another track, and a plain row understates that. It stays
+  // in the smart family's monospace — what it shows is a readout, and a
+  // display face would promise settings the author chose.
+  const tint = fxFamilyTint({ type: "carve", fromCarve: true });
+  const wash = fxTintWash(tint);
   return (
     <div
       className={`hf-fx-node hf-fx-carve-module hf-fx-carve rounded-[4px] border border-l-2 border-panel-border-input${
@@ -210,27 +219,31 @@ export function FxCarveModule({
       // Smart, like the Tone EQ and the leveller: it measures the audio and
       // writes its own settings, and what it shows is a readout of what it
       // decided rather than controls the author set.
-      style={{ borderLeftColor: fxFamilyTint({ type: "carve", fromCarve: true }) }}
+      style={{ borderLeftColor: tint, ...(wash ? { backgroundColor: wash } : {}) }}
       data-carve-enabled={on ? "" : undefined}
     >
       <div className="hf-fx-node-head flex min-h-7 items-center gap-1 px-1.5">
         <button
           type="button"
-          className={`hf-fx-node-name min-w-0 flex-1 truncate text-left text-[11px] text-panel-text-1 hover:text-panel-text-0 ${FX_FAMILY_TYPE.smart}`}
+          className={`hf-fx-node-name min-w-0 flex-1 truncate text-left text-[13px] uppercase hover:opacity-80 ${FX_FAMILY_TYPE.smart}`}
+          // Tracking goes here rather than in a class: the smart family already
+          // sets `tracking-normal`, and two Tailwind tracking utilities on one
+          // element resolve by stylesheet order, not by the order written.
+          style={{ color: tint, letterSpacing: "0.16em" }}
           aria-expanded={open}
           onClick={onToggleOpen}
         >
           Voiceover carve
         </button>
-        <span className="hf-fx-carve-summary shrink-0 font-mono text-[9px] text-panel-text-4">
+        <span className="hf-fx-carve-summary shrink-0 font-mono text-[9px] text-panel-text-2">
           {summary}
         </span>
         {/* One switch, not a bypass and a delete. Off drops the effects and the
             envelopes it wrote, and is remembered — otherwise the default would
             re-apply the carve the next time this clip was selected. */}
         <button
           type="button"
-          className="hf-fx-bypass hf-fx-carve-toggle rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
+          className="hf-fx-bypass hf-fx-carve-toggle rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
           aria-pressed={on}
           title={on ? "Switch the carve off" : "Switch the carve on"}
           disabled={disabled}
@@ -243,7 +256,7 @@ export function FxCarveModule({
         <div className="hf-fx-carve-body border-t border-panel-border-input">
           <div className="hf-fx-carve-controls space-y-0.5 px-1.5 py-1.5">
             <div className="hf-fx-row flex min-h-6 items-center gap-2">
-              <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-4">
+              <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-2">
                 Listen to
               </span>
               {soleVoice ? (
@@ -318,7 +331,7 @@ export function FxCarveModule({
               settings that are in force when they are already history, and the one
               honest thing to say is that the work is happening. */}
           {analysing ? (
-            <p className="hf-fx-carve-working flex items-center justify-center gap-1.5 border-t border-panel-border-input py-2 text-[10px] text-panel-text-4">
+            <p className="hf-fx-carve-working flex items-center justify-center gap-1.5 border-t border-panel-border-input py-2 text-[10px] text-panel-text-2">
               <svg
                 className="hf-fx-carve-spinner h-3 w-3 animate-spin motion-reduce:animate-none"
                 viewBox="0 0 24 24"
@@ -343,7 +356,7 @@ export function FxCarveModule({
             </p>
           ) : nodes.length > 0 ? (
             <div className="hf-fx-carve-members divide-y divide-panel-border-input/60 border-t border-panel-border-input">
-              <div className="hf-fx-carve-members-label px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
+              <div className="hf-fx-carve-members-label px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
                 analysed
               </div>
               {nodes.map((node, i) => (
@@ -356,7 +369,7 @@ export function FxCarveModule({
               ))}
             </div>
           ) : (
-            <p className="hf-fx-carve-working border-t border-panel-border-input py-1.5 text-center text-[10px] text-panel-text-4">
+            <p className="hf-fx-carve-working border-t border-panel-border-input py-1.5 text-center text-[10px] text-panel-text-2">
               {carve.sources.length > 0
                 ? "Nothing analysed yet."
                 : "Pick the voices this bed should make room for."}

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

@@ -91,7 +91,7 @@ export function AutomationToggle({
         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-4 hover:text-panel-text-0"
+            : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"
         }`}
         aria-pressed={automated}
         aria-label={automated ? `Remove ${label} automation` : `Automate ${label}`}
@@ -188,7 +188,7 @@ export function FxParamRow({
   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-4">
+        <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-2">
           {param.label}
         </span>
         <select
@@ -229,7 +229,7 @@ export function FxParamRow({
     >
       <span
         className={`hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] ${
-          automated ? "text-panel-accent" : "text-panel-text-4"
+          automated ? "text-panel-accent" : "text-panel-text-2"
         }`}
       >
         {param.label}
@@ -279,7 +279,7 @@ export function FxParamRow({
         }}
       />
       {param.unit ? (
-        <span className="hf-fx-unit w-[22px] flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+        <span className="hf-fx-unit w-[22px] flex-shrink-0 font-mono text-[9px] text-panel-text-2">
           {param.unit}
         </span>
       ) : null}

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

@@ -115,7 +115,7 @@ function Fader({
       </span>
       <span
         className={`hf-fx-eq-value font-mono text-[9px] tabular-nums ${
-          moved ? "text-panel-accent" : "text-panel-text-4"
+          moved ? "text-panel-accent" : "text-panel-text-2"
         }`}
       >
         {moved ? shown(value) : "0"}
@@ -154,10 +154,10 @@ export function FxEqModule({
         >
           Tone
         </button>
-        <span className="font-mono text-[9px] text-panel-text-4">{bands.length}-band</span>
+        <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-4 hover:text-panel-danger"
+          className="hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-panel-danger"
           aria-label="Remove Tone"
           disabled={disabled}
           onClick={onRemove}
@@ -179,7 +179,7 @@ export function FxEqModule({
               />
             ))}
           </div>
-          <div className="mt-1.5 flex justify-between font-mono text-[8px] tracking-wide text-panel-text-4">
+          <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>

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

@@ -135,7 +135,7 @@ function FxMoveButton({
   return (
     <button
       type="button"
-      className="hf-fx-move px-1 font-mono text-[10px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-25"
+      className="hf-fx-move px-1 font-mono text-[10px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-25"
       title={label}
       disabled={disabled}
       onClick={onClick}
@@ -180,7 +180,7 @@ function FxNodeHeader({
           and as a list when they are not — and the difference decides whether an
           author thinks the order matters. It does; it is audible. */}
       {position !== undefined ? (
-        <span className="hf-fx-node-index shrink-0 font-mono text-[9px] tabular-nums text-panel-text-4">
+        <span className="hf-fx-node-index shrink-0 font-mono text-[9px] tabular-nums text-panel-text-2">
           {String(position).padStart(2, "0")}
         </span>
       ) : null}
@@ -194,7 +194,7 @@ function FxNodeHeader({
       </button>
       <button
         type="button"
-        className="hf-fx-bypass rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
+        className="hf-fx-bypass rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
         aria-pressed={bypassed}
         title={bypassed ? "Enable" : "Bypass"}
         disabled={disabled}
@@ -216,7 +216,7 @@ function FxNodeHeader({
       />
       <button
         type="button"
-        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-4 hover:text-red-400 disabled:opacity-40"
+        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40"
         title="Remove"
         disabled={disabled}
         onClick={onRemove}
@@ -377,15 +377,15 @@ export function FxNodeRow({
         onRemove={() => onRemove(index)}
       />
       {summary ? (
-        <p className="hf-fx-node-summary truncate px-1.5 pb-1 text-[10px] text-panel-text-4">
+        <p className="hf-fx-node-summary truncate px-1.5 pb-1 text-[10px] text-panel-text-2">
           {summary}
         </p>
       ) : null}
       {open ? (
         <>
           {/* What it is for, before what it is made of. */}
           {copy?.does ? (
-            <p className="hf-fx-node-does border-t border-panel-border-input px-1.5 py-1 text-[10px] text-panel-text-4">
+            <p className="hf-fx-node-does border-t border-panel-border-input px-1.5 py-1 text-[10px] text-panel-text-2">
               {copy.does}
             </p>
           ) : null}
@@ -409,7 +409,7 @@ export function FxNodeRow({
                 />
               </div>
               {profile ? (
-                <p className="hf-fx-node-ends flex justify-between gap-2 px-1.5 pb-1 text-[9px] text-panel-text-4">
+                <p className="hf-fx-node-ends flex justify-between gap-2 px-1.5 pb-1 text-[9px] text-panel-text-2">
                   <span className="truncate">{profile.ends.low}</span>
                   <span className="truncate text-right">{profile.ends.high}</span>
                 </p>
@@ -434,7 +434,7 @@ export function FxNodeRow({
                   author where the control is; this tells them which way to move
                   it, which is the question they actually have. */}
               {copy?.primaryEnds ? (
-                <p className="hf-fx-node-ends flex justify-between gap-2 px-1.5 pb-1 text-[9px] text-panel-text-4">
+                <p className="hf-fx-node-ends flex justify-between gap-2 px-1.5 pb-1 text-[9px] text-panel-text-2">
                   <span className="truncate">{copy.primaryEnds.low}</span>
                   <span className="truncate text-right">{copy.primaryEnds.high}</span>
                 </p>
@@ -452,15 +452,15 @@ export function FxNodeRow({
           {oneKnob ? (
             <button
               type="button"
-              className="hf-fx-node-details flex w-full items-center gap-1 border-t border-panel-border-input px-1.5 py-1 text-left font-mono text-[9px] uppercase tracking-wide text-panel-text-4 hover:text-panel-text-0"
+              className="hf-fx-node-details flex w-full items-center gap-1 border-t border-panel-border-input px-1.5 py-1 text-left font-mono text-[9px] uppercase tracking-wide text-panel-text-2 hover:text-panel-text-0"
               aria-expanded={details}
               onClick={() => setDetails((was) => !was)}
             >
               <span aria-hidden="true">{details ? "\u25BE" : "\u25B8"}</span>
               Details — {registryDef.label}
             </button>
           ) : (
-            <p className="hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
+            <p className="hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
               Details — {registryDef.label}
             </p>
           )}

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

@@ -13,6 +13,7 @@ import {
   type HfAudioFxPresetFamily,
 } from "@hyperframes/core/audio-fx-presets";
 import { PRESET_PROBLEM } from "@hyperframes/core/audio-fx-copy";
+import type { HfAudioNameKind } from "@hyperframes/core/audio-carve";
 
 /**
  * Shelf names in the author's language, which is deliberately not the effect
@@ -28,6 +29,17 @@ const FAMILY_LABEL: Record<HfAudioFxPresetFamily, string> = {
 };
 
 export interface FxPresetMenuProps {
+  /**
+   * What the track reads as, from its id and filename.
+   *
+   * Only a confident "music" or "sfx" hides anything. `unknown` keeps the whole
+   * shelf, on the same principle the carve's source picker follows: a name is a
+   * hint, and a shelf that hides what somebody came for is worse than a long
+   * one. Nothing here is irreversible either — the cost of a wrong guess is one
+   * shelf the author has to scroll past, against the cost of "My voice sounds
+   * amateur" sitting on a music bed.
+   */
+  trackKind?: HfAudioNameKind;
   onPick(id: string): void;
   /**
    * Play this preset on the running audio without persisting it, and revert on
@@ -46,7 +58,15 @@ export interface FxPresetMenuProps {
  * in a column is a wall, and they are already the author's grouping rather than
  * the registry's. See `plans/audio-fx-ux/README.md` §Decided.
  */
-export function FxPresetMenu({ onPick, onAudition }: FxPresetMenuProps) {
+export function FxPresetMenu({ trackKind, onPick, onAudition }: FxPresetMenuProps) {
+  // The voice presets all begin by cutting rumble out of a human voice and end
+  // in a compressor set for speech. On a music bed that is not a mild mismatch,
+  // it is the wrong instrument — and the shelf leads with the complaint, so it
+  // would be offering the author a problem they do not have.
+  const families =
+    trackKind === "music" || trackKind === "sfx"
+      ? HF_AUDIO_FX_PRESET_FAMILIES.filter((f) => f !== "voice")
+      : HF_AUDIO_FX_PRESET_FAMILIES;
   return (
     <div
       className="hf-fx-preset-menu space-y-1.5 rounded-[4px] border border-panel-border-input p-1.5"
@@ -59,9 +79,9 @@ export function FxPresetMenu({ onPick, onAudition }: FxPresetMenuProps) {
       // button's focus, so it reverts and re-auditions rather than sticking.
       onBlur={onAudition ? () => onAudition(null) : undefined}
     >
-      {HF_AUDIO_FX_PRESET_FAMILIES.map((family) => (
+      {families.map((family) => (
         <div key={family} className="hf-fx-preset-group space-y-0.5">
-          <span className="hf-fx-preset-group-label block font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
+          <span className="hf-fx-preset-group-label block font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
             {FAMILY_LABEL[family]}
           </span>
           {audioFxPresetsByFamily(family).map((preset) => (
@@ -85,7 +105,7 @@ export function FxPresetMenu({ onPick, onAudition }: FxPresetMenuProps) {
               <span className="hf-fx-preset-problem block truncate text-[10px]">
                 {PRESET_PROBLEM[preset.id] ?? preset.description}
               </span>
-              <span className="hf-fx-preset-name block truncate font-mono text-[9px] text-panel-text-4">
+              <span className="hf-fx-preset-name block truncate font-mono text-[9px] text-panel-text-2">
                 {preset.label}
               </span>
               {/* Hovering a preset plays it, and playing is otherwise invisible: