@weasel-js/renderer 1.10.1 → 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, STRAIGHT_RGB_GLSL, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_MATRICES_FRAG_SRC, BATCH_VERT_SRC, GLImageCache, DrawBatch, getProgramSource, commandFill, commandPaint, BATCH_FRAG_SRC, uploadPremultiplied, RAMP_SLOT, withMatrix, cachedMarkerCommands, BATCH_MATRIX_SLOTS, packSlot, WHITE_SLOT, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-K7XCWVQH.js';
-export { commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getPaintDrawKind, getProgramSource, imageStatus, isPaintKindKnown, isVectorImageSrc, paintDrawKindRegistry, programSourceRegistry, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, subscribeImageReady, warmPaintKinds } from './chunk-K7XCWVQH.js';
+import { 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() {
@@ -1127,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 = (
@@ -1259,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(
@@ -1279,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++;
@@ -1297,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;
   }
@@ -1315,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;
@@ -1360,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}`
       );
@@ -1562,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);
@@ -1603,14 +1613,15 @@ 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) {
@@ -1740,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 {
@@ -1869,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;
@@ -1903,6 +2194,36 @@ 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/batchRun.ts
 function slotForBitmap(staged, image, sampling) {
@@ -2104,9 +2425,13 @@ function stageRamps(ctx, stops, space, vertices) {
     rowV: ctx.gradRamps.rowV(ctx.gradRamps.upload(stops, space))
   };
 }
-function stagedColor(ctx, paint) {
+function solidColor(paint) {
   const [r, g, b, a] = resolveColor(paint.color);
-  return foldColor(ctx, 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 slot = stageSolid(ctx, 4);
@@ -2198,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;
@@ -2239,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);
@@ -2310,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);
 }
@@ -2450,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) {
@@ -2458,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);
@@ -2497,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;
@@ -2515,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;
@@ -2625,19 +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;
+  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 = () => {
     ({ 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();
@@ -2668,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 = {
@@ -2745,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;
@@ -2803,7 +3165,7 @@ 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 slot = stageSolid(ctx, 4);
@@ -2831,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;
@@ -2857,7 +3218,7 @@ 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 slot = stageGlyphs(ctx, atlasId, fieldScale);
@@ -2988,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) {
@@ -3189,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 });
@@ -3352,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",
@@ -3583,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();
 }
@@ -3593,7 +4200,7 @@ 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;
@@ -3630,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;
@@ -3652,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) {
@@ -3723,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);
   }
@@ -3803,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) {
@@ -3846,6 +4459,7 @@ var WeaselRenderer = class {
     this.applyGlState();
     this.applyTarget();
     this.effectTargets.releaseAll();
+    this.retained.releaseAll();
     this.paintScratch.release();
     this.paintResources.release();
     this.paintResources = createPaintResources();
@@ -3890,13 +4504,9 @@ var WeaselRenderer = class {
     this.meshCache.dispose();
     this.paintResources.release();
     for (const lazy of this.lazyPrograms()) lazy.release();
-    for (const prog of [this.batchFill, ...this.glyphPaintPrograms.values()]) {
-      gl.deleteProgram(prog.handle);
-    }
+    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();
@@ -3908,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();
   }
   /**
@@ -3923,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();
@@ -3976,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
     };
@@ -4003,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;
   }
@@ -4012,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;
@@ -4129,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) {
@@ -4367,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