@radialapps/memories-vips-editor 0.1.2 → 0.1.5

package/dist/transforms/warmth.js

@@ -0,0 +1,46 @@
+// warmth.ts — white-balance-style temperature shift (red/blue gains).
+//
+// r *= 1 + 0.3*amount, b *= 1 - 0.3*amount, g unchanged: +1 is warm
+// (amber), -1 is cool (blue). Blacks stay black (multiplicative, like a
+// white-balance gain). Same factors in src/transforms/warmth.h and
+// math.ts warmthGains, so the canvas preview is WYSIWYG.
+import { clampf } from '../math.js';
+import { isNumInRange, setFloatUniform, } from './transform.js';
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  color.r *= 1.0 + amount * 0.3;
+  color.b *= 1.0 - amount * 0.3;
+  gl_FragColor = color;
+}
+`;
+export class WarmthTransform {
+    constructor() {
+        this.edit = 'warmth';
+        this.controls = [
+            { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+        ];
+    }
+    defaults() {
+        return { edit: 'warmth', amount: 0 };
+    }
+    validate(params) {
+        if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+            return ['amount must be a number in [-1,1]'];
+        return [];
+    }
+    normalize(params) {
+        return { edit: 'warmth', amount: clampf(-1, params.amount ?? 0, 1) };
+    }
+    apply(ctx, from, to, params) {
+        ctx.pass(FRAG, from, to, (gl, p) => {
+            setFloatUniform(gl, p, 'amount', params.amount);
+        });
+        return to;
+    }
+}
+//# sourceMappingURL=warmth.js.map

package/dist/transforms/warmth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warmth.js","sourceRoot":"","sources":["../../src/transforms/warmth.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,EAAE;AACF,oEAAoE;AACpE,wEAAwE;AACxE,mEAAmE;AACnE,yDAAyD;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,eAAe,GAKhB,MAAM,gBAAgB,CAAC;AAUxB,MAAM,IAAI,GAAG;;;;;;;;;;;CAWZ,CAAC;AAEF,MAAM,OAAO,eAAe;IAA5B;QACkB,SAAI,GAAG,QAAiB,CAAC;QAClC,aAAQ,GAAmB;YAChC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;SACxE,CAAC;IAsBJ,CAAC;IApBQ,QAAQ;QACb,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IACvC,CAAC;IAEM,QAAQ,CAAC,MAAkB;QAChC,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACpE,OAAO,CAAC,mCAAmC,CAAC,CAAC;QAC/C,OAAO,EAAE,CAAC;IACZ,CAAC;IAEM,SAAS,CAAC,MAAkB;QACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAEM,KAAK,CAAC,GAAkB,EAAE,IAAY,EAAE,EAAU,EAAE,MAAY;QACrE,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACjC,eAAe,CAAC,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,OAAO,EAAE,CAAC;IACZ,CAAC;CACF"}

package/dist/types.d.ts

@@ -3,15 +3,18 @@ import type { BrightnessContrastEdit } from './transforms/brightnessContrast.js'
 import type { CropEdit } from './transforms/crop.js';
 import type { ExposureEdit } from './transforms/exposure.js';
 import type { GrayscaleEdit } from './transforms/grayscale.js';
+import type { HighlightsEdit } from './transforms/highlights.js';
 import type { HueSaturationEdit } from './transforms/hueSaturation.js';
 import type { InvertEdit } from './transforms/invert.js';
 import type { RotateEdit } from './transforms/rotate.js';
 import type { SepiaEdit } from './transforms/sepia.js';
+import type { ShadowsEdit } from './transforms/shadows.js';
 import type { SharpenEdit } from './transforms/sharpen.js';
 import type { VibranceEdit } from './transforms/vibrance.js';
 import type { VignetteEdit } from './transforms/vignette.js';
-export type EditName = 'brightnessContrast' | 'exposure' | 'hueSaturation' | 'sepia' | 'vibrance' | 'blur' | 'sharpen' | 'vignette' | 'invert' | 'grayscale' | 'crop' | 'rotate';
-export type Edit = BrightnessContrastEdit | ExposureEdit | HueSaturationEdit | SepiaEdit | VibranceEdit | BlurEdit | SharpenEdit | VignetteEdit | InvertEdit | GrayscaleEdit | CropEdit | RotateEdit;
+import type { WarmthEdit } from './transforms/warmth.js';
+export type EditName = 'brightnessContrast' | 'exposure' | 'hueSaturation' | 'sepia' | 'vibrance' | 'blur' | 'sharpen' | 'vignette' | 'shadows' | 'highlights' | 'warmth' | 'invert' | 'grayscale' | 'crop' | 'rotate';
+export type Edit = BrightnessContrastEdit | ExposureEdit | HueSaturationEdit | SepiaEdit | VibranceEdit | BlurEdit | SharpenEdit | VignetteEdit | ShadowsEdit | HighlightsEdit | WarmthEdit | InvertEdit | GrayscaleEdit | CropEdit | RotateEdit;
 export declare const EDIT_STATE_VERSION: 1;
 export interface EditState {
     version: typeof EDIT_STATE_VERSION;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,MAAM,QAAQ,GAChB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,OAAO,GACP,UAAU,GACV,MAAM,GACN,SAAS,GACT,UAAU,GACV,QAAQ,GACR,WAAW,GACX,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,MAAM,IAAI,GACZ,sBAAsB,GACtB,YAAY,GACZ,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,UAAU,GACV,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AAEf,eAAO,MAAM,kBAAkB,EAAG,CAAU,CAAC;AAE7C,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,wBAAgB,UAAU,IAAI,SAAS,CAEtC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAChB,oBAAoB,GACpB,UAAU,GACV,eAAe,GACf,OAAO,GACP,UAAU,GACV,MAAM,GACN,SAAS,GACT,UAAU,GACV,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,MAAM,IAAI,GACZ,sBAAsB,GACtB,YAAY,GACZ,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,WAAW,GACX,cAAc,GACd,UAAU,GACV,UAAU,GACV,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AAEf,eAAO,MAAM,kBAAkB,EAAG,CAAU,CAAC;AAE7C,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,wBAAgB,UAAU,IAAI,SAAS,CAEtC"}

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAgDA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAU,CAAC;AAO7C,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AACpD,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAyDA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAU,CAAC;AAO7C,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AACpD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@radialapps/memories-vips-editor",
-  "version": "0.1.2",
-  "description": "Headless WebGL preview library for vips-static edits. Renders an ordered op list on a caller-provided canvas; serializes the same list as JSON for the vips-preview CLI (convert/thumbnail ... \"ops\": [...]).",
+  "version": "0.1.5",
+  "description": "Headless WebGL preview library for vips-static edits. Renders an ordered edit list on a caller-provided canvas; serializes the same list as JSON for the vips-preview CLI (convert/thumbnail ... \"edits\": [...]).",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -1,9 +1,10 @@
-// index.ts — minimal public surface: the pipeline, the registry, state
-// helpers, and the types needed to consume them (including writing a
-// custom Transform). Internal helpers (lookup, isNumInRange,
+// index.ts — minimal public surface: the pipeline, small previews, the
+// registry, state helpers, and the types needed to consume them (including
+// writing a custom Transform). Internal helpers (lookup, isNumInRange,
 // setFloatUniform, math utils, per-transform types) live in their own
 // modules — import those directly.
 export { EditPipeline } from './pipeline.js';
+export { SmallPreview } from './smallPreview.js';
 export { TRANSFORMS, validateEdit, normalizeEdit } from './transforms/index.js';
 export { validateState, stateToJSON, stateFromJSON } from './transforms/state.js';
 export type { Transform, ParamControl, RenderContext, Target } from './transforms/transform.js';

package/src/math.ts

@@ -1,14 +1,13 @@
 // math.ts — CPU reference for every edit's pixel math.
 //
 // These functions are the single source of truth shared (by port, not by
-// import) with the GLSL in shaders.ts and the libvips code in src/edit.h:
+// import) with the GLSL in transforms/ and the libvips code in src/transforms/:
 //   preview (WebGL)  ==  math.ts  ==  VIPS applier
 // all operate on sRGB-encoded 0..1 floats and apply in array order.
 //
 // glfx.js inspiration: brightnessContrast / hueSaturation / sepia / vibrance /
-// vignette shaders are direct ports of evanw/glfx.js adjust filters (see
-// shaders.ts); the matrix derivations below match those shaders term for term
-// so a VIPS `recomb`/`linear` does exactly what the canvas showed.
+// vignette shaders are direct ports of evanw/glfx.js adjust filters, so a VIPS
+// `linear` or matrix does exactly what the canvas showed.
 
 export function clampf(lo: number, v: number, hi: number): number {
   return Math.min(hi, Math.max(lo, v));
@@ -19,6 +18,46 @@ export function exposureMult(stops: number): number {
   return Math.pow(2, clampf(-5, stops, 5));
 }
 
+/** Shadows weight for a clamped 0..1 luma: (1-l)^2 (dark-localized). */
+export function shadowsWeight(luma01: number): number {
+  const l = clampf(0, luma01, 1);
+  return (1 - l) * (1 - l);
+}
+
+/** Highlights weight for a clamped 0..1 luma: l^2 (bright-localized). */
+export function highlightsWeight(luma01: number): number {
+  const l = clampf(0, luma01, 1);
+  return l * l;
+}
+
+/** Gray-pixel output of the shadows edit: v + (a*0.5)*(1-v)^2.
+ *
+ * The 0.5 keeps the curve monotonic increasing over the whole amount range
+ * (d/dv = 1-2k(1-v) >= 0 for k <= 0.5): without it black would lift past
+ * mid-gray at high amounts. Reference for the GLSL in shadows.ts and the
+ * loop in src/transforms/shadows.h.
+ */
+export function applyShadowsGray(v: number, amount: number): number {
+  return v + clampf(-1, amount, 1) * 0.5 * shadowsWeight(v);
+}
+
+/** Gray-pixel output of the highlights edit: v + (a*0.5)*v^2.
+ *
+ * The 0.5 keeps the curve monotonic increasing over the whole amount range
+ * (d/dv = 1+2kv >= 0 for k >= -0.5): without it white would recover below
+ * near-white at high negative amounts. Reference for the GLSL in
+ * highlights.ts and the loop in src/transforms/highlights.h.
+ */
+export function applyHighlightsGray(v: number, amount: number): number {
+  return v + clampf(-1, amount, 1) * 0.5 * highlightsWeight(v);
+}
+
+/** Red/blue white-balance gains for a warmth amount in [-1,1]. */
+export function warmthGains(amount: number): { r: number; b: number } {
+  const a = clampf(-1, amount, 1);
+  return { r: 1 + a * 0.3, b: 1 - a * 0.3 };
+}
+
 /** 1D gaussian kernel for a blur radius (sigma = radius/2). Preview + docs.
  *
  * Single source of truth, ported term-for-term to src/transforms/gaussian.h:

package/src/pipeline.ts

@@ -13,8 +13,9 @@
 // array (normalized) is what vips-preview accepts as "edits".
 import { BLIT_FRAG, COPY_FRAG, GAUSS_FRAG, VERT } from './shaders.js';
 import { TRANSFORMS, normalizeEdit } from './transforms/index.js';
+import { stateToJSON } from './transforms/state.js';
 import type { RenderContext, Target, UniformSetter, ExtraTex } from './transforms/transform.js';
-import { emptyState, type Edit, type EditState } from './types.js';
+import { EDIT_STATE_VERSION, emptyState, type Edit, type EditState } from './types.js';
 
 export class EditPipeline {
   private gl: WebGLRenderingContext;
@@ -88,7 +89,7 @@ export class EditPipeline {
 
   /** Replace the whole edit list (normalizing each edit) and re-render. */
   public setEdits(edits: Edit[]): void {
-    this.state = { version: 1, edits: edits.map(normalizeEdit) };
+    this.state = { version: EDIT_STATE_VERSION, edits: edits.map(normalizeEdit) };
     this.render();
   }
 
@@ -119,7 +120,7 @@ export class EditPipeline {
 
   /** Canonical JSON state for the VIPS side. */
   public toJSON(): string {
-    return JSON.stringify({ version: 1 as const, edits: this.state.edits.map(normalizeEdit) });
+    return stateToJSON(this.state);
   }
 
   /**
@@ -182,14 +183,14 @@ export class EditPipeline {
       const g = scratch.getContext('2d');
       if (!g) throw new Error('setImage: 2D context unavailable for downscale');
       g.imageSmoothingQuality = 'high';
-      g.drawImage(source as CanvasImageSource, 0, 0, w, h);
+      g.drawImage(EditPipeline.toDrawableSource(source), 0, 0, w, h);
       upload = scratch;
     }
     this.imgW = w;
     this.imgH = h;
     this.outW = w;
     this.outH = h;
-    this.resScale = dims.w > 0 ? w / dims.w : 1;
+    this.resScale = w / dims.w;
     for (const t of [this.src, this.ping, this.pong, this.extra]) {
       if (t) {
         gl.deleteTexture(t.tex);
@@ -405,10 +406,23 @@ export class EditPipeline {
     to: Target,
     setUniforms?: UniformSetter,
     extraTex?: ExtraTex,
+  ): void {
+    this.draw(frag, from, to.fb, to.w, to.h, setUniforms, extraTex);
+  }
+
+  /** Render `from` through `frag` into a framebuffer (null = the canvas). */
+  private draw(
+    frag: string,
+    from: Target,
+    fb: WebGLFramebuffer | null,
+    w: number,
+    h: number,
+    setUniforms?: UniformSetter,
+    extraTex?: ExtraTex,
   ): void {
     const gl = this.gl;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, to.fb);
-    gl.viewport(0, 0, to.w, to.h);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    gl.viewport(0, 0, w, h);
     const prog = this.program(frag);
     gl.useProgram(prog);
     const loc = gl.getAttribLocation(prog, 'aPos');
@@ -466,25 +480,35 @@ export class EditPipeline {
    * unflipped upload.)
    */
   private toCanvas(from: Target): void {
-    const gl = this.gl;
     if (this.outW <= 0 || this.outH <= 0) return;
     if (this.canvas.width !== this.outW || this.canvas.height !== this.outH) {
       this.canvas.width = this.outW;
       this.canvas.height = this.outH;
     }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.viewport(0, 0, this.outW, this.outH);
-    const prog = this.program(BLIT_FRAG);
-    gl.useProgram(prog);
-    const loc = gl.getAttribLocation(prog, 'aPos');
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
-    gl.enableVertexAttribArray(loc);
-    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, from.tex);
-    const uTex = gl.getUniformLocation(prog, 'texture');
-    if (uTex) gl.uniform1i(uTex, 0);
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    gl.disableVertexAttribArray(loc);
+    this.draw(BLIT_FRAG, from, null, this.outW, this.outH);
+  }
+
+  /**
+   * drawImage() rejects ImageData — a valid TexImageSource that texImage2D
+   * accepts — so stage ImageData through a 2D canvas first. Everything else
+   * passes through untouched. Duck-types ({width,height,data}) instead of
+   * instanceof so cross-realm ImageData works too.
+   */
+  public static toDrawableSource(source: TexImageSource): CanvasImageSource {
+    const o = source as unknown as { data?: unknown; width?: unknown; height?: unknown };
+    if (
+      typeof o.width !== 'number' ||
+      typeof o.height !== 'number' ||
+      !(o.data instanceof Uint8ClampedArray)
+    ) {
+      return source as unknown as CanvasImageSource;
+    }
+    const staged = document.createElement('canvas');
+    staged.width = o.width;
+    staged.height = o.height;
+    const g = staged.getContext('2d');
+    if (!g) throw new Error('toDrawableSource: 2D context unavailable for ImageData upload');
+    g.putImageData(source as ImageData, 0, 0);
+    return staged;
   }
 }

package/src/shaders.ts

@@ -1,10 +1,8 @@
-// shaders.ts — fragment shaders for the preview pipeline.
+// shaders.ts — shared GLSL for the preview pipeline (quad, copy, blit, gaussian).
 //
-// brightnessContrast / hueSaturation / sepia / vibrance / vignette are ports
-// of evanw/glfx.js src/filters/adjust/*.js (same uniforms, same formulas, same
-// clamp ranges). exposure / invert / grayscale / gaussian blur / sharpen-mix
-// are trivial shaders in the same style. The VIPS applier (src/edit.h)
-// implements these exact formulas, so the canvas preview is WYSIWYG.
+// Per-edit shaders live next to their Transform in transforms/. Most are ports
+// of evanw/glfx.js src/filters/adjust/*.js; the VIPS side (src/transforms/)
+// implements the same formulas, so the canvas preview is WYSIWYG.
 
 export const VERT = `
 attribute vec2 aPos;
