feat(studio): draw every slider as a line with a hollow node, and move the shapes into TOOLS

The default ring was a solid disc on a coloured bar, which read as a crude
block next to the rest of the rail; every range input is now a hairline
track with an outline node in the accent colour, and the temperature and
tint strips keep their gradients on the track itself.

CROP, ROTATE and WATERMARK reshape the frame rather than grade it, so they
belong with the tools that work on the whole image.

docker/frontend/src/App.tsx

@@ -2810,10 +2810,13 @@ export function Workspace() {
     },
   });
 
-  const framesRow = (): ChipDef[] => [
+  // The frame row is the frames alone. CROP, ROTATE and WATERMARK used to close
+  // it — a frame is the look, and cutting, levelling and signing the print are
+  // moves made on the frame, which is what TOOLS is (see `shapeChips`).
+  const framesRow = (): ChipDef[] =>
     // NO FRAME is not a chip of its own: clicking the frame already on the
     // photo takes it off again, so the row carries one entry per frame.
-    ...FRAMES.filter((frame) => frame.id !== 'none').map((frame) => ({
+    FRAMES.filter((frame) => frame.id !== 'none').map((frame) => ({
       key: `fr:${frame.id}`,
       label: t(frame.label),
       active: frameId === frame.id,
@@ -2828,7 +2831,12 @@ export function Workspace() {
         remember();
         setFrameId(frameId === frame.id ? 'none' : frame.id);
       },
-    })),
+    }));
+
+  // The three moves that shape the print rather than tint it: the frame is cut
+  // to a shape, turned to the straight, and signed. Each opens its own strip in
+  // the last column, the same strip it opened from the frame row.
+  const shapeChips: ChipDef[] = [
     groupChip('crop'),
     // The chip names whichever of the two is off the straight — and both when
     // both are — then the mirrors riding on top of them.
@@ -3022,6 +3030,11 @@ export function Workspace() {
         // a tab instead of LIGHT's row. Each carries its own mark at the head of
         // its label so the four read as one set.
         //
+        // CROP, ROTATE and WATERMARK closed the frame row and are here for the
+        // same reason: cutting, levelling and signing the print are moves on the
+        // frame rather than a frame picked for it, and they take the same strips
+        // they always opened (see shapeChips).
+        //
         // Nothing here is a knob, so the tab is this row alone: the strip a chip
         // opens is the last column's (see stripChips), the same as anywhere else.
         // AUTO and MONOCHROME come with any account — one lands a set of numbers
@@ -3069,6 +3082,10 @@ export function Workspace() {
               }
             : locked('gradient-mask', t('pro.gradientChip')),
           { key: 'mono', label: '◑ MONOCHROME', active: monoOn, onClick: toggleMono },
+          // The rule stands where the features that read or take the pointer
+          // end and the marks cut into the print begin.
+          { key: 'tools-rule', divider: true, label: '', onClick: () => {} },
+          ...shapeChips,
         ];
       case 'hsl': {
         // The mixer is PRO: the picker, the eight bands and the three
@@ -3720,11 +3737,11 @@ export function Workspace() {
             </div>
           </div>
 
-          {/* FRAME's WATERMARK chip opens the two collapses, one per
+          {/* TOOLS' WATERMARK chip opens the two collapses, one per
               watermark type: the header chip, then that mark's own controls */}
           {wmOpen ? (
             <div className="col col-sub strip wm-extra" data-col="wm">
-              <ChipRow chips={[{ key: 'wm-back', label: '< FRAME', onClick: () => setOpenGroup(null) }]} />
+              <ChipRow chips={[{ key: 'wm-back', label: '< TOOLS', onClick: () => setOpenGroup(null) }]} />
 
               {/* GPS WATERMARK — its colour, its face, its two rows, its place */}
               <div className="wm-sec" data-key="wm-sec-gps">