@weasel-js/renderer 1.9.4 → 1.10.1

package/dist/{chunk-VHQJ56XQ.js → chunk-K7XCWVQH.js}

@@ -1,16 +1,28 @@
-import { ownTextureIds, rasterizeTile, drawTileShapes, tileGeometry, tileSize, registerTextureAs, textureRegistry, unregisterTexture } from './chunk-ORBXHIRB.js';
+import { ownTextureIds, rasterizeTile, drawTileShapes, tileGeometry, tileSize, registerTextureAs, textureRegistry, unregisterTexture } from './chunk-Q4SIHV7Q.js';
+import { defaultOpenFill, pathFromD, boundsOfPath } from '@weasel-js/geom';
 import { tessellate } from '@weasel-js/geom/tessellate';
-import { createReflectable } from '@weasel-js/registry';
+import { createReflectable, createEmitter } from '@weasel-js/registry';
 import { resolveStrokeWidth, strokeInsets, tessellateStroke, markerGeneration, screenSpaceKey, markerHeads, metricKey, getMarker, markerKeyOf, markerReadsKey } from '@weasel-js/stroke';
-import { pathFromD, boundsOfPath } from '@weasel-js/geom';
+import { isTileKind, isPatternPaint, tileSpecOf, isTilePaint, patternPlacementOf } from '@weasel-js/paint';
 import { GLYPH_COVERAGE_GLSL } from '@weasel-js/font';
 
+// src/cache/uploadPremultiplied.ts
+function uploadPremultiplied(gl, source) {
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+}
+
 // src/cache/GLImageCache.ts
 var DEFAULT_MAX_TEXTURE_SIDE = 4096;
 var live = /* @__PURE__ */ new Set();
 function releaseImageSource(key) {
   for (const cache7 of live) cache7.release(key);
 }
