web: give LIGHT a tone curve, edited on the graph drawn over the photo

The LIGHT rail was sliders only, so the one control that describes a tone
mapping rather than a scalar had nowhere to live. It now has a TONE CURVE chip;
pressing it puts a curve graph on the photo itself — four channels, RGB plus R,
G and B, exactly the shape Lightroom's point curve has — and dragging a point
bends the picture under it while you drag.

A recipe carries the curve as `adjustments.toneCurve`, an optional map from
channel to point list, `Partial<Record<'rgb'|'r'|'g'|'b', [number, number][]>>`.
The field is optional and the API stores the recipe JSON opaquely, so every
recipe and session written before this commit loads unchanged and simply has no
curve; nothing on the API or in the database moved.

The renderer never sees the points. `shared/utils/toneCurve.ts` turns them into
a 256-entry table per channel and the shader looks the table up in a 256x1
texture: SkSL indexes uniform arrays by constant only, so a per-pixel lookup
has to come from a texture, and a table is the cheaper shape anyway — one
`lut.eval(vec2(v * 255 + 0.5, 0.5))` per channel. The interpolation between
points is a monotone cubic (Fritsch–Carlson) rather than a natural spline,
because a spline overshoots between two close points and that overshoot is the
classic tone-curve tell, a bright halo beside a lifted shadow; a monotone cubic
through the points bends through them and never turns back on itself. The table
is built per channel and then composited through the master, the order the graph
draws it in, so an R point in the shadows survives an RGB contrast S and both
land where the lines say.

Render passes: the curve rides the existing `renderPhoto`, as pass 3e, last —
after the stock, the matrix, the mixer and the seasonal grade, so a point placed
on the graph is the last word on that pixel. Preview and export both call
`renderPhoto`, so the two agree by construction rather than by two matching
implementations. The pass wraps whatever shader the pipeline had built
(`paintShader ?? imageShaderOf()`) as a child of the curve shader, and counts
towards `graded` for the same reason the tone shader does: the curve reads the
matrix's output, so when there is a matrix it has to be in the pixels the curve
samples. Turning the curve on costs one extra render pass and nothing else; off,
`curveIsActive` is false and the pass is not built at all.

That pass is also where this spent its time being invisible. The curve data
reached the recipe and the pixels did not move: `Skia.Image.MakeImage` does not
exist in the shim, so the call threw a TypeError inside the render, the preview
effect's catch swallowed it into `setError('err.generic')`, and the chip, the
graph and the recipe all looked healthy while the canvas kept the old frame. The
fix is in `skiaShim.ts`: CanvasKit keeps that factory top-level (`Skia.MakeImage`)
and only puts the encoded and lazy ones under `Image.`, and its ImageInfo insists
on an explicit `colorSpace` where RN Skia's does not — everything this pipeline
builds is sRGB, so the shim fills it in and the call site keeps RN Skia's shape.
Reproduced in Node first (`curve-skia-lab.cjs`, scratchpad): the shim's call
throws, the translated one returns a 256x1 image.

`ToneCurvePanel.tsx` is the graph: a 224px SVG over the photo's layout box, no
zoom transform, grid plus a dashed diagonal, the composite drawn as a ghost
behind a channel line so a channel edit is still visible against the other
three. Ends are pinned to x 0 and 1, a point cannot be dragged past its
neighbours (2% of the axis is the closest they may sit) and cannot be dragged
out of the square, so the graph can never describe a curve the renderer cannot
apply. One pointerdown grabs the nearest point inside 11px or adds one on the
line under the cursor and keeps dragging, so a click is a point and a drag is a
bend. Deleting a point is the graph's own double-click, not the circle's, and it
has to be: grabbing a point takes pointer capture, so the click that follows is
delivered to the SVG rather than the circle under the cursor.

RESET clears the whole graph, all four channels, and hands back an empty object
that `App.tsx` maps to `undefined` so the recipe drops the field rather than
keeping a `toneCurve: {}` — the field's presence is what "this picture has a
curve" means, and an empty map that means the same as no map is a state two
pieces of code would eventually disagree about. One undo step per visit to the
graph, the rule the ruler and the watermark box already ride: a drag is one
edit, not one per pointer move.

No new i18n keys: the chip and the panel labels are literal uppercase, the same
as EXPOSURE and STRAIGHTEN beside them. Not PRO-gated — the curve is a LIGHT
control like the rest of the tab.

