@swiftbrowser/web 0.1.0 → 0.2.0

package/src/imageOps.ts

@@ -0,0 +1,592 @@
+/**
+ * The pixel side of Core Image: the steps of a bitmap recipe (Core Image's
+ * built-in filters, crops and renders) run on a raster in plain TypeScript,
+ * so they behave the same in every browser and in Node's unit tests. No DOM
+ * here; src/bitmapStore.ts decodes the sources and src/bitmaps.ts puts the
+ * result on a canvas.
+ * The formulas are in docs/ops-protocol.md, "Bitmaps and Core Image".
+ *
+ * A raster covers a rectangle of Core Image's space (units of source pixels,
+ * origin at the bottom left, y up) at `scale` raster pixels per unit; the
+ * page usually works below full resolution (scale < 1), at the size the
+ * image is shown, and every length a step takes (a radius, a cell size) is
+ * scaled with it. Pixels are premultiplied RGBA floats in 0…1, rows from the
+ * top, as Core Image works premultiplied: a blur then fades to clear instead
+ * of to black.
+ */
+
+import type { BitmapPoint, BitmapStep } from './protocol';
+
+export interface Raster {
+  /** Size in raster pixels. */
+  width: number;
+  height: number;
+  /** Premultiplied RGBA, 0…1, `width * height * 4` values, rows from the top. */
+  data: Float32Array;
+  /** The rectangle covered, in Core Image units (origin at the bottom left). */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** Raster pixels per Core Image unit. */
+  scale: number;
+  /** `clampedToExtent()`: outside its rectangle the image repeats its edge pixels instead of being clear. */
+  clamped: boolean;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** An empty raster covering `rect` at `scale` (its pixel size rounded, at least 0). */
+export function makeRaster(rect: Rect, scale: number, clamped = false): Raster {
+  const width = Math.max(0, Math.round(rect.width * scale));
+  const height = Math.max(0, Math.round(rect.height * scale));
+  return { width, height, data: new Float32Array(width * height * 4), x: rect.x, y: rect.y, w: rect.width, h: rect.height, scale, clamped };
+}
+
+/** A raster from straight (not premultiplied) RGBA bytes. */
+export function rasterFromRGBA(rgba: ArrayLike<number>, width: number, height: number, rect: Rect, scale: number): Raster {
+  const raster: Raster = { width, height, data: new Float32Array(width * height * 4), x: rect.x, y: rect.y, w: rect.width, h: rect.height, scale, clamped: false };
+  const out = raster.data;
+  for (let i = 0; i < width * height * 4; i += 4) {
+    const a = rgba[i + 3]! / 255;
+    out[i] = (rgba[i]! / 255) * a;
+    out[i + 1] = (rgba[i + 1]! / 255) * a;
+    out[i + 2] = (rgba[i + 2]! / 255) * a;
+    out[i + 3] = a;
+  }
+  return raster;
+}
+
+/** Straight RGBA bytes from a raster (what `ImageData` holds). */
+export function rasterToRGBA(raster: Raster): Uint8ClampedArray<ArrayBuffer> {
+  const out = new Uint8ClampedArray(raster.width * raster.height * 4);
+  const data = raster.data;
+  for (let i = 0; i < out.length; i += 4) {
+    const a = data[i + 3]!;
+    if (a <= 0) continue;
+    out[i] = Math.round((data[i]! / a) * 255);
+    out[i + 1] = Math.round((data[i + 1]! / a) * 255);
+    out[i + 2] = Math.round((data[i + 2]! / a) * 255);
+    out[i + 3] = Math.round(a * 255);
+  }
+  return out;
+}
+
+/** Runs `steps` in order. */
+export function applySteps(raster: Raster, steps: readonly BitmapStep[]): Raster {
+  let current = raster;
+  for (const step of steps) current = applyStep(current, step);
+  return current;
+}
+
+export function applyStep(r: Raster, step: BitmapStep): Raster {
+  switch (step.op) {
+    case 'crop':
+      return resample(r, r.clamped ? step : intersect(step, r), false);
+    case 'render': {
+      const out = resample(r, step, false);
+      return { ...out, x: 0, y: 0 };
+    }
+    case 'clamp':
+      return { ...r, clamped: true };
+    case 'sepiaTone':
+      return sepiaTone(r, step.intensity);
+    case 'edges':
+      return edges(r, step.intensity);
+    case 'crystallize':
+      return crystallize(r, step.radius, step.center);
+    case 'pixellate':
+      return pixellate(r, step.scale, step.center);
+    case 'gaussianBlur':
+      return gaussianBlur(r, step.radius);
+    case 'unsharpMask':
+      return unsharpMask(r, step.radius, step.intensity);
+    case 'vignette':
+      return vignette(r, step.intensity, step.radius, step.center, step.size);
+    case 'place':
+      return place(r, step.sx, step.sy, step.tx, step.ty);
+    case 'roundedClip':
+      return roundedClip(r, step, step.rx, step.ry);
+    case 'tint':
+      return tint(r, step.r, step.g, step.b, step.a);
+    default: {
+      // An op from a newer module: skip it rather than fail the image.
+      return r;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Coordinates
+// ---------------------------------------------------------------------------
+
+function intersect(a: Rect, r: Raster): Rect {
+  const x0 = Math.max(a.x, r.x);
+  const y0 = Math.max(a.y, r.y);
+  const x1 = Math.min(a.x + a.width, r.x + r.w);
+  const y1 = Math.min(a.y + a.height, r.y + r.h);
+  return { x: x0, y: y0, width: Math.max(0, x1 - x0), height: Math.max(0, y1 - y0) };
+}
+
+/** The Core Image point at the center of raster pixel (i, j). */
+function pointOf(r: Raster, i: number, j: number): BitmapPoint {
+  return [r.x + ((i + 0.5) * r.w) / r.width, r.y + r.h - ((j + 0.5) * r.h) / r.height];
+}
+
+/** The raster pixel holding a Core Image point, clamped to the raster. */
+function pixelAt(r: Raster, px: number, py: number): number {
+  const i = Math.min(r.width - 1, Math.max(0, Math.floor(((px - r.x) * r.width) / r.w)));
+  const j = Math.min(r.height - 1, Math.max(0, Math.floor(((r.y + r.h - py) * r.height) / r.h)));
+  return (j * r.width + i) * 4;
+}
+
+/**
+ * The image over `rect` at the same scale: each new pixel takes the pixel of
+ * `r` at its center; outside `r` it is clear, or the nearest edge pixel when
+ * `r` is clamped.
+ */
+function resample(r: Raster, rect: Rect, clamped: boolean): Raster {
+  const out = makeRaster(rect, r.scale, clamped);
+  if (r.width === 0 || r.height === 0) return out;
+  const src = r.data;
+  const dst = out.data;
+  for (let j = 0; j < out.height; j++) {
+    const py = out.y + out.h - ((j + 0.5) * out.h) / out.height;
+    const sj = Math.floor(((r.y + r.h - py) * r.height) / r.h);
+    if (!r.clamped && (sj < 0 || sj >= r.height)) continue;
+    const row = Math.min(r.height - 1, Math.max(0, sj)) * r.width;
+    for (let i = 0; i < out.width; i++) {
+      const px = out.x + ((i + 0.5) * out.w) / out.width;
+      const si = Math.floor(((px - r.x) * r.width) / r.w);
+      if (!r.clamped && (si < 0 || si >= r.width)) continue;
+      const from = (row + Math.min(r.width - 1, Math.max(0, si))) * 4;
+      const to = (j * out.width + i) * 4;
+      dst[to] = src[from]!;
+      dst[to + 1] = src[from + 1]!;
+      dst[to + 2] = src[from + 2]!;
+      dst[to + 3] = src[from + 3]!;
+    }
+  }
+  return out;
+}
+
+/**
+ * Core Graphics' `draw(_:in:)`: the image scaled by (sx, sy) and moved by
+ * (tx, ty). A uniform scale only relabels the raster (the same pixels cover
+ * the new rectangle); a non-uniform one resamples it, at the finer of the two
+ * resolutions.
+ */
+export function place(r: Raster, sx: number, sy: number, tx: number, ty: number): Raster {
+  if (!(sx > 0) || !(sy > 0)) return makeRaster({ x: tx, y: ty, width: 0, height: 0 }, r.scale);
+  const rect = { x: r.x * sx + tx, y: r.y * sy + ty, width: r.w * sx, height: r.h * sy };
+  if (Math.abs(sx - sy) <= 1e-9 * Math.max(sx, sy)) {
+    return { ...r, x: rect.x, y: rect.y, w: rect.width, h: rect.height, scale: r.scale / sx };
+  }
+  const out = makeRaster(rect, r.scale / Math.min(sx, sy), r.clamped);
+  if (r.width === 0 || r.height === 0) return out;
+  const src = r.data;
+  const dst = out.data;
+  for (let j = 0; j < out.height; j++) {
+    // The output pixel's center, back in the source's units.
+    const py = (out.y + out.h - ((j + 0.5) * out.h) / out.height - ty) / sy;
+    const sj = Math.min(r.height - 1, Math.max(0, Math.floor(((r.y + r.h - py) * r.height) / r.h)));
+    for (let i = 0; i < out.width; i++) {
+      const px = (out.x + ((i + 0.5) * out.w) / out.width - tx) / sx;
+      const si = Math.min(r.width - 1, Math.max(0, Math.floor(((px - r.x) * r.width) / r.w)));
+      const from = (sj * r.width + si) * 4;
+      const to = (j * out.width + i) * 4;
+      dst[to] = src[from]!;
+      dst[to + 1] = src[from + 1]!;
+      dst[to + 2] = src[from + 2]!;
+      dst[to + 3] = src[from + 3]!;
+    }
+  }
+  return out;
+}
+
+/**
+ * Keeps what lies inside a rounded rectangle (corner radii rx, ry), with a
+ * one-raster-pixel soft edge, and clears the rest.
+ */
+export function roundedClip(r: Raster, rect: Rect, rx: number, ry: number): Raster {
+  const out = clone(r);
+  const data = out.data;
+  const radiusX = Math.max(0, Math.min(rx, rect.width / 2));
+  const radiusY = Math.max(0, Math.min(ry, rect.height / 2));
+  const unit = 1 / r.scale; // one raster pixel, in units
+  for (let j = 0; j < r.height; j++) {
+    const py = r.y + r.h - ((j + 0.5) * r.h) / r.height;
+    for (let i = 0; i < r.width; i++) {
+      const px = r.x + ((i + 0.5) * r.w) / r.width;
+      const coverage = roundedRectCoverage(px, py, rect, radiusX, radiusY, unit);
+      if (coverage >= 1) continue;
+      const k = (j * r.width + i) * 4;
+      data[k] = data[k]! * coverage;
+      data[k + 1] = data[k + 1]! * coverage;
+      data[k + 2] = data[k + 2]! * coverage;
+      data[k + 3] = data[k + 3]! * coverage;
+    }
+  }
+  return out;
+}
+
+/** The image's shape in one color: each pixel's alpha times the color's, premultiplied. */
+export function tint(r: Raster, red: number, green: number, blue: number, alpha: number): Raster {
+  const out = clone(r);
+  const data = out.data;
+  const c = (v: number) => Math.min(1, Math.max(0, Number.isFinite(v) ? v : 0));
+  const [cr, cg, cb, ca] = [c(red), c(green), c(blue), c(alpha)];
+  for (let k = 0; k < data.length; k += 4) {
+    const a = data[k + 3]! * ca;
+    data[k] = cr * a;
+    data[k + 1] = cg * a;
+    data[k + 2] = cb * a;
+    data[k + 3] = a;
+  }
+  return out;
+}
+
+/** How much of a pixel at (px, py) lies inside the rounded rectangle, 0…1, from its distance to the edge. */
+function roundedRectCoverage(px: number, py: number, rect: Rect, rx: number, ry: number, unit: number): number {
+  // Distance outside the straight edges (negative inside).
+  const dx = Math.max(rect.x - px, px - (rect.x + rect.width));
+  const dy = Math.max(rect.y - py, py - (rect.y + rect.height));
+  let outside = Math.max(dx, dy);
+  if (rx > 0 && ry > 0) {
+    // In a corner square: the distance to the corner's ellipse, scaled to the smaller radius.
+    const cx = px < rect.x + rx ? rect.x + rx : px > rect.x + rect.width - rx ? rect.x + rect.width - rx : null;
+    const cy = py < rect.y + ry ? rect.y + ry : py > rect.y + rect.height - ry ? rect.y + rect.height - ry : null;
+    if (cx !== null && cy !== null) {
+      const ex = (px - cx) / rx;
+      const ey = (py - cy) / ry;
+      outside = (Math.sqrt(ex * ex + ey * ey) - 1) * Math.min(rx, ry);
+    }
+  }
+  return Math.min(1, Math.max(0, 0.5 - outside / unit));
+}
+
+function clone(r: Raster): Raster {
+  return { ...r, data: new Float32Array(r.data) };
+}
+
+/** Keeps each color channel within its premultiplied range, 0…alpha. */
+function clampColor(data: Float32Array, i: number): void {
+  const a = data[i + 3]!;
+  for (let c = 0; c < 3; c++) {
+    const v = data[i + c]!;
+    data[i + c] = v < 0 ? 0 : v > a ? a : v;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Color
+// ---------------------------------------------------------------------------
+
+/**
+ * `CISepiaTone`: the classic sepia matrix (the one CSS `sepia()` uses), mixed
+ * with the original by `intensity`. Linear, so it applies to premultiplied
+ * color as it is.
+ */
+export function sepiaTone(r: Raster, intensity: number): Raster {
+  const out = clone(r);
+  const d = out.data;
+  const k = intensity;
+  for (let i = 0; i < d.length; i += 4) {
+    const red = d[i]!, green = d[i + 1]!, blue = d[i + 2]!;
+    const sr = 0.393 * red + 0.769 * green + 0.189 * blue;
+    const sg = 0.349 * red + 0.686 * green + 0.168 * blue;
+    const sb = 0.272 * red + 0.534 * green + 0.131 * blue;
+    d[i] = red + k * (sr - red);
+    d[i + 1] = green + k * (sg - green);
+    d[i + 2] = blue + k * (sb - blue);
+    clampColor(d, i);
+  }
+  return out;
+}
+
+/**
+ * `CIVignette`: natural (cos⁴) falloff. With d the distance from `center`
+ * over `size` (half the input's diagonal, so 1 at the corners), the angle is
+ * θ = atan(d · radius) and color is scaled by 1 + intensity · (cos⁴θ − 1).
+ * Radius 0 changes nothing (Core Image's identity value); a larger radius
+ * darkens more of the picture, and a negative intensity brightens.
+ */
+export function vignette(r: Raster, intensity: number, radius: number, center: BitmapPoint, size: number): Raster {
+  const out = clone(r);
+  const d = out.data;
+  const spread = Math.max(radius, 0) / Math.max(size, 1e-6);
+  for (let j = 0; j < r.height; j++) {
+    for (let i = 0; i < r.width; i++) {
+      const [px, py] = pointOf(r, i, j);
+      const t = Math.hypot(px - center[0], py - center[1]) * spread;
+      const cos = Math.cos(Math.atan(t));
+      const factor = Math.max(0, 1 + intensity * (cos * cos * cos * cos - 1));
+      const k = (j * r.width + i) * 4;
+      d[k] = d[k]! * factor;
+      d[k + 1] = d[k + 1]! * factor;
+      d[k + 2] = d[k + 2]! * factor;
+      clampColor(d, k);
+    }
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Neighborhoods
+// ---------------------------------------------------------------------------
+
+/**
+ * `CIEdges`: the Sobel gradient of each color channel; the channel becomes
+ * intensity × the gradient's magnitude (capped at 1), on black. Alpha is kept.
+ * Pixels past the border repeat the edge.
+ */
+export function edges(r: Raster, intensity: number): Raster {
+  const out = clone(r);
+  const s = r.data;
+  const d = out.data;
+  const w = r.width;
+  const h = r.height;
+  const at = (i: number, j: number, c: number): number =>
+    s[((Math.min(h - 1, Math.max(0, j)) * w + Math.min(w - 1, Math.max(0, i))) * 4) + c]!;
+  for (let j = 0; j < h; j++) {
+    for (let i = 0; i < w; i++) {
+      const k = (j * w + i) * 4;
+      const a = s[k + 3]!;
+      for (let c = 0; c < 3; c++) {
+        const gx =
+          at(i + 1, j - 1, c) + 2 * at(i + 1, j, c) + at(i + 1, j + 1, c) - at(i - 1, j - 1, c) - 2 * at(i - 1, j, c) - at(i - 1, j + 1, c);
+        const gy =
+          at(i - 1, j + 1, c) + 2 * at(i, j + 1, c) + at(i + 1, j + 1, c) - at(i - 1, j - 1, c) - 2 * at(i, j - 1, c) - at(i + 1, j - 1, c);
+        d[k + c] = Math.min(1, intensity * Math.hypot(gx, gy)) * a;
+      }
+    }
+  }
+  return out;
+}
+
+/**
+ * `CIPixellate`: square cells `scale` units wide on a grid through `center`;
+ * each cell takes the input's color at its middle.
+ */
+export function pixellate(r: Raster, scale: number, center: BitmapPoint): Raster {
+  const out = clone(r);
+  if (scale <= 0) return out;
+  const s = r.data;
+  const d = out.data;
+  for (let j = 0; j < r.height; j++) {
+    for (let i = 0; i < r.width; i++) {
+      const [px, py] = pointOf(r, i, j);
+      const cx = center[0] + (Math.floor((px - center[0]) / scale) + 0.5) * scale;
+      const cy = center[1] + (Math.floor((py - center[1]) / scale) + 0.5) * scale;
+      const from = pixelAt(r, cx, cy);
+      const to = (j * r.width + i) * 4;
+      d[to] = s[from]!;
+      d[to + 1] = s[from + 1]!;
+      d[to + 2] = s[from + 2]!;
+      d[to + 3] = s[from + 3]!;
+    }
+  }
+  return out;
+}
+
+/** A point in 0…1² for grid cell (i, j), the same on every run. */
+export function cellJitter(i: number, j: number): BitmapPoint {
+  let h = Math.imul(i, 0x27d4eb2d) ^ Math.imul(j, 0x165667b1);
+  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);
+  h ^= h >>> 13;
+  h = Math.imul(h, 0xc2b2ae35);
+  h ^= h >>> 16;
+  return [(h & 0xffff) / 65536, (h >>> 16) / 65536];
+}
+
+/**
+ * `CICrystallize`: a Voronoi diagram. One seed per cell of a grid `radius`
+ * units wide through `center`, placed at a fixed pseudo-random point of its
+ * cell; every pixel takes the input's color at its nearest seed.
+ */
+export function crystallize(r: Raster, radius: number, center: BitmapPoint): Raster {
+  const out = clone(r);
+  const pitch = Math.max(radius, 1e-6);
+  const s = r.data;
+  const d = out.data;
+  for (let j = 0; j < r.height; j++) {
+    for (let i = 0; i < r.width; i++) {
+      const [px, py] = pointOf(r, i, j);
+      const gx = Math.floor((px - center[0]) / pitch);
+      const gy = Math.floor((py - center[1]) / pitch);
+      let best = Infinity;
+      let sx = px;
+      let sy = py;
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const [jx, jy] = cellJitter(gx + dx, gy + dy);
+          const x = center[0] + (gx + dx + jx) * pitch;
+          const y = center[1] + (gy + dy + jy) * pitch;
+          const dist = (x - px) * (x - px) + (y - py) * (y - py);
+          if (dist < best) {
+            best = dist;
+            sx = x;
+            sy = y;
+          }
+        }
+      }
+      const from = pixelAt(r, sx, sy);
+      const to = (j * r.width + i) * 4;
+      d[to] = s[from]!;
+      d[to + 1] = s[from + 1]!;
+      d[to + 2] = s[from + 2]!;
+      d[to + 3] = s[from + 3]!;
+    }
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Blur
+// ---------------------------------------------------------------------------
+
+/**
+ * Box widths whose three successive passes approximate a Gaussian of
+ * standard deviation `sigma` (Kovesi, "Fast almost-Gaussian filtering").
+ */
+export function boxesForGauss(sigma: number, n = 3): number[] {
+  const ideal = Math.sqrt((12 * sigma * sigma) / n + 1);
+  let lower = Math.floor(ideal);
+  if (lower % 2 === 0) lower -= 1;
+  const upper = lower + 2;
+  const m = Math.round((12 * sigma * sigma - n * lower * lower - 4 * n * lower - 3 * n) / (-4 * lower - 4));
+  return Array.from({ length: n }, (_, i) => (i < m ? lower : upper));
+}
+
+/**
+ * Blurs every channel of `data` in place with a Gaussian of `sigma` raster
+ * pixels: three box passes per axis. Past the border the image is clear
+ * (`edge: 'clear'`) or repeats its edge pixels (`edge: 'clamp'`).
+ */
+export function blurInPlace(data: Float32Array, width: number, height: number, sigma: number, edge: 'clear' | 'clamp'): void {
+  if (sigma < 0.3 || width === 0 || height === 0) return;
+  const line = new Float32Array(Math.max(width, height) * 4);
+  const result = new Float32Array(Math.max(width, height) * 4);
+  for (const box of boxesForGauss(sigma)) {
+    const radius = (box - 1) / 2;
+    if (radius < 1) continue;
+    for (let j = 0; j < height; j++) {
+      line.set(data.subarray(j * width * 4, (j + 1) * width * 4));
+      boxLine(line, result, width, radius, edge);
+      data.set(result.subarray(0, width * 4), j * width * 4);
+    }
+    for (let i = 0; i < width; i++) {
+      for (let j = 0; j < height; j++) {
+        const k = (j * width + i) * 4;
+        line[j * 4] = data[k]!;
+        line[j * 4 + 1] = data[k + 1]!;
+        line[j * 4 + 2] = data[k + 2]!;
+        line[j * 4 + 3] = data[k + 3]!;
+      }
+      boxLine(line, result, height, radius, edge);
+      for (let j = 0; j < height; j++) {
+        const k = (j * width + i) * 4;
+        data[k] = result[j * 4]!;
+        data[k + 1] = result[j * 4 + 1]!;
+        data[k + 2] = result[j * 4 + 2]!;
+        data[k + 3] = result[j * 4 + 3]!;
+      }
+    }
+  }
+}
+
+/** One box pass over `n` RGBA pixels of `src` into `dst`: a running sum of 2·radius + 1 pixels. */
+function boxLine(src: Float32Array, dst: Float32Array, n: number, radius: number, edge: 'clear' | 'clamp'): void {
+  const norm = 1 / (2 * radius + 1);
+  const value = (index: number, c: number): number => {
+    if (index < 0) return edge === 'clamp' ? src[c]! : 0;
+    if (index >= n) return edge === 'clamp' ? src[(n - 1) * 4 + c]! : 0;
+    return src[index * 4 + c]!;
+  };
+  for (let c = 0; c < 4; c++) {
+    let sum = 0;
+    for (let k = -radius; k <= radius; k++) sum += value(k, c);
+    for (let i = 0; i < n; i++) {
+      dst[i * 4 + c] = sum * norm;
+      sum += value(i + radius + 1, c) - value(i - radius, c);
+    }
+  }
+}
+
+/**
+ * `CIGaussianBlur`: sigma = radius. The image grows by ⌈3·radius⌉ units on
+ * every side and fades to clear there, as Core Image's extent does; a
+ * clamped image keeps its rectangle and blurs against its repeated edges.
+ */
+export function gaussianBlur(r: Raster, radius: number): Raster {
+  const sigma = radius * r.scale;
+  if (r.clamped) {
+    const out = clone(r);
+    blurInPlace(out.data, out.width, out.height, sigma, 'clamp');
+    return out;
+  }
+  const reach = Math.ceil(3 * radius);
+  const pad = Math.round(reach * r.scale);
+  const out: Raster = {
+    width: r.width + 2 * pad,
+    height: r.height + 2 * pad,
+    data: new Float32Array((r.width + 2 * pad) * (r.height + 2 * pad) * 4),
+    x: r.x - reach,
+    y: r.y - reach,
+    w: r.w + 2 * reach,
+    h: r.h + 2 * reach,
+    scale: r.scale,
+    clamped: false,
+  };
+  for (let j = 0; j < r.height; j++) {
+    out.data.set(r.data.subarray(j * r.width * 4, (j + 1) * r.width * 4), ((j + pad) * out.width + pad) * 4);
+  }
+  blurInPlace(out.data, out.width, out.height, sigma, 'clear');
+  return out;
+}
+
+/**
+ * `CIUnsharpMask`: the image plus intensity × (the image − its Gaussian blur
+ * of sigma = radius, against repeated edges). Alpha is kept.
+ */
+export function unsharpMask(r: Raster, radius: number, intensity: number): Raster {
+  const blurred = clone(r);
+  blurInPlace(blurred.data, r.width, r.height, radius * r.scale, 'clamp');
+  const out = clone(r);
+  const d = out.data;
+  const b = blurred.data;
+  for (let i = 0; i < d.length; i += 4) {
+    for (let c = 0; c < 3; c++) d[i + c] = d[i + c]! + intensity * (d[i + c]! - b[i + c]!);
+    clampColor(d, i);
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Scale
+// ---------------------------------------------------------------------------
+
+/** The most raster pixels a step works on; a larger source is worked on smaller. */
+export const MAX_WORKING_PIXELS = 16_000_000;
+
+/**
+ * The scale to work at: enough raster pixels for an image of `width` ×
+ * `height` units shown on `targetWidth` × `targetHeight` device pixels, never
+ * above the source's own resolution (1) nor above `MAX_WORKING_PIXELS` for a
+ * source of `sourcePixels`. Rounded up to a power of √2, so a box that grows
+ * or shrinks a little (an animation) does not redraw the image.
+ */
+export function workingScale(width: number, height: number, targetWidth: number, targetHeight: number, sourcePixels: number): number {
+  if (width <= 0 || height <= 0) return 1;
+  let scale = Math.max(targetWidth / width, targetHeight / height);
+  if (!Number.isFinite(scale) || scale <= 0) scale = 1;
+  scale = Math.pow(Math.SQRT2, Math.ceil(Math.log(scale) / Math.log(Math.SQRT2) - 1e-9));
+  scale = Math.min(1, scale);
+  if (sourcePixels * scale * scale > MAX_WORKING_PIXELS) scale = Math.sqrt(MAX_WORKING_PIXELS / sourcePixels);
+  return scale;
+}

package/src/interaction.ts

@@ -24,6 +24,9 @@
  * reach the renderer's click handler untouched, so controls inside gestures
  * and rows keep working.
  *
+ * A horizontal scroll view keeps horizontal motion (touch or wheel) from the
+ * swipe rows around it, as UIKit's inner scroll view wins over a row's swipe.
+ *
  * Horizontal wheel scrolling slides swipe rows and vertical wheel at the
  * top of a `refreshable` scroller pulls to refresh; touch moves are read
  * directly for pull to refresh (the browser cancels the pointer once it
@@ -379,8 +382,11 @@ export class InteractionController {
         out.push({ kind: 'swipeback', screen, id, width: rect.width || screen.offsetWidth, below: below?.classList.contains('sb-navscreen') ? below : null });
       }
     }
+    // A horizontal scroll view takes horizontal motion from the rows around it.
+    let inHorizontalScroller = false;
     for (let el: HTMLElement | null = target; el && el !== this.host.root; el = el.parentElement) {
       const id = Number(el.dataset[ID_ATTR]);
+      if (isHorizontalScroller(el)) inHorizontalScroller = true;
       if (el.classList.contains('sb-gesture') && Number.isInteger(id)) {
         const node = this.host.nodeOf(id);
         const props = node?.props ?? {};
@@ -392,7 +398,7 @@ export class InteractionController {
         out.push({ kind: 'gesture', el, id, drag, longPress, minDistance, minDuration });
       } else if (el.classList.contains('sb-contextmenu') && Number.isInteger(id)) {
         out.push({ kind: 'contextmenu', el, id });
-      } else if (el.classList.contains('sb-swipeactions') || el.classList.contains('sb-listrow')) {
+      } else if ((el.classList.contains('sb-swipeactions') || el.classList.contains('sb-listrow')) && !inHorizontalScroller) {
         const host = this.swipeHostFor(el);
         if (host) out.push({ kind: 'swipe', host });
       }
@@ -863,6 +869,10 @@ export class InteractionController {
       const rowEl = target.closest<HTMLElement>('.sb-swipeactions, .sb-listrow');
       const host = rowEl ? this.swipeHostFor(rowEl) : null;
       if (!host) return;
+      // A horizontal scroll view in the row scrolls instead.
+      for (let el: HTMLElement | null = target; el && el !== rowEl; el = el.parentElement) {
+        if (isHorizontalScroller(el)) return;
+      }
       let state = this.wheelSwipe;
       if (!state || state.host.el !== host.el) {
         if (state) this.finishWheelSwipe();
@@ -1077,6 +1087,13 @@ function clearSelectionIn(root: HTMLElement): void {
   if (anchor && root.contains(anchor)) selection.removeAllRanges();
 }
 
+/** A scroll view that scrolls horizontally (`ScrollView(.horizontal)` or both axes). */
+function isHorizontalScroller(el: HTMLElement): boolean {
+  if (!el.classList.contains('sb-scrollview')) return false;
+  const axes = el.dataset['sbAxes'];
+  return axes === 'horizontal' || axes === 'both';
+}
+
 /** The content slot of a swipe row (`swipeactions` / `listrow`). */
 function contentOf(rowEl: HTMLElement): HTMLElement | null {
   return rowEl.querySelector<HTMLElement>(':scope > .sb-swipe-content');

package/src/landing.ts

@@ -10,7 +10,7 @@
 
 import { toString as qrToString } from 'qrcode';
 
-const REPO_URL = 'https://github.com/dabbott/SwiftBrowser';
+const REPO_URL = 'https://github.com/noya-app/SwiftBrowser';
 
 /** The card's subtitle: the spec's description, else a generic line. */
 export function describeApp(app: Pick<SBLandingApp, 'name' | 'description'>): string {
@@ -132,7 +132,7 @@ function renderBuildInfo(): void {
     footer.append(time);
   }
   footer.append(' · ');
-  const repo = el('a', 'build-repo', 'dabbott/SwiftBrowser');
+  const repo = el('a', 'build-repo', 'noya-app/SwiftBrowser');
   repo.href = REPO_URL;
   footer.append(repo);
 }