+function imageSourceInLatestFrame(key) {
+  for (const cache7 of live) if (cache7.drewInLatestFrame(key)) return true;
+  return false;
+}
 function maxImageTextureSide() {
   let side = Infinity;
   for (const cache7 of live) side = Math.min(side, cache7.maxTextureSide);
@@ -18,11 +30,10 @@ function maxImageTextureSide() {
 }
 var GLImageCache = class {
   /** `minification` selects the MIN_FILTER strategy for uploaded textures.
-   *  `'linear'` (default) is the screen path's existing behavior. `'mipmap'`
-   *  generates mipmaps and filters LINEAR_MIPMAP_LINEAR — required for
-   *  quality minification when a large source bitmap is drawn small (the
-   *  headless print/export path); bilinear-only minification undersamples
-   *  and produces moiré. */
+   *  `'mipmap'` generates mipmaps and filters LINEAR_MIPMAP_LINEAR: when a
+   *  large source bitmap is drawn small, bilinear-only minification
+   *  undersamples and produces moiré. `'auto'` pays for that only on the
+   *  textures a frame draws small, when it first does. */
   constructor(gl, minification = "linear") {
     this.gl = gl;
     this.minification = minification;
@@ -43,25 +54,29 @@ var GLImageCache = class {
   textures = /* @__PURE__ */ new Set();
   /**
    * MAG_FILTER each texture currently carries, so a redundant write can be
-   * skipped.
-   *
-   * The batch sets this per flush — the same bitmap can be drawn at both
-   * filters in one frame, and the value has to be right at the draw rather than
-   * at upload. Filtering is state on the *texture object*, though, not on the
-   * unit, so re-asserting a value it already has is a write to a live texture
-   * for no reason. On a large sheet that is not free: a consumer's wall samples
-   * a 5652px-square atlas, 122MB resident, and measured `sampling: 'nearest'`
-   * costing up to 8x `'linear'` there — where the linear pass re-asserts the
-   * upload default and the nearest pass changes state on every draw.
-   *
-   * Whether that is the cause is unproven (see `docs/TODO.md`), but the write
-   * was redundant either way.
+   * skipped. The batch sets this per flush — the same bitmap can be drawn at
+   * both filters in one frame — but filtering is state on the *texture
+   * object*, not on the unit, so re-asserting a value it already has is a
+   * write to a live texture for no reason.
    */
   magFilters = /* @__PURE__ */ new WeakMap();
   finalizer;
   pendingDeletes = [];
-  /** Delete the textures of sources collected since the last call. The
-   *  renderer calls this at the top of each `render()`. */
+  /** Under `'auto'`, the sources whose mipmaps are built. */
+  mipped = /* @__PURE__ */ new WeakSet();
+  frame = 0;
+  lastDrawn = /* @__PURE__ */ new WeakMap();
+  /** Open a frame: what {@link drewInLatestFrame} answers about from here on.
+   *  The renderer calls this at the top of each `render()`. */
+  beginFrame() {
+    this.frame++;
+    this.drainPendingDeletes();
+  }
+  /** Whether `key` was uploaded or bound since the last {@link beginFrame}. */
+  drewInLatestFrame(key) {
+    return this.lastDrawn.get(key) === this.frame;
+  }
+  /** Delete the textures of sources collected since the last call. */
   drainPendingDeletes() {
     if (this.pendingDeletes.length === 0) return;
     for (const tex of this.pendingDeletes) this.gl.deleteTexture(tex);
@@ -76,6 +91,8 @@ var GLImageCache = class {
     this.finalizer.unregister(key);
     this.map.delete(key);
     this.magFilters.delete(key);
+    this.lastDrawn.delete(key);
+    this.mipped.delete(key);
   }
   /** Delete every texture this cache uploaded and stop answering
    *  {@link releaseImageSource} and {@link maxImageTextureSide}. Idempotent. */
@@ -92,13 +109,14 @@ var GLImageCache = class {
     live.delete(this);
   }
   upload(key, source, repetition) {
+    this.lastDrawn.set(key, this.frame);
     const existing = this.map.get(key);
     if (existing) return existing;
     const gl = this.gl;
     const tex = gl.createTexture();
     if (!tex) throw new Error("GLImageCache: createTexture failed");
     gl.bindTexture(gl.TEXTURE_2D, tex);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    uploadPremultiplied(gl, source);
     gl.texParameteri(
       gl.TEXTURE_2D,
       gl.TEXTURE_MIN_FILTER,
@@ -116,9 +134,27 @@ var GLImageCache = class {
     this.finalizer.register(key, tex, key);
     return tex;
   }
+  /** Whether `key` would gain from {@link buildMipmaps}: only under `'auto'`,
+   *  and only until they are built. */
+  lacksMipmaps(key) {
+    return this.minification === "auto" && !this.mipped.has(key);
+  }
+  /** Build `key`'s mipmaps and filter minification through them from here
+   *  on. Its texture must be uploaded. Leaves no texture bound. */
+  buildMipmaps(key) {
+    const tex = this.map.get(key);
+    if (!tex || this.mipped.has(key)) return;
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.generateMipmap(gl.TEXTURE_2D);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    this.mipped.add(key);
+  }
   bind(key, unit) {
     const tex = this.map.get(key);
     if (!tex) throw new Error("GLImageCache: image not uploaded; call upload() first");
+    this.lastDrawn.set(key, this.frame);
     const gl = this.gl;
     gl.activeTexture(gl.TEXTURE0 + unit);
     gl.bindTexture(gl.TEXTURE_2D, tex);
@@ -146,10 +182,11 @@ function wrapModes(gl, rep) {
 }
 var cache = /* @__PURE__ */ new WeakMap();
 function getMesh(path) {
+  const openFill = defaultOpenFill();
   const cached = cache.get(path);
-  if (cached !== void 0) return cached;
+  if (cached !== void 0 && cached.openFill === openFill) return cached.mesh;
   const mesh = tessellate(path);
-  cache.set(path, mesh);
+  cache.set(path, { mesh, openFill });
   return mesh;
 }
 function _resetCacheForTests() {
@@ -298,11 +335,9 @@ function insetIn(length, head, ribbon) {
 function _resetStrokeMeshCacheForTests() {
   cache2 = /* @__PURE__ */ new WeakMap();
 }
-
-// src/fillInPoseFrame.ts
 function fillInPoseFrame(fill, box) {
   if (!isBuiltinKind(fill)) {
-    return getPaintDrawKind(fill.fill)?.inPoseFrame?.(fill, box) ?? fill;
+    return getPaintDrawKind(fill.kind)?.inPoseFrame?.(fill, box) ?? fill;
   }
   if (isBoundsPattern(fill)) {
     const o = fill.origin ?? { x: 0, y: 0 };
@@ -313,10 +348,10 @@ function fillInPoseFrame(fill, box) {
     x: box.x + p.x * box.width,
     y: box.y + p.y * box.height
   });
-  if (fill.fill === "linear-gradient") {
+  if (fill.kind === "linear-gradient") {
     return { ...fill, from: toBox(fill.from), to: toBox(fill.to), units: "local" };
   }
-  if (fill.fill === "radial-gradient") {
+  if (fill.kind === "radial-gradient") {
     const scale = Math.hypot(box.width, box.height) / Math.SQRT2;
     return { ...fill, center: toBox(fill.center), radius: fill.radius * scale, units: "local" };
   }
@@ -324,45 +359,43 @@ function fillInPoseFrame(fill, box) {
 }
 function fillToBoundsFrame(fill, box) {
   if (!isBuiltinKind(fill)) {
-    return getPaintDrawKind(fill.fill)?.toBoundsFrame?.(fill, box) ?? fill;
+    return getPaintDrawKind(fill.kind)?.toBoundsFrame?.(fill, box) ?? fill;
   }
-  if (fill.fill === "pattern") {
+  if (isPatternPaint(fill)) {
     const o = fill.origin ?? { x: 0, y: 0 };
     return { ...fill, origin: { x: o.x - box.x, y: o.y - box.y }, units: "bounds" };
   }
-  const isGradient = fill.fill === "linear-gradient" || fill.fill === "radial-gradient" || fill.fill === "conic-gradient";
+  const isGradient = fill.kind === "linear-gradient" || fill.kind === "radial-gradient" || fill.kind === "conic-gradient";
   if (!isGradient) return fill;
   if (box.width === 0 || box.height === 0) return fill;
   const fromBox = (p) => ({
     x: (p.x - box.x) / box.width,
     y: (p.y - box.y) / box.height
   });
-  if (fill.fill === "linear-gradient") {
+  if (fill.kind === "linear-gradient") {
     return { ...fill, from: fromBox(fill.from), to: fromBox(fill.to), units: "bounds" };
   }
-  if (fill.fill === "radial-gradient") {
+  if (fill.kind === "radial-gradient") {
     const scale = Math.hypot(box.width, box.height) / Math.SQRT2;
     return { ...fill, center: fromBox(fill.center), radius: fill.radius / scale, units: "bounds" };
   }
   return { ...fill, center: fromBox(fill.center), units: "bounds" };
 }
 function isBoundsPattern(fill) {
-  return fill.fill === "pattern" && fill.units === "bounds";
+  return isPatternPaint(fill) && fill.units === "bounds";
 }
 function isBoundsGradient(fill) {
   if (fill === void 0) return false;
-  const kind = fill.fill;
+  const kind = fill.kind;
   if (kind !== "linear-gradient" && kind !== "radial-gradient" && kind !== "conic-gradient") {
     return false;
   }
   return fill.units === "bounds";
 }
 function isBuiltinKind(fill) {
-  const kind = fill.fill ?? "solid";
-  return kind === "solid" || kind === "pattern" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "conic-gradient";
+  const kind = fill.kind ?? "solid";
+  return kind === "solid" || isPatternPaint(fill) || kind === "linear-gradient" || kind === "radial-gradient" || kind === "conic-gradient";
 }
-
-// src/patterns/resolveSpec.ts
 var PATTERN_TILE_CACHE_LIMIT = 256;
 var ID_PREFIX = "pattern:";
 var cache3 = /* @__PURE__ */ new Map();
@@ -376,13 +409,14 @@ function _resetPatternSpecCacheForTests() {
   cache3.clear();
 }
 function resolvePatternSpec(spec) {
-  const id = specId(spec);
+  const tile = tileSpecOf(spec);
+  const id = specId(tile);
   const hit = cache3.get(id);
   if (hit !== void 0) {
     markUsed(id);
     return hit;
   }
-  return build(id, spec);
+  return build(id, tile);
 }
 function markUsed(id) {
   const hit = cache3.get(id);
@@ -391,7 +425,7 @@ function markUsed(id) {
   cache3.set(id, hit);
 }
 function build(id, spec) {
-  const bitmap = TILES.has(spec.tile) ? rasterizeTile({
+  const bitmap = isTileKind(spec.kind) ? rasterizeTile({
     size: tileSize(spec),
     draw: (oc) => drawTileShapes(oc, tileGeometry(spec))
   }) : null;
@@ -401,12 +435,6 @@ function build(id, spec) {
   while (cache3.size > PATTERN_TILE_CACHE_LIMIT) evict(cache3.keys().next().value);
   return handle;
 }
-var TILES = /* @__PURE__ */ new Set([
-  "hatch",
-  "crosshatch",
-  "dots",
-  "chunks"
-]);
 function evict(id) {
   cache3.delete(id);
   const source = textureRegistry.get(id)?.source;
@@ -420,27 +448,29 @@ function revive(id) {
   } catch {
     return;
   }
-  if (typeof spec !== "object" || spec === null || !("tile" in spec)) return;
+  if (typeof spec !== "object" || spec === null || !("kind" in spec)) return;
   build(id, spec);
 }
 ownTextureIds(ID_PREFIX, { revive, touched: markUsed });
-function isPatternSpec(payload) {
-  return "tile" in payload;
-}
 function resolveFillPattern(fill) {
-  if (fill.fill !== "pattern") return fill;
-  if (!isPatternSpec(fill.pattern)) return fill;
-  const handle = resolvePatternSpec(fill.pattern);
-  return handle ? { ...fill, pattern: handle } : null;
+  if (!isTilePaint(fill)) return fill;
+  const texture = resolvePatternSpec(fill);
+  return texture ? { kind: "texture", texture, ...patternPlacementOf(fill) } : null;
 }
 
 // src/patterns/commandPaint.ts
+function commandPaint(paint, box) {
+  return resolveFillPattern(fillInPoseFrame(paint, box));
+}
 function commandFill(fill, box) {
-  return resolveFillPattern(fillInPoseFrame(fill, box));
+  if (fill.paint == null) return null;
+  const paint = commandPaint(fill.paint, box);
+  if (paint === null) return null;
+  return paint === fill.paint ? fill : { ...fill, paint };
 }
 function commandStroke(stroke, box) {
   if (stroke.paint == null) return null;
-  const paint = commandFill(stroke.paint, box);
+  const paint = commandPaint(stroke.paint, box);
   if (paint === null) return null;
   return paint === stroke.paint ? stroke : { ...stroke, paint };
 }
@@ -448,7 +478,7 @@ function resolvePaint(p, stroke, fallback, head) {
   const v = p ?? fallback;
   if (v === "none") return void 0;
   if (v === "line") return stroke.paint;
-  return commandFill(v, boundsOfPath(head)) ?? void 0;
+  return commandPaint(v, boundsOfPath(head)) ?? void 0;
 }
 function headCommands(heads, stroke) {
   const out = [];
@@ -460,7 +490,7 @@ function headCommands(heads, stroke) {
     out.push({
       kind: "path",
       path,
-      ...fill ? { fill } : {},
+      ...fill ? { fill: { paint: fill } } : {},
       ...outline && outline.paint ? { stroke: { paint: outline.paint, width: outline.width, cap: "round", join: "round" } } : {}
     });
   }
@@ -477,14 +507,14 @@ function readsKey(stroke) {
       key += "/";
       continue;
     }
-    const reads = markerReadsKey(entry, stroke);
-    if (reads === null) return null;
-    key += `${reads}/`;
+    const reads2 = markerReadsKey(entry, stroke);
+    if (reads2 === null) return null;
+    key += `${reads2}/`;
   }
   return key;
 }
-function mapFor(path, source, reads) {
-  if (reads !== null) {
+function mapFor(path, source, reads2) {
+  if (reads2 !== null) {
     let map2 = byValue.get(path);
     if (map2 === void 0) byValue.set(path, map2 = /* @__PURE__ */ new Map());
     return map2;
@@ -499,8 +529,8 @@ function cachedMarkerCommands(path, source, stroke, strokeWidth, flattenToleranc
   if (stroke.markerStart === void 0 && stroke.markerMid === void 0 && stroke.markerEnd === void 0) {
     return [];
   }
-  const reads = readsKey(stroke);
-  const map = mapFor(path, source, reads);
+  const reads2 = readsKey(stroke);
+  const map = mapFor(path, source, reads2);
   const key = [
     strokeWidth,
     flattenTolerance ?? "",
@@ -508,7 +538,7 @@ function cachedMarkerCommands(path, source, stroke, strokeWidth, flattenToleranc
     refKey(stroke.markerStart),
     refKey(stroke.markerMid),
     refKey(stroke.markerEnd),
-    reads ?? "",
+    reads2 ?? "",
     screenSpaceKey(spaces.start),
     screenSpaceKey(spaces.mid),
     screenSpaceKey(spaces.end)
@@ -575,15 +605,35 @@ function outlineStrokeMesh(glyphKey, d, emWidth, stroke, metric) {
 function _resetOutlineStrokeMeshCacheForTests() {
   cache5 = /* @__PURE__ */ new Map();
 }
-var BATCH_TEXTURE_SLOTS = 8;
+
+// src/shaders/straightRgb.ts
+var STRAIGHT_RGB_GLSL = (
+  /* glsl */
+  `
+vec3 straightRgb(vec4 premultiplied) {
+  return premultiplied.rgb / max(premultiplied.a, 0.0001);
+}
+`
+);
+
+// src/shaders/batchFill.ts
+var BATCH_TEXTURE_SLOTS = 16;
 var WHITE_SLOT = 0;
+var RAMP_SLOT = BATCH_TEXTURE_SLOTS - 1;
+var BATCH_MATRIX_SLOTS = 8;
+var PAINT_MODES = 8;
+var MATRIX_STRIDE = BATCH_TEXTURE_SLOTS * PAINT_MODES;
 var PAINT_MODE_PLAIN = 0;
 var PAINT_MODE_RADIAL = 3;
 var PAINT_MODE_CONIC = 4;
+var PAINT_MODE_IMAGE = 5;
 var INV_TAU = (1 / (2 * Math.PI)).toFixed(10);
 function packSlot(slot, mode) {
   return slot + BATCH_TEXTURE_SLOTS * mode;
 }
+function withMatrix(slot, matrix) {
+  return slot + MATRIX_STRIDE * matrix;
+}
 var BATCH_ATTRIBUTE_LOCATIONS = {
   a_position: 0,
   a_vertexColor: 1,
@@ -592,12 +642,16 @@ var BATCH_ATTRIBUTE_LOCATIONS = {
   a_texSlot: 4
 };
 var L = BATCH_ATTRIBUTE_LOCATIONS;
-function sampleChain(slots) {
-  const arms = [];
-  for (let i = 1; i < slots; i++) {
-    arms.push(`  if (slot == ${i}) return texture(u_samplers[${i}], uv);`);
-  }
-  return arms.join("\n");
+function sampleTree(lo, hi, indent = "  ") {
+  if (lo === hi) return `${indent}return texture(u_samplers[${lo}], uv);`;
+  const mid = lo + hi + 1 >> 1;
+  return [
+    `${indent}if (slot < ${mid}) {`,
+    sampleTree(lo, mid - 1, `${indent}  `),
+    `${indent}} else {`,
+    sampleTree(mid, hi, `${indent}  `),
+    `${indent}}`
+  ].join("\n");
 }
 var BATCH_VERT_SRC = (
   /* glsl */
@@ -614,6 +668,7 @@ out vec2 v_uv;
 out float v_post;
 flat out int v_texSlot;
 flat out float v_paintMode;
+flat out int v_matrix;
 void main() {
   vec3 screen = u_model * vec3(a_position, 1.0);
   vec3 clip = u_proj * vec3(screen.xy, 1.0);
@@ -621,38 +676,44 @@ void main() {
   v_vertexColor = a_vertexColor;
   v_uv = a_uv;
   v_post = a_post;
-  // slot + 8 * mode, unpacked \u2014 see the file header for why they share a float.
+  // slot + 16 * mode + 128 * matrix, unpacked \u2014 see the file header for why
+  // they share a float.
   int packed = int(a_texSlot + 0.5);
   v_texSlot = packed % ${BATCH_TEXTURE_SLOTS};
-  v_paintMode = float(packed / ${BATCH_TEXTURE_SLOTS});
+  v_paintMode = float((packed / ${BATCH_TEXTURE_SLOTS}) % ${PAINT_MODES});
+  v_matrix = packed / ${MATRIX_STRIDE};
 }
 `
 );
-var BATCH_FRAG_SRC = (
-  /* glsl */
-  `#version 300 es
+function batchFragSrc(matrices) {
+  const m = matrices === 1 ? "0" : "v_matrix";
+  return (
+    /* glsl */
+    `#version 300 es
 precision highp float;
 in vec4 v_vertexColor;
 in vec2 v_uv;
 in float v_post;
 flat in int v_texSlot;
 flat in float v_paintMode;
+flat in int v_matrix;
 uniform sampler2D u_samplers[${BATCH_TEXTURE_SLOTS}];
 uniform vec4 u_color;
-uniform float u_alpha;
-uniform float u_synthBold;
+uniform float u_alpha[${matrices}];
 uniform vec2 u_fieldScale[${BATCH_TEXTURE_SLOTS}];
-uniform mat4 u_colorMatrix;
-uniform vec4 u_colorBias;
+uniform mat4 u_colorMatrix[${matrices}];
+uniform vec4 u_colorBias[${matrices}];
 out vec4 outColor;
 
 vec4 sampleSlot(int slot, vec2 uv) {
-${sampleChain(BATCH_TEXTURE_SLOTS)}
-  return texture(u_samplers[0], uv);
+${sampleTree(0, BATCH_TEXTURE_SLOTS - 1)}
+  // Never reached: every slot returns above.
+  return vec4(0.0);
 }
 ${GLYPH_COVERAGE_GLSL}
+${STRAIGHT_RGB_GLSL}
 void main() {
-  float isGrad = step(2.5, v_paintMode);
+  float isGrad = step(2.5, v_paintMode) * step(v_paintMode, ${PAINT_MODE_CONIC + 0.5});
   // A radial or conic vertex carries a gradient-space coordinate rather than a
   // texture coordinate, and its atlas row rather than an alpha. The sample is
   // split across the branch rather than the coordinate selected before it: an
@@ -670,30 +731,34 @@ void main() {
     float t = v_paintMode > ${PAINT_MODE_CONIC - 0.5}
       ? fract(atan(v_uv.y, v_uv.x) * ${INV_TAU})
       : length(v_uv);
-    texel = sampleSlot(v_texSlot, vec2(t, v_post));
+    texel = texture(u_samplers[${RAMP_SLOT}], vec2(t, v_post));
   } else {
     texel = sampleSlot(v_texSlot, v_uv);
   }
+  // At 0 the mix is the texel itself, so a solid still gets its color exactly.
+  texel.rgb = mix(texel.rgb, straightRgb(texel), step(${PAINT_MODE_IMAGE - 0.5}, v_paintMode));
   float isGlyph = step(0.5, v_paintMode) * step(v_paintMode, 2.5);
   // Unconditional, and multiplied out afterwards rather than branched around:
-  // see the file header.
-  float coverage = glyphCoverage(texel, v_paintMode, u_synthBold, v_uv, u_fieldScale[v_texSlot]);
+  // see the file header. A glyph's a_post is its synthetic-bold shift.
+  float coverage = glyphCoverage(texel, v_paintMode, v_post * isGlyph, v_uv, u_fieldScale[v_texSlot]);
   // A glyph's texel is a distance field, so it takes no part in the color; a
   // plain vertex multiplies its texel in as it always did.
   vec4 src = mix(texel, vec4(1.0), isGlyph) * u_color * v_vertexColor;
-  vec4 mapped = clamp(u_colorMatrix * src + u_colorBias, 0.0, 1.0);
-  float a = mapped.a * u_alpha * mix(v_post, 1.0, isGrad) * mix(1.0, coverage, isGlyph);
+  vec4 mapped = clamp(u_colorMatrix[${m}] * src + u_colorBias[${m}], 0.0, 1.0);
+  float a = mapped.a * u_alpha[${m}] * mix(v_post, 1.0, max(isGrad, isGlyph)) * mix(1.0, coverage, isGlyph);
   outColor = vec4(mapped.rgb * a, a);
 }
 `
-);
+  );
+}
+var BATCH_FRAG_SRC = batchFragSrc(1);
+var BATCH_MATRICES_FRAG_SRC = batchFragSrc(BATCH_MATRIX_SLOTS);
 var BATCH_FILL_UNIFORMS = [
   "u_proj",
   "u_model",
   "u_samplers",
   "u_color",
   "u_alpha",
-  "u_synthBold",
   "u_fieldScale",
   "u_colorMatrix",
   "u_colorBias"
@@ -773,7 +838,6 @@ var INITIAL_VERTICES = 256;
 var INITIAL_INDICES = 384;
 var WHITE_U = 0.5;
 var WHITE_V = 0.5;
-var PLAIN_WHITE = packSlot(WHITE_SLOT, PAINT_MODE_PLAIN);
 var SOLID_RING_SIZE = 64;
 var BATCH_TIERS = [
   { vertices: 16, indices: 24 },
@@ -821,8 +885,7 @@ var DrawBatch = class {
   /** Whether the staged run is quads alone, so its indices are the canonical
    *  pattern and a slot already holding that pattern needs no upload. */
   pureRects = true;
-  /** The rect every push is cut to, or `null`. `draw.ts` sets it as rect
-   *  clips enter and leave — see `batchClip.ts`. A push returns `false`, having
+  /** The rect every push is cut to, or `null`. A push returns `false`, having
    *  staged nothing, for geometry it cannot cut exactly; see `clipQuad`. */
   clip = null;
   /** Polygon scratch for `clip`: a quad cut by four edges has at most eight
@@ -857,10 +920,9 @@ var DrawBatch = class {
   }
   /**
    * Append one rect's four corners through `m`, all carrying `rgba` (straight
-   * alpha). An affine maps a rect to a parallelogram, so two triangles still
-   * cover it and the batch draws at `u_model` identity.
+   * alpha) and `P` in `a_texSlot`: the white texel, and the run's matrix.
    */
-  pushRect(x, y, w, h, m, r, g, b, a) {
+  pushRect(x, y, w, h, m, r, g, b, a, P) {
     this.reserve(4, 6);
     let i = this.nVerts * FLOATS_PER_VERTEX;
     const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
@@ -870,7 +932,6 @@ var DrawBatch = class {
     const bx = ma * x1 + mc * y + mtx, by = mb * x1 + md * y + mty;
     const cx = ma * x1 + mc * y1 + mtx, cy = mb * x1 + md * y1 + mty;
     const dx = ma * x + mc * y1 + mtx, dy = mb * x + md * y1 + mty;
-    const P = PLAIN_WHITE;
     i = this.writeVertex(i, ax, ay, r, g, b, a, WHITE_U, WHITE_V, 1, P);
     i = this.writeVertex(i, bx, by, r, g, b, a, WHITE_U, WHITE_V, 1, P);
     i = this.writeVertex(i, cx, cy, r, g, b, a, WHITE_U, WHITE_V, 1, P);
@@ -881,17 +942,15 @@ var DrawBatch = class {
   /**
    * Append one image quad: the destination rect `(x, y, w, h)` mapped through
    * `m`, sampling `(u0, v0)`-`(u1, v1)`, every corner carrying `post` as the
-   * after-the-color-matrix alpha factor.
-   *
-   * Corners wind top-left, top-right, bottom-right, bottom-left with UVs
-   * following — the same winding `pushRect` uses, which is what lets a run of
-   * mixed rects and quads keep the canonical index pattern. The flips a command
-   * asks for are already in the `u` / `v` the caller passes.
+   * after-the-color-matrix alpha factor and `rgb` as the scale on its texel.
+   * `slot` is the texture unit the corners sample, and may carry the index of
+   * the run's matrix they are mapped by as well (`withMatrix`).
    *
-   * `slot` is the texture unit the corners sample, which `draw.ts` assigns per
-   * bitmap within the run.
+   * Corners wind top-left, top-right, bottom-right, bottom-left — the same
+   * winding `pushRect` uses, which is what lets a run of mixed rects and quads
+   * keep the canonical index pattern.
    */
-  pushQuad(x, y, w, h, m, u0, v0, u1, v1, post, slot) {
+  pushQuad(x, y, w, h, m, u0, v0, u1, v1, post, slot, r = 1, g = 1, b = 1) {
     this.reserve(4, 6);
     let i = this.nVerts * FLOATS_PER_VERTEX;
     const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
@@ -901,11 +960,11 @@ var DrawBatch = class {
     const bx = ma * x1 + mc * y + mtx, by = mb * x1 + md * y + mty;
     const cx = ma * x1 + mc * y1 + mtx, cy = mb * x1 + md * y1 + mty;
     const dx = ma * x + mc * y1 + mtx, dy = mb * x + md * y1 + mty;
-    const P = packSlot(slot, PAINT_MODE_PLAIN);
-    i = this.writeVertex(i, ax, ay, 1, 1, 1, 1, u0, v0, post, P);
-    i = this.writeVertex(i, bx, by, 1, 1, 1, 1, u1, v0, post, P);
-    i = this.writeVertex(i, cx, cy, 1, 1, 1, 1, u1, v1, post, P);
-    this.writeVertex(i, dx, dy, 1, 1, 1, 1, u0, v1, post, P);
+    const P = packSlot(slot, PAINT_MODE_IMAGE);
+    i = this.writeVertex(i, ax, ay, r, g, b, 1, u0, v0, post, P);
+    i = this.writeVertex(i, bx, by, r, g, b, 1, u1, v0, post, P);
+    i = this.writeVertex(i, cx, cy, r, g, b, 1, u1, v1, post, P);
+    this.writeVertex(i, dx, dy, r, g, b, 1, u0, v1, post, P);
     this.pushQuadIndices();
     return this.clip === null || this.clipQuad(this.nVerts - 4, this.nIdx - 6, this.clip);
   }
@@ -915,22 +974,13 @@ var DrawBatch = class {
    * `rgba`.
    *
    * `mode` says which channels of that atlas carry the distance field, and
-   * rides the vertices packed into the slot — so a run off a baked MSDF atlas
-   * and one off the runtime canvas bake still share a draw. The synthetic-bold
-   * threshold does not: it is `u_synthBold`, and `draw.ts` breaks the run when
-   * it changes.
+   * rides the vertices packed into the slot. `synthBold` is the shift on the
+   * field's threshold, in `a_post`: a glyph has no use for an alpha factor there.
    *
-   * **A synthetic oblique is sheared here rather than in the shader.** The old
-   * text program carried the baseline per vertex and skewed against
-   * `u_synthItalic`; the batch places its own corners, so the shear is one
-   * multiply while they are being placed, and `tanItalic` is 0 for an upright
-   * face. It has to happen before `m`, which is where the shader had it too.
-   *
-   * Corners wind top-left, top-right, bottom-right, bottom-left — `pushQuad`'s
-   * winding, which is what lets a run of mixed rects, image quads and glyphs
-   * keep the canonical index pattern.
+   * A synthetic oblique is sheared here, before `m`; `tanItalic` is 0 for an
+   * upright face. Corners wind as `pushQuad`'s do.
    */
-  pushGlyph(x0, y0, x1, y1, baselineY, tanItalic, m, u0, v0, u1, v1, r, g, b, a, slot, mode) {
+  pushGlyph(x0, y0, x1, y1, baselineY, tanItalic, m, u0, v0, u1, v1, r, g, b, a, slot, mode, synthBold) {
     this.reserve(4, 6);
     let i = this.nVerts * FLOATS_PER_VERTEX;
     const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
@@ -943,10 +993,10 @@ var DrawBatch = class {
     const cx = ma * bx1 + mc * y1 + mtx, cy = mb * bx1 + md * y1 + mty;
     const dx = ma * bx0 + mc * y1 + mtx, dy = mb * bx0 + md * y1 + mty;
     const P = packSlot(slot, mode);
-    i = this.writeVertex(i, ax, ay, r, g, b, a, u0, v0, 1, P);
-    i = this.writeVertex(i, bx, by, r, g, b, a, u1, v0, 1, P);
-    i = this.writeVertex(i, cx, cy, r, g, b, a, u1, v1, 1, P);
-    this.writeVertex(i, dx, dy, r, g, b, a, u0, v1, 1, P);
+    i = this.writeVertex(i, ax, ay, r, g, b, a, u0, v0, synthBold, P);
+    i = this.writeVertex(i, bx, by, r, g, b, a, u1, v0, synthBold, P);
+    i = this.writeVertex(i, cx, cy, r, g, b, a, u1, v1, synthBold, P);
+    this.writeVertex(i, dx, dy, r, g, b, a, u0, v1, synthBold, P);
     this.pushQuadIndices();
     return this.clip === null || this.clipQuad(this.nVerts - 4, this.nIdx - 6, this.clip);
   }
@@ -955,16 +1005,10 @@ var DrawBatch = class {
    * through `m`, sampling the ramp atlas at `slot`.
    *
    * `uv` gives each channel of `a_uv` as an affine function of the coordinates
-   * the corners arrive in, which is what lets a gradient ride the vertices at
-   * all: a linear one's ramp position is affine in position outright, and a
-   * radial or conic one's gradient-space *coordinate* is, even though the ramp
-   * position it yields is not. Either way the rasterizer's interpolation across
-   * a triangle is exact. `mode` says which of the two the fragment shader is
-   * looking at, and `post` carries the atlas row for the modes that read it —
-   * see `shaders/batchFill.ts`.
-   *
-   * Values outside 0..1 are the sampler's business; the atlas clamps to the
-   * edge texel, which is what the gradient shader's own `clamp` did.
+   * the corners arrive in. `mode` says whether that is a ramp position or a
+   * gradient-space coordinate, and `post` carries the atlas row for the modes
+   * that read it — see `shaders/batchFill.ts`. Values outside 0..1 clamp to
+   * the atlas's edge texel.
    */
   pushGradientRect(x, y, w, h, m, uv, post, slot, mode, r, g, b, a) {
     this.reserve(4, 6);
@@ -1032,11 +1076,11 @@ var DrawBatch = class {
     return this.clip === null || this.clipMesh(base, this.nIdx - srcIdx.length, this.clip);
   }
   /**
-   * Append a tessellated mesh through `m`, all vertices carrying `rgba`. The
-   * mesh's own indices are rebased onto the staged vertices, which is why the
-   * index buffer is uploaded per flush rather than written once.
+   * Append a tessellated mesh through `m`, all vertices carrying `rgba` and
+   * `P`, as `pushRect`'s do. The mesh's own indices are rebased onto the staged
+   * vertices, which is why the index buffer is uploaded per flush.
    */
-  pushMesh(mesh, m, r, g, b, a) {
+  pushMesh(mesh, m, r, g, b, a, P) {
     const src = mesh.vertices;
     const srcIdx = mesh.indices;
     const n = src.length >> 1;
@@ -1057,7 +1101,7 @@ var DrawBatch = class {
       v[i++] = WHITE_U;
       v[i++] = WHITE_V;
       v[i++] = 1;
-      v[i++] = PLAIN_WHITE;
+      v[i++] = P;
     }
     const base = this.nVerts;
     const out = this.idx;
@@ -1121,9 +1165,7 @@ var DrawBatch = class {
    * subpixel grid the rasterizer snaps to, and the shortened edge then covers
    * different samples than the whole one did; along an axis the cut edge is
    * the same line exactly. So a slanted quad that crosses is rolled back and
-   * refused, for `draw.ts` to clip through the stencil instead.
-   *
-   * A cut axis-aligned quad is still four corners, so the run stays pure.
+   * refused, for the caller to clip through the stencil instead.
    */
   clipQuad(v0, i0, rect) {
     const v = this.verts;
@@ -1276,14 +1318,16 @@ var DrawBatch = class {
     gl.deleteVertexArray(set.vao);
   }
 };
-
-// src/images/imageCache.ts
 var MAX_VECTOR_RASTER_PIXELS = 4096 * 4096;
 var SHRINK_SLACK = 4;
 var FALLBACK_WIDTH = 300;
 var FALLBACK_HEIGHT = 150;
+var DEFAULT_BUDGET_BYTES = 256 * 1024 * 1024;
 var cache6 = /* @__PURE__ */ new Map();
-var subscribers = /* @__PURE__ */ new Set();
+var budgetBytes = DEFAULT_BUDGET_BYTES;
+var reads = 0;
+var readsAtLastPass = 0;
+var ready = createEmitter();
 var decodedVectors = /* @__PURE__ */ new Map();
 function isVectorImageSrc(src) {
   if (/^data:image\/svg\+xml[;,]/i.test(src)) return true;
@@ -1328,10 +1372,30 @@ var defaultLoader = async (src, size) => {
 };
 var loader = defaultLoader;
 function notify() {
-  for (const cb of subscribers) cb();
+  ready.emit();
+}
+var bytesOf = (bitmap) => bitmap ? bitmap.width * bitmap.height * 4 : 0;
+function enforceBudget(landed) {
+  let total = 0;
+  for (const entry of cache6.values()) total += bytesOf(entry.bitmap);
+  if (total > budgetBytes) {
+    const idle = [...cache6].filter(([src, entry]) => src !== landed && entry.bitmap !== void 0 && entry.readAt <= readsAtLastPass && !imageSourceInLatestFrame(entry.bitmap));
+    idle.sort((a, b) => a[1].readAt - b[1].readAt);
+    for (const [src, entry] of idle) {
+      if (total <= budgetBytes) break;
+      total -= bytesOf(entry.bitmap);
+      releaseImage(src);
+    }
+  }
+  readsAtLastPass = reads;
+}
+function setImageCacheBudget(bytes) {
+  const previous = budgetBytes;
+  budgetBytes = bytes;
+  return previous;
 }
 function startLoad2(src) {
-  const entry = { status: "loading" };
+  const entry = { status: "loading", readAt: ++reads };
   cache6.set(src, entry);
   loader(src).then(
     (bitmap) => {
@@ -1339,13 +1403,15 @@ function startLoad2(src) {
       cache6.set(src, {
         status: "ready",
         bitmap,
+        readAt: entry.readAt,
         ...isVectorImageSrc(src) ? { vector: { natural: { width: bitmap.width, height: bitmap.height }, scale: 1, failed: /* @__PURE__ */ new Set(), floor: 0 } } : {}
       });
+      enforceBudget(src);
       notify();
     },
     () => {
       if (cache6.get(src) !== entry) return;
-      cache6.set(src, { status: "error" });
+      cache6.set(src, { status: "error", readAt: entry.readAt });
       notify();
     }
   );
@@ -1384,6 +1450,7 @@ function maybeReraster(src, entry, v, drawnAt) {
       v.shrunkTo = grow ? void 0 : target;
       v.scale = target;
       if (old && old !== bitmap) releaseImageSource(old);
+      enforceBudget(src);
       notify();
     },
     () => {
@@ -1399,6 +1466,7 @@ function getImageBitmap(src, drawnAt) {
     startLoad2(src);
     return void 0;
   }
+  entry.readAt = ++reads;
   if (drawnAt && entry.vector) maybeReraster(src, entry, entry.vector, drawnAt);
   return entry.bitmap;
 }
@@ -1417,21 +1485,21 @@ function retryImage(src) {
   notify();
 }
 function subscribeImageReady(cb) {
-  subscribers.add(cb);
-  return () => {
-    subscribers.delete(cb);
-  };
+  return ready.subscribe(cb);
 }
 function __setImageLoaderForTests(fn) {
   loader = fn;
 }
 function _resetImageCacheForTests() {
   cache6.clear();
-  subscribers.clear();
+  ready = createEmitter();
   decodedVectors.clear();
   loader = defaultLoader;
+  budgetBytes = DEFAULT_BUDGET_BYTES;
+  reads = 0;
+  readsAtLastPass = 0;
 }
 
-export { BATCH_ATTRIBUTE_LOCATIONS, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_FRAG_SRC, BATCH_TEXTURE_SLOTS, BATCH_VERT_SRC, DrawBatch, FLOATS_PER_VERTEX, GLImageCache, PAINT_MODE_CONIC, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, __setImageLoaderForTests, _resetCacheForTests, _resetImageCacheForTests, _resetMarkerCommandCacheForTests, _resetOutlineMeshCacheForTests, _resetOutlineStrokeMeshCacheForTests, _resetPaintDrawKindsForTests, _resetPatternSpecCacheForTests, _resetProgramRegistryForTests, _resetStrokeMeshCacheForTests, axisAlignedClipRect, cachedMarkerCommands, commandFill, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getMesh, getPaintDrawKind, getProgramSource, imageStatus, intersectClipRects, isPaintKindKnown, isPatternSpec, isVectorImageSrc, outlineMesh, outlineStrokeMesh, paintDrawKindRegistry, programSourceRegistry, quantizeEmWidth, quantizeStrokeScale, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, strokeMesh, subscribeImageReady, warmPaintKinds };
-//# sourceMappingURL=chunk-VHQJ56XQ.js.map
-//# sourceMappingURL=chunk-VHQJ56XQ.js.map
+export { BATCH_ATTRIBUTE_LOCATIONS, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_FRAG_SRC, BATCH_MATRICES_FRAG_SRC, BATCH_MATRIX_SLOTS, BATCH_TEXTURE_SLOTS, BATCH_VERT_SRC, DrawBatch, FLOATS_PER_VERTEX, GLImageCache, PAINT_MODE_CONIC, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, RAMP_SLOT, STRAIGHT_RGB_GLSL, WHITE_SLOT, __setImageLoaderForTests, _resetCacheForTests, _resetImageCacheForTests, _resetMarkerCommandCacheForTests, _resetOutlineMeshCacheForTests, _resetOutlineStrokeMeshCacheForTests, _resetPaintDrawKindsForTests, _resetPatternSpecCacheForTests, _resetProgramRegistryForTests, _resetStrokeMeshCacheForTests, axisAlignedClipRect, cachedMarkerCommands, commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getMesh, getPaintDrawKind, getProgramSource, imageStatus, intersectClipRects, isPaintKindKnown, isVectorImageSrc, outlineMesh, outlineStrokeMesh, packSlot, paintDrawKindRegistry, programSourceRegistry, quantizeEmWidth, quantizeStrokeScale, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, strokeMesh, subscribeImageReady, uploadPremultiplied, warmPaintKinds, withMatrix };
+//# sourceMappingURL=chunk-K7XCWVQH.js.map
+//# sourceMappingURL=chunk-K7XCWVQH.js.map