@weasel-js/labkit 1.0.0 → 1.0.1

package/dist/{chunk-XVBXYKFJ.js → chunk-ISEK5LXT.js}

@@ -400,32 +400,53 @@ function affordanceKindOf(target) {
   const k = target.kind;
   return typeof k === "string" ? k : void 0;
 }
-function matchTarget(target, specTarget, bodyTarget, bodyKind) {
-  if (specTarget === void 0) return true;
-  if (typeof specTarget === "object" && specTarget !== null && "kindOf" in specTarget && typeof specTarget.kindOf === "function") {
-    return specTarget.kindOf(target, bodyTarget);
+function hasPrefix(s, prefix) {
+  return s.startsWith(prefix);
+}
+function parseTargetSpec(spec) {
+  if (typeof spec === "object") {
+    return spec !== null && typeof spec.kindOf === "function" ? { form: "predicate", kindOf: spec.kindOf } : null;
   }
-  if (typeof specTarget !== "string") return false;
-  if (specTarget === "empty" || specTarget === "selected-body" || specTarget === "unselected-body") {
-    if (bodyTarget === void 0) return false;
-    return bodyTarget === specTarget;
+  if (typeof spec !== "string") return null;
+  if (spec === "empty" || spec === "selected-body" || spec === "unselected-body") {
+    return { form: "body", body: spec };
   }
-  if (specTarget.startsWith("affordance:")) {
-    const wanted = specTarget.slice("affordance:".length);
-    return affordanceKindOf(target) === wanted;
+  if (hasPrefix(spec, "affordance:")) {
+    return { form: "affordance", kind: spec.slice("affordance:".length) };
+  }
+  if (hasPrefix(spec, "kind:")) {
+    const rest = spec.slice("kind:".length);
+    const requireSelected = rest.endsWith(":selected");
+    return {
+      form: "kind",
+      kind: requireSelected ? rest.slice(0, -":selected".length) : rest,
+      requireSelected
+    };
   }
-  if (specTarget.startsWith("kind:")) {
-    if (bodyKind === void 0) return false;
-    let wanted = specTarget.slice("kind:".length);
-    let requireSelected = false;
-    if (wanted.endsWith(":selected")) {
-      wanted = wanted.slice(0, -":selected".length);
-      requireSelected = true;
+  return null;
+}
+function matchTarget(target, specTarget, bodyTarget, bodyKind) {
+  if (specTarget === void 0) return true;
+  const form = parseTargetSpec(specTarget);
+  if (form === null) return false;
+  switch (form.form) {
+    // Receives the raw target (affordance hit for drag, e.target otherwise)
+    // plus the bodyTarget classification.
+    case "predicate":
+      return form.kindOf(target, bodyTarget);
+    // Resolved from the `classifyTarget` result packed into the event's
+    // `bodyTarget`. Unwired classifyTarget → absent → no match.
+    case "body":
+      return bodyTarget !== void 0 && bodyTarget === form.body;
+    case "affordance":
+      return affordanceKindOf(target) === form.kind;
+    case "kind":
+      if (bodyKind === void 0 || bodyKind !== form.kind) return false;
+      return form.requireSelected ? bodyTarget === "selected-body" : true;
+    default: {
+      return false;
     }
-    if (bodyKind !== wanted) return false;
-    return requireSelected ? bodyTarget === "selected-body" : true;
   }
-  return false;
 }
 function normalizePhase(spec) {
   if (typeof spec === "string") {
@@ -3456,7 +3477,7 @@ function serialToEntry(se, custom, logger) {
   };
 }
 
-// ../core/dist/chunk-D2C6K6FO.js
+// ../core/dist/chunk-FVNWK7U3.js
 function worldToScreen(worldX, worldY, view) {
   return [view.panX + worldX * view.zoom.x, view.panY + worldY * view.zoom.y];
 }
@@ -5548,7 +5569,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;
@@ -5718,7 +5739,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) {
@@ -5730,7 +5751,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;
@@ -5804,7 +5825,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;
@@ -5817,10 +5838,10 @@ function outlineBucket(runs, min) {
   for (const size of sizes) if (size >= min) n++;
   return n;
 }
-function variantKey2(runs, opts, origin) {
-  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}|${origin.x}|${origin.y}`;
+function variantKey2(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) {
@@ -5830,10 +5851,10 @@ function cachedLayoutRuns(runs, opts, origin) {
     entry.generation = fonts;
     entry.byVariant.clear();
   }
-  const key = variantKey2(runs, opts, origin);
+  const key = variantKey2(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;
@@ -6141,25 +6162,264 @@ function outlineStrokeMesh(glyphKey, d, emWidth, stroke) {
   cache4.set(key, mesh);
   return mesh.indices.length === 0 ? null : mesh;
 }
-function setColorMatrixUniforms(ctx, prog) {
-  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];
+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;
+    }
+  }
+};
+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 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 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) {
@@ -6168,10 +6428,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);
   }
 }
@@ -6300,11 +6563,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;
   }
@@ -6313,38 +6578,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 drawRectFast(ctx, rect, fill) {
+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 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;
@@ -6389,11 +6714,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;
@@ -6500,9 +6832,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;
@@ -6586,6 +6917,7 @@ function drawPathStroke(ctx, cmd) {
   }
   const align = stroke.align ?? "center";
   if (cmd.path.kind === "polygon" && align !== "center") {
+    flushSolids(ctx);
     drawPathStrokeStenciled(ctx, cmd, align);
     return;
   }
@@ -6596,6 +6928,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) {
@@ -6693,20 +7031,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;
     }
@@ -6721,31 +7056,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;
@@ -6768,7 +7103,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];
@@ -6776,7 +7111,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) {
@@ -6799,14 +7134,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);
@@ -6845,7 +7181,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 {
@@ -6856,23 +7192,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;
@@ -7085,10 +7422,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;
@@ -7163,31 +7497,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;
@@ -7274,7 +7584,7 @@ var WeaselRenderer = class {
     this.imageCache = new GLImageCache(this.gl, this.imageMinification);
     this.gradRampCache = new GradientRampCache(this.gl);
     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;
@@ -7334,9 +7644,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.
@@ -7369,8 +7677,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,
@@ -7380,6 +7687,7 @@ var WeaselRenderer = class {
       viewMatrix
     };
     for (const cmd of commands) dispatch(ctx, cmd);
+    flushSolids(ctx);
     this.meshCache.freeTransient();
   }
   resize(dims) {
@@ -7409,6 +7717,10 @@ var WeaselRenderer = class {
     return this.pathFillVColor;
   }
   /** @internal */
+  _solidBatch() {
+    return this.solidBatch;
+  }
+  /** @internal */
   _textSdf() {
     return this.textSdf;
   }
@@ -7794,12 +8106,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,
@@ -8365,12 +8672,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,
@@ -12851,18 +13153,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;
@@ -12905,7 +13228,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;
@@ -15439,21 +15762,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
@@ -18168,6 +18488,13 @@ function wrapWithPoseRotation(cmds, pose) {
     children: cmds
   }];
 }
+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 },
@@ -18415,12 +18742,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,
@@ -18444,13 +18766,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;
@@ -19164,6 +19481,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);
@@ -19189,6 +19507,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) {
@@ -19197,6 +19516,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);
@@ -19276,9 +19596,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", {
@@ -19417,21 +19739,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() {
@@ -19460,7 +19859,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();
@@ -19768,9 +20172,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,
@@ -19804,6 +20207,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)) {
@@ -20072,9 +20476,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;
     },
@@ -20405,9 +20808,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 (isPathLike2(n.pose) && pathPoseDescriptor.intersectsRect) {
             if (pathPoseDescriptor.intersectsRect(n.pose, rect)) hits.push(n.id);
             continue;
@@ -20445,9 +20846,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);
       }
@@ -21564,23 +21964,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 (!isPathLike2(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;
@@ -23735,14 +24137,25 @@ inferredNodeRouting.map((e) => ({
   schema: shapeSchema({ text: e.name === "text" })
 }));
 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);
   }
@@ -23753,7 +24166,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) {
@@ -23781,11 +24194,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) => {
@@ -23806,7 +24219,8 @@ function SceneViewCanvasInner(props) {
       width,
       height,
       drawOne,
-      extraCommands
+      extraCommands,
+      alphaFor
     });
   });
   return /* @__PURE__ */ jsx(
@@ -23903,6 +24317,7 @@ function MinimapCanvasInner(props) {
     width,
     height,
     drawOne,
+    alphaFor,
     fit = "scene",
     poseBounds,
     indicatorStyle,
@@ -24014,6 +24429,7 @@ function MinimapCanvasInner(props) {
       height,
       drawOne,
       extraCommands,
+      alphaFor,
       className,
       canvasRef: setCanvasRef
     }
@@ -24157,5 +24573,5 @@ function oklchToOklab(L, C, h) {
 }
 
 export { FALLBACK_FIT_VIEW, MinimapCanvas, SceneViewCanvas, UnknownIcon, buildSceneViewCommands, computeFitView2, computeIndicatorCommand, eligibleContribution, evaluateEnabled, oklabToSrgbU8, oklchToOklab, renderSceneToCanvas, rgbaToHex, useActionsRegistry, useOptionalDepRegistry };
-//# sourceMappingURL=chunk-XVBXYKFJ.js.map
-//# sourceMappingURL=chunk-XVBXYKFJ.js.map
+//# sourceMappingURL=chunk-ISEK5LXT.js.map
+//# sourceMappingURL=chunk-ISEK5LXT.js.map