@@ -29,7 +27,7 @@ void main() {
 }
 `;
 
-/** Final blit to the canvas (un-flip the FLIP_Y upload). */
+/** Final blit to the canvas: flips Y once, compensating the unflipped upload. */
 export const BLIT_FRAG =
   PRELUDE +
   `
@@ -38,7 +36,7 @@ void main() {
 }
 `;
 
-/** Separable gaussian, one axis per draw (dir = (1/w,0) or (0,1/h)). */
+/** Separable gaussian, one axis per draw (dir = (1/w,0) or (0,1/h)). RGB only: alpha stays. */
 export const GAUSS_FRAG =
   PRELUDE +
   `
@@ -46,14 +44,12 @@ uniform vec2 dir;
 uniform float kernel[31];
 uniform int count;
 void main() {
-  vec4 sum = vec4(0.0);
+  vec3 sum = vec3(0.0);
   for (int i = 0; i < 31; i++) {
     if (i >= count) break;
     vec2 off = dir * float(i - (count - 1) / 2);
-    sum += texture2D(texture, texCoord + off) * kernel[i];
+    sum += texture2D(texture, texCoord + off).rgb * kernel[i];
   }
-  gl_FragColor = sum;
+  gl_FragColor = vec4(sum, texture2D(texture, texCoord).a);
 }
 `;
-
-/** glfx unsharp-mix: mix(blurred, original, 1 + strength). */

package/src/smallPreview.ts

@@ -0,0 +1,120 @@
+// smallPreview.ts — cheap small previews for an edit list.
+//
+// A SmallPreview owns one hidden WebGL canvas + EditPipeline plus a
+// downscaled 2D copy of the source (longest side <= maxDim, default 512).
+// setSource() downscales and uploads once; each render() then only re-runs
+// the edit passes and snapshots the result into a fresh caller-owned 2D
+// canvas — no re-upload, no shader recompile, no disturbance of any main
+// preview canvas. Returning a snapshot (not the live canvas) keeps repeated
+// renders safe to hold (e.g. a filmstrip of edit variants).
+//
+// Pixel radii (blur/sharpen) are in preview pixels here, so large radii look
+// relatively stronger than at full res; everything else matches the main
+// preview. Each instance holds one WebGL context: call dispose() when done
+// (browsers cap live contexts at ~16 per page).
+import { EditPipeline } from './pipeline.js';
+import type { Edit } from './types.js';
+
+export class SmallPreview {
+  /** Default longest side of the downscaled working copy. */
+  public static readonly MAX_DIM = 512;
+
+  private pipe: EditPipeline | null = null;
+  private view: HTMLCanvasElement | null = null;
+  private hasSource = false;
+  private readonly maxDim: number;
+
+  public constructor(maxDim: number = SmallPreview.MAX_DIM) {
+    if (!Number.isFinite(maxDim) || maxDim < 1)
+      throw new Error('SmallPreview: maxDim must be a number >= 1');
+    this.maxDim = Math.floor(maxDim);
+  }
+
+  /** Last render output size (downscaled source size when no geometric edit applies). */
+  public get width(): number {
+    return this.pipe?.width ?? 0;
+  }
+  public get height(): number {
+    return this.pipe?.height ?? 0;
+  }
+
+  /**
+   * Downscale `source` to <= maxDim (aspect-fit, never upscaled) through a
+   * 2D canvas and upload it once to the hidden pipeline. Replaces any
+   * previous source. Throws when WebGL/2D is unavailable.
+   */
+  public setSource(source: TexImageSource): void {
+    const dims = this.sourceDims(source);
+    if (!dims.w || !dims.h) throw new Error('setSource: source has no width/height');
+    // drawImage() rejects ImageData: stage it through a 2D canvas first.
+    const drawable = EditPipeline.toDrawableSource(source);
+    const longest = Math.max(dims.w, dims.h);
+    const scale = longest > this.maxDim ? this.maxDim / longest : 1;
+    const w = Math.max(1, Math.round(dims.w * scale));
+    const h = Math.max(1, Math.round(dims.h * scale));
+    const base = document.createElement('canvas');
+    base.width = w;
+    base.height = h;
+    const g = base.getContext('2d');
+    if (!g) throw new Error('setSource: 2D context unavailable for downscale');
+    g.imageSmoothingQuality = 'high';
+    g.drawImage(drawable, 0, 0, w, h);
+    if (!this.pipe || !this.view) {
+      const view = document.createElement('canvas');
+      this.view = view;
+      this.pipe = new EditPipeline(view);
+    }
+    this.pipe.setImage(base);
+    this.hasSource = true;
+  }
+
+  /**
+   * Render `edits` over the downscaled source and return the result as a
+   * fresh caller-owned 2D canvas (sized to the rendered output area).
+   * The hidden pipeline keeps its compiled programs between calls, so
+   * repeated renders only pay for the edit passes plus a small copy.
+   */
+  public render(edits: Edit[]): HTMLCanvasElement {
+    const pipe = this.pipe;
+    const view = this.view;
+    if (!pipe || !view || !this.hasSource)
+      throw new Error('render: no source (call setSource first)');
+    pipe.setEdits(edits);
+    const out = document.createElement('canvas');
+    out.width = pipe.width;
+    out.height = pipe.height;
+    const g = out.getContext('2d');
+    if (!g) throw new Error('render: 2D context unavailable for snapshot');
+    // preserveDrawingBuffer (set by EditPipeline) keeps this reliable.
+    g.drawImage(view, 0, 0);
+    return out;
+  }
+
+  /** Release the hidden WebGL context; render() throws until setSource again. */
+  public dispose(): void {
+    const view = this.view;
+    this.pipe = null;
+    this.view = null;
+    this.hasSource = false;
+    if (!view) return;
+    try {
+      // getContext('webgl') returns the existing context for this canvas.
+      view.getContext('webgl')?.getExtension('WEBGL_lose_context')?.loseContext();
+    } catch {
+      // Context already gone — nothing to release.
+    }
+  }
+
+  /** Pixel size of any TexImageSource upload (mirrors EditPipeline). */
+  private sourceDims(source: TexImageSource): { w: number; h: number } {
+    const anySrc = source as unknown as Record<string, unknown>;
+    const num = (v: unknown): number => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+    const nw = num(anySrc['naturalWidth']);
+    const nh = num(anySrc['naturalHeight']);
+    if (nw > 0 && nh > 0) return { w: nw, h: nh };
+    const vw = num(anySrc['videoWidth']);
+    const vh = num(anySrc['videoHeight']);
+    if (vw > 0 && vh > 0) return { w: vw, h: vh };
+    return { w: num(anySrc['width']), h: num(anySrc['height']) };
+  }
+}

package/src/transforms/crop.ts

@@ -27,6 +27,8 @@ export interface CropEdit {
 
 type Full = Required<CropEdit>;
 
+const MIN_EXTENT = 1e-4;
+
 /** Pixel rect for the given input size; identical to src/transforms/crop.h. */
 export function cropRect(
   inW: number,
@@ -87,23 +89,12 @@ export class CropTransform implements Transform<'crop', CropEdit> {
   }
 
   public normalize(params: CropEdit): Full {
-    let x = clampf(0, params.x ?? 0, 1);
-    let y = clampf(0, params.y ?? 0, 1);
-    let w = clampf(0, params.width ?? 1, 1);
-    let h = clampf(0, params.height ?? 1, 1);
-    if (!(w > 0)) w = Math.min(1, Math.max(1e-4, 1 - x));
-    else w = Math.min(w, 1 - x);
-    if (!(h > 0)) h = Math.min(1, Math.max(1e-4, 1 - y));
-    else h = Math.min(h, 1 - y);
-    if (!(w > 0)) {
-      w = 1e-4;
-      x = 1 - w;
-    }
-    if (!(h > 0)) {
-      h = 1e-4;
-      y = 1 - h;
-    }
-    return { edit: 'crop', x, y, width: w, height: h };
+    // Keep at least MIN_EXTENT of frame: the renderer rounds that to 1px.
+    const x = clampf(0, params.x ?? 0, 1 - MIN_EXTENT);
+    const y = clampf(0, params.y ?? 0, 1 - MIN_EXTENT);
+    const width = clampf(MIN_EXTENT, params.width ?? 1, 1 - x);
+    const height = clampf(MIN_EXTENT, params.height ?? 1, 1 - y);
+    return { edit: 'crop', x, y, width, height };
   }
 
   public outputDims(inW: number, inH: number, params: Full): { w: number; h: number } {

package/src/transforms/highlights.ts

@@ -0,0 +1,67 @@
+// highlights.ts — boost/recover the bright end, weighted by brightness.
+//
+// weight w = clamp(avg,0,1)^2 (0 in blacks, 1 in whites, quadratic falloff),
+// then rgb += (amount * 0.5) * w. The 0.5 keeps the gray curve monotonic over
+// the whole slider range (a full-strength recovery would push white below
+// near-white). Same formula in src/transforms/highlights.h and
+// math.ts applyHighlights, so the canvas preview is WYSIWYG.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface HighlightsEdit {
+  edit: 'highlights';
+  /** -1 (recover highlights) .. 1 (boost highlights). Default 0. */
+  amount?: number;
+}
+
+type Full = Required<HighlightsEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float avg = (color.r + color.g + color.b) / 3.0;
+  float l = clamp(avg, 0.0, 1.0);
+  float w = l * l;
+  color.rgb += (amount * 0.5) * w;
+  gl_FragColor = color;
+}
+`;
+
+export class HighlightsTransform implements Transform<'highlights', HighlightsEdit> {
+  public readonly edit = 'highlights' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'highlights', amount: 0 };
+  }
+
+  public validate(params: HighlightsEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+      return ['amount must be a number in [-1,1]'];
+    return [];
+  }
+
+  public normalize(params: HighlightsEdit): Full {
+    return { edit: 'highlights', amount: clampf(-1, params.amount ?? 0, 1) };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'amount', params.amount);
+    });
+    return to;
+  }
+}

