@weasel-js/renderer 1.10.0 → 1.11.0

package/dist/index.js

@@ -1,18 +1,18 @@
 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 { BATCH_ATTRIBUTE_LOCATIONS, BATCH_TEXTURE_SLOTS, registerProgram, quantizeStrokeScale, STRAIGHT_RGB_GLSL, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_MATRICES_FRAG_SRC, BATCH_VERT_SRC, GLImageCache, DrawBatch, getProgramSource, paintDrawKindRegistry, 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, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-CUJEWF5G.js';
+export { bitmapSrc, 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-CUJEWF5G.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';
+import { DEFAULT_BAKE_BUDGET, markAllFontsNotUploaded, glyphGeneration, resetBakeBudget, GLYPH_COVERAGE_GLSL, syncColorPageTexture, colorPageTextureId, syncDynamicPageTexture, ensureFontTexture, dynamicPageTextureId, textureCacheKey, GLYPH_MODE_R8, GLYPH_MODE_MSDF, glyphFieldScale, SYNTH_BOLD_AMOUNT, sharperColorGlyph, syncSharpColorPageTexture, sharpColorPageTextureId, DYNAMIC_PAGE_SIZE } 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, isSolidPaint, resolveColor, strokeHasInk } from '@weasel-js/paint';
-import { mat3 } from '@weasel-js/geom';
+import { resolveGradientStops, sampleResolvedStops, resolveScreenLength, isSolidPaint, strokeHasInk, resolveColor, scaleVertexWidth } from '@weasel-js/paint';
+import { mat3, DEFAULT_FLATTEN_TOLERANCE, resolveCornersWithSources, remapPerAnchor } 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';
+import { isDev } from '@weasel-js/registry';
+import { resolveStrokeWidth, widestStrokeWidth, markerReach, strokeSpaceOf, resolveMarkerSize, metricKeepsRects } from '@weasel-js/stroke';
 export { tessellateStroke } from '@weasel-js/stroke';
 import { resolveTextStyle, resolveRuns, textPoseLayoutInput, cachedLayoutRuns, cachedPaintRuns, verticalAlignOffset, SYNTHETIC_ITALIC_RADIANS } from '@weasel-js/text';
+export { tessellate } from '@weasel-js/geom/tessellate';
 
 // 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",
@@ -355,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 */
@@ -1064,6 +1127,22 @@ var GroupState = class {
     this.colorMatrixStack.pop();
   }
 };
