@weasel-js/core 1.0.0 → 1.0.1

package/dist/{chunk-D2C6K6FO.js → chunk-FVNWK7U3.js}

@@ -13,13 +13,13 @@ import earcut from 'earcut';
 import { applyToPoint, rotateAboutPoint, boxToBox, pointInPolygon, segmentsCross } from '@weasel-js/geom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import polygonClipping from 'polygon-clipping';
-import { matchSpec, mimeMatchesGlob } from '@weasel-js/gestures';
+import { matchSpec, parseTargetSpec, mimeMatchesGlob } from '@weasel-js/gestures';
 import { NORMAL, IMPLICIT_TAGS } from '@weasel-js/modes';
 import { createHistory } from '@weasel-js/history';
 export * from '@weasel-js/history';
 
 // src/version.ts
-var VERSION = "1.0.0" ;
+var VERSION = "1.0.1" ;
 
 // src/features/grid/roundToCell.ts
 function roundToCell(value, cellSize) {
@@ -2224,7 +2224,7 @@ function warnMissingGlyphOnce(family, cp) {
     `weasel layoutRuns: no glyph for U+${cp.toString(16).toUpperCase().padStart(4, "0")} (${JSON.stringify(ch)}) in "${family}", and the dynamic tier could not rasterize it \u2014 skipping the character. Bake it into the atlas, or call registerCanvasFont("${family}") to serve missing codepoints from installed fonts.`
   );
 }
-function layoutRuns(runs, opts, origin) {
+function layoutRuns(runs, opts) {
   const ctx = { groups: /* @__PURE__ */ new Map() };
   const entries = [];
   let prevCp;
@@ -2394,7 +2394,7 @@ function layoutRuns(runs, opts, origin) {
     }
   }
   const lineBoxes = [];
-  let penY = origin.y;
+  let penY = 0;
   let maxLineWidth = 0;
   const finiteWidth = Number.isFinite(opts.maxWidth) ? opts.maxWidth : 0;
   for (const line of lines) {
@@ -2406,7 +2406,7 @@ function layoutRuns(runs, opts, origin) {
       const slack = finiteWidth - line.width;
       return opts.align === "center" ? slack / 2 : slack;
     })();
-    const lineX0 = origin.x + alignShift;
+    const lineX0 = alignShift;
     const baselineSource = line.entries[0] ?? line.blank;
     const lineBaselineY = baselineSource ? penY + baselineSource.font.common.base * (baselineSource.fontSize / baselineSource.font.info.size) : penY;
     let penX = lineX0;
@@ -2480,7 +2480,7 @@ function layoutRuns(runs, opts, origin) {
     groups: [...ctx.groups.values()],
     decorations,
     lines: lineBoxes,
-    bounds: { width: maxLineWidth, height: penY - origin.y }
+    bounds: { width: maxLineWidth, height: penY }
   };
 }
 var LAYOUT_CACHE_VARIANT_LIMIT = 8;
@@ -2493,10 +2493,10 @@ function outlineBucket(runs, min) {
   for (const size of sizes) if (size >= min) n++;
   return n;
 }
-function variantKey(runs, opts, origin) {
-  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}|${origin.x}|${origin.y}`;
+function variantKey(runs, opts) {
+  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}`;
 }
-function cachedLayoutRuns(runs, opts, origin) {
+function cachedLayoutRuns(runs, opts) {
   const fonts = glyphGeneration();
   let entry = cache2.get(runs);
   if (entry === void 0) {
@@ -2506,10 +2506,10 @@ function cachedLayoutRuns(runs, opts, origin) {
     entry.generation = fonts;
     entry.byVariant.clear();
   }
-  const key = variantKey(runs, opts, origin);
+  const key = variantKey(runs, opts);
   const hit = entry.byVariant.get(key);
   if (hit !== void 0) return hit;
-  const laid = layoutRuns(runs, opts, origin);
+  const laid = layoutRuns(runs, opts);
   if (entry.byVariant.size >= LAYOUT_CACHE_VARIANT_LIMIT) entry.byVariant.clear();
   entry.byVariant.set(key, laid);
   return laid;
@@ -2827,26 +2827,267 @@ function outlineStrokeMesh(glyphKey, d, emWidth, stroke) {
   return mesh.indices.length === 0 ? null : mesh;
 }
 
+// src/renderer/solidBatch.ts
+var MAX_VERTICES_PER_BATCH = 32768;
+var FLOATS_PER_VERTEX = 6;
+var INITIAL_VERTICES = 256;
+var INITIAL_INDICES = 384;
+var SolidBatch = class {
+  gl;
+  vao;
+  vbo;
+  ibo;
+  verts = new Float32Array(INITIAL_VERTICES * FLOATS_PER_VERTEX);
+  idx = new Uint32Array(INITIAL_INDICES);
+  nVerts = 0;
+  nIdx = 0;
+  /** What the GPU buffers are currently sized for. */
+  vboVerts = 0;
+  iboIdx = 0;
+  constructor(gl, prog) {
+    const aPos = prog.attribute("a_position");
+    const aColor = prog.attribute("a_vertexColor");
+    if (aPos === void 0 || aColor === void 0) {
+      throw new Error("SolidBatch: vertex-color program is missing a_position / a_vertexColor");
+    }
+    const vao = gl.createVertexArray();
+    const vbo = gl.createBuffer();
+    const ibo = gl.createBuffer();
+    if (!vao || !vbo || !ibo) throw new Error("SolidBatch: failed to create GL objects");
+    this.gl = gl;
+    this.vao = vao;
+    this.vbo = vbo;
+    this.ibo = ibo;
+    const stride = FLOATS_PER_VERTEX * 4;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, stride, 0);
+    gl.enableVertexAttribArray(aColor);
+    gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, stride, 8);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
+    gl.bindVertexArray(null);
+    this.growGpu(INITIAL_VERTICES, INITIAL_INDICES);
+  }
+  get length() {
+    return this.nIdx;
+  }
+  /** Whether staging `vertices` more would put the run past the per-flush cap. */
+  wouldOverflow(vertices) {
+    return this.nVerts + vertices > MAX_VERTICES_PER_BATCH;
+  }
+  /**
+   * Append one rect's four corners through `m`, all carrying `rgba` (straight
+   * alpha). An affine maps a rect to a parallelogram, so two triangles still
+   * cover it and the batch draws at `u_model` identity.
+   */
+  pushRect(x, y, w, h, m, r, g, b, a) {
+    this.reserve(4, 6);
+    const v = this.verts;
+    let i = this.nVerts * FLOATS_PER_VERTEX;
+    const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
+    const x1 = x + w;
+    const y1 = y + h;
+    const ax = ma * x + mc * y + mtx, ay = mb * x + md * y + mty;
+    const bx = ma * x1 + mc * y + mtx, by = mb * x1 + md * y + mty;
+    const cx = ma * x1 + mc * y1 + mtx, cy = mb * x1 + md * y1 + mty;
+    const dx = ma * x + mc * y1 + mtx, dy = mb * x + md * y1 + mty;
+    v[i++] = ax;
+    v[i++] = ay;
+    v[i++] = r;
+    v[i++] = g;
+    v[i++] = b;
+    v[i++] = a;
+    v[i++] = bx;
+    v[i++] = by;
+    v[i++] = r;
+    v[i++] = g;
+    v[i++] = b;
+    v[i++] = a;
+    v[i++] = cx;
+    v[i++] = cy;
+    v[i++] = r;
+    v[i++] = g;
+    v[i++] = b;
+    v[i++] = a;
+    v[i++] = dx;
+    v[i++] = dy;
+    v[i++] = r;
+    v[i++] = g;
+    v[i++] = b;
+    v[i++] = a;
+    const base = this.nVerts;
+    let j = this.nIdx;
+    this.idx[j++] = base;
+    this.idx[j++] = base + 1;
+    this.idx[j++] = base + 2;
+    this.idx[j++] = base;
+    this.idx[j++] = base + 2;
+    this.idx[j++] = base + 3;
+    this.nVerts += 4;
+    this.nIdx += 6;
+  }
+  /**
+   * Append a tessellated mesh through `m`, all vertices carrying `rgba`. The
+   * mesh's own indices are rebased onto the staged vertices, which is why the
+   * index buffer is uploaded per flush rather than written once.
+   */
+  pushMesh(mesh, m, r, g, b, a) {
+    const src = mesh.vertices;
+    const srcIdx = mesh.indices;
+    const n = src.length >> 1;
+    this.reserve(n, srcIdx.length);
+    const v = this.verts;
+    let i = this.nVerts * FLOATS_PER_VERTEX;
+    const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
+    for (let k = 0; k < n; k++) {
+      const x = src[k * 2];
+      const y = src[k * 2 + 1];
+      v[i++] = ma * x + mc * y + mtx;
+      v[i++] = mb * x + md * y + mty;
+      v[i++] = r;
+      v[i++] = g;
+      v[i++] = b;
+      v[i++] = a;
+    }
+    const base = this.nVerts;
+    const out = this.idx;
+    let j = this.nIdx;
+    for (let k = 0; k < srcIdx.length; k++) out[j++] = base + srcIdx[k];
+    this.nVerts += n;
+    this.nIdx += srcIdx.length;
+  }
+  /** Upload the staged geometry and bind the batch VAO. Returns the index
+   *  count for the caller's `drawElements`. */
+  uploadAndBind() {
+    const gl = this.gl;
+    if (this.nVerts > this.vboVerts || this.nIdx > this.iboIdx) {
+      this.growGpu(this.nVerts, this.nIdx);
+    }
+    gl.bindVertexArray(this.vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verts, 0, this.nVerts * FLOATS_PER_VERTEX);
+    gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, this.idx, 0, this.nIdx);
+    return this.nIdx;
+  }
+  reset() {
+    this.nVerts = 0;
+    this.nIdx = 0;
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteBuffer(this.vbo);
+    gl.deleteBuffer(this.ibo);
+    gl.deleteVertexArray(this.vao);
+  }
+  /** Grow the CPU arrays so `vertices` / `indices` more fit. */
+  reserve(vertices, indices) {
+    const needVerts = (this.nVerts + vertices) * FLOATS_PER_VERTEX;
+    if (needVerts > this.verts.length) {
+      let len = this.verts.length;
+      while (len < needVerts) len *= 2;
+      const grown = new Float32Array(len);
+      grown.set(this.verts);
+      this.verts = grown;
+    }
+    const needIdx = this.nIdx + indices;
+    if (needIdx > this.idx.length) {
+      let len = this.idx.length;
+      while (len < needIdx) len *= 2;
+      const grown = new Uint32Array(len);
+      grown.set(this.idx);
+      this.idx = grown;
+    }
+  }
+  /** Size both GPU buffers for at least what is staged, doubling to amortize. */
+  growGpu(vertices, indices) {
+    const gl = this.gl;
+    if (vertices > this.vboVerts) {
+      let capacity = Math.max(this.vboVerts, INITIAL_VERTICES);
+      while (capacity < vertices) capacity *= 2;
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+      gl.bufferData(gl.ARRAY_BUFFER, capacity * FLOATS_PER_VERTEX * 4, gl.DYNAMIC_DRAW);
+      this.vboVerts = capacity;
+    }
+    if (indices > this.iboIdx) {
+      let capacity = Math.max(this.iboIdx, INITIAL_INDICES);
+      while (capacity < indices) capacity *= 2;
+      gl.bindVertexArray(this.vao);
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, capacity * 4, gl.DYNAMIC_DRAW);
+      gl.bindVertexArray(null);
+      this.iboIdx = capacity;
+    }
+  }
+};
+
 // src/renderer/draw.ts