package/src/transforms/index.ts

@@ -10,13 +10,16 @@ import { BrightnessContrastTransform } from './brightnessContrast.js';
 import { CropTransform } from './crop.js';
 import { ExposureTransform } from './exposure.js';
 import { GrayscaleTransform } from './grayscale.js';
+import { HighlightsTransform } from './highlights.js';
 import { HueSaturationTransform } from './hueSaturation.js';
 import { InvertTransform } from './invert.js';
 import { RotateTransform } from './rotate.js';
 import { SepiaTransform } from './sepia.js';
+import { ShadowsTransform } from './shadows.js';
 import { SharpenTransform } from './sharpen.js';
 import { VibranceTransform } from './vibrance.js';
 import { VignetteTransform } from './vignette.js';
+import { WarmthTransform } from './warmth.js';
 
 export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
   brightnessContrast: new BrightnessContrastTransform(),
@@ -27,6 +30,9 @@ export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
   blur: new BlurTransform(),
   sharpen: new SharpenTransform(),
   vignette: new VignetteTransform(),
+  shadows: new ShadowsTransform(),
+  highlights: new HighlightsTransform(),
+  warmth: new WarmthTransform(),
   invert: new InvertTransform(),
   grayscale: new GrayscaleTransform(),
   crop: new CropTransform(),
