FX vignetting, LIGHT vibrance/saturation, reticle unlock

- FX: new VIGNETTING 0-10 control (chip + slider). Darkens the four
  corners of the photo with a radial gradient whose radius is the photo
  diagonal/2, so the falloff stays circular on any aspect. Applied in
  preview (camera overlay, polaroid/wall window, plain library) and in
  exportEngine pass 6b, always on the picture, never on the mat.
- LIGHT: new VIBRANCE -10..+10 (chroma-masked saturation in the tone
  shader: vivid pixels move least). Renamed the existing saturation
  control chip from COLOR to SATURATION - same param, clearer label.
- Fix: <Shader> takes a RuntimeEffect, not a gradient SkShader; the
  preview vignette threw "Object is not a HostObject" when it got one.
  Use the declarative <RadialGradient> child on the Rect instead.
- Preview: drop the "AE/AF LOCKED - TAP TO UNLOCK" banner; the lock
  reticle is now itself the unlock touch target.

src/utils/exportEngine.ts

@@ -208,7 +208,7 @@ export async function processAndExportPhoto(
           FilterMode.Linear,
           MipmapMode.None
         );
-        toneShader = toneEffect.makeShaderWithChildren([tone.dr, tone.hl, tone.sh], [imageShader]);
+        toneShader = toneEffect.makeShaderWithChildren([tone.dr, tone.hl, tone.sh, tone.vib], [imageShader]);
         if (toneShader) {
           paint.setShader(toneShader);
         } else {
@@ -371,6 +371,30 @@ export async function processAndExportPhoto(
       }
     }
 
+    // 6b. Vignetting: darken the four corners of the PHOTO. Radial gradient
+    // (clear through the mid-frame, black at the corners) whose radius is the
+    // photo diagonal/2, so the falloff stays circular on any aspect. Runs
+    // before the frame step, so on a polaroid/wall export the darkening lands
+    // on the picture inside the opening, never on the mat.
+    // ponytail: one amount knob (the Fuji-style VIGNETTING control); split into
+    // amount + radius/midpoint only if users ask to move the falloff.
+    if ((adjustments.vignette ?? 0) > 0) {
+      const v = Math.min(10, adjustments.vignette ?? 0) / 10;
+      const vignetteShader = Skia.Shader.MakeRadialGradient(
+        Skia.Point(width / 2, height / 2),
+        Math.hypot(width, height) / 2,
+        [Skia.Color('rgba(0,0,0,0)'), Skia.Color('rgba(0,0,0,0)'), Skia.Color('rgba(0,0,0,1)')],
+        [0, 0.45, 1],
+        TileMode.Clamp
+      );
+      if (vignetteShader) {
+        const vignettePaint = Skia.Paint();
+        vignettePaint.setShader(vignetteShader);
+        vignettePaint.setAlphaf(0.9 * v);
+        canvas.drawRect(Skia.XYWHRect(0, 0, width, height), vignettePaint);
+      }
+    }
+
     // 7. Frame. RETRO POLAROID is not a border drawn on the photo: the whole
     // processed picture is composited, uncropped, into the window of a bigger
     // off-white card (real print proportions, see frameUtils) — the export IS

src/utils/paramDefs.ts

@@ -60,7 +60,7 @@ export const PARAM_DEFS: {
     },
     {
       key: 'color',
-      label: 'COLOR',
+      label: 'SATURATION',
       min: -10,
       max: 10,
       step: 1,
@@ -69,6 +69,17 @@ export const PARAM_DEFS: {
       get: (a) => a.saturation,
       set: (v) => ({ saturation: v }),
     },
+    {
+      key: 'vibrance',
+      label: 'VIBRANCE',
+      min: -10,
+      max: 10,
+      step: 1,
+      defaultValue: 0,
+      display: sign,
+      get: (a) => a.vibrance ?? 0,
+      set: (v) => ({ vibrance: v }),
+    },
     {
       key: 'highlight',
       label: 'HIGHLIGHT',
@@ -172,5 +183,16 @@ export const PARAM_DEFS: {
       get: (a) => a.hdf ?? 0,
       set: (v) => ({ hdf: v }),
     },
+    {
+      key: 'vignette',
+      label: 'VIGNETTING',
+      min: 0,
+      max: 10,
+      step: 1,
+      defaultValue: 0,
+      display: String,
+      get: (a) => a.vignette ?? 0,
+      set: (v) => ({ vignette: v }),
+    },
   ],
 };