-function setColorMatrixUniforms(ctx, prog) {
+var FRAME_UPLOADS = /* @__PURE__ */ new WeakMap();
+var FRAME_PROJ = /* @__PURE__ */ new WeakMap();
+function uploadedFor(ctx, prog) {
+  let byProgram = FRAME_UPLOADS.get(ctx);
+  if (!byProgram) {
+    byProgram = /* @__PURE__ */ new WeakMap();
+    FRAME_UPLOADS.set(ctx, byProgram);
+  }
+  let uploaded = byProgram.get(prog);
+  if (!uploaded) {
+    uploaded = {};
+    byProgram.set(prog, uploaded);
+  }
+  return uploaded;
+}
+function sameValues(prev, next) {
+  if (prev === void 0 || prev.length !== next.length) return false;
+  for (let i = 0; i < prev.length; i++) if (prev[i] !== next[i]) return false;
+  return true;
+}
+var BATCH_MODEL = mat3.identity();
+function projFor(ctx) {
+  let proj = FRAME_PROJ.get(ctx);
+  if (!proj) {
+    proj = mat3.screenToClip(ctx.widthCss, ctx.heightCss);
+    FRAME_PROJ.set(ctx, proj);
+  }
+  return proj;
+}
+var COLOR_MATRIX_SCRATCH = new Float32Array(16);
+function setColorMatrixUniforms(ctx, prog, cm = ctx.state.colorMatrix) {
   const gl = ctx.gl;
-  const cm = ctx.state.colorMatrix;
-  const m4 = new Float32Array(16);
-  for (let row = 0; row < 4; row++) {
-    for (let col = 0; col < 4; col++) {
-      m4[col * 4 + row] = cm[row * 5 + col];
+  const uploaded = uploadedFor(ctx, prog);
+  const mLoc = prog.uniform("u_colorMatrix");
+  if (mLoc !== void 0) {
+    for (let row = 0; row < 4; row++) {
+      for (let col = 0; col < 4; col++) {
+        COLOR_MATRIX_SCRATCH[col * 4 + row] = cm[row * 5 + col];
+      }
+    }
+    if (!sameValues(uploaded.colorMatrix, COLOR_MATRIX_SCRATCH)) {
+      gl.uniformMatrix4fv(mLoc, false, COLOR_MATRIX_SCRATCH);
+      uploaded.colorMatrix = Float32Array.from(COLOR_MATRIX_SCRATCH);
     }
   }
-  const mLoc = prog.uniform("u_colorMatrix");
   const bLoc = prog.uniform("u_colorBias");
-  if (mLoc !== void 0) gl.uniformMatrix4fv(mLoc, false, m4);
-  if (bLoc !== void 0) gl.uniform4f(bLoc, cm[4], cm[9], cm[14], cm[19]);
+  if (bLoc !== void 0) {
+    const bias = [cm[4], cm[9], cm[14], cm[19]];
+    if (!sameValues(uploaded.colorBias, bias)) {
+      gl.uniform4f(bLoc, bias[0], bias[1], bias[2], bias[3]);
+      uploaded.colorBias = Float32Array.from(bias);
+    }
+  }
 }
-function fillMeshHandle(ctx, path) {
+function fillMesh(ctx, path) {
   if (ctx.flattenTolerance !== void 0) {
-    return ctx.meshCache.uploadTransient(tessellate(path, { flattenTolerance: ctx.flattenTolerance }));
+    return tessellate(path, { flattenTolerance: ctx.flattenTolerance });
   }
-  return ctx.meshCache.handleFor(getMesh(path));
+  return getMesh(path);
+}
+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));
 }
 function dispatch(ctx, cmd) {
   switch (cmd.kind) {
@@ -2855,10 +3096,13 @@ function dispatch(ctx, cmd) {
     case "path":
       return drawPath(ctx, cmd);
     case "text":
+      flushSolids(ctx);
       return drawText(ctx, cmd);
     case "image":
+      flushSolids(ctx);
       return drawImage(ctx, cmd);
     case "shader":
+      flushSolids(ctx);
       return drawShader(ctx, cmd);
   }
 }
@@ -2987,11 +3231,13 @@ function drawGroup(ctx, cmd) {
         "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."
       );
     }
+    flushSolids(ctx);
     pushClip(ctx, cmd.clip, newDepth);
     ctx.clipDepth = newDepth;
   }
   for (const child of cmd.children) dispatch(ctx, child);
   if (cmd.clip) {
+    flushSolids(ctx);
     popClip(ctx, cmd.clip, ctx.clipDepth - 1);
     ctx.clipDepth -= 1;
   }
