@flighthq/effects-canvas 0.4.0-next.1416.ef4fae7 → 0.4.0-next.1487.e25e95d

package/dist/canvasLensDistortionEffect.d.ts

@@ -0,0 +1,5 @@
+import type { CanvasRenderEffectRunner, CanvasRenderState, CanvasRenderTarget, LensDistortionEffect } from '@flighthq/types/contract';
+export declare function applyLensDistortionEffectToCanvas(source: Readonly<CanvasRenderTarget>, dest: Readonly<CanvasRenderTarget>, effect: Readonly<LensDistortionEffect>): void;
+export declare const defaultCanvasLensDistortionEffectRunner: CanvasRenderEffectRunner;
+export declare function registerCanvasLensDistortionEffect(state: CanvasRenderState): void;
+//# sourceMappingURL=canvasLensDistortionEffect.d.ts.map

package/dist/canvasLensDistortionEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasLensDistortionEffect.d.ts","sourceRoot":"","sources":["../src/canvasLensDistortionEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAiBlC,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAClC,MAAM,EAAE,QAAQ,CAAC,oBAAoB,CAAC,GACrC,IAAI,CAqDN;AAED,eAAO,MAAM,uCAAuC,EAAE,wBAErD,CAAC;AAEF,wBAAgB,kCAAkC,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAEjF"}

package/dist/canvasLensDistortionEffect.js

@@ -0,0 +1,69 @@
+import { drawCanvasImageDataPass } from './canvasEffectCompositing';
+import { registerCanvasRenderEffect } from './canvasRenderEffectRegistry';
+// Lens distortion (REAL): remap uv by the same radial polynomial the Gl/Wgpu recipe uses —
+// `centered = (uv - 0.5) / scale; distorted = centered * (1 + amount * dot(centered, centered)) + 0.5` —
+// sampling the source at the distorted coordinate and writing opaque black where it leaves the frame.
+//
+// ★ THIS IS A RESAMPLE, NOT A COLOUR OP, which is why it needs the ImageData pass rather than a CSS
+// filter chain. It reads the whole source once into a snapshot and writes a fresh buffer, because the
+// destination pixel at (x, y) reads a SOURCE pixel somewhere else entirely: transforming in place would
+// feed already-distorted pixels back into later samples.
+//
+// ★ SAMPLING IS BILINEAR, MATCHING THE GPU'S `linear` filter. Nearest-neighbour would land within a
+// pixel of the right answer everywhere and still look wrong along every edge in the picture, which is
+// the difference between "the parameter is observable" and "the backends agree".
+export function applyLensDistortionEffectToCanvas(source, dest, effect) {
+    const amount = effect.amount ?? 0.2;
+    const scale = effect.scale ?? 1;
+    drawCanvasImageDataPass(dest, source, (data, pixelCount) => {
+        const width = source.width;
+        const height = Math.max(1, Math.round(pixelCount / Math.max(1, width)));
+        const snapshot = new Uint8ClampedArray(data);
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const out = (y * width + x) * 4;
+                // Pixel CENTRES, matching how the GPU rasterizer hands v_texCoord to the fragment shader; using
+                // x/width instead would sample half a texel off across the whole frame.
+                const centeredX = ((x + 0.5) / width - 0.5) / scale;
+                const centeredY = ((y + 0.5) / height - 0.5) / scale;
+                const radiusSquared = centeredX * centeredX + centeredY * centeredY;
+                const factor = 1 + amount * radiusSquared;
+                const u = centeredX * factor + 0.5;
+                const v = centeredY * factor + 0.5;
+                if (u < 0 || u > 1 || v < 0 || v > 1) {
+                    data[out] = 0;
+                    data[out + 1] = 0;
+                    data[out + 2] = 0;
+                    data[out + 3] = 255;
+                    continue;
+                }
+                const sampleX = u * width - 0.5;
+                const sampleY = v * height - 0.5;
+                const x0 = Math.floor(sampleX);
+                const y0 = Math.floor(sampleY);
+                const fx = sampleX - x0;
+                const fy = sampleY - y0;
+                const x1 = Math.min(width - 1, Math.max(0, x0 + 1));
+                const y1 = Math.min(height - 1, Math.max(0, y0 + 1));
+                const cx0 = Math.min(width - 1, Math.max(0, x0));
+                const cy0 = Math.min(height - 1, Math.max(0, y0));
+                const topLeft = (cy0 * width + cx0) * 4;
+                const topRight = (cy0 * width + x1) * 4;
+                const bottomLeft = (y1 * width + cx0) * 4;
+                const bottomRight = (y1 * width + x1) * 4;
+                for (let channel = 0; channel < 4; channel++) {
+                    const top = snapshot[topLeft + channel] * (1 - fx) + snapshot[topRight + channel] * fx;
+                    const bottom = snapshot[bottomLeft + channel] * (1 - fx) + snapshot[bottomRight + channel] * fx;
+                    data[out + channel] = Math.round(top * (1 - fy) + bottom * fy);
+                }
+            }
+        }
+    });
+}
+export const defaultCanvasLensDistortionEffectRunner = (ctx, effect) => {
+    applyLensDistortionEffectToCanvas(ctx.source, ctx.dest, effect);
+};
+export function registerCanvasLensDistortionEffect(state) {
+    registerCanvasRenderEffect(state, 'LensDistortionEffect', defaultCanvasLensDistortionEffectRunner);
+}
+//# sourceMappingURL=canvasLensDistortionEffect.js.map

package/dist/canvasLensDistortionEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasLensDistortionEffect.js","sourceRoot":"","sources":["../src/canvasLensDistortionEffect.ts"],"names":[],"mappings":"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"}

package/dist/canvasPosterizeEffect.d.ts

@@ -0,0 +1,5 @@
+import type { CanvasRenderEffectRunner, CanvasRenderState, CanvasRenderTarget, PosterizeEffect } from '@flighthq/types/contract';
+export declare function applyPosterizeEffectToCanvas(source: Readonly<CanvasRenderTarget>, dest: Readonly<CanvasRenderTarget>, effect: Readonly<PosterizeEffect>): void;
+export declare const defaultCanvasPosterizeEffectRunner: CanvasRenderEffectRunner;
+export declare function registerCanvasPosterizeEffect(state: CanvasRenderState): void;
+//# sourceMappingURL=canvasPosterizeEffect.d.ts.map

package/dist/canvasPosterizeEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasPosterizeEffect.d.ts","sourceRoot":"","sources":["../src/canvasPosterizeEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAkBlC,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAClC,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,GAChC,IAAI,CAYN;AAED,eAAO,MAAM,kCAAkC,EAAE,wBAEhD,CAAC;AAEF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAE5E"}

package/dist/canvasPosterizeEffect.js