@@ -36,14 +42,14 @@ export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
 /** Human-readable problems; empty means the edit is VIPS-appliable. */
 export function validateEdit(edit: Edit): string[] {
   if (typeof edit !== 'object' || edit === null) return ['edit must be an object'];
-  const t = lookup(TRANSFORMS, (edit as { edit?: unknown }).edit as string);
-  if (!t) return [`unknown edit ${(edit as { edit?: unknown }).edit as string}`];
+  const t = lookup(TRANSFORMS, edit.edit);
+  if (!t) return [`unknown edit ${String(edit.edit)}`];
   return t.validate(edit);
 }
 
 /** Fill defaults + clamp, so serialized JSON always passes validateEdit. */
 export function normalizeEdit(edit: Edit): Edit {
-  const t = lookup(TRANSFORMS, (edit as { edit?: unknown }).edit as string);
-  if (!t) throw new Error(`unknown edit ${(edit as { edit?: unknown }).edit as string}`);
+  const t = lookup(TRANSFORMS, edit.edit);
+  if (!t) throw new Error(`unknown edit ${String(edit.edit)}`);
   return t.normalize(edit) as Edit;
 }

package/src/transforms/sepia.ts

@@ -1,4 +1,5 @@
-// sepia.ts — glfx.js sepia port.
+// sepia.ts — glfx.js sepia port, minus its per-channel min(1.0): like the VIPS
+// side, values stay unclipped until the end so later edits see the same input.
 import { clampf } from '../math.js';
 import {
   isNumInRange,
@@ -27,9 +28,9 @@ void main() {
   float r = color.r;
   float g = color.g;
   float b = color.b;
-  color.r = min(1.0, (r * (1.0 - (0.607 * amount))) + (g * (0.769 * amount)) + (b * (0.189 * amount)));
-  color.g = min(1.0, (r * 0.349 * amount) + (g * (1.0 - (0.314 * amount))) + (b * 0.168 * amount));
-  color.b = min(1.0, (r * 0.272 * amount) + (g * 0.534 * amount) + (b * (1.0 - (0.869 * amount))));
+  color.r = (r * (1.0 - (0.607 * amount))) + (g * (0.769 * amount)) + (b * (0.189 * amount));
+  color.g = (r * 0.349 * amount) + (g * (1.0 - (0.314 * amount))) + (b * 0.168 * amount);
+  color.b = (r * 0.272 * amount) + (g * 0.534 * amount) + (b * (1.0 - (0.869 * amount)));
   gl_FragColor = color;
 }
 `;