web: draw the dust brush into strokes, size it by the wheel, uncap the list

A speck of dust is small and there is never only one, so the brush had three
things wrong with it: the list stopped at sixteen and the seventeenth repair
pushed the first one out of the shader, the size was a choice of three buttons,
and one gesture laid exactly one spot — a scratch across a hundred pixels was a
dozen clicks.

The cap is gone rather than raised. SkSL indexes a uniform array by a constant
only (the trick the tone curve's mixer already uses), so HEAL_SKSL carried
sixteen unrolled blocks and the list was trimmed to fit them. The shader is now
built for the count it is handed — healSkSL(n), with healUniforms returning
(n * 2 + 1) * 4 floats, the same declaration order for any n — and the renderer
caches one compiled effect per count (exportEngine's healEffectFor). readHeal
no longer slices and the app appends whatever a gesture reported. No repair is
dropped to make room for a later one: the speck healed first is the speck that
stays healed.

The wheel is the size now. wheelHealR multiplies the radius by
exp(-deltaY * 0.0015), so a trackpad's small deltas and a mouse's 100px notch
are the same gesture at two speeds, bounded at 0.3% and 25% of the photo's
width — below the first a spot is finer than the pixels it is drawn on, past
the second it would borrow its patch from off the frame. S, M and L are gone,
and because there is nothing left to point at, the HEAL chip's own readout is
the size: the number the brush is set to is the number on the chip.

The pointer paints. Down starts a stroke, move adds a point every HEAL_SPACING
(0.6) radii of travel, and up turns the whole run into spots in one report — so
a stroke is one undo step however long it was, and the trail drawn while the
pointer is down is a preview of that run, in the accent, cleared the moment the
spots land. The part of a stroke that leaves the photo lays nothing down, and
the pointer is captured so a stroke that runs past the edge ends where the
pointer does rather than leaving a spot hanging at the frame.

The wheel had to be stopped, not merely claimed. The heal layer is a child of
the stage, and the stage has its own wheel listener that zooms the photo, so a
wheel over the brush grew the brush AND zoomed the view: the probe caught it as
a cursor circle 15% wider than the readout it was drawing. The layer's listener
(native, because React's own onWheel is passive) now stops propagation — while
the brush is up, the wheel sizes the brush and nothing else.

One number moved that none of the three asks mentioned, and it is what the
probe's remaining failure was about. The feather band was 45% of the radius,
and that band is the only place the pixels being repaired are mixed back into
the patch, so with the default 6px brush it left a ring of the speck's own edge
one pixel inside the circle (115 in a field of 150) — which the preview's own
JPEG then rang around, reading 177 a pixel off the centre of a repair that
should be flat. Narrowing the band to the outer 15% copies the patch over
everything inside 0.85r: sub-pixel at the default brush, still a soft edge at a
big one, and that pixel now reads 151.

Verified:
  heal-skia-lab.cjs (scratchpad, Node + the full CanvasKit build) — 27 PASS,
    0 FAIL: the shader for a count compiles through RuntimeEffect.Make and its
    uniform block is (n * 2 + 1) * 4 floats (n=1 -> 12, n=40 -> 324); a single
    spot copies the donor exactly and leaves the rest of the frame untouched,
    pixel for pixel; forty spots are carried whole with the first and the last
    both drawn; three spots in one run each borrow their own patch; readHeal
    clamps and drops zero-radius spots and no longer trims the list;
    wheelHealR grows, shrinks and clamps at both ends (0.3% and 25%); the
    search finds a patch and still refuses a brush that covers the frame.
  heal-probe.cjs (scratchpad, the rebuilt app at http://localhost:8090) —
    48 PASS, 0 FAIL, no page errors: the circle under the cursor is exactly
    the size the chip reads, before and after a wheel, and the wheel grows,
    shrinks, stops at 25% and at 0.3% and returns to where it started; there
    are no size chips left; one click is one spot, the speck reads 151 at its
    centre and its four neighbours are field too; a drag shows at least three
    trail circles, lays exactly that many spots, clears the trail on release,
    and UNDO takes the whole stroke back at once while leaving the repair made
    before it alone; REDO repaints it; a bigger brush takes a ten-pixel blob;
    twenty-five spots are carried with the first healed speck still first and
    still healed; every speck is gone after a reload; CLEAR brings them all
    back and lays no spot of its own; the chip goes amber only while spots are
    on the photo.
  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,
    tone-curve-probe.cjs 42; backend npm test 180 passed, 0 failed.
  web tsc --noEmit clean.

ponytail: a stroke's repairs land when the pointer comes up, not under it as
they are painted — a live repair would mean recompiling the pass and re-cutting
the preview per point mid-gesture; the trail is what the pointer has drawn, and
it is drawn in the accent so the difference reads. The list is uncapped, so a
runaway stroke pays one shader compile per distinct count it reaches, cached
for the rest of the session: a ceiling would have to come back with the trim.
The search still has no colour-matching term, so the donor is chosen by
resemblance alone, and the spots still live in the rendered photo's
coordinates, so re-cropping or re-rotating after healing slides them.

docker/frontend/src/App.tsx

@@ -38,7 +38,7 @@ import {
 import { HSL_BANDS, isMonochromeBase, kelvinToRGB, nearestHslBand, rgbToHsl } from '../shared/utils/colorUtils';
 import { grainPerInch, grainStockFor } from '../shared/utils/grainShader';
 import { curveIsActive } from '../shared/utils/toneCurve';
-import { HEAL_MAX, HEAL_DEFAULT_R, HEAL_SIZE_LABELS, HEAL_SIZES } from '../shared/utils/heal';
+import { HEAL_DEFAULT_R } from '../shared/utils/heal';
 import type { MsgKey } from './i18n/vi';
 
 // Mirrors the API's MAX_PHOTOS_PER_USER: shown on SAVE PHOTO, enforced there.
@@ -901,15 +901,17 @@ export function Workspace() {
   );
 
   // FX's HEAL brush writes the spots the same way a knob writes its value: one
-  // click is one repair and one undo step, so UNDO takes the dust back out one
-  // spot at a time, and CLEAR — one step — hands the whole photo back. The list
-  // is capped at the number the shader carries; past that the oldest spot is
-  // the one that goes, so the brush keeps working instead of refusing.
-  const addHealSpot = useCallback(
-    (spot: HealSpot) => {
+  // gesture is one undo step whatever it laid down, so UNDO takes the dust back
+  // out a stroke at a time, and CLEAR — one step — hands the whole photo back.
+  // Nothing is capped: the shader is built to carry exactly the spots the
+  // recipe holds (shared/utils/heal.ts), so the repair made first is still
+  // there after the hundredth.
+  const addHealSpots = useCallback(
+    (spots: HealSpot[]) => {
+      if (!spots.length) return;
       remember();
       const list = lookRef.current?.recipe.adjustments.heal ?? [];
-      setAdjustment({ heal: [...list, spot].slice(-HEAL_MAX) });
+      setAdjustment({ heal: [...list, ...spots] });
     },
     [remember, setAdjustment]
   );
@@ -2274,13 +2276,15 @@ export function Workspace() {
         ];
       case 'fx': {
         // FX's HEAL is the tab's one tool that is not a look: the chip arms the
-        // dust brush, S/M/L choose how much of the photo a click covers, and
-        // CLEAR hands the whole photo back. It sits above the look chips
-        // because it repairs the file rather than grading it.
+        // dust brush, the wheel sizes it — the chip's own readout is that size,
+        // since the brush has no size buttons to point at — and CLEAR hands the
+        // whole photo back. It sits above the look chips because it repairs the
+        // file rather than grading it.
         return [
           {
             key: 'heal',
             label: 'HEAL',
+            value: healing ? `${(healR * 100).toFixed(1)}%` : undefined,
             active: healing,
             amberValue: healSpots.length > 0,
             onClick: () => {
@@ -2289,14 +2293,6 @@ export function Workspace() {
               setHealing((v) => !v);
             },
           },
-          ...(healing
-            ? HEAL_SIZES.map((r, i): ChipDef => ({
-                key: `heal-size-${i}`,
-                label: HEAL_SIZE_LABELS[i],
-                active: healR === r,
-                onClick: () => setHealR(r),
-              }))
-            : []),
           ...(healSpots.length
             ? [{ key: 'heal-clear', label: 'CLEAR', onClick: clearHealSpots }]
             : []),
@@ -2795,7 +2791,8 @@ export function Workspace() {
           healing={healing}
           healSpots={healSpots}
           healR={healR}
-          onHealSpot={addHealSpot}
+          onHealR={setHealR}
+          onHealSpots={addHealSpots}
           pickPanel={pickPanel}
           pickPanelAt={pickedAt}
           // FRAME's custom mark owns a box on the photo while its panel is

docker/frontend/src/engine/exportEngine.ts

@@ -34,7 +34,7 @@ import {
 } from '../../shared/utils/toneShader';
 import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from '../../shared/utils/cinemaShader';
 import { CURVE_SKSL, CURVE_LUT_SIZE, curveIsActive, curveLut } from '../../shared/utils/toneCurve';
-import { HEAL_SKSL, healUniforms, readHeal } from '../../shared/utils/heal';
+import { healSkSL, healUniforms, readHeal } from '../../shared/utils/heal';
 import {
   GRAIN_SKSL,
   HALATION_SKSL,
@@ -141,7 +141,6 @@ let cinemaEffect: any = null;
 let glowEffect: any = null;
 let halationEffect: any = null;
 let curveEffect: any = null;
-let healEffect: any = null;
 
 function effects() {
   if (!sharpenEffect) sharpenEffect = Skia.RuntimeEffect.Make(CLARITY_SKSL);
@@ -150,8 +149,22 @@ function effects() {
   if (!glowEffect) glowEffect = Skia.RuntimeEffect.Make(GLOW_SKSL);
   if (!halationEffect) halationEffect = Skia.RuntimeEffect.Make(HALATION_SKSL);
   if (!curveEffect) curveEffect = Skia.RuntimeEffect.Make(CURVE_SKSL);
-  if (!healEffect) healEffect = Skia.RuntimeEffect.Make(HEAL_SKSL);
-  return { sharpenEffect, toneEffect, cinemaEffect, glowEffect, halationEffect, curveEffect, healEffect };
+  return { sharpenEffect, toneEffect, cinemaEffect, glowEffect, halationEffect, curveEffect };
+}
+
+// FX's HEAL is the one effect whose shader depends on the recipe rather than on
+// constants: it carries exactly the spots the photo has (shared/utils/heal.ts),
+// which is what lets the list be uncapped. Every distinct count is therefore a
+// shader of its own, kept here so a stroke's worth of spots is paid for once
+// and every later render at that count is free.
+const healEffects = new Map<number, any>();
+function healEffectFor(count: number): any {
+  let effect = healEffects.get(count);
+  if (effect === undefined) {
+    effect = Skia.RuntimeEffect.Make(healSkSL(count)) ?? null;
+    healEffects.set(count, effect);
+  }
+  return effect;
 }
 
 // CLARITY_SKSL uniforms are (a, px.x, px.y); px = one source pixel = 1 unit on
@@ -635,7 +648,10 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
     // healed spot still carries the frame's own edge.
     const heal = readHeal(adjustments.heal);
     if (heal.length) {
-      const { healEffect: effect } = effects();
+      // The shader for this many spots, cached by count — every spot the recipe
+      // holds is drawn, so no repair is ever dropped to make room for a later
+      // one.
+      const effect = healEffectFor(heal.length);
       flush(surface);
       const snap = own(surface.makeImageSnapshot());
       const child = snap

docker/frontend/src/styles/app.css

@@ -422,9 +422,10 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   touch-action: none;
 }
 /* FX's HEAL brush. The layer takes the pointer the way the eyedropper's does,
-   so a click repairs instead of panning; the circle under the cursor is the
-   size a click lays down, and every spot on the photo keeps the pair the
-   renderer works with — the hole it fills, and the patch it borrowed. */
+   so a click repairs and a drag paints instead of panning; the circle under the
+   cursor is the size the wheel has set, the trail is the stroke being drawn,
+   and every spot on the photo keeps the pair the renderer works with — the hole
+   it fills, and the patch it borrowed. */
 .heal-layer {
   position: absolute;
   border-radius: var(--radius-sm);
@@ -433,6 +434,7 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
 }
 .heal-set { position: absolute; inset: 0; pointer-events: none; }
 .heal-cursor,
+.heal-trail,
 .heal-spot,
 .heal-source {
   position: absolute;
@@ -441,6 +443,9 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   pointer-events: none;
 }
 .heal-cursor { border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
+/* The stroke in progress wears the accent, so the run the pointer has drawn
+   reads as something about to happen rather than a spot already laid. */
+.heal-trail { border: 1px solid var(--accent); }
 .heal-spot { border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
 .heal-source { border: 1px dashed rgba(255, 255, 255, 0.7); }
 /* The mixer's readout: the sampled swatch, its RGB and HSL, and the band the

docker/frontend/src/ui/ImageStage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } fro
 import { useI18n } from '../i18n/I18nProvider';
 import { MIN_CROP_FRAC, type CropRect, type HealSpot } from '../../shared/types';
 import { bitmapReader, samplePixel } from '../engine/imageOps';
-import { findHealSource } from '../../shared/utils/heal';
+import { HEAL_SPACING, findHealSource, wheelHealR } from '../../shared/utils/heal';
 import { measureMark } from '../engine/exportEngine';
 import { Histogram } from './Histogram';
 
@@ -108,7 +108,8 @@ export function ImageStage({
   healing = false,
   healSpots = [],
   healR = 0.02,
-  onHealSpot,
+  onHealR,
+  onHealSpots,
   dims = null,
 }: {
   previewUrl: string | null;
@@ -161,13 +162,16 @@ export function ImageStage({
   // is a fixed square and the photo moves under it.
   curvePanel?: ReactNode;
   // FX's HEAL brush: the circle under the cursor is the size of the spot a
-  // click lays down, and the patch each spot borrows is searched for at the
-  // moment of the click (shared/utils/heal.ts) — off the render on the stage,
-  // which is the picture the repair is being judged against.
+  // gesture lays down (the wheel sets it), and the patch each spot borrows is
+  // searched for at the end of the gesture (shared/utils/heal.ts) — off the
+  // render on the stage, which is the picture the repair is being judged
+  // against. One gesture reports its spots together, and one gesture is one
+  // undo step however many spots it laid.
   healing?: boolean;
   healSpots?: HealSpot[];
   healR?: number;
-  onHealSpot?: (spot: HealSpot) => void;
+  onHealR?: (r: number) => void;
+  onHealSpots?: (spots: HealSpot[]) => void;
   // 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.
@@ -347,34 +351,105 @@ export function ImageStage({
     [previewUrl, onPickColor]
   );
 
-  // FX's HEAL brush. One click lays one spot down: the circle is where the
-  // click landed and the patch is whatever the search finds around it. The
-  // repair is drawn the moment the recipe carries the spot — the same live road
-  // every other knob takes, so the picture answers while the dust is still
-  // under the cursor.
-  const healAt = useCallback(
-    async (e: React.MouseEvent) => {
-      const img = imgRef.current;
-      if (!img || !previewUrl || !onHealSpot) return;
-      const rect = img.getBoundingClientRect();
-      if (!(rect.width > 0 && rect.height > 0)) return;
-      const fx = (e.clientX - rect.left) / rect.width;
-      const fy = (e.clientY - rect.top) / rect.height;
-      if (!(fx >= 0 && fx <= 1 && fy >= 0 && fy <= 1)) return;
-      // The same decode the eyedropper keeps, under the same rule: one bitmap
-      // per URL, and the search reads it a few hundred times rather than once.
-      if (!pickCache.current || pickCache.current.url !== previewUrl) {
-        const blob = await (await fetch(previewUrl)).blob();
-        pickCache.current?.bmp.close();
-        pickCache.current = { url: previewUrl, bmp: await createImageBitmap(blob) };
-      }
-      const src = findHealSource(bitmapReader(pickCache.current.bmp), fx, fy, healR);
-      // No candidate patch means no honest repair: the spot then borrows its own
-      // pixels, which is a way of doing nothing rather than a blind guess.
-      onHealSpot({ x: fx, y: fy, r: healR, sx: src ? src.sx : fx, sy: src ? src.sy : fy });
-    },
-    [previewUrl, onHealSpot, healR]
-  );
+  // FX's HEAL brush. The pointer paints: a click is a stroke of one spot, and a
+  // drag lays a run of them, one every HEAL_SPACING radii of travel, so a
+  // scratch of dust is one gesture rather than twenty clicks. The run is turned
+  // into spots when the pointer comes up and reported in one go — the repair
+  // lands with the gesture rather than under it, and that is what keeps one
+  // stroke to one undo step however long it was — while the trail being painted
+  // is drawn from the pointer track as it moves.
+  type HealPoint = { fx: number; fy: number; px: number; py: number };
+  const strokeRef = useRef<{ pts: HealPoint[]; w: number } | null>(null);
+  const [healTrail, setHealTrail] = useState<HealPoint[]>([]);
+
+  // The same decode the eyedropper keeps, under the same rule: one bitmap per
+  // URL, and the search reads it a few hundred times rather than once.
+  const healReader = useCallback(async () => {
+    if (!previewUrl) return null;
+    if (!pickCache.current || pickCache.current.url !== previewUrl) {
+      const blob = await (await fetch(previewUrl)).blob();
+      pickCache.current?.bmp.close();
+      pickCache.current = { url: previewUrl, bmp: await createImageBitmap(blob) };
+    }
+    return bitmapReader(pickCache.current.bmp);
+  }, [previewUrl]);
+
+  // A pointer position as both a fraction of the render (what a spot stores)
+  // and a pixel offset in the photo's box (what the spacing is measured in).
+  // Off the photo there is no point: a stroke may run out over the frame and
+  // come back, and the part outside lays nothing down.
+  const healPoint = useCallback((clientX: number, clientY: number): HealPoint | null => {
+    const img = imgRef.current;
+    if (!img) return null;
+    const rect = img.getBoundingClientRect();
+    if (!(rect.width > 0 && rect.height > 0)) return null;
+    const fx = (clientX - rect.left) / rect.width;
+    const fy = (clientY - rect.top) / rect.height;
+    if (!(fx >= 0 && fx <= 1 && fy >= 0 && fy <= 1)) return null;
+    return { fx, fy, px: clientX - rect.left, py: clientY - rect.top };
+  }, []);
+
+  const healDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!onHealSpots) return;
+    const p = healPoint(e.clientX, e.clientY);
+    if (!p) return;
+    // Capture, so a stroke that runs off the photo still ends where the
+    // pointer does instead of leaving a spot hanging at the edge.
+    e.currentTarget.setPointerCapture(e.pointerId);
+    strokeRef.current = { pts: [p], w: imgRef.current?.getBoundingClientRect().width ?? 0 };
+    setHealTrail([p]);
+  };
+
+  const healMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    setHealPos({ x: e.clientX - r.left, y: e.clientY - r.top });
+    const stroke = strokeRef.current;
+    if (!stroke) return;
+    const p = healPoint(e.clientX, e.clientY);
+    if (!p) return;
+    const last = stroke.pts[stroke.pts.length - 1];
+    // The spacing is a fraction of the brush, measured in the photo's own
+    // pixels: any closer and the run is the same repair written twice.
+    if (Math.hypot(p.px - last.px, p.py - last.py) < Math.max(1, healR * stroke.w * HEAL_SPACING)) return;
+    stroke.pts.push(p);
+    setHealTrail(stroke.pts.slice());
+  };
+
+  const healUp = useCallback(async () => {
+    const stroke = strokeRef.current;
+    strokeRef.current = null;
+    setHealTrail([]);
+    if (!stroke || !onHealSpots) return;
+    const reader = await healReader();
+    if (!reader) return;
+    // No candidate patch means no honest repair: that spot then borrows its own
+    // pixels, which is a way of doing nothing rather than a blind guess.
+    onHealSpots(
+      stroke.pts.map((p) => {
+        const src = findHealSource(reader, p.fx, p.fy, healR);
+        return { x: p.fx, y: p.fy, r: healR, sx: src ? src.sx : p.fx, sy: src ? src.sy : p.fy };
+      })
+    );
+  }, [healR, healReader, onHealSpots]);
+
+  // The wheel is the brush's size. It is bound natively rather than through
+  // React's own onWheel because that one is passive: the wheel would scroll the
+  // page under the brush instead of growing it. The layer is a child of the
+  // stage that also listens for the wheel (its own zoom), so the event is
+  // stopped here as well: while the brush is up the wheel sizes the brush and
+  // nothing else.
+  const healLayerRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const el = healLayerRef.current;
+    if (!el || !onHealR) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onHealR(wheelHealR(healR, e.deltaY));
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [onHealR, healR, healing]);
 
   // The img's box at scale 1 — the natural size fitted into the wrap, never
   // enlarged. Computed rather than measured so the transform cannot feed back
@@ -822,14 +897,16 @@ export function ImageStage({
           ) : null}
           {/* FX's HEAL brush. The layer swallows the pointer the way the
               eyedropper's does, so a click repairs instead of panning the
-              photo; the circle rides the cursor at the size a spot will be, and
-              every spot already laid down keeps its own circle on the picture —
-              the drawn circle and the borrowed patch, the pair the renderer
-              works with. */}
+              photo and a drag paints instead; the circle rides the cursor at
+              the size a spot will be, the wheel changes that size, and every
+              spot already laid down keeps its own circle on the picture — the
+              drawn circle and the borrowed patch, the pair the renderer works
+              with. */}
           {healing && !cropEditing && box ? (
             <div
               className="heal-layer"
               data-key="heal-layer"
+              ref={healLayerRef}
               style={{
                 left: box.left,
                 top: box.top,
@@ -838,14 +915,33 @@ export function ImageStage({
                 transform:
                   view.s === 1 ? undefined : `translate(${view.x}px, ${view.y}px) scale(${view.s})`,
               }}
-              onPointerDown={(e) => e.stopPropagation()}
-              onPointerMove={(e) => {
-                const r = e.currentTarget.getBoundingClientRect();
-                setHealPos({ x: e.clientX - r.left, y: e.clientY - r.top });
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                healDown(e);
               }}
+              onPointerMove={healMove}
               onPointerLeave={() => setHealPos(null)}
-              onClick={healAt}
+              onPointerUp={healUp}
+              onPointerCancel={() => {
+                strokeRef.current = null;
+                setHealTrail([]);
+              }}
             >
+              {/* The stroke being painted: the run the pointer has drawn so
+                  far, at the brush's size, before it becomes repairs. */}
+              {healTrail.map((t, i) => (
+                <span
+                  className="heal-trail"
+                  data-key="heal-trail"
+                  key={i}
+                  style={{
+                    left: `${t.fx * 100}%`,
+                    top: `${t.fy * 100}%`,
+                    width: 2 * healR * box.width,
+                    height: 2 * healR * box.width,
+                  }}
+                />
+              ))}
               {healSpots.map((s, i) => {
                 // r is a fraction of the photo's WIDTH, so the circle is round
                 // whatever the picture's shape is — the same measurement the