@@ -0,0 +1,35 @@
+import { drawCanvasImageDataPass } from './canvasEffectCompositing';
+import { registerCanvasRenderEffect } from './canvasRenderEffectRegistry';
+// Posterize (REAL): floor each channel to `levels` discrete steps, matching the Gl/Wgpu recipe
+// `floor(c * levels) / (levels - 1)` exactly rather than approximating it.
+//
+// ★ THE QUANTISATION IS DONE PER PIXEL, NOT THROUGH A CSS FILTER, because no CSS filter expresses a
+// step function. `drawCanvasImageDataPass` is the package's existing primitive for exactly this case,
+// and its presence is the reason this cell was implementable at all: the scene had been declared a
+// backend CONTROL on the belief that Canvas 2D can only reach what `ctx.filter` can spell.
+//
+// ★ THE 255-DOMAIN ROUNDING IS THE WHOLE DIFFICULTY. The GPU works in floats and writes an 8-bit result
+// once, at the end. Doing the same arithmetic on bytes rounds twice — once reading the byte, once
+// writing it — and a step function amplifies a half-level rounding difference into a whole band moving.
+// So the byte is converted to the float domain, quantised there with the identical expression, and only
+// then rounded back, with the same clamp the shader applies.
+export function applyPosterizeEffectToCanvas(source, dest, effect) {
+    const levels = Math.max(2, effect.levels ?? 8);
+    drawCanvasImageDataPass(dest, source, (data, pixelCount) => {
+        for (let pixel = 0; pixel < pixelCount; pixel++) {
+            const at = pixel * 4;
+            for (let channel = 0; channel < 3; channel++) {
+                const value = data[at + channel] / 255;
+                const quantised = Math.floor(value * levels) / (levels - 1);
+                data[at + channel] = Math.round(Math.max(0, Math.min(1, quantised)) * 255);
+            }
+        }
+    });
+}
+export const defaultCanvasPosterizeEffectRunner = (ctx, effect) => {
+    applyPosterizeEffectToCanvas(ctx.source, ctx.dest, effect);
+};
+export function registerCanvasPosterizeEffect(state) {
+    registerCanvasRenderEffect(state, 'PosterizeEffect', defaultCanvasPosterizeEffectRunner);
+}
+//# sourceMappingURL=canvasPosterizeEffect.js.map

package/dist/canvasPosterizeEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasPosterizeEffect.js","sourceRoot":"","sources":["../src/canvasPosterizeEffect.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE1E,+FAA+F;AAC/F,2EAA2E;AAC3E,EAAE;AACF,oGAAoG;AACpG,sGAAsG;AACtG,mGAAmG;AACnG,2FAA2F;AAC3F,EAAE;AACF,wGAAwG;AACxG,kGAAkG;AAClG,wGAAwG;AACxG,wGAAwG;AACxG,6DAA6D;AAC7D,MAAM,UAAU,4BAA4B,CAC1C,MAAoC,EACpC,IAAkC,EAClC,MAAiC;IAEjC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IAC/C,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE;QACzD,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC;YAChD,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;YACrB,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;gBAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,CAAE,GAAG,GAAG,CAAC;gBACxC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC5D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;YAC7E,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,kCAAkC,GAA6B,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;IAC1F,4BAA4B,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,EAAE,MAAyB,CAAC,CAAC;AAChF,CAAC,CAAC;AAEF,MAAM,UAAU,6BAA6B,CAAC,KAAwB;IACpE,0BAA0B,CAAC,KAAK,EAAE,iBAAiB,EAAE,kCAAkC,CAAC,CAAC;AAC3F,CAAC"}

package/dist/canvasTiltShiftEffect.d.ts

@@ -0,0 +1,5 @@
+import type { CanvasRenderEffectRunner, CanvasRenderState, CanvasRenderTarget, TiltShiftEffect } from '@flighthq/types/contract';
+export declare function applyTiltShiftEffectToCanvas(source: Readonly<CanvasRenderTarget>, dest: Readonly<CanvasRenderTarget>, effect: Readonly<TiltShiftEffect>): void;
+export declare const defaultCanvasTiltShiftEffectRunner: CanvasRenderEffectRunner;
+export declare function registerCanvasTiltShiftEffect(state: CanvasRenderState): void;
+//# sourceMappingURL=canvasTiltShiftEffect.d.ts.map

package/dist/canvasTiltShiftEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTiltShiftEffect.d.ts","sourceRoot":"","sources":["../src/canvasTiltShiftEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAiBlC,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAClC,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,GAChC,IAAI,CAiDN;AAED,eAAO,MAAM,kCAAkC,EAAE,wBAEhD,CAAC;AAEF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAE5E"}

package/dist/canvasTiltShiftEffect.js

@@ -0,0 +1,67 @@
+import { drawCanvasImageDataPass } from './canvasEffectCompositing';
+import { registerCanvasRenderEffect } from './canvasRenderEffectRegistry';
+// Tilt shift (REAL): keep a horizontal focus band sharp and blur above and below it, matching the
+// Gl/Wgpu recipe tap for tap — seven uniformly weighted vertical samples spaced `radius` pixels apart,
+// where `radius = smoothstep(width/2, width/2 + width, |y - center|) * blur`.
+//
+// ★ THE TAP COUNT AND WEIGHTING ARE PART OF THE PICTURE, not an implementation detail. A Gaussian of
+// the same nominal radius would be a defensible blur and a different image; seven equal taps is what
+// the other two backends draw, so it is what agreement means here.
+//
+// ★ `center` IS MEASURED DOWN FROM THE TOP EDGE (see TiltShiftEffect). Canvas ImageData is already
+// top-down, so this runner passes the value straight through where the Gl runner must flip it. That
+// asymmetry is the convention working, not a discrepancy — and a centred band hides it completely,
+// because |y - 0.5| is symmetric, so only an off-centre band can show it going wrong.
+export function applyTiltShiftEffectToCanvas(source, dest, effect) {
+    const center = effect.center ?? 0.5;
+    const bandWidth = effect.width ?? 0.3;
+    const blur = effect.blur ?? 4;
+    drawCanvasImageDataPass(dest, source, (data, pixelCount) => {
+        const width = source.width;
+        const height = Math.max(1, Math.round(pixelCount / Math.max(1, width)));
+        // The taps read the ORIGINAL image. Blurring in place would feed each row's own blurred result
+        // into the next row's taps, which is a different (and direction-dependent) operator.
+        const snapshot = new Uint8ClampedArray(data);
+        const edge = bandWidth * 0.5;
+        for (let y = 0; y < height; y++) {
+            const distance = Math.abs((y + 0.5) / height - center);
+            const ramp = Math.max(0, Math.min(1, (distance - edge) / Math.max(1e-6, bandWidth)));
+            const radius = ramp * ramp * (3 - 2 * ramp) * blur;
+            for (let x = 0; x < width; x++) {
+                const out = (y * width + x) * 4;
+                let red = 0;
+                let green = 0;
+                let blue = 0;
+                let alpha = 0;
+                for (let tap = -TAP_REACH; tap <= TAP_REACH; tap++) {
+                    // The GPU offsets by `tap * radius * texel`, which lands on a fractional row; its linear
+                    // sampler then interpolates. Rounding to the nearest row instead would quantise the ramp
+                    // into visible bands wherever radius passes a half-pixel.
+                    const sampleY = y + tap * radius;
+                    const low = Math.max(0, Math.min(height - 1, Math.floor(sampleY)));
+                    const high = Math.max(0, Math.min(height - 1, low + 1));
+                    const blend = Math.max(0, Math.min(1, sampleY - Math.floor(sampleY)));
+                    const lowAt = (low * width + x) * 4;
+                    const highAt = (high * width + x) * 4;
+                    red += snapshot[lowAt] * (1 - blend) + snapshot[highAt] * blend;
+                    green += snapshot[lowAt + 1] * (1 - blend) + snapshot[highAt + 1] * blend;
+                    blue += snapshot[lowAt + 2] * (1 - blend) + snapshot[highAt + 2] * blend;
+                    alpha += snapshot[lowAt + 3] * (1 - blend) + snapshot[highAt + 3] * blend;
+                }
+                data[out] = Math.round(red / TAP_COUNT);
+                data[out + 1] = Math.round(green / TAP_COUNT);
+                data[out + 2] = Math.round(blue / TAP_COUNT);
+                data[out + 3] = Math.round(alpha / TAP_COUNT);
+            }
+        }
+    });
+}
+export const defaultCanvasTiltShiftEffectRunner = (ctx, effect) => {
+    applyTiltShiftEffectToCanvas(ctx.source, ctx.dest, effect);
+};
+export function registerCanvasTiltShiftEffect(state) {
+    registerCanvasRenderEffect(state, 'TiltShiftEffect', defaultCanvasTiltShiftEffectRunner);
+}
+const TAP_REACH = 3;
+const TAP_COUNT = TAP_REACH * 2 + 1;
+//# sourceMappingURL=canvasTiltShiftEffect.js.map

