@arraypress/covers 1.0.0 → 1.1.0

package/src/effects/pixels.js

@@ -0,0 +1,138 @@
+/**
+ * Effects computed on pixels, where SVG filters can't do them (spin and
+ * zoom blur, bokeh, distortions, pixel sorting, ASCII…): the layer is
+ * drawn once at the pixels it's shown at (sharp in Node, tiled past a few
+ * megapixels; a canvas in a page), processed here on a typed array, mixed
+ * with the original through the effect's `mask`, and embedded back as one
+ * image (JPEG where it's opaque, PNG where it isn't or where flat colour
+ * matters), cropped to what it paints. Where nothing can draw pixels (a
+ * Worker) the caller falls back to the effect's filter, if it has one.
+ *
+ * @module effects/pixels
+ */
+
+import { attrs, num } from '../svg.js';
+import { pixelsOf, encodePixels } from '../raster/index.js';
+import { svgPixels } from '../render/tiles.js';
+import { toBase64 } from '../platform/bytes.js';
+import { nearest } from './buffer.js';
+import { maskGrid, lerpPixels } from './mask.js';
+
+/** The most pixels an effect works on (about 3550²); past that it works smaller and the image scales up. */
+export const MAX_PIXELS = 12.6e6;
+
+/**
+ * What a pixel effect returns: the processed pixels, at the layer's
+ * raster size or (with `pixelated`) a grid of cells scaled up crisp.
+ *
+ * @typedef {object} PixelResult
+ * @property {Uint8ClampedArray} data
+ * @property {number} width
+ * @property {number} height
+ * @property {boolean} [lossless] - Embed as PNG even when opaque (flat colour).
+ * @property {boolean} [pixelated] - Smaller than the layer: scaled up nearest-neighbour.
+ */
+
+/**
+ * A layer's markup as pixels, `w`×`h` over its canvas.
+ *
+ * @param {{ defs: string, body: string }} m
+ * @param {any} ctx
+ * @param {number} w
+ * @param {number} h
+ * @returns {Promise<Uint8ClampedArray | undefined>} RGBA, or undefined where nothing can draw.
+ */
+export async function drawLayer(m, ctx, w, h) {
+  const sx = w / ctx.width;
+  const sy = h / ctx.height;
+  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${m.defs ? `<defs>${m.defs}</defs>` : ''}<g transform="scale(${num(sx, 6)} ${num(sy, 6)})">${m.body}</g></svg>`;
+  try {
+    const out = ctx.sharp ? await svgPixels(ctx.sharp, doc, w, h) : await pixelsOf(doc, w, h);
+    return out ? new Uint8ClampedArray(out.buffer, out.byteOffset, out.byteLength) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * The raster size for a layer: its pixels as shown (`ctx.res` per unit),
+ * at most {@link MAX_PIXELS} (or the effect's own cap).
+ *
+ * @param {any} ctx
+ * @param {number} [cap=MAX_PIXELS]
+ * @returns {{ w: number, h: number, scale: number }}
+ */
+export function rasterSize(ctx, cap = MAX_PIXELS) {
+  const res = Math.min(ctx.res ?? 1, Math.sqrt(cap / (ctx.width * ctx.height)));
+  const w = Math.max(1, Math.round(ctx.width * res));
+  const h = Math.max(1, Math.round(ctx.height * res));
+  return { w, h, scale: Math.sqrt((w / ctx.width) * (h / ctx.height)) };
+}
+
+/**
+ * Run a pixel effect on a layer's markup.
+ *
+ * @param {any} fx - The effect (its `mask` is applied here).
+ * @param {{ defs: string, body: string }} m - The layer so far.
+ * @param {any} ctx
+ * @param {(img: import('./buffer.js').Pixels) => PixelResult | Uint8ClampedArray | Promise<PixelResult | Uint8ClampedArray>} run
+ * @param {{ cap?: number }} [o]
+ * @returns {Promise<{ defs: string, body: string } | undefined>} Undefined where nothing can draw pixels.
+ */
+export async function pixelEffect(fx, m, ctx, run, o = {}) {
+  const { w, h, scale } = rasterSize(ctx, o.cap);
+  const data = await drawLayer(m, ctx, w, h);
+  if (!data) return undefined;
+  let opaque = true;
+  for (let i = 3; i < data.length; i += 4) if (data[i] !== 255) { opaque = false; break; }
+  const img = { data, width: w, height: h, scale, opaque };
+  const got = await run(img);
+  /** @type {PixelResult} */
+  let res = got instanceof Uint8ClampedArray ? { data: got, width: w, height: h } : got;
+  if (fx.mask) {
+    const grid = await maskGrid(fx.mask, ctx, { x: 0, y: 0, width: ctx.width, height: ctx.height }, w, h);
+    if (grid) {
+      const full = res.width === w && res.height === h ? res.data : nearest(res.data, res.width, res.height, w, h);
+      res = { data: lerpPixels(data, full, grid), width: w, height: h, lossless: res.lossless };
+    }
+  }
+  return embed(res, ctx);
+}
+
+/**
+ * Pixels as an `<image>` over the layer's canvas, cropped to what's painted.
+ *
+ * @param {PixelResult} res
+ * @param {any} ctx
+ * @returns {Promise<{ defs: string, body: string }>}
+ */
+async function embed(res, ctx) {
+  const { data, width: w, height: h } = res;
+  let x0 = w; let y0 = h; let x1 = -1; let y1 = -1;
+  let opaque = true;
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const a = data[(y * w + x) * 4 + 3];
+      if (a !== 255) opaque = false;
+      if (!a) continue;
+      if (x < x0) x0 = x;
+      if (x > x1) x1 = x;
+      if (y < y0) y0 = y;
+      if (y > y1) y1 = y;
+    }
+  }
+  if (x1 < 0) return { defs: '', body: '' };
+  let crop = data;
+  const cw = x1 - x0 + 1;
+  const ch = y1 - y0 + 1;
+  if (cw !== w || ch !== h) {
+    crop = new Uint8ClampedArray(cw * ch * 4);
+    for (let y = 0; y < ch; y++) crop.set(data.subarray(((y0 + y) * w + x0) * 4, ((y0 + y) * w + x1 + 1) * 4), y * cw * 4);
+  }
+  const { mime, bytes } = await encodePixels(crop, cw, ch, { opaque, lossless: res.lossless || res.pixelated }, ctx.sharp);
+  const kx = ctx.width / w;
+  const ky = ctx.height / h;
+  const crisp = res.pixelated ? { 'image-rendering': 'pixelated', style: 'image-rendering:pixelated' } : {};
+  const image = `<image${attrs({ x: num(x0 * kx, 4), y: num(y0 * ky, 4), width: num(cw * kx, 4), height: num(ch * ky, 4), preserveAspectRatio: 'none', ...crisp, href: `data:${mime};base64,${toBase64(bytes)}` })}/>`;
+  return { defs: '', body: image };
+}

package/src/effects/polar.d.ts

@@ -0,0 +1,10 @@
+// Blurs about a centre, on pixels.
+import type { Effect } from './index.js';
+import type { Pixels } from './buffer.js';
+
+/** `spin`: a rotational blur. */
+export function spin(img: Pixels, fx: Extract<Effect, { kind: 'spin' }>): Uint8ClampedArray;
+/** `zoom`: a radial blur toward the centre. */
+export function zoom(img: Pixels, fx: Extract<Effect, { kind: 'zoom' }>): Uint8ClampedArray;
+/** `rays`: god rays from a light. */
+export function rays(img: Pixels, fx: Extract<Effect, { kind: 'rays' }>): Uint8ClampedArray;

package/src/effects/polar.js

@@ -0,0 +1,265 @@
+/**
+ * Blurs about a centre, on pixels: `zoom` (radial, every point smeared
+ * toward the centre), `spin` (rotational, along circles round it) and
+ * `rays` (god rays: the highlights streaked away from a light).
+ *
+ * The layer is resampled into polar coordinates (one row per radius or
+ * per angle, a pixel apart at the rim), blurred along one axis with
+ * running sums (O(1) a sample, whatever the length), and resampled back.
+ * The centre pixel never moves.
+ *
+ * @module effects/polar
+ */
+
+import { premultiplied, unpremultiply, bilinear, pointPx, luma, smoothstep, toSrgb, TO_LINEAR, shrink, enlarge } from './buffer.js';
+import { rgb } from './util.js';
+
+/** The most polar samples (angles × radii) a blur works on. */
+const BUDGET = 30e6;
+
+/**
+ * A polar grid round a centre, sized to the farthest corner: a sample a
+ * pixel apart along each ray, and round the rim a pixel apart (two, when
+ * `blur` px of smear there hides it).
+ *
+ * @param {number} w @param {number} h @param {number} cx @param {number} cy
+ * @param {(rmax: number) => number} [blur] - How long the blur is at the rim, px.
+ * @returns {{ nr: number, nt: number }}
+ */
+function gridFor(w, h, cx, cy, blur) {
+  const rmax = Math.max(Math.hypot(cx, cy), Math.hypot(w - 1 - cx, cy), Math.hypot(cx, h - 1 - cy), Math.hypot(w - 1 - cx, h - 1 - cy)) + 2;
+  const nr = Math.ceil(rmax) + 1;
+  const step = blur && blur(rmax) >= 32 ? 2 : 1;
+  const nt = Math.max(16, Math.min(Math.ceil((2 * Math.PI * rmax) / step), Math.floor(BUDGET / nr)));
+  return { nr, nt };
+}
+
+/**
+ * Resample into polar coordinates: row-major by angle (`byAngle`, each row
+ * a ray from the centre) or by radius (each row a circle).
+ *
+ * @param {Uint8ClampedArray} src - Premultiplied RGBA.
+ * @param {number} w @param {number} h @param {number} cx @param {number} cy
+ * @param {number} nt @param {number} nr
+ * @param {boolean} byAngle
+ * @returns {Uint8ClampedArray}
+ */
+function toPolar(src, w, h, cx, cy, nt, nr, byAngle) {
+  const out = new Uint8ClampedArray(nt * nr * 4);
+  for (let j = 0; j < nt; j++) {
+    const t = (2 * Math.PI * j) / nt;
+    const c = Math.cos(t);
+    const s = Math.sin(t);
+    for (let i = 0; i < nr; i++) bilinear(src, w, h, cx + i * c, cy + i * s, out, (byAngle ? j * nr + i : i * nt + j) * 4);
+  }
+  return out;
+}
+
+/**
+ * Resample polar samples back onto the layer's pixels.
+ *
+ * @param {Uint8ClampedArray} p
+ * @param {number} w @param {number} h @param {number} cx @param {number} cy
+ * @param {number} nt @param {number} nr
+ * @param {boolean} byAngle
+ * @returns {Uint8ClampedArray}
+ */
+function fromPolar(p, w, h, cx, cy, nt, nr, byAngle) {
+  const out = new Uint8ClampedArray(w * h * 4);
+  const kt = nt / (2 * Math.PI);
+  for (let y = 0, o = 0; y < h; y++) {
+    const dy = y - cy;
+    for (let x = 0; x < w; x++, o += 4) {
+      const dx = x - cx;
+      let r = Math.sqrt(dx * dx + dy * dy);
+      let t = Math.atan2(dy, dx);
+      if (t < 0) t += 2 * Math.PI;
+      if (r > nr - 1) r = nr - 1;
+      const ft = t * kt;
+      let j0 = ft | 0;
+      const wt = ft - j0;
+      if (j0 >= nt) j0 -= nt;
+      const j1 = j0 + 1 === nt ? 0 : j0 + 1;
+      const i0 = r | 0;
+      const wr = r - i0;
+      const i1 = i0 + 1 < nr ? i0 + 1 : i0;
+      const a = (byAngle ? j0 * nr + i0 : i0 * nt + j0) * 4;
+      const b = (byAngle ? j0 * nr + i1 : i1 * nt + j0) * 4;
+      const c = (byAngle ? j1 * nr + i0 : i0 * nt + j1) * 4;
+      const d = (byAngle ? j1 * nr + i1 : i1 * nt + j1) * 4;
+      const w00 = (1 - wr) * (1 - wt);
+      const w10 = wr * (1 - wt);
+      const w01 = (1 - wr) * wt;
+      const w11 = wr * wt;
+      for (let k = 0; k < 4; k++) out[o + k] = p[a + k] * w00 + p[b + k] * w10 + p[c + k] * w01 + p[d + k] * w11;
+    }
+  }
+  return out;
+}
+
+/** The centre in pixel coordinates (pixel x's centre is x). @param {any} fx @param {import('./buffer.js').Pixels} img @returns {[number, number]} */
+function centreOf(fx, img) {
+  const [x, y] = pointPx(fx.center, img);
+  return [x - 0.5, y - 0.5];
+}
+
+/**
+ * `spin`: a rotational blur, `angle` degrees along circles round `center`
+ * (a camera turned during the exposure).
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @param {import('./index.js').Effect & { kind: 'spin' }} fx
+ * @returns {Uint8ClampedArray}
+ */
+export function spin(img, fx) {
+  const { width: w, height: h } = img;
+  const [cx, cy] = centreOf(fx, img);
+  const turn = Math.min(360, Math.abs(fx.angle ?? 12));
+  const { nr, nt } = gridFor(w, h, cx, cy, (r) => (turn / 180) * Math.PI * r);
+  const span = Math.round((turn / 360) * nt);
+  if (span < 2) return img.data;
+  const p = toPolar(premultiplied(img), w, h, cx, cy, nt, nr, false);
+  // Each row is a circle: a circular box of `span` samples, centred.
+  const row = new Uint8ClampedArray(nt * 4);
+  const acc = new Float64Array(4);
+  const half = span >> 1;
+  const inv = 1 / (span + 1);
+  for (let i = 0; i < nr; i++) {
+    const base = i * nt * 4;
+    row.set(p.subarray(base, base + nt * 4));
+    acc.fill(0);
+    for (let k = -half; k <= span - half; k++) {
+      const j = ((k % nt) + nt) % nt;
+      for (let c = 0; c < 4; c++) acc[c] += row[j * 4 + c];
+    }
+    for (let j = 0; j < nt; j++) {
+      const o = base + j * 4;
+      for (let c = 0; c < 4; c++) p[o + c] = acc[c] * inv;
+      let add = j + span - half + 1;
+      if (add >= nt) add -= nt;
+      let sub = j - half;
+      if (sub < 0) sub += nt;
+      for (let c = 0; c < 4; c++) acc[c] += row[add * 4 + c] - row[sub * 4 + c];
+    }
+  }
+  const out = fromPolar(p, w, h, cx, cy, nt, nr, false);
+  return img.opaque ? out : unpremultiply(out);
+}
+
+/**
+ * `zoom`: a radial blur, each point averaged with what lies between it and
+ * `center` over `amount` of the way (a zoom during the exposure).
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @param {import('./index.js').Effect & { kind: 'zoom' }} fx
+ * @returns {Uint8ClampedArray}
+ */
+export function zoom(img, fx) {
+  const { width: w, height: h } = img;
+  const [cx, cy] = centreOf(fx, img);
+  const amount = Math.min(0.95, Math.max(0, fx.amount ?? 0.2));
+  const { nr, nt } = gridFor(w, h, cx, cy, (r) => amount * r);
+  if (!amount) return img.data;
+  const p = toPolar(premultiplied(img), w, h, cx, cy, nt, nr, true);
+  const sum = new Float64Array((nr + 1) * 4);
+  for (let j = 0; j < nt; j++) {
+    const base = j * nr * 4;
+    for (let i = 0; i < nr; i++) for (let c = 0; c < 4; c++) sum[(i + 1) * 4 + c] = sum[i * 4 + c] + p[base + i * 4 + c];
+    for (let i = 1; i < nr; i++) {
+      const from = Math.floor(i * (1 - amount));
+      const k = 1 / (i + 1 - from);
+      for (let c = 0; c < 4; c++) p[base + i * 4 + c] = (sum[(i + 1) * 4 + c] - sum[from * 4 + c]) * k;
+    }
+  }
+  const out = fromPolar(p, w, h, cx, cy, nt, nr, true);
+  return img.opaque ? out : unpremultiply(out);
+}
+
+/**
+ * Where the light is, when `rays` isn't given a `center`: the brightest
+ * patch, from a coarse grid.
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @returns {[number, number]} Pixel coordinates.
+ */
+function brightest(img) {
+  const { data, width: w, height: h } = img;
+  const g = 48;
+  const cw = w / g;
+  const ch = h / g;
+  let best = -1;
+  let at = [w / 2, h / 2];
+  for (let gy = 0; gy < g; gy++) {
+    for (let gx = 0; gx < g; gx++) {
+      let s = 0;
+      let n = 0;
+      for (let y = Math.floor(gy * ch); y < Math.floor((gy + 1) * ch); y += 2) {
+        for (let x = Math.floor(gx * cw); x < Math.floor((gx + 1) * cw); x += 2) { const i = (y * w + x) * 4; s += luma(data, i) * data[i + 3]; n++; }
+      }
+      if (n && s / n > best) { best = s / n; at = [(gx + 0.5) * cw, (gy + 0.5) * ch]; }
+    }
+  }
+  return /** @type {[number, number]} */ (at);
+}
+
+/**
+ * `rays`: god rays. The highlights above `threshold` are streaked away
+ * from the light (`center`, default the brightest patch): each point gets
+ * the light between it and the source, so anything in the way casts a
+ * shaft, fading over `length` (a fraction of the frame), tinted with
+ * `color` and added on top (`intensity`).
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @param {import('./index.js').Effect & { kind: 'rays' }} fx
+ * @returns {Uint8ClampedArray}
+ */
+export function rays(img, fx) {
+  const { data, width: w, height: h } = img;
+  const [cx0, cy0] = fx.center ? centreOf(fx, img) : brightest(img);
+  const t = fx.threshold ?? 0.8;
+  const tint = rgb(fx.color ?? '#fff3d6');
+  // Bright pass, premultiplied.
+  const bright = new Uint8ClampedArray(w * h * 4);
+  for (let i = 0; i < data.length; i += 4) {
+    const k = smoothstep(t, 1, luma(data, i) / 255) * (data[i + 3] / 255);
+    if (!k) continue;
+    bright[i] = data[i] * k * tint[0];
+    bright[i + 1] = data[i + 1] * k * tint[1];
+    bright[i + 2] = data[i + 2] * k * tint[2];
+    bright[i + 3] = 255 * k;
+  }
+  // Rays are soft: past a couple of megapixels they're worked at half size.
+  const f = w * h > 2.5e6 ? 2 : 1;
+  const small = f > 1 ? shrink(bright, w, h, f) : { data: bright, width: w, height: h };
+  const sw = small.width;
+  const sh = small.height;
+  const cx = (cx0 + 0.5) / f - 0.5;
+  const cy = (cy0 + 0.5) / f - 0.5;
+  const { nr, nt } = gridFor(sw, sh, cx, cy);
+  const p = toPolar(small.data, sw, sh, cx, cy, nt, nr, true);
+  // Each point gets the mean of the light between it and the source (an
+  // occluder on the way leaves a shadow shaft), fading with distance.
+  const reach = Math.max(1, (fx.length ?? 0.5) * nr);
+  const acc = new Float64Array(4);
+  for (let j = 0; j < nt; j++) {
+    const base = j * nr * 4;
+    acc.fill(0);
+    for (let i = 0; i < nr; i++) {
+      const fade = Math.exp(-i / reach) / (i + 1);
+      for (let c = 0; c < 4; c++) {
+        acc[c] += p[base + i * 4 + c];
+        p[base + i * 4 + c] = Math.min(255, acc[c] * fade * 1.6);
+      }
+    }
+  }
+  const back = fromPolar(p, sw, sh, cx, cy, nt, nr, true);
+  const glow = f > 1 ? enlarge(back, sw, sh, w, h) : back;
+  // Added in linear light, so the rays brighten like light does.
+  const k = fx.intensity ?? 1;
+  const out = new Uint8ClampedArray(data.length);
+  for (let i = 0; i < data.length; i += 4) {
+    out[i + 3] = Math.max(data[i + 3], glow[i + 3]);
+    for (let c = 0; c < 3; c++) out[i + c] = toSrgb(TO_LINEAR[data[i + c]] * (data[i + 3] / Math.max(1, out[i + 3])) + TO_LINEAR[glow[i + c]] * k);
+  }
+  return out;
+}

package/src/effects/region.d.ts

@@ -0,0 +1,8 @@
+// Making filters cheap for librsvg without changing what they draw.
+
+/** Split each `feMorphology` into an x pass and a y pass (identical output, O(r) not O(r²)). */
+export function separableMorphology(markup: string): string;
+/** Whether a chain of primitives only paints where its source does. */
+export function bounded(markup: string): boolean;
+/** How far filter primitives reach from what they read, in their units (an overestimate). */
+export function filterReach(markup: string): number;

package/src/effects/region.js

@@ -0,0 +1,136 @@
+/**
+ * Making filters cheap for librsvg (`renderImage`), without changing what
+ * they draw:
+ *
+ * - **Separable morphology.** `feMorphology` is a max/min over a
+ *   rectangle, which is the same as a pass along x then one along y;
+ *   librsvg does the full rectangle per pixel (O(r²)), the two passes are
+ *   O(r). Identical output.
+ * - **Content-sized regions.** A filter's region defaults to the canvas
+ *   (padded); librsvg works every primitive over all of it. When the
+ *   chain's result can only paint where its source does (worked out from
+ *   the primitives: floods, turbulence, images and lighting paint
+ *   everywhere; `in` composites, blurs and offsets stay with their input),
+ *   the region shrinks to the layer's painted box plus the same padding.
+ *
+ * @module effects/region
+ */
+
+import { attrs } from '../svg.js';
+
+/**
+ * Split each `feMorphology` into an x pass and a y pass.
+ *
+ * @param {string} markup
+ * @returns {string}
+ */
+export function separableMorphology(markup) {
+  return markup.replace(/<feMorphology\b([^>]*?)\/>/g, (whole, rest) => {
+    const r = /\sradius\s*=\s*"([^"]*)"/.exec(rest);
+    if (!r) return whole;
+    const [rx, ry = rx] = r[1].trim().split(/[\s,]+/).map(Number);
+    if (!(rx > 0 && ry > 0)) return whole;
+    const result = /\sresult\s*=\s*"([^"]*)"/.exec(rest)?.[1];
+    const base = rest.replace(/\s(radius|result)\s*=\s*"[^"]*"/g, '');
+    const mid = `${result ?? 'm'}${Math.round(rx * 1000)}x`;
+    const second = base.replace(/\sin\s*=\s*"[^"]*"/, '');
+    return `<feMorphology${base}${attrs({ radius: `${rx} 0`, result: mid })}/><feMorphology${second}${attrs({ in: mid, radius: `0 ${ry}`, result })}/>`;
+  });
+}
+
+/** @param {string} svg @param {RegExp} re @returns {number} The largest number a pattern's first group holds. */
+function most(svg, re) {
+  let m = 0;
+  for (const x of svg.matchAll(re)) for (const v of x[1].trim().split(/[\s,]+/)) m = Math.max(m, Math.abs(Number(v)) || 0);
+  return m;
+}
+
+/**
+ * How far filter primitives reach from what they read, in their units:
+ * blur (3σ), displacement (half its scale), morphology radius and offsets,
+ * added up (an overestimate).
+ *
+ * @param {string} markup
+ * @returns {number}
+ */
+export function filterReach(markup) {
+  return 3 * most(markup, /stdDeviation="([^"]*)"/g)
+    + most(markup, /<feDisplacementMap\b[^>]*\sscale="([^"]*)"/g) / 2
+    + most(markup, /<feMorphology\b[^>]*\sradius="([^"]*)"/g)
+    + most(markup, /<(?:feOffset|feDropShadow)\b[^>]*\sd[xy]="([^"]*)"/g);
+}
+
+/** @param {string} s @returns {Record<string, string>} */
+const attributesOf = (s) => Object.fromEntries([...s.matchAll(/([\w:-]+)\s*=\s*"([^"]*)"/g)].map((m) => [m[1], m[2]]));
+
+/**
+ * Whether a chain of primitives only paints where its source does (so its
+ * region can shrink to the source's box plus padding).
+ *
+ * @param {string} markup - Filter primitives.
+ * @returns {boolean}
+ */
+export function bounded(markup) {
+  /** @type {Map<string, boolean>} */
+  const results = new Map([['SourceGraphic', true], ['SourceAlpha', true]]);
+  let last = true;
+  const input = (/** @type {string | undefined} */ name) => (name == null ? last : results.get(name) ?? false);
+  for (const m of markup.matchAll(/<(fe\w+)\b([^>]*?)(\/>|>([\s\S]*?)<\/\1>)/g)) {
+    const [, tag, rest, , inner = ''] = m;
+    const a = attributesOf(rest);
+    let b;
+    switch (tag) {
+      case 'feFlood': case 'feTurbulence': case 'feImage': case 'feDiffuseLighting': case 'feSpecularLighting': case 'feTile':
+        b = false; break;
+      case 'feComposite': {
+        const i1 = input(a.in);
+        const i2 = input(a.in2);
+        const op = a.operator ?? 'over';
+        if (op === 'in') b = i1 || i2;
+        else if (op === 'atop') b = i2;
+        else if (op === 'out') b = i1;
+        else if (op === 'arithmetic') {
+          const k = (/** @type {string} */ n) => Number(a[n] ?? 0);
+          b = k('k4') === 0 && (k('k2') === 0 || i1) && (k('k3') === 0 || i2) && (k('k1') === 0 || i1 || i2);
+        } else b = i1 && i2;
+        break;
+      }
+      case 'feMerge':
+        b = [...inner.matchAll(/<feMergeNode\b([^>]*)\/?>/g)].every((n) => input(attributesOf(n[1]).in));
+        break;
+      case 'feBlend':
+        b = input(a.in) && input(a.in2);
+        break;
+      case 'feColorMatrix': {
+        const v = (a.values ?? '').trim().split(/[\s,]+/).map(Number);
+        // A matrix whose alpha row adds a constant can paint where the source is clear.
+        b = input(a.in) && !((a.type ?? 'matrix') === 'matrix' && v.length === 20 && v[19] > 0);
+        break;
+      }
+      case 'feComponentTransfer': {
+        const fa = /<feFuncA\b([^>]*)\/?>/.exec(inner);
+        b = input(a.in) && (!fa || zeroStays(attributesOf(fa[1])));
+        break;
+      }
+      case 'feDisplacementMap':
+        b = input(a.in);
+        break;
+      default:
+        // Blur, offset, morphology, convolve: they spread their input (the padding covers it).
+        b = input(a.in);
+    }
+    last = b;
+    if (a.result) results.set(a.result, b);
+  }
+  return last;
+}
+
+/** @param {Record<string, string>} f - A feFuncA's attributes. @returns {boolean} Whether alpha 0 stays 0. */
+function zeroStays(f) {
+  const type = f.type ?? 'identity';
+  if (type === 'identity') return true;
+  if (type === 'linear') return Number(f.intercept ?? 0) <= 0;
+  if (type === 'gamma') return Number(f.offset ?? 0) <= 0;
+  const first = Number((f.tableValues ?? '0').trim().split(/[\s,]+/)[0]);
+  return first <= 0;
+}

package/src/effects/round-border.d.ts

@@ -0,0 +1,5 @@
+// A round sticker border.
+import type { RenderContext, Markup } from '../render/context.js';
+
+/** A disc under the layer, round what it paints (undefined where nothing can rasterise). */
+export function roundBorder(fx: { kind: 'border'; shape: 'circle'; width?: import('../index.js').Length; color?: string; line?: boolean | string; lineWidth?: import('../index.js').Length; cx?: import('../index.js').Length; cy?: import('../index.js').Length }, m: Markup, ctx: RenderContext): Promise<Markup | undefined>;

package/src/effects/round-border.js

@@ -0,0 +1,62 @@
+/**
+ * `border` with `shape: 'circle'`: a round sticker backing. The layer is
+ * drawn small to find the circle that holds it (centred on what it paints,
+ * out to its farthest pixel), then a disc `width` beyond that goes under it
+ * (and a cut line outside, with `line`).
+ *
+ * @module effects/round-border
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { pixelsOf } from '../raster/index.js';
+
+/** The probe's longer side, px. */
+const PROBE = 320;
+
+/**
+ * The round border, or undefined where nothing can rasterise (the
+ * die-cut `border` filter is used instead).
+ *
+ * @param {any} fx - `{ kind: 'border', shape: 'circle', width, color, line, lineWidth, cx, cy }`.
+ * @param {{ defs: string, body: string }} m
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<{ defs: string, body: string } | undefined>}
+ */
+export async function roundBorder(fx, m, ctx) {
+  const ox = -ctx.width / 2;
+  const oy = -ctx.height / 2;
+  const uw = ctx.width * 2;
+  const uh = ctx.height * 2;
+  const s = PROBE / Math.max(uw, uh);
+  const w = Math.max(1, Math.round(uw * s));
+  const h = Math.max(1, Math.round(uh * s));
+  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${num(ox, 4)} ${num(oy, 4)} ${num(uw, 4)} ${num(uh, 4)}" preserveAspectRatio="none">${m.defs ? `<defs>${m.defs}</defs>` : ''}${m.body}</svg>`;
+  let px;
+  try {
+    px = await pixelsOf(doc, w, h, /** @type {any} */ (ctx).sharp);
+  } catch {
+    px = undefined;
+  }
+  if (!px) return undefined;
+  /** @type {[number, number][]} */
+  const painted = [];
+  let x0 = Infinity; let y0 = Infinity; let x1 = -Infinity; let y1 = -Infinity;
+  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+    if (px[(y * w + x) * 4 + 3] < 8) continue;
+    painted.push([x, y]);
+    x0 = Math.min(x0, x); x1 = Math.max(x1, x); y0 = Math.min(y0, y); y1 = Math.max(y1, y);
+  }
+  if (!painted.length) return m;
+  const cx = fx.cx != null ? len(fx.cx, ctx.canvas) : ox + ((x0 + x1 + 1) / 2) / s;
+  const cy = fx.cy != null ? len(fx.cy, ctx.canvas) : oy + ((y0 + y1 + 1) / 2) / s;
+  // The farthest painted pixel's far corner.
+  let reach = 0;
+  for (const [x, y] of painted) reach = Math.max(reach, Math.hypot(ox + (x + 0.5) / s - cx, oy + (y + 0.5) / s - cy) + 0.71 / s);
+  const r = reach + len(fx.width, ctx.canvas, '1.2vmin');
+  let under = '';
+  if (fx.line) under += `<circle${attrs({ cx, cy, r: r + len(fx.lineWidth, ctx.canvas, '0.25vmin'), fill: fx.line === true ? '#c9c6c0' : toHex(fx.line) })}/>`;
+  under += `<circle${attrs({ cx, cy, r, fill: toHex(fx.color ?? '#ffffff') })}/>`;
+  return { defs: m.defs, body: `${under}${m.body}` };
+}

package/src/effects/screen.d.ts

@@ -0,0 +1,14 @@
+// Screens and signals.
+import type { Effect } from './index.js';
+import type { RenderContext } from '../render/context.js';
+import type { Pixels } from './buffer.js';
+import type { PixelResult } from './pixels.js';
+
+/** The `scanlines` effect's filter primitives. */
+export function scanlines(fx: Extract<Effect, { kind: 'scanlines' }>, ctx: RenderContext): string;
+/** `crt`, on pixels. */
+export function crt(img: Pixels, fx: Extract<Effect, { kind: 'crt' }>, ctx: object): Uint8ClampedArray;
+/** `vhs`, on pixels. */
+export function vhs(img: Pixels, fx: Extract<Effect, { kind: 'vhs' }>, ctx: object): Uint8ClampedArray;
+/** `jpeg`: through a real JPEG encoder, on pixels. */
+export function jpeg(img: Pixels, fx: Extract<Effect, { kind: 'jpeg' }>, ctx: object): Promise<PixelResult | Uint8ClampedArray>;