web: give the grain a size of its own, and read the count off the print

MONOCHROME GRAIN was one integer knob 0..10 with one meaning, how much. It is now
a strip of three: AMOUNT — the same knob, in half steps — SIZE, a percentage of
the stock's own grain cell (50..200%, so the same number means the same texture
relative to the picture on both platforms), and an inert readout of N/INCH, the
clump count the two knobs and the stock add up to in the print's own terms (300
dpi = 300px of the 1080-wide reference the knob was tuned at).

Emulsion is not one grain size across the frame: the coating settles unevenly.
The field now prints that — the same hash read slowly (ZONE_FREQ = 1/96 cells,
turned off the axes, smoothed so a border between two patches is a slope and not
a seam) swings each patch's own cell by half of ZONE_SWING either way, ±20%.
Nothing in it moves the field's mean: a coarser patch prints bigger clumps, not a
brighter one, which is why the strip can read out one number while the frame
carries a range.

A patch may not swing a cell under the pixel the target can print, or the clumps
are sub-pixel and print as static — aliasing, not a finer emulsion. The shader
takes that floor as a `mincell` uniform beside the cell (u, mincell, seed.xy, in
declaration order): an export passes one output pixel, a preview one device pixel
(1 / PixelRatio), which is the floor the phone's preview already needed.

SIZE is stored as an integer percent so no float noise reaches the recipe JSON,
and it is read by the same two engines that read grain: the web's
grainCell(width, stock, sizePct) and the phone's grainCell(width, minCell,
sizePct). The chip above the strip carries the amount in half steps the way TEMP
carries the kelvin, and the readout moves with SIZE, not with AMOUNT.