Verified:
  tone-curve-probe.cjs (new, scratchpad) — a 256x256 greyscale ramp uploaded to
    http://localhost:8090, pixels read back off the built app. 33 PASS, 0 FAIL,
    no page errors. The ramp is a ramp before (9..246), a flat curve is two
    points and no pass, the graph is drawn on the photo (graph 729,280 240x291
    against photo 719,325 256x256), every stop of the ramp lands on the drawn
    curve (worst deviation 1), black lifts to 132 while white holds 246 -> 252,
    a point dragged up bends the line itself (M0.00 112.00 L3.50 110.2...), the
    R tab takes the graph over while the composite stays visible behind it and R
    drives red at black to 255 with G and B still on the composite (133,132
    against 132), the recipe carries toneCurve, it survives a reload (254 -> 254,
    chip still amber), a click adds a point and a double-click removes it again,
    RESET returns the ramp to its start (worst 0) and drops the field, and close
    takes the graph off the photo.
  tone-curve-math.cjs (new, scratchpad) — the panel's and the table's own
    arithmetic, 11/11: the ends pin and sort, a dragged point lifts where the
    graph says, a steeper segment never turns back on itself, a channel curve
    runs before the composite, a click lands on the line, two points cannot
    share a spot, an end cannot leave the axis, and the two ends survive a
    delete where a middle point does not.
  Regressions against the rebuilt app, 0 fail: landing-test.cjs 172,
    pro-gate-test.cjs 27, award-column-probe.cjs 18, otp-code-probe.cjs 10.
  web tsc --noEmit clean.