package/dist/canvasTiltShiftEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTiltShiftEffect.js","sourceRoot":"","sources":["../src/canvasTiltShiftEffect.ts"],"names":[],"mappings":"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"}

package/dist/canvasVignetteEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasVignetteEffect.d.ts","sourceRoot":"","sources":["../src/canvasVignetteEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAQlC,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAClC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,GAC/B,IAAI,CAoCN;AAED,eAAO,MAAM,iCAAiC,EAAE,wBAE/C,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAE3E"}
+{"version":3,"file":"canvasVignetteEffect.d.ts","sourceRoot":"","sources":["../src/canvasVignetteEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAgBlC,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAClC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,GAC/B,IAAI,CA+CN;AAED,eAAO,MAAM,iCAAiC,EAAE,wBAE/C,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAE3E"}

package/dist/canvasVignetteEffect.js

@@ -1,8 +1,15 @@
 import { drawCanvasEffectPass } from './canvasEffectCompositing';
 import { registerCanvasRenderEffect } from './canvasRenderEffectRegistry';
-// Vignette (REAL): draw the scene, then overlay a radial gradient — transparent inside `radius`,
-// ramping to the vignette color over `softness` toward the corners — using the 'multiply' composite op
-// so the edges darken toward the color. Intensity and the color's alpha scale the darkening.
+// Vignette (REAL): draw the scene, then overlay a radial gradient with the 'multiply' composite op so
+// the edges darken toward the vignette color. `intensity` and the color's alpha scale the darkening.
+//
+// ★ THE TWO PUBLIC PARAMETERS MUST BOTH BE OBSERVABLE, AND ONCE THEY WERE NOT. An earlier revision ran
+// the gradient from the ramp start all the way to the FRAME CORNER, so full darkness arrived at the
+// corner rather than at `radius`. That made the visible ramp (1 - (radius - softness)) wide instead of
+// `softness` wide, which meant `softness` alone set the falloff and `radius` stopped being independently
+// observable at all: two parameters collapsed into one, with a picture darker than either asks for. Full
+// dark belongs at `radius`; the gradient's own clamp keeps everything beyond it dark.
+const RAMP_STOPS = 16;
 export function applyVignetteEffectToCanvas(source, dest, effect) {
     const intensity = effect.intensity ?? 1;
     const radius = effect.radius ?? 0.75;
@@ -14,26 +21,36 @@ export function applyVignetteEffectToCanvas(source, dest, effect) {
     const ctx = dest.context;
     const w = dest.width;
     const h = dest.height;
-    const cx = w * 0.5;
-    const cy = h * 0.5;
-    // The vignette math measures distance to the corner as 1.0 (matching the Gl recipe's diagonal
-    // normalization), so the gradient's outer radius is half the diagonal.
-    const outer = Math.sqrt(cx * cx + cy * cy);
-    const inner = Math.max(0, Math.min(radius, 1)) * outer;
-    const ramp = Math.max(0, inner - softness * outer);
-    const gradient = ctx.createRadialGradient(cx, cy, ramp, cx, cy, outer);
-    // Opaque-at-center color string with alpha replaced by the darken amount at the rim.
-    const r = (color >>> 24) & 0xff;
-    const g = (color >>> 16) & 0xff;
-    const b = (color >>> 8) & 0xff;
-    gradient.addColorStop(0, `rgba(${r},${g},${b},0)`);
-    gradient.addColorStop(1, `rgba(${r},${g},${b},${darken.toFixed(4)})`);
+    const red = (color >>> 24) & 0xff;
+    const green = (color >>> 16) & 0xff;
+    const blue = (color >>> 8) & 0xff;
+    // The Gl recipe measures distance in NORMALIZED uv — `length(uv - 0.5) * sqrt(2)`, which is 1.0 at the
+    // corner — so its iso-darkness contours are ellipses in pixel space whenever the frame is not square.
+    // Drawing the gradient in a unit-square space and letting the transform stretch it reproduces that
+    // geometry exactly; a circular gradient in pixel space would be a different shape on every non-square
+    // target. A unit-space radius of 1/sqrt(2) is the corner, so a Gl distance d maps to d/sqrt(2) here.
+    const toUnitRadius = 1 / Math.SQRT2;
+    const outerRadius = Math.max(0, Math.min(radius, 1)) * toUnitRadius;
+    // A zero-width ramp is a hard edge; createRadialGradient requires r0 < r1, so keep a hair of width.
+    const innerRadius = Math.max(0, Math.min(outerRadius - softness * toUnitRadius, outerRadius - 1e-4));
+    const gradient = ctx.createRadialGradient(0.5, 0.5, innerRadius, 0.5, 0.5, outerRadius);
+    // Gl eases with smoothstep, and a Canvas gradient interpolates its stops LINEARLY, so the curve has to
+    // be sampled into stops rather than declared. Substituting a straight line here would keep both
+    // endpoints correct and still put the midpoint ~9% of full darkening away from the Gl render.
+    for (let stop = 0; stop <= RAMP_STOPS; stop++) {
+        const t = stop / RAMP_STOPS;
+        const eased = t * t * (3 - 2 * t);
+        gradient.addColorStop(t, `rgba(${red},${green},${blue},${(darken * eased).toFixed(4)})`);
+    }
     ctx.save();
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    // Unit-square space: (0,0)-(1,1) covers the target, so the circular gradient above becomes the same
+    // ellipse Gl draws. Everything past `outerRadius` keeps the final stop's color, which is the clamp
+    // that makes "full dark at radius, and darker nowhere else" true out to the corners.
+    ctx.setTransform(w, 0, 0, h, 0, 0);
     ctx.globalCompositeOperation = 'multiply';
     ctx.filter = 'none';
     ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, w, h);
+    ctx.fillRect(0, 0, 1, 1);
     ctx.restore();
 }
 export const defaultCanvasVignetteEffectRunner = (ctx, effect) => {

package/dist/canvasVignetteEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvasVignetteEffect.js","sourceRoot":"","sources":["../src/canvasVignetteEffect.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"canvasVignetteEffect.js","sourceRoot":"","sources":["../src/canvasVignetteEffect.ts"],"names":[],"mappings":"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"}

package/dist/contract.d.ts

@@ -12,9 +12,12 @@ export * from './canvasGradientBevelEffect';
 export * from './canvasGradientGlowEffect';
 export * from './canvasGradientRamp';
 export * from './canvasInnerGlowEffect';
+export * from './canvasLensDistortionEffect';
+export * from './canvasTiltShiftEffect';
 export * from './canvasInnerShadowEffect';
 export * from './canvasOuterGlowEffect';
 export * from './canvasPixelateEffect';
+export * from './canvasPosterizeEffect';
 export * from './canvasRenderEffectPipeline';
 export * from './canvasRenderEffectRegistry';
 export * from './canvasRenderTextureEffect';

package/dist/contract.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contract.d.ts","sourceRoot":"","sources":["../src/contract.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"contract.d.ts","sourceRoot":"","sources":["../src/contract.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}

package/dist/contract.js

@@ -12,9 +12,12 @@ export * from './canvasGradientBevelEffect';
 export * from './canvasGradientGlowEffect';
 export * from './canvasGradientRamp';
 export * from './canvasInnerGlowEffect';
+export * from './canvasLensDistortionEffect';
+export * from './canvasTiltShiftEffect';
 export * from './canvasInnerShadowEffect';
 export * from './canvasOuterGlowEffect';
 export * from './canvasPixelateEffect';
+export * from './canvasPosterizeEffect';
 export * from './canvasRenderEffectPipeline';
 export * from './canvasRenderEffectRegistry';
 export * from './canvasRenderTextureEffect';

package/dist/contract.js.map

@@ -1 +1 @@
-{"version":3,"file":"contract.js","sourceRoot":"","sources":["../src/contract.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"contract.js","sourceRoot":"","sources":["../src/contract.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { applyCanvasGradientRampLookup, applyCanvasRenderEffectsToRenderTexture, beginCanvasRenderEffectPipeline, buildCanvasGradientRamp, clipCanvasBevelBand, createCanvasRenderEffectPipeline, defaultCanvasBevelEffectRunner, defaultCanvasBlendEffectRunner, defaultCanvasBloomEffectRunner, defaultCanvasBlurEffectRunner, defaultCanvasCompositeEffectRunner, defaultCanvasDropShadowEffectRunner, defaultCanvasFilmGrainEffectRunner, defaultCanvasGradientBevelEffectRunner, defaultCanvasGradientGlowEffectRunner, defaultCanvasInnerGlowEffectRunner, defaultCanvasInnerShadowEffectRunner, defaultCanvasOuterGlowEffectRunner, defaultCanvasPixelateEffectRunner, defaultCanvasScanlinesEffectRunner, defaultCanvasVignetteEffectRunner, endCanvasRenderEffectPipeline, getCanvasBlendEffectBackdrop, getCanvasBlendEffectCompositeOperation, getCanvasCompositeEffectOperation, registerCanvasBevelEffect, registerCanvasBlendEffect, registerCanvasBlendEffectBackdrop, registerCanvasBloomEffect, registerCanvasBlurEffect, registerCanvasCompositeEffect, registerCanvasDropShadowEffect, registerCanvasFilmGrainEffect, registerCanvasGradientBevelEffect, registerCanvasGradientGlowEffect, registerCanvasInnerGlowEffect, registerCanvasInnerShadowEffect, registerCanvasOuterGlowEffect, registerCanvasPixelateEffect, registerCanvasRenderEffect, registerCanvasScanlinesEffect, registerCanvasVignetteEffect, unregisterCanvasBlendEffectBackdrop, } from './contract';
+export { applyCanvasGradientRampLookup, applyCanvasRenderEffectsToRenderTexture, beginCanvasRenderEffectPipeline, buildCanvasGradientRamp, clipCanvasBevelBand, createCanvasRenderEffectPipeline, defaultCanvasBevelEffectRunner, defaultCanvasBlendEffectRunner, defaultCanvasBloomEffectRunner, defaultCanvasBlurEffectRunner, defaultCanvasCompositeEffectRunner, defaultCanvasDropShadowEffectRunner, defaultCanvasFilmGrainEffectRunner, defaultCanvasGradientBevelEffectRunner, defaultCanvasGradientGlowEffectRunner, defaultCanvasInnerGlowEffectRunner, defaultCanvasInnerShadowEffectRunner, defaultCanvasOuterGlowEffectRunner, defaultCanvasPixelateEffectRunner, defaultCanvasLensDistortionEffectRunner, defaultCanvasTiltShiftEffectRunner, defaultCanvasPosterizeEffectRunner, defaultCanvasScanlinesEffectRunner, defaultCanvasVignetteEffectRunner, endCanvasRenderEffectPipeline, getCanvasBlendEffectBackdrop, getCanvasBlendEffectCompositeOperation, getCanvasCompositeEffectOperation, registerCanvasBevelEffect, registerCanvasBlendEffect, registerCanvasBlendEffectBackdrop, registerCanvasBloomEffect, registerCanvasBlurEffect, registerCanvasCompositeEffect, registerCanvasDropShadowEffect, registerCanvasFilmGrainEffect, registerCanvasGradientBevelEffect, registerCanvasGradientGlowEffect, registerCanvasInnerGlowEffect, registerCanvasInnerShadowEffect, registerCanvasOuterGlowEffect, registerCanvasPixelateEffect, registerCanvasLensDistortionEffect, registerCanvasTiltShiftEffect, registerCanvasPosterizeEffect, registerCanvasRenderEffect, registerCanvasScanlinesEffect, registerCanvasVignetteEffect, unregisterCanvasBlendEffectBackdrop, } from './contract';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,6BAA6B,EAC7B,uCAAuC,EACvC,+BAA+B,EAC/B,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,kCAAkC,EAClC,mCAAmC,EACnC,kCAAkC,EAClC,sCAAsC,EACtC,qCAAqC,EACrC,kCAAkC,EAClC,oCAAoC,EACpC,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EAClC,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,sCAAsC,EACtC,iCAAiC,EACjC,yBAAyB,EACzB,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EACxB,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,+BAA+B,EAC/B,6BAA6B,EAC7B,4BAA4B,EAC5B,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,mCAAmC,GACpC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,6BAA6B,EAC7B,uCAAuC,EACvC,+BAA+B,EAC/B,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,kCAAkC,EAClC,mCAAmC,EACnC,kCAAkC,EAClC,sCAAsC,EACtC,qCAAqC,EACrC,kCAAkC,EAClC,oCAAoC,EACpC,kCAAkC,EAClC,iCAAiC,EACjC,uCAAuC,EACvC,kCAAkC,EAClC,kCAAkC,EAClC,kCAAkC,EAClC,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,sCAAsC,EACtC,iCAAiC,EACjC,yBAAyB,EACzB,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EACxB,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,+BAA+B,EAC/B,6BAA6B,EAC7B,4BAA4B,EAC5B,kCAAkC,EAClC,6BAA6B,EAC7B,6BAA6B,EAC7B,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,mCAAmC,GACpC,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,2 +1,2 @@
-export { applyCanvasGradientRampLookup, applyCanvasRenderEffectsToRenderTexture, beginCanvasRenderEffectPipeline, buildCanvasGradientRamp, clipCanvasBevelBand, createCanvasRenderEffectPipeline, defaultCanvasBevelEffectRunner, defaultCanvasBlendEffectRunner, defaultCanvasBloomEffectRunner, defaultCanvasBlurEffectRunner, defaultCanvasCompositeEffectRunner, defaultCanvasDropShadowEffectRunner, defaultCanvasFilmGrainEffectRunner, defaultCanvasGradientBevelEffectRunner, defaultCanvasGradientGlowEffectRunner, defaultCanvasInnerGlowEffectRunner, defaultCanvasInnerShadowEffectRunner, defaultCanvasOuterGlowEffectRunner, defaultCanvasPixelateEffectRunner, defaultCanvasScanlinesEffectRunner, defaultCanvasVignetteEffectRunner, endCanvasRenderEffectPipeline, getCanvasBlendEffectBackdrop, getCanvasBlendEffectCompositeOperation, getCanvasCompositeEffectOperation, registerCanvasBevelEffect, registerCanvasBlendEffect, registerCanvasBlendEffectBackdrop, registerCanvasBloomEffect, registerCanvasBlurEffect, registerCanvasCompositeEffect, registerCanvasDropShadowEffect, registerCanvasFilmGrainEffect, registerCanvasGradientBevelEffect, registerCanvasGradientGlowEffect, registerCanvasInnerGlowEffect, registerCanvasInnerShadowEffect, registerCanvasOuterGlowEffect, registerCanvasPixelateEffect, registerCanvasRenderEffect, registerCanvasScanlinesEffect, registerCanvasVignetteEffect, unregisterCanvasBlendEffectBackdrop, } from './contract';
+export { applyCanvasGradientRampLookup, applyCanvasRenderEffectsToRenderTexture, beginCanvasRenderEffectPipeline, buildCanvasGradientRamp, clipCanvasBevelBand, createCanvasRenderEffectPipeline, defaultCanvasBevelEffectRunner, defaultCanvasBlendEffectRunner, defaultCanvasBloomEffectRunner, defaultCanvasBlurEffectRunner, defaultCanvasCompositeEffectRunner, defaultCanvasDropShadowEffectRunner, defaultCanvasFilmGrainEffectRunner, defaultCanvasGradientBevelEffectRunner, defaultCanvasGradientGlowEffectRunner, defaultCanvasInnerGlowEffectRunner, defaultCanvasInnerShadowEffectRunner, defaultCanvasOuterGlowEffectRunner, defaultCanvasPixelateEffectRunner, defaultCanvasLensDistortionEffectRunner, defaultCanvasTiltShiftEffectRunner, defaultCanvasPosterizeEffectRunner, defaultCanvasScanlinesEffectRunner, defaultCanvasVignetteEffectRunner, endCanvasRenderEffectPipeline, getCanvasBlendEffectBackdrop, getCanvasBlendEffectCompositeOperation, getCanvasCompositeEffectOperation, registerCanvasBevelEffect, registerCanvasBlendEffect, registerCanvasBlendEffectBackdrop, registerCanvasBloomEffect, registerCanvasBlurEffect, registerCanvasCompositeEffect, registerCanvasDropShadowEffect, registerCanvasFilmGrainEffect, registerCanvasGradientBevelEffect, registerCanvasGradientGlowEffect, registerCanvasInnerGlowEffect, registerCanvasInnerShadowEffect, registerCanvasOuterGlowEffect, registerCanvasPixelateEffect, registerCanvasLensDistortionEffect, registerCanvasTiltShiftEffect, registerCanvasPosterizeEffect, registerCanvasRenderEffect, registerCanvasScanlinesEffect, registerCanvasVignetteEffect, unregisterCanvasBlendEffectBackdrop, } from './contract';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,6BAA6B,EAC7B,uCAAuC,EACvC,+BAA+B,EAC/B,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,kCAAkC,EAClC,mCAAmC,EACnC,kCAAkC,EAClC,sCAAsC,EACtC,qCAAqC,EACrC,kCAAkC,EAClC,oCAAoC,EACpC,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EAClC,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,sCAAsC,EACtC,iCAAiC,EACjC,yBAAyB,EACzB,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EACxB,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,+BAA+B,EAC/B,6BAA6B,EAC7B,4BAA4B,EAC5B,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,mCAAmC,GACpC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,6BAA6B,EAC7B,uCAAuC,EACvC,+BAA+B,EAC/B,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,kCAAkC,EAClC,mCAAmC,EACnC,kCAAkC,EAClC,sCAAsC,EACtC,qCAAqC,EACrC,kCAAkC,EAClC,oCAAoC,EACpC,kCAAkC,EAClC,iCAAiC,EACjC,uCAAuC,EACvC,kCAAkC,EAClC,kCAAkC,EAClC,kCAAkC,EAClC,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,sCAAsC,EACtC,iCAAiC,EACjC,yBAAyB,EACzB,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EACxB,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,+BAA+B,EAC/B,6BAA6B,EAC7B,4BAA4B,EAC5B,kCAAkC,EAClC,6BAA6B,EAC7B,6BAA6B,EAC7B,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,mCAAmC,GACpC,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flighthq/effects-canvas",
-  "version": "0.4.0-next.1416.ef4fae7",
+  "version": "0.4.0-next.1487.e25e95d",
   "author": "Joshua Granick and other contributors",
   "license": "MIT",
   "repository": {
@@ -38,13 +38,13 @@
     "clean:dist": "tsx ../../scripts/clean-package-dist.ts"
   },
   "dependencies": {
-    "@flighthq/color": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/adjustments": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/scene2d-canvas": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/effects": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/geometry": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/registry": "0.4.0-next.1416.ef4fae7",
-    "@flighthq/types": "0.4.0-next.1416.ef4fae7"
+    "@flighthq/color": "0.4.0-next.1487.e25e95d",
+    "@flighthq/adjustments": "0.4.0-next.1487.e25e95d",
+    "@flighthq/scene2d-canvas": "0.4.0-next.1487.e25e95d",
+    "@flighthq/effects": "0.4.0-next.1487.e25e95d",
+    "@flighthq/geometry": "0.4.0-next.1487.e25e95d",
+    "@flighthq/registry": "0.4.0-next.1487.e25e95d",
+    "@flighthq/types": "0.4.0-next.1487.e25e95d"
   },
   "devDependencies": {
     "typescript": "^5.3.0"

package/src/canvasLensDistortionEffect.test.ts

@@ -0,0 +1,149 @@
+import { createCanvasRenderState } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, LensDistortionEffect } from '@flighthq/types/contract';
+
+import {
+  applyLensDistortionEffectToCanvas,
+  defaultCanvasLensDistortionEffectRunner,
+  registerCanvasLensDistortionEffect,
+} from './canvasLensDistortionEffect';
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+
+// A width x height RGBA buffer whose red channel encodes the column and green the row, so a resample can
+// be read back as "which source pixel did this destination pixel come from".
+function createTargets(
+  width: number,
+  height: number,
+): { dest: CanvasRenderTarget; source: CanvasRenderTarget; written: { data: Uint8ClampedArray | null } } {
+  const pixels = new Uint8ClampedArray(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const at = (y * width + x) * 4;
+      pixels[at] = Math.round((x / Math.max(1, width - 1)) * 255);
+      pixels[at + 1] = Math.round((y / Math.max(1, height - 1)) * 255);
+      pixels[at + 2] = 128;
+      pixels[at + 3] = 255;
+    }
+  }
+  const imageData = { data: pixels };
+  const written: { data: Uint8ClampedArray | null } = { data: null };
+  const source = {
+    context: { getImageData: () => imageData },
+    height,
+    width,
+  } as unknown as CanvasRenderTarget;
+  const dest = {
+    context: {
+      clearRect: () => {},
+      filter: 'none',
+      globalAlpha: 1,
+      globalCompositeOperation: 'source-over',
+      putImageData: (value: { data: Uint8ClampedArray }) => {
+        written.data = value.data;
+      },
+      restore: () => {},
+      save: () => {},
+      setTransform: () => {},
+    },
+    height,
+    width,
+  } as unknown as CanvasRenderTarget;
+  return { dest, source, written };
+}
+
+const at = (data: Uint8ClampedArray, width: number, x: number, y: number): number[] => {
+  const i = (y * width + x) * 4;
+  return [data[i]!, data[i + 1]!, data[i + 2]!, data[i + 3]!];
+};
+
+describe('applyLensDistortionEffectToCanvas', () => {
+  // amount 0 makes the polynomial the identity, so any deviation here is the resampler's own error
+  // rather than the distortion's — the one case where the output is knowable exactly.
+  it('is the identity at amount 0', () => {
+    const { dest, source, written } = createTargets(8, 8);
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: 0, kind: 'LensDistortionEffect' });
+
+    const original = source.context.getImageData(0, 0, 8, 8).data;
+    expect([...written.data!]).toEqual([...original]);
+  });
+
+  // ★ THE CENTRE IS THE FIXED POINT OF THE POLYNOMIAL, so it must not move for any amount. A resampler
+  // that is half a pixel off everywhere still passes an "output changed" check and fails this one.
+  it('leaves the centre pixel where it was', () => {
+    const { dest, source, written } = createTargets(9, 9);
+    const before = at(source.context.getImageData(0, 0, 9, 9).data, 9, 4, 4);
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: 0.4, kind: 'LensDistortionEffect' });
+
+    expect(at(written.data!, 9, 4, 4)).toEqual(before);
+  });
+
+  // Positive amount is barrel: a destination pixel away from the centre samples FURTHER out, so the
+  // gradient it reads is from nearer the edge — the red channel at a right-of-centre pixel rises.
+  it('samples further from the centre for a positive amount', () => {
+    const { dest, source, written } = createTargets(16, 16);
+    const before = at(source.context.getImageData(0, 0, 16, 16).data, 16, 12, 8)[0]!;
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: 0.5, kind: 'LensDistortionEffect' });
+
+    expect(at(written.data!, 16, 12, 8)[0]!).toBeGreaterThan(before);
+  });
+
+  // Negative amount is pincushion — the opposite sign, which a magnitude-only test would miss.
+  it('samples closer to the centre for a negative amount', () => {
+    const { dest, source, written } = createTargets(16, 16);
+    const before = at(source.context.getImageData(0, 0, 16, 16).data, 16, 12, 8)[0]!;
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: -0.5, kind: 'LensDistortionEffect' });
+
+    expect(at(written.data!, 16, 12, 8)[0]!).toBeLessThan(before);
+  });
+
+  // Where the remap leaves the frame the shader writes opaque black rather than clamping, so the canvas
+  // pass must too: clamping would silently smear the edge row outward instead of showing the boundary.
+  it('writes opaque black where the sample leaves the frame', () => {
+    const { dest, source, written } = createTargets(16, 16);
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: 3, kind: 'LensDistortionEffect' });
+
+    expect(at(written.data!, 16, 0, 0)).toEqual([0, 0, 0, 255]);
+  });
+
+  it('re-frames with scale so a larger scale pulls the sample inward', () => {
+    const { dest, source, written } = createTargets(16, 16);
+    const wide = createTargets(16, 16);
+
+    applyLensDistortionEffectToCanvas(source, dest, { amount: 0.5, kind: 'LensDistortionEffect' });
+    applyLensDistortionEffectToCanvas(wide.source, wide.dest, {
+      amount: 0.5,
+      kind: 'LensDistortionEffect',
+      scale: 1.5,
+    });
+
+    expect(at(wide.written.data!, 16, 14, 8)[0]!).toBeLessThan(at(written.data!, 16, 14, 8)[0]!);
+  });
+});
+
+describe('defaultCanvasLensDistortionEffectRunner', () => {
+  it('routes the runner context through to the pass', () => {
+    const { dest, pool, source, written } = { ...createTargets(8, 8), pool: { free: [], inUse: [] } };
+
+    defaultCanvasLensDistortionEffectRunner({ dest, pool, source, state: {} as never }, {
+      amount: 0,
+      kind: 'LensDistortionEffect',
+    } as LensDistortionEffect);
+
+    expect(written.data).not.toBeNull();
+  });
+});
+
+describe('registerCanvasLensDistortionEffect', () => {
+  it('makes the runner resolvable for the LensDistortionEffect kind', () => {
+    const context = { canvas: {}, getContextAttributes: () => ({}) };
+    const state = createCanvasRenderState({ getContext: () => context } as unknown as HTMLCanvasElement, {});
+
+    expect(getCanvasRenderEffectRunner(state, 'LensDistortionEffect')).toBeNull();
+    registerCanvasLensDistortionEffect(state);
+    expect(getCanvasRenderEffectRunner(state, 'LensDistortionEffect')).toBe(defaultCanvasLensDistortionEffectRunner);
+  });
+});

