@weasel-js/renderer 1.9.4 → 1.10.0

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, BATCH_VERT_SRC, BATCH_FRAG_SRC, BATCH_FILL_UNIFORMS, BATCH_FILL_ATTRIBUTES, STRAIGHT_RGB_GLSL, GLImageCache, DrawBatch, getProgramSource, commandFill, commandPaint, uploadPremultiplied, cachedMarkerCommands, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-LFD47OV2.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-LFD47OV2.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() {
@@ -320,10 +320,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);
 }
@@ -510,11 +511,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 +627,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 +646,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 +661,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 +672,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 +742,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 +779,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 +891,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 +1030,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 +1113,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 +1199,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 +1333,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;
   }
@@ -1693,9 +1768,41 @@ function isPxMarker(ref) {
 function resolvedMarker(ref, scale) {
   return { ...ref, size: resolveMarkerSize(ref, 0, quantizeStrokeScale(ref.size.px, scale)) };
 }
+
+// src/draw/foldColor.ts
+function isIdentityColorMatrix(cm) {
+  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+}
+var colorFolding = { enabled: true };
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function foldColor(ctx, staged, r, g, b, a) {
+  if (!staged.foldsAlpha) return [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(cm) {
+  if (isIdentityColorMatrix(cm)) return NO_TINT;
+  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]];
+}
+function stagedTint(staged, tint) {
+  return staged.foldsAlpha && tint !== null ? tint : NO_TINT;
+}
 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 +1813,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,16 +1887,14 @@ 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) {
+function stagedStateIsLive(ctx, staged, image, sampling, synthBold = 0, folds = false) {
   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);
+  if (staged.colorMatrix === colorMatrix || sameValues(staged.colorMatrix, colorMatrix)) return true;
+  return folds && staged.foldsAlpha;
 }
 function slotForBitmap(staged, image, sampling) {
   for (let i = 0; i < staged.textures.length; i++) {
@@ -1827,13 +1932,15 @@ 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);
+  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, 0, colorFolding.enabled)) {
+    flushBatch(ctx);
+  }
   if (ctx.drawBatch.wouldOverflow(vertices)) flushBatch(ctx);
-  return openRun(ctx);
+  return openRun(ctx, colorFolding.enabled);
 }
