The two Color Chromes close the WB panel and D.RANGE gets a box of its own

Two picks that were drawn as rows of the column rather than as picks of a panel,
both of them because of where a slot happened to be rather than what the control
is. The pair of Color Chromes was LIGHT's own `chip-row grid` at the foot of the
column, under TONE CURVE, where it read as a third strip of the tab and sat far
from the two tracks it is the other axis of. D.RANGE was the effects slot, four
chips poured into the foot of DETAIL & EFFECTS where they were four more rows of
the panel and not the one setting they are.

WB now owns the pair. `DevelopPanels` gains a `foot` on a panel — a slot drawn
under the rows instead of above them — and the `wb` entry names `wbFoot`, so
COLOR CHROME and CHROME BLUE are rendered under COLOR TEMP and TINT, on the tab
whose colour they are and against the pair of tracks they are read with. They
keep everything else: the `chip-row grid` table layout the WB presets wear, their
keys, their OFF/ON labels and their pointer behaviour. The `wb` panel had no
slot but its presets and its two rows, so the foot is the whole of what changed
there; the four panels that name no foot are untouched, and the slot is looked up
per panel (`slots?.[panel.foot]`) so a panel that never asked for one draws
nothing.

D.RANGE closes DETAIL & EFFECTS inside a box that carries its name. `.dev-box` is
a frame in `--border-soft` with a `.dev-box-title` in the small-caps the panel
heads use, and the four stops sit in it as one set — which is what they are: a
hold on the whole frame, read as a set of stops, not as four more knobs of the
effects. The box is the slot's own wrapper, so it holds whichever chips the slot
is given and the chips keep their own keys and their amber AUTO.

Verified: `npx tsc --noEmit` clean, `npm run build` clean
(`dist/assets/index-v5g7p7bS.js`, `dist/assets/index-RYLacibB.css` at 66.29 kB).
Against the built page (`127.0.0.1:8090`, 1440x900 desktop and 393x852 phone),
LIGHT tab, panels open:

- LIGHT's own row is now `∿ TONE CURVE` alone — the pair is out of the column.
- WB's children read `[chip-row grid (presets), mini-slider COLOR TEMP,
  mini-slider TINT, chip-row grid COLOR CHROME OFF / CHROME BLUE OFF]`, and both
  chromes report `inWb: true` — `COLOR CHROME [94,424,147,37]`,
  `CHROME BLUE [247,424,147,37]` at 1440 wide, `[8,599,186,37]` and
  `[200,599,186,37]` at 393 — in the WB body, under the two tracks.
- The D.RANGE box reports `data-key="dev-box-dr"`, title `DYNAMIC RANGE`,
  `[94,754,300,162]` under `effBox [94,569,300,347]` at 1440 wide, border
  `1px rgb(236,238,241)` (`--border-soft`); the four chips are full-width rows
  (282px) at y=781/814/847/880, AUTO `aria-pressed=true` in amber
  `rgb(206,117,9)` on `rgba(206,117,9,0.14)` and DR100/200/400 on white. On the
  phone the box is `[8,929,377,63]` and the four chips come back to one line at
  `.chip-row`'s own `@media (max-width:860px)` override, `[17,956,58,27]`,
  `[81,956,62,27]`, `[149,956,64,27]`, `[219,956,65,27]` — no clipping, nothing
  over the caption — and `errors: []` on both.

Co-authored-by: PenguinHarness <noreply@penguin.local>

docker/frontend/src/ui/DevelopPanels.tsx

@@ -25,13 +25,17 @@ const PANELS: {
   // reading order — before the panel's knobs except in DETAIL & EFFECTS, whose
   // D.RANGE selects close the column.
   slot?: 'profile' | 'wb' | 'effects';
+  // A pick that closes its panel rather than opening it: drawn under the rows,
+  // where WB's two Color Chromes belong (they are read after the pair of tracks
+  // they are the other axis of).
+  foot?: 'wbFoot';
   slotFirst?: boolean;
 }[] = [
   // PROFILE is the film simulation and nothing else: EV's ruler is a knob of the
   // TONE panel's, the range the picture is on, so it sits with the rest of them
   // and not with the stock the frame is shot on.
   { slug: 'profile', title: 'PROFILE', rows: [], slot: 'profile', slotFirst: true },
-  { slug: 'wb', title: 'WB', rows: ['temperature', 'tint'], slot: 'wb', slotFirst: true },
+  { slug: 'wb', title: 'WB', rows: ['temperature', 'tint'], slot: 'wb', slotFirst: true, foot: 'wbFoot' },
   // EV leads TONE: it is the one number the whole range hangs off, and the
   // exposure below it is the finer move on the same axis.
   { slug: 'tone', title: 'TONE', rows: ['ev', 'exposure', 'contrast', 'highlight', 'shadow', 'whites', 'blacks'] },
@@ -109,7 +113,7 @@ export function DevelopPanels({
   set: (patch: Partial<ColorAdjustments>) => void;
   pro?: boolean;
   onPro?: () => void;
-  slots?: { profile?: ReactNode; wb?: ReactNode; effects?: ReactNode };
+  slots?: { profile?: ReactNode; wb?: ReactNode; wbFoot?: ReactNode; effects?: ReactNode };
 }) {
   const [open, setOpen] = useState<Record<string, boolean>>(() => {
     const saved = new Set((recall(OPEN_KEY) ?? '').split(','));
@@ -125,6 +129,7 @@ export function DevelopPanels({
       {PANELS.map((panel) => {
         const isOpen = open[panel.slug];
         const slot = panel.slot ? slots?.[panel.slot] : null;
+        const foot = panel.foot ? slots?.[panel.foot] : null;
         return (
           <section key={panel.slug} className="dev-panel" data-key={`dev-panel-${panel.slug}`}>
             <button
@@ -143,6 +148,7 @@ export function DevelopPanels({
                   <DevRow key={key} paramKey={key} adj={adj} set={set} pro={pro} onPro={onPro} />
                 ))}
                 {panel.slotFirst ? null : slot}
+                {foot}
               </div>
             ) : null}
           </section>