@@ -3000,38 +3246,98 @@ function drawGroup(ctx, cmd) {
 function drawPath(ctx, cmd) {
   if (!cmd.fill && !cmd.stroke) return;
   if (cmd.fill) {
-    const isSolidRectFast = cmd.path.kind === "rect" && (cmd.fill.fill === void 0 || cmd.fill.fill === "solid") && (!cmd.vertexColors || cmd.vertexColors.length === 0) && ctx.rectVao !== null && ctx.rectVbo !== null;
-    if (isSolidRectFast && cmd.path.kind === "rect") {
-      drawRectFast(ctx, cmd.path, cmd.fill);
+    const batchablePaint = (cmd.fill.fill === void 0 || cmd.fill.fill === "solid") && (!cmd.vertexColors || cmd.vertexColors.length === 0);
+    const solid = cmd.fill;
+    if (batchablePaint && cmd.path.kind === "rect") {
+      pushRect(ctx, cmd.path, solid);
     } else {
-      const handle = fillMeshHandle(ctx, cmd.path);
-      if (cmd.vertexColors && cmd.vertexColors.length > 0 && (cmd.fill.fill === void 0 || cmd.fill.fill === "solid")) {
-        drawPathFillVColor(ctx, cmd, cmd.fill, handle);
-      } else if (handle.requiresStencil) {
-        drawPathFillStencil(ctx, cmd.fill, handle);
+      const mesh = fillMesh(ctx, cmd.path);
+      if (batchablePaint && canBatchMesh(mesh)) {
+        pushMesh(ctx, mesh, solid);
       } else {
-        drawPathFillByKind(ctx, cmd.fill, handle);
+        flushSolids(ctx);
+        const handle = meshHandle(ctx, mesh);
+        if (cmd.vertexColors && cmd.vertexColors.length > 0 && (cmd.fill.fill === void 0 || cmd.fill.fill === "solid")) {
+          drawPathFillVColor(ctx, cmd, solid, handle);
+        } else if (handle.requiresStencil) {
+          drawPathFillStencil(ctx, cmd.fill, handle);
+        } else {
+          drawPathFillByKind(ctx, cmd.fill, handle);
+        }
       }
     }
   }
-  if (cmd.stroke) {
-    drawPathStroke(ctx, cmd);
+  if (cmd.stroke) drawPathStroke(ctx, cmd);
+}
+function isIdentityColorMatrix(cm) {
+  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+}
+function stagedStateIsLive(ctx, staged) {
+  if (staged.clipDepth !== ctx.clipDepth) return false;
+  if (!staged.foldsAlpha && staged.alpha !== ctx.state.alpha) return false;
+  const colorMatrix = ctx.state.colorMatrix;
+  return staged.colorMatrix === colorMatrix || sameValues(staged.colorMatrix, colorMatrix);
+}
+var MAX_BATCHED_MESH_VERTICES = 256;
+function canBatchMesh(mesh) {
+  return !mesh.requiresStencil && mesh.vertices.length >> 1 <= MAX_BATCHED_MESH_VERTICES;
+}
+function stageSolid(ctx, vertices) {
+  if (ctx.solidState !== void 0 && !stagedStateIsLive(ctx, ctx.solidState)) flushSolids(ctx);
+  if (ctx.solidBatch.wouldOverflow(vertices)) flushSolids(ctx);
+  if (ctx.solidState === void 0) {
+    const colorMatrix = ctx.state.colorMatrix;
+    const foldsAlpha = isIdentityColorMatrix(colorMatrix);
+    ctx.solidState = {
+      alpha: foldsAlpha ? 1 : ctx.state.alpha,
+      colorMatrix,
+      clipDepth: ctx.clipDepth,
+      foldsAlpha
+    };
   }
+  return ctx.solidState;
+}
+function stagedColor(ctx, staged, paint) {
+  const [r, g, b, a] = resolveColor(paint.color);
+  return [r, g, b, a * (paint.opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1)];
+}
+function pushRect(ctx, rect, fill) {
+  const staged = stageSolid(ctx, 4);
+  const [r, g, b, a] = stagedColor(ctx, staged, fill);
+  ctx.solidBatch.pushRect(
+    rect.x,
+    rect.y,
+    rect.width,
+    rect.height,
+    ctx.state.transform,
+    r,
+    g,
+    b,
+    a
+  );
+}
+function pushMesh(ctx, mesh, paint) {
+  const staged = stageSolid(ctx, mesh.vertices.length >> 1);
+  const [r, g, b, a] = stagedColor(ctx, staged, paint);
+  ctx.solidBatch.pushMesh(mesh, ctx.state.transform, r, g, b, a);
 }
-function drawRectFast(ctx, rect, fill) {
+function flushSolids(ctx) {
+  const batch = ctx.solidBatch;
+  const staged = ctx.solidState;
+  if (batch.length === 0 || staged === void 0) return;
   const gl = ctx.gl;
-  const { x, y, width: w, height: h } = rect;
-  const corners = new Float32Array([x, y, x + w, y, x + w, y + h, x, y + h]);
-  gl.useProgram(ctx.pathFill.handle);
-  gl.bindVertexArray(ctx.rectVao);
-  gl.bindBuffer(gl.ARRAY_BUFFER, ctx.rectVbo);
-  gl.bufferSubData(gl.ARRAY_BUFFER, 0, corners);
-  setProjAndModel(ctx, ctx.pathFill);
-  setSolidPaintUniforms(ctx, ctx.pathFill, fill.color, fill.opacity);
-  setColorMatrixUniforms(ctx, ctx.pathFill);
-  applyClipTest(ctx);
-  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 0);
+  const prog = ctx.pathFillVColor;
+  gl.useProgram(prog.handle);
+  const indexCount = batch.uploadAndBind();
+  setProjAndModel(ctx, prog, BATCH_MODEL);
+  gl.uniform4f(prog.uniform("u_color"), 1, 1, 1, 1);
+  gl.uniform1f(prog.uniform("u_alpha"), staged.alpha);
+  setColorMatrixUniforms(ctx, prog, staged.colorMatrix);
+  applyClipTest(ctx, staged.clipDepth);
+  gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_INT, 0);
   gl.bindVertexArray(null);
+  batch.reset();
+  ctx.solidState = void 0;
 }
 function expandAnchorColors(perAnchor, handle) {
   const aA = handle.anchorA;
@@ -3076,11 +3382,18 @@ function drawPathFillVColor(ctx, cmd, fill, handle) {
   gl.bindVertexArray(null);
   gl.deleteBuffer(colorVbo);
 }
-function setProjAndModel(ctx, prog) {
+function setProjAndModel(ctx, prog, model = ctx.state.transform) {
   const gl = ctx.gl;
-  const proj = mat3.screenToClip(ctx.widthCss, ctx.heightCss);
-  gl.uniformMatrix3fv(prog.uniform("u_proj"), false, proj);
-  gl.uniformMatrix3fv(prog.uniform("u_model"), false, ctx.state.transform);
+  const uploaded = uploadedFor(ctx, prog);
+  const proj = projFor(ctx);
+  if (!sameValues(uploaded.proj, proj)) {
+    gl.uniformMatrix3fv(prog.uniform("u_proj"), false, proj);
+    uploaded.proj = Float32Array.from(proj);
+  }
+  if (!sameValues(uploaded.model, model)) {
+    gl.uniformMatrix3fv(prog.uniform("u_model"), false, model);
+    uploaded.model = Float32Array.from(model);
+  }
 }
 function setSolidPaintUniforms(ctx, prog, color, opacity) {
   const gl = ctx.gl;
@@ -3187,9 +3500,8 @@ function drawPathFillGradient(ctx, fill, handle) {
   gl.drawElements(gl.TRIANGLES, handle.indexCount, gl.UNSIGNED_INT, 0);
   gl.bindVertexArray(null);
 }
-function applyClipTest(ctx) {
+function applyClipTest(ctx, depth = ctx.clipDepth) {
   const gl = ctx.gl;
-  const depth = ctx.clipDepth;
   if (depth === 0) {
     gl.disable(gl.STENCIL_TEST);
     return;
@@ -3273,6 +3585,7 @@ function drawPathStroke(ctx, cmd) {
   }
   const align = stroke.align ?? "center";
   if (cmd.path.kind === "polygon" && align !== "center") {
+    flushSolids(ctx);
     drawPathStrokeStenciled(ctx, cmd, align);
     return;
   }
@@ -3283,6 +3596,12 @@ function drawPathStrokeUnclipped(ctx, cmd) {
   const solid = stroke.paint;
   const mesh = tessellateStroke(cmd.path, stroke, { flattenTolerance: ctx.flattenTolerance });
   if (mesh.indices.length === 0) return;
+  const hasVColors = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
+  if (!hasVColors && canBatchMesh(mesh)) {
+    pushMesh(ctx, mesh, solid);
+    return;
+  }
+  flushSolids(ctx);
   const handle = ctx.meshCache.uploadTransient(mesh);
   const gl = ctx.gl;
   if (stroke.vertexColors && stroke.vertexColors.length > 0) {
@@ -3380,20 +3699,17 @@ function drawText(ctx, cmd) {
   const maxWidth = cmd.maxWidth ?? Infinity;
   const minScreen = ctx.textOutlineMinScreenSize ?? OUTLINE_MIN_SCREEN_PX;
   const outlineMinSize = Number.isFinite(minScreen) ? minScreen / modelScale(ctx.state.transform) : void 0;
-  const laid = cachedLayoutRuns(
-    cmd.runs,
-    { maxWidth, lineHeight, align, outlineMinSize },
-    { x: cmd.x, y: cmd.y }
-  );
+  const laid = cachedLayoutRuns(cmd.runs, { maxWidth, lineHeight, align, outlineMinSize });
   if (laid.groups.length === 0 && laid.decorations.length === 0) return;
-  const dy = verticalAlignOffset(cmd.verticalAlign, cmd.height, laid.bounds.height);
+  const dx = cmd.x;
+  const dy = cmd.y + verticalAlignOffset(cmd.verticalAlign, cmd.height, laid.bounds.height);
   const gl = ctx.gl;
   applyClipTest(ctx);
   const preparedPrograms = /* @__PURE__ */ new Set();
   let currentProg = null;
   for (const group of laid.groups) {
     if (group.source === "outline") {
-      drawTextOutlineGroup(ctx, group, dy);
+      drawTextOutlineGroup(ctx, group, dx, dy);
       currentProg = null;
       continue;
     }
@@ -3408,31 +3724,31 @@ function drawText(ctx, cmd) {
       setColorMatrixUniforms(ctx, prog);
       gl.uniform1f(prog.uniform("u_alpha"), ctx.state.alpha);
     }
-    drawTextGroup(ctx, group, prog, dy);
+    drawTextGroup(ctx, group, prog, dx, dy);
   }
-  drawTextDecorations(ctx, laid.decorations, dy);
+  drawTextDecorations(ctx, laid.decorations, dx, dy);
 }
 var SYNTHETIC_ITALIC_RADIANS = 0.2094;
-function drawTextOutlineGroup(ctx, group, dy) {
-  const mesh = outlineGroupMesh(group, dy);
+function drawTextOutlineGroup(ctx, group, dx, dy) {
+  const mesh = outlineGroupMesh(group, dx, dy);
   if (mesh) drawPathFillByKind(ctx, group.fill, ctx.meshCache.uploadTransient(mesh));
   if (!group.stroke) return;
-  const strokeMesh = outlineGroupStrokeMesh(group, dy);
+  const strokeMesh = outlineGroupStrokeMesh(group, dx, dy);
   if (strokeMesh) {
     drawPathFillByKind(ctx, group.stroke.paint, ctx.meshCache.uploadTransient(strokeMesh));
   }
 }
-function outlineGroupMesh(group, dy) {
-  return mergeGlyphMeshes(group, dy, (glyph) => outlineMesh(glyph.key, glyph.d));
+function outlineGroupMesh(group, dx, dy) {
+  return mergeGlyphMeshes(group, dx, dy, (glyph) => outlineMesh(glyph.key, glyph.d));
 }
-function outlineGroupStrokeMesh(group, dy) {
+function outlineGroupStrokeMesh(group, dx, dy) {
   const stroke = group.stroke;
   if (!stroke) return null;
   const width = stroke.width ?? 1;
   if (!(width > 0)) return null;
-  return mergeGlyphMeshes(group, dy, (glyph) => glyph.scale > 0 ? outlineStrokeMesh(glyph.key, glyph.d, quantizeEmWidth(width / glyph.scale), stroke) : null);
+  return mergeGlyphMeshes(group, dx, dy, (glyph) => glyph.scale > 0 ? outlineStrokeMesh(glyph.key, glyph.d, quantizeEmWidth(width / glyph.scale), stroke) : null);
 }
-function mergeGlyphMeshes(group, dy, meshFor) {
+function mergeGlyphMeshes(group, dx, dy, meshFor) {
   const parts = [];
   let vertexFloats = 0;
   let indexCount = 0;
@@ -3455,7 +3771,7 @@ function mergeGlyphMeshes(group, dy, meshFor) {
     for (let k = 0; k < mesh.vertices.length; k += 2) {
       const ex = mesh.vertices[k];
       const ey = mesh.vertices[k + 1];
-      vertices[vi++] = x + (ex - ey * shear) * scale2;
+      vertices[vi++] = x + dx + (ex - ey * shear) * scale2;
       vertices[vi++] = baselineY + dy + ey * scale2;
     }
     for (let k = 0; k < mesh.indices.length; k++) indices[ii++] = base + mesh.indices[k];
@@ -3463,7 +3779,7 @@ function mergeGlyphMeshes(group, dy, meshFor) {
   }
   return { vertices, indices };
 }
-function drawTextDecorations(ctx, decorations, dy) {
+function drawTextDecorations(ctx, decorations, dx, dy) {
   if (decorations.length === 0) return;
   const batches = /* @__PURE__ */ new Map();
   for (const d of decorations) {
@@ -3486,14 +3802,15 @@ function drawTextDecorations(ctx, decorations, dy) {
     const vertices = new Float32Array(rects.length * 4 * 2);
     let vi = 0;
     for (const d of rects) {
+      const dx0 = d.x0 + dx, dx1 = d.x1 + dx;
       const dy0 = d.y0 + dy, dy1 = d.y1 + dy;
-      vertices[vi++] = d.x0;
+      vertices[vi++] = dx0;
       vertices[vi++] = dy0;
-      vertices[vi++] = d.x1;
+      vertices[vi++] = dx1;
       vertices[vi++] = dy0;
-      vertices[vi++] = d.x0;
+      vertices[vi++] = dx0;
       vertices[vi++] = dy1;
-      vertices[vi++] = d.x1;
+      vertices[vi++] = dx1;
       vertices[vi++] = dy1;
     }
     const indices = new Uint32Array(rects.length * 6);
@@ -3532,7 +3849,7 @@ function drawTextDecorations(ctx, decorations, dy) {
     gl.deleteBuffer(ibo);
   }
 }
-function drawTextGroup(ctx, group, prog, dy) {
+function drawTextGroup(ctx, group, prog, dx, dy) {
   if (group.source === "canvas") {
     if (!syncDynamicPageTexture(ctx.textureCache, group.page)) return;
   } else {
@@ -3543,23 +3860,24 @@ function drawTextGroup(ctx, group, prog, dy) {
   const vertices = new Float32Array(group.quads.length * 4 * 5);
   let vi = 0;
   for (const q of group.quads) {
+    const x0 = q.x0 + dx, x1 = q.x1 + dx;
     const y0 = q.y0 + dy, y1 = q.y1 + dy, by = q.baselineY + dy;
-    vertices[vi++] = q.x0;
+    vertices[vi++] = x0;
     vertices[vi++] = y0;
     vertices[vi++] = q.u0;
     vertices[vi++] = q.v0;
     vertices[vi++] = by;
-    vertices[vi++] = q.x1;
+    vertices[vi++] = x1;
     vertices[vi++] = y0;
     vertices[vi++] = q.u1;
     vertices[vi++] = q.v0;
     vertices[vi++] = by;
-    vertices[vi++] = q.x0;
+    vertices[vi++] = x0;
     vertices[vi++] = y1;
     vertices[vi++] = q.u0;
     vertices[vi++] = q.v1;
     vertices[vi++] = by;
-    vertices[vi++] = q.x1;
+    vertices[vi++] = x1;
     vertices[vi++] = y1;
     vertices[vi++] = q.u1;
     vertices[vi++] = q.v1;
@@ -3786,10 +4104,7 @@ var WeaselRenderer = class {
   programRegistry = /* @__PURE__ */ new Map();
   quadVbo = null;
   quadIbo = null;
-  /** Shared rect-fill geometry: 4 verts × 2 floats (dynamic), 6-index static IBO. */
-  rectVao = null;
-  rectVbo = null;
-  rectIbo = null;
+  solidBatch;
   groupState = new GroupState();
   widthCss;
   heightCss;
@@ -3864,31 +4179,7 @@ var WeaselRenderer = class {
     this.imageCache = new GLImageCache(this.gl, this.imageMinification);
     this.gradRampCache = new GradientRampCache(this.gl);
     this.uploadQuadGeometry();
-    this.uploadRectGeometry(aPos);
-  }
-  /** Allocate the shared rect VAO + dynamic VBO (4 verts × 2 floats) + static
-   *  IBO (6 indices). drawRectFast bufferSubData's the 4 corner coords each
-   *  draw, avoiding per-rect buffer allocation in animated demos. */
-  uploadRectGeometry(aPositionLoc) {
-    const gl = this.gl;
-    this.rectVao = gl.createVertexArray();
-    this.rectVbo = gl.createBuffer();
-    this.rectIbo = gl.createBuffer();
-    if (!this.rectVao || !this.rectVbo || !this.rectIbo) {
-      throw new Error("WeaselRenderer: failed to create rect-fast geometry");
-    }
-    gl.bindVertexArray(this.rectVao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.rectVbo);
-    gl.bufferData(gl.ARRAY_BUFFER, 8 * 4, gl.DYNAMIC_DRAW);
-    gl.enableVertexAttribArray(aPositionLoc);
-    gl.vertexAttribPointer(aPositionLoc, 2, gl.FLOAT, false, 0, 0);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.rectIbo);
-    gl.bufferData(
-      gl.ELEMENT_ARRAY_BUFFER,
-      new Uint32Array([0, 1, 2, 0, 2, 3]),
-      gl.STATIC_DRAW
-    );
-    gl.bindVertexArray(null);
+    this.solidBatch = new SolidBatch(this.gl, this.pathFillVColor);
   }
   uploadQuadGeometry() {
     const gl = this.gl;
@@ -3976,7 +4267,7 @@ var WeaselRenderer = class {
     this.gradRampCache = new GradientRampCache(this.gl);
     markAllFontsNotUploaded();
     this.uploadQuadGeometry();
-    this.uploadRectGeometry(aPos);
+    this.solidBatch = new SolidBatch(this.gl, this.pathFillVColor);
     for (const id of this.programRegistry.keys()) {
       const src = getProgramSource(id);
       if (!src) continue;
@@ -4036,9 +4327,7 @@ var WeaselRenderer = class {
     this.gradRampCache.free();
     if (this.quadVbo) gl.deleteBuffer(this.quadVbo);
     if (this.quadIbo) gl.deleteBuffer(this.quadIbo);
-    if (this.rectVbo) gl.deleteBuffer(this.rectVbo);
-    if (this.rectIbo) gl.deleteBuffer(this.rectIbo);
-    if (this.rectVao) gl.deleteVertexArray(this.rectVao);
+    this.solidBatch.dispose();
   }
   /**
    * Draw one frame.
@@ -4071,8 +4360,7 @@ var WeaselRenderer = class {
       programRegistry: this.programRegistry,
       quadVbo: this.quadVbo,
       quadIbo: this.quadIbo,
-      rectVao: this.rectVao,
-      rectVbo: this.rectVbo,
+      solidBatch: this.solidBatch,
       state: this.groupState,
       widthCss: this.widthCss,
       heightCss: this.heightCss,
@@ -4082,6 +4370,7 @@ var WeaselRenderer = class {
       viewMatrix
     };
     for (const cmd of commands) dispatch(ctx, cmd);
+    flushSolids(ctx);
     this.meshCache.freeTransient();
   }
   resize(dims) {
@@ -4111,6 +4400,10 @@ var WeaselRenderer = class {
     return this.pathFillVColor;
   }
   /** @internal */
+  _solidBatch() {
+    return this.solidBatch;
+  }
+  /** @internal */
   _textSdf() {
     return this.textSdf;
   }
@@ -5380,12 +5673,7 @@ function moveGestureAdapter(scene) {
   return {
     getNode: (id) => scene.get(asNodeId(id)),
     getNodes: () => {
-      const out = [];
-      for (const id of scene.renderOrder()) {
-        const n = scene.get(id);
-        if (n) out.push(n);
-      }
-      return out;
+      return [...scene.renderOrderNodes()];
     },
     getPose: (id) => scene.get(asNodeId(id)).pose,
     getParent: (id) => scene.get(asNodeId(id))?.parent ?? null,
@@ -6001,12 +6289,7 @@ function defaultCommitAdapter(scene) {
   return {
     getNode: (id) => scene.get(asNodeId(id)),
     getNodes: () => {
-      const out = [];
-      for (const id of scene.renderOrder()) {
-        const n = scene.get(id);
-        if (n) out.push(n);
-      }
-      return out;
+      return [...scene.renderOrderNodes()];
     },
     getPose: (id) => scene.get(asNodeId(id)).pose,
     getParent: (id) => scene.get(asNodeId(id))?.parent ?? null,
@@ -10706,18 +10989,39 @@ function modsCount(mods) {
 }
 function targetRank(target) {
   if (target === void 0) return 0;
-  if (typeof target !== "string") return 1;
-  if (target.startsWith("kind:")) return target.endsWith(":selected") ? 3 : 2;
-  if (target.startsWith("affordance:")) return 2;
-  return 1;
+  const form = parseTargetSpec(target);
+  if (form === null) return 1;
+  switch (form.form) {
+    case "kind":
+      return form.requireSelected ? 3 : 2;
+    case "affordance":
+      return 2;
+    case "body":
+      return 1;
+    case "predicate":
+      return 1;
+    default: {
+      return 1;
+    }
+  }
 }
 function targetConsultsAffordance(specTarget) {
   if (specTarget === void 0) return false;
-  if (typeof specTarget === "object" && specTarget !== null && "kindOf" in specTarget) {
-    const kindOf2 = specTarget.kindOf;
-    return kindOf2?.readsAffordance !== false;
+  const form = parseTargetSpec(specTarget);
+  if (form === null) return false;
+  switch (form.form) {
+    case "predicate":
+      return form.kindOf.readsAffordance !== false;
+    case "affordance":
+      return true;
+    case "body":
+      return false;
+    case "kind":
+      return false;
+    default: {
+      return false;
+    }
   }
-  return typeof specTarget === "string" && specTarget.startsWith("affordance:");
 }
 function specTargetOf(spec) {
   return "target" in spec ? spec.target : void 0;
@@ -10760,7 +11064,7 @@ function reportDeadClaim(owner, warn) {
   );
 }
 function specificity(spec) {
-  const t = targetRank("target" in spec ? spec.target : void 0);
+  const t = targetRank(specTargetOf(spec));
   const mods = "mods" in spec ? spec.mods : void 0;
   const m = modsCount(mods);
   const p = "phase" in spec && spec.phase !== void 0 ? 1 : 0;
@@ -13633,21 +13937,18 @@ function textLineBoxes(pose, opts = {}) {
   const style = resolveTextStyle(pose.style);
   const source = pose.runs && pose.runs.length > 0 ? pose.runs : pose.text;
   const runs = resolveRuns(toRuns(source), style);
-  const laid = layoutRuns(
-    runs,
-    {
-      maxWidth: opts.maxWidth ?? pose.width,
-      lineHeight: style.lineHeight,
-      align: style.align
-    },
-    { x: pose.x, y: pose.y }
-  );
-  const dy = verticalAlignOffset(pose.verticalAlign, pose.height, laid.bounds.height);
+  const laid = layoutRuns(runs, {
+    maxWidth: opts.maxWidth ?? pose.width,
+    lineHeight: style.lineHeight,
+    align: style.align
+  });
+  const dx = pose.x;
+  const dy = pose.y + verticalAlignOffset(pose.verticalAlign, pose.height, laid.bounds.height);
   const out = [];
   for (const line of laid.lines) {
     if (!opts.includeEmpty && line.x1 <= line.x0) continue;
     out.push({
-      x: line.x0 - padding,
+      x: line.x0 + dx - padding,
       y: line.y0 + dy - padding,
       width: line.x1 - line.x0 + padding * 2,
       height: line.y1 - line.y0 + padding * 2
@@ -16630,6 +16931,15 @@ function wrapWithPoseRotation(cmds, pose) {
     children: cmds
   }];
 }
+
+// src/canvas/wrapNodeOutput.ts
+function wrapNodeOutput(cmds, pose, alpha) {
+  const rotated = wrapWithPoseRotation(cmds, pose);
+  if (alpha !== 1 && rotated.length > 0) {
+    return [{ kind: "group", alpha, children: rotated }];
+  }
+  return rotated;
+}
 function CursorCoordsHud({ canvasRef, viewRef, offset }) {
   const [state, setState] = useState({
     client: { x: 0, y: 0 },
@@ -16881,12 +17191,7 @@ function buildSceneLayer(cfg, adapter, debugSink, boundsOfFn, hideIds, slot) {
             const oy = pose.y ?? (b ? b.y : 0);
             debugSink.recordOrigin(obj.id, { x: ox, y: oy });
           }
-          const rotated = wrapWithPoseRotation(cmds, pose);
-          const alpha = cfg.alphaFor ? cfg.alphaFor(obj.id) : 1;
-          if (alpha !== 1 && rotated.length > 0) {
-            return [{ kind: "group", alpha, children: rotated }];
-          }
-          return rotated;
+          return wrapNodeOutput(cmds, pose, cfg.alphaFor ? cfg.alphaFor(obj.id) : 1);
         };
         const hierarchicalAdapter = cfg.toPose ? {
           ...a,
@@ -16910,13 +17215,8 @@ function buildSceneLayer(cfg, adapter, debugSink, boundsOfFn, hideIds, slot) {
         const pose = toPose(obj);
         if (drawOne) {
           const cmds = drawOne(obj, pose, view);
-          const rotated = wrapWithPoseRotation(cmds, pose);
-          const alpha = cfg.alphaFor ? cfg.alphaFor(obj.id) : 1;
-          if (alpha !== 1 && rotated.length > 0) {
-            children.push({ kind: "group", alpha, children: rotated });
-          } else {
-            for (const cmd of rotated) children.push(cmd);
-          }
+          const wrapped = wrapNodeOutput(cmds, pose, cfg.alphaFor ? cfg.alphaFor(obj.id) : 1);
+          for (const cmd of wrapped) children.push(cmd);
         }
         if (debugSink) {
           const b = boundsOfFn ? boundsOfFn(obj.id) : null;
@@ -17630,6 +17930,7 @@ function createScene(options) {
     return i;
   }
   function rebuildLayerIndex() {
+    invalidateOrder();
     state.layerIndex.clear();
     for (let i = 0; i < state.layers.length; i++) {
       state.layerIndex.set(state.layers[i].id, i);
@@ -17655,6 +17956,7 @@ function createScene(options) {
     const idx = sibs.indexOf(id);
     if (idx < 0) throw new Error(`Scene: node "${id}" not found in its parent's children`);
     sibs.splice(idx, 1);
+    invalidateOrder();
     return { parent: node.parent, index: idx };
   }
   function attach(id, parent, index) {
@@ -17663,6 +17965,7 @@ function createScene(options) {
     sibs.splice(i, 0, id);
     const node = requireNode(id);
     node.parent = parent;
+    invalidateOrder();
   }
   function descendants(id, out) {
     const n = state.nodes.get(id);
@@ -17742,9 +18045,11 @@ function createScene(options) {
     apply: (p) => {
       requireLayerIndex(p.to);
       requireNode(p.id).layer = p.to;
+      invalidateOrder();
     },
     revert: (p) => {
       requireNode(p.id).layer = p.from;
+      invalidateOrder();
     }
   });
   registerKitOp("kit:move", {
@@ -17883,21 +18188,98 @@ function createScene(options) {
       registered.set(k, h);
     }
   }
-  function* renderOrderInternal() {
-    for (const layer of state.layers) {
-      const stack = [...state.roots].reverse();
-      while (stack.length > 0) {
-        const id = stack.pop();
-        const node = state.nodes.get(id);
-        if (!node) continue;
-        if (node.layer === layer.id) yield id;
-        if (node.kind === "container") {
-          for (let i = node.children.length - 1; i >= 0; i--) {
-            stack.push(node.children[i]);
-          }
+  function renderOrderInternal() {
+    return state.layers.length === 1 ? renderOrderFlat() : renderOrderBucketed();
+  }
+  function renderOrderNodesInternal() {
+    return state.layers.length === 1 ? renderOrderNodesFlat() : renderOrderNodesBucketed();
+  }
+  let structureGeneration = 0;
+  let orderCache = { gen: 0 };
+  function invalidateOrder() {
+    structureGeneration++;
+  }
+  function currentOrderCache() {
+    if (orderCache.gen !== structureGeneration) {
+      orderCache = { gen: structureGeneration };
+    }
+    return orderCache;
+  }
+  function renderOrderFlat() {
+    const only = state.layers[0].id;
+    const out = [];
+    const stack = [...state.roots].reverse();
+    while (stack.length > 0) {
+      const id = stack.pop();
+      const node = state.nodes.get(id);
+      if (!node) continue;
+      if (node.layer === only) out.push(id);
+      if (node.kind === "container") {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push(node.children[i]);
         }
       }
     }
+    return out;
+  }
+  function renderOrderNodesFlat() {
+    const only = state.layers[0].id;
+    const out = [];
+    const stack = [...state.roots].reverse();
+    while (stack.length > 0) {
+      const id = stack.pop();
+      const node = state.nodes.get(id);
+      if (!node) continue;
+      if (node.layer === only) out.push(node);
+      if (node.kind === "container") {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push(node.children[i]);
+        }
+      }
+    }
+    return out;
+  }
+  function renderOrderBucketed() {
+    const buckets = state.layers.map(() => []);
+    const stack = [...state.roots].reverse();
+    while (stack.length > 0) {
+      const id = stack.pop();
+      const node = state.nodes.get(id);
+      if (!node) continue;
+      const bucket = buckets[state.layerIndex.get(node.layer) ?? -1];
+      if (bucket) bucket.push(id);
+      if (node.kind === "container") {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push(node.children[i]);
+        }
+      }
+    }
+    const out = [];
+    for (const bucket of buckets) {
+      for (const id of bucket) out.push(id);
+    }
+    return out;
+  }
+  function renderOrderNodesBucketed() {
+    const buckets = state.layers.map(() => []);
+    const stack = [...state.roots].reverse();
+    while (stack.length > 0) {
+      const id = stack.pop();
+      const node = state.nodes.get(id);
+      if (!node) continue;
+      const bucket = buckets[state.layerIndex.get(node.layer) ?? -1];
+      if (bucket) bucket.push(node);
+      if (node.kind === "container") {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push(node.children[i]);
+        }
+      }
+    }
+    const out = [];
+    for (const bucket of buckets) {
+      for (const node of bucket) out.push(node);
+    }
+    return out;
   }
   const scene = {
     get nodes() {
@@ -17926,7 +18308,12 @@ function createScene(options) {
       return out;
     },
     renderOrder() {
-      return renderOrderInternal();
+      const c = currentOrderCache();
+      return c.ids ??= renderOrderInternal();
+    },
+    renderOrderNodes() {
+      const c = currentOrderCache();
+      return c.nodes ??= renderOrderNodesInternal();
     },
     add(spec) {
       const id = spec.id ?? generateId();
@@ -18234,9 +18621,8 @@ function createScene(options) {
     },
     toJSON() {
       const nodes = [];
-      for (const id of renderOrderInternal()) {
-        const n = state.nodes.get(id);
-        if (!n) continue;
+      for (const n of renderOrderNodesInternal()) {
+        const id = n.id;
         const out = {
           id,
           kind: n.kind,
@@ -18270,6 +18656,7 @@ function createScene(options) {
       state.roots.length = 0;
       state.layers.length = 0;
       state.layerIndex.clear();
+      invalidateOrder();
       for (let i = 0; i < json.systemLayers.length; i++) {
         const spec = json.systemLayers[i];
         if (state.layerIndex.has(spec.id)) {
@@ -18567,9 +18954,8 @@ function sceneToAdapter(scene, options = {}) {
     getNodes() {
       const visible = visibleLayers();
       const out = [];
-      for (const id of scene.renderOrder()) {
-        const n = scene.get(id);
-        if (n && visible.has(n.layer)) out.push(n);
+      for (const n of scene.renderOrderNodes()) {
+        if (visible.has(n.layer)) out.push(n);
       }
       return out;
     },
@@ -18909,9 +19295,7 @@ function useSceneSelectTool(args) {
       // path descriptor for a tighter test.
       hitTestArea: (rect) => {
         const hits = [];
-        for (const nid of scene.renderOrder()) {
-          const n = scene.get(nid);
-          if (!n) continue;
+        for (const n of scene.renderOrderNodes()) {
           if (isPathLike(n.pose) && pathPoseDescriptor.intersectsRect) {
             if (pathPoseDescriptor.intersectsRect(n.pose, rect)) hits.push(n.id);
             continue;
@@ -18949,9 +19333,8 @@ function useSceneSelectTool(args) {
       }
       const tolerance = pickTolerancePx / meanScale(getView?.()?.scale ?? { x: 1, y: 1 });
       const out = [];
-      for (const id of scene.renderOrder()) {
-        const n = scene.get(id);
-        if (!n || !poseContainsRotated(n.pose, wx, wy, tolerance)) continue;
+      for (const n of scene.renderOrderNodes()) {
+        if (!poseContainsRotated(n.pose, wx, wy, tolerance)) continue;
         if (shapePicking && !shapeCoversPoint(n, n.pose, wx, wy, { tolerance })) continue;
         out.push(n.id);
       }
@@ -20095,23 +20478,25 @@ function hitTestAreaPolygon(scene, area, areaBounds) {
   const ab = areaBounds ?? boundsOf(area);
   if (!ab) return [];
   const hits = [];
-  for (const id of scene.renderOrder()) {
-    const node = scene.get(id);
-    if (!node || node.kind === "container") continue;
+  const order = scene.renderOrderNodes();
+  for (let i = 0; i < order.length; i++) {
+    const node = order[i];
+    if (node.kind === "container") continue;
     const pose = node.pose;
-    const b = aabbOfPose(pose);
+    const silhouette = pose !== null && typeof pose === "object" && pose.kind === "polygon";
+    const b = silhouette ? nodeMemo(node, "aabb", pose, () => aabbOfPose(pose)) : aabbOfPose(pose);
     if (!Number.isFinite(b.x) || !Number.isFinite(b.y) || !Number.isFinite(b.width) || !Number.isFinite(b.height)) {
       continue;
     }
     if (b.x >= ab.x + ab.width || b.x + b.width <= ab.x || b.y >= ab.y + ab.height || b.y + b.height <= ab.y) {
       continue;
     }
-    if (!isPathLike(pose) || pose.kind === "rect") {
-      hits.push(id);
+    if (!silhouette) {
+      hits.push(node.id);
       continue;
     }
     if (silhouetteOverlapsArea(pose.coords, area)) {
-      hits.push(id);
+      hits.push(node.id);
     }
   }
   return hits;
@@ -22345,14 +22730,25 @@ var inferredNodeProperties = inferredNodeRouting.map((e) => ({
 
 // src/canvas/sceneViewRender.ts
 var RENDERER_CACHE = /* @__PURE__ */ new WeakMap();
-function buildSceneViewCommands(scene, view, drawOne, extraCommands) {
-  const children = [];
-  for (const id of scene.renderOrder()) {
-    const node = scene.get(id);
-    if (!node) continue;
-    const cmds = drawOne(node, node.pose, view);
-    for (const cmd of cmds) children.push(cmd);
-  }
+function sceneAsHierarchy(scene) {
+  return {
+    getLayers: () => scene.layers.map((l) => ({ id: l.id, visible: l.visible })),
+    getNode: (id) => scene.get(id),
+    getChildren: (parentId) => {
+      if (parentId === null) return scene.roots;
+      const node = scene.get(parentId);
+      return node && node.kind === "container" ? node.children : [];
+    },
+    getPose: (id) => scene.get(id).pose
+  };
+}
+function buildSceneViewCommands(scene, view, drawOne, extraCommands, alphaFor) {
+  const wrappedDrawOne = (node, pose, v) => wrapNodeOutput(drawOne(node, pose, v), pose, alphaFor ? alphaFor(node.id) : 1);
+  const children = buildSceneTree(
+    sceneAsHierarchy(scene),
+    wrappedDrawOne,
+    view
+  );
   if (extraCommands && extraCommands.length > 0) {
     for (const cmd of extraCommands) children.push(cmd);
   }
@@ -22363,7 +22759,7 @@ function buildSceneViewCommands(scene, view, drawOne, extraCommands) {
   }];
 }
 function renderSceneToCanvas(args) {
-  const { canvas, scene, view, width, height, drawOne, extraCommands } = args;
+  const { canvas, scene, view, width, height, drawOne, extraCommands, alphaFor } = args;
   const dpr = args.dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
   let entry = RENDERER_CACHE.get(canvas);
   if (!entry) {
@@ -22391,11 +22787,11 @@ function renderSceneToCanvas(args) {
     entry.height = height;
     entry.dpr = dpr;
   }
-  const commands = buildSceneViewCommands(scene, view, drawOne, extraCommands);
+  const commands = buildSceneViewCommands(scene, view, drawOne, extraCommands, alphaFor);
   entry.renderer.render(commands, viewToMat3(view));
 }
 function SceneViewCanvasInner(props) {
-  const { scene, view, width, height, drawOne, extraCommands, className, canvasRef } = props;
+  const { scene, view, width, height, drawOne, extraCommands, alphaFor, className, canvasRef } = props;
   useSyncExternalStore(scene.subscribe, scene.getVersion, scene.getVersion);
   const localRef = useRef(null);
   const setCanvasRef = (el) => {
@@ -22416,7 +22812,8 @@ function SceneViewCanvasInner(props) {
       width,
       height,
       drawOne,
-      extraCommands
+      extraCommands,
+      alphaFor
     });
   });
   return /* @__PURE__ */ jsx(
@@ -22515,6 +22912,7 @@ function MinimapCanvasInner(props) {
     width,
     height,
     drawOne,
+    alphaFor,
     fit = "scene",
     poseBounds,
     indicatorStyle,
@@ -22626,6 +23024,7 @@ function MinimapCanvasInner(props) {
       height,
       drawOne,
       extraCommands,
+      alphaFor,
       className,
       canvasRef: setCanvasRef
     }
@@ -22667,7 +23066,7 @@ function planPixelRender(args) {
       fill: { fill: "solid", color: args.background }
     });
   }
-  commands.push(...buildSceneViewCommands(args.scene, view, drawOne));
+  commands.push(...buildSceneViewCommands(args.scene, view, drawOne, void 0, args.alphaFor));
   return { width, height, view, commands };
 }
 function defaultCreateCanvas(width, height) {
@@ -23019,15 +23418,11 @@ function measureText(ctx, text, maxWidth, style) {
 function measureTextBounds(text, style, opts) {
   const resolved = resolveTextStyle(style);
   const runs = resolveRuns([{ text }], resolved);
-  const { bounds } = layoutRuns(
-    runs,
-    {
-      maxWidth: opts?.maxWidth ?? Infinity,
-      lineHeight: opts?.lineHeight ?? resolved.lineHeight,
-      align: resolved.align
-    },
-    { x: 0, y: 0 }
-  );
+  const { bounds } = layoutRuns(runs, {
+    maxWidth: opts?.maxWidth ?? Infinity,
+    lineHeight: opts?.lineHeight ?? resolved.lineHeight,
+    align: resolved.align
+  });
   return bounds;
 }
 
@@ -23940,10 +24335,9 @@ function useSceneTextEdit(scene, container, options = {}) {
     const cy = view ? canvasY / view.scale.y + view.y : canvasY;
     const readText = (data) => optsRef.current.getText ? optsRef.current.getText(data) : data.text ?? "";
     const readStyle = (data) => optsRef.current.getStyle ? optsRef.current.getStyle(data) : data.style;
-    const order = [...sceneRef.current.renderOrder()];
+    const order = sceneRef.current.renderOrderNodes();
     for (let i = order.length - 1; i >= 0; i--) {
-      const node = sceneRef.current.get(order[i]);
-      if (!node) continue;
+      const node = order[i];
       const text = readText(node.data);
       const pose = {
         x: node.pose.x,
@@ -27639,5 +28033,5 @@ function mergeContributions(...bundles) {
 }
 
 export { ALWAYS, ANCHOR_HIT_BASE_PX, ActionsProviderIfRoot, ActiveToolContextProvider, ActiveToolContextProviderIfRoot, BUNDLE_TOOLS, COARSE_TARGET_SCALE, CURVE_REPS, ColorOverrideRegistry, CropIcon, CursorCoordsHud, DEFAULT_ALPHA_DECAY, DEFAULT_ALPHA_MIN, DEFAULT_DEBUG_THEME, DEFAULT_DEVICE_PROFILE, DEFAULT_FILL_COLOR, DEFAULT_HANDLE_SIZE2 as DEFAULT_HANDLE_SIZE, DEFAULT_PALETTE, DEFAULT_ROTATION_HANDLE_DISTANCE, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_STYLE, DEFAULT_VELOCITY_DECAY, DepRegistryProviderIfRoot, DeviceProfileProvider, DivideIcon, EASINGS, EllipseIcon, ExcludeIcon, EyedropperIcon, FALLBACK_FIT_VIEW, GHOST_STROKE, HANDLE_BASE_PX, HandIcon, IDENTITY_COLOR_MATRIX, IDENTITY_POSE_COMPOSITION, IntersectIcon, KIT_SHAPE_KINDS, LassoIcon, LineIcon, MIXED, MOVE_ANCHORS, MinimapCanvas, NEVER, OUTLINE_MIN_SCREEN_PX, PATH_ANCHOR_CHROME_ID, PenIcon, PencilIcon, PickHud, PointerProviderIfRoot, PolygonIcon, RECT_ALIGN_PROJECTION, ROTATION_HANDLE_BASE_PX, RectIcon, SPRING_PRESETS, SceneCanvas, SceneViewCanvas, SelectIcon, SelectionContextProvider, SelectionContextProviderIfRoot, ShaderCompileError, StarIcon, SubtractIcon, TextIcon, UnionIcon, UnknownIcon, VERSION, WeaselProvider, WeaselRenderer, aabbCenter, actionIs, alignDeltaFor, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, alignedStrokeRect, always, and, animateLifecycle, animateOnSetPose, annulusSemiAxes, applyBooleanOp, applyHitExistingGate, applyStyleToRange, areaSelectAction, arrayAdapter, asNodeId, bezierCubic, bezierQuadratic, buildChromeCtx, buildGradientRamp, buildRuleCtx, buildSceneViewCommands, canBringForward, canHover, canSendBackward, capabilityAll, capabilityIn, capabilityIs, capabilityNot, caretIndexAt, cellAt, charOffsetToDomPosition, clampView, clearSelectionAction, clientToCanvas, clipboardCopyAction, clipboardCutAction, cloneAction, coarsePointer, composeAffordanceLayer, composePath, composeRectPose, composeSelectionPose, composeWorldPose, computeFitView2 as computeFitView, computeIndicatorCommand, computeWheelAction, cond, constrainTo45, containedThenNearest, countPathAnchors, createCellHighlightLayer, createChildrenLayer, createCornerResizeAffordance, createDebugOverlayLayer, createDebugSink, createDispatcher, createGridLayer, createGuidesLayer, createHistory2 as createHistory, createMarkdownRenderer, createMoveToIndexOp, createNodeProperties, createNodeRouting, createParallaxLayer, createPathAnchorAffordances, createPathEditingOverlayLayer, createPathLayer, createPenPreviewLayer, createReorderOp, createRotationAffordance, createScene, createSelectionHandlesLayer, createSelectionOutlineLayer, createSelectionOverlayLayer, createSetDataOp, createSetLayerOp, createSetPathOp, createSetTextOp, createTextLayer, createViewportLayer, cycleVertexColors, decomposePath, decomposeRectPose, defaultCommitAdapter, defaultDrawOne, defaultLabelTextRenderer, defaultNodeProperties, defaultNodeRouting, defaultVisibilityRules, deriveAlignmentGuides, deriveParallaxView, describeRule, domPositionToCharOffset, domToRuns, drawLayers, easeIn, easeInBack, easeInBounce, easeInCirc, easeInCubic, easeInElastic, easeInExpo, easeInOut, easeInOutBack, easeInOutBounce, easeInOutCirc, easeInOutCubic, easeInOutElastic, easeInOutExpo, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeOut, easeOutBack, easeOutBounce, easeOutCirc, easeOutCubic2 as easeOutCubic, easeOutElastic, easeOutExpo, easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine, editAnchorsAction, enterTextEditAction, enumerateAnchors, evaluate, fillInPoseFrame, fillToBoundsFrame, findNodeShape, findShapeInk, findShapeSilhouette, fitTextPose, fitToBounds, fitViewToBounds, fitZoom, focused, fontString, forEachCoalesced, freeform, gateLayer, gesturing, getAlpha01, getImageBitmap, getNodeShapes, getStylusData, gradientForBounds, gradientGeometry, hexToRgba, hitAffordanceRegions, hitAnchor, hitRotationHandle, hovering, hoveringSelected, imageStatus, inferredNodeProperties, inferredNodeRouting, insertAction, isEditableTarget2 as isEditableTarget, isPatternSpec, lassoSelectAction, layoutMarkdown, lerpColorArray, lerpOklab, lerpOklch, linear, liveScope, makeViewportZoomAction, markdownToRuns, mat3, matchAlignment, matchesKeyBinding, meanScale, measureText, measureTextBounds, measuredWidth, mergeAlphaFromPrev, mergeContributions, modeIn, modeIs, modeNot, modifierHeld, momentum, moveAction, multiActive, nearest, nearestWithin, nestedHitTester, never, nodeHasFlag, none, normalizeHex, not, nurbs, oklabToOklch, oklabToSrgbU8, oklchToOklab, openFilePicker, or, parseColor, parseColorToRgba255, parseDebugFlags, pathContainsPoint, pathContainsPolygon, pathContainsRect, pathDistanceToPoint, pathDivide, pathExclude, pathFromD, pathInPoseFrame, pathInWorld, pathIntersect, pathIntersectsPolygon, pathIntersectsRect, pathOriginProjection, pathSubtract, pathToAnchors, pathUnion, pickTopMostHit, pinchZoomAction, planPixelRender, pointInRotatedRect, pointInTextPose, poseRotationOf, pressureToWidth, rainbowVertexColors, rebaseLocalPose, rectCorners, registerContentHandler, registerNodeShape, registerProgram, renderLabel, renderSceneToCanvas, renderSceneToPixels, resizeAction, resolveColor, resolveDeviceProfile, resolveFillPattern, resolvePatternSpec, resolveRuns, resolveTextStyle, resolveVisibility, rgbaToHex, rotateAction, rotateAroundAABBCenter, rotatePathAround, rotatePoint, rotatedRectCorners, rotationDegreesUnit, rotationHandle, roundToCell, runsToDom, runsToMarkdown, runsToPlainText, sampleGradientStops, sceneFromJSON, sceneNodeClientRect, sceneToAdapter, scopeBindings, screenToWorld, selectFromLasso, selectionAtLeast, selectionEmpty, selectionIs, setFlagOverRange, shapeCoversPoint, sliceAction, snapPoint, solidVertexColors, specificity, spiro, splitPathByLine, splitSubpaths, springPose, springVertexColors, srgbU8ToOklab, staggerVertexColors, startThresholdDrag, styleAtRange, subscribeImageReady, tessellate, tessellateStroke, textCommand, textLineBoxes, tileGrid, toHex8, toRuns, translatePoseViaDescriptor, translateRectPose, tweenPose, tweenVertexColors, unionBounds, unionBoundsPath, useActiveToolContext, useAlign, useAnimator, useArrayAdapter, useAutoCenter, useBooleans, useBooleansAdapter, useCanvasFocus, useCanvasSize, useDecayLoop, useDeviceProfile, useDistribute, useDragGesture, useDragHandle, useDragRadial, useDragRect, useDropZone, useEllipseTool, useEyedropperTool, useGestureDispatcher, useGridCellHover, useGuides, useHandTool, useHandleDrag, useHoverTracking, useImageTool, useKeybindings, useLassoTool, useLineTool, useOptionalActiveToolContext, usePenTool, usePencilTool, usePinchGesture, usePinchZoomTool, usePointerStylus, usePolygonTool, usePublishSelection, useRectTool, useResizePolicy, useRotateTool, useScene, useSceneAdapter, useSceneTextEdit, useSelectTool, useSelection, useSelectionContext, useSimulation, useSliceDep, useStandardActions, useStarTool, useTextEdit, useTextTool, useTools, useVelocityTracker, useViewAnimation, useViewTween, useZoom, verticalAlignOffset, viewToMat3, viewToTransform, viewportDragPanAction, viewportZoomAction, when, withAlpha01, withCoord, withGradientKind, worldEditToStorage, worldPoseLookup, worldToScreen, zoomAt, zoomAtLeast };
-//# sourceMappingURL=chunk-D2C6K6FO.js.map
-//# sourceMappingURL=chunk-D2C6K6FO.js.map
+//# sourceMappingURL=chunk-FVNWK7U3.js.map
+//# sourceMappingURL=chunk-FVNWK7U3.js.map