@weasel-js/renderer 1.9.4 → 1.10.1

package/dist/index.js

@@ -1,18 +1,18 @@
-export { createTilePattern } from './chunk-2VOBNWBN.js';
-import { BATCH_ATTRIBUTE_LOCATIONS, BATCH_TEXTURE_SLOTS, registerProgram, BATCH_VERT_SRC, BATCH_FRAG_SRC, BATCH_FILL_UNIFORMS, BATCH_FILL_ATTRIBUTES, GLImageCache, DrawBatch, getProgramSource, commandFill, cachedMarkerCommands, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-VHQJ56XQ.js';
-export { commandFill, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getPaintDrawKind, getProgramSource, imageStatus, isPaintKindKnown, isPatternSpec, isVectorImageSrc, paintDrawKindRegistry, programSourceRegistry, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, subscribeImageReady, warmPaintKinds } from './chunk-VHQJ56XQ.js';
-import { textureRegistry, getTexture } from './chunk-ORBXHIRB.js';
-export { registerTexture, textureRegistry, unregisterTexture } from './chunk-ORBXHIRB.js';
-import { DEFAULT_BAKE_BUDGET, markAllFontsNotUploaded, resetBakeBudget, GLYPH_COVERAGE_GLSL, syncDynamicPageTexture, ensureFontTexture, dynamicPageTextureId, textureCacheKey, GLYPH_MODE_R8, GLYPH_MODE_MSDF, glyphFieldScale } from '@weasel-js/font';
+export { createTilePattern } from './chunk-43YL7HZV.js';
+import { BATCH_ATTRIBUTE_LOCATIONS, BATCH_TEXTURE_SLOTS, registerProgram, STRAIGHT_RGB_GLSL, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_MATRICES_FRAG_SRC, BATCH_VERT_SRC, GLImageCache, DrawBatch, getProgramSource, commandFill, commandPaint, BATCH_FRAG_SRC, uploadPremultiplied, RAMP_SLOT, withMatrix, cachedMarkerCommands, BATCH_MATRIX_SLOTS, packSlot, WHITE_SLOT, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-K7XCWVQH.js';
+export { commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getPaintDrawKind, getProgramSource, imageStatus, isPaintKindKnown, isVectorImageSrc, paintDrawKindRegistry, programSourceRegistry, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, subscribeImageReady, warmPaintKinds } from './chunk-K7XCWVQH.js';
+import { textureRegistry, getTexture } from './chunk-Q4SIHV7Q.js';
+export { registerTexture, textureRegistry, unregisterTexture } from './chunk-Q4SIHV7Q.js';
+import { DEFAULT_BAKE_BUDGET, markAllFontsNotUploaded, resetBakeBudget, GLYPH_COVERAGE_GLSL, syncColorPageTexture, colorPageTextureId, syncDynamicPageTexture, ensureFontTexture, dynamicPageTextureId, textureCacheKey, GLYPH_MODE_R8, GLYPH_MODE_MSDF, glyphFieldScale } from '@weasel-js/font';
 export { canQueryLocalFonts, cssFontFamily, cssFontFamilyLoading, enableLocalFontOutlines, fontOutlineRegistry, fontRegistry, hasFontOutlines, isCanvasFont, listFontOutlines, loadFontOutlines, outlineStatus, registerCanvasFont, registerFont, registerFontOutlines, subscribeGlyphReady, unregisterCanvasFont, unregisterFontOutlines } from '@weasel-js/font';
-import { resolveGradientStops, sampleResolvedStops, resolveScreenLength, resolveColor } from '@weasel-js/paint';
+import { resolveGradientStops, sampleResolvedStops, resolveScreenLength, isSolidPaint, resolveColor, strokeHasInk } from '@weasel-js/paint';
 import { mat3 } from '@weasel-js/geom';
 export { mat3, viewToMat3 } from '@weasel-js/geom';
 import { tessellate } from '@weasel-js/geom/tessellate';
 export { tessellate } from '@weasel-js/geom/tessellate';
 import { resolveStrokeWidth, markerReach, metricKeepsRects, strokeSpaceOf, resolveMarkerSize } from '@weasel-js/stroke';
 export { tessellateStroke } from '@weasel-js/stroke';
-import { resolveTextStyle, resolveRuns, textPoseLayoutInput, cachedLayoutRuns, verticalAlignOffset, SYNTHETIC_ITALIC_RADIANS } from '@weasel-js/text';
+import { resolveTextStyle, resolveRuns, textPoseLayoutInput, cachedLayoutRuns, cachedPaintRuns, verticalAlignOffset, SYNTHETIC_ITALIC_RADIANS } from '@weasel-js/text';
 
 // src/paintResources.ts
 function createPaintResources() {
@@ -229,7 +229,6 @@ uniform mat4  u_colorMatrix;
 uniform vec4  u_colorBias;
 uniform float u_opacity;
 uniform int   u_gradKind;
-uniform vec2  u_gradP0;
 uniform vec2  u_gradDir;
 uniform float u_gradLen;
 uniform float u_gradRadius;
@@ -240,12 +239,11 @@ const float PI = 3.14159265358979323846;
 vec4 shadePaint(vec2 world) {
   float t;
   if (u_gradKind == 0) {
-    vec2 d = world - u_gradP0;
-    t = dot(d, u_gradDir) / max(u_gradLen, 0.0001);
+    t = dot(world, u_gradDir) / max(u_gradLen, 0.0001);
   } else if (u_gradKind == 1) {
-    t = length(world - u_gradP0) / max(u_gradRadius, 0.0001);
+    t = length(world) / max(u_gradRadius, 0.0001);
   } else {
-    float a = atan(world.y - u_gradP0.y, world.x - u_gradP0.x) - u_gradAngle;
+    float a = atan(world.y, world.x) - u_gradAngle;
     t = fract(a / (2.0 * PI));
   }
   t = clamp(t, 0.0, 1.0);
@@ -284,7 +282,6 @@ var GRAD_FILL_UNIFORMS = [
   "u_colorMatrix",
   "u_colorBias",
   "u_gradKind",
-  "u_gradP0",
   "u_gradDir",
   "u_gradLen",
   "u_gradRadius",
@@ -320,10 +317,11 @@ uniform float u_opacity;
 uniform float u_alpha;
 uniform mat4  u_colorMatrix;
 uniform vec4  u_colorBias;
+${STRAIGHT_RGB_GLSL}
 vec4 shadePaint(vec2 world) {
   vec2 uv = world / max(u_tileSize, vec2(0.0001));
   vec4 texel = texture(u_sampler, uv);
-  vec4 mapped = clamp(u_colorMatrix * texel + u_colorBias, 0.0, 1.0);
+  vec4 mapped = clamp(u_colorMatrix * vec4(straightRgb(texel), texel.a) + u_colorBias, 0.0, 1.0);
   float a = mapped.a * u_opacity * u_alpha;
   return vec4(mapped.rgb * a, a);
 }
@@ -354,6 +352,72 @@ var PATTERN_FILL_UNIFORMS = [
   "u_colorBias"
 ];
 var PATTERN_FILL_ATTRIBUTES = ["a_position"];
+
+// src/shaders/builtinPrograms.ts
+var LazyProgram = class {
+  constructor(gl, spec) {
+    this.gl = gl;
+    this.spec = spec;
+  }
+  gl;
+  spec;
+  program = null;
+  get() {
+    if (!this.program) {
+      const { vert, frag, uniforms, attributes } = this.spec;
+      const program = new ShaderProgram(this.gl, vert, frag);
+      program.lookupUniforms(uniforms);
+      program.lookupAttributes(attributes);
+      this.program = program;
+    }
+    return this.program;
+  }
+  /** Delete the program if it was built. It builds again on the next `get`. */
+  release() {
+    if (this.program) this.gl.deleteProgram(this.program.handle);
+    this.program = null;
+  }
+  /** Forget a program its lost context already took with it. */
+  abandon() {
+    this.program = null;
+  }
+};
+var PATH_FILL_SPEC = {
+  vert: VERT_SRC,
+  frag: FRAG_SRC,
+  uniforms: PATH_FILL_UNIFORMS,
+  attributes: PATH_FILL_ATTRIBUTES
+};
+var PATH_FILL_VCOLOR_SPEC = {
+  vert: VCOLOR_VERT_SRC,
+  frag: VCOLOR_FRAG_SRC,
+  uniforms: PATH_FILL_UNIFORMS,
+  attributes: PATH_FILL_VCOLOR_ATTRIBUTES
+};
+var GRAD_FILL_SPEC = {
+  vert: GRAD_VERT_SRC,
+  frag: GRAD_FRAG_SRC,
+  uniforms: GRAD_FILL_UNIFORMS,
+  attributes: GRAD_FILL_ATTRIBUTES
+};
+var BATCH_FILL_MATRICES_SPEC = {
+  vert: BATCH_VERT_SRC,
+  frag: BATCH_MATRICES_FRAG_SRC,
+  uniforms: BATCH_FILL_UNIFORMS,
+  attributes: BATCH_FILL_ATTRIBUTES
+};
+var PATTERN_FILL_SPEC = {
+  vert: PATTERN_VERT_SRC,
+  frag: PATTERN_FRAG_SRC,
+  uniforms: PATTERN_FILL_UNIFORMS,
+  attributes: PATTERN_FILL_ATTRIBUTES
+};
+function createBatchFill(gl) {
+  const program = new ShaderProgram(gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
+  program.lookupUniforms(BATCH_FILL_UNIFORMS);
+  program.lookupAttributes(BATCH_FILL_ATTRIBUTES);
+  return program;
+}
 var L = BATCH_ATTRIBUTE_LOCATIONS;
 var GLYPH_PAINT_VERT_SRC = (
   /* glsl */
@@ -510,11 +574,9 @@ var GLMeshCache = class {
     return handle;
   }
   /**
-   * Upload a Mesh that the caller knows is single-use (e.g. the per-frame
-   * stroke ribbon from `tessellateStroke`). Returns a handle backed by fresh
-   * GL resources that the renderer will free deterministically at the end
-   * of the current frame via `freeTransient()`. Bypasses the WeakMap cache
-   * and the FinalizationRegistry, so transient meshes never wait on GC.
+   * Upload a Mesh that the caller knows is single-use. Returns a handle backed
+   * by fresh GL resources that the renderer frees at the end of the current
+   * frame via `freeTransient()`, so transient meshes never wait on GC.
    */
   uploadTransient(mesh) {
     const { handle, vbo, ibo } = this.upload(mesh);
@@ -628,6 +690,9 @@ var GLMeshCache = class {
 };
 
 // src/cache/GLTextureCache.ts
+function uploadAsHeld(gl, source) {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+}
 var GLTextureCache = class {
   constructor(gl) {
     this.gl = gl;
@@ -644,8 +709,11 @@ var GLTextureCache = class {
   /** Uploads the pixels once per id. `wrap` is re-applied whenever it differs
    *  from what the id was last uploaded under: the same registered image can
    *  be a clamped shader texture in one draw and a repeating pattern tile in
-   *  the next, and first-upload-wins gave the second one the first one's mode. */
+   *  the next. */
   upload(id, source, wrap = "clamp") {
+    return this.ensure(id, source, wrap, uploadAsHeld);
+  }
+  ensure(id, source, wrap, send) {
     const cached = this.map.get(id);
     if (cached) {
       if (this.wraps.get(id) !== wrap) this.applyWrap(id, cached, wrap);
@@ -656,7 +724,7 @@ var GLTextureCache = class {
     if (!tex) throw new Error(`GLTextureCache: createTexture failed for id="${id}"`);
     const wrapMode = wrap === "repeat" ? gl.REPEAT : gl.CLAMP_TO_EDGE;
     gl.bindTexture(gl.TEXTURE_2D, tex);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    send(gl, source);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapMode);
@@ -667,17 +735,18 @@ var GLTextureCache = class {
     return id;
   }
   /** `upload` for an id from the texture registry, whose image can be replaced
-   *  under the same id: a changed source sends its pixels again. */
+   *  under the same id: a changed source sends its pixels again. A registered
+   *  texture is an image, so its texels are premultiplied. */
   uploadRegistered(id, source, wrap = "clamp") {
     const cached = this.map.get(id);
     if (cached && this.registered.get(id) !== source) {
       const gl = this.gl;
       gl.bindTexture(gl.TEXTURE_2D, cached);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      uploadPremultiplied(gl, source);
       gl.bindTexture(gl.TEXTURE_2D, null);
     }
     this.registered.set(id, source);
-    return this.upload(id, source, wrap);
+    return this.ensure(id, source, wrap, uploadPremultiplied);
   }
   /**
    * Delete the texture of every registry-backed id the registry has dropped.
@@ -736,6 +805,35 @@ var GLTextureCache = class {
     gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
     gl.bindTexture(gl.TEXTURE_2D, null);
   }
+  /** Create a texture from premultiplied RGBA bytes that are a color: a page
+   *  of color glyphs. Mipmapped, as a font atlas must never be, because one is
+   *  drawn well below the size it was baked at. No-op if `id` already exists. */
+  uploadRGBA(id, width, height, data) {
+    if (this.map.has(id)) return;
+    const gl = this.gl;
+    const tex = gl.createTexture();
+    if (!tex) throw new Error(`GLTextureCache: createTexture failed for id="${id}"`);
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    gl.generateMipmap(gl.TEXTURE_2D);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    this.map.set(id, tex);
+    this.wraps.set(id, "clamp");
+  }
+  /** Patch a rect of an existing RGBA texture with tightly-packed w×h texels. */
+  subImageRGBA(id, x, y, w, h, data) {
+    const tex = this.map.get(id);
+    if (!tex) throw new Error(`GLTextureCache: texture "${id}" not uploaded`);
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, w, h, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    gl.generateMipmap(gl.TEXTURE_2D);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+  }
   bind(id, unit) {
     const tex = this.map.get(id);
     if (!tex) throw new Error(`GLTextureCache: texture "${id}" not uploaded`);
@@ -744,10 +842,8 @@ var GLTextureCache = class {
     gl.bindTexture(gl.TEXTURE_2D, tex);
   }
   /**
-   * Delete every uploaded GL texture and clear the map. Called by
-   * `WeaselRenderer.dispose()`. The cache is unusable but refillable
-   * afterward — a subsequent `upload()` for a previously-seen id re-creates
-   * the texture rather than restoring the deleted one.
+   * Delete every uploaded GL texture and clear the map. The cache is
+   * refillable afterward.
    */
   free() {
     const gl = this.gl;
@@ -858,10 +954,8 @@ var GradientRampAtlas = class {
     this.cacheHits = 0;
   }
   /**
-   * Delete the atlas texture and forget every row in it. Called by
-   * `WeaselRenderer.dispose()`. The CPU mirror goes with it, so the atlas is
-   * unusable but refillable afterward (stats are left as-is; call
-   * `resetStats()` separately if desired).
+   * Delete the atlas texture and forget every row in it. The CPU mirror goes
+   * with it, so the atlas is refillable afterward. Stats are left as-is.
    */
   free() {
     if (this.texture) this.gl.deleteTexture(this.texture);
@@ -999,16 +1093,13 @@ var GroupState = class {
     this.colorMatrixStack.push(nextCM);
   }
   /**
-   * Push a frame whose children paint into a surface of their own.
-   *
-   * The transform still accumulates — the children draw where they would have
-   * drawn. Alpha and colour do not: they describe how the finished surface
-   * joins the frame, and applying them on the way in as well would fade the
-   * pixels an effect is about to read, then fade them again on the way out.
+   * Push a frame whose children paint into a surface of their own. The
+   * transform still accumulates. Alpha and color do not: applying them on the
+   * way in would fade the pixels an effect is about to read, then fade them
+   * again on the way out.
    *
    * Returns the pair the caller must apply at composite time — what `push`
-   * would have left on the stack — so the composition rules live here and not
-   * in the dispatcher.
+   * would have left on the stack.
    */
   pushIsolated(frame) {
     this.push(frame);
@@ -1085,6 +1176,49 @@ function compositeProgramId() {
   return COMPOSITE_PROGRAM_ID;
 }
 
+// src/effects/compositeOp.ts
+var OPERATORS = {
+  "source-over": { source: "one", destination: "one-minus-source-alpha" },
+  "source-in": { source: "destination-alpha", destination: "zero" },
+  "source-out": { source: "one-minus-destination-alpha", destination: "zero" },
+  "source-atop": { source: "destination-alpha", destination: "one-minus-source-alpha" },
+  "destination-over": { source: "one-minus-destination-alpha", destination: "one" },
+  "destination-in": { source: "zero", destination: "source-alpha" },
+  "destination-out": { source: "zero", destination: "one-minus-source-alpha" },
+  "destination-atop": { source: "one-minus-destination-alpha", destination: "source-alpha" },
+  xor: { source: "one-minus-destination-alpha", destination: "one-minus-source-alpha" },
+  lighter: { source: "one", destination: "one" },
+  copy: { source: "one", destination: "zero" }
+};
+function blendFactorsOf(composite) {
+  return typeof composite === "string" ? OPERATORS[composite] : composite;
+}
+function isOwnComposite(composite) {
+  if (composite === void 0) return false;
+  const { source, destination } = blendFactorsOf(composite);
+  return source !== "one" || destination !== "one-minus-source-alpha";
+}
+function glFactor(gl, factor) {
+  switch (factor) {
+    case "zero":
+      return gl.ZERO;
+    case "one":
+      return gl.ONE;
+    case "source-alpha":
+      return gl.SRC_ALPHA;
+    case "one-minus-source-alpha":
+      return gl.ONE_MINUS_SRC_ALPHA;
+    case "destination-alpha":
+      return gl.DST_ALPHA;
+    case "one-minus-destination-alpha":
+      return gl.ONE_MINUS_DST_ALPHA;
+  }
+}
+function applyComposite(gl, composite) {
+  const { source, destination } = blendFactorsOf(composite);
+  gl.blendFunc(glFactor(gl, source), glFactor(gl, destination));
+}
+
 // src/draw/drawTriangles.ts
 function drawTriangles(ctx, count, type) {
   ctx.gl.drawElements(ctx.gl.TRIANGLES, count, type, 0);
@@ -1128,14 +1262,17 @@ function endParityMask(ctx) {
 
 // src/draw/customShader.ts
 var warnedUniforms = /* @__PURE__ */ new Set();
-function warnOnceUniform(programId, name) {
-  const key = `${programId}:${name}`;
+function warnOnce(key, message) {
   if (warnedUniforms.has(key)) return;
   warnedUniforms.add(key);
   const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
-  if (isDev) {
-    console.warn(`weasel drawShader: uniform "${name}" not found in program "${programId}". Check spelling, ensure it's used in the shader (unused uniforms are optimized away by the driver).`);
-  }
+  if (isDev) console.warn(message);
+}
+function warnOnceUniform(programId, name) {
+  warnOnce(
+    `${programId}:${name}`,
+    `weasel drawShader: uniform "${name}" not found in program "${programId}". Check spelling, ensure it's used in the shader (unused uniforms are optimized away by the driver).`
+  );
 }
 function setUniform(gl, loc, value, textureCache, nextTexUnit) {
   if (value !== null && typeof value === "object" && !Array.isArray(value) && !(value instanceof Float32Array) && "id" in value && typeof value.id === "string") {
@@ -1259,10 +1396,11 @@ function setUniforms(gl, program, programId, uniforms, textureCache, nextTexUnit
 }
 function drawShader(ctx, cmd) {
   const { gl, programRegistry, quadVbo, quadIbo, textureCache } = ctx;
-  const program = programRegistry.get(cmd.program.id);
+  const program = ctx.ensureProgram?.(cmd.program.id) ?? programRegistry.get(cmd.program.id);
   if (!program) {
-    console.warn(
-      `weasel drawShader: program "${cmd.program.id}" not compiled on this renderer. Call renderer.registerProgram(handle) after the module-level registerProgram().`
+    warnOnce(
+      `${cmd.program.id}:(program)`,
+      `weasel drawShader: program "${cmd.program.id}" has no compiled program on this renderer. Register its source with the module-level registerProgram() first; a source that failed to compile is reported above.`
     );
     return;
   }
@@ -1478,6 +1616,83 @@ function meshHandle(ctx, mesh) {
 function fillMeshHandle(ctx, path) {
   return meshHandle(ctx, fillMesh(ctx, path));
 }
+
+// src/draw/foldColor.ts
+function isIdentityColorMatrix(cm) {
+  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function foldColor(ctx, r, g, b, a) {
+  const cm = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  if (isIdentityColorMatrix(cm)) return [r, g, b, a * alpha];
+  return [
+    clamp01(cm[0] * r + cm[1] * g + cm[2] * b + cm[3] * a + cm[4]),
+    clamp01(cm[5] * r + cm[6] * g + cm[7] * b + cm[8] * a + cm[9]),
+    clamp01(cm[10] * r + cm[11] * g + cm[12] * b + cm[13] * a + cm[14]),
+    clamp01(cm[15] * r + cm[16] * g + cm[17] * b + cm[18] * a + cm[19]) * alpha
+  ];
+}
+var NO_TINT = [1, 1, 1, 1];
+var DIAGONAL = [0, 6, 12, 18];
+function textureTint(ctx) {
+  const cm = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  if (isIdentityColorMatrix(cm)) return alpha === 1 ? NO_TINT : [1, 1, 1, alpha];
+  for (let i = 0; i < 20; i++) {
+    const v = cm[i];
+    if (DIAGONAL.includes(i) ? v < 0 || v > 1 : v !== 0) return null;
+  }
+  return [cm[0], cm[6], cm[12], cm[18] * alpha];
+}
+
+// src/draw/batchMatrices.ts
+function matrixIndex(matrices, colorMatrix, alpha) {
+  for (let i = 0; i < matrices.length; i++) {
+    const m = matrices[i];
+    if (m.alpha === alpha && (m.colorMatrix === colorMatrix || sameValues(m.colorMatrix, colorMatrix))) return i;
+  }
+  return matrices.length < (BATCH_MATRIX_SLOTS ) ? matrices.length : -1;
+}
+var MATRICES = new Float32Array(16 * BATCH_MATRIX_SLOTS);
+var BIASES = new Float32Array(4 * BATCH_MATRIX_SLOTS);
+var ALPHAS = new Float32Array(BATCH_MATRIX_SLOTS);
+var UPLOADED = /* @__PURE__ */ new WeakMap();
+function holds(held, matrices) {
+  if (held.length < matrices.length) return false;
+  for (let i = 0; i < matrices.length; i++) {
+    const a = held[i];
+    const b = matrices[i];
+    if (a.alpha !== b.alpha) return false;
+    if (a.colorMatrix !== b.colorMatrix && !sameValues(a.colorMatrix, b.colorMatrix)) return false;
+  }
+  return true;
+}
+function uploadBatchMatrices(ctx, prog, matrices) {
+  let byProgram = UPLOADED.get(ctx);
+  if (!byProgram) {
+    byProgram = /* @__PURE__ */ new WeakMap();
+    UPLOADED.set(ctx, byProgram);
+  }
+  const held = byProgram.get(prog);
+  if (held !== void 0 && holds(held, matrices)) return;
+  const n = matrices.length;
+  for (let i = 0; i < n; i++) {
+    const cm = matrices[i].colorMatrix;
+    for (let row = 0; row < 4; row++) {
+      for (let col = 0; col < 4; col++) MATRICES[16 * i + col * 4 + row] = cm[row * 5 + col];
+      BIASES[4 * i + row] = cm[row * 5 + 4];
+    }
+    ALPHAS[i] = matrices[i].alpha;
+  }
+  const gl = ctx.gl;
+  gl.uniformMatrix4fv(prog.uniform("u_colorMatrix"), false, MATRICES.subarray(0, 16 * n));
+  gl.uniform4fv(prog.uniform("u_colorBias"), BIASES.subarray(0, 4 * n));
+  gl.uniform1fv(prog.uniform("u_alpha"), ALPHAS.subarray(0, n));
+  byProgram.set(prog, matrices.slice());
+}
+
+// src/draw/flushBatch.ts
 var BATCH_MODEL = mat3.identity();
 var SAMPLER_UNITS = new Int32Array(
   Array.from({ length: BATCH_TEXTURE_SLOTS }, (_, i) => i)
@@ -1491,14 +1706,12 @@ function flushBatch(ctx) {
     return;
   }
   const gl = ctx.gl;
-  const prog = ctx.batchFill;
+  const prog = staged.matrices.length > 1 ? ctx.batchFillMatrices ?? ctx.batchFill : ctx.batchFill;
   gl.useProgram(prog.handle);
   const indexCount = batch.uploadAndBind();
   setProjAndModel(ctx, prog, BATCH_MODEL);
   setColorUniform(ctx, prog, 1, 1, 1, 1);
-  setAlphaUniform(ctx, prog, staged.alpha);
-  gl.uniform1f(prog.uniform("u_synthBold"), staged.synthBold);
-  setColorMatrixUniforms(ctx, prog, staged.colorMatrix);
+  uploadBatchMatrices(ctx, prog, staged.matrices);
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(gl.TEXTURE_2D, ctx.whiteTexture);
   for (let i = 0; i < staged.textures.length; i++) {
@@ -1509,16 +1722,13 @@ function flushBatch(ctx) {
       FIELD_SCALES[2 * (i + 1) + 1] = entry.fieldScale[1];
       continue;
     }
-    if (entry.kind === "ramps") {
-      ctx.gradRamps.bind(i + 1);
-      continue;
-    }
     ctx.imageCache.bind(entry.image, i + 1);
     ctx.imageCache.setMagFilter(
       entry.image,
       entry.sampling === "nearest" ? gl.NEAREST : gl.LINEAR
     );
   }
+  if (staged.ramps) ctx.gradRamps.bind(RAMP_SLOT);
   gl.uniform1iv(prog.uniform("u_samplers"), SAMPLER_UNITS);
   gl.uniform2fv(prog.uniform("u_fieldScale"), FIELD_SCALES);
   applyClipTest(ctx, staged.clipDepth);
@@ -1693,9 +1903,46 @@ function isPxMarker(ref) {
 function resolvedMarker(ref, scale) {
   return { ...ref, size: resolveMarkerSize(ref, 0, quantizeStrokeScale(ref.size.px, scale)) };
 }
+
+// src/draw/batchRun.ts
+function slotForBitmap(staged, image, sampling) {
+  for (let i = 0; i < staged.textures.length; i++) {
+    const entry = staged.textures[i];
+    if (entry.kind !== "bitmap" || entry.image !== image) continue;
+    return entry.sampling === sampling ? i + 1 : -1;
+  }
+  return nextFreeSlot(staged);
+}
+function slotForRamps(staged) {
+  if (staged.ramps) return RAMP_SLOT;
+  return nextFreeSlot(staged) < 0 ? -1 : RAMP_SLOT;
+}
+function slotForAtlas(staged, id) {
+  for (let i = 0; i < staged.textures.length; i++) {
+    const entry = staged.textures[i];
+    if (entry.kind === "atlas" && entry.id === id) return i + 1;
+  }
+  return nextFreeSlot(staged);
+}
+function nextFreeSlot(staged) {
+  const taken = staged.textures.length + (staged.ramps ? 1 : 0);
+  return taken + 1 < BATCH_TEXTURE_SLOTS ? staged.textures.length + 1 : -1;
+}
+function runTakes(ctx, staged, colorMatrix, alpha) {
+  return staged.clipDepth === runClipDepth(ctx) && matrixIndex(staged.matrices, colorMatrix, alpha) >= 0;
+}
+function openRun(ctx) {
+  ctx.batchState ??= { clipDepth: runClipDepth(ctx), matrices: [], textures: [], ramps: false };
+  return ctx.batchState;
+}
+function takeMatrix(staged, colorMatrix, alpha) {
+  const index = matrixIndex(staged.matrices, colorMatrix, alpha);
+  if (index === staged.matrices.length) staged.matrices.push({ colorMatrix, alpha });
+  return index;
+}
 function batchPaint(ctx, fill, hasVColors) {
   if (hasVColors) return void 0;
-  const kind = fill.fill ?? "solid";
+  const kind = fill.kind ?? "solid";
   if (kind === "solid") {
     const solid = fill;
     return { kind: "solid", color: solid.color, opacity: solid.opacity };
@@ -1706,8 +1953,8 @@ function batchPaint(ctx, fill, hasVColors) {
   const grad = fill;
   const g = gradientMap(ctx, grad.units);
   if (!g) return null;
-  if (grad.fill === "linear-gradient") return ramp(grad, PAINT_MODE_PLAIN, linearRampUV(g, grad));
-  if (grad.fill === "radial-gradient") return ramp(grad, PAINT_MODE_RADIAL, radialRampUV(g, grad));
+  if (grad.kind === "linear-gradient") return ramp(grad, PAINT_MODE_PLAIN, linearRampUV(g, grad));
+  if (grad.kind === "radial-gradient") return ramp(grad, PAINT_MODE_RADIAL, radialRampUV(g, grad));
   return ramp(grad, PAINT_MODE_CONIC, conicRampUV(g, grad));
 }
 function ramp(fill, mode, uv) {
@@ -1780,41 +2027,6 @@ function spaceToDevice(ctx, units) {
 }
 
 // src/draw/batch.ts
-function isIdentityColorMatrix(cm) {
-  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
-}
-function stagedStateIsLive(ctx, staged, image, sampling, synthBold = 0) {
-  if (staged.clipDepth !== (ctx.clipStack.length === 0 ? ctx.clipDepth : runClipDepth(ctx))) return false;
-  if (staged.synthBold !== synthBold) return false;
-  if (!staged.foldsAlpha && staged.alpha !== ctx.state.alpha) return false;
-  if (image !== void 0 && slotForBitmap(staged, image, sampling) < 0) return false;
-  const colorMatrix = ctx.state.colorMatrix;
-  return staged.colorMatrix === colorMatrix || sameValues(staged.colorMatrix, colorMatrix);
-}
-function slotForBitmap(staged, image, sampling) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    const entry = staged.textures[i];
-    if (entry.kind !== "bitmap" || entry.image !== image) continue;
-    return entry.sampling === sampling ? i + 1 : -1;
-  }
-  return nextFreeSlot(staged);
-}
-function slotForRamps(staged) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    if (staged.textures[i].kind === "ramps") return i + 1;
-  }
-  return nextFreeSlot(staged);
-}
-function slotForAtlas(staged, id) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    const entry = staged.textures[i];
-    if (entry.kind === "atlas" && entry.id === id) return i + 1;
-  }
-  return nextFreeSlot(staged);
-}
-function nextFreeSlot(staged) {
-  return staged.textures.length + 1 < BATCH_TEXTURE_SLOTS ? staged.textures.length + 1 : -1;
-}
 var MAX_BATCHED_MESH_VERTICES = 96;
 var MAX_BATCHED_MESH_VERTICES_IN_RUN = 1024;
 var meshBatching = {
@@ -1827,27 +2039,26 @@ function canBatchMesh(ctx, mesh) {
   return mesh.vertices.length >> 1 <= cap;
 }
 function stageSolid(ctx, vertices) {
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState)) flushBatch(ctx);
+  const colorMatrix = IDENTITY_COLOR_MATRIX ;
+  const alpha = 1 ;
+  const open = ctx.batchState;
+  if (open !== void 0 && !runTakes(ctx, open, colorMatrix, alpha)) flushBatch(ctx);
   if (ctx.drawBatch.wouldOverflow(vertices)) flushBatch(ctx);
-  return openRun(ctx);
+  const matrix = takeMatrix(openRun(ctx), colorMatrix, alpha);
+  return packSlot(withMatrix(WHITE_SLOT, matrix), PAINT_MODE_PLAIN);
 }
-function openRun(ctx) {
-  if (ctx.batchState === void 0) {
-    const colorMatrix = ctx.state.colorMatrix;
-    const foldsAlpha = isIdentityColorMatrix(colorMatrix);
-    ctx.batchState = {
-      alpha: foldsAlpha ? 1 : ctx.state.alpha,
-      colorMatrix,
-      clipDepth: runClipDepth(ctx),
-      synthBold: 0,
-      foldsAlpha,
-      textures: []
-    };
-  }
-  return ctx.batchState;
+var UNTINTED = [1, 1, 1, 1];
+function texturedUnder(ctx, alphaInEntry) {
+  const tint = textureTint(ctx);
+  if (tint !== null) return { colorMatrix: IDENTITY_COLOR_MATRIX, alpha: 1, tint, slot: 0 };
+  const colorMatrix = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  return alphaInEntry ? { colorMatrix, alpha, tint: UNTINTED, slot: 0 } : { colorMatrix, alpha: 1, tint: [1, 1, 1, alpha], slot: 0 };
 }
 function stageImage(ctx, image, sampling) {
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, image, sampling)) {
+  const under = texturedUnder(ctx, false);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForBitmap(open, image, sampling) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
@@ -1857,46 +2068,49 @@ function stageImage(ctx, image, sampling) {
     staged.textures.push({ kind: "bitmap", image, sampling });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  under.slot = withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha));
+  return under;
 }
-function stageGlyphs(ctx, atlasId, fieldScale, synthBold) {
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, synthBold) || slotForAtlas(ctx.batchState, atlasId) < 0)) {
+function stageGlyphs(ctx, atlasId, fieldScale) {
+  const colorMatrix = IDENTITY_COLOR_MATRIX ;
+  const alpha = 1 ;
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, colorMatrix, alpha) || slotForAtlas(open, atlasId) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
   const staged = openRun(ctx);
-  staged.synthBold = synthBold;
   let slot = slotForAtlas(staged, atlasId);
   if (slot > staged.textures.length) {
     staged.textures.push({ kind: "atlas", id: atlasId, fieldScale });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  return withMatrix(slot, takeMatrix(staged, colorMatrix, alpha));
 }
 function stageRamps(ctx, stops, space, vertices) {
   if (ctx.gradRamps.wouldReshape(stops, space)) flushBatch(ctx);
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState) || slotForRamps(ctx.batchState) < 0)) {
+  const under = texturedUnder(ctx, true);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForRamps(open) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(vertices)) flushBatch(ctx);
   const staged = openRun(ctx);
-  let slot = slotForRamps(staged);
-  if (slot > staged.textures.length) {
-    staged.textures.push({ kind: "ramps" });
-    slot = staged.textures.length;
-  }
-  return { staged, slot, rowV: ctx.gradRamps.rowV(ctx.gradRamps.upload(stops, space)) };
-}
-function stagedAlpha(ctx, staged, opacity) {
-  return (opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  const slot = slotForRamps(staged);
+  staged.ramps = true;
+  return {
+    slot: withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha)),
+    tint: under.tint,
+    rowV: ctx.gradRamps.rowV(ctx.gradRamps.upload(stops, space))
+  };
 }
-function stagedColor(ctx, staged, paint) {
+function stagedColor(ctx, paint) {
   const [r, g, b, a] = resolveColor(paint.color);
-  return [r, g, b, a * stagedAlpha(ctx, staged, paint.opacity)];
+  return foldColor(ctx, r, g, b, a * (paint.opacity ?? 1));
 }
 function pushRect(ctx, rect, fill) {
-  const staged = stageSolid(ctx, 4);
-  const [r, g, b, a] = stagedColor(ctx, staged, fill);
+  const slot = stageSolid(ctx, 4);
+  const [r, g, b, a] = stagedColor(ctx, fill);
   if (!ctx.drawBatch.pushRect(
     rect.x,
     rect.y,
@@ -1906,18 +2120,19 @@ function pushRect(ctx, rect, fill) {
     r,
     g,
     b,
-    a
+    a,
+    slot
   )) retryUncut(ctx, rect, fill, pushRect);
 }
 function pushMesh(ctx, mesh, paint) {
-  const staged = stageSolid(ctx, mesh.vertices.length >> 1);
-  const [r, g, b, a] = stagedColor(ctx, staged, paint);
-  if (!ctx.drawBatch.pushMesh(mesh, ctx.state.transform, r, g, b, a)) {
+  const slot = stageSolid(ctx, mesh.vertices.length >> 1);
+  const [r, g, b, a] = stagedColor(ctx, paint);
+  if (!ctx.drawBatch.pushMesh(mesh, ctx.state.transform, r, g, b, a, slot)) {
     retryUncut(ctx, mesh, paint, pushMesh);
   }
 }
 function pushRampRect(ctx, rect, paint) {
-  const { staged, slot, rowV } = stageRamps(ctx, paint.stops, paint.space, 4);
+  const { slot, tint, rowV } = stageRamps(ctx, paint.stops, paint.space, 4);
   const { uv, post } = rampVertices(paint, rowV);
   if (!ctx.drawBatch.pushGradientRect(
     rect.x,
@@ -1929,14 +2144,14 @@ function pushRampRect(ctx, rect, paint) {
     post,
     slot,
     paint.mode,
-    1,
-    1,
-    1,
-    stagedAlpha(ctx, staged, paint.opacity)
+    tint[0],
+    tint[1],
+    tint[2],
+    (paint.opacity ?? 1) * tint[3]
   )) retryUncut(ctx, rect, paint, pushRampRect);
 }
 function pushRampMesh(ctx, mesh, paint) {
-  const { staged, slot, rowV } = stageRamps(ctx, paint.stops, paint.space, mesh.vertices.length >> 1);
+  const { slot, tint, rowV } = stageRamps(ctx, paint.stops, paint.space, mesh.vertices.length >> 1);
   const { uv, post } = rampVertices(paint, rowV);
   if (!ctx.drawBatch.pushGradientMesh(
     mesh,
@@ -1945,10 +2160,10 @@ function pushRampMesh(ctx, mesh, paint) {
     post,
     slot,
     paint.mode,
-    1,
-    1,
-    1,
-    stagedAlpha(ctx, staged, paint.opacity)
+    tint[0],
+    tint[1],
+    tint[2],
+    (paint.opacity ?? 1) * tint[3]
   )) retryUncut(ctx, mesh, paint, pushRampMesh);
 }
 function tryStageFill(ctx, mesh, paint) {
@@ -1960,6 +2175,23 @@ function tryStageFill(ctx, mesh, paint) {
   flushForOwnDraw(ctx);
   return false;
 }
+var NO_FIELD = [0, 0];
+function stageColorGlyphs(ctx, atlasId) {
+  const under = texturedUnder(ctx, false);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForAtlas(open, atlasId) < 0)) {
+    flushBatch(ctx);
+  }
+  if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
+  const staged = openRun(ctx);
+  let slot = slotForAtlas(staged, atlasId);
+  if (slot > staged.textures.length) {
+    staged.textures.push({ kind: "atlas", id: atlasId, fieldScale: NO_FIELD });
+    slot = staged.textures.length;
+  }
+  under.slot = withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha));
+  return under;
+}
 function patternTileSpace(spaceInverse, origin, transform) {
   const [a, b, c, d] = transform ?? [1, 0, 0, 1];
   const placement = mat3.fromAffine([a, b, c, d, origin.x, origin.y]);
@@ -2004,7 +2236,7 @@ function unownedPaintResources(gl) {
   return made;
 }
 function bindPattern(ctx, prog, fill, model) {
-  const tex = fill.pattern;
+  const tex = fill.texture;
   const entry = getTexture(tex.id);
   if (!entry) {
     const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
@@ -2020,8 +2252,10 @@ function bindPattern(ctx, prog, fill, model) {
   gl.useProgram(prog.handle);
   setProjAndModel(ctx, prog, model);
   setColorMatrixUniforms(ctx, prog);
-  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(tileSpace));
   const [tw, th] = textureSize(entry.source);
+  tileSpace[6] -= Math.floor(tileSpace[6] / tw) * tw;
+  tileSpace[7] -= Math.floor(tileSpace[7] / th) * th;
+  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(tileSpace));
   gl.uniform2f(prog.uniform("u_tileSize"), tw, th);
   ctx.textureCache.bind(tex.id, 0);
   gl.uniform1i(prog.uniform("u_sampler"), 0);
@@ -2037,37 +2271,36 @@ function textureSize(source) {
 function bindGradient(ctx, prog, fill, model) {
   const inverse = gradientSpaceInverse(ctx, fill.units);
   if (!inverse) return null;
+  const about = fill.kind === "linear-gradient" ? fill.from : fill.center;
+  const aboutStart = mat3.multiply(mat3.translated(mat3.identity(), -about.x, -about.y), inverse);
   const gl = ctx.gl;
   const row = ctx.gradRamps.upload(fill.stops, fill.interpolate ?? "rgb");
   gl.useProgram(prog.handle);
   setProjAndModel(ctx, prog, model);
-  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(inverse));
+  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(aboutStart));
   setColorMatrixUniforms(ctx, prog);
   ctx.gradRamps.bind(0);
   gl.uniform1i(prog.uniform("u_ramp"), 0);
   gl.uniform1f(prog.uniform("u_rampV"), ctx.gradRamps.rowV(row));
   setAlphaUniform(ctx, prog, ctx.state.alpha);
   gl.uniform1f(prog.uniform("u_opacity"), fill.opacity ?? 1);
-  if (fill.fill === "linear-gradient") {
+  if (fill.kind === "linear-gradient") {
     gl.uniform1i(prog.uniform("u_gradKind"), 0);
     const dx = fill.to.x - fill.from.x;
     const dy = fill.to.y - fill.from.y;
     const len = Math.hypot(dx, dy) || 1;
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.from.x, fill.from.y);
     gl.uniform2f(prog.uniform("u_gradDir"), dx / len, dy / len);
     gl.uniform1f(prog.uniform("u_gradLen"), len);
     gl.uniform1f(prog.uniform("u_gradRadius"), 0);
     gl.uniform1f(prog.uniform("u_gradAngle"), 0);
-  } else if (fill.fill === "radial-gradient") {
+  } else if (fill.kind === "radial-gradient") {
     gl.uniform1i(prog.uniform("u_gradKind"), 1);
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.center.x, fill.center.y);
     gl.uniform2f(prog.uniform("u_gradDir"), 0, 0);
     gl.uniform1f(prog.uniform("u_gradLen"), 0);
     gl.uniform1f(prog.uniform("u_gradRadius"), fill.radius);
     gl.uniform1f(prog.uniform("u_gradAngle"), 0);
   } else {
     gl.uniform1i(prog.uniform("u_gradKind"), 2);
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.center.x, fill.center.y);
     gl.uniform2f(prog.uniform("u_gradDir"), 0, 0);
     gl.uniform1f(prog.uniform("u_gradLen"), 0);
     gl.uniform1f(prog.uniform("u_gradRadius"), 0);
@@ -2078,12 +2311,11 @@ function bindGradient(ctx, prog, fill, model) {
 
 // src/draw/pathPaint.ts
 function drawPath(ctx, cmd) {
-  if (cmd.fill) drawPathFill(ctx, cmd);
+  if (cmd.fill?.paint) drawPathFill(ctx, cmd, cmd.fill.paint);
   if (cmd.stroke?.paint) drawPathStroke(ctx, cmd);
 }
-function drawPathFill(ctx, cmd) {
-  const fill = cmd.fill;
-  const isSolid2 = fill.fill === void 0 || fill.fill === "solid";
+function drawPathFill(ctx, cmd, fill) {
+  const isSolid2 = fill.kind === void 0 || fill.kind === "solid";
   const hasVColors = !!(cmd.vertexColors && cmd.vertexColors.length > 0);
   const solid = fill;
   const paint = batchPaint(ctx, fill, hasVColors);
@@ -2161,9 +2393,9 @@ function drawPathFillVColor(ctx, cmd, fill, handle) {
   gl.bindVertexArray(null);
 }
 function bindPathFillByKind(ctx, fill) {
-  const kind = fill.fill ?? "solid";
+  const kind = fill.kind ?? "solid";
   if (kind === "solid") return bindPathFillSolid(ctx, fill);
-  if (kind === "pattern") return bindPathFillPattern(ctx, fill);
+  if (kind === "texture") return bindPathFillPattern(ctx, fill);
   if (kind === "linear-gradient" || kind === "radial-gradient" || kind === "conic-gradient") {
     return bindPathFillGradient(ctx, fill);
   }
@@ -2224,7 +2456,7 @@ function drawPathStroke(ctx, rawCmd) {
 function drawPathStrokeUnclipped(ctx, cmd, spaces) {
   const stroke = cmd.stroke;
   const paint = stroke.paint;
-  const isSolid2 = paint.fill === void 0 || paint.fill === "solid";
+  const isSolid2 = paint.kind === void 0 || paint.kind === "solid";
   const solid = paint;
   const mesh = strokeMesh(cmd.path, stroke, ctx.flattenTolerance, spaces);
   if (mesh.indices.length === 0) return;
@@ -2273,7 +2505,7 @@ function doubledVertexWidths(widths) {
 function drawPathStrokeStenciled(ctx, cmd, align, spaces) {
   const stroke = cmd.stroke;
   const paint = stroke.paint;
-  const isSolid2 = paint.fill === void 0 || paint.fill === "solid";
+  const isSolid2 = paint.kind === void 0 || paint.kind === "solid";
   const solid = paint;
   const widerStroke = {
     ...stroke,
@@ -2333,10 +2565,9 @@ function outlineGroupMesh(group, dx, dy) {
 }
 function outlineGroupStrokeMesh(group, dx, dy, transform) {
   const stroke = group.stroke;
-  if (!stroke) return null;
+  if (!strokeHasInk(stroke)) return null;
   const width = stroke.width ?? 1;
   if (typeof width === "object") {
-    if (!(width.px > 0)) return null;
     const shear = shearOf(group);
     const [a, b, c, d] = [transform[0], transform[1], transform[3], transform[4]];
     return mergeGlyphMeshes(group, dx, dy, (glyph) => {
@@ -2355,7 +2586,6 @@ function outlineGroupStrokeMesh(group, dx, dy, transform) {
       );
     });
   }
-  if (!(width > 0)) return null;
   return mergeGlyphMeshes(group, dx, dy, (glyph) => glyph.scale > 0 ? outlineStrokeMesh(
     glyph.key,
     glyph.d,
@@ -2395,6 +2625,49 @@ function mergeGlyphMeshes(group, dx, dy, meshFor) {
   }
   return { vertices, indices };
 }
+function drawColorGlyphs(ctx, group, dx, dy) {
+  const fill = group.fill?.paint;
+  if (fill === void 0 || group.quads.length === 0) return;
+  if (!syncColorPageTexture(ctx.textureCache, group.page)) return;
+  const opacity = isSolidPaint(fill) ? resolveColor(fill.color)[3] : 1;
+  const atlasId = colorPageTextureId(group.page);
+  const batch = ctx.drawBatch;
+  const m = ctx.state.transform;
+  let { slot, tint } = stageColorGlyphs(ctx, atlasId);
+  const restage = () => {
+    ({ slot, tint } = stageColorGlyphs(ctx, atlasId));
+  };
+  for (const q of group.quads) {
+    if (batch.wouldOverflow(4)) {
+      flushBatch(ctx);
+      restage();
+    }
+    let cut;
+    while (!batch.pushQuad(
+      q.x0 + dx,
+      q.y0 + dy,
+      q.x1 - q.x0,
+      q.y1 - q.y0,
+      m,
+      q.u0,
+      q.v0,
+      q.u1,
+      q.v1,
+      opacity * tint[3],
+      slot,
+      tint[0],
+      tint[1],
+      tint[2]
+    )) {
+      cut = enterUncut(ctx);
+      restage();
+    }
+    if (cut !== void 0) {
+      leaveUncut(ctx, cut);
+      restage();
+    }
+  }
+}
 
 // src/draw/scratchPass.ts
 var UNIT_QUAD = {
@@ -2403,7 +2676,7 @@ var UNIT_QUAD = {
 };
 function renderPaintToScratch(ctx, fill, rect) {
   const scratch = ctx.paintScratch;
-  const bind = getPaintDrawKind(fill.fill)?.bind;
+  const bind = getPaintDrawKind(fill.kind)?.bind;
   if (!scratch || !bind) return null;
   const ratio = ctx.deviceWidth && ctx.widthCss > 0 ? ctx.deviceWidth / ctx.widthCss : 1;
   const deviceW = ctx.deviceWidth ?? Math.round(ctx.widthCss);
@@ -2492,21 +2765,22 @@ function drawText(ctx, cmd) {
     align,
     direction,
     tabSize: style.tabSize,
-    justify: cmd.justify,
-    outlineMinSize
+    justify: cmd.justify
   });
-  if (laid.groups.length === 0 && laid.decorations.length === 0) return;
+  const { groups, decorations } = cachedPaintRuns(laid, cmd.runs, { outlineMinSize });
+  if (groups.length === 0 && decorations.length === 0) return;
   const dx = cmd.x;
   const dy = cmd.y + verticalAlignOffset(cmd.verticalAlign, cmd.height, laid.bounds.height);
-  for (const group of laid.groups) {
+  for (const group of groups) {
     if (group.source === "outline") drawTextOutlineGroup(ctx, group, dx, dy);
+    else if (group.source === "color") drawColorGlyphs(ctx, group, dx, dy);
     else drawTextGroup(ctx, group, dx, dy);
   }
-  drawTextDecorations(ctx, laid.decorations, dx, dy);
+  drawTextDecorations(ctx, decorations, dx, dy);
 }
 function drawTextOutlineGroup(ctx, group, dx, dy) {
-  const fill = group.fill;
-  if (fill !== null) {
+  const fill = group.fill?.paint;
+  if (fill !== void 0) {
     const mesh = outlineGroupMesh(group, dx, dy);
     if (mesh) drawOutlineMesh(ctx, fill, mesh);
   }
@@ -2523,24 +2797,28 @@ function drawOutlineMesh(ctx, fill, mesh) {
 }
 function drawTextDecorations(ctx, decorations, dx, dy) {
   for (const d of decorations) {
-    if (glyphPaintKindOf(d.fill) !== null) {
-      drawOutlineMesh(ctx, d.fill, ruleMesh(d.x0 + dx, d.y0 + dy, d.x1 + dx, d.y1 + dy));
+    const paint = d.fill.paint;
+    if (paint === void 0) continue;
+    if (glyphPaintKindOf(paint) !== null) {
+      drawOutlineMesh(ctx, paint, ruleMesh(d.x0 + dx, d.y0 + dy, d.x1 + dx, d.y1 + dy));
       continue;
     }
-    const [r, g, b, a] = "color" in d.fill ? resolveColor(d.fill.color) : [0, 0, 0, 1];
+    const [r, g, b, a] = isSolidPaint(paint) ? resolveColor(paint.color) : [0, 0, 0, 1];
     let cut;
     for (; ; ) {
-      const staged = stageSolid(ctx, 4);
+      const slot = stageSolid(ctx, 4);
+      const rgba = foldColor(ctx, r, g, b, a);
       if (ctx.drawBatch.pushRect(
         d.x0 + dx,
         d.y0 + dy,
         d.x1 - d.x0,
         d.y1 - d.y0,
         ctx.state.transform,
-        r,
-        g,
-        b,
-        a * (staged.foldsAlpha ? ctx.state.alpha : 1)
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3],
+        slot
       )) break;
       cut = enterUncut(ctx);
     }
@@ -2572,21 +2850,22 @@ function drawTextGroup(ctx, group, dx, dy) {
   if (!fieldScale) return;
   const bold = group.synthetic.bold ? SYNTH_BOLD_AMOUNT : 0;
   const tanItalic = group.synthetic.italic ? Math.tan(SYNTHETIC_ITALIC_RADIANS) : 0;
-  const paintKind = glyphPaintKindOf(group.fill);
+  const fill = group.fill?.paint;
+  if (fill === void 0) return;
+  const paintKind = glyphPaintKindOf(fill);
   if (paintKind !== null) {
     drawPaintedGlyphs(ctx, group, dx, dy, paintKind, atlasId, mode, bold, tanItalic, fieldScale);
     return;
   }
-  const color = group.fill !== null && "color" in group.fill ? resolveColor(group.fill.color) : [0, 0, 0, 1];
+  const color = isSolidPaint(fill) ? resolveColor(fill.color) : [0, 0, 0, 1];
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let { staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold);
-  let alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  let slot = stageGlyphs(ctx, atlasId, fieldScale);
+  const rgba = foldColor(ctx, color[0], color[1], color[2], color[3]);
   for (const q of group.quads) {
     if (batch.wouldOverflow(4)) {
       flushBatch(ctx);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     let cut;
     while (!batch.pushGlyph(
@@ -2601,27 +2880,26 @@ function drawTextGroup(ctx, group, dx, dy) {
       q.v0,
       q.u1,
       q.v1,
-      color[0],
-      color[1],
-      color[2],
-      alpha,
+      rgba[0],
+      rgba[1],
+      rgba[2],
+      rgba[3],
       slot,
-      mode
+      mode,
+      bold
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
   }
 }
 function glyphPaintKindOf(fill) {
-  const kind = fill?.fill ?? "solid";
-  if (kind === "pattern") return "pattern";
+  const kind = fill.kind ?? "solid";
+  if (kind === "texture") return "pattern";
   if (kind === "linear-gradient" || kind === "radial-gradient" || kind === "conic-gradient") {
     return "gradient";
   }
@@ -2632,7 +2910,7 @@ function drawPaintedGlyphs(ctx, group, dx, dy, kind, atlasId, mode, bold, tanIta
   const prog = ctx.glyphPaintProgram?.(kind);
   if (!prog) return;
   flushForOwnDraw(ctx);
-  const fill = group.fill;
+  const fill = group.fill.paint;
   const m = ctx.state.transform;
   let bound;
   if (kind === "pattern") {
@@ -2672,7 +2950,8 @@ function drawPaintedGlyphs(ctx, group, dx, dy, kind, atlasId, mode, bold, tanIta
       1,
       1,
       GLYPH_PAINT_ATLAS_UNIT,
-      mode
+      mode,
+      0
     );
   }
   drawStagedGlyphs(ctx);
@@ -2713,9 +2992,22 @@ function glyphScreenBounds(group, dx, dy, tanItalic, m) {
 var SPRITE_STRIDE = 9;
 
 // src/draw/image.ts
+var MINIFIED = 2;
+function minifiedLimits(ctx) {
+  const m = ctx.state.transform;
+  const dpr = ctx.deviceWidth && ctx.widthCss ? ctx.deviceWidth / ctx.widthCss : 1;
+  const k = (MINIFIED * dpr) ** 2;
+  return [k * (m[0] * m[0] + m[1] * m[1]), k * (m[3] * m[3] + m[4] * m[4])];
+}
+var isMinified = (limit, sw, sh, dw, dh) => sw * sw >= limit[0] * dw * dw || sh * sh >= limit[1] * dh * dh;
 function drawImage(ctx, cmd) {
   ctx.imageCache.upload(cmd.image, cmd.image);
-  const { staged, slot } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
+  if (ctx.imageCache.lacksMipmaps(cmd.image)) {
+    const sw = cmd.source?.w ?? cmd.image.width;
+    const sh = cmd.source?.h ?? cmd.image.height;
+    if (isMinified(minifiedLimits(ctx), sw, sh, cmd.w, cmd.h)) ctx.imageCache.buildMipmaps(cmd.image);
+  }
+  const { slot, tint } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
   const src = cmd.source;
   let u0 = 0, v0 = 0, u1 = 1, v1 = 1;
   if (src) {
@@ -2745,11 +3037,12 @@ function drawImage(ctx, cmd) {
     v0,
     u1,
     v1,
-    // Group alpha rides the vertices only where it rode the solid colors too:
-    // with a real color matrix in the run it is `u_alpha`, and folding it here
-    // as well would apply it twice.
-    (cmd.opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1),
-    slot
+    // Group alpha rides here with the opacity, in the tint's fourth channel.
+    (cmd.opacity ?? 1) * tint[3],
+    slot,
+    tint[0],
+    tint[1],
+    tint[2]
   )) retryUncut(ctx, cmd, void 0, drawImage);
 }
 function drawSprites(ctx, cmd) {
@@ -2757,18 +3050,24 @@ function drawSprites(ctx, cmd) {
   const count = Math.floor(data.length / SPRITE_STRIDE);
   if (count === 0) return;
   ctx.imageCache.upload(cmd.image, cmd.image);
+  if (ctx.imageCache.lacksMipmaps(cmd.image)) {
+    const limit = minifiedLimits(ctx);
+    for (let i = 0; i < count * SPRITE_STRIDE; i += SPRITE_STRIDE) {
+      if (!isMinified(limit, data[i + 6], data[i + 7], data[i + 2], data[i + 3])) continue;
+      ctx.imageCache.buildMipmaps(cmd.image);
+      break;
+    }
+  }
   const sampling = cmd.sampling ?? "linear";
-  let { staged, slot } = stageImage(ctx, cmd.image, sampling);
+  let { slot, tint } = stageImage(ctx, cmd.image, sampling);
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
   const tw = cmd.image.width;
   const th = cmd.image.height;
   for (let s = 0, i = 0; s < count; s++, i += SPRITE_STRIDE) {
     if (batch.wouldOverflow(4)) {
       flushBatch(ctx);
-      ({ staged, slot } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
     const sx = data[i + 4], sy = data[i + 5], sw = data[i + 6], sh = data[i + 7];
     let cut;
@@ -2782,17 +3081,18 @@ function drawSprites(ctx, cmd) {
       sy / th,
       (sx + sw) / tw,
       (sy + sh) / th,
-      data[i + 8] * groupAlpha,
-      slot
+      data[i + 8] * tint[3],
+      slot,
+      tint[0],
+      tint[1],
+      tint[2]
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
   }
 }
@@ -2842,7 +3142,7 @@ function drawGroupWithEffects(ctx, cmd, targets, width, height) {
   flushBatch(ctx);
   gl.disable(gl.BLEND);
   gl.disable(gl.STENCIL_TEST);
-  for (const effect of cmd.effects) {
+  for (const effect of cmd.effects ?? []) {
     const program = ctx.ensureProgram?.(effect.program.id) ?? null;
     if (!program) {
       warnOnceUniform(effect.program.id, "(program)");
@@ -2875,15 +3175,21 @@ function drawGroupWithEffects(ctx, cmd, targets, width, height) {
   const composite = ctx.ensureProgram?.(compositeProgramId()) ?? null;
   if (composite) {
     applyClipTest(ctx);
+    const ownBlend = isOwnComposite(cmd.composite);
+    if (ownBlend) applyComposite(gl, cmd.composite);
     drawFullscreenQuad(ctx, composite, front.texture, width, height, void 0, {
       alpha: composited.alpha,
       colorMatrix: composited.colorMatrix
     });
+    if (ownBlend) applyComposite(gl, "source-over");
   }
   targets.release(front);
 }
+function ownsSurface(cmd) {
+  return cmd.isolate === true || isOwnComposite(cmd.composite) || cmd.effects !== void 0 && cmd.effects.length > 0;
+}
 function drawGroup(ctx, cmd) {
-  if (cmd.effects && cmd.effects.length > 0 && ctx.effectTargets && ctx.deviceWidth && ctx.deviceHeight) {
+  if (ownsSurface(cmd) && ctx.effectTargets && ctx.deviceWidth && ctx.deviceHeight) {
     if (cmd.clip) {
       ctx.state.push({ transform: cmd.transform });
       try {
@@ -2985,8 +3291,7 @@ var EffectTargets = class {
   }
   /**
    * Borrow a target sized `width` × `height` device pixels. A size change
-   * drops every pooled buffer rather than resizing in place: a borrowed one
-   * cannot be resized under its holder, and a resize is not a per-frame event.
+   * drops every pooled buffer, borrowed ones included.
    */
   acquire(width, height) {
     if (width !== this.width || height !== this.height) {
@@ -3289,9 +3594,12 @@ var GLYPH_PAINT_SOURCES = {
 var WeaselRenderer = class {
   gl;
   stats = { drawCalls: 0, ms: 0, spans: [] };
+  /** Built on the first frame that draws with each, so a one-shot render of
+   *  plain shapes builds the batch program alone. */
   pathFill;
   pathFillVColor;
   batchFill;
+  batchFillMatrices;
   gradFill;
   patternFill;
   /** Compiled on first use: only atlas text under a texture paint needs one. */
@@ -3362,10 +3670,6 @@ var WeaselRenderer = class {
     if (this.canvas) {
       this.canvas.width = Math.round(opts.width * opts.dpr);
       this.canvas.height = Math.round(opts.height * opts.dpr);
-      if (this.canvas.style) {
-        this.canvas.style.width = `${opts.width}px`;
-        this.canvas.style.height = `${opts.height}px`;
-      }
     }
     const lossTarget = this.canvas ?? this.gl.canvas ?? null;
     if (lossTarget && typeof lossTarget.addEventListener === "function") {
@@ -3375,21 +3679,12 @@ var WeaselRenderer = class {
     }
     this.applyGlState();
     this.applyTarget();
-    this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
-    this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
-    this.pathFillVColor = new ShaderProgram(this.gl, VCOLOR_VERT_SRC, VCOLOR_FRAG_SRC);
-    this.pathFillVColor.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFillVColor.lookupAttributes(PATH_FILL_VCOLOR_ATTRIBUTES);
-    this.batchFill = new ShaderProgram(this.gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
-    this.batchFill.lookupUniforms(BATCH_FILL_UNIFORMS);
-    this.batchFill.lookupAttributes(BATCH_FILL_ATTRIBUTES);
-    this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
-    this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
-    this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
-    this.patternFill = new ShaderProgram(this.gl, PATTERN_VERT_SRC, PATTERN_FRAG_SRC);
-    this.patternFill.lookupUniforms(PATTERN_FILL_UNIFORMS);
-    this.patternFill.lookupAttributes(PATTERN_FILL_ATTRIBUTES);
+    this.pathFill = new LazyProgram(this.gl, PATH_FILL_SPEC);
+    this.pathFillVColor = new LazyProgram(this.gl, PATH_FILL_VCOLOR_SPEC);
+    this.gradFill = new LazyProgram(this.gl, GRAD_FILL_SPEC);
+    this.patternFill = new LazyProgram(this.gl, PATTERN_FILL_SPEC);
+    this.batchFillMatrices = new LazyProgram(this.gl, BATCH_FILL_MATRICES_SPEC);
+    this.batchFill = createBatchFill(this.gl);
     this.meshCache = new GLMeshCache(this.gl);
     this.textureCache = new GLTextureCache(this.gl);
     this.imageCache = new GLImageCache(this.gl, this.imageMinification);
@@ -3398,6 +3693,9 @@ var WeaselRenderer = class {
     this.drawBatch = new DrawBatch(this.gl, this.batchFill);
     this.whiteTexture = createWhiteTexture(this.gl);
   }
+  lazyPrograms() {
+    return [this.pathFill, this.pathFillVColor, this.gradFill, this.patternFill, this.batchFillMatrices];
+  }
   uploadQuadGeometry() {
     const gl = this.gl;
     this.quadVbo = gl.createBuffer();
@@ -3415,12 +3713,11 @@ var WeaselRenderer = class {
   /**
    * Compile a consumer-registered shader program against this renderer's GL context.
    *
-   * Call once per renderer after the module-level `registerProgram()`.
-   * Throws `ShaderCompileError` if compilation fails.
+   * Optional: a program compiles on the first frame that draws with it. Call
+   * this after the module-level `registerProgram()` to pay for the compile
+   * before that frame, or to catch the `ShaderCompileError` it throws.
    *
    * In dev mode, calling again with the same handle replaces the compiled program.
-   *
-   * @experimental
    */
   registerProgram(handle) {
     if (this.disposed) return;
@@ -3499,8 +3796,6 @@ var WeaselRenderer = class {
     gl.bindVertexArray(null);
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
   }
-  /** Viewport and scissor for this frame. Re-applied inside `render()` because
-   *  a co-tenant on the same context moves both between our frames. */
   /** This renderer's rect in device pixels, top-left origin. A tile rounds its
    *  edges rather than its size, so two that share a CSS edge share a device one. */
   deviceRect() {
@@ -3515,6 +3810,8 @@ var WeaselRenderer = class {
       height: Math.round((oy + this.heightCss) * this.dpr) - y
     };
   }
+  /** Viewport and scissor for this frame. Re-applied inside `render()` because
+   *  a co-tenant on the same context moves both between our frames. */
   applyTarget() {
     const gl = this.gl;
     const { x, y, width, height } = this.deviceRect();
@@ -3552,21 +3849,8 @@ var WeaselRenderer = class {
     this.paintScratch.release();
     this.paintResources.release();
     this.paintResources = createPaintResources();
-    this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
-    this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
-    this.pathFillVColor = new ShaderProgram(this.gl, VCOLOR_VERT_SRC, VCOLOR_FRAG_SRC);
-    this.pathFillVColor.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFillVColor.lookupAttributes(PATH_FILL_VCOLOR_ATTRIBUTES);
-    this.batchFill = new ShaderProgram(this.gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
-    this.batchFill.lookupUniforms(BATCH_FILL_UNIFORMS);
-    this.batchFill.lookupAttributes(BATCH_FILL_ATTRIBUTES);
-    this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
-    this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
-    this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
-    this.patternFill = new ShaderProgram(this.gl, PATTERN_VERT_SRC, PATTERN_FRAG_SRC);
-    this.patternFill.lookupUniforms(PATTERN_FILL_UNIFORMS);
-    this.patternFill.lookupAttributes(PATTERN_FILL_ATTRIBUTES);
+    for (const lazy of this.lazyPrograms()) lazy.abandon();
+    this.batchFill = createBatchFill(this.gl);
     this.glyphPaintPrograms.clear();
     this.meshCache = new GLMeshCache(this.gl);
     this.textureCache = new GLTextureCache(this.gl);
@@ -3589,14 +3873,9 @@ var WeaselRenderer = class {
     }
   }
   /** Free every GL resource this renderer created and detach its
-   *  context-loss listeners. Idempotent.
-   *
-   *  That covers the built-in and consumer-registered programs (their shaders
-   *  go with them), the shared quad geometry, the batch, the effect targets,
-   *  and every cache: atlas and gradient-ramp textures, bitmap and pattern
-   *  textures, and meshes — transient, persistent, and those whose Path was
-   *  already collected. The context itself is left alone, so a caller-owned
-   *  context can host renderer after renderer without accumulating anything.
+   *  context-loss listeners. Idempotent. The context itself is left alone, so
+   *  a caller-owned context can host renderer after renderer without
+   *  accumulating anything.
    *
    *  A disposed renderer ignores further `render()` and `registerProgram()`
    *  calls. */
@@ -3610,14 +3889,8 @@ var WeaselRenderer = class {
     }
     this.meshCache.dispose();
     this.paintResources.release();
-    for (const prog of [
-      this.pathFill,
-      this.pathFillVColor,
-      this.batchFill,
-      this.gradFill,
-      this.patternFill,
-      ...this.glyphPaintPrograms.values()
-    ]) {
+    for (const lazy of this.lazyPrograms()) lazy.release();
+    for (const prog of [this.batchFill, ...this.glyphPaintPrograms.values()]) {
       gl.deleteProgram(prog.handle);
     }
     this.glyphPaintPrograms.clear();
@@ -3653,7 +3926,7 @@ var WeaselRenderer = class {
     this.stats = { drawCalls: 0, ms: 0, spans: spanStats };
     const gl = this.gl;
     this.meshCache.drainPendingDeletes();
-    this.imageCache.drainPendingDeletes();
+    this.imageCache.beginFrame();
     this.textureCache.sweep(textureRegistry);
     this.refreshPrograms();
     resetBakeBudget(this.bakeBudget);
@@ -3668,13 +3941,25 @@ var WeaselRenderer = class {
       gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
     }
     const device = this.deviceRect();
+    const { pathFill, pathFillVColor, gradFill, patternFill, batchFillMatrices } = this;
     const ctx = {
       gl,
-      pathFill: this.pathFill,
-      pathFillVColor: this.pathFillVColor,
+      get pathFill() {
+        return pathFill.get();
+      },
+      get pathFillVColor() {
+        return pathFillVColor.get();
+      },
       batchFill: this.batchFill,
-      gradFill: this.gradFill,
-      patternFill: this.patternFill,
+      get batchFillMatrices() {
+        return batchFillMatrices.get();
+      },
+      get gradFill() {
+        return gradFill.get();
+      },
+      get patternFill() {
+        return patternFill.get();
+      },
       meshCache: this.meshCache,
       textureCache: this.textureCache,
       imageCache: this.imageCache,
@@ -3739,10 +4024,6 @@ var WeaselRenderer = class {
     if (this.canvas) {
       this.canvas.width = Math.round(dims.width * dims.dpr);
       this.canvas.height = Math.round(dims.height * dims.dpr);
-      if (this.canvas.style) {
-        this.canvas.style.width = `${dims.width}px`;
-        this.canvas.style.height = `${dims.height}px`;
-      }
     }
     this.applyTarget();
   }
@@ -3752,11 +4033,11 @@ var WeaselRenderer = class {
   }
   /** @internal */
   _pathFill() {
-    return this.pathFill;
+    return this.pathFill.get();
   }
   /** @internal */
   _pathFillVColor() {
-    return this.pathFillVColor;
+    return this.pathFillVColor.get();
   }
   /** @internal */
   _drawBatch() {
@@ -3767,12 +4048,16 @@ var WeaselRenderer = class {
     return this.batchFill;
   }
   /** @internal */
+  _batchFillMatrices() {
+    return this.batchFillMatrices.get();
+  }
+  /** @internal */
   _gradFill() {
-    return this.gradFill;
+    return this.gradFill.get();
   }
   /** @internal */
   _patternFill() {
-    return this.patternFill;
+    return this.patternFill.get();
   }
   /** @internal */
   _meshCache() {
@@ -3867,6 +4152,7 @@ function cullOne(cmd, m, box) {
   switch (cmd.kind) {
     case "group": {
       if (cmd.effects && cmd.effects.length > 0) return cmd;
+      if (isOwnComposite(cmd.composite)) return cmd;
       const inner = cmd.transform ? mat3.multiply(m, cmd.transform) : m;
       const children = cullList(cmd.children, inner, box);
       if (children === cmd.children) return cmd;
@@ -4070,15 +4356,15 @@ function textCommandFromPose(pose, scale = 1) {
   };
 }
 function runsInPoseFrame(runs, box) {
-  if (runs.every((r) => isSolid(r.fill) && isSolid(r.stroke?.paint))) return runs;
+  if (runs.every((r) => isSolid(r.fill?.paint) && isSolid(r.stroke?.paint))) return runs;
   return runs.map((r) => {
     const fill = r.fill && commandFill(r.fill, box);
-    const paint = r.stroke?.paint && commandFill(r.stroke.paint, box);
+    const paint = r.stroke?.paint && commandPaint(r.stroke.paint, box);
     return { ...r, fill, stroke: r.stroke && { ...r.stroke, paint: paint || void 0 } };
   });
 }
 function isSolid(paint) {
-  return paint == null || (paint.fill ?? "solid") === "solid";
+  return paint == null || isSolidPaint(paint);
 }
 
 export { EFFECT_KIT_UNIFORMS, EFFECT_VERT_SRC, IDENTITY_COLOR_MATRIX, OUTLINE_MIN_SCREEN_PX, SPRITE_STRIDE, ShaderCompileError, WeaselRenderer, blur, boundsMissRect, buildGradientRamp, cullDrawCommands, frameRect, registerEffect, strokeReachAt, textCommand, textCommandFromPose, textCommandFromRuns, vignette };