+var DEFAULT_FLATTEN_TOLERANCE_PX = DEFAULT_FLATTEN_TOLERANCE;
+function worldFlattenTolerance(tolerance, transform) {
+  if (typeof tolerance === "number") return tolerance;
+  const px = tolerance?.px ?? DEFAULT_FLATTEN_TOLERANCE_PX;
+  const [a, b, , c, d] = transform;
+  const sum = a * a + b * b + c * c + d * d;
+  const det = a * d - b * c;
+  const stretch = Math.sqrt((sum + Math.sqrt(Math.max(0, sum * sum - 4 * det * det))) / 2);
+  const world = px / stretch;
+  if (!(world > 0) || !Number.isFinite(world)) return DEFAULT_FLATTEN_TOLERANCE;
+  return 2 ** Math.floor(Math.log2(world));
+}
+function inCssPixels(tolerance, dpr) {
+  if (typeof tolerance === "number") return tolerance;
+  return { px: (tolerance?.px ?? DEFAULT_FLATTEN_TOLERANCE_PX) / dpr };
+}
 
 // src/effects/effectPrelude.ts
 var EFFECT_VERT_SRC = (
@@ -1196,14 +1275,11 @@ function endParityMask(ctx) {
   gl.clear(gl.STENCIL_BUFFER_BIT);
   gl.disable(gl.STENCIL_TEST);
 }
-
-// src/draw/customShader.ts
 var warnedUniforms = /* @__PURE__ */ new Set();
 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(message);
+  if (isDev()) console.warn(message);
 }
 function warnOnceUniform(programId, name) {
   warnOnce(
@@ -1216,8 +1292,7 @@ function setUniform(gl, loc, value, textureCache, nextTexUnit) {
     const handle = value;
     const entry = getTexture(handle.id);
     if (!entry) {
-      const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
-      if (isDev) console.warn(`weasel setUniform: TextureHandle "${handle.id}" not registered`);
+      if (isDev()) console.warn(`weasel setUniform: TextureHandle "${handle.id}" not registered`);
       return;
     }
     const unit = nextTexUnit.value++;
@@ -1234,8 +1309,7 @@ function setUniform(gl, loc, value, textureCache, nextTexUnit) {
     } else if (value.length === 16) {
       gl.uniformMatrix4fv(loc, false, value);
     } else {
-      const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
-      if (isDev) throw new TypeError(`weasel setUniform: Float32Array must be length 9 (mat3) or 16 (mat4), got ${value.length}`);
+      if (isDev()) throw new TypeError(`weasel setUniform: Float32Array must be length 9 (mat3) or 16 (mat4), got ${value.length}`);
     }
     return;
   }
@@ -1252,8 +1326,7 @@ function setUniform(gl, loc, value, textureCache, nextTexUnit) {
         gl.uniform4fv(loc, arr);
         break;
       default: {
-        const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
-        if (isDev) throw new TypeError(`weasel setUniform: array length ${arr.length} not supported`);
+        if (isDev()) throw new TypeError(`weasel setUniform: array length ${arr.length} not supported`);
       }
     }
     return;
@@ -1297,14 +1370,13 @@ function isArrayValue(value) {
   return Array.isArray(value) || value instanceof Float32Array || value instanceof Int32Array || value instanceof Uint32Array;
 }
 function setUniformArray(gl, name, arr, value) {
-  const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
   const upload = ARRAY_UPLOADS[arr.type];
   if (!upload) {
-    if (isDev) console.warn(`weasel setUniform: array uniform "${name}" has type ${arr.type}, which cannot be written as a whole`);
+    if (isDev()) console.warn(`weasel setUniform: array uniform "${name}" has type ${arr.type}, which cannot be written as a whole`);
     return;
   }
   if (value.length % upload.n !== 0 || value.length > upload.n * arr.size) {
-    if (isDev) {
+    if (isDev()) {
       throw new TypeError(
         `weasel setUniform: "${name}" is ${arr.type}[${arr.size}], so its value must hold a multiple of ${upload.n} numbers, at most ${upload.n * arr.size}; got ${value.length}`
       );
@@ -1499,7 +1571,8 @@ function returnToRenderTarget(ctx, width, height, scissorWasOn) {
   const target = ctx.renderTarget ?? null;
   gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fbo : null);
   if (target) {
-    gl.viewport(0, 0, width, height);
+    if (target.restore) target.restore();
+    else gl.viewport(0, 0, width, height);
   } else {
     ctx.restoreTargetRect?.();
     if (scissorWasOn) gl.enable(gl.SCISSOR_TEST);
@@ -1540,19 +1613,97 @@ function drawFullscreenQuad(ctx, program, texture, width, height, uniforms, comp
   gl.bindBuffer(gl.ARRAY_BUFFER, null);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
 }
+
+// src/draw/mesh.ts
+function flattenToleranceOf(ctx) {
+  return worldFlattenTolerance(ctx.flattenTolerance, ctx.state.transform);
+}
 function fillMesh(ctx, path) {
-  if (ctx.flattenTolerance !== void 0) {
-    return tessellate(path, { flattenTolerance: ctx.flattenTolerance });
-  }
-  return getMesh(path);
+  return getMesh(path, flattenToleranceOf(ctx));
 }
 function meshHandle(ctx, mesh) {
-  if (ctx.flattenTolerance !== void 0) return ctx.meshCache.uploadTransient(mesh);
   return ctx.meshCache.handleFor(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)
@@ -1566,14 +1717,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++) {
@@ -1584,16 +1733,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);
@@ -1605,22 +1751,21 @@ function flushBatch(ctx) {
 }
 
 // src/draw/clip.ts
-function enterGroupClip(ctx, clip) {
+function enterGroupClip(ctx, clip, transform = ctx.state.transform) {
   const pending = ctx.clipStack.reduce((n, e) => n + (e.depth === 0 ? 1 : 0), 0);
   if (ctx.clipDepth + pending + 1 > 7) {
     throw new Error(
       "weasel: clip nesting depth exceeded (max 7). You can't nest more than 7 levels of clipped containers in a single draw tree. Flatten the hierarchy or compose poses outside the scene graph."
     );
   }
-  enterClip(ctx, clip);
+  enterClip(ctx, clip, transform);
 }
-function enterClip(ctx, path) {
-  const transform = ctx.state.transform;
+function enterClip(ctx, path, transform) {
   const rect = axisAlignedClipRect(path, transform);
   if (rect === null) {
     materializeClips(ctx);
     const depth = ctx.clipDepth + 1;
-    pushClip(ctx, path, depth);
+    pushClip(ctx, path, depth, transform);
     ctx.clipDepth = depth;
     ctx.clipStack.push({ path, transform, rect: null, depth });
   } else {
@@ -1734,6 +1879,287 @@ function popClip(ctx, path, oldDepth, model = ctx.state.transform) {
   gl.colorMask(true, true, true, true);
   gl.stencilMask(255);
 }
+
+// src/DrawCommand.ts
+var SPRITE_STRIDE = 9;
+var CULL_SLACK_PX = 1;
+var DEFAULT_MITER_LIMIT = 4;
+function cullDrawCommands(cmds, transform, rect) {
+  return cullList(cmds, transform, slackBox(rect));
+}
+function cullList(cmds, m, box) {
+  let out = null;
+  for (let i = 0; i < cmds.length; i++) {
+    const cmd = cmds[i];
+    const kept = cullOne(cmd, m, box);
+    if (kept === cmd) {
+      out?.push(cmd);
+      continue;
+    }
+    out ??= cmds.slice(0, i);
+    if (kept) out.push(kept);
+  }
+  return out ?? cmds;
+}
+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;
+      return children.length === 0 ? null : { ...cmd, children };
+    }
+    case "path":
+    case "image":
+    case "sprites":
+      return boxMisses(paintedBox(cmd, m), box) ? null : cmd;
+    default:
+      return cmd;
+  }
+}
+function paintedBox(cmd, m) {
+  switch (cmd.kind) {
+    case "path":
+      return pathBox(cmd.path, cmd.stroke, m);
+    case "image":
+      return screenBox(cmd.x, cmd.y, cmd.x + cmd.w, cmd.y + cmd.h, m);
+    case "sprites":
+      return spritesBox(cmd.sprites, m);
+  }
+}
+function pathBox(path, stroke, m) {
+  let minX, minY, maxX, maxY;
+  if (path.kind === "rect") {
+    minX = Math.min(path.x, path.x + path.width);
+    maxX = Math.max(path.x, path.x + path.width);
+    minY = Math.min(path.y, path.y + path.height);
+    maxY = Math.max(path.y, path.y + path.height);
+  } else if (path.kind === "polygon") {
+    const c = path.coords;
+    if (c.length < 2) return null;
+    minX = maxX = c[0];
+    minY = maxY = c[1];
+    for (let i = 2; i + 1 < c.length; i += 2) {
+      const x = c[i], y = c[i + 1];
+      if (x < minX) minX = x;
+      else if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      else if (y > maxY) maxY = y;
+    }
+  } else {
+    return null;
+  }
+  const reach = stroke ? strokeReach(stroke, m) : 0;
+  return screenBox(minX - reach, minY - reach, maxX + reach, maxY + reach, m);
+}
+function strokeReach(stroke, m) {
+  return strokeReachAt(stroke, mat3.meanScaleOf(m), mat3.minScaleOf(m));
+}
+function strokeReachAt(stroke, scale, least = scale) {
+  const at = least > 0 ? least : scale;
+  const base = resolveStrokeWidth(stroke.width ?? 1, typeof stroke.width === "object" ? at : scale);
+  const width = widestStrokeWidth(base, stroke.vertexWidths);
+  const spike = Math.max(stroke.miterLimit ?? DEFAULT_MITER_LIMIT, Math.SQRT2);
+  const heads = markerReach(stroke);
+  return Math.max(Math.abs(width) * spike, heads.world, resolveScreenLength({ px: heads.px }, at));
+}
+function spritesBox(sprites, m) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (let i = 0; i + SPRITE_STRIDE <= sprites.length; i += SPRITE_STRIDE) {
+    const x0 = sprites[i], y0 = sprites[i + 1];
+    const x1 = x0 + sprites[i + 2], y1 = y0 + sprites[i + 3];
+    minX = Math.min(minX, x0, x1);
+    maxX = Math.max(maxX, x0, x1);
+    minY = Math.min(minY, y0, y1);
+    maxY = Math.max(maxY, y0, y1);
+  }
+  if (minX === Infinity) return null;
+  return screenBox(minX, minY, maxX, maxY, m);
+}
+function boundsMissRect(bounds, transform, rect) {
+  const x0 = Math.min(bounds.x, bounds.x + bounds.width);
+  const x1 = Math.max(bounds.x, bounds.x + bounds.width);
+  const y0 = Math.min(bounds.y, bounds.y + bounds.height);
+  const y1 = Math.max(bounds.y, bounds.y + bounds.height);
+  return boxMisses(screenBox(x0, y0, x1, y1, transform), slackBox(rect));
+}
+function slackBox(rect) {
+  return {
+    minX: rect.x - CULL_SLACK_PX,
+    minY: rect.y - CULL_SLACK_PX,
+    maxX: rect.x + rect.width + CULL_SLACK_PX,
+    maxY: rect.y + rect.height + CULL_SLACK_PX
+  };
+}
+function screenBox(x0, y0, x1, y1, m) {
+  const [ax, ay] = mat3.apply(m, x0, y0);
+  const [bx, by] = mat3.apply(m, x1, y0);
+  const [cx, cy] = mat3.apply(m, x1, y1);
+  const [dx, dy] = mat3.apply(m, x0, y1);
+  return {
+    minX: Math.min(ax, bx, cx, dx),
+    minY: Math.min(ay, by, cy, dy),
+    maxX: Math.max(ax, bx, cx, dx),
+    maxY: Math.max(ay, by, cy, dy)
+  };
+}
+function boxMisses(b, box) {
+  return b !== null && (b.maxX < box.minX || b.minX > box.maxX || b.maxY < box.minY || b.minY > box.maxY);
+}
+
+// src/retain/contentBounds.ts
+var EMPTY = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+var ANYWHERE = { minX: -Infinity, minY: -Infinity, maxX: Infinity, maxY: Infinity };
+function contentBounds(children, transform, clips, scale, width, height) {
+  let box = listBox(children, transform);
+  for (const clip of clips) box = clipped(box, pathBox(clip.path, void 0, clip.transform));
+  const x0 = Math.max(0, Math.floor((box.minX - CULL_SLACK_PX) * scale));
+  const y0 = Math.max(0, Math.floor((box.minY - CULL_SLACK_PX) * scale));
+  const x1 = Math.min(width, Math.ceil((box.maxX + CULL_SLACK_PX) * scale));
+  const y1 = Math.min(height, Math.ceil((box.maxY + CULL_SLACK_PX) * scale));
+  if ([x0, y0, x1, y1].some(Number.isNaN)) return { x: 0, y: 0, width, height };
+  if (x1 <= x0 || y1 <= y0) return { x: 0, y: 0, width: 0, height: 0 };
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+function listBox(cmds, m) {
+  let acc = EMPTY;
+  for (const cmd of cmds) {
+    acc = union(acc, commandBox(cmd, m));
+    if (acc === ANYWHERE) break;
+  }
+  return acc;
+}
+function commandBox(cmd, m) {
+  switch (cmd.kind) {
+    case "group": {
+      const inner = cmd.transform ? mat3.multiply(m, cmd.transform) : m;
+      const box = cmd.effects && cmd.effects.length > 0 ? ANYWHERE : listBox(cmd.children, inner);
+      return cmd.clip ? clipped(box, pathBox(cmd.clip, void 0, inner)) : box;
+    }
+    case "path":
+    case "image":
+    case "sprites":
+      return paintedBox(cmd, m) ?? ANYWHERE;
+    default:
+      return ANYWHERE;
+  }
+}
+function union(a, b) {
+  if (a === EMPTY || b === ANYWHERE) return b;
+  if (b === EMPTY || a === ANYWHERE) return a;
+  return {
+    minX: Math.min(a.minX, b.minX),
+    minY: Math.min(a.minY, b.minY),
+    maxX: Math.max(a.maxX, b.maxX),
+    maxY: Math.max(a.maxY, b.maxY)
+  };
+}
+function clipped(a, clip) {
+  if (!clip || a === EMPTY) return a;
+  const box = {
+    minX: Math.max(a.minX, clip.minX),
+    minY: Math.max(a.minY, clip.minY),
+    maxX: Math.min(a.maxX, clip.maxX),
+    maxY: Math.min(a.maxY, clip.maxY)
+  };
+  return box.minX > box.maxX || box.minY > box.maxY ? EMPTY : box;
+}
+
+// src/draw/retained.ts
+var COMPOSITE_AS_DRAWN = { alpha: 1, colorMatrix: IDENTITY_COLOR_MATRIX };
+var ownPixelsOnly = /* @__PURE__ */ new WeakMap();
+function readsOnlyOwnPixels(children) {
+  const known = ownPixelsOnly.get(children);
+  if (known !== void 0) return known;
+  let ok = true;
+  for (const child of children) {
+    if (child.kind !== "group") continue;
+    if (isOwnComposite(child.composite) || !readsOnlyOwnPixels(child.children)) {
+      ok = false;
+      break;
+    }
+  }
+  ownPixelsOnly.set(children, ok);
+  return ok;
+}
+function drawRetainedGroup(ctx, cmd, ownsSurface2, dispatch2) {
+  const store = ctx.retained;
+  const width = ctx.deviceWidth;
+  const height = ctx.deviceHeight;
+  if (!store || !width || !height) return false;
+  if (ownsSurface2 || ctx.renderTarget || !readsOnlyOwnPixels(cmd.children)) {
+    store.decline();
+    return false;
+  }
+  const id = cmd.retain;
+  ctx.state.push({ transform: cmd.transform, alpha: cmd.alpha, colorMatrix: cmd.colorMatrix });
+  const clips = ctx.clipStack.map(({ path, transform }) => ({ path, transform }));
+  if (cmd.clip) clips.push({ path: cmd.clip, transform: ctx.state.transform });
+  const key = {
+    children: cmd.children,
+    transform: ctx.state.transform,
+    alpha: ctx.state.alpha,
+    colorMatrix: ctx.state.colorMatrix,
+    viewMatrix: ctx.viewMatrix,
+    clips
+  };
+  let pixels = store.lookup(id, width, height, key);
+  if (!pixels) {
+    const rect2 = contentBounds(cmd.children, ctx.state.transform, clips, width / ctx.widthCss, width, height);
+    const draw = store.reserve(id, width, height, rect2);
+    if (!draw) {
+      ctx.state.pop();
+      return false;
+    }
+    flushBatch(ctx);
+    if (draw.fbo) drawInto(ctx, cmd.children, clips, draw.fbo, rect2, dispatch2);
+    pixels = draw.commit(key);
+  }
+  ctx.state.pop();
+  const { texture, rect } = pixels;
+  if (!texture) return true;
+  flushBatch(ctx);
+  const composite = ctx.ensureProgram?.(compositeProgramId()) ?? null;
+  if (composite && ctx.viewportWithin) {
+    applyClipTest(ctx, 0);
+    ctx.viewportWithin(rect);
+    drawFullscreenQuad(ctx, composite, texture, rect.width, rect.height, void 0, COMPOSITE_AS_DRAWN);
+    ctx.restoreTargetRect?.();
+  }
+  return true;
+}
+function drawInto(ctx, children, clips, fbo, rect, dispatch2) {
+  const gl = ctx.gl;
+  const width = ctx.deviceWidth;
+  const height = ctx.deviceHeight;
+  const parentClipDepth = ctx.clipDepth;
+  const parentClipStack = ctx.clipStack;
+  const parentBatchClip = ctx.drawBatch.clip;
+  const scissorWasOn = gl.isEnabled(gl.SCISSOR_TEST);
+  ctx.clipDepth = 0;
+  ctx.clipStack = [];
+  ctx.drawBatch.clip = null;
+  const restore = () => {
+    gl.viewport(-rect.x, rect.y + rect.height - height, width, height);
+    gl.scissor(0, 0, rect.width, rect.height);
+    gl.enable(gl.SCISSOR_TEST);
+  };
+  ctx.renderTarget = { fbo, restore };
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  restore();
+  gl.stencilMask(255);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+  for (const clip of clips) enterGroupClip(ctx, clip.path, clip.transform);
+  for (const child of children) dispatch2(ctx, child);
+  flushBatch(ctx);
+  ctx.clipDepth = parentClipDepth;
+  ctx.clipStack = parentClipStack;
+  ctx.drawBatch.clip = parentBatchClip;
+  ctx.renderTarget = null;
+  returnToRenderTarget(ctx, width, height, scissorWasOn);
+}
 var WORLD = {};
 function resolveStrokeLengths(transform, cmd) {
   const stroke = cmd.stroke;
@@ -1768,37 +2194,72 @@ function isPxMarker(ref) {
 function resolvedMarker(ref, scale) {
   return { ...ref, size: resolveMarkerSize(ref, 0, quantizeStrokeScale(ref.size.px, scale)) };
 }
+var REMAPPED = /* @__PURE__ */ new WeakMap();
+function remapped(values, sources, stride) {
+  let bySources = REMAPPED.get(values);
+  if (bySources === void 0) {
+    bySources = /* @__PURE__ */ new WeakMap();
+    REMAPPED.set(values, bySources);
+  }
+  let out = bySources.get(sources);
+  if (out === void 0) {
+    out = remapPerAnchor(values, sources, stride);
+    bySources.set(sources, out);
+  }
+  return out;
+}
+function withCornersResolved(cmd) {
+  if (cmd.path.kind !== "polygon") return cmd;
+  const { path, anchorSources: src } = resolveCornersWithSources(cmd.path);
+  if (path === cmd.path) return cmd;
+  const out = { ...cmd, path };
+  if (src && cmd.vertexColors) out.vertexColors = remapped(cmd.vertexColors, src, 4);
+  if (src && cmd.stroke && (cmd.stroke.vertexColors || cmd.stroke.vertexWidths)) {
+    const { vertexColors, vertexWidths } = cmd.stroke;
+    out.stroke = {
+      ...cmd.stroke,
+      ...vertexColors ? { vertexColors: remapped(vertexColors, src, 4) } : {},
+      ...vertexWidths ? { vertexWidths: remapped(vertexWidths, src, 1) } : {}
+    };
+  }
+  return out;
+}
 
-// src/draw/foldColor.ts
-function isIdentityColorMatrix(cm) {
-  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+// 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);
 }
-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
-  ];
+function slotForRamps(staged) {
+  if (staged.ramps) return RAMP_SLOT;
+  return nextFreeSlot(staged) < 0 ? -1 : RAMP_SLOT;
 }
-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;
+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 [cm[0], cm[6], cm[12], cm[18]];
+  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 stagedTint(staged, tint) {
-  return staged.foldsAlpha && tint !== null ? tint : NO_TINT;
+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;
@@ -1887,39 +2348,6 @@ function spaceToDevice(ctx, units) {
 }
 
 // src/draw/batch.ts
-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;
-  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++) {
-    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 = {
@@ -1932,79 +2360,82 @@ function canBatchMesh(ctx, mesh) {
   return mesh.vertices.length >> 1 <= cap;
 }
 function stageSolid(ctx, vertices) {
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, 0, colorFolding.enabled)) {
-    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, colorFolding.enabled);
-}
-function openRun(ctx, folds = false) {
-  if (ctx.batchState === void 0) {
-    const colorMatrix = folds ? IDENTITY_COLOR_MATRIX : 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;
+  const matrix = takeMatrix(openRun(ctx), colorMatrix, alpha);
+  return packSlot(withMatrix(WHITE_SLOT, matrix), PAINT_MODE_PLAIN);
+}
+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) {
-  const tint = textureTint(ctx.state.colorMatrix) ;
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, image, sampling, 0, tint !== null)) {
+  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);
-  const staged = openRun(ctx, tint !== null);
+  const staged = openRun(ctx);
   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, tint: stagedTint(staged, tint) };
+  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, colorFolding.enabled) || 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, colorFolding.enabled);
-  staged.synthBold = synthBold;
+  const staged = openRun(ctx);
   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 solidColor(paint) {
   const [r, g, b, a] = resolveColor(paint.color);
-  return foldColor(ctx, staged, r, g, b, a * (paint.opacity ?? 1));
+  return [r, g, b, a * (paint.opacity ?? 1)];
+}
+function stagedColor(ctx, paint) {
+  const [r, g, b, a] = solidColor(paint);
+  return foldColor(ctx, r, g, b, a);
 }
 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,
@@ -2014,18 +2445,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,
@@ -2037,14 +2469,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,
@@ -2053,10 +2485,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) {
@@ -2070,7 +2502,9 @@ function tryStageFill(ctx, mesh, paint) {
 }
 var NO_FIELD = [0, 0];
 function stageColorGlyphs(ctx, atlasId) {
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState) || slotForAtlas(ctx.batchState, atlasId) < 0)) {
+  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);
@@ -2080,7 +2514,8 @@ function stageColorGlyphs(ctx, atlasId) {
     staged.textures.push({ kind: "atlas", id: atlasId, fieldScale: NO_FIELD });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  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];
@@ -2088,8 +2523,6 @@ function patternTileSpace(spaceInverse, origin, transform) {
   const unplace = mat3.invert(placement);
   return unplace && mat3.multiply(unplace, spaceInverse);
 }
-
-// src/draw/paintBind.ts
 function paintBindContext(ctx) {
   const cached = BIND_CONTEXTS.get(ctx);
   if (cached) return cached;
@@ -2129,8 +2562,7 @@ function bindPattern(ctx, prog, fill, model) {
   const tex = fill.texture;
   const entry = getTexture(tex.id);
   if (!entry) {
-    const isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
-    if (isDev) console.warn(`weasel: pattern TextureHandle "${tex.id}" not registered`);
+    if (isDev()) console.warn(`weasel: pattern TextureHandle "${tex.id}" not registered`);
     return null;
   }
   const inverse = gradientSpaceInverse(ctx, fill.units);
@@ -2142,8 +2574,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);
@@ -2159,11 +2593,13 @@ 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);
@@ -2175,21 +2611,18 @@ function bindGradient(ctx, prog, fill, model) {
     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.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);
@@ -2199,7 +2632,8 @@ function bindGradient(ctx, prog, fill, model) {
 }
 
 // src/draw/pathPaint.ts
-function drawPath(ctx, cmd) {
+function drawPath(ctx, given) {
+  const cmd = withCornersResolved(given);
   if (cmd.fill?.paint) drawPathFill(ctx, cmd, cmd.fill.paint);
   if (cmd.stroke?.paint) drawPathStroke(ctx, cmd);
 }
@@ -2339,7 +2773,7 @@ function drawPathStroke(ctx, rawCmd) {
     drawPathStrokeUnclipped(ctx, cmd, spaces);
   }
   const width = resolveStrokeWidth(stroke.width ?? 1, 1);
-  const heads = cachedMarkerCommands(cmd.path, rawCmd.stroke, stroke, width, ctx.flattenTolerance, spaces);
+  const heads = cachedMarkerCommands(cmd.path, rawCmd.stroke, stroke, width, flattenToleranceOf(ctx), spaces);
   for (const marker of heads) drawPath(ctx, marker);
 }
 function drawPathStrokeUnclipped(ctx, cmd, spaces) {
@@ -2347,7 +2781,7 @@ function drawPathStrokeUnclipped(ctx, cmd, spaces) {
   const paint = stroke.paint;
   const isSolid2 = paint.kind === void 0 || paint.kind === "solid";
   const solid = paint;
-  const mesh = strokeMesh(cmd.path, stroke, ctx.flattenTolerance, spaces);
+  const mesh = strokeMesh(cmd.path, stroke, flattenToleranceOf(ctx), spaces);
   if (mesh.indices.length === 0) return;
   const hasVColors = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
   const batched = batchPaint(ctx, paint, hasVColors);
@@ -2386,7 +2820,7 @@ var DOUBLED_VERTEX_WIDTHS = /* @__PURE__ */ new WeakMap();
 function doubledVertexWidths(widths) {
   let doubled = DOUBLED_VERTEX_WIDTHS.get(widths);
   if (doubled === void 0) {
-    doubled = widths.map((w) => w * 2);
+    doubled = widths.map((w) => scaleVertexWidth(w, 2));
     DOUBLED_VERTEX_WIDTHS.set(widths, doubled);
   }
   return doubled;
@@ -2404,7 +2838,7 @@ function drawPathStrokeStenciled(ctx, cmd, align, spaces) {
   };
   const useVColor = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
   const fillHandle = fillMeshHandle(ctx, cmd.path);
-  const ribbonMesh = strokeMesh(cmd.path, widerStroke, ctx.flattenTolerance, spaces);
+  const ribbonMesh = strokeMesh(cmd.path, widerStroke, flattenToleranceOf(ctx), spaces);
   if (ribbonMesh.indices.length === 0) return;
   const ribbonHandle = useVColor ? ctx.meshCache.uploadTransient(ribbonMesh) : ctx.meshCache.uploadRecurring(ribbonMesh);
   const gl = ctx.gl;
@@ -2514,21 +2948,38 @@ function mergeGlyphMeshes(group, dx, dy, meshFor) {
   }
   return { vertices, indices };
 }
+
+// src/draw/modelScale.ts
+function modelScale(m) {
+  const sx = Math.hypot(m[0], m[1]);
+  const sy = Math.hypot(m[3], m[4]);
+  return Math.sqrt(sx * sy) || 1;
+}
+
+// src/draw/colorGlyphs.ts
 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 opacity = isSolidPaint(fill) ? solidColor(fill)[3] : 1;
+  const baseId = 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 devicePerCss = ctx.deviceWidth && ctx.widthCss ? ctx.deviceWidth / ctx.widthCss : 1;
+  const toDevice = modelScale(m) * devicePerCss;
+  let atlasId = baseId;
+  let { slot, tint } = stageColorGlyphs(ctx, atlasId);
   const restage = () => {
-    ({ staged, slot } = stageColorGlyphs(ctx, atlasId));
-    alpha = opacity * (staged.foldsAlpha ? ctx.state.alpha : 1);
+    ({ slot, tint } = stageColorGlyphs(ctx, atlasId));
   };
-  for (const q of group.quads) {
+  for (const base of group.quads) {
+    const sharp = sharper(ctx, base, toDevice);
+    const q = sharp?.quad ?? base;
+    const id = sharp?.atlasId ?? baseId;
+    if (id !== atlasId) {
+      atlasId = id;
+      restage();
+    }
     if (batch.wouldOverflow(4)) {
       flushBatch(ctx);
       restage();
@@ -2544,8 +2995,11 @@ function drawColorGlyphs(ctx, group, dx, dy) {
       q.v0,
       q.u1,
       q.v1,
-      alpha,
-      slot
+      opacity * tint[3],
+      slot,
+      tint[0],
+      tint[1],
+      tint[2]
     )) {
       cut = enterUncut(ctx);
       restage();
@@ -2556,6 +3010,31 @@ function drawColorGlyphs(ctx, group, dx, dy) {
     }
   }
 }
+function sharper(ctx, q, toDevice) {
+  const char = q.colorGlyph;
+  if (!char || char.width === 0) return null;
+  const texel = (q.x1 - q.x0) / char.width;
+  const sharp = sharperColorGlyph(char, texel * toDevice);
+  if (!sharp || !syncSharpColorPageTexture(ctx.textureCache, sharp.glyph.page)) return null;
+  const g = sharp.glyph;
+  const k = 2 ** sharp.level;
+  const x0 = q.x0 + (g.xoffset - char.xoffset) * texel;
+  const y0 = q.y0 + (g.yoffset - char.yoffset) * texel;
+  return {
+    quad: {
+      x0,
+      y0,
+      x1: x0 + g.width / k * texel,
+      y1: y0 + g.height / k * texel,
+      u0: g.x / DYNAMIC_PAGE_SIZE,
+      v0: g.y / DYNAMIC_PAGE_SIZE,
+      u1: (g.x + g.width) / DYNAMIC_PAGE_SIZE,
+      v1: (g.y + g.height) / DYNAMIC_PAGE_SIZE,
+      baselineY: q.baselineY
+    },
+    atlasId: sharpColorPageTextureId(g.page)
+  };
+}
 
 // src/draw/scratchPass.ts
 var UNIT_QUAD = {
@@ -2633,11 +3112,6 @@ function bindScratchPaint(ctx, prog, painted) {
 
 // src/draw/text.ts
 var OUTLINE_MIN_SCREEN_PX = 48;
-function modelScale(m) {
-  const sx = Math.hypot(m[0], m[1]);
-  const sy = Math.hypot(m[3], m[4]);
-  return Math.sqrt(sx * sy) || 1;
-}
 function drawText(ctx, cmd) {
   const style = resolveTextStyle(cmd.style);
   const lineHeight = style.lineHeight;
@@ -2691,17 +3165,22 @@ function drawTextDecorations(ctx, decorations, dx, dy) {
       drawOutlineMesh(ctx, paint, ruleMesh(d.x0 + dx, d.y0 + dy, d.x1 + dx, d.y1 + dy));
       continue;
     }
-    const [r, g, b, a] = isSolidPaint(paint) ? resolveColor(paint.color) : [0, 0, 0, 1];
+    const [r, g, b, a] = isSolidPaint(paint) ? solidColor(paint) : [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,
-        ...foldColor(ctx, staged, r, g, b, a)
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3],
+        slot
       )) break;
       cut = enterUncut(ctx);
     }
@@ -2714,7 +3193,6 @@ function ruleMesh(x0, y0, x1, y1) {
     indices: new Uint32Array([0, 1, 2, 0, 2, 3])
   };
 }
-var SYNTH_BOLD_AMOUNT = 0.08;
 function drawTextGroup(ctx, group, dx, dy) {
   if (group.source === "canvas") {
     if (!syncDynamicPageTexture(ctx.textureCache, group.page)) return;
@@ -2740,16 +3218,15 @@ function drawTextGroup(ctx, group, dx, dy) {
     drawPaintedGlyphs(ctx, group, dx, dy, paintKind, atlasId, mode, bold, tanItalic, fieldScale);
     return;
   }
-  const color = isSolidPaint(fill) ? resolveColor(fill.color) : [0, 0, 0, 1];
+  const color = isSolidPaint(fill) ? solidColor(fill) : [0, 0, 0, 1];
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let { staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold);
-  let rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+  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));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     let cut;
     while (!batch.pushGlyph(
@@ -2769,16 +3246,15 @@ function drawTextGroup(ctx, group, dx, dy) {
       rgba[2],
       rgba[3],
       slot,
-      mode
+      mode,
+      bold
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
   }
 }
@@ -2835,7 +3311,8 @@ function drawPaintedGlyphs(ctx, group, dx, dy, kind, atlasId, mode, bold, tanIta
       1,
       1,
       GLYPH_PAINT_ATLAS_UNIT,
-      mode
+      mode,
+      0
     );
   }
   drawStagedGlyphs(ctx);
@@ -2872,9 +3349,6 @@ function glyphScreenBounds(group, dx, dy, tanItalic, m) {
   return b;
 }
 
-// src/DrawCommand.ts
-var SPRITE_STRIDE = 9;
-
 // src/draw/image.ts
 var MINIFIED = 2;
 function minifiedLimits(ctx) {
@@ -2891,7 +3365,7 @@ function drawImage(ctx, cmd) {
     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 { slot, tint } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
   const src = cmd.source;
   let u0 = 0, v0 = 0, u1 = 1, v1 = 1;
   if (src) {
@@ -2921,10 +3395,8 @@ 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) * tint[3],
+    // Group alpha rides here with the opacity, in the tint's fourth channel.
+    (cmd.opacity ?? 1) * tint[3],
     slot,
     tint[0],
     tint[1],
@@ -2945,17 +3417,15 @@ function drawSprites(ctx, cmd) {
     }
   }
   const sampling = cmd.sampling ?? "linear";
-  let { staged, slot, tint } = 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) * 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, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ 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;
@@ -2969,20 +3439,18 @@ function drawSprites(ctx, cmd) {
       sy / th,
       (sx + sw) / tw,
       (sy + sh) / th,
-      data[i + 8] * groupAlpha,
+      data[i + 8] * tint[3],
       slot,
       tint[0],
       tint[1],
       tint[2]
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
   }
 }
@@ -3079,6 +3547,7 @@ function ownsSurface(cmd) {
   return cmd.isolate === true || isOwnComposite(cmd.composite) || cmd.effects !== void 0 && cmd.effects.length > 0;
 }
 function drawGroup(ctx, cmd) {
+  if (cmd.retain !== void 0 && drawRetainedGroup(ctx, cmd, ownsSurface(cmd), dispatch)) return;
   if (ownsSurface(cmd) && ctx.effectTargets && ctx.deviceWidth && ctx.deviceHeight) {
     if (cmd.clip) {
       ctx.state.push({ transform: cmd.transform });
@@ -3242,6 +3711,253 @@ var EffectTargets = class {
   }
 };
 
+// src/retain/retainedKey.ts
+function keepKey(key) {
+  return {
+    ...key,
+    transform: key.transform.slice(),
+    colorMatrix: key.colorMatrix.slice(),
+    viewMatrix: key.viewMatrix?.slice(),
+    clips: key.clips.map((c) => ({ path: c.path, transform: c.transform.slice() }))
+  };
+}
+function sameKey(a, b) {
+  return a.children === b.children && a.alpha === b.alpha && sameFloats(a.transform, b.transform) && sameFloats(a.colorMatrix, b.colorMatrix) && (a.viewMatrix === void 0 ? b.viewMatrix === void 0 : b.viewMatrix !== void 0 && sameFloats(a.viewMatrix, b.viewMatrix)) && sameClips(a.clips, b.clips);
+}
+function sameClips(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].path !== b[i].path || !sameFloats(a[i].transform, b[i].transform)) return false;
+  }
+  return true;
+}
+function sameFloats(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+function sameStamp(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
+  return true;
+}
+
+// src/retain/surfaceGl.ts
+function createSurfaceTexture(gl, width, height) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  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);
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return { texture, fbo };
+}
+function deleteSurfaceTexture(gl, surface) {
+  gl.deleteFramebuffer(surface.fbo);
+  gl.deleteTexture(surface.texture);
+}
+function createScratch(gl, width, height, samples) {
+  const storage = (format) => {
+    const rb = gl.createRenderbuffer();
+    gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
+    if (samples > 0) {
+      gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, format, width, height);
+    } else {
+      gl.renderbufferStorage(gl.RENDERBUFFER, format, width, height);
+    }
+    return rb;
+  };
+  const color = storage(gl.RGBA8);
+  const stencil = storage(gl.DEPTH24_STENCIL8);
+  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, color);
+  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, stencil);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return { fbo, color, stencil, width, height };
+}
+function deleteScratch(gl, scratch) {
+  gl.deleteFramebuffer(scratch.fbo);
+  gl.deleteRenderbuffer(scratch.color);
+  gl.deleteRenderbuffer(scratch.stencil);
+}
+function resolveInto(gl, scratch, target, width, height) {
+  const scissor = gl.isEnabled(gl.SCISSOR_TEST);
+  gl.disable(gl.SCISSOR_TEST);
+  gl.bindFramebuffer(gl.READ_FRAMEBUFFER, scratch.fbo);
+  gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, target.fbo);
+  gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  if (scissor) gl.enable(gl.SCISSOR_TEST);
+}
+
+// src/retain/RetainedSurfaces.ts
+var RetainedSurfaces = class {
+  gl;
+  budget;
+  samples;
+  surfaces = /* @__PURE__ */ new Map();
+  /** Shared: retained draws never nest. */
+  scratch = null;
+  width = 0;
+  height = 0;
+  frame = 0;
+  stamp = [];
+  composited = 0;
+  redrawn = 0;
+  declined = 0;
+  constructor(gl, budget) {
+    this.gl = gl;
+    this.budget = budget;
+    const samples = gl.getParameter(gl.SAMPLES);
+    this.samples = typeof samples === "number" && samples > 1 ? samples : 0;
+  }
+  /** GPU memory held now, scratch buffer included. */
+  get bytes() {
+    return this.keptBytes() + (this.scratch ? this.scratchBytes(this.scratch.width, this.scratch.height) : 0);
+  }
+  /** Change the budget. Lowered below what the surfaces hold, every surface
+   *  goes, and groups are drawn again within the new one. */
+  setBudget(budget) {
+    this.budget = budget;
+    if (this.keptBytes() > budget) this.releaseAll();
+  }
+  /** Open a frame. `stamp` holds what every surface depends on beyond its
+   *  key — resource generations the renderer watches — compared entry by
+   *  entry. */
+  beginFrame(stamp) {
+    this.frame++;
+    this.stamp = stamp;
+    this.composited = 0;
+    this.redrawn = 0;
+    this.declined = 0;
+  }
+  /** `id`'s pixels if they were drawn under `key`, in a drawing buffer
+   *  `width × height` device pixels. */
+  lookup(id, width, height, key) {
+    this.fitTo(width, height);
+    const surface = this.surfaces.get(id);
+    if (!surface?.key || !sameKey(surface.key, key) || !sameStamp(surface.stamp, this.stamp)) return null;
+    surface.frame = this.frame;
+    this.composited++;
+    return pixelsOf(surface);
+  }
+  /** Somewhere to draw `id` this frame, covering `rect` of a drawing buffer
+   *  `width × height` device pixels, or `null` when that would take the total
+   *  past the budget. */
+  reserve(id, width, height, rect) {
+    this.fitTo(width, height);
+    const existing = this.surfaces.get(id);
+    const empty = rect.width === 0 || rect.height === 0;
+    const held = this.scratch;
+    const scratchW = Math.max(held?.width ?? 0, empty ? 0 : rect.width);
+    const scratchH = Math.max(held?.height ?? 0, empty ? 0 : rect.height);
+    const after = this.keptBytes() + rectBytes(rect) - (existing ? rectBytes(existing.rect) : 0);
+    if (after > this.budget) {
+      this.declined++;
+      return null;
+    }
+    const surface = existing ?? { gl: null, rect, key: null, stamp: [], frame: this.frame };
+    this.surfaces.set(id, surface);
+    this.fitSurface(surface, rect);
+    surface.frame = this.frame;
+    this.redrawn++;
+    const scratch = surface.gl ? this.scratchFor(scratchW, scratchH) : null;
+    return {
+      fbo: scratch?.fbo ?? null,
+      commit: (key) => {
+        if (scratch && surface.gl) resolveInto(this.gl, scratch, surface.gl, surface.rect.width, surface.rect.height);
+        surface.key = keepKey(key);
+        surface.stamp = this.stamp;
+        return pixelsOf(surface);
+      }
+    };
+  }
+  /** Count a group drawn straight through for want of a surface. */
+  decline() {
+    this.declined++;
+  }
+  /** Free every surface no group asked for this frame, and the scratch
+   *  buffer once this frame redrew nothing or it is larger than every surface
+   *  left needs. */
+  endFrame() {
+    let needW = 0;
+    let needH = 0;
+    for (const [id, surface] of this.surfaces) {
+      if (surface.frame === this.frame) {
+        needW = Math.max(needW, surface.rect.width);
+        needH = Math.max(needH, surface.rect.height);
+        continue;
+      }
+      this.deleteSurface(surface);
+      this.surfaces.delete(id);
+    }
+    const oversized = this.scratch && (this.scratch.width > needW || this.scratch.height > needH);
+    if (this.redrawn === 0 || oversized) this.dropScratch();
+  }
+  /** Drop everything: on dispose, and on context loss, where the handles are
+   *  already gone and only the bookkeeping has to go. */
+  releaseAll() {
+    for (const surface of this.surfaces.values()) this.deleteSurface(surface);
+    this.surfaces.clear();
+    this.dropScratch();
+  }
+  fitTo(width, height) {
+    if (width === this.width && height === this.height) return;
+    this.releaseAll();
+    this.width = width;
+    this.height = height;
+  }
+  keptBytes() {
+    let n = 0;
+    for (const surface of this.surfaces.values()) n += rectBytes(surface.rect);
+    return n;
+  }
+  scratchBytes(width, height) {
+    return width * height * Math.max(1, this.samples) * 8;
+  }
+  /** The scratch buffer at `width × height`, reallocated if it is not. */
+  scratchFor(width, height) {
+    const held = this.scratch;
+    if (held && held.width === width && held.height === height) return held;
+    this.dropScratch();
+    return this.scratch = createScratch(this.gl, width, height, this.samples);
+  }
+  /** Give `surface` a texture the size of `rect`, or none for an empty one,
+   *  keeping one that is already that size. */
+  fitSurface(surface, rect) {
+    const was = surface.rect;
+    surface.rect = { ...rect };
+    if (surface.gl && was.width === rect.width && was.height === rect.height) return;
+    this.deleteSurface(surface);
+    if (rect.width > 0 && rect.height > 0) surface.gl = createSurfaceTexture(this.gl, rect.width, rect.height);
+  }
+  deleteSurface(surface) {
+    if (surface.gl) deleteSurfaceTexture(this.gl, surface.gl);
+    surface.gl = null;
+  }
+  dropScratch() {
+    if (this.scratch) deleteScratch(this.gl, this.scratch);
+    this.scratch = null;
+  }
+};
+function pixelsOf(surface) {
+  return { texture: surface.gl?.texture ?? null, rect: surface.rect };
+}
+function rectBytes(rect) {
+  return rect.width * rect.height * 4;
+}
+
+// src/rendererTypes.ts
+var DEFAULT_RETAIN_BUDGET = 256 * 1024 * 1024;
+
 // src/shaders/extractUniformNames.ts
 var QUALIFIERS = /* @__PURE__ */ new Set([
   "lowp",
@@ -3473,6 +4189,7 @@ function compileCustomProgram(gl, src) {
   program.lookupAttributes(CUSTOM_ATTRIBUTES);
   return program;
 }
+var NO_RETAINED = { composited: 0, redrawn: 0, declined: 0, bytes: 0 };
 function now() {
   return typeof performance !== "undefined" ? performance.now() : Date.now();
 }
@@ -3483,10 +4200,13 @@ var GLYPH_PAINT_SOURCES = {
 };
 var WeaselRenderer = class {
   gl;
-  stats = { drawCalls: 0, ms: 0, spans: [] };
+  stats = { drawCalls: 0, ms: 0, spans: [], retained: NO_RETAINED };
+  /** 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. */
@@ -3517,6 +4237,10 @@ var WeaselRenderer = class {
   /** Offscreen buffers for group effects. Allocates nothing until a group
    *  with effects asks, so a canvas without them pays no memory. */
   effectTargets;
+  retained;
+  /** Advanced when a program is compiled again over one already drawn with,
+   *  which leaves every retained surface drawn by the old one stale. */
+  programEpoch = 0;
   paintScratch;
   imageMinification;
   flattenTolerance;
@@ -3539,6 +4263,7 @@ var WeaselRenderer = class {
     if (!gl) throw new Error("WeaselRenderer: WebGL2 not available");
     this.gl = gl;
     this.effectTargets = new EffectTargets(this.gl);
+    this.retained = new RetainedSurfaces(this.gl, opts.retainBudget ?? DEFAULT_RETAIN_BUDGET);
     this.paintScratch = new PaintScratch(this.gl);
     const attrs = typeof this.gl.getContextAttributes === "function" ? this.gl.getContextAttributes() : null;
     if (attrs && attrs.stencil === false) {
@@ -3566,21 +4291,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);
@@ -3589,6 +4305,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();
@@ -3616,15 +4335,16 @@ var WeaselRenderer = class {
     if (this.disposed) return;
     const src = getProgramSource(handle.id);
     if (!src) {
-      throw new Error(
-        `WeaselRenderer.registerProgram: program "${handle.id}" not found in source registry. Call the module-level registerProgram() first.`
-      );
+      throw new Error(`WeaselRenderer.registerProgram: program "${handle.id}" not found in source registry. Call the module-level registerProgram() first.`);
     }
     this.installProgram(handle.id, src, compileCustomProgram(this.gl, src));
   }
   installProgram(id, src, program) {
     const previous = this.programRegistry.get(id);
-    if (previous) this.gl.deleteProgram(previous.handle);
+    if (previous) {
+      this.gl.deleteProgram(previous.handle);
+      this.programEpoch++;
+    }
     this.programRegistry.set(id, program);
     this.programSources.set(id, src);
   }
@@ -3696,28 +4416,28 @@ var WeaselRenderer = class {
     const oy = this.target?.origin.y ?? 0;
     const x = Math.round(ox * this.dpr);
     const y = Math.round(oy * this.dpr);
-    return {
-      x,
-      y,
-      width: Math.round((ox + this.widthCss) * this.dpr) - x,
-      height: Math.round((oy + this.heightCss) * this.dpr) - y
-    };
+    const width = Math.round((ox + this.widthCss) * this.dpr) - x;
+    return { x, y, width, 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();
+    const { x, y, width, height } = this.glRect();
+    gl.viewport(x, y, width, height);
     if (!this.target) {
       gl.disable(gl.SCISSOR_TEST);
-      gl.viewport(0, 0, width, height);
       return;
     }
-    const glY = gl.drawingBufferHeight - y - height;
-    gl.viewport(x, glY, width, height);
-    gl.scissor(x, glY, width, height);
+    gl.scissor(x, y, width, height);
     gl.enable(gl.SCISSOR_TEST);
   }
+  /** This renderer's rect as GL addresses it, from the buffer's bottom left. */
+  glRect() {
+    const { x, y, width, height } = this.deviceRect();
+    if (!this.target) return { x: 0, y: 0, width, height };
+    return { x, y: this.gl.drawingBufferHeight - y - height, width, height };
+  }
   /** Confine this renderer to a rect of its drawing buffer, or pass null to
    *  give it the whole buffer back. Takes effect from the next `render()`. */
   setTarget(target) {
@@ -3739,24 +4459,12 @@ var WeaselRenderer = class {
     this.applyGlState();
     this.applyTarget();
     this.effectTargets.releaseAll();
+    this.retained.releaseAll();
     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);
@@ -3795,20 +4503,10 @@ 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()
-    ]) {
-      gl.deleteProgram(prog.handle);
-    }
+    for (const lazy of this.lazyPrograms()) lazy.release();
+    for (const prog of [this.batchFill, ...this.glyphPaintPrograms.values()]) gl.deleteProgram(prog.handle);
     this.glyphPaintPrograms.clear();
-    for (const prog of this.programRegistry.values()) {
-      gl.deleteProgram(prog.handle);
-    }
+    for (const prog of this.programRegistry.values()) gl.deleteProgram(prog.handle);
     this.programRegistry.clear();
     this.programSources.clear();
     this.textureCache.free();
@@ -3820,6 +4518,7 @@ var WeaselRenderer = class {
     if (this.whiteTexture) gl.deleteTexture(this.whiteTexture);
     this.whiteTexture = null;
     this.effectTargets.releaseAll();
+    this.retained.releaseAll();
     this.paintScratch.release();
   }
   /**
@@ -3835,12 +4534,22 @@ var WeaselRenderer = class {
     const t0 = now();
     const counters = { drawCalls: 0 };
     const spanStats = [];
-    this.stats = { drawCalls: 0, ms: 0, spans: spanStats };
+    this.stats = { drawCalls: 0, ms: 0, spans: spanStats, retained: NO_RETAINED };
     const gl = this.gl;
     this.meshCache.drainPendingDeletes();
     this.imageCache.beginFrame();
     this.textureCache.sweep(textureRegistry);
     this.refreshPrograms();
+    this.retained.beginFrame([
+      glyphGeneration(),
+      textureRegistry.getVersion(),
+      paintDrawKindRegistry.getVersion(),
+      this.programEpoch,
+      this.flattenTolerance,
+      this.widthCss,
+      this.heightCss,
+      this.dpr
+    ]);
     resetBakeBudget(this.bakeBudget);
     this.groupState.reset();
     this.drawBatch.reset();
@@ -3853,13 +4562,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,
@@ -3876,15 +4597,20 @@ var WeaselRenderer = class {
       heightCss: this.heightCss,
       clipDepth: 0,
       clipStack: [],
-      flattenTolerance: this.flattenTolerance,
+      flattenTolerance: inCssPixels(this.flattenTolerance, this.dpr),
       textOutlineMinScreenSize: this.textOutlineMinScreenSize,
       viewMatrix,
       effectTargets: this.effectTargets,
+      retained: this.retained,
       paintScratch: this.paintScratch,
       renderTarget: null,
       deviceWidth: device.width,
       deviceHeight: device.height,
       restoreTargetRect: () => this.applyTarget(),
+      viewportWithin: (rect) => {
+        const own = this.glRect();
+        gl.viewport(own.x + rect.x, own.y + own.height - rect.y - rect.height, rect.width, rect.height);
+      },
       paintResources: this.paintResources,
       stats: counters
     };
@@ -3903,6 +4629,14 @@ var WeaselRenderer = class {
     for (; next < commands.length; next++) dispatch(ctx, commands[next]);
     flushBatch(ctx);
     this.meshCache.freeTransient();
+    const retained = this.retained;
+    retained.endFrame();
+    this.stats.retained = {
+      composited: retained.composited,
+      redrawn: retained.redrawn,
+      declined: retained.declined,
+      bytes: retained.bytes
+    };
     this.stats.drawCalls = counters.drawCalls;
     this.stats.ms = now() - t0;
   }
@@ -3912,11 +4646,14 @@ var WeaselRenderer = class {
   lastFrameStats() {
     return this.stats;
   }
-  /** Change the curve-flattening tolerance after construction. `undefined`
-   *  restores the cached `DEFAULT_FLATTEN_TOLERANCE` route. */
+  /** Change `flattenTolerance` after construction; `undefined` restores the default. */
   setFlattenTolerance(tolerance) {
     this.flattenTolerance = tolerance;
   }
+  /** Change `retainBudget` after construction; `undefined` restores the default. */
+  setRetainBudget(bytes) {
+    this.retained.setBudget(bytes ?? DEFAULT_RETAIN_BUDGET);
+  }
   resize(dims) {
     this.widthCss = dims.width;
     this.heightCss = dims.height;
@@ -3933,11 +4670,11 @@ var WeaselRenderer = class {
   }
   /** @internal */
   _pathFill() {
-    return this.pathFill;
+    return this.pathFill.get();
   }
   /** @internal */
   _pathFillVColor() {
-    return this.pathFillVColor;
+    return this.pathFillVColor.get();
   }
   /** @internal */
   _drawBatch() {
@@ -3948,12 +4685,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() {
@@ -4025,119 +4766,6 @@ function frameRect(sheet, index) {
     h: frameHeight
   };
 }
-var SLACK_PX = 1;
-var DEFAULT_MITER_LIMIT = 4;
-function cullDrawCommands(cmds, transform, rect) {
-  return cullList(cmds, transform, slackBox(rect));
-}
-function cullList(cmds, m, box) {
-  let out = null;
-  for (let i = 0; i < cmds.length; i++) {
-    const cmd = cmds[i];
-    const kept = cullOne(cmd, m, box);
-    if (kept === cmd) {
-      out?.push(cmd);
-      continue;
-    }
-    out ??= cmds.slice(0, i);
-    if (kept) out.push(kept);
-  }
-  return out ?? cmds;
-}
-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;
-      return children.length === 0 ? null : { ...cmd, children };
-    }
-    case "path":
-      return pathMisses(cmd.path, cmd.stroke, m, box) ? null : cmd;
-    case "image":
-      return quadMisses(cmd.x, cmd.y, cmd.x + cmd.w, cmd.y + cmd.h, m, box) ? null : cmd;
-    case "sprites":
-      return spritesMiss(cmd.sprites, m, box) ? null : cmd;
-    default:
-      return cmd;
-  }
-}
-function pathMisses(path, stroke, m, box) {
-  let minX, minY, maxX, maxY;
-  if (path.kind === "rect") {
-    minX = Math.min(path.x, path.x + path.width);
-    maxX = Math.max(path.x, path.x + path.width);
-    minY = Math.min(path.y, path.y + path.height);
-    maxY = Math.max(path.y, path.y + path.height);
-  } else if (path.kind === "polygon") {
-    const c = path.coords;
-    if (c.length < 2) return false;
-    minX = maxX = c[0];
-    minY = maxY = c[1];
-    for (let i = 2; i + 1 < c.length; i += 2) {
-      const x = c[i], y = c[i + 1];
-      if (x < minX) minX = x;
-      else if (x > maxX) maxX = x;
-      if (y < minY) minY = y;
-      else if (y > maxY) maxY = y;
-    }
-  } else {
-    return false;
-  }
-  const reach = stroke ? strokeReach(stroke, m) : 0;
-  return quadMisses(minX - reach, minY - reach, maxX + reach, maxY + reach, m, box);
-}
-function strokeReach(stroke, m) {
-  return strokeReachAt(stroke, mat3.meanScaleOf(m), mat3.minScaleOf(m));
-}
-function strokeReachAt(stroke, scale, least = scale) {
-  const at = least > 0 ? least : scale;
-  const base = resolveStrokeWidth(stroke.width ?? 1, typeof stroke.width === "object" ? at : scale);
-  let width = base;
-  if (stroke.vertexWidths) {
-    for (const v of stroke.vertexWidths) if (v > width) width = v;
-  }
-  const spike = Math.max(stroke.miterLimit ?? DEFAULT_MITER_LIMIT, Math.SQRT2);
-  const heads = markerReach(stroke);
-  return Math.max(Math.abs(width) * spike, heads.world, resolveScreenLength({ px: heads.px }, at));
-}
-function spritesMiss(sprites, m, box) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (let i = 0; i + SPRITE_STRIDE <= sprites.length; i += SPRITE_STRIDE) {
-    const x0 = sprites[i], y0 = sprites[i + 1];
-    const x1 = x0 + sprites[i + 2], y1 = y0 + sprites[i + 3];
-    minX = Math.min(minX, x0, x1);
-    maxX = Math.max(maxX, x0, x1);
-    minY = Math.min(minY, y0, y1);
-    maxY = Math.max(maxY, y0, y1);
-  }
-  if (minX === Infinity) return false;
-  return quadMisses(minX, minY, maxX, maxY, m, box);
-}
-function boundsMissRect(bounds, transform, rect) {
-  const x0 = Math.min(bounds.x, bounds.x + bounds.width);
-  const x1 = Math.max(bounds.x, bounds.x + bounds.width);
-  const y0 = Math.min(bounds.y, bounds.y + bounds.height);
-  const y1 = Math.max(bounds.y, bounds.y + bounds.height);
-  return quadMisses(x0, y0, x1, y1, transform, slackBox(rect));
-}
-function slackBox(rect) {
-  return {
-    minX: rect.x - SLACK_PX,
-    minY: rect.y - SLACK_PX,
-    maxX: rect.x + rect.width + SLACK_PX,
-    maxY: rect.y + rect.height + SLACK_PX
-  };
-}
-function quadMisses(x0, y0, x1, y1, m, box) {
-  const [ax, ay] = mat3.apply(m, x0, y0);
-  const [bx, by] = mat3.apply(m, x1, y0);
-  const [cx, cy] = mat3.apply(m, x1, y1);
-  const [dx, dy] = mat3.apply(m, x0, y1);
-  return Math.max(ax, bx, cx, dx) < box.minX || Math.min(ax, bx, cx, dx) > box.maxX || Math.max(ay, by, cy, dy) < box.minY || Math.min(ay, by, cy, dy) > box.maxY;
-}
 
 // src/effects/types.ts
 function registerEffect(id, frag) {
@@ -4263,6 +4891,6 @@ function isSolid(paint) {
   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 };
+export { DEFAULT_FLATTEN_TOLERANCE_PX, DEFAULT_RETAIN_BUDGET, EFFECT_KIT_UNIFORMS, EFFECT_VERT_SRC, IDENTITY_COLOR_MATRIX, OUTLINE_MIN_SCREEN_PX, SPRITE_STRIDE, ShaderCompileError, WeaselRenderer, blur, boundsMissRect, buildGradientRamp, cullDrawCommands, frameRect, registerEffect, resolveStrokeLengths, strokeReachAt, textCommand, textCommandFromPose, textCommandFromRuns, vignette };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map