Measured:
  grain-controls-test.cjs 20/0 — the strip carries grp-grain, grain:amount,
    grain:size and grain-inch; the AMOUNT ruler is 0..10 step 0.5, and 3 -> 3.5
    moves the frame (sigma 18.53 -> 21.91, new hash) without moving the readout;
    10 -> sigma 60.43, 0 -> sigma 0; SIZE 200% -> 130/INCH (sigma 40.06), 50% ->
    522/INCH (66.56: under the preview's pixel floor what is printed is static,
    not finer grain); the region claim on an 8x8 grid of the flat frame gives
    tile sd 51.0..66.1, max/min 1.295, and a tile mean spread of 1.14 — a coarser
    patch is not a brighter one.
  grain-size-test.cjs 17/0 (was 12/0) — the SIZE rule and the readout on the
    module itself: 200% doubles the cell, 50% halves it, the output pixel still
    floors the smaller one. 4000px file cell 3.704 against 1.083 device px on a 3x
    preview, the old one-dp floor 2.77x coarser, rho1 0.627 against 0.074. The
    harness built its own 3-uniform array; it now passes [u, mincell, seed.xy]
    like every other caller.
  _grain-zone-ck.cjs — the zone's own contribution, at preview scale (cell 1.70,
    1600px, 8x8 tiles of 200px): zone on, tile sd 23.22..24.82 (ratio 1.069);
    zone off, 24.42..24.79 (ratio 1.015). Nothing else differs.
  _grain-ck.cjs — the clump field is otherwise what it was: rho1 0.62
    classic-neg / 0.12 velvia, residual autocorr 0.035 against 0.036 with the
    swing forced to 0, peak/median 32.3 against 27.6.
  _grain-spectrum.cjs (app, 1600px render) — residual autocorr 0.017..0.018,
    spectral peak/median 4.6..6.1: the slow lattice adds no peak of its own.
  grain-stock-test 53/0, sims-test 31/0, fx-mono-test 15/0, wb-preset-test 33/0,
    temp-swatch-test 33/0, wm-font-test 38/0, grain-analog-test 7/0 (its grain
    selectors moved to the strip).
  tsc: web clean; the phone's scoped config reports exactly the pre-change
    baseline (Viewfinder.tsx's own errors, none new).

ponytail: the amount is fractional now, so the two recipe-create forms read grain
through their own half() instead of the int() that would truncate the half the
ruler just spent — every other knob there is still whole. The SIZE knob is one
number for the whole strip: no way to dial a single patch, and no seed control.
The readout is the DESIGN count the field is built on, never a per-patch
measurement.

docker/frontend/src/App.tsx

@@ -34,6 +34,7 @@ import {
   type Recipe,
 } from '../shared/types';
 import { HSL_BANDS, isMonochromeBase, kelvinToRGB, nearestHslBand, rgbToHsl } from '../shared/utils/colorUtils';
+import { grainPerInch, grainStockFor } from '../shared/utils/grainShader';
 import type { MsgKey } from './i18n/vi';
 
 // Mirrors the API's MAX_PHOTOS_PER_USER: shown on SAVE PHOTO, enforced there.
@@ -157,12 +158,17 @@ const SLIDER_SWATCH: Partial<Record<string, (v: number) => string>> = {
 
 // The option strips, one open at a time (phone's GroupKey set minus the groups
 // the web engine has no knob for).
-type GroupKey = 'cx' | 'cxb' | 'dr' | 'crop' | 'rotate' | 'style' | 'temp' | 'wm'
+type GroupKey = 'cx' | 'cxb' | 'dr' | 'crop' | 'rotate' | 'style' | 'temp' | 'grain' | 'wm'
   | 'wmColor' | 'wmSize' | 'wmFont' | 'gpsColor' | 'gpsName' | 'gpsTime' | 'gpsFont';
 const WM_SUBGROUPS: GroupKey[] = ['wmColor', 'wmSize', 'wmFont', 'gpsColor', 'gpsName', 'gpsTime', 'gpsFont'];
 const isWmPanel = (g: GroupKey | null) => g === 'wm' || (g !== null && WM_SUBGROUPS.includes(g));
 // A slider row opened from a strip returns to it with "<" (COLOR TEMP -> TEMP).
-const PARAM_GROUP: Partial<Record<string, GroupKey>> = { temperature: 'temp', straighten: 'rotate' };
+const PARAM_GROUP: Partial<Record<string, GroupKey>> = {
+  temperature: 'temp',
+  straighten: 'rotate',
+  grain: 'grain',
+  grainSize: 'grain',
+};
 
 const CHROME_OPTIONS = [
   { v: 'none', d: 'OFF' },
@@ -1201,7 +1207,10 @@ export function Workspace() {
   const strip = useMemo(() => {
     const name = (recipe.name || 'RECIPE').trim();
     const slug = name.replace(/[^\p{L}\p{N}]+/gu, '_').replace(/^_+|_+$/g, '').toUpperCase();
-    const grain = Math.max(0, Math.round(recipe.adjustments.grain ?? 0));
+    // The amount is on half steps now, so the tag prints the half it was set to
+    // instead of rounding a 3.5 to a 4 the frame does not carry.
+    const grainValue = Math.max(0, recipe.adjustments.grain ?? 0);
+    const grain = Number.isInteger(grainValue) ? String(grainValue) : grainValue.toFixed(1);
     const warmth = Math.round((recipe.adjustments.temperature - 5500) / 250);
     const tail = isMonochromeBase(recipe.baseFilter) ? 'MONO' : `WARMTH ${warmth >= 0 ? '+' : ''}${warmth}`;
     return { tag: `#${slug || 'RECIPE'}`, title: name, meta: `ISO ${iso ?? 'AUTO'} · GRAIN ${grain} · ${tail}` };
@@ -1794,6 +1803,13 @@ export function Workspace() {
     const v = wbValue();
     return WB_PRESETS.find((w) => w.key === v)?.label ?? v;
   };
+  // GRAIN's readout: the clump count the stock and the SIZE knob add up to, in
+  // the print's own terms (grainPerInch, grainShader.ts). A READOUT, not a pick —
+  // the strip prints it beside the two knobs that move it. The field swings a
+  // fifth of it patch by patch, which is what the knob is for, not an error in
+  // the number.
+  const grainInch = (): string =>
+    `${grainPerInch(grainStockFor(recipe.baseFilter), recipe.adjustments.grainSize ?? 100)}/INCH`;
   const groupDefs: Record<Exclude<GroupKey, 'wm'>, {
     label: string;
     off: string;
@@ -1886,6 +1902,23 @@ export function Workspace() {
         setAdjustment({ temperature: p.kelvin, tint: p.tint });
       },
     },
+    // MONOCHROME GRAIN: the amount and the size of the clumps, then the count
+    // they add up to. The two knobs and their readout share one strip because
+    // they are one subject; the chip above them carries the amount, the way TEMP
+    // carries the kelvin.
+    grain: {
+      label: 'MONOCHROME GRAIN', off: '0',
+      // While a ruler is open its own entry is what the chip names, the way
+      // ROTATE's STRAIGHTEN does on the phone; otherwise it carries the amount,
+      // which is the one the strip is about.
+      value:
+        openParam === 'grain' ? 'amount' : openParam === 'grainSize' ? 'size' : String(recipe.adjustments.grain),
+      options: [
+        { v: 'amount', d: 'AMOUNT' },
+        { v: 'size', d: 'SIZE' },
+      ],
+      onPick: (v) => toggleParam(v === 'size' ? 'grainSize' : 'grain'),
+    },
     wmColor: {
       label: 'TEXT COLOR', off: '#ffffff', value: markStyle.color,
       options: WM_COLORS,
@@ -2197,7 +2230,12 @@ export function Workspace() {
       case 'fx':
         return [
           { key: 'mono', label: 'MONOCHROME', active: monoOn, onClick: toggleMono },
-          ...paramChips(PARAM_DEFS.filters),
+          // GRAIN is a strip of its own — amount, size, and the count they add up
+          // to — so it is one chip here and its two knobs live inside it; the
+          // chip keeps the place the knob had in this row.
+          ...PARAM_DEFS.filters.flatMap((p): ChipDef[] =>
+            p.key === 'grain' ? [groupChip('grain')] : p.key === 'grainSize' ? [] : paramChips([p])
+          ),
         ];
       case 'hsl': {
         // The mixer is PRO: the picker, the eight bands and the three
@@ -2271,6 +2309,10 @@ export function Workspace() {
           { key: 'crop-cancel', label: t('crop.cancel'), onClick: cancelCrop },
         ]
       : []),
+    // GRAIN's third entry is a READOUT: the clump count the two knobs add up to,
+    // in the print's own terms. Nothing to pick, so it is inert — it moves when a
+    // knob moves.
+    ...(g === 'grain' ? [{ key: 'grain-inch', label: grainInch(), disabled: true, onClick: () => {} }] : []),
     // STRAIGHTEN is the ROTATE strip's one entry that opens a ruler instead of
     // picking a value: the quarter turns are choices, the angle is a knob.
     ...(g === 'rotate'

docker/frontend/src/engine/exportEngine.ts

@@ -531,7 +531,7 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
       grainPaint.setBlendMode(Skia.BlendMode.Overlay);
       grainPaint.setAlphaf(grainAmount / 20);
       const noiseEffect = own(Skia.RuntimeEffect.Make(GRAIN_SKSL));
-      const cell = grainCell(width, stock);
+      const cell = grainCell(width, stock, adjustments.grainSize);
       const noiseShader = noiseEffect ? own(noiseEffect.makeShader(grainUniformArray(cell, stock))) : null;
       if (noiseShader) {
         grainPaint.setShader(noiseShader);

docker/frontend/src/ui/RecipeCreatePanel.tsx

@@ -47,6 +47,15 @@ const int = (s: string, fallback: number, lo: number, hi: number) => {
   return Number.isFinite(n) ? clamp(n, lo, hi) : fallback;
 };
 
+// GRAIN's own row: the ruler spends HALF steps (paramDefs.ts), so the form must
+// not drop the half the strip was showing — the chips are its coarse picks, and
+// the live value rides along on a chip of its own. Only grain is read this way;
+// every other knob here is a whole number.
+const half = (s: string, fallback: number, lo: number, hi: number) => {
+  const n = Number(s);
+  return Number.isFinite(n) ? clamp(Math.round(n * 2) / 2, lo, hi) : fallback;
+};
+
 const wbKeyOf = (s: ColorAdjustments) =>
   WB_KEYS.find((k) => {
     const p = WB_PRESETS.find((w) => w.key === k)!;
@@ -175,7 +184,7 @@ export function RecipeCreatePanel({
       denoise: int(fNr, simAdj.denoise, -10, 10),
       sharpening: int(fSharp, simAdj.sharpening, -10, 10),
       clarity: int(fClarity, simAdj.clarity, -10, 10),
-      grain: int(grain, seedAdj.grain, 0, 10),
+      grain: half(grain, seedAdj.grain, 0, 10),
       colorChrome: cc as ColorAdjustments['colorChrome'],
       colorChromeBlue: ccb as ColorAdjustments['colorChromeBlue'],
       dynamicRange: (dr === 'auto' ? 'auto' : parseInt(dr, 10)) as ColorAdjustments['dynamicRange'],