@pixerate/editor 0.266.2 → 0.268.0

package/dist/{chunk-T2LDTEXK.js → chunk-UVTO3D4E.js}

@@ -4,10 +4,15 @@ import {
   VECTOR_PROFILE,
   checkBrush,
   closest,
+  isBrushSourceRef,
   listPresets,
   normalizeBrushSpec,
   resolveBrush
-} from "./chunk-CIJBSUM5.js";
+} from "./chunk-KZI3YWKW.js";
+import {
+  editorStampOf,
+  stampCoverage
+} from "./chunk-JL6YH5WD.js";
 import {
   parseProvenance
 } from "./chunk-M6DNZNVY.js";
@@ -52,12 +57,71 @@ import {
 import {
   brushColourHex
 } from "./chunk-DVPQFMH6.js";
+import {
+  DEFAULT_FLOW,
+  DEFAULT_WET_PARAMS,
+  FLAT,
+  PIGMENT_UNIT,
+  WET_TILE,
+  WetMedium,
+  WetWorld,
+  createWetGpuEngine,
+  findWebGpu,
+  flowField,
+  moveWetSnapshot,
+  normalizeFlow,
+  normalizeTilt,
+  normalizeWetParams,
+  pigmentOf
+} from "./chunk-GSTSZPSR.js";
 import {
   BrushstrokeCache,
-  GRAIN_PATTERNS,
   brushstrokeDataUrl,
+  brushstrokeSamples,
   isBrushstrokeBrush
-} from "./chunk-TXFWZ5ZJ.js";
+} from "./chunk-W6JDUXP3.js";
+import {
+  CoverageMap,
+  EMPTY_MIXER_LOAD,
+  GRAIN_PATTERNS,
+  PaintExchange,
+  PaintGradientSampler,
+  PaperGrain,
+  SmudgeTip,
+  TileMedium,
+  blenderDab,
+  createBlenderScratch,
+  dabRect,
+  exchangeRates,
+  grainCatch,
+  loadMixer,
+  mixerRates,
+  parsePaintSource,
+  rasterizeDab,
+  readPaintSource,
+  resolvePaintGradient,
+  scalePaintGradient
+} from "./chunk-ACTHSQOI.js";
+import {
+  rand01,
+  randSigned
+} from "./chunk-4D6KP5BV.js";
+import {
+  BRUSHSTROKE_MAX_SCALE,
+  BRUSHSTROKE_MIN_SCALE
+} from "./chunk-ODBT55Q7.js";
+import {
+  mixPigment8
+} from "./chunk-IRSTHLQQ.js";
+import {
+  TILE,
+  TiledSurface,
+  emptySurface,
+  readRegion,
+  tileKey,
+  translateSurface,
+  writeRegion
+} from "./chunk-HVVR5PZW.js";
 import {
   oklabToRgb,
   rgbToOklab
@@ -2320,7 +2384,7 @@ function vectorStrokeParts(path, style) {
   const cap = capExtent(style, width);
   const tipMode = style.arrowAlign === "tip";
   const trims = contours.map(() => [0, 0]);
-  const place2 = (end, contour, ci) => {
+  const place3 = (end, contour, ci) => {
     const kind = end === "start" ? style.startArrow : style.endArrow;
     if (!kind || contour.closed) return;
     const hw = arrowheadWeight(style, end);
@@ -2341,8 +2405,8 @@ function vectorStrokeParts(path, style) {
     }
     heads.push({ end, kind, tip, dir, inset, path: arrowheadPath(kind, tip, dir, hw) });
   };
-  place2("start", first, 0);
-  place2("end", last, contours.length - 1);
+  place3("start", first, 0);
+  place3("end", last, contours.length - 1);
   if (!tipMode || !heads.length) return { align, line: path, drawWidth, heads };
   const trimmed = contours.map((c, i) => {
     const [s0, s1] = trims[i];
@@ -2534,17 +2598,1946 @@ function vectorExtrudeFaces(path, params) {
   return order.map((i) => faces[i].face);
 }
 
+// src/paint-editor/effect-paint.ts
+var EFFECT_STRIP_HEIGHT = 256;
+var EFFECT_MAP_REPEATS = ["repeat", "mirror", "clamp"];
+function effectPaintSize(p, canvas) {
+  return p.map ? { width: p.map.length, height: EFFECT_STRIP_HEIGHT } : { width: canvas.width, height: canvas.height };
+}
+function readEffectStrokeMap(raw) {
+  if (raw === void 0 || raw === null || raw.by === "canvas") return void 0;
+  const r = raw;
+  if (r.by !== "stroke") throw new Error(`map.by ${JSON.stringify(r.by)} is not a mapping; use "canvas" (fixed to the canvas) or "stroke" (along each stroke).`);
+  const length2 = r.length === void 0 ? 300 : Number(r.length);
+  if (!(Number.isFinite(length2) && length2 >= 16 && length2 <= 4096)) throw new Error(`map.length ${JSON.stringify(r.length)} is out of range; use 16..4096 px of stroke per repeat.`);
+  const repeat = r.repeat === void 0 ? "repeat" : r.repeat;
+  if (!EFFECT_MAP_REPEATS.includes(repeat)) throw new Error(`map.repeat ${JSON.stringify(r.repeat)} is not a repeat mode; use ${EFFECT_MAP_REPEATS.join(", ")}.`);
+  return { by: "stroke", length: Math.round(length2), repeat };
+}
+function stripIndex(img, map, dab, x, y) {
+  const ca = Math.cos(dab.direction);
+  const sa = Math.sin(dab.direction);
+  const dx = x - dab.x;
+  const dy = y - dab.y;
+  let u = (dab.travel + dx * ca - dy * sa) / map.length;
+  if (map.repeat === "clamp") u = Math.min(1, Math.max(0, u));
+  else if (map.repeat === "mirror") {
+    const m = (u % 2 + 2) % 2;
+    u = m > 1 ? 2 - m : m;
+  } else u = (u % 1 + 1) % 1;
+  const v2 = Math.min(1, Math.max(0, ((dx * sa + dy * ca) / Math.max(0.5, dab.radius) + 1) / 2));
+  const px = Math.min(img.width - 1, Math.floor(u * img.width));
+  const py = Math.min(img.height - 1, Math.floor(v2 * img.height));
+  return (py * img.width + px) * 4;
+}
+function effectPaintKey(p) {
+  return JSON.stringify({ type: "effect", effect: p.effect, provider: p.provider, values: p.values, time: p.time, ...p.map ? { map: p.map } : {} });
+}
+function isPaintEffectPaint(raw) {
+  return Boolean(raw) && typeof raw === "object" && raw.type === "effect";
+}
+function readMapLeniently(raw) {
+  try {
+    return readEffectStrokeMap(raw);
+  } catch {
+    return void 0;
+  }
+}
+function readPaintEffectPaint(raw) {
+  if (!isPaintEffectPaint(raw)) return null;
+  const r = raw;
+  if (typeof r.effect !== "string" || !r.effect || !r.values || typeof r.values !== "object" || Array.isArray(r.values)) return null;
+  return {
+    type: "effect",
+    effect: r.effect,
+    provider: typeof r.provider === "string" ? r.provider : "",
+    values: JSON.parse(JSON.stringify(r.values)),
+    time: typeof r.time === "number" && Number.isFinite(r.time) && r.time > 0 ? r.time : 0,
+    ...readMapLeniently(r.map) ? { map: readMapLeniently(r.map) } : {},
+    ...r.live === true ? { live: true } : {}
+  };
+}
+function sampleEffectField(img, rect, vals, field, dab) {
+  const { width, height, data } = img;
+  if (img.map && dab) {
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        const i = stripIndex(img, img.map, dab, rect.x + xx + 0.5, rect.y + yy + 0.5);
+        const f = k * 3;
+        const a = data[i + 3];
+        if (a < 255) vals[k] *= a / 255;
+        field[f] = data[i] / 255;
+        field[f + 1] = data[i + 1] / 255;
+        field[f + 2] = data[i + 2] / 255;
+      }
+    }
+    return;
+  }
+  for (let yy = 0, k = 0; yy < rect.height; yy++) {
+    const y = rect.y + yy;
+    const inY = y >= 0 && y < height;
+    for (let xx = 0; xx < rect.width; xx++, k++) {
+      const x = rect.x + xx;
+      const f = k * 3;
+      if (!inY || x < 0 || x >= width) {
+        vals[k] = 0;
+        field[f] = field[f + 1] = field[f + 2] = 0;
+        continue;
+      }
+      const i = (y * width + x) * 4;
+      const a = data[i + 3];
+      if (a < 255) vals[k] *= a / 255;
+      field[f] = data[i] / 255;
+      field[f + 1] = data[i + 1] / 255;
+      field[f + 2] = data[i + 2] / 255;
+    }
+  }
+}
+function sampleEffectAt(img, x, y, out, dab) {
+  if (img.map && dab) {
+    const i2 = stripIndex(img, img.map, dab, x, y);
+    out[0] = img.data[i2] / 255;
+    out[1] = img.data[i2 + 1] / 255;
+    out[2] = img.data[i2 + 2] / 255;
+    return img.data[i2 + 3] / 255;
+  }
+  const px = Math.floor(x);
+  const py = Math.floor(y);
+  if (px < 0 || py < 0 || px >= img.width || py >= img.height) return 0;
+  const i = (py * img.width + px) * 4;
+  out[0] = img.data[i] / 255;
+  out[1] = img.data[i + 1] / 255;
+  out[2] = img.data[i + 2] / 255;
+  return img.data[i + 3] / 255;
+}
+function effectDabField(img, rect, cov, centre, mixed, field, steps = 0, dab = null) {
+  sampleEffectField(img, rect, cov, field, dab);
+  const d0 = mixed[0] - centre[0];
+  const d1 = mixed[1] - centre[1];
+  const d2 = mixed[2] - centre[2];
+  const n = rect.width * rect.height;
+  for (let k = 0; k < n; k++) {
+    if (steps) cov[k] = Math.round(cov[k] * steps) / steps;
+    const f = k * 3;
+    field[f] = Math.min(1, Math.max(0, field[f] + d0));
+    field[f + 1] = Math.min(1, Math.max(0, field[f + 1] + d1));
+    field[f + 2] = Math.min(1, Math.max(0, field[f + 2] + d2));
+  }
+}
+
+// src/paint-editor/stamp-tip.ts
+var samplers = /* @__PURE__ */ new WeakMap();
+function stampSampler(ref, art, hardness = 1) {
+  const sampler = baseSampler(ref, art);
+  if (!sampler || hardness >= 1 || !isBrushSourceRef(ref)) return sampler;
+  const h = Math.max(0, hardness);
+  return (u, v2, seed) => {
+    const r = Math.hypot(u, v2) / Math.SQRT2;
+    if (r <= h) return sampler(u, v2, seed);
+    const t = Math.min(1, (r - h) / (1 - h));
+    return sampler(u, v2, seed) * (1 - t * t * (3 - 2 * t));
+  };
+}
+function baseSampler(ref, art) {
+  let kind = null;
+  try {
+    kind = editorStampOf(ref.includes(":") ? ref : `editor:${ref}`);
+  } catch {
+    return null;
+  }
+  if (kind) {
+    const k = kind;
+    return (u, v2, seed) => stampCoverage(k, u, v2, seed);
+  }
+  const a = art?.(ref);
+  if (!a || !(a.width > 0 && a.height > 0)) return null;
+  const hit = samplers.get(a);
+  if (hit) return hit;
+  const { width: w, height: h, data } = a;
+  const scale3 = Math.max(w, h) / 2;
+  const alpha = (x, y) => x < 0 || y < 0 || x >= w || y >= h ? 0 : data[(y * w + x) * 4 + 3] / 255;
+  const sampler = (u, v2) => {
+    const x = u * scale3 + w / 2 - 0.5;
+    const y = v2 * scale3 + h / 2 - 0.5;
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const fx = x - x0;
+    const fy = y - y0;
+    return (alpha(x0, y0) * (1 - fx) + alpha(x0 + 1, y0) * fx) * (1 - fy) + (alpha(x0, y0 + 1) * (1 - fx) + alpha(x0 + 1, y0 + 1) * fx) * fy;
+  };
+  samplers.set(a, sampler);
+  return sampler;
+}
+function stampDabRect(d) {
+  const r = Math.max(0.5, d.radius) * Math.SQRT2 + 1.5;
+  const x0 = Math.floor(d.x - r);
+  const y0 = Math.floor(d.y - r);
+  return { x: x0, y: y0, width: Math.ceil(d.x + r) - x0, height: Math.ceil(d.y + r) - y0 };
+}
+function rasterizeStampDab(d, sample, seed, rect, out) {
+  const w = rect.width;
+  const h = rect.height;
+  out.fill(0, 0, w * h);
+  const r = Math.max(0.5, d.radius);
+  const ro = Math.min(1, Math.max(0.05, d.roundness));
+  const sn = Math.sin(d.angle);
+  const cs = Math.cos(d.angle);
+  const ss = r < 6 ? 3 : 1;
+  const fu = d.flip && d.flip & 1 ? -1 : 1;
+  const fv = d.flip && d.flip & 2 ? -1 : 1;
+  for (let yy = 0; yy < h; yy++) {
+    for (let xx = 0; xx < w; xx++) {
+      let sum = 0;
+      for (let sy = 0; sy < ss; sy++) {
+        for (let sx = 0; sx < ss; sx++) {
+          const dx = rect.x + xx + (sx + 0.5) / ss - d.x;
+          const dy = rect.y + yy + (sy + 0.5) / ss - d.y;
+          const u = (dx * cs - dy * sn) / r * fu;
+          const v2 = (dx * sn + dy * cs) / (r * ro) * fv;
+          if (u > -1.05 && u < 1.05 && v2 > -1.05 && v2 < 1.05) sum += sample(u, v2, seed);
+        }
+      }
+      const val = sum / (ss * ss);
+      if (val > 0) out[yy * w + xx] = Math.min(1, val) * d.alpha;
+    }
+  }
+}
+function brushStickerRefs(brush) {
+  const refs = brush.engine === "sticker" ? [...brush.sticker.stamps] : brush.engine === "particle" ? [...brush.particle.dotTextures] : brush.engine === "dab" && brush.stamp ? [brush.stamp] : [];
+  return [...new Set(refs.filter((r) => r.includes(":") && !r.startsWith("editor:") && !isBrushSourceRef(r)))];
+}
+function sprayDroplets(d, spray, seed) {
+  const count = 1 + Math.round(spray.density * 31);
+  const key = d.index * 131 + Math.round(d.travel * 8);
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const n = key * 64 + i;
+    const a = rand01(seed, n, 61) * Math.PI * 2;
+    const rr = Math.sqrt(rand01(seed, n, 67)) * d.radius;
+    out.push({ ...d, x: d.x + Math.cos(a) * rr, y: d.y + Math.sin(a) * rr, radius: Math.max(0.5, d.radius * spray.size * (0.6 + 0.8 * rand01(seed, n, 71))), roundness: 1, angle: rand01(seed, n, 73) * Math.PI * 2 });
+  }
+  return out;
+}
+
+// src/paint-editor/paper.ts
+var PAPER_FAMILIES = ["watercolor", "drawing", "pastel", "canvas", "panel", "smooth"];
+var unit2 = (v2, d) => typeof v2 === "number" && Number.isFinite(v2) ? Math.min(1, Math.max(0, v2)) : d;
+var clampNum = (v2, lo, hi, d) => typeof v2 === "number" && Number.isFinite(v2) ? Math.min(hi, Math.max(lo, v2)) : d;
+var HEX = /^#[0-9a-f]{6}$/i;
+var tuning = (contrast = 1, invert2 = false) => ({ contrast, invert: invert2 });
+function preset(id, name, family, pattern, color2, o) {
+  return {
+    preset: id,
+    name,
+    family,
+    pattern,
+    seed: o.seed ?? 1,
+    color: color2,
+    scale: o.scale ?? 1,
+    tiling: "mirror",
+    depth: o.depth,
+    shading: o.shading ?? 0.5,
+    dry: tuning(o.contrast ?? 1),
+    wet: tuning(1),
+    absorption: o.absorption,
+    permeability: o.permeability,
+    roughness: o.roughness,
+    ...o.backlight ? { backlight: o.backlight, backlightColor: o.backlightColor ?? "#fff1d6" } : {}
+  };
+}
+var PAPER_LIBRARY = [
+  preset("cold-pressed", "Cold pressed watercolour", "watercolor", "cold-pressed", "#f7f3ea", { depth: 0.5, absorption: 0.7, permeability: 0.5, roughness: 0.6 }),
+  preset("hot-pressed", "Hot pressed watercolour", "watercolor", "hot-pressed", "#f8f6ef", { depth: 0.25, absorption: 0.55, permeability: 0.4, roughness: 0.25 }),
+  preset("rough-watercolor", "Rough watercolour", "watercolor", "rough", "#f5f0e4", { depth: 0.75, absorption: 0.8, permeability: 0.6, roughness: 0.85 }),
+  preset("cartridge", "Cartridge", "drawing", "vellum", "#fbfaf6", { depth: 0.3, absorption: 0.4, permeability: 0.3, roughness: 0.35 }),
+  preset("laid", "Laid paper", "drawing", "laid", "#f3ecdc", { depth: 0.45, absorption: 0.45, permeability: 0.35, roughness: 0.45 }),
+  preset("ingres", "Charcoal paper", "drawing", "ingres", "#ede6d6", { depth: 0.6, absorption: 0.4, permeability: 0.3, roughness: 0.65 }),
+  preset("sanded-pastel", "Sanded pastel paper", "pastel", "sanded", "#d8cfc0", { depth: 0.7, absorption: 0.3, permeability: 0.2, roughness: 0.9, shading: 0.35 }),
+  preset("pastel-card", "Grey pastel card", "pastel", "sanded", "#9c978e", { depth: 0.55, absorption: 0.3, permeability: 0.2, roughness: 0.75, scale: 1.5, shading: 0.3 }),
+  preset("cotton-canvas", "Cotton canvas", "canvas", "canvas", "#efe9dc", { depth: 0.55, absorption: 0.35, permeability: 0.25, roughness: 0.6 }),
+  preset("fine-linen", "Fine linen", "canvas", "linen", "#e9e2d2", { depth: 0.45, absorption: 0.3, permeability: 0.25, roughness: 0.5 }),
+  preset("gesso", "Gesso panel", "panel", "gesso", "#f6f4ef", { depth: 0.35, absorption: 0.2, permeability: 0.15, roughness: 0.4 }),
+  preset("smooth", "Smooth bristol", "smooth", "smooth", "#ffffff", { depth: 0, absorption: 0.3, permeability: 0.2, roughness: 0.05, shading: 0 }),
+  // Backlit: smooth paper on a lightbox, for glazes that glow like stained glass.
+  preset("stained-glass", "Stained glass (backlit)", "smooth", "smooth", "#ffffff", { depth: 0, absorption: 0.35, permeability: 0.25, roughness: 0.05, shading: 0, backlight: 0.8, backlightColor: "#fff1d6" })
+];
+var DEFAULT_PAPER = PAPER_LIBRARY[0];
+function paperPreset(id) {
+  const p = PAPER_LIBRARY.find((x) => x.preset === id);
+  return p ? clonePaper(p) : void 0;
+}
+function clonePaper(p) {
+  return { ...p, dry: { ...p.dry }, wet: { ...p.wet }, ...p.offset ? { offset: { ...p.offset } } : {} };
+}
+function readOffset(raw, d) {
+  const o = raw && typeof raw === "object" ? raw : null;
+  const x = o && typeof o.x === "number" && Number.isFinite(o.x) ? Math.round(o.x) : d?.x ?? 0;
+  const y = o && typeof o.y === "number" && Number.isFinite(o.y) ? Math.round(o.y) : d?.y ?? 0;
+  return x || y ? { offset: { x, y } } : {};
+}
+function readTuning(raw, d) {
+  const r = raw && typeof raw === "object" ? raw : {};
+  return { contrast: clampNum(r.contrast, 0, 3, d.contrast), invert: typeof r.invert === "boolean" ? r.invert : d.invert };
+}
+function normalizePaper(raw = {}, base) {
+  const r = raw;
+  const b = base ?? (typeof r.preset === "string" ? paperPreset(r.preset) : void 0) ?? clonePaper(DEFAULT_PAPER);
+  return {
+    preset: typeof r.preset === "string" && r.preset ? r.preset : b.preset,
+    name: typeof r.name === "string" && r.name.trim() ? r.name.trim() : b.name,
+    family: PAPER_FAMILIES.includes(r.family) ? r.family : b.family,
+    pattern: GRAIN_PATTERNS.includes(r.pattern) ? r.pattern : b.pattern,
+    seed: typeof r.seed === "number" && Number.isFinite(r.seed) ? Math.round(Math.abs(r.seed)) % 2147483647 : b.seed,
+    color: typeof r.color === "string" && HEX.test(r.color) ? r.color.toLowerCase() : b.color,
+    scale: clampNum(r.scale, 0.25, 8, b.scale),
+    tiling: r.tiling === "repeat" || r.tiling === "mirror" ? r.tiling : b.tiling,
+    depth: unit2(r.depth, b.depth),
+    shading: unit2(r.shading, b.shading),
+    dry: readTuning(r.dry, b.dry),
+    wet: readTuning(r.wet, b.wet),
+    absorption: unit2(r.absorption, b.absorption),
+    permeability: unit2(r.permeability, b.permeability),
+    roughness: unit2(r.roughness, b.roughness),
+    ...unit2(r.metallic, b.metallic ?? 0) > 0 ? { metallic: unit2(r.metallic, b.metallic ?? 0) } : {},
+    ...unit2(r.backlight, b.backlight ?? 0) > 0 ? { backlight: unit2(r.backlight, b.backlight ?? 0) } : {},
+    ...typeof r.backlightColor === "string" && HEX.test(r.backlightColor) ? { backlightColor: r.backlightColor.toLowerCase() } : b.backlightColor ? { backlightColor: b.backlightColor } : {},
+    ...readOffset(r.offset, b.offset)
+  };
+}
+function hexToRgb8(hex) {
+  const n = parseInt(hex.slice(1, 7), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function renderPaper(paper, rect, grain = new PaperGrain(paper), light) {
+  const [r, g, b] = hexToRgb8(paper.color);
+  const out = new Uint8ClampedArray(rect.width * rect.height * 4);
+  const shade = grain.flat ? 0 : paper.shading * 0.16;
+  const metal = light ? paper.metallic ?? 0 : 0;
+  let hx = 0;
+  let hy = 0;
+  let hz = 1;
+  if (metal > 0 && light) {
+    const az = light.azimuth * Math.PI / 180;
+    const el = light.elevation * Math.PI / 180;
+    const lx = Math.cos(el) * Math.sin(az);
+    const ly = -Math.cos(el) * Math.cos(az);
+    const lz = Math.sin(el) + 1;
+    const n = Math.hypot(lx, ly, lz);
+    hx = lx / n;
+    hy = ly / n;
+    hz = lz / n;
+  }
+  for (let y = 0; y < rect.height; y++) {
+    for (let x = 0; x < rect.width; x++) {
+      const i = (y * rect.width + x) * 4;
+      const px = rect.x + x + 0.5;
+      const py = rect.y + y + 0.5;
+      const k = shade ? 1 - shade * (1 - grain.at(px, py)) : 1;
+      let spec = 0;
+      if (metal > 0) {
+        const gx = (grain.at(px + 1, py) - grain.at(px - 1, py)) * 4;
+        const gy = (grain.at(px, py + 1) - grain.at(px, py - 1)) * 4;
+        const nl = Math.hypot(gx, gy, 1);
+        const nh = Math.max(0, (-gx * hx - gy * hy + hz) / nl);
+        spec = metal * Math.pow(nh, 24) * 0.9;
+      }
+      out[i] = Math.min(255, r * k * (1 - 0.25 * metal) + spec * (r * 0.6 + 102));
+      out[i + 1] = Math.min(255, g * k * (1 - 0.25 * metal) + spec * (g * 0.6 + 102));
+      out[i + 2] = Math.min(255, b * k * (1 - 0.25 * metal) + spec * (b * 0.6 + 102));
+      out[i + 3] = 255;
+    }
+  }
+  return out;
+}
+
+// src/paint-editor/tip-grain.ts
+var ImageGrain = class {
+  constructor(w, h, alpha, contrast, invert2, scale3) {
+    this.w = w;
+    this.h = h;
+    this.scale = scale3;
+    this.heights = new Float32Array(w * h);
+    for (let i = 0; i < w * h; i++) {
+      const v2 = Math.min(1, Math.max(0, (alpha[i * 4 + 3] / 255 - 0.5) * contrast + 0.5));
+      this.heights[i] = invert2 ? 1 - v2 : v2;
+    }
+  }
+  w;
+  h;
+  scale;
+  heights;
+  at(x, y) {
+    const { w, h } = this;
+    const u = x / this.scale - 0.5;
+    const v2 = y / this.scale - 0.5;
+    const x0 = Math.floor(u);
+    const y0 = Math.floor(v2);
+    const fx = u - x0;
+    const fy = v2 - y0;
+    const xa = (x0 % w + w) % w;
+    const ya = (y0 % h + h) % h;
+    const xb = (xa + 1) % w;
+    const yb = (ya + 1) % h;
+    const hs = this.heights;
+    return (hs[ya * w + xa] * (1 - fx) + hs[ya * w + xb] * fx) * (1 - fy) + (hs[yb * w + xa] * (1 - fx) + hs[yb * w + xb] * fx) * fy;
+  }
+};
+var TipGrain = class _TipGrain {
+  constructor(field, settings) {
+    this.field = field;
+    this.settings = settings;
+  }
+  field;
+  settings;
+  /**
+   * The grain for `settings`, or `null` when there is none to apply: no depth, or an image source
+   * whose art is not loaded (the dabs then paint without it).
+   */
+  static create(settings, art) {
+    if (!settings || settings.depth <= 0) return null;
+    if (GRAIN_PATTERNS.includes(settings.source)) {
+      if (settings.source === "smooth") return null;
+      const tuning2 = { contrast: settings.contrast, invert: settings.invert };
+      const paper = new PaperGrain({ pattern: settings.source, seed: 0, scale: settings.scale, tiling: "repeat", dry: tuning2, wet: tuning2 });
+      return new _TipGrain(paper, settings);
+    }
+    const a = art?.(settings.source);
+    if (!a || !(a.width > 0 && a.height > 0)) return null;
+    return new _TipGrain(new ImageGrain(a.width, a.height, a.data, settings.contrast, settings.invert, settings.scale), settings);
+  }
+  /** Multiplies the dab's coverage `vals` (over `rect`) by the grain. */
+  apply(vals, rect, d) {
+    const depth = this.settings.depth;
+    const moving = this.settings.mode === "moving";
+    const cs = Math.cos(d.angle);
+    const sn = Math.sin(d.angle);
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      const py = rect.y + yy + 0.5;
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        if (!(vals[k] > 0)) continue;
+        const px = rect.x + xx + 0.5;
+        let gx = px;
+        let gy = py;
+        if (moving) {
+          const dx = px - d.x;
+          const dy = py - d.y;
+          gx = dx * cs - dy * sn + d.travel;
+          gy = dx * sn + dy * cs;
+        }
+        vals[k] *= 1 - depth * (1 - this.field.at(gx, gy));
+      }
+    }
+  }
+};
+
+// src/paint-editor/engine.ts
+function penOrientation(p) {
+  if (typeof p.altitude === "number" && Number.isFinite(p.altitude)) {
+    const altitude = Math.min(Math.PI / 2, Math.max(0, p.altitude));
+    const azimuth = typeof p.azimuth === "number" && Number.isFinite(p.azimuth) ? p.azimuth : 0;
+    return { altitude, azimuth };
+  }
+  const hasX = typeof p.tiltX === "number" && Number.isFinite(p.tiltX);
+  const hasY = typeof p.tiltY === "number" && Number.isFinite(p.tiltY);
+  if (!hasX && !hasY) return null;
+  return tiltToOrientation(hasX ? p.tiltX : 0, hasY ? p.tiltY : 0);
+}
+function tiltToOrientation(tiltX, tiltY) {
+  const clampT = (v2) => Math.min(89.999, Math.max(-89.999, v2));
+  const tx = Math.tan(clampT(tiltX) * Math.PI / 180);
+  const ty = Math.tan(clampT(tiltY) * Math.PI / 180);
+  const r = Math.hypot(tx, ty);
+  if (r < 1e-9) return { altitude: Math.PI / 2, azimuth: 0 };
+  let azimuth = Math.atan2(ty, tx);
+  if (azimuth < 0) azimuth += 2 * Math.PI;
+  return { altitude: Math.atan(1 / r), azimuth };
+}
+var pressureOf = (p) => typeof p.pressure === "number" && Number.isFinite(p.pressure) ? Math.min(1, Math.max(0, p.pressure)) : 1;
+var PenSmoother = class {
+  pos = null;
+  pressure = null;
+  a;
+  ap;
+  constructor(position, pressure) {
+    this.a = 1 - Math.min(0.95, Math.max(0, position));
+    this.ap = 1 - Math.min(0.95, Math.max(0, pressure));
+  }
+  push(p) {
+    const pr = pressureOf(p);
+    if (!this.pos) {
+      this.pos = { x: p.x, y: p.y };
+      this.pressure = pr;
+      return p;
+    }
+    this.pos = { x: this.pos.x + (p.x - this.pos.x) * this.a, y: this.pos.y + (p.y - this.pos.y) * this.a };
+    this.pressure = this.pressure + (pr - this.pressure) * this.ap;
+    return { ...p, x: this.pos.x, y: this.pos.y, pressure: this.pressure };
+  }
+  /** Where the smoothed position is now (or `null` before the first sample). */
+  get position() {
+    return this.pos;
+  }
+};
+var IDENTITY_COPY = { map: (p) => p, linear: [1, 0, 0, 1] };
+var FULL_SPEED = 2.5;
+var PenDabWalker = class {
+  constructor(brush, seed = 0, linear = [1, 0, 0, 1]) {
+    this.brush = brush;
+    this.seed = seed;
+    this.linear = linear;
+  }
+  brush;
+  seed;
+  linear;
+  last = null;
+  nextAt = 0;
+  pendingFirst = null;
+  index = 0;
+  dir = 0;
+  lastT = null;
+  firstT = null;
+  speed = null;
+  travelled = 0;
+  sample(p) {
+    const o = penOrientation(p);
+    let speed = null;
+    let time = null;
+    if (this.last) this.travelled += Math.hypot(p.x - this.last.x, p.y - this.last.y);
+    if (typeof p.t === "number" && Number.isFinite(p.t)) {
+      if (this.firstT === null) this.firstT = p.t;
+      time = p.t - this.firstT;
+      if (this.last && this.lastT !== null && p.t > this.lastT) {
+        const v2 = Math.hypot(p.x - this.last.x, p.y - this.last.y) / (p.t - this.lastT);
+        this.speed = this.speed === null ? v2 : this.speed + (v2 - this.speed) * 0.35;
+      }
+      this.lastT = p.t;
+      speed = this.speed ?? 0;
+    }
+    return {
+      x: p.x,
+      y: p.y,
+      pressure: pressureOf(p),
+      lean: o ? 1 - o.altitude / (Math.PI / 2) : 0,
+      azimuth: o ? o.azimuth : 0,
+      twist: typeof p.twist === "number" && Number.isFinite(p.twist) ? p.twist : null,
+      speed,
+      travel: this.travelled,
+      time
+    };
+  }
+  diameter(s) {
+    const tip = this.brush.tip;
+    const dyn = this.brush.dynamics;
+    let d = tip.size;
+    if (tip.pressureSize) d *= dyn.minSize + (1 - dyn.minSize) * s.pressure;
+    d *= 1 + dyn.tiltSize * s.lean * 1.5;
+    if (s.speed !== null && dyn.velocitySize) d *= Math.max(0.05, 1 + dyn.velocitySize * Math.min(1, s.speed / FULL_SPEED) * (dyn.velocitySize < 0 ? 0.85 : 1));
+    return d;
+  }
+  stepLen(s) {
+    return Math.max(0.5, Math.max(1, this.diameter(s)) * Math.max(0.01, this.brush.tip.spacing));
+  }
+  /** A rasterizer angle (CCW, y up) mapped through this copy's linear part. */
+  mapAngle(theta) {
+    const [a, b, c, d] = this.linear;
+    if (a === 1 && b === 0 && c === 0 && d === 1) return theta;
+    const vx = Math.cos(theta);
+    const vy = -Math.sin(theta);
+    return Math.atan2(-(c * vx + d * vy), a * vx + b * vy);
+  }
+  dab(s) {
+    const { tip, dynamics: dyn, rotation } = this.brush;
+    const i = this.index++;
+    const seed = this.seed;
+    let diameter = this.diameter(s);
+    if (dyn.sizeJitter) diameter *= Math.max(0.05, 1 + dyn.sizeJitter * randSigned(seed, i, 1 /* Size */));
+    const base = tip.angle * Math.PI / 180;
+    let angle;
+    if (rotation === "stroke") angle = this.dir + base;
+    else if (rotation === "barrel" && s.twist !== null) angle = this.mapAngle(base - s.twist * Math.PI / 180);
+    else if (dyn.tiltRoundness > 0 && s.lean > 0.02) angle = this.mapAngle(base - s.azimuth);
+    else angle = this.mapAngle(base);
+    if (dyn.angleJitter) angle += dyn.angleJitter * Math.PI * randSigned(seed, i, 2 /* Angle */);
+    let opacity = tip.pressureOpacity ? s.pressure : 1;
+    opacity *= 1 - dyn.tiltOpacity * s.lean * 0.8;
+    if (s.speed !== null && dyn.velocityOpacity) opacity *= Math.max(0, 1 + dyn.velocityOpacity * (Math.min(1, s.speed / FULL_SPEED) - 0.5));
+    if (dyn.opacityJitter) opacity *= 1 - dyn.opacityJitter * (randSigned(seed, i, 3 /* Opacity */) * 0.5 + 0.5);
+    const flow = tip.flow * (1 - dyn.pressureFlow + dyn.pressureFlow * s.pressure);
+    let { x, y } = s;
+    if (dyn.scatter) {
+      const off = dyn.scatter * diameter * randSigned(seed, i, 4 /* Scatter */);
+      x += Math.sin(this.dir) * off;
+      y += Math.cos(this.dir) * off;
+    }
+    let flip = 0;
+    if (dyn.flip && dyn.flip !== "none") {
+      if (dyn.flip !== "y" && rand01(seed, i, 5 /* FlipX */) < 0.5) flip |= 1;
+      if (dyn.flip !== "x" && rand01(seed, i, 6 /* FlipY */) < 0.5) flip |= 2;
+    }
+    return {
+      ...flip ? { flip } : {},
+      x,
+      y,
+      radius: Math.max(0.5, diameter / 2),
+      alpha: Math.min(1, Math.max(0, flow)),
+      opacity: Math.min(1, Math.max(0, opacity)),
+      angle,
+      roundness: Math.min(1, Math.max(0.01, tip.roundness * (1 - dyn.tiltRoundness * s.lean * 0.8))),
+      pressure: s.pressure,
+      direction: this.dir,
+      index: i,
+      travel: s.travel,
+      time: s.time,
+      lean: s.lean,
+      speed: s.speed
+    };
+  }
+  push(p, out) {
+    const a = this.last;
+    const s = this.sample(p);
+    if (!a) {
+      this.last = s;
+      this.pendingFirst = s;
+      this.nextAt = this.stepLen(s);
+      return;
+    }
+    const dx = s.x - a.x;
+    const dy = s.y - a.y;
+    const len2 = Math.hypot(dx, dy);
+    if (len2 > 1e-9) this.dir = Math.atan2(-dy, dx);
+    if (this.pendingFirst) {
+      this.lay(this.pendingFirst, out);
+      this.pendingFirst = null;
+    }
+    if (len2 > 1e-9) {
+      while (this.nextAt <= len2 + 1e-9) {
+        const f = Math.min(1, this.nextAt / len2);
+        const lerp4 = (u, v2) => u + (v2 - u) * f;
+        const q = {
+          x: a.x + dx * f,
+          y: a.y + dy * f,
+          pressure: lerp4(a.pressure, s.pressure),
+          lean: lerp4(a.lean, s.lean),
+          azimuth: lerpAngle(a.azimuth, s.azimuth, f),
+          twist: a.twist !== null && s.twist !== null ? lerpDegrees(a.twist, s.twist, f) : s.twist,
+          speed: a.speed !== null && s.speed !== null ? lerp4(a.speed, s.speed) : s.speed,
+          travel: a.travel + this.nextAt,
+          time: a.time !== null && s.time !== null ? lerp4(a.time, s.time) : s.time
+        };
+        this.lay(q, out);
+        this.nextAt += this.stepLen(q);
+      }
+      this.nextAt -= len2;
+    }
+    this.last = s;
+  }
+  finish(out) {
+    if (this.pendingFirst) {
+      this.lay(this.pendingFirst, out);
+      this.pendingFirst = null;
+    }
+  }
+  /** The dabs of one spacing step: `dynamics.count` of them, each with its own index and so its own jitter. */
+  lay(s, out) {
+    const n = this.brush.dynamics.count ?? 1;
+    for (let k = 0; k < n; k++) out.push(this.dab(s));
+  }
+};
+function lerpAngle(a, b, t) {
+  let d = b - a;
+  while (d > Math.PI) d -= 2 * Math.PI;
+  while (d < -Math.PI) d += 2 * Math.PI;
+  return a + d * t;
+}
+function lerpDegrees(a, b, t) {
+  let d = b - a;
+  while (d > 180) d -= 360;
+  while (d < -180) d += 360;
+  return a + d * t;
+}
+var DryStroke = class {
+  constructor(brush, options) {
+    this.brush = brush;
+    this.options = options;
+    this.stamp = brush.stamp ? stampSampler(brush.stamp, options.stampArt, brush.tip.hardness) : null;
+    this.tipGrain = TipGrain.create(brush.tipGrain, options.stampArt);
+    this.smoother = new PenSmoother(brush.tip.smoothing, brush.pressureSmoothing);
+    this.copies = options.copies?.length ? options.copies : [IDENTITY_COPY];
+    this.walkers = this.copies.map((c, i) => new PenDabWalker(brush, (options.seed ?? 0) + i * 7919 | 0, c.linear));
+    this.depth = options.grain && !options.grain.flat ? Math.min(1, Math.max(0, options.paperDepth * brush.grain)) : 0;
+  }
+  brush;
+  options;
+  coverage = new CoverageMap();
+  dabCount = 0;
+  smoother;
+  walkers;
+  copies;
+  depth;
+  buf = new Float32Array(0);
+  field = new Float32Array(0);
+  lastRaw = null;
+  lastFed = null;
+  /** The stamp tip's shape, or `null` for the round computed tip. */
+  stamp;
+  /** The tip's own grain, or `null`. */
+  tipGrain;
+  /** Feeds raw pen samples; returns the document rectangles the new dabs touched. */
+  push(points) {
+    const dabs = [];
+    for (const raw of points) {
+      this.lastRaw = raw;
+      const p = this.smoother.push(raw);
+      this.lastFed = p;
+      this.copies.forEach((c, i) => this.walkers[i].push(c.map(p), dabs));
+    }
+    return this.paint(dabs);
+  }
+  /** Ends the stroke: the smoothed path catches up with the last raw sample; a single tap paints one dab. */
+  finish() {
+    const dabs = [];
+    const raw = this.lastRaw;
+    const fed = this.lastFed;
+    if (raw && fed && (raw.x !== fed.x || raw.y !== fed.y)) this.copies.forEach((c, i) => this.walkers[i].push(c.map({ ...raw, pressure: fed.pressure }), dabs));
+    for (const w of this.walkers) w.finish(dabs);
+    return this.paint(dabs);
+  }
+  paint(dabs) {
+    const rects = [];
+    const spray = this.brush.spray;
+    const seed = this.options.seed ?? 0;
+    for (const d of dabs) {
+      if (!spray) {
+        this.mark(d, d, rects);
+        continue;
+      }
+      for (const drop of sprayDroplets(d, spray, seed)) this.mark(drop, d, rects);
+    }
+    return rects;
+  }
+  /** Lays one mark (a dab, or a spray droplet of dab `d`): the round tip or the stamp, the tip grain, the paper grain, effect paint. */
+  mark(m, d, rects) {
+    const hardness = this.brush.tip.hardness;
+    const grain = this.options.grain;
+    const rect = this.stamp ? stampDabRect(m) : dabRect(m, hardness);
+    const n = rect.width * rect.height;
+    if (this.buf.length < n) this.buf = new Float32Array(n);
+    const vals = this.buf.subarray(0, n);
+    if (this.stamp) rasterizeStampDab(m, this.stamp, d.index, rect, vals);
+    else rasterizeDab(m, hardness, rect, vals);
+    this.tipGrain?.apply(vals, rect, { x: m.x, y: m.y, angle: m.angle, travel: d.travel });
+    if (this.depth > 0 && grain) {
+      for (let yy = 0, k = 0; yy < rect.height; yy++) {
+        const y = rect.y + yy + 0.5;
+        for (let xx = 0; xx < rect.width; xx++, k++) {
+          if (vals[k] > 0) vals[k] *= grainCatch(grain.at(rect.x + xx + 0.5, y), this.depth, d.pressure);
+        }
+      }
+    }
+    let field = null;
+    if (this.options.effect) {
+      if (this.field.length < n * 3) this.field = new Float32Array(n * 3);
+      field = this.field.subarray(0, n * 3);
+      sampleEffectField(this.options.effect, rect, vals, field, d);
+    }
+    this.coverage.accumulate(rect, vals, m.opacity, null, field);
+    rects.push(rect);
+    this.dabCount++;
+  }
+};
+function mixerTip(brush) {
+  return { ...brush.tip, smoothing: 0, pressureSize: brush.tip.pressureSize };
+}
+function toStrokePoint(p) {
+  return { x: p.x, y: p.y, pressure: pressureOf(p), ...typeof p.t === "number" ? { t: p.t } : {} };
+}
+
+// src/paint-editor/dab-stroke.ts
+var GRADIENT_STEPS = 32;
+function multiColorPalette(mc, color2, secondary) {
+  if (mc.colors.length >= 2) {
+    return mc.colors.map((h) => {
+      const n = parseInt(h.slice(1), 16);
+      return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+    });
+  }
+  return [[...color2], [...secondary]];
+}
+function soften(f, softness) {
+  if (softness >= 1) return f;
+  const w = Math.max(1e-3, softness);
+  return Math.min(1, Math.max(0, (f - 0.5) / w + 0.5));
+}
+function mixRgb(a, b, t, mixing) {
+  if (t <= 0) return [...a];
+  if (t >= 1) return [...b];
+  if (mixing === "pigment") {
+    const o = [0, 0, 0];
+    const q = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255);
+    mixPigment8(q(a[0]), q(a[1]), q(a[2]), q(b[0]), q(b[1]), q(b[2]), t, o);
+    return [o[0], o[1], o[2]];
+  }
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+}
+function multiColorGradient(palette, softness, mixing) {
+  const n = palette.length;
+  const out = [];
+  for (let j = 0; j < GRADIENT_STEPS; j++) {
+    const f = j / (GRADIENT_STEPS - 1) * (n - 1);
+    const i = Math.min(n - 2, Math.floor(f));
+    out.push(mixRgb(palette[i], palette[i + 1], soften(f - i, softness), mixing));
+  }
+  return out;
+}
+function multiColorForDab(mc, palette, index, seed, mixing) {
+  const n = palette.length;
+  if (mc.order === "random") {
+    const run = Math.floor(index / mc.length);
+    return [...palette[Math.min(n - 1, Math.floor(rand01(seed, run, 11) * n))]];
+  }
+  const f = index / mc.length % n;
+  const i = Math.floor(f);
+  return mixRgb(palette[i], palette[(i + 1) % n], soften(f - i, mc.softness), mixing);
+}
+var PaintDabStroke = class {
+  constructor(brush, options) {
+    this.brush = brush;
+    this.options = options;
+    this.stamp = brush.engine === "dab" && brush.stamp ? stampSampler(brush.stamp, options.stampArt, brush.tip.hardness) : null;
+    this.tipGrain = TipGrain.create(brush.tipGrain, options.stampArt);
+    this.smoother = new PenSmoother(brush.tip.smoothing, brush.pressureSmoothing);
+    this.copies = options.copies?.length ? options.copies : [IDENTITY_COPY];
+    const exchanging = brush.engine === "mixer" || brush.engine === "dab";
+    const rates = brush.engine === "mixer" ? mixerRates(brush.mixer) : exchangeRates(brush.behavior.pickup, brush.behavior.mix, 1, brush.behavior.mixing);
+    this.mixing = brush.engine === "mixer" ? brush.mixer.mixing : brush.behavior.mixing;
+    this.states = this.copies.map((c, i) => ({
+      walker: new PenDabWalker(brush, (options.seed ?? 0) + i * 7919 | 0, c.linear),
+      exchange: exchanging ? new PaintExchange(rates, options.load) : null,
+      smudge: brush.engine === "smudge" ? new SmudgeTip(brush.smudge, brush.tip.size * (1 + brush.dynamics.tiltSize * 1.5)) : null
+    }));
+    this.medium = new TileMedium(options.target, brush.engine === "dab" ? { blend: brush.tip.blend } : {});
+    this.depth = options.grain && !options.grain.flat ? Math.min(1, Math.max(0, options.paperDepth * brush.grain)) : 0;
+    this.coverage = brush.engine === "dab" ? new CoverageMap() : null;
+    this.sampler = exchanging && options.paint ? new PaintGradientSampler(options.paint, options.seed ?? 0) : null;
+    const table = this.sampler?.acrossTip ? this.sampler.tipTable(GRADIENT_STEPS) : null;
+    this.gradient = table ? table.map((e) => e.rgb) : null;
+    this.gradientAlpha = table && table.some((e) => e.alpha < 1) ? table.map((e) => e.alpha) : null;
+    this.scratch = brush.engine === "blender" ? createBlenderScratch() : null;
+  }
+  brush;
+  options;
+  dabCount = 0;
+  smoother;
+  copies;
+  states;
+  medium;
+  depth;
+  coverage;
+  sampler;
+  sample = { rgb: [0, 0, 0], alpha: 1 };
+  gradient;
+  /** Opacity across the tip (`across-tip` gradients with opacity stops), or `null`. */
+  gradientAlpha;
+  alphaCov = new Float32Array(0);
+  fieldLut = [];
+  scratch;
+  mixing;
+  tip = new Float32Array(0);
+  cov = new Float32Array(0);
+  field = new Float32Array(0);
+  paint = [0, 0, 0];
+  lastRaw = null;
+  lastFed = null;
+  /** The stamp tip's shape (dab brushes), or `null` for the round computed tip. */
+  stamp;
+  /** The tip's own grain, or `null`. */
+  tipGrain;
+  /** What copy 0's brush carries after the dabs so far (mixer and wet-capable dab brushes). */
+  get load() {
+    return this.states[0].exchange?.load ?? null;
+  }
+  push(points) {
+    const rects = [];
+    for (const raw of points) {
+      this.lastRaw = raw;
+      const p = this.smoother.push(raw);
+      this.lastFed = p;
+      this.copies.forEach((c, i) => {
+        const dabs = [];
+        this.states[i].walker.push(c.map(p), dabs);
+        this.paintDabs(i, dabs, rects);
+      });
+    }
+    return rects;
+  }
+  /** Ends the stroke: the smoothed path catches up with the last raw sample; a tap paints one dab. */
+  finish() {
+    const rects = [];
+    const raw = this.lastRaw;
+    const fed = this.lastFed;
+    this.copies.forEach((c, i) => {
+      const dabs = [];
+      if (raw && fed && (raw.x !== fed.x || raw.y !== fed.y)) this.states[i].walker.push(c.map({ ...raw, pressure: fed.pressure }), dabs);
+      this.states[i].walker.finish(dabs);
+      this.paintDabs(i, dabs, rects);
+    });
+    return rects;
+  }
+  paintDabs(copy, dabs, rects) {
+    const spray = this.brush.engine === "dab" ? this.brush.spray : null;
+    for (const d of spray ? dabs.flatMap((dab) => sprayDroplets(dab, spray, (this.options.seed ?? 0) + copy * 7919)) : dabs) {
+      const rect = this.stamp ? stampDabRect(d) : dabRect(d, this.brush.tip.hardness);
+      if (rect.width <= 0 || rect.height <= 0) continue;
+      this.dab(copy, d, rect);
+      rects.push(rect);
+      this.dabCount++;
+    }
+  }
+  /** The tip's pure coverage (`tip`) and, with grain, what the paper catches of it (`cov`). */
+  rasterize(d, rect) {
+    const n = rect.width * rect.height;
+    if (this.tip.length < n) {
+      this.tip = new Float32Array(n);
+      this.cov = new Float32Array(n);
+    }
+    const tip = this.tip.subarray(0, n);
+    tip.fill(0);
+    if (this.stamp) rasterizeStampDab({ ...d, alpha: 1 }, this.stamp, d.index, rect, tip);
+    else rasterizeDab({ ...d, alpha: 1 }, this.brush.tip.hardness, rect, tip);
+    this.tipGrain?.apply(tip, rect, d);
+    if (!(this.depth > 0 && this.options.grain)) return { tip, cov: tip };
+    const cov = this.cov.subarray(0, n);
+    const grain = this.options.grain;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      const y = rect.y + yy + 0.5;
+      for (let xx = 0; xx < rect.width; xx++, k++) cov[k] = tip[k] > 0 ? tip[k] * grainCatch(grain.at(rect.x + xx + 0.5, y), this.depth, d.pressure) : 0;
+    }
+    return { tip, cov };
+  }
+  dab(copy, d, rect) {
+    const brush = this.brush;
+    const { tip, cov } = this.rasterize(d, rect);
+    const st = this.states[copy];
+    if (brush.engine === "blender") {
+      blenderDab(this.medium, rect, cov, d.opacity * d.alpha * brush.tip.opacity, d.radius, brush.blender, this.scratch);
+      return;
+    }
+    if (brush.engine === "smudge") {
+      st.smudge.dab(this.medium, { x: d.x, y: d.y, radius: d.radius, opacity: d.opacity * d.alpha * brush.tip.opacity }, rect, cov);
+      return;
+    }
+    const ex = st.exchange;
+    ex.pickUp(this.medium.sample(rect, tip));
+    let flow = 1;
+    if (this.options.effect) {
+      const rgb = [0, 0, 0];
+      flow = sampleEffectAt(this.options.effect, d.x, d.y, rgb, d);
+      ex.setReservoirColor(rgb[0], rgb[1], rgb[2]);
+    } else if (this.sampler && !this.gradient) {
+      const g = this.sampler.dab(d, this.sample);
+      ex.setReservoirColor(g.rgb[0], g.rgb[1], g.rgb[2]);
+      flow = g.alpha;
+    }
+    let field = null;
+    let total;
+    let laid = cov;
+    if (this.gradient) {
+      total = this.tipField(ex, d, rect);
+      field = this.field;
+      if (this.gradientAlpha) laid = this.tipAlpha(d, rect, cov);
+    } else total = ex.paint(this.paint);
+    if (total > 0 && flow > 0) {
+      if (this.coverage) this.depositWithCeiling(d, rect, laid, field, ex, flow);
+      else {
+        const dep = Math.min(1, total) * d.alpha * brush.tip.opacity * d.opacity * flow;
+        if (dep > 0) this.medium.deposit(rect, laid, dep, this.paint, ex.paintPigment, field);
+      }
+    }
+    ex.drain();
+  }
+  /** Fills `this.field` with the tip gradient (mixed with the carried paint) per pixel; returns the paint weight. */
+  tipField(ex, d, rect) {
+    const g = this.gradient;
+    const lut = this.fieldLut;
+    let total = 0;
+    for (let j = 0; j < g.length; j++) {
+      ex.setReservoirColor(g[j][0], g[j][1], g[j][2]);
+      const out = lut[j] ?? [0, 0, 0];
+      total = ex.paint(out);
+      lut[j] = out;
+    }
+    const n = rect.width * rect.height;
+    if (this.field.length < n * 3) this.field = new Float32Array(n * 3);
+    const f = this.field;
+    const nx = Math.sin(d.direction);
+    const ny = Math.cos(d.direction);
+    const r = Math.max(0.5, d.radius);
+    const last = g.length - 1;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      const py = rect.y + yy + 0.5 - d.y;
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        const u = ((rect.x + xx + 0.5 - d.x) * nx + py * ny) / r;
+        const j = Math.min(last, Math.max(0, Math.round((u + 1) / 2 * last)));
+        f[k * 3] = lut[j][0];
+        f[k * 3 + 1] = lut[j][1];
+        f[k * 3 + 2] = lut[j][2];
+      }
+    }
+    return total;
+  }
+  /** `cov` scaled by the gradient's opacity across the tip. */
+  tipAlpha(d, rect, cov) {
+    const a = this.gradientAlpha;
+    const n = rect.width * rect.height;
+    if (this.alphaCov.length < n) this.alphaCov = new Float32Array(n);
+    const out = this.alphaCov.subarray(0, n);
+    const nx = Math.sin(d.direction);
+    const ny = Math.cos(d.direction);
+    const r = Math.max(0.5, d.radius);
+    const last = a.length - 1;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      const py = rect.y + yy + 0.5 - d.y;
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        const u = ((rect.x + xx + 0.5 - d.x) * nx + py * ny) / r;
+        out[k] = cov[k] * a[Math.min(last, Math.max(0, Math.round((u + 1) / 2 * last)))];
+      }
+    }
+    return out;
+  }
+  /** A dab brush's deposit: only what this dab adds to the stroke's coverage, under its opacity ceiling. */
+  depositWithCeiling(d, rect, cov, field, ex, flow = 1) {
+    const map = this.coverage;
+    const n = rect.width * rect.height;
+    const before = new Float32Array(n);
+    const vals = new Float32Array(n);
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        if (cov[k] <= 0) continue;
+        before[k] = map.get(rect.x + xx, rect.y + yy);
+        vals[k] = cov[k] * d.alpha * flow;
+      }
+    }
+    map.accumulate(rect, vals, d.opacity);
+    const o = this.brush.tip.opacity;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        if (cov[k] <= 0) {
+          vals[k] = 0;
+          continue;
+        }
+        const c0 = before[k] * o;
+        const c1 = map.get(rect.x + xx, rect.y + yy) * o;
+        vals[k] = c1 > c0 && c0 < 1 ? (c1 - c0) / (1 - c0) : 0;
+      }
+    }
+    this.medium.deposit(rect, vals, 1, this.paint, ex.paintPigment, field);
+  }
+};
+
+// src/paint-editor/wet.ts
+var STROKE_WATER = 0.9;
+var STROKE_MASS = PIGMENT_UNIT * 2.5;
+var STROKE_LIGHT = 1.5;
+var COVERAGE_STEPS = 4096;
+function union(a, b) {
+  if (!a) return { ...b };
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, width: Math.max(a.x + a.width, b.x + b.width) - x, height: Math.max(a.y + a.height, b.y + b.height) - y };
+}
+function wetPaperInput(paper) {
+  const grain = new PaperGrain(paper, "wet");
+  const flat = grain.flat;
+  return {
+    absorption: paper.absorption,
+    permeability: paper.permeability,
+    roughness: flat ? 0 : paper.roughness,
+    color: hexToRgb8(paper.color),
+    heightAt: flat ? () => 0.5 : (x, y) => grain.at(x, y)
+  };
+}
+var WetStrokeDriver = class {
+  constructor(init) {
+    this.init = init;
+    const brush = init.brush;
+    this.smoother = new PenSmoother(brush.tip.smoothing, brush.pressureSmoothing);
+    const copies = init.copies.length ? init.copies : [IDENTITY_COPY];
+    const wet = brush.wet;
+    const spacing = Math.max(0.02, brush.tip.spacing);
+    const perDab = Math.min(1, spacing * 1.2);
+    const thin = wet.thinner;
+    this.medium = new WetMedium(init.world, init.laneId, {
+      water: STROKE_WATER * Math.min(1, wet.water * (1 + thin)) * perDab,
+      mass: STROKE_MASS * wet.pigment * (1 - 0.6 * thin) * perDab,
+      body: wet.body * (1 - thin),
+      light: 0
+    });
+    this.lightBase = wet.tool === "paint" ? STROKE_LIGHT * brush.light.amount * (1 - 0.6 * thin) * perDab : 0;
+    const rates = exchangeRates(brush.behavior.pickup, brush.behavior.mix, wet.load, brush.behavior.mixing);
+    this.states = copies.map((c, i) => ({
+      walker: new PenDabWalker(brush, init.seed + i * 7919 | 0, c.linear),
+      exchange: wet.tool === "paint" ? new PaintExchange(rates, init.load) : null,
+      last: null
+    }));
+    this.copies = copies;
+    this.depth = init.grain && !init.grain.flat ? Math.min(1, Math.max(0, init.paperDepth * brush.grain)) : 0;
+    const g = init.paint ?? null;
+    this.sampler = g ? new PaintGradientSampler(g.map.by === "across-tip" ? { ...g, map: { by: "distance", length: 300, repeat: "mirror" } } : g, init.seed) : null;
+  }
+  init;
+  dabCount = 0;
+  bounds = null;
+  /** The world's clock at which each raw point was applied (recorded with the stroke). */
+  steps = [];
+  smoother;
+  states;
+  medium;
+  queue = [];
+  finishing = false;
+  finished = false;
+  lastRaw = null;
+  lastFed = null;
+  tip = new Float32Array(0);
+  cov = new Float32Array(0);
+  paint = [0, 0, 0];
+  centre = [0, 0, 0];
+  depth;
+  lightBase;
+  sampler;
+  sample = { rgb: [0, 0, 0], alpha: 1 };
+  copies;
+  /** What copy 0's brush carries after the dabs so far. */
+  get load() {
+    return this.states[0].exchange?.load ?? null;
+  }
+  /** Whether every point (and the end) has been applied. */
+  get done() {
+    return this.finished;
+  }
+  /** Adds raw points; applies them now unless a batch is running. Returns where pixels changed. */
+  push(points) {
+    for (const p of points) this.queue.push(p);
+    return this.flush();
+  }
+  /** Asks for the end; it happens now unless a batch is running (then at the next `flush`). */
+  finish() {
+    this.finishing = true;
+    return this.flush();
+  }
+  /** Applies waiting points (and the end, when asked) if the world is between batches. */
+  flush() {
+    const rects = [];
+    if (this.init.world.busy || this.finished) return rects;
+    while (this.queue.length) {
+      const raw = this.queue.shift();
+      this.steps.push(this.init.world.clock);
+      this.lastRaw = raw;
+      const p = this.smoother.push(raw);
+      this.lastFed = p;
+      this.copies.forEach((c, i) => {
+        const dabs = [];
+        this.states[i].walker.push(c.map(p), dabs);
+        this.applyDabs(i, dabs, rects);
+      });
+    }
+    if (this.finishing) {
+      const raw = this.lastRaw;
+      const fed = this.lastFed;
+      this.copies.forEach((c, i) => {
+        const dabs = [];
+        if (raw && fed && (raw.x !== fed.x || raw.y !== fed.y)) this.states[i].walker.push(c.map({ ...raw, pressure: fed.pressure }), dabs);
+        this.states[i].walker.finish(dabs);
+        this.applyDabs(i, dabs, rects);
+      });
+      this.finished = true;
+    }
+    for (const r of rects) this.bounds = union(this.bounds, r);
+    return rects;
+  }
+  applyDabs(copy, dabs, rects) {
+    for (const d of dabs) {
+      const rect = dabRect(d, this.init.brush.tip.hardness);
+      if (rect.width <= 0 || rect.height <= 0) continue;
+      this.dab(copy, d, rect);
+      rects.push(rect);
+      this.dabCount++;
+    }
+  }
+  /** The tip's coverage over `rect`, with the grain, quantised. */
+  coverage(d, rect) {
+    const n = rect.width * rect.height;
+    if (this.tip.length < n) {
+      this.tip = new Float32Array(n);
+      this.cov = new Float32Array(n);
+    }
+    const tip = this.tip.subarray(0, n);
+    const cov = this.cov.subarray(0, n);
+    tip.fill(0);
+    rasterizeDab({ ...d, alpha: 1 }, this.init.brush.tip.hardness, rect, tip);
+    const grain = this.depth > 0 ? this.init.grain : null;
+    const mask = this.init.mask;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        if (mask && tip[k] > 0) {
+          const mx = rect.x + xx;
+          const my = rect.y + yy;
+          tip[k] *= mx >= 0 && my >= 0 && mx < mask.width && my < mask.height ? mask.data[my * mask.width + mx] / 255 : 0;
+        }
+        let v2 = tip[k];
+        if (v2 > 0 && grain) v2 *= grainCatch(grain.at(rect.x + xx + 0.5, rect.y + yy + 0.5), this.depth, d.pressure);
+        tip[k] = Math.round(tip[k] * COVERAGE_STEPS) / COVERAGE_STEPS;
+        cov[k] = Math.round(v2 * COVERAGE_STEPS) / COVERAGE_STEPS;
+      }
+    }
+    return { tip, cov };
+  }
+  dab(copy, d, rect) {
+    const { world, laneId, brush } = this.init;
+    const wet = brush.wet;
+    const st = this.states[copy];
+    const { tip, cov } = this.coverage(d, rect);
+    const k = Math.round(Math.min(1, d.alpha * d.opacity * brush.tip.opacity) * COVERAGE_STEPS) / COVERAGE_STEPS;
+    if (!(k > 0)) return;
+    switch (wet.tool) {
+      case "paint": {
+        const ex = st.exchange;
+        this.medium.options.light = this.lightBase * (brush.light.pressure ? d.pressure : 1);
+        let flow = 1;
+        const effect = this.init.effect;
+        if (effect) {
+          sampleEffectAt(effect, d.x, d.y, this.centre, d);
+          ex.setReservoirColor(this.centre[0], this.centre[1], this.centre[2]);
+        } else if (this.sampler) {
+          const g = this.sampler.dab(d, this.sample);
+          ex.setReservoirColor(g.rgb[0], g.rgb[1], g.rgb[2]);
+          flow = g.alpha;
+        }
+        ex.pickUp(this.medium.sample(rect, tip));
+        const total = ex.paint(this.paint);
+        if (total > 0 && flow > 0 && effect) {
+          const ec = cov.slice();
+          const field = new Float32Array(ec.length * 3);
+          effectDabField(effect, rect, ec, this.centre, this.paint, field, COVERAGE_STEPS, d);
+          this.medium.deposit(rect, ec, Math.min(1, total) * k, this.paint, null, field);
+        } else if (total > 0 && flow > 0) this.medium.deposit(rect, cov, Math.min(1, total) * k * flow, this.paint, null);
+        else world.paint(laneId, rect, cov, this.medium.options.water * k, null);
+        ex.drain();
+        if (wet.rewet > 0) world.rewet(laneId, rect, cov, wet.rewet * k * 0.15, this.init.paperColor);
+        break;
+      }
+      case "water": {
+        world.paint(laneId, rect, cov, this.medium.options.water * k * (wet.water > 0 ? 1 : 0), null);
+        if (wet.rewet > 0) world.rewet(laneId, rect, cov, wet.rewet * k * 0.15, this.init.paperColor);
+        break;
+      }
+      case "dry":
+        world.remove(laneId, rect, cov, wet.strength * 0.35 * k, 0, 0, wet.strength * 0.35 * k);
+        break;
+      case "blow": {
+        const s = wet.strength * 0.08 * k;
+        world.push(laneId, rect, cov, Math.cos(d.direction) * s, -Math.sin(d.direction) * s);
+        break;
+      }
+      case "blend":
+        world.blend(laneId, rect, cov, wet.strength * k);
+        break;
+      case "smudge": {
+        if (st.last) world.drag(laneId, rect, cov, d.x - st.last.x, d.y - st.last.y, wet.strength * k);
+        break;
+      }
+      case "blot":
+        world.remove(laneId, rect, cov, wet.strength * 0.8 * k, wet.strength * 0.6 * k, wet.strength * 0.15 * k, wet.strength * 0.5 * k);
+        break;
+    }
+    st.last = d;
+  }
+};
+var WET_MEDIUM_PARAMS = {
+  watercolor: {},
+  gouache: { viscosity: 0.45, evaporation: 0.1, edgeDarkening: 0.15, granulation: 0.1, bloom: 0.1, bleed: 0.15, pickup: 0.5, pigmentWeight: 0.5 },
+  oil: { viscosity: 0.95, evaporation: 0.03, edgeDarkening: 0, granulation: 0, bloom: 0, bleed: 0.08, pickup: 0.6, fixture: 0.02, pigmentWeight: 0.8 }
+};
+var WET_GPU_MODES = ["auto", "off"];
+var GPU_LEAD = 16;
+var DISPLAY_TILES_PER_TICK = 24;
+var PaintWetLayers = class {
+  constructor(host, options = {}) {
+    this.host = host;
+    this.options = options;
+    this.speed = Math.max(1, Math.min(2e3, options.speed ?? 120));
+    this.undoMemory = Math.max(0, options.undoMemory ?? 512 * 1024 * 1024);
+    this.gpuMode = options.gpu === "off" ? "off" : "auto";
+    this.gpuMinTiles = Math.max(1, Math.floor(options.gpuMinTiles ?? 16));
+  }
+  host;
+  options;
+  world = null;
+  tilt = { ...FLAT };
+  settings = /* @__PURE__ */ new Map();
+  paused = false;
+  /** Wet strokes dry as soon as they end (one undo step with the stroke). */
+  instantDry = false;
+  speed;
+  overlay = false;
+  undoMemory;
+  /** The live wet stroke, if any. */
+  driver = null;
+  lastTick = null;
+  ticking = null;
+  stepsOwed = 0;
+  displaying = null;
+  leadAt = 0;
+  gpuMode;
+  gpuMinTiles;
+  gpu = null;
+  gpuSupport = null;
+  gpuStarting = null;
+  // --- Engine B ------------------------------------------------------------------
+  /** Starts the GPU engine for the world (once; it may turn out unavailable). */
+  startGpu() {
+    if (this.gpuMode === "off" || this.gpu || this.gpuStarting || this.gpuSupport) return;
+    const provider = this.options.gpuProvider === void 0 ? findWebGpu() : this.options.gpuProvider;
+    this.gpuStarting = createWetGpuEngine(provider).then(({ engine, support }) => {
+      this.gpuSupport = support;
+      if (!engine) return;
+      if (this.gpuMode === "off" || !this.world) {
+        engine.destroy();
+        this.gpuSupport = null;
+        return;
+      }
+      this.gpu = engine;
+      this.world.gpuMinTiles = this.gpuMinTiles;
+      this.world.attachGpu(engine);
+    }).finally(() => {
+      this.gpuStarting = null;
+      this.host.changed();
+    });
+  }
+  /** Resolves once the GPU engine has started or turned out unavailable. */
+  async gpuReady() {
+    if (this.gpuStarting) await this.gpuStarting;
+    return this.engineInfo();
+  }
+  /** `auto`: use the GPU for large wet areas when there is one; `off`: the CPU only. */
+  setGpu(mode, minTiles) {
+    if (minTiles !== void 0) {
+      this.gpuMinTiles = Math.max(1, Math.floor(minTiles));
+      if (this.world) this.world.gpuMinTiles = this.gpuMinTiles;
+    }
+    if (mode === this.gpuMode) return this.engineInfo();
+    this.gpuMode = mode;
+    if (mode === "off") {
+      this.world?.attachGpu(null);
+      this.gpu?.destroy();
+      this.gpu = null;
+      this.gpuSupport = null;
+    } else if (this.world) this.startGpu();
+    return this.engineInfo();
+  }
+  engineInfo() {
+    const w = this.world;
+    const base = { mode: this.gpuMode, adapter: this.gpuSupport?.adapter ?? null, maxTiles: this.gpuSupport?.maxSlots ?? 0, minTiles: this.gpuMinTiles, activeTiles: w?.activeTiles() ?? 0, cpu: this.backend() };
+    if (this.gpuMode === "off") return { ...base, state: "off", reason: "Forced to the CPU." };
+    if (this.gpuStarting) return { ...base, state: "starting", reason: null };
+    if (w?.gpuError) return { ...base, state: "failed", reason: w.gpuError };
+    if (this.gpuSupport && !this.gpuSupport.supported) return { ...base, state: "unavailable", reason: this.gpuSupport.reason };
+    if (!this.gpu) return { ...base, state: "not-started", reason: "Starts with the first wet stroke." };
+    if (w?.gpuActive) return { ...base, state: "active", reason: null };
+    return { ...base, state: "standby", reason: `The GPU takes over at ${this.gpuMinTiles} wet tiles (256 px).` };
+  }
+  /** The world (made on first use, at the canvas size). */
+  ensureWorld() {
+    const { width, height } = this.host.canvas();
+    if (this.world && (this.world.width !== width || this.world.height !== height)) {
+      if (this.world.laneIds().length) throw new Error("The wet world is the wrong size; dry the paint before resizing the canvas.");
+      this.dropWorld();
+    }
+    if (!this.world) this.world = this.makeWorld(width, height, this.host.paper());
+    return this.world;
+  }
+  makeWorld(width, height, paper) {
+    const world = new WetWorld(width, height, wetPaperInput(paper), { kernel: this.options.kernel, threads: this.options.threads });
+    world.setTilt(this.tilt);
+    world.gpuMinTiles = this.gpuMinTiles;
+    if (this.gpu) world.attachGpu(this.gpu);
+    else this.startGpu();
+    return world;
+  }
+  /**
+   * Whether `extend` can keep the wet paint when the canvas grows by `left` / `top` on those
+   * sides: the shift has to be whole wet tiles (256 px), and no wet stroke may be live.
+   */
+  canExtend(left2, top) {
+    return left2 % WET_TILE === 0 && top % WET_TILE === 0 && !this.driver;
+  }
+  /**
+   * Keeps the wet paint while the canvas grows to `width`×`height` by `left` / `top` on those
+   * sides (`canExtend` must hold): the world is made again at the new size with every wet layer
+   * moved by (left, top), still wet, its base and flow map with it; `paper` is the new
+   * document's paper (its grain moved with the paint). Wet settings' flow centres move too. The
+   * caller shows the layers again (`syncDisplays`) once the document is the new size.
+   */
+  extend(width, height, left2, top, paper) {
+    if (!this.canExtend(left2, top)) throw new Error("Wet paint only moves by whole 256 px tiles, between strokes.");
+    for (const [id, s] of this.settings) if (s.flow.center) this.settings.set(id, { ...s, flow: { ...s.flow, center: { x: s.flow.center.x + left2, y: s.flow.center.y + top } } });
+    const old = this.world;
+    const snap = old?.laneIds().length ? old.snapshot() : null;
+    this.dropWorld();
+    this.lastTick = null;
+    this.stepsOwed = 0;
+    if (!old || !snap) return;
+    const moved = moveWetSnapshot(snap, old, { width, height }, left2, top, (l) => {
+      const flow = this.settings.get(l.id)?.flow;
+      return {
+        base: translateSurface(l.base, left2, top),
+        ...l.light ? { light: translateSurface(l.light, left2, top) } : {},
+        flow: l.flow && flow && flow.kind !== "none" ? flowField(flow, width, height) : l.flow
+      };
+    });
+    this.world = this.makeWorld(width, height, paper);
+    this.world.restore(moved);
+  }
+  /** Whether any layer (or `layerId`) has wet paint. */
+  isWet(layerId) {
+    const w = this.world;
+    if (!w) return false;
+    if (layerId !== void 0) return w.hasLane(layerId) && w.isActive(layerId);
+    return w.laneIds().some((id) => w.isActive(id));
+  }
+  /** Layers holding a wet layer (wet or drying). */
+  wetLayerIds() {
+    return this.world?.laneIds() ?? [];
+  }
+  /** Whether a batch is running (edits wait). */
+  get busy() {
+    return Boolean(this.world?.busy);
+  }
+  /** Resolves when no batch is running. */
+  async idle() {
+    while (this.ticking) await this.ticking;
+  }
+  settingsOf(layerId, medium = "watercolor") {
+    let s = this.settings.get(layerId);
+    if (!s) {
+      s = { params: normalizeWetParams(WET_MEDIUM_PARAMS[medium], DEFAULT_WET_PARAMS), flow: { ...DEFAULT_FLOW } };
+      this.settings.set(layerId, s);
+    }
+    return s;
+  }
+  /** Puts a layer in the world (its current pixels become the base under the wet paint). */
+  ensureLane(layerId, medium) {
+    const w = this.ensureWorld();
+    if (!w.hasLane(layerId)) {
+      const base = this.host.layerSurface(layerId) ?? new TiledSurface(4, /* @__PURE__ */ new Map(), 0);
+      const s = this.settingsOf(layerId, medium);
+      w.ensureLane(layerId, { params: s.params, base, light: this.host.layerLight(layerId) });
+      const { width, height } = this.host.canvas();
+      if (s.flow.kind !== "none") w.setFlow(layerId, flowField(s.flow, width, height), s.flow.strength);
+    }
+    return w;
+  }
+  setParams(layerId, update) {
+    const s = this.settingsOf(layerId);
+    s.params = normalizeWetParams(update, s.params);
+    if (this.world?.hasLane(layerId)) this.world.setParams(layerId, s.params);
+    return { ...s.params };
+  }
+  setFlow(layerId, update) {
+    const s = this.settingsOf(layerId);
+    s.flow = normalizeFlow(update, s.flow);
+    if (this.world?.hasLane(layerId)) {
+      const { width, height } = this.host.canvas();
+      this.world.setFlow(layerId, flowField(s.flow, width, height), s.flow.strength);
+    }
+    return { ...s.flow };
+  }
+  setTilt(update) {
+    this.tilt = normalizeTilt(update, this.tilt);
+    this.world?.setTilt(this.tilt);
+    return { ...this.tilt };
+  }
+  /** The paper changed. */
+  paperChanged() {
+    this.world?.setPaper(wetPaperInput(this.host.paper()));
+  }
+  /** A layer as tools describe it. */
+  info(layerId) {
+    const s = this.settingsOf(layerId);
+    const st = this.world?.hasLane(layerId) ? this.world.stats(layerId) : null;
+    return {
+      layerId,
+      wet: Boolean(st && st.wetCells > 0),
+      wetCells: st?.wetCells ?? 0,
+      wetBounds: st?.wetBounds ?? null,
+      activeTiles: st?.activeTiles ?? 0,
+      params: { ...s.params },
+      flow: { ...s.flow }
+    };
+  }
+  backend() {
+    return this.world?.backend() ?? null;
+  }
+  /** Shows the current wet pixels (at most `maxTiles` reshaded per layer). */
+  syncDisplays(maxTiles = Infinity) {
+    const w = this.world;
+    if (!w) return [];
+    const surfaces = /* @__PURE__ */ new Map();
+    const rects = [];
+    for (const id of w.laneIds()) {
+      const d = w.display(id, maxTiles);
+      if (this.host.layerSurface(id) !== d.surface) surfaces.set(id, d.surface);
+      rects.push(...d.changed);
+    }
+    this.syncLights();
+    if (surfaces.size) this.host.updateSurfaces(surfaces, rects);
+    return rects;
+  }
+  /** Like `syncDisplays`, shading on the GPU when Engine B is active (all stale tiles at once). */
+  async syncDisplaysGpu(maxCpuTiles, lead = false) {
+    const w = this.world;
+    if (!w) return [];
+    const surfaces = /* @__PURE__ */ new Map();
+    const rects = [];
+    for (const id of w.laneIds()) {
+      const d = await w.displayGpu(id, maxCpuTiles, lead);
+      if (!w.hasLane(id)) continue;
+      if (this.host.layerSurface(id) !== d.surface) surfaces.set(id, d.surface);
+      rects.push(...d.changed);
+    }
+    this.syncLights();
+    if (surfaces.size) this.host.updateSurfaces(surfaces, rects);
+    return rects;
+  }
+  /** Shows each wet layer's live light paint (the light under it with the wet light shaded in). */
+  syncLights() {
+    const w = this.world;
+    if (!w) return;
+    const lights = /* @__PURE__ */ new Map();
+    for (const id of w.laneIds()) {
+      const l = w.lightDisplay(id);
+      if (l && this.host.layerLight(id) !== l) lights.set(id, l);
+    }
+    if (lights.size) this.host.updateLights(lights);
+  }
+  /** Drops the wet layers whose paint has all dried (they become ordinary pixel layers). */
+  retireDry() {
+    const w = this.world;
+    if (!w) return;
+    for (const id of w.laneIds()) {
+      if (w.isActive(id) || this.driver?.init.laneId === id) continue;
+      const base = w.getBase(id);
+      const light = w.isLit(id) ? w.getLight(id) : null;
+      w.removeLane(id);
+      if (light && this.host.layerLight(id) !== light) this.host.updateLights(/* @__PURE__ */ new Map([[id, light]]));
+      this.host.updateSurfaces(/* @__PURE__ */ new Map([[id, base]]), []);
+    }
+  }
+  /**
+   * Advances time by the wall clock (`now` in ms, e.g. `performance.now()`): `speed` steps per
+   * second, at most `maxSteps` per call. Call it every frame; it does nothing while paused or dry.
+   * Resolves when the steps are done and the display is up to date.
+   */
+  tick(now, maxSteps = 8) {
+    if (this.ticking) {
+      this.leadFrame(now);
+      return this.ticking;
+    }
+    if (this.displaying) return this.displaying;
+    const last = this.lastTick;
+    this.lastTick = now;
+    const w = this.world;
+    if (!w || this.paused || last === null) {
+      this.flushDriver();
+      return Promise.resolve();
+    }
+    if (!w.isActive()) {
+      this.flushDriver();
+      this.retireDry();
+      return Promise.resolve();
+    }
+    const lead = w.gpuActive && !this.driver;
+    w.gpuLeadMode = lead;
+    const most = lead ? Math.max(maxSteps, GPU_LEAD) : maxSteps;
+    this.stepsOwed = Math.min(most * 4, this.stepsOwed + (now - last) / 1e3 * this.speed);
+    const n = Math.min(most, Math.floor(this.stepsOwed));
+    this.leadAt = now;
+    if (n < 1) {
+      this.flushDriver();
+      return Promise.resolve();
+    }
+    this.stepsOwed -= n;
+    const run = (async () => {
+      try {
+        await w.step(n);
+      } finally {
+        this.ticking = null;
+      }
+      this.flushDriver();
+      if (w.gpuActive) {
+        const shading = this.syncDisplaysGpu(DISPLAY_TILES_PER_TICK).then(() => void 0);
+        this.displaying = shading;
+        try {
+          await shading;
+        } finally {
+          this.displaying = null;
+        }
+      } else this.syncDisplays(DISPLAY_TILES_PER_TICK);
+      this.retireDry();
+      this.host.changed();
+    })();
+    this.ticking = run;
+    return run;
+  }
+  /** Lead mode: steps the GPU on by the time since the last frame (within the running batch) and shows it. */
+  leadFrame(now) {
+    const w = this.world;
+    if (!w || this.displaying || this.driver || !w.gpuLeading) return;
+    const k = Math.max(1, Math.round((now - this.leadAt) / 1e3 * this.speed));
+    if (!w.gpuLead(k)) return;
+    this.leadAt = now;
+    const shading = this.syncDisplaysGpu(0, true).then(() => this.host.changed());
+    this.displaying = shading;
+    void shading.finally(() => {
+      if (this.displaying === shading) this.displaying = null;
+    });
+  }
+  flushDriver() {
+    const d = this.driver;
+    if (!d || !this.world) return;
+    const rects = d.flush();
+    if (rects.length) this.syncDisplays(DISPLAY_TILES_PER_TICK);
+    if (d.done) this.onDriverDone?.(d);
+  }
+  /** Called when a live stroke that ended mid-batch has finished applying. */
+  onDriverDone = null;
+  /** Steps `steps` times now (agents, tests). Returns the steps run. */
+  async advance(steps) {
+    await this.idle();
+    const w = this.world;
+    if (!w) return 0;
+    await w.ready;
+    await this.idle();
+    const start = w.clock;
+    const n = Math.max(0, Math.floor(steps));
+    const job = (async () => {
+      try {
+        await w.step(n);
+      } finally {
+        this.ticking = null;
+      }
+    })();
+    this.ticking = job;
+    await job;
+    if (w.gpuActive) await this.syncDisplaysGpu(Infinity);
+    else this.syncDisplays();
+    this.retireDry();
+    return w.clock - start;
+  }
+  /**
+   * Dries at once (everything settles where it is), on one layer or all, optionally only in a
+   * rectangle. Returns the layers and rectangles that dried.
+   */
+  dry(layerId, rect) {
+    const w = this.world;
+    if (!w) return [];
+    const ids = layerId !== void 0 ? w.hasLane(layerId) ? [layerId] : [] : w.laneIds();
+    const out = [];
+    for (const id of ids) out.push({ layerId: id, bounds: w.dry(id, rect) });
+    this.syncDisplays();
+    this.retireDry();
+    return out;
+  }
+  /** The layer's light paint with all its wet paint dried (`null` without a wet layer or light), without changing anything. */
+  bakedLight(layerId) {
+    const w = this.world;
+    if (!w?.hasLane(layerId) || !w.isLit(layerId)) return null;
+    return w.bakedLight(layerId);
+  }
+  /** The layer's pixels with all its wet paint dried (deterministic), without changing anything. */
+  bakedSurface(layerId) {
+    const w = this.world;
+    if (!w?.hasLane(layerId)) return null;
+    return w.bakedSurface(layerId);
+  }
+  /** A snapshot of the world for undo (`null` when there is none). */
+  snapshot() {
+    const w = this.world;
+    if (!w || !w.laneIds().length) return null;
+    return w.snapshot();
+  }
+  /** Puts a snapshot back (`null`: no wet layers). Returns the layer surfaces it implies. */
+  restore(snap) {
+    if (!snap) {
+      if (this.world) for (const id of this.world.laneIds()) this.world.removeLane(id);
+      return;
+    }
+    const { width, height } = this.host.canvas();
+    if (this.world && (this.world.width !== width || this.world.height !== height)) this.dropWorld();
+    this.ensureWorld().restore(snap);
+    this.syncDisplays();
+  }
+  dropWorld() {
+    this.world?.destroy();
+    this.world = null;
+    this.driver = null;
+  }
+  /** Forgets everything wet (a new canvas, a resize, opening a document). */
+  reset() {
+    this.world?.destroy();
+    this.world = null;
+    this.driver = null;
+    this.settings.clear();
+    this.lastTick = null;
+    this.stepsOwed = 0;
+  }
+  /** Water overlay tiles (RGBA) over a document rectangle, for the view. */
+  waterOverlay(rect) {
+    const w = this.world;
+    if (!w) return [];
+    const out = [];
+    const tx0 = Math.max(0, Math.floor(rect.x / TILE));
+    const ty0 = Math.max(0, Math.floor(rect.y / TILE));
+    const tx1 = Math.floor((rect.x + rect.width - 1) / TILE);
+    const ty1 = Math.floor((rect.y + rect.height - 1) / TILE);
+    for (let ty = ty0; ty <= ty1; ty++)
+      for (let tx = tx0; tx <= tx1; tx++) {
+        let merged = null;
+        for (const id of w.laneIds()) {
+          const t = w.waterOverlay(id, tx, ty);
+          if (!t) continue;
+          if (!merged) merged = t;
+          else for (let i = 3; i < t.length; i += 4) merged[i] = Math.max(merged[i], t[i]);
+        }
+        if (merged) out.push({ tx, ty, data: merged });
+      }
+    return out;
+  }
+  destroy() {
+    this.world?.destroy();
+    this.world = null;
+    this.gpu?.destroy();
+    this.gpu = null;
+  }
+};
+function wetPigmentOf(hex, body) {
+  const [r, g, b] = hexToRgb8(hex);
+  return Array.from(pigmentOf([r / 255, g / 255, b / 255], body));
+}
+
+// src/vector/brushstrokeMedia.ts
+var VECTOR_WET_STEPS = 120;
+function vectorMediaEngine(brush) {
+  if (brush.engine === "wet") return brush.wet.tool === "paint" ? "wet" : null;
+  return brush.engine === "mixer" || brush.engine === "smudge" || brush.engine === "blender" ? brush.engine : null;
+}
+var usesVectorBackdrop = (engine) => engine === "mixer" || engine === "smudge" || engine === "blender";
+var finite2 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
+function place(input, brush, options, pad = 0) {
+  const samples = brushstrokeSamples(input);
+  if (!samples.length) return null;
+  for (const s of samples) if (!finite2(s.x) || !finite2(s.y)) throw new Error("Brushstroke samples need finite x and y.");
+  let scale3 = finite2(options.scale) && options.scale > 0 ? Math.min(BRUSHSTROKE_MAX_SCALE, Math.max(BRUSHSTROKE_MIN_SCALE, options.scale)) : 1;
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const s of samples) {
+    x0 = Math.min(x0, s.x);
+    y0 = Math.min(y0, s.y);
+    x1 = Math.max(x1, s.x);
+    y1 = Math.max(y1, s.y);
+  }
+  const reach = brush.tip.size * (1 + 1.5 * brush.dynamics.tiltSize) / 2 + 2 + pad;
+  const maxPixels = finite2(options.maxPixels) && options.maxPixels > 0 ? options.maxPixels : 4096 * 4096;
+  const area = (x1 - x0 + 2 * reach) * (y1 - y0 + 2 * reach);
+  if (area * scale3 * scale3 > maxPixels) scale3 = Math.max(BRUSHSTROKE_MIN_SCALE, Math.sqrt(maxPixels / area));
+  const rect = { x: Math.floor((x0 - reach) * scale3), y: Math.floor((y0 - reach) * scale3), width: 0, height: 0 };
+  rect.width = Math.max(1, Math.ceil((x1 + reach) * scale3) - rect.x);
+  rect.height = Math.max(1, Math.ceil((y1 + reach) * scale3) - rect.y);
+  const points = samples.map((s) => ({ ...s, x: s.x * scale3 - rect.x, y: s.y * scale3 - rect.y }));
+  if (options.closed && points.length > 2) points.push({ ...points[0] });
+  const sized = { ...brush, pressureSmoothing: 0, tip: { ...brush.tip, size: brush.tip.size * scale3, smoothing: 0 } };
+  const [r, g, b, a] = options.color;
+  const hex = "#" + [r, g, b].map((v2) => Math.round(Math.min(255, Math.max(0, v2))).toString(16).padStart(2, "0")).join("");
+  const source = options.paint ?? null;
+  const paint = source?.type === "gradient" ? resolvePaintGradient(scalePaintGradient(source, scale3), { paint: hex, secondary: "#ffffff" }) : null;
+  const color2 = source?.type === "color" ? hexRgb(source.color) : [r / 255, g / 255, b / 255];
+  return { points, brush: sized, rect, scale: scale3, color: color2, alpha: Math.min(1, Math.max(0, a / 255)), paint };
+}
+function hexRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
+var EMPTY = { image: { width: 0, height: 0, data: new Uint8ClampedArray(0) }, bounds: null, scale: 1, dabs: 0 };
+function cropped(data, placed, dabs, keep) {
+  const { width: w, height: h } = placed.rect;
+  let cx0 = w, cy0 = h, cx1 = -1, cy1 = -1;
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = (y * w + x) * 4;
+      if (keep ? !keep(i) : data[i + 3] === 0) continue;
+      if (x < cx0) cx0 = x;
+      if (x > cx1) cx1 = x;
+      if (y < cy0) cy0 = y;
+      if (y > cy1) cy1 = y;
+    }
+  }
+  if (cx1 < 0) return { ...EMPTY, scale: placed.scale, dabs };
+  const cw = cx1 - cx0 + 1;
+  const ch = cy1 - cy0 + 1;
+  const out = new Uint8ClampedArray(cw * ch * 4);
+  for (let y = 0; y < ch; y++) {
+    for (let x = 0; x < cw; x++) {
+      const i = ((y + cy0) * w + x + cx0) * 4;
+      if (keep && !keep(i)) continue;
+      const o = (y * cw + x) * 4;
+      out[o] = data[i];
+      out[o + 1] = data[i + 1];
+      out[o + 2] = data[i + 2];
+      out[o + 3] = placed.alpha < 1 ? Math.round(data[i + 3] * placed.alpha) : data[i + 3];
+    }
+  }
+  const s = placed.scale;
+  return { image: { width: cw, height: ch, data: out }, bounds: { x: (placed.rect.x + cx0) / s, y: (placed.rect.y + cy0) / s, width: cw / s, height: ch / s }, scale: s, dabs };
+}
+var WetBrushstrokeJob = class {
+  constructor(input, brush, options, steps = VECTOR_WET_STEPS) {
+    this.steps = steps;
+    if (vectorMediaEngine(brush) !== "wet") throw new Error(`'${brush.name}' is not a wet paint brush.`);
+    this.placed = place(input, brush, options, brush.tip.size * 0.25);
+    if (!this.placed) {
+      this.world = null;
+      this.dabs = 0;
+      this.final = EMPTY;
+      return;
+    }
+    const { rect, points } = this.placed;
+    this.world = new WetWorld(rect.width, rect.height, wetPaperInput(DEFAULT_PAPER), { kernel: "typescript", threads: 0 });
+    const medium = this.placed.brush.wet.medium ?? "watercolor";
+    this.world.ensureLane("s", { params: WET_MEDIUM_PARAMS[medium] ?? {} });
+    const color2 = this.placed.color;
+    const driver = new WetStrokeDriver({
+      world: this.world,
+      laneId: "s",
+      brush: this.placed.brush,
+      color: color2,
+      load: { reservoir: [...color2], amount: 1, pickup: null },
+      grain: null,
+      paperDepth: 0,
+      paperColor: [255, 255, 255],
+      seed: options.seed ?? 0,
+      copies: [],
+      paint: this.placed.paint
+    });
+    driver.push(points);
+    driver.finish();
+    this.dabs = driver.dabCount;
+  }
+  steps;
+  world;
+  placed;
+  dabs;
+  done = 0;
+  final = null;
+  /** Steps run so far. */
+  get progress() {
+    return this.done;
+  }
+  get finished() {
+    return this.final !== null;
+  }
+  /** Runs steps until `budgetMs` has passed (at least one) or all have run. Returns whether it is finished. */
+  run(budgetMs = Infinity) {
+    if (this.final || !this.world) return true;
+    const start = Date.now();
+    while (this.done < this.steps) {
+      this.world.stepSync(1);
+      this.done++;
+      if (Date.now() - start >= budgetMs) break;
+    }
+    if (this.done >= this.steps) {
+      this.final = this.bake();
+      this.destroy();
+    }
+    return this.final !== null;
+  }
+  /** The paint dried where it is now (step 0: as laid). */
+  image() {
+    return this.final ?? this.bake();
+  }
+  /** The settled image: runs the remaining steps now. */
+  settled() {
+    this.run();
+    return this.final;
+  }
+  destroy() {
+    this.world?.destroy();
+  }
+  bake() {
+    if (!this.world || !this.placed) return EMPTY;
+    const { width, height } = this.placed.rect;
+    const data = readRegion(this.world.bakedSurface("s"), { x: 0, y: 0, width, height });
+    return cropped(data, this.placed, this.dabs);
+  }
+};
+function renderWetBrushstroke(input, brush, options) {
+  return new WetBrushstrokeJob(input, brush, options).settled();
+}
+function vectorBackdropRect(input, brush, options) {
+  const placed = place(input, brush, options);
+  return placed ? { rect: placed.rect, scale: placed.scale } : null;
+}
+function renderBackdropBrushstroke(input, brush, options) {
+  const engine = vectorMediaEngine(brush);
+  if (!usesVectorBackdrop(engine)) throw new Error(`'${brush.name}' is not a Mixer Brush, smudge or blender.`);
+  const placed = place(input, brush, options);
+  if (!placed) return EMPTY;
+  const { rect } = placed;
+  const area = { x: 0, y: 0, width: rect.width, height: rect.height };
+  const before = options.backdrop ? options.backdrop(rect, placed.scale) : new Uint8ClampedArray(rect.width * rect.height * 4);
+  if (before.length !== rect.width * rect.height * 4) throw new Error(`The backdrop must be ${rect.width}\xD7${rect.height} RGBA pixels.`);
+  const cached = options.cache?.(before);
+  const hit = cached?.get();
+  if (hit) return hit;
+  const base = writeRegion(emptySurface(4), area, before);
+  const live = /* @__PURE__ */ new Map();
+  const target = {
+    offset: { x: 0, y: 0 },
+    lockTransparency: false,
+    selection: null,
+    readTile: (tx, ty) => live.get(tileKey(tx, ty)) ?? base.tiles.get(tileKey(tx, ty))?.data ?? null,
+    writeTile: (tx, ty) => {
+      const key = tileKey(tx, ty);
+      let t = live.get(key);
+      if (!t) live.set(key, t = base.tiles.get(key) ? new Uint8ClampedArray(base.tiles.get(key).data) : new Uint8ClampedArray(TILE * TILE * 4));
+      return t;
+    }
+  };
+  const color2 = placed.color;
+  const load = placed.brush.engine === "mixer" && placed.brush.loadsColor ? loadMixer(EMPTY_MIXER_LOAD, color2) : EMPTY_MIXER_LOAD;
+  const stroke = new PaintDabStroke(placed.brush, { target, color: color2, secondary: [1, 1, 1], load, grain: null, paperDepth: 0, seed: options.seed ?? 0, paint: placed.paint });
+  stroke.push(placed.points);
+  stroke.finish();
+  const after = new Uint8ClampedArray(rect.width * rect.height * 4);
+  const tiles = new Map(base.tiles);
+  for (const [key, data] of live) tiles.set(key, { data, uniform: null });
+  readRegion(new TiledSurface(4, tiles), area, after);
+  const result = cropped(after, placed, stroke.dabCount, (i) => after[i] !== before[i] || after[i + 1] !== before[i + 1] || after[i + 2] !== before[i + 2] || after[i + 3] !== before[i + 3]);
+  cached?.set(result);
+  return result;
+}
+
 // src/vector/brushstroke.ts
 var VECTOR_BRUSHSTROKE_SCALE = 2;
 var PRESETS = listPresets(VECTOR_PROFILE).map((spec) => BUILTIN_BRUSHES.find((b) => b.id === spec.id));
 function admitted(spec) {
   try {
     const brush = normalizeBrushSpec(spec);
-    return checkBrush(brush, VECTOR_PROFILE).ok && isBrushstrokeBrush(resolveBrush(brush)) ? brush : null;
+    return checkBrush(brush, VECTOR_PROFILE).ok && isVectorBrushstrokeEngine(resolveBrush(brush)) ? brush : null;
   } catch {
     return null;
   }
 }