src/utils/toneShader.ts

@@ -22,11 +22,16 @@ import { ColorAdjustments } from '../types';
 //       (Fuji extended DR); 0/auto/DR100 = no extra curve.
 // hl  - highlight -1..1: + lifts toward white, - rolls the bright side down.
 // sh  - shadow    -1..1: + lifts the dark side, - deepens it.
+// vib - vibrance -1..1: chroma-masked saturation. It rides along in this shader
+//       (rather than the colour matrix) because it needs per-pixel chroma:
+//       already-vivid pixels move least, so skins/skies deepen without the neon
+//       clip a plain Saturation boost causes. All-zero still = no pass.
 export const TONE_SKSL = `
 uniform shader src;
 uniform float dr;
 uniform float hl;
 uniform float sh;
+uniform float vib;
 vec4 main(vec2 xy) {
   vec4 c = src.eval(xy);
   float t = clamp(dot(c.rgb, vec3(0.2126, 0.7152, 0.0722)), 0.0, 1.0);
@@ -50,7 +55,14 @@ vec4 main(vec2 xy) {
   o += dr * 0.12 * shMask * (1.0 - t);
   o -= dr * 0.18 * hlMask * t;
   float f = clamp(o / max(t, 0.0004), 0.0, 4.0);
-  return vec4(clamp(c.rgb * f, 0.0, 1.0), c.a);
+  vec3 rgb = clamp(c.rgb * f, 0.0, 1.0);
+  // Vibrance: push the LESS-saturated pixels harder than the vivid ones.
+  float l2 = dot(rgb, vec3(0.2126, 0.7152, 0.0722));
+  float mx = max(max(rgb.r, rgb.g), rgb.b);
+  float mn = min(min(rgb.r, rgb.g), rgb.b);
+  float chroma = mx > 0.0001 ? (mx - mn) / mx : 0.0;
+  float kv = 1.0 + vib * 0.75 * (1.0 - chroma);
+  return vec4(clamp(mix(vec3(l2), rgb, kv), 0.0, 1.0), c.a);
 }
 `;
 
@@ -59,6 +71,7 @@ export interface ToneUniforms {
   dr: number; // 0..1
   hl: number; // -1..1 (adjustments.highlight / 10)
   sh: number; // -1..1 (adjustments.shadow / 10)
+  vib: number; // -1..1 (adjustments.vibrance / 10)
 }
 
 export function getToneUniforms(adj: ColorAdjustments): ToneUniforms {
@@ -66,9 +79,10 @@ export function getToneUniforms(adj: ColorAdjustments): ToneUniforms {
   const dr = drRaw === 'auto' || drRaw === 100 ? 0 : (drRaw - 100) / 300;
   const hl = Math.max(-1, Math.min(1, (adj.highlight ?? 0) / 10));
   const sh = Math.max(-1, Math.min(1, (adj.shadow ?? 0) / 10));
-  return { dr, hl, sh };
+  const vib = Math.max(-1, Math.min(1, (adj.vibrance ?? 0) / 10));
+  return { dr, hl, sh, vib };
 }
 
 export function toneIsActive(u: ToneUniforms): boolean {
-  return u.dr !== 0 || u.hl !== 0 || u.sh !== 0;
+  return u.dr !== 0 || u.hl !== 0 || u.sh !== 0 || u.vib !== 0;
 }