package/src/canvasPosterizeEffect.test.ts

@@ -0,0 +1,138 @@
+import { createCanvasRenderState } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, PosterizeEffect } from '@flighthq/types/contract';
+
+import {
+  applyPosterizeEffectToCanvas,
+  defaultCanvasPosterizeEffectRunner,
+  registerCanvasPosterizeEffect,
+} from './canvasPosterizeEffect';
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+
+// Stand-ins for the two contexts drawCanvasImageDataPass touches, matching the shape
+// canvasColorMatrixPass.test.ts uses for the same reason: it keeps the assertion independent of module
+// load order in a non-isolated suite.
+function createStubTargets(pixels: ReadonlyArray<number>): {
+  dest: CanvasRenderTarget;
+  source: CanvasRenderTarget;
+  written: { data: Uint8ClampedArray | null };
+} {
+  const imageData = { data: new Uint8ClampedArray(pixels) };
+  const written: { data: Uint8ClampedArray | null } = { data: null };
+  const source = {
+    context: { getImageData: () => imageData },
+    height: 1,
+    width: pixels.length / 4,
+  } as unknown as CanvasRenderTarget;
+  const dest = {
+    context: {
+      clearRect: () => {},
+      filter: 'none',
+      globalAlpha: 1,
+      globalCompositeOperation: 'source-over',
+      putImageData: (value: { data: Uint8ClampedArray }) => {
+        written.data = value.data;
+      },
+      restore: () => {},
+      save: () => {},
+      setTransform: () => {},
+    },
+    height: 1,
+    width: pixels.length / 4,
+  } as unknown as CanvasRenderTarget;
+  return { dest, source, written };
+}
+
+// The Gl/Wgpu recipe, in the float domain: floor(c * levels) / (levels - 1), clamped. Reimplemented here
+// from the shader rather than from the implementation under test, so the two can disagree.
+function expected(byte: number, levels: number): number {
+  const value = byte / 255;
+  const quantised = Math.floor(value * levels) / (levels - 1);
+  return Math.round(Math.max(0, Math.min(1, quantised)) * 255);
+}
+
+describe('applyPosterizeEffectToCanvas', () => {
+  it('quantises each channel to the levels the shader would produce', () => {
+    const input = [0, 64, 128, 255, 192, 200, 255, 255];
+    const { dest, source, written } = createStubTargets(input);
+
+    applyPosterizeEffectToCanvas(source, dest, { kind: 'PosterizeEffect', levels: 4 });
+
+    expect(written.data).not.toBeNull();
+    expect([...written.data!]).toEqual([
+      expected(0, 4),
+      expected(64, 4),
+      expected(128, 4),
+      255,
+      expected(192, 4),
+      expected(200, 4),
+      expected(255, 4),
+      255,
+    ]);
+  });
+
+  // ★ THE STEP FUNCTION IS THE POINT, so the test has to show a step. Two inputs inside one level must
+  // come out identical and two inputs across a boundary must not — a pass that merely dimmed every
+  // channel would satisfy a "value changed" assertion and fail this one.
+  it('collapses values inside a level and separates values across one', () => {
+    const { dest, source, written } = createStubTargets([100, 120, 200, 255]);
+
+    applyPosterizeEffectToCanvas(source, dest, { kind: 'PosterizeEffect', levels: 4 });
+
+    const [red, green, blue] = written.data!;
+    expect(red).toBe(green); // 100 and 120 both sit in the second quarter
+    expect(blue).not.toBe(red); // 200 is in the fourth
+  });
+
+  it('leaves alpha untouched', () => {
+    const { dest, source, written } = createStubTargets([10, 20, 30, 40]);
+
+    applyPosterizeEffectToCanvas(source, dest, { kind: 'PosterizeEffect', levels: 8 });
+
+    expect(written.data![3]).toBe(40);
+  });
+
+  // levels below 2 would divide by zero in (levels - 1); the Gl runner clamps to 2 and so must this one.
+  it('clamps levels to at least 2 rather than dividing by zero', () => {
+    const { dest, source, written } = createStubTargets([0, 128, 255, 255]);
+
+    applyPosterizeEffectToCanvas(source, dest, { kind: 'PosterizeEffect', levels: 1 });
+
+    expect([...written.data!].every((value) => Number.isFinite(value))).toBe(true);
+    expect([...written.data!].slice(0, 3)).toEqual([expected(0, 2), expected(128, 2), expected(255, 2)]);
+  });
+
+  it('defaults to 8 levels when none is given', () => {
+    const { dest, source, written } = createStubTargets([137, 137, 137, 255]);
+
+    applyPosterizeEffectToCanvas(source, dest, { kind: 'PosterizeEffect' });
+
+    expect(written.data![0]).toBe(expected(137, 8));
+  });
+});
+
+describe('defaultCanvasPosterizeEffectRunner', () => {
+  it('routes the runner context through to the pass', () => {
+    const { dest, source, written } = createStubTargets([255, 0, 0, 255]);
+
+    defaultCanvasPosterizeEffectRunner({ dest, pool: { free: [], inUse: [] }, source, state: {} as never }, {
+      kind: 'PosterizeEffect',
+      levels: 2,
+    } as PosterizeEffect);
+
+    expect(written.data![0]).toBe(expected(255, 2));
+  });
+});
+
+describe('registerCanvasPosterizeEffect', () => {
+  // Goes through the real registry rather than a stub table: registerCanvasRenderEffect writes into the
+  // state's RUNTIME registries, so a hand-made { renderEffects } object would assert against a shape the
+  // production path never touches — a test that passes while the registration goes somewhere else.
+  it('makes the runner resolvable for the PosterizeEffect kind', () => {
+    const context = { canvas: {}, getContextAttributes: () => ({}) };
+    const state = createCanvasRenderState({ getContext: () => context } as unknown as HTMLCanvasElement, {});
+
+    expect(getCanvasRenderEffectRunner(state, 'PosterizeEffect')).toBeNull();
+    registerCanvasPosterizeEffect(state);
+    expect(getCanvasRenderEffectRunner(state, 'PosterizeEffect')).toBe(defaultCanvasPosterizeEffectRunner);
+  });
+});