+function isVectorBrushstrokeEngine(brush) {
+  return brush.engine === "dab" && isBrushstrokeBrush(brush) || vectorMediaEngine(brush) !== null;
+}
 function vectorBrushstrokeBrushes(user = []) {
   const out = [...PRESETS];
   for (const raw of user) {
@@ -2567,10 +4560,10 @@ function vectorBrushstrokeBrushError(id, user = []) {
   if (vectorBrushstrokeBrush(id)) return null;
   const saved = user.find((b) => b.id === id);
   const ids = vectorBrushstrokeBrushes(user).map((b) => b.id);
-  const reasons = (b) => checkBrush(b, VECTOR_PROFILE).issues.filter((i) => i.severity === "error").map((i) => `${i.reason} ${i.fix}`).join(" ") || "it is not a dry dab brush.";
+  const reasons = (b) => checkBrush(b, VECTOR_PROFILE).issues.filter((i) => i.severity === "error").map((i) => `${i.reason} ${i.fix}`).join(" ") || "its engine does not paint brushstrokes.";
   if (saved) return admitted(saved) ? null : `Brush "${id}" (${saved.name}) can't paint a brushstroke: ${reasons(saved)} Use one of: ${ids.join(", ")}.`;
-  const preset = BRUSH_PRESETS.find((b) => b.id === id);
-  if (preset) return `Brush "${id}" (${preset.name}) can't paint a brushstroke: ${reasons(preset)} Use one of: ${ids.join(", ")}.`;
+  const preset2 = BRUSH_PRESETS.find((b) => b.id === id);
+  if (preset2) return `Brush "${id}" (${preset2.name}) can't paint a brushstroke: ${reasons(preset2)} Use one of: ${ids.join(", ")}.`;
   return `Unknown brush "${id}". ${closest(id, ids)}Use one of: ${ids.join(", ")} (vector.listBrushes lists them).`;
 }
 function vectorBrushstrokeDefaultColour(id, user = [], scheme = "light") {
@@ -2594,6 +4587,8 @@ function sanitizeVectorBrushstroke(value, user = []) {
   }
   const seed = sanitizeSeed(r.seed);
   if (seed !== void 0) out.seed = seed;
+  const paint = readVectorBrushstrokePaint(r.paint);
+  if (paint) out.paint = paint;
   if (r.paper === null) out.paper = null;
   else {
     const paper = sanitizeVectorBrushstrokePaper(r.paper);
@@ -2601,9 +4596,24 @@ function sanitizeVectorBrushstroke(value, user = []) {
   }
   return out;
 }
+var TIMED_MAPPINGS = ["velocity", "time"];
+function vectorBrushstrokePaintError(paint) {
+  let source;
+  try {
+    source = parsePaintSource(paint, "paint");
+  } catch (e) {
+    return e.message;
+  }
+  if (source.type === "gradient" && TIMED_MAPPINGS.includes(source.map.by)) return `paint.map.by "${source.map.by}" needs timed samples, which vector paths do not have; use distance, pressure, tilt, direction, across-tip or random.`;
+  return null;
+}
+function readVectorBrushstrokePaint(value) {
+  if (value === void 0 || value === null || vectorBrushstrokePaintError(value)) return null;
+  return readPaintSource(value);
+}
 var VECTOR_BRUSHSTROKE_MAX_SEED = 2147483647;
-var finite2 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
-var sanitizeSeed = (v2) => finite2(v2) ? Math.min(VECTOR_BRUSHSTROKE_MAX_SEED, Math.max(0, Math.round(v2))) : void 0;
+var finite3 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
+var sanitizeSeed = (v2) => finite3(v2) ? Math.min(VECTOR_BRUSHSTROKE_MAX_SEED, Math.max(0, Math.round(v2))) : void 0;
 function sanitizeVectorBrushstrokePaper(value) {
   if (!value || typeof value !== "object") return null;
   const r = value;
@@ -2611,8 +4621,8 @@ function sanitizeVectorBrushstrokePaper(value) {
   if (typeof r.pattern === "string" && GRAIN_PATTERNS.includes(r.pattern)) out.pattern = r.pattern;
   const seed = sanitizeSeed(r.seed);
   if (seed !== void 0) out.seed = seed;
-  if (finite2(r.scale) && r.scale > 0) out.scale = Math.min(8, Math.max(0.25, r.scale));
-  if (finite2(r.depth)) out.depth = Math.min(1, Math.max(0, r.depth));
+  if (finite3(r.scale) && r.scale > 0) out.scale = Math.min(8, Math.max(0.25, r.scale));
+  if (finite3(r.depth)) out.depth = Math.min(1, Math.max(0, r.depth));
   return Object.keys(out).length ? out : null;
 }
 function vectorBrushstrokeCharacterError(brush) {
@@ -2625,8 +4635,8 @@ function vectorBrushstrokeCharacterError(brush) {
   if (extra.length) return `paper has unknown field ${extra.map((k) => `"${k}"`).join(", ")}: use pattern, seed, scale, depth.`;
   if (r.pattern !== void 0 && !GRAIN_PATTERNS.includes(r.pattern)) return `Unknown paper pattern "${String(r.pattern)}": use one of ${GRAIN_PATTERNS.join(", ")}.`;
   if (r.seed !== void 0 && !(Number.isInteger(r.seed) && r.seed >= 0 && r.seed <= VECTOR_BRUSHSTROKE_MAX_SEED)) return `paper.seed must be an integer from 0 to ${VECTOR_BRUSHSTROKE_MAX_SEED}.`;
-  if (r.scale !== void 0 && !(finite2(r.scale) && r.scale >= 0.25 && r.scale <= 8)) return "paper.scale must be from 0.25 to 8 (1 is the pattern's natural size).";
-  if (r.depth !== void 0 && !(finite2(r.depth) && r.depth >= 0 && r.depth <= 1)) return "paper.depth must be from 0 to 1.";
+  if (r.scale !== void 0 && !(finite3(r.scale) && r.scale >= 0.25 && r.scale <= 8)) return "paper.scale must be from 0.25 to 8 (1 is the pattern's natural size).";
+  if (r.depth !== void 0 && !(finite3(r.depth) && r.depth >= 0 && r.depth <= 1)) return "paper.depth must be from 0 to 1.";
   return null;
 }
 function randomVectorBrushstrokeSeed() {
@@ -2639,29 +4649,240 @@ function vectorBrushstrokeReach(layer) {
   if (!isVectorBrushstrokeLayer(layer)) return 0;
   return (layer.brush.size ?? vectorBrushstrokeBrushOf(layer.brush).tip.size) / 2;
 }
+var backdropSource = null;
+function setVectorBackdropSource(source) {
+  backdropSource = source;
+}
+var hex22 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+function gradientPaint(g, map) {
+  const stops = sortedVectorGradientStops(g);
+  const exact2 = stops.length >= 2 && stops.length <= 16 && !g.smoothness && (g.interpolation ?? "srgb") === "srgb" && stops.every((s) => parseVectorColor(s.color));
+  if (exact2) {
+    return {
+      type: "gradient",
+      space: "srgb",
+      map,
+      stops: stops.map((s) => {
+        const c = parseVectorColor(s.color);
+        const opacity = Math.min(1, Math.max(0, (s.opacity ?? 1) * c[3]));
+        const midpoint = s.midpoint !== void 0 && s.midpoint !== 0.5 ? Math.min(0.95, Math.max(0.05, s.midpoint)) : void 0;
+        return { offset: Math.min(1, Math.max(0, s.offset)), color: `#${hex22(c[0])}${hex22(c[1])}${hex22(c[2])}`, ...opacity < 1 ? { opacity } : {}, ...midpoint !== void 0 ? { midpoint } : {} };
+      })
+    };
+  }
+  const ramp = vectorGradientRamp(g);
+  const n = 16;
+  return {
+    type: "gradient",
+    space: "srgb",
+    map,
+    stops: Array.from({ length: n }, (_, i) => {
+      const t = i / (n - 1);
+      const c = ramp ? ramp.sample(t) : [0, 0, 0, 1];
+      return { offset: t, color: `#${hex22(c[0])}${hex22(c[1])}${hex22(c[2])}`, ...c[3] < 1 ? { opacity: Math.max(0, c[3]) } : {} };
+    })
+  };
+}
+var REPEAT = { pad: "clamp", repeat: "repeat", reflect: "mirror" };
+function strokePaintOf(node, layer, brush, length2) {
+  const engine = vectorMediaEngine(brush);
+  if (engine === "smudge" || engine === "blender") return { color: [0, 0, 0, 255], paint: null, within: null };
+  const solid = vectorPaintSolid(layer.paint) ?? "#000000";
+  const c = parseVectorColor(solid) ?? [0, 0, 0, 1];
+  const color2 = [c[0] * 255, c[1] * 255, c[2] * 255, c[3] * 255].map(Math.round);
+  if (layer.brush.paint) return { color: color2, paint: layer.brush.paint, within: null };
+  const g = layer.paint;
+  if (isVectorGradient(g) && g.stops?.length) {
+    const mode = g.strokeMode ?? "within";
+    if (mode === "along") return { color: [color2[0], color2[1], color2[2], 255], paint: gradientPaint(g, { by: "distance", length: Math.max(1, length2), repeat: REPEAT[g.spread ?? "pad"], unit: "px" }), within: null };
+    if (mode === "across") return { color: [color2[0], color2[1], color2[2], 255], paint: gradientPaint(g, { by: "across-tip" }), within: null };
+    if (engine === "mixer") return { color: [color2[0], color2[1], color2[2], 255], paint: gradientPaint(g, { by: "distance", length: Math.max(1, length2), repeat: REPEAT[g.spread ?? "pad"] }), within: null };
+    const b = bezierPathBounds(subpathsToBezier(node.subpaths));
+    return { color: [255, 255, 255, 255], paint: null, within: { gradient: g, bounds: b ? { x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY } : null } };
+  }
+  if (brush.paint && !TIMED_MAPPINGS.includes(brush.paint.map.by)) return { color: color2, paint: brush.paint, within: null };
+  return { color: color2, paint: null, within: null };
+}
+function recoloured(stroke, within) {
+  if (!stroke.bounds) return stroke;
+  const ramp = vectorGradientRamp(within.gradient);
+  if (!ramp) return stroke;
+  const lut = Array.from({ length: 256 }, (_, i) => ramp.sample(i / 255));
+  const { width, height, data } = stroke.image;
+  const out = new Uint8ClampedArray(data);
+  const { x: bx, y: by } = stroke.bounds;
+  const s = stroke.scale;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const i = (y * width + x) * 4;
+      if (!out[i + 3]) continue;
+      const t = vectorGradientTAt(within.gradient, within.bounds, { x: bx + (x + 0.5) / s, y: by + (y + 0.5) / s });
+      const col = lut[Math.round(Math.min(1, Math.max(0, t)) * 255)];
+      out[i] = Math.round(out[i] * col[0]);
+      out[i + 1] = Math.round(out[i + 1] * col[1]);
+      out[i + 2] = Math.round(out[i + 2] * col[2]);
+      out[i + 3] = Math.round(out[i + 3] * col[3]);
+    }
+  }
+  return { ...stroke, image: { width, height, data: out } };
+}
+function hash(s, h = 2166136261) {
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h;
+}
+function hashBytes(b, h = 2166136261) {
+  for (let i = 0; i < b.length; i++) {
+    h ^= b[i];
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h;
+}
+function mediaKey(input, brush, options) {
+  const path = JSON.stringify(input);
+  return `${hash(path).toString(16)}:${path.length}:${hash(JSON.stringify([brush, options])).toString(16)}`;
+}
+var Lru = class {
+  constructor(capacity) {
+    this.capacity = capacity;
+  }
+  capacity;
+  map = /* @__PURE__ */ new Map();
+  get(key) {
+    const v2 = this.map.get(key);
+    if (v2 !== void 0) {
+      this.map.delete(key);
+      this.map.set(key, v2);
+    }
+    return v2;
+  }
+  has(key) {
+    return this.map.has(key);
+  }
+  set(key, value) {
+    this.map.delete(key);
+    this.map.set(key, value);
+    while (this.map.size > this.capacity) this.map.delete(this.map.keys().next().value);
+  }
+};
+var WET_SLICE_MS = 12;
+var wetSettled = new Lru(128);
+var wetInstant = /* @__PURE__ */ new Map();
+var wetJobs = /* @__PURE__ */ new Map();
+var settleListeners = /* @__PURE__ */ new Set();
+var wetTimer = null;
+var wetGeneration = 0;
+function wetFinished(key, job) {
+  wetGeneration++;
+  wetSettled.set(key, job.image());
+  wetJobs.delete(key);
+  wetInstant.delete(key);
+}
+function notifySettled() {
+  for (const fn of [...settleListeners]) fn();
+}
+function scheduleWet() {
+  if (wetTimer || !wetJobs.size) return;
+  wetTimer = setTimeout(() => {
+    wetTimer = null;
+    const first = wetJobs.entries().next().value;
+    if (first && first[1].run(WET_SLICE_MS)) {
+      wetFinished(first[0], first[1]);
+      notifySettled();
+    }
+    scheduleWet();
+  }, 0);
+}
+function onVectorBrushstrokesSettled(listener) {
+  settleListeners.add(listener);
+  return () => settleListeners.delete(listener);
+}
+function vectorBrushstrokesSettling() {
+  return wetJobs.size;
+}
+function settleVectorBrushstrokes() {
+  const n = wetJobs.size;
+  if (!n) return 0;
+  for (const [key, job] of [...wetJobs]) {
+    job.run();
+    wetFinished(key, job);
+  }
+  notifySettled();
+  return n;
+}
+function wetImage(input, brush, options, settle, pending) {
+  const key = mediaKey(input, brush, options);
+  const done = wetSettled.get(key);
+  if (done) return done;
+  let job = wetJobs.get(key);
+  if (settle === "now") {
+    job ??= new WetBrushstrokeJob(input, brush, options);
+    job.run();
+    wetFinished(key, job);
+    return wetSettled.get(key);
+  }
+  if (!job) {
+    job = new WetBrushstrokeJob(input, brush, options);
+    wetJobs.set(key, job);
+    wetInstant.set(key, job.image());
+    scheduleWet();
+  }
+  pending.push(key);
+  return wetInstant.get(key) ?? job.image();
+}
 var cache = new BrushstrokeCache(256);
+var backdropResults = new Lru(64);
 var urls = /* @__PURE__ */ new WeakMap();
 var layerCache = /* @__PURE__ */ new WeakMap();
-function vectorBrushstrokeImages(node, layer) {
+var sameDeps = (a, b) => a === b || !!a && !!b && a.length === b.length && a.every((v2, i) => v2 === b[i]);
+function vectorBrushstrokeImages(node, layer, context = {}) {
   if (!isVectorBrushstrokeLayer(layer)) return [];
+  const preset2 = vectorBrushstrokeBrushOf(layer.brush);
+  const engine = vectorMediaEngine(preset2);
+  const settle = context.settle ?? "async";
+  const document2 = context.document ?? null;
+  const index = (node.strokes ?? []).indexOf(layer);
+  const source = usesVectorBackdrop(engine) && backdropSource ? backdropSource(document2, node, Math.max(0, index), settle) : null;
+  const deps = source ? [...source.deps, wetGeneration] : null;
   let byLayer = layerCache.get(node);
   const hit = byLayer?.get(layer);
-  if (hit) return hit;
-  const preset = vectorBrushstrokeBrushOf(layer.brush);
-  const brush = layer.brush.size ? { ...preset, tip: { ...preset.tip, size: layer.brush.size } } : preset;
-  const solid = vectorPaintSolid(layer.paint) ?? "#000000";
-  const c = parseVectorColor(solid) ?? [0, 0, 0, 1];
-  const color2 = [c[0] * 255, c[1] * 255, c[2] * 255, c[3] * 255].map(Math.round);
+  const stale = hit && (hit.pending.length && hit.pending.some((k) => wetSettled.has(k)) || settle === "now" && !hit.settled);
+  if (hit && sameDeps(hit.deps, deps) && !stale) return hit.images;
+  const brush = layer.brush.size ? { ...preset2, tip: { ...preset2.tip, size: layer.brush.size } } : preset2;
   const { seed, paper } = layer.brush;
   const character = seed !== void 0 ? { character: { seed, origin: { x: 0, y: 0 }, unit: 1, ...paper !== void 0 ? { paper } : {} } } : {};
   const out = [];
+  const pending = [];
   for (const sp of node.subpaths) {
     if (sp.anchors.length < 2) continue;
     for (const contour of pathToContours(subpathsToBezier([sp]))) {
       const ring = flattenChain(closeContour(contour, contour.closed), 0.25);
       if (contour.closed && ring.length > 2) ring.push(ring[0]);
       if (ring.length < 2) continue;
-      const stroke = cache.render({ points: ring.map(([x, y]) => ({ x, y })), ...layer.brush.pressure ? { pressure: layer.brush.pressure } : {} }, brush, { scale: VECTOR_BRUSHSTROKE_SCALE, color: color2, maxPixels: 2048 * 2048, ...character });
+      let length2 = 0;
+      for (let i = 1; i < ring.length; i++) length2 += Math.hypot(ring[i][0] - ring[i - 1][0], ring[i][1] - ring[i - 1][1]);
+      const input = { points: ring.map(([x, y]) => ({ x, y })), ...layer.brush.pressure ? { pressure: layer.brush.pressure } : {} };
+      const sp2 = strokePaintOf(node, layer, brush, length2);
+      const options = { scale: VECTOR_BRUSHSTROKE_SCALE, color: sp2.color, paint: sp2.paint, seed: seed ?? 0, maxPixels: 2048 * 2048 };
+      let stroke;
+      if (engine === "wet") stroke = wetImage(input, brush, { ...options, maxPixels: 1024 * 1024 }, settle, pending);
+      else if (engine) {
+        const key = mediaKey(input, brush, options);
+        stroke = renderBackdropBrushstroke(input, brush, {
+          ...options,
+          backdrop: source?.backdrop ?? null,
+          cache: (bytes) => {
+            const k = `${key}:${hashBytes(bytes).toString(16)}`;
+            return { get: () => backdropResults.get(k), set: (img) => backdropResults.set(k, img) };
+          }
+        });
+      } else {
+        const { paint, ...rest } = options;
+        stroke = cache.render(input, brush, { ...rest, ...paint ? { paint } : {}, ...character });
+      }
+      if (sp2.within) stroke = recoloured(stroke, sp2.within);
       if (!stroke.bounds) continue;
       let href = urls.get(stroke);
       if (!href) urls.set(stroke, href = brushstrokeDataUrl(stroke));
@@ -2669,7 +4890,7 @@ function vectorBrushstrokeImages(node, layer) {
     }
   }
   if (!byLayer) layerCache.set(node, byLayer = /* @__PURE__ */ new Map());
-  byLayer.set(layer, out);
+  byLayer.set(layer, { images: out, deps, pending, settled: settle === "now" || !pending.length && !deps });
   return out;
 }
 
@@ -2964,13 +5185,13 @@ function subsOf(path) {
   return pathToContours(path).map((c) => ({ segs: closeContour(c).filter((s) => !degenerate(s)).map(raise), closed: c.closed })).filter((s) => s.segs.length > 0);
 }
 var subsToPath = (subs) => contoursToPath(subs.map((s) => ({ segments: s.segs, closed: s.closed })));
-var unit2 = (x, y) => {
+var unit3 = (x, y) => {
   const l = Math.hypot(x, y);
   return l > 1e-12 && Number.isFinite(l) ? [x / l, y / l] : null;
 };
 function startTangent(s) {
   for (let i = 1; i < s.length; i++) {
-    const u = unit2(s[i][0] - s[0][0], s[i][1] - s[0][1]);
+    const u = unit3(s[i][0] - s[0][0], s[i][1] - s[0][1]);
     if (u) return u;
   }
   return [1, 0];
@@ -2978,7 +5199,7 @@ function startTangent(s) {
 function endTangent(s) {
   const end = s[s.length - 1];
   for (let i = s.length - 2; i >= 0; i--) {
-    const u = unit2(end[0] - s[i][0], end[1] - s[i][1]);
+    const u = unit3(end[0] - s[i][0], end[1] - s[i][1]);
     if (u) return u;
   }
   return [1, 0];
@@ -2987,7 +5208,7 @@ function tangentAt(s, t) {
   if (t <= 1e-9) return startTangent(s);
   if (t >= 1 - 1e-9) return endTangent(s);
   const d = segmentDerivative(s, t);
-  return unit2(d[0], d[1]) ?? startTangent(s);
+  return unit3(d[0], d[1]) ?? startTangent(s);
 }
 var perp2 = (v2) => [-v2[1], v2[0]];
 function effectPathLength(path) {
@@ -3211,7 +5432,7 @@ function resample(sub5, m) {
         let tan = tout;
         if (prev !== null) {
           const tin = endTangent(segs[prev]);
-          tan = unit2(tin[0] + tout[0], tin[1] + tout[1]) ?? tout;
+          tan = unit3(tin[0] + tout[0], tin[1] + tout[1]) ?? tout;
         }
         out.push({ p: segs[j][0], tan, lenPrev: prev === null ? 0 : lens[prev] / m, lenNext: piece });
       } else {
@@ -3269,17 +5490,17 @@ function splitmix(x) {
   z = (z ^ z >> 27n) * 0x94d049bb133111ebn & MASK64;
   return z ^ z >> 31n;
 }
-function hash(seed, idx, t) {
+function hash3(seed, idx, t) {
   const h = splitmix(splitmix(splitmix(seed) ^ idx) ^ BigInt.asUintN(64, BigInt(t)));
   return Number(h >> 11n) / 2 ** 53 * 2 - 1;
 }
 function noise(seed, idx, t) {
   const i = Math.floor(t);
   const f = t - i;
-  const p0 = hash(seed, idx, i - 1);
-  const p1 = hash(seed, idx, i);
-  const p2 = hash(seed, idx, i + 1);
-  const p3 = hash(seed, idx, i + 2);
+  const p0 = hash3(seed, idx, i - 1);
+  const p1 = hash3(seed, idx, i);
+  const p2 = hash3(seed, idx, i + 1);
+  const p3 = hash3(seed, idx, i + 2);
   const v2 = 0.5 * (2 * p1 + (-p0 + p2) * f + (2 * p0 - 5 * p1 + 4 * p2 - p3) * f * f + (-p0 + 3 * p1 - 3 * p2 + p3) * f * f * f);
   return Math.min(1, Math.max(-1, v2));
 }
@@ -3544,11 +5765,11 @@ function vectorFrameChildMatrix(resizing, box, from, to) {
   const sy = box.height > 1e-9 ? (y1 - y0) / box.height : 1;
   return [sx, 0, 0, sy, x0 - sx * box.x, y0 - sy * box.y];
 }
-var finite3 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
+var finite4 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
 function sanitizeVectorFrame(value) {
   if (!value || typeof value !== "object") return null;
   const r = value;
-  if (!finite3(r.x) || !finite3(r.y) || !finite3(r.width) || !finite3(r.height) || r.width < 0 || r.height < 0) return null;
+  if (!finite4(r.x) || !finite4(r.y) || !finite4(r.width) || !finite4(r.height) || r.width < 0 || r.height < 0) return null;
   const out = { x: r.x, y: r.y, width: r.width, height: r.height };
   if (typeof r.fill === "string" || r.fill && typeof r.fill === "object") out.fill = r.fill;
   if (r.clip === false) out.clip = false;
@@ -4196,7 +6417,7 @@ function vectorMaskSummary(node) {
     enabled: node.children[0].visible !== false
   };
 }
-var place = (path, m) => isIdentityMatrix(m) ? path : transformBezierPath(path, m);
+var place2 = (path, m) => isIdentityMatrix(m) ? path : transformBezierPath(path, m);
 function vectorMaskRegionShapes(node, type, parent = IDENTITY_MATRIX, self = true) {
   if (!self && node.visible === false) return [];
   if (isVectorFrame(node)) node = vectorFrameDrawn(node);
@@ -4214,17 +6435,17 @@ function vectorMaskRegionShapes(node, type, parent = IDENTITY_MATRIX, self = tru
 function regionOfPath(path, style, type, m) {
   if (!path.length) return [];
   const fillRule = style.fillRule ?? "nonzero";
-  if (type === "clip") return [{ path: place(path, m), fillRule }];
+  if (type === "clip") return [{ path: place2(path, m), fillRule }];
   const out = [];
   let filled = false;
   for (const l of vectorPaintLayerNodes(style)) {
     if (!l.drawn) continue;
     if (l.kind === "fill") {
-      if (!filled) out.push({ path: place(path, m), fillRule });
+      if (!filled) out.push({ path: place2(path, m), fillRule });
       filled = true;
     } else if ((l.node.strokeWidth ?? 1) > 0) {
       const area = vectorStrokeOutlinePath(path, l.node);
-      if (area.length) out.push({ path: place(area, m), fillRule: "nonzero" });
+      if (area.length) out.push({ path: place2(area, m), fillRule: "nonzero" });
     }
   }
   return out;
@@ -6208,8 +8429,8 @@ function sanitizeVectorLens(value) {
   if (spec.color !== null) out.color = typeof r.color === "string" && parseVectorColor(r.color) ? r.color : spec.color;
   return out;
 }
-var hex22 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
-var formatRgba = (c) => c[3] >= 1 ? `#${hex22(c[0])}${hex22(c[1])}${hex22(c[2])}` : `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${Math.round(c[3] * 1e3) / 1e3})`;
+var hex23 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+var formatRgba = (c) => c[3] >= 1 ? `#${hex23(c[0])}${hex23(c[1])}${hex23(c[2])}` : `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${Math.round(c[3] * 1e3) / 1e3})`;
 var luma = (c) => 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
 var mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3]];
 var HEAT = [
@@ -6631,15 +8852,15 @@ var BERN_INV = [
   [0, 0, 0, 1]
 ];
 var pct = (v2) => typeof v2 === "number" && Number.isFinite(v2) ? Math.min(1, Math.max(-1, v2 / 100)) : 0;
-function warpPresetMesh(preset, bounds) {
-  if (!WARP_STYLES.includes(preset.style)) return null;
+function warpPresetMesh(preset2, bounds) {
+  if (!WARP_STYLES.includes(preset2.style)) return null;
   const { x, y, width: w, height: h } = bounds;
   if (!(w > 0 && h > 0)) return null;
-  const b = pct(preset.bend);
-  const hd = pct(preset.horizontal);
-  const vd = pct(preset.vertical);
+  const b = pct(preset2.bend);
+  const hd = pct(preset2.horizontal);
+  const vd = pct(preset2.vertical);
   if (b === 0 && hd === 0 && vd === 0) return null;
-  const grid = warpPresetGrid(preset.style, b, hd, vd, preset.orientation === "vertical", h / w);
+  const grid = warpPresetGrid(preset2.style, b, hd, vd, preset2.orientation === "vertical", h / w);
   return { us: [0, 1], vs: [0, 1], points: grid.flat().map((p) => ({ x: x + p[0] * w, y: y + p[1] * h })) };
 }
 var warpMeshColumns = (m) => 3 * (m.us.length - 1) + 1;
@@ -7308,8 +9529,8 @@ var VECTOR_EFFECT_PARAM_SPECS = {
 var cloneMesh = (m) => ({ us: m.us.slice(), vs: m.vs.slice(), points: m.points.map((p) => ({ x: p.x, y: p.y })) });
 function vectorEnvelopeMesh(params, bounds) {
   if (params.style === "mesh") return params.mesh ?? identityWarpMesh(bounds, params.columns, params.rows);
-  const preset = warpPresetMesh({ style: params.style, bend: params.bend, horizontal: params.horizontal, vertical: params.vertical, orientation: params.orientation }, bounds);
-  return preset ? resizeWarpMesh(preset, params.columns, params.rows) : identityWarpMesh(bounds, params.columns, params.rows);
+  const preset2 = warpPresetMesh({ style: params.style, bend: params.bend, horizontal: params.horizontal, vertical: params.vertical, orientation: params.orientation }, bounds);
+  return preset2 ? resizeWarpMesh(preset2, params.columns, params.rows) : identityWarpMesh(bounds, params.columns, params.rows);
 }
 function vectorEnvelopeMap(params, bounds) {
   if (!bounds || !(bounds.width > 0 && bounds.height > 0)) return null;
@@ -8295,7 +10516,7 @@ var add4 = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
 var sub4 = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
 var scale2 = (a, k) => ({ x: a.x * k, y: a.y * k });
 var left = (d) => ({ x: d.y, y: -d.x });
-var unit3 = (v2) => {
+var unit4 = (v2) => {
   const l = Math.hypot(v2.x, v2.y);
   return l > 1e-12 ? { x: v2.x / l, y: v2.y / l } : { x: 1, y: 0 };
 };
@@ -8352,7 +10573,7 @@ function vectorStrokeGradientDefs(g, id, node, options = {}) {
     for (let i = 0; i < segCount; i++) {
       const a = pts[i];
       const b = pts[(i + 1) % n];
-      dirs.push(unit3(sub4(b, a)));
+      dirs.push(unit4(sub4(b, a)));
       lengths.push(lengths[i] + Math.hypot(b.x - a.x, b.y - a.y));
     }
     const total = lengths[segCount];
@@ -8710,7 +10931,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     for (const l of layers) {
       if (l.kind === "stroke" && isVectorBrushstrokeLayer(l.layer)) {
         lines.push(`${indent(depth + 1)}<g data-vector-part="brushstroke" data-vector-layer="${l.index}"${layerAttrs(l.layer)}>`);
-        for (const im of vectorBrushstrokeImages(node, l.layer)) lines.push(`${indent(depth + 2)}<image href="${im.href}" x="${num3(im.x)}" y="${num3(im.y)}" width="${num3(im.width)}" height="${num3(im.height)}" preserveAspectRatio="none"/>`);
+        for (const im of vectorBrushstrokeImages(node, l.layer, { document: doc, settle: "now" })) lines.push(`${indent(depth + 2)}<image href="${im.href}" x="${num3(im.x)}" y="${num3(im.y)}" width="${num3(im.width)}" height="${num3(im.height)}" preserveAspectRatio="none"/>`);
         lines.push(`${indent(depth + 1)}</g>`);
         continue;
       }
@@ -9666,9 +11887,9 @@ function parseVectorSvg(svg, options = {}) {
     const symbolId = symbolFor(target);
     if (!symbolId) return null;
     const own = json2(el.attrs["data-vector-instance"]);
-    const place2 = multiplyMatrices(translateMatrix(length(el.attrs.x), length(el.attrs.y)), m);
+    const place3 = multiplyMatrices(translateMatrix(length(el.attrs.x), length(el.attrs.y)), m);
     const node = { id: idFor(el), type: "instance", ...meta, symbolId, ...own?.scaleStrokes === false ? { scaleStrokes: false } : {}, ...own?.overrides ? { overrides: own.overrides } : {} };
-    return isIdentityMatrix(place2) ? node : { ...node, transform: place2 };
+    return isIdentityMatrix(place3) ? node : { ...node, transform: place3 };
   };
   const ownInstance = (g, m, meta) => {
     const raw = json2(g.attrs["data-vector-instance"]);
@@ -9677,7 +11898,7 @@ function parseVectorSvg(svg, options = {}) {
     const symbolId = sym2 ? symbolFor(sym2) : raw.symbolId;
     if (!symbolId) return null;
     const t = Array.isArray(raw.transform) && raw.transform.length === 6 && raw.transform.every(Number.isFinite) ? raw.transform : IDENTITY_MATRIX;
-    const place2 = multiplyMatrices(t, m);
+    const place3 = multiplyMatrices(t, m);
     const drawn = g.children.find((c) => c.name === "g");
     const effects = sanitizeVectorEffects(raw.effects);
     const node = {
@@ -9700,7 +11921,7 @@ function parseVectorSvg(svg, options = {}) {
       if (drawn.attrs.display === "none") node.visible = false;
       usedIds.add(node.id);
     }
-    return isIdentityMatrix(place2) ? node : { ...node, transform: place2 };
+    return isIdentityMatrix(place3) ? node : { ...node, transform: place3 };
   };
   const visit2 = (el, style, matrix) => {
     const out = [];
@@ -10843,19 +13064,73 @@ export {
   shadeVectorColor,
   vectorPathRings,
   vectorExtrudeFaces,
+  EFFECT_STRIP_HEIGHT,
+  EFFECT_MAP_REPEATS,
+  effectPaintSize,
+  readEffectStrokeMap,
+  effectPaintKey,
+  isPaintEffectPaint,
+  readPaintEffectPaint,
+  sampleEffectField,
+  sampleEffectAt,
+  effectDabField,
+  stampSampler,
+  brushStickerRefs,
+  PAPER_FAMILIES,
+  PAPER_LIBRARY,
+  DEFAULT_PAPER,
+  paperPreset,
+  clonePaper,
+  normalizePaper,
+  hexToRgb8,
+  renderPaper,
+  TipGrain,
+  penOrientation,
+  tiltToOrientation,
+  PenSmoother,
+  IDENTITY_COPY,
+  PenDabWalker,
+  DryStroke,
+  mixerTip,
+  toStrokePoint,
+  multiColorPalette,
+  multiColorGradient,
+  multiColorForDab,
+  PaintDabStroke,
+  wetPaperInput,
+  WetStrokeDriver,
+  WET_MEDIUM_PARAMS,
+  WET_GPU_MODES,
+  GPU_LEAD,
+  PaintWetLayers,
+  wetPigmentOf,
+  VECTOR_WET_STEPS,
+  vectorMediaEngine,
+  usesVectorBackdrop,
+  WetBrushstrokeJob,
+  renderWetBrushstroke,
+  vectorBackdropRect,
+  renderBackdropBrushstroke,
   VECTOR_BRUSHSTROKE_SCALE,
+  isVectorBrushstrokeEngine,
   vectorBrushstrokeBrushes,
   vectorBrushstrokeBrush,
   vectorBrushstrokeBrushOf,
   vectorBrushstrokeBrushError,
   vectorBrushstrokeDefaultColour,
   sanitizeVectorBrushstroke,
+  vectorBrushstrokePaintError,
+  readVectorBrushstrokePaint,
   VECTOR_BRUSHSTROKE_MAX_SEED,
   sanitizeVectorBrushstrokePaper,
   vectorBrushstrokeCharacterError,
   randomVectorBrushstrokeSeed,
   isVectorBrushstrokeLayer,
   vectorBrushstrokeReach,
+  setVectorBackdropSource,
+  onVectorBrushstrokesSettled,
+  vectorBrushstrokesSettling,
+  settleVectorBrushstrokes,
   vectorBrushstrokeImages,
   VECTOR_STROKE_SETTING_KEYS,
   VECTOR_BLEND_MODE_LABELS,