-function openRun(ctx) {
+function openRun(ctx, folds = false) {
   if (ctx.batchState === void 0) {
-    const colorMatrix = ctx.state.colorMatrix;
+    const colorMatrix = folds ? IDENTITY_COLOR_MATRIX : ctx.state.colorMatrix;
     const foldsAlpha = isIdentityColorMatrix(colorMatrix);
     ctx.batchState = {
       alpha: foldsAlpha ? 1 : ctx.state.alpha,
@@ -1847,24 +1954,25 @@ function openRun(ctx) {
   return ctx.batchState;
 }
 function stageImage(ctx, image, sampling) {
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, image, sampling)) {
+  const tint = textureTint(ctx.state.colorMatrix) ;
+  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, image, sampling, 0, tint !== null)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
-  const staged = openRun(ctx);
+  const staged = openRun(ctx, tint !== null);
   let slot = slotForBitmap(staged, image, sampling);
   if (slot > staged.textures.length) {
     staged.textures.push({ kind: "bitmap", image, sampling });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  return { staged, slot, tint: stagedTint(staged, tint) };
 }
 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)) {
+  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, synthBold, colorFolding.enabled) || slotForAtlas(ctx.batchState, atlasId) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
-  const staged = openRun(ctx);
+  const staged = openRun(ctx, colorFolding.enabled);
   staged.synthBold = synthBold;
   let slot = slotForAtlas(staged, atlasId);
   if (slot > staged.textures.length) {
@@ -1892,7 +2000,7 @@ function stagedAlpha(ctx, staged, opacity) {
 }
 function stagedColor(ctx, staged, paint) {
   const [r, g, b, a] = resolveColor(paint.color);
-  return [r, g, b, a * stagedAlpha(ctx, staged, paint.opacity)];
+  return foldColor(ctx, staged, r, g, b, a * (paint.opacity ?? 1));
 }
 function pushRect(ctx, rect, fill) {
   const staged = stageSolid(ctx, 4);
@@ -1960,6 +2068,20 @@ function tryStageFill(ctx, mesh, paint) {
   flushForOwnDraw(ctx);
   return false;
 }
+var NO_FIELD = [0, 0];
+function stageColorGlyphs(ctx, atlasId) {
+  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState) || slotForAtlas(ctx.batchState, 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;
+  }
+  return { staged, slot };
+}
 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 +2126,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;
@@ -2048,7 +2170,7 @@ function bindGradient(ctx, prog, fill, model) {
   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;
@@ -2058,7 +2180,7 @@ function bindGradient(ctx, prog, fill, model) {
     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);
@@ -2078,12 +2200,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 +2282,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 +2345,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 +2394,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 +2454,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 +2475,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 +2514,48 @@ 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 { staged, slot } = stageColorGlyphs(ctx, atlasId);
+  let alpha = opacity * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  const restage = () => {
+    ({ staged, slot } = stageColorGlyphs(ctx, atlasId));
+    alpha = opacity * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  };
+  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,
+      alpha,
+      slot
+    )) {
+      cut = enterUncut(ctx);
+      restage();
+    }
+    if (cut !== void 0) {
+      leaveUncut(ctx, cut);
+      restage();
+    }
+  }
+}
 
 // src/draw/scratchPass.ts
 var UNIT_QUAD = {
@@ -2403,7 +2564,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 +2653,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,11 +2685,13 @@ 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);
@@ -2537,10 +2701,7 @@ function drawTextDecorations(ctx, decorations, dx, dy) {
         d.x1 - d.x0,
         d.y1 - d.y0,
         ctx.state.transform,
-        r,
-        g,
-        b,
-        a * (staged.foldsAlpha ? ctx.state.alpha : 1)
+        ...foldColor(ctx, staged, r, g, b, a)
       )) break;
       cut = enterUncut(ctx);
     }
@@ -2572,21 +2733,23 @@ 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 rgba = foldColor(ctx, staged, 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);
+      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
     }
     let cut;
     while (!batch.pushGlyph(
@@ -2601,27 +2764,27 @@ 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
     )) {
       cut = enterUncut(ctx);
       ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
       ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      alpha = color[3] * (staged.foldsAlpha ? ctx.state.alpha : 1);
+      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
     }
   }
 }
 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 +2795,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") {
@@ -2713,9 +2876,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 { staged, slot, tint } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
   const src = cmd.source;
   let u0 = 0, v0 = 0, u1 = 1, v1 = 1;
   if (src) {
@@ -2748,8 +2924,11 @@ function drawImage(ctx, cmd) {
     // 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
+    (cmd.opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3],
+    slot,
+    tint[0],
+    tint[1],
+    tint[2]
   )) retryUncut(ctx, cmd, void 0, drawImage);
 }
 function drawSprites(ctx, cmd) {
@@ -2757,18 +2936,26 @@ 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 { staged, slot, tint } = stageImage(ctx, cmd.image, sampling);
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+  let groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
   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;
+      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
+      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
     }
     const sx = data[i + 4], sy = data[i + 5], sw = data[i + 6], sh = data[i + 7];
     let cut;
@@ -2783,16 +2970,19 @@ function drawSprites(ctx, cmd) {
       (sx + sw) / tw,
       (sy + sh) / th,
       data[i + 8] * groupAlpha,
-      slot
+      slot,
+      tint[0],
+      tint[1],
+      tint[2]
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
+      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = staged.foldsAlpha ? ctx.state.alpha : 1;
+      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
+      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
     }
   }
 }
@@ -2842,7 +3032,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 +3065,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 +3181,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) {
@@ -3362,10 +3557,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") {
@@ -3415,12 +3606,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 +3689,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 +3703,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();
@@ -3589,14 +3779,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. */
@@ -3653,7 +3838,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);
@@ -3739,10 +3924,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();
   }
@@ -3867,6 +4048,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 +4252,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 };