package/src/canvasTiltShiftEffect.test.ts

@@ -0,0 +1,156 @@
+import { createCanvasRenderState } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, TiltShiftEffect } from '@flighthq/types/contract';
+
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+import {
+  applyTiltShiftEffectToCanvas,
+  defaultCanvasTiltShiftEffectRunner,
+  registerCanvasTiltShiftEffect,
+} from './canvasTiltShiftEffect';
+
+// A black field with a single white ROW at each named index — an impulse, whose response is the blur
+// kernel itself. It is deliberately NOT a stripe pattern: the runner takes seven taps at an integer
+// spacing, so a period-2 stripe field aliases into looking untouched no matter how large the radius
+// is, on this backend and equally on the Gl one. An impulse has no period to resonate with.
+function createImpulseTargets(
+  width: number,
+  height: number,
+  rows: ReadonlyArray<number>,
+): { dest: CanvasRenderTarget; source: CanvasRenderTarget; written: { data: Uint8ClampedArray | null } } {
+  const pixels = new Uint8ClampedArray(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    const value = rows.includes(y) ? 255 : 0;
+    for (let x = 0; x < width; x++) {
+      const at = (y * width + x) * 4;
+      pixels[at] = value;
+      pixels[at + 1] = value;
+      pixels[at + 2] = value;
+      pixels[at + 3] = 255;
+    }
+  }
+  const imageData = { data: pixels };
+  const written: { data: Uint8ClampedArray | null } = { data: null };
+  const source = {
+    context: { getImageData: () => imageData },
+    height,
+    width,
+  } as unknown as CanvasRenderTarget;
+  const dest = {
+    context: {
+      clearRect: () => {},
+      filter: 'none',
+      globalAlpha: 1,
+      globalCompositeOperation: 'source-over',
+      putImageData: (value: { data: Uint8ClampedArray }) => {
+        written.data = value.data;
+      },
+      restore: () => {},
+      save: () => {},
+      setTransform: () => {},
+    },
+    height,
+    width,
+  } as unknown as CanvasRenderTarget;
+  return { dest, source, written };
+}
+
+const rowValue = (data: Uint8ClampedArray, width: number, y: number): number => data[y * width * 4]!;
+
+describe('applyTiltShiftEffectToCanvas', () => {
+  // ★ THE BAND IS THE WHOLE EFFECT, so the test compares INSIDE it against OUTSIDE it in one image.
+  // An implementation that blurred the entire frame uniformly — the easiest thing to write by
+  // accident — passes any "the image got blurrier" assertion and fails this one.
+  it('keeps the focus band sharp while blurring above and below it', () => {
+    const { dest, source, written } = createImpulseTargets(2, 64, [6, 32]);
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 6, center: 0.5, kind: 'TiltShiftEffect', width: 0.2 });
+
+    const data = written.data!;
+    expect(rowValue(data, 2, 32)).toBe(255);
+    expect(rowValue(data, 2, 6)).toBeLessThan(80);
+  });
+
+  // The band follows `center`, and `center` is measured DOWN from the top edge. With the band near the
+  // top, the surviving impulse must be the top one — a runner that inherited the Gl flip keeps the
+  // bottom one instead, and a centred band cannot tell the two apart because |y - 0.5| is symmetric.
+  it('measures center down from the top edge', () => {
+    const { dest, source, written } = createImpulseTargets(2, 64, [6, 57]);
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 6, center: 0.1, kind: 'TiltShiftEffect', width: 0.15 });
+
+    const data = written.data!;
+    expect(rowValue(data, 2, 6)).toBe(255);
+    expect(rowValue(data, 2, 57)).toBeLessThan(80);
+  });
+
+  it('is the identity when blur is 0', () => {
+    const { dest, source, written } = createImpulseTargets(2, 16, [4]);
+    const original = [...source.context.getImageData(0, 0, 2, 16).data];
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 0, center: 0.5, kind: 'TiltShiftEffect', width: 0.2 });
+
+    expect([...written.data!]).toEqual(original);
+  });
+
+  // A band wide enough to cover the frame leaves everything in focus, so nothing may blur. This is the
+  // parameter's own extreme, and it separates `width` from `blur`.
+  it('leaves the whole frame sharp when the band covers it', () => {
+    const { dest, source, written } = createImpulseTargets(2, 32, [8, 24]);
+    const original = [...source.context.getImageData(0, 0, 2, 32).data];
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 8, center: 0.5, kind: 'TiltShiftEffect', width: 2 });
+
+    expect([...written.data!]).toEqual(original);
+  });
+
+  // ★ SEVEN EQUAL TAPS IS THE KERNEL THE OTHER BACKENDS DRAW, and an impulse measures it directly: a
+  // fully blurred white row keeps exactly 1/7 of its value, and each of the six offset rows receives
+  // the same 1/7. A Gaussian of the same nominal radius leaves far more at the centre and far less at
+  // the extremes, so this pins the weighting rather than merely observing that something spread.
+  it('spreads an impulse into seven equal taps', () => {
+    const { dest, source, written } = createImpulseTargets(2, 64, [32]);
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 6, center: 0.5, kind: 'TiltShiftEffect', width: 0.01 });
+
+    const data = written.data!;
+    const share = Math.round(255 / 7);
+    expect(rowValue(data, 2, 32)).toBe(share);
+    expect(rowValue(data, 2, 26)).toBe(share);
+    expect(rowValue(data, 2, 38)).toBe(share);
+    expect(rowValue(data, 2, 29)).toBe(0);
+  });
+
+  it('leaves alpha at full where the source is opaque', () => {
+    const { dest, source, written } = createImpulseTargets(2, 32, [16]);
+
+    applyTiltShiftEffectToCanvas(source, dest, { blur: 6, center: 0.5, kind: 'TiltShiftEffect', width: 0.2 });
+
+    expect(written.data![3]).toBe(255);
+  });
+});
+
+describe('defaultCanvasTiltShiftEffectRunner', () => {
+  it('routes the runner context through to the pass', () => {
+    const { dest, source, written } = createImpulseTargets(2, 16, [4]);
+
+    defaultCanvasTiltShiftEffectRunner({ dest, pool: { free: [], inUse: [] }, source, state: {} as never }, {
+      blur: 0,
+      kind: 'TiltShiftEffect',
+    } as TiltShiftEffect);
+
+    expect(written.data).not.toBeNull();
+  });
+});
+
+describe('registerCanvasTiltShiftEffect', () => {
+  // Through the real registry, not a stub table: registerCanvasRenderEffect writes into the state's
+  // runtime registries, so a hand-made object would assert against a shape production never touches.
+  it('makes the runner resolvable for the TiltShiftEffect kind', () => {
+    const context = { canvas: {}, getContextAttributes: () => ({}) };
+    const state = createCanvasRenderState({ getContext: () => context } as unknown as HTMLCanvasElement, {});
+
+    expect(getCanvasRenderEffectRunner(state, 'TiltShiftEffect')).toBeNull();
+    registerCanvasTiltShiftEffect(state);
+    expect(getCanvasRenderEffectRunner(state, 'TiltShiftEffect')).toBe(defaultCanvasTiltShiftEffectRunner);
+  });
+});