ponytail: the graph is anchored over the photo, not draggable — it sits at the
photo's own layout box the way the crop frame and the straighten ruler do, and
the one time it would want to move it is when the photo under it is small, at
which point a token drag offset is cheaper than the second positioning system.
Parametric curves (Lightroom's shadows/highlights/darks/lights) are not here:
the point curve is the one the request asked for, and a parametric curve is a
second graph, not a second line on this one — add it as another channel row when
someone asks. The LUT is a texture rather than Skia's table colour filter
because CanvasKit 0.42 has no ColorFilter.MakeTable. The panel's graph size and
hit radius are literals, since exactly one graph exists.

docker/frontend/src/ui/ImageStage.tsx

@@ -103,6 +103,7 @@ export function ImageStage({
   pickPanelAt = null,
   marks = [],
   straightenRuler = null,
+  curvePanel = null,
   dims = null,
 }: {
   previewUrl: string | null;
@@ -149,12 +150,20 @@ export function ImageStage({
   // FRAME's STRAIGHTEN scale, laid along the foot of the photo. Drawn here
   // rather than in the panel column because the angle is read off the picture.
   straightenRuler?: ReactNode;
+  // LIGHT's TONE CURVE graph, hung on the photo while that chip is on: the curve
+  // is read against the picture it is reshaping, so it belongs on the stage
+  // rather than in a column beside it. It is anchored, not draggable — the graph
+  // is a fixed square and the photo moves under it.
+  curvePanel?: ReactNode;
   // The photo's own pixel size, as the stage stands: the file's shape turned by
   // the quarter turn and cut by a committed crop, so the number in the row under
   // the photo is the resolution an export at the photo's own size renders.
   dims?: { w: number; h: number } | null;
 }) {
   const showStraighten = !!straightenRuler;
+  // The curve graph is a fresh node on every parent render too, and the measure
+  // effect below only ever asks whether it is there.
+  const showCurve = !!curvePanel;
   // `marks` is a fresh array on every parent render, and this one is only ever
   // read for its length, so the effects below key off that instead.
   const wmCount = marks.length;
@@ -240,7 +249,7 @@ export function ImageStage({
   }, []);
 
   useEffect(() => {
-    if (!cropEditing && !compare && !picking && !pickPanelAt && !wmCount && !showStraighten) {
+    if (!cropEditing && !compare && !picking && !pickPanelAt && !wmCount && !showStraighten && !showCurve) {
       setBox(null);
       return;
     }
@@ -261,7 +270,7 @@ export function ImageStage({
       ro?.disconnect();
       window.removeEventListener('resize', measure);
     };
-  }, [cropEditing, compare, picking, pickPanelAt, wmCount, showStraighten, measure, previewUrl]);
+  }, [cropEditing, compare, picking, pickPanelAt, wmCount, showStraighten, showCurve, measure, previewUrl]);
 
   const grabPanel = (e: React.PointerEvent<HTMLDivElement>) => {
     e.stopPropagation(); // the photo must not pan under the card
@@ -801,6 +810,20 @@ export function ImageStage({
               </div>
             </div>
           ) : null}
+          {/* LIGHT's TONE CURVE: the graph hangs on the photo while that chip is
+              on, so the curve is read against the picture it is moving. It
+              carries no zoom transform — the graph is a fixed square at the
+              photo's own corner, and a zoom is a way of looking at the photo
+              underneath it, not at the curve. */}
+          {curvePanel && box && !peek ? (
+            <div
+              className="curve-layer"
+              data-key="curve-layer"
+              style={{ left: box.left, top: box.top, width: box.width, height: box.height }}
+            >
+              {curvePanel}
+            </div>
+          ) : null}
           {/* FRAME's watermarks: each mark's own box, so the text can be dragged
               around the photo and scaled from its corner. */}
           {box && !cropEditing && !picking && !peek && wmBoxes.length ? (

docker/frontend/src/ui/ToneCurvePanel.tsx

@@ -0,0 +1,217 @@
+import { useRef, useState } from 'react';
+import type { ToneCurve, ToneCurveChannel, ToneCurvePoint } from '../../shared/types';
+import {
+  CURVE_CHANNELS,
+  CURVE_CHANNEL_COLOR,
+  addCurvePoint,
+  curvePoints,
+  isFlatCurve,
+  moveCurvePoint,
+  removeCurvePoint,
+  sampleCurve,
+} from '../../shared/utils/toneCurve';
+
+// LIGHT > TONE CURVE: the graph that hangs on the photo. Four curves — the
+// composite one and one per channel — drawn over a grid, with the points the
+// user drags. It reads and writes nothing but the `toneCurve` field, so the
+// render is the only other thing that has to know what a curve is (see
+// toneCurve.ts for the table it hands the renderer).
+//
+// A click on the line drops a point on it, a drag moves one, and a double-click
+// drops one — the three gestures Lightroom teaches, so nothing here has to be
+// explained in words on the photo.
+const SIZE = 224; // the graph's own square, in px
+const STEPS = 64; // how finely the line is drawn
+const HIT = 11; // px within which the pointer takes hold of a point
+const NEEDS = 0.002; // how far off the diagonal counts as a move, as in toneCurve.ts
+
+const LABEL: Record<ToneCurveChannel, string> = { rgb: 'RGB', r: 'R', g: 'G', b: 'B' };
+
+const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
+const offDiagonal = (pts: ToneCurvePoint[]) => pts.some((p) => Math.abs(p[1] - p[0]) > NEEDS);
+
+export function ToneCurvePanel({
+  curve,
+  onChange,
+  onClose,
+}: {
+  curve: ToneCurve | undefined;
+  onChange: (next: ToneCurve) => void;
+  onClose: () => void;
+}) {
+  const [channel, setChannel] = useState<ToneCurveChannel>('rgb');
+  const svgRef = useRef<SVGSVGElement>(null);
+  const drag = useRef<{ id: number; at: number } | null>(null);
+
+  const pts = curvePoints(curve, channel);
+  const master = curvePoints(curve, 'rgb');
+
+  // A channel pulled back to the diagonal stores nothing: the recipe stays as
+  // small as the curve is flat, and an old recipe reads the same either way.
+  const put = (next: ToneCurvePoint[]): ToneCurve => {
+    const out: ToneCurve = { ...curve };
+    if (isFlatCurve(next)) delete out[channel];
+    else out[channel] = next;
+    return out;
+  };
+
+  const at = (e: { clientX: number; clientY: number }) => {
+    const r = svgRef.current?.getBoundingClientRect();
+    if (!r || !(r.width > 0) || !(r.height > 0)) return null;
+    return { x: clamp01((e.clientX - r.left) / r.width), y: clamp01(1 - (e.clientY - r.top) / r.height) };
+  };
+
+  const line = (p: ToneCurvePoint[]) => {
+    const out: string[] = [];
+    for (let i = 0; i <= STEPS; i++) {
+      const x = i / STEPS;
+      out.push(`${i ? 'L' : 'M'}${(x * SIZE).toFixed(2)} ${((1 - sampleCurve(p, x)) * SIZE).toFixed(2)}`);
+    }
+    return out.join(' ');
+  };
+
+  const down = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (e.button !== 0) return;
+    e.stopPropagation(); // the photo must not pan under the graph
+    const p = at(e);
+    if (!p) return;
+    svgRef.current?.setPointerCapture(e.pointerId);
+    let near = -1;
+    let best = HIT / SIZE;
+    pts.forEach((q, i) => {
+      const d = Math.hypot(q[0] - p.x, q[1] - p.y);
+      if (d < best) {
+        best = d;
+        near = i;
+      }
+    });
+    if (near >= 0) {
+      drag.current = { id: e.pointerId, at: near };
+      return;
+    }
+    const next = addCurvePoint(pts, p.x, p.y);
+    if (next === pts) return; // too close to a neighbour to take another point
+    onChange(put(next));
+    // The points the old list already held keep their identity, so the one
+    // without it is the one just added — and the drag continues on it, which is
+    // what makes "click, then pull" one gesture.
+    drag.current = { id: e.pointerId, at: Math.max(0, next.findIndex((q) => !pts.includes(q))) };
+  };
+
+  const move = (e: React.PointerEvent<SVGSVGElement>) => {
+    const d = drag.current;
+    if (!d || d.id !== e.pointerId) return;
+    const p = at(e);
+    if (!p) return;
+    onChange(put(moveCurvePoint(pts, d.at, p.x, p.y)));
+  };
+
+  const up = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (drag.current?.id === e.pointerId) drag.current = null;
+  };
+
+  const grid = [0, 1, 2, 3, 4].map((i) => (i * SIZE) / 4);
+
+  return (
+    <div className="curve-panel" data-key="curve-panel" onPointerDown={(e) => e.stopPropagation()}>
+      <div className="curve-head">
+        <span className="curve-title">TONE CURVE</span>
+        <button type="button" className="curve-close" data-key="curve-close" aria-label="close" onClick={onClose}>
+          ✕
+        </button>
+      </div>
+      <div className="curve-tabs">
+        {CURVE_CHANNELS.map((ch) => (
+          <button
+            key={ch}
+            type="button"
+            className={`curve-tab${ch === channel ? ' on' : ''}${offDiagonal(curvePoints(curve, ch)) ? ' moved' : ''}`}
+            data-key={`curve-tab-${ch}`}
+            aria-pressed={ch === channel}
+            onClick={() => {
+              setChannel(ch);
+              drag.current = null;
+            }}
+          >
+            <span className="curve-dot" data-color={CURVE_CHANNEL_COLOR[ch]} style={{ background: CURVE_CHANNEL_COLOR[ch] }} />
+            {LABEL[ch]}
+          </button>
+        ))}
+        <button
+          type="button"
+          className="curve-reset"
+          data-key="curve-reset"
+          onClick={() => {
+            drag.current = null;
+            // RESET is the whole graph, not the channel on screen: the button
+            // sits with the tabs, and "the curve" is what the chip and the
+            // pixels answer to, so a flat object means every channel is flat.
+            onChange({});
+          }}
+        >
+          RESET
+        </button>
+      </div>
+      <svg
+        ref={svgRef}
+        className="curve-graph"
+        data-key="curve-graph"
+        width={SIZE}
+        height={SIZE}
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
+        onPointerDown={down}
+        onPointerMove={move}
+        onPointerUp={up}
+        onPointerCancel={up}
+        onDoubleClick={(e) => {
+          // A double-click takes away the point under it. It listens on the
+          // graph rather than on the circle: taking hold of a point captures the
+          // pointer, and the click that follows is delivered to the capture
+          // element, so the circle itself would never hear it.
+          const p = at(e);
+          if (!p) return;
+          let near = -1;
+          let best = HIT / SIZE;
+          pts.forEach((q, i) => {
+            const d = Math.hypot(q[0] - p.x, q[1] - p.y);
+            if (d < best) {
+              best = d;
+              near = i;
+            }
+          });
+          if (near < 0) return;
+          drag.current = null;
+          onChange(put(removeCurvePoint(pts, near)));
+        }}
+      >
+        {grid.map((g) => (
+          <line key={`v${g}`} className="curve-grid" x1={g} y1={0} x2={g} y2={SIZE} />
+        ))}
+        {grid.map((g) => (
+          <line key={`h${g}`} className="curve-grid" x1={0} y1={g} x2={SIZE} y2={g} />
+        ))}
+        {/* The diagonal is the neutral line: a curve that never leaves it does
+            nothing, which is what makes "how far has this moved" readable. */}
+        <line className="curve-diagonal" x1={0} y1={SIZE} x2={SIZE} y2={0} />
+        {channel !== 'rgb' ? <path className="curve-line ghost" d={line(master)} /> : null}
+        <path
+          className="curve-line"
+          data-key="curve-line"
+          style={{ stroke: CURVE_CHANNEL_COLOR[channel] }}
+          d={line(pts)}
+        />
+        {pts.map((p, i) => (
+          <circle
+            key={`p${i}`}
+            className="curve-point"
+            data-key={`curve-point-${i}`}
+            cx={p[0] * SIZE}
+            cy={(1 - p[1]) * SIZE}
+            r={i === 0 || i === pts.length - 1 ? 6 : 5}
+            style={{ stroke: CURVE_CHANNEL_COLOR[channel] }}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+}