@weasel-js/core 1.0.0 → 1.0.2

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

@@ -1,4 +1,4 @@
-import { ActionDisabledReason, defineViewportTool, useOptionalDepRegistry, DepRegistryProvider, useActionsRegistry, ActionsProvider, useDepRegistry, defineTool, reportRouteConflicts, buildDepsFromRequires, useDepSource, actionBindings } from './chunk-DCIU3SRK.js';
+import { ActionDisabledReason, useOptionalDepRegistry, DepRegistryProvider, useActionsRegistry, ActionsProvider, useDepRegistry, reportRouteConflicts, buildDepsFromRequires, useDepSource, actionBindings } from './chunk-W2WB4352.js';
 import { scratchKey, createTransformOp, snap, getScratch, createReparentOp, setScratch } from './chunk-UB6A6L77.js';
 import { fixedCornerOf, DEFAULT_RESIZE_BEHAVIORS, CORNER_ANCHORS, cornerPoint } from './chunk-Z3KNFTTS.js';
 import { AUTO_POSE_DESCRIPTOR, RECT_POSE_DESCRIPTOR, resolveUnit, pathPoseDescriptor, polygonFromPoints, starPath, regularPolygonPath, linePath, ellipsePath, rectPath, strokeHitTest, withinPxRadius, boundsOfPath, PATH_M, PATH_L, PATH_Z, PATH_Q, PATH_C, DEFAULT_FLATTEN_TOLERANCE, flattenQuadratic, flattenCubic, PathBuilder, pointInPath, transformPath, translatePath, pxExtent, remapRotatedLeaf, withinPxBox, flattenCubicWithArcLen, flattenQuadraticWithArcLen, PATH_CMD_LENGTHS, pointToGridCell } from './chunk-6SHZHXXR.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, RESERVED_ID_PREFIXES, RESERVED_ID_NAMES, 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.2" ;
 
 // src/features/grid/roundToCell.ts
 function roundToCell(value, cellSize) {
@@ -399,6 +399,8 @@ var GLMeshCache = class {
   gl;
   aPositionLoc;
   map = /* @__PURE__ */ new WeakMap();
+  /** Meshes this context has drawn at least once; see `uploadRecurring`. */
+  seen = /* @__PURE__ */ new WeakSet();
   finalizer;
   pendingDeletes = [];
   /** Transient resources allocated this frame; freed at end of render(). */
@@ -423,6 +425,19 @@ var GLMeshCache = class {
     this.transientThisFrame.push({ vao: handle.vao, vbo, ibo });
     return handle;
   }
+  /**
+   * Upload a Mesh that may or may not recur across frames. Its first sight in
+   * *this* context takes `uploadTransient`; every later one takes the
+   * persistent handle. One transient upload to find out is cheaper than
+   * stranding a persistent VAO on a mesh that never returns, whose release
+   * would wait on GC. The transient upload does not populate the persistent
+   * map, so steady-state reuse begins on the third frame.
+   */
+  uploadRecurring(mesh) {
+    if (this.seen.has(mesh)) return this.handleFor(mesh);
+    this.seen.add(mesh);
+    return this.uploadTransient(mesh);
+  }
   /**
    * Free all transient resources allocated since the last call. Called by
    * the renderer at the end of each `render()`. Safe under context loss.
@@ -1532,1269 +1547,1269 @@ function getMesh(path) {
   cache.set(path, mesh);
   return mesh;
 }
-
-// src/features/paths/tessellate/polyline.ts
-function extractPolylines(path, opts = {}) {
-  if (path.kind === "rect") return [extractRect(path)];
-  return extractPolygon(path, opts);
-}
-function extractRect(p) {
-  const { x, y, width: w, height: h } = p;
-  return {
-    points: [x, y, x + w, y, x + w, y + h, x, y + h],
-    closed: true,
-    anchorA: new Uint32Array([0, 1, 2, 3]),
-    anchorB: new Uint32Array([0, 1, 2, 3]),
-    anchorT: new Float32Array([0, 0, 0, 0])
-  };
+var UNDERLINE_OFFSET = 0.1;
+var STRIKETHROUGH_OFFSET = -0.3;
+var DECORATION_THICKNESS = 0.05;
+function fillKey(p) {
+  if ("color" in p) return `s:${p.color}:${p.opacity ?? 1}`;
+  return `nx:${Math.random()}`;
 }
-function extractPolygon(p, opts) {
-  const tolerance = opts.flattenTolerance ?? DEFAULT_FLATTEN_TOLERANCE;
-  const { commands, coords } = p;
-  const out = [];
-  let anchorCounter = 0;
-  let pts = null;
-  let aA = null;
-  let aB = null;
-  let aT = null;
-  let current = null;
-  let coordIdx = 0;
-  let prevX = 0;
-  let prevY = 0;
-  let prevAnchor = -1;
-  const beginContour = () => {
-    pts = [];
-    aA = [];
-    aB = [];
-    aT = [];
-    const next = { points: pts, closed: false };
-    out.push(next);
-    return next;
-  };
-  const dropDuplicateClosingPoint = () => {
-    if (!pts || !aA || !aB || !aT) return;
-    const n = pts.length / 2;
-    if (n < 2) return;
-    if (pts[0] !== pts[(n - 1) * 2] || pts[1] !== pts[(n - 1) * 2 + 1]) return;
-    pts.length -= 2;
-    aA.length -= 1;
-    aB.length -= 1;
-    aT.length -= 1;
-  };
-  const commit = (target) => {
-    if (!pts || !aA || !aB || !aT) return;
-    target.anchorA = new Uint32Array(aA);
-    target.anchorB = new Uint32Array(aB);
-    target.anchorT = new Float32Array(aT);
-  };
-  for (let cmdIdx = 0; cmdIdx < commands.length; cmdIdx++) {
-    const cmd = commands[cmdIdx];
-    switch (cmd) {
-      case PATH_M: {
-        if (current) commit(current);
-        current = beginContour();
-        prevX = coords[coordIdx];
-        prevY = coords[coordIdx + 1];
-        pts.push(prevX, prevY);
-        aA.push(anchorCounter);
-        aB.push(anchorCounter);
-        aT.push(0);
-        prevAnchor = anchorCounter;
-        anchorCounter++;
-        coordIdx += 2;
-        break;
-      }
-      case PATH_L: {
-        prevX = coords[coordIdx];
-        prevY = coords[coordIdx + 1];
-        pts.push(prevX, prevY);
-        aA.push(anchorCounter);
-        aB.push(anchorCounter);
-        aT.push(0);
-        prevAnchor = anchorCounter;
-        anchorCounter++;
-        coordIdx += 2;
-        break;
-      }
-      case PATH_Q: {
-        const cx = coords[coordIdx], cy = coords[coordIdx + 1];
-        const ex = coords[coordIdx + 2], ey = coords[coordIdx + 3];
-        const targetAnchor = anchorCounter;
-        const segStart = pts.length / 2;
-        const arcAccum = [];
-        const total = flattenQuadraticWithArcLen(prevX, prevY, cx, cy, ex, ey, tolerance, pts, arcAccum);
-        for (let k = 0; k < arcAccum.length; k++) {
-          aA.push(prevAnchor);
-          aB.push(targetAnchor);
-          aT.push(total > 0 ? arcAccum[k] / total : 0);
-        }
-        const lastIdx = segStart + arcAccum.length - 1;
-        aA[lastIdx] = targetAnchor;
-        aB[lastIdx] = targetAnchor;
-        aT[lastIdx] = 0;
-        prevX = ex;
-        prevY = ey;
-        prevAnchor = targetAnchor;
-        anchorCounter++;
-        coordIdx += 4;
-        break;
-      }
-      case PATH_C: {
-        const c1x = coords[coordIdx], c1y = coords[coordIdx + 1];
-        const c2x = coords[coordIdx + 2], c2y = coords[coordIdx + 3];
-        const ex = coords[coordIdx + 4], ey = coords[coordIdx + 5];
-        const targetAnchor = anchorCounter;
-        const segStart = pts.length / 2;
-        const arcAccum = [];
-        const total = flattenCubicWithArcLen(prevX, prevY, c1x, c1y, c2x, c2y, ex, ey, tolerance, pts, arcAccum);
-        for (let k = 0; k < arcAccum.length; k++) {
-          aA.push(prevAnchor);
-          aB.push(targetAnchor);
-          aT.push(total > 0 ? arcAccum[k] / total : 0);
-        }
-        const lastIdx = segStart + arcAccum.length - 1;
-        aA[lastIdx] = targetAnchor;
-        aB[lastIdx] = targetAnchor;
-        aT[lastIdx] = 0;
-        prevX = ex;
-        prevY = ey;
-        prevAnchor = targetAnchor;
-        anchorCounter++;
-        coordIdx += 6;
-        break;
-      }
-      case PATH_Z: {
-        if (current) {
-          current.closed = true;
-          dropDuplicateClosingPoint();
-        }
-        break;
-      }
-      default:
-        throw new Error(`extractPolylines: unknown command code ${cmd}`);
-    }
+function sameFill(a, b) {
+  if (a === b) return true;
+  if ("color" in a && "color" in b) {
+    return a.color === b.color && (a.opacity ?? 1) === (b.opacity ?? 1);
   }
-  if (current) commit(current);
-  return out;
+  return false;
 }
-
-// src/features/paths/tessellate/stroke.ts
-var EMPTY_MESH = {
-  vertices: new Float32Array(0),
-  indices: new Uint32Array(0),
-  anchorA: new Uint32Array(0),
-  anchorB: new Uint32Array(0),
-  anchorT: new Float32Array(0)
-};
-function tessellateStroke(path, stroke, opts = {}) {
-  const width = stroke.width ?? 1;
-  if (width <= 0) return EMPTY_MESH;
-  const join = stroke.join ?? "miter";
-  const cap = stroke.cap ?? "butt";
-  const align = stroke.align ?? "center";
-  const miterLimit = stroke.miterLimit ?? DEFAULT_MITER_LIMIT;
-  const varyingThreshold = stroke.varyingWidthJoinThreshold ?? DEFAULT_VARYING_WIDTH_JOIN_THRESHOLD;
-  let workingPath = path;
-  if (path.kind === "rect" && align !== "center") {
-    const aligned = alignedStrokeRect(path, align, width);
-    workingPath = {
-      kind: "rect",
-      x: aligned.x,
-      y: aligned.y,
-      width: aligned.width,
-      height: aligned.height
+function strokeKey(s) {
+  if (!s) return "-";
+  return [
+    fillKey(s.paint),
+    s.width ?? 1,
+    s.join ?? "miter",
+    s.cap ?? "butt",
+    s.miterLimit ?? "",
+    s.align ?? "center",
+    (s.dash ?? []).join(",")
+  ].join(":");
+}
+function groupKey(family, weight, style, synthetic, fill, stroke, source, page) {
+  return `${family}|${weight}|${style}|${synthetic.bold ? 1 : 0}${synthetic.italic ? 1 : 0}|${fillKey(fill)}|${strokeKey(stroke)}|${source}|${page}`;
+}
+function getOrCreateGroup(ctx, run, resolved, page, sourceOverride) {
+  const atlasFamily = resolved.resolved.family;
+  const resolvedWeight = resolved.resolved.weight;
+  const resolvedStyle = resolved.resolved.style;
+  const source = sourceOverride ?? resolved.source;
+  const key = groupKey(
+    atlasFamily,
+    resolvedWeight,
+    resolvedStyle,
+    resolved.synthetic,
+    run.fill,
+    source === "outline" ? run.stroke : void 0,
+    source,
+    page
+  );
+  let g = ctx.groups.get(key);
+  if (!g) {
+    g = {
+      family: atlasFamily,
+      weight: resolvedWeight,
+      style: resolvedStyle,
+      synthetic: { ...resolved.synthetic },
+      source,
+      page,
+      fill: run.fill,
+      // Only the outline tier can paint it, and carrying it on an SDF group
+      // would be a promise the renderer cannot keep.
+      ...source === "outline" && run.stroke !== void 0 ? { stroke: run.stroke } : {},
+      quads: [],
+      glyphs: []
     };
+    ctx.groups.set(key, g);
   }
-  const polylines = extractPolylines(workingPath, opts);
-  if (stroke.vertexWidths && stroke.vertexWidths.length > 0) {
-    for (const pl of polylines) populatePolylineWidths(pl, stroke.vertexWidths, width);
-  }
-  const dash = stroke.dash ?? [];
-  const verts = [];
-  const idx = [];
-  const anchorA = [];
-  const anchorB = [];
-  const anchorT = [];
-  for (const pl of polylines) {
-    const subs = dash.length > 0 ? splitForDash(pl, dash) : [pl];
-    for (const sub2 of subs) {
-      expandPolyline(sub2, width, join, cap, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT);
+  return g;
+}
+function resolveGlyph(run, font, resolved, cp) {
+  const direct = font.charMap.get(cp);
+  if (direct) return { glyph: direct, font, resolved };
+  const fallback = resolveGlyphFallback(run.fontFamily, run.fontWeight, run.fontStyle);
+  const face = fallback?.dynamicFace;
+  if (fallback && face) {
+    const glyph = face.requestGlyph(cp);
+    if (glyph.xadvance > 0 || glyph.width > 0) {
+      return { glyph, font: face.font, resolved: fallback };
     }
   }
-  return {
-    vertices: new Float32Array(verts),
-    indices: new Uint32Array(idx),
-    anchorA: new Uint32Array(anchorA),
-    anchorB: new Uint32Array(anchorB),
-    anchorT: new Float32Array(anchorT)
-  };
+  warnMissingGlyphOnce(resolved.resolved.family, cp);
+  return null;
 }
-function expandPolyline(pl, width, join, cap, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT) {
-  const half = width / 2;
-  const pts = pl.points;
-  const ptCount = pts.length / 2;
-  const segCount = ptCount - 1;
-  if (segCount < 1) return;
-  const plA = pl.anchorA ?? new Uint32Array(ptCount);
-  const plB = pl.anchorB ?? new Uint32Array(ptCount);
-  const plT = pl.anchorT ?? new Float32Array(ptCount);
-  const plHalf = pl.widths ? pl.widths.map((w) => w / 2) : null;
-  const segs = [];
-  const segSrcIdx = [];
-  for (let s = 0; s < segCount; s++) {
-    const ha = plHalf ? plHalf[s] : half;
-    const hb = plHalf ? plHalf[s + 1] : half;
-    const seg = makeSeg(pts[s * 2], pts[s * 2 + 1], pts[(s + 1) * 2], pts[(s + 1) * 2 + 1], ha, hb);
-    if (seg) {
-      segs.push(seg);
-      segSrcIdx.push(s);
+var warnedMissingGlyphs = /* @__PURE__ */ new Set();
+function warnMissingGlyphOnce(family, cp) {
+  const key = `${family}|${cp}`;
+  if (warnedMissingGlyphs.has(key)) return;
+  warnedMissingGlyphs.add(key);
+  const ch = String.fromCodePoint(cp);
+  console.warn(
+    `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) {
+  const ctx = { groups: /* @__PURE__ */ new Map() };
+  const entries = [];
+  let prevCp;
+  let prevFont;
+  let prevFontSize;
+  for (const run of runs) {
+    const resolved = resolveFontVariant(run.fontFamily, run.fontWeight, run.fontStyle);
+    const font = resolved.entry?.font ?? resolved.dynamicFace?.font;
+    if (!font) {
+      prevCp = void 0;
+      prevFont = void 0;
+      prevFontSize = void 0;
+      continue;
     }
-  }
-  let closerSrcIdx = -1;
-  if (pl.closed && segs.length >= 1) {
-    const last = segs[segs.length - 1];
-    const first = segs[0];
-    const haCloser = plHalf ? plHalf[ptCount - 1] : half;
-    const hbCloser = plHalf ? plHalf[0] : half;
-    const closer = makeSeg(last.bx, last.by, first.ax, first.ay, haCloser, hbCloser);
-    if (closer) {
-      segs.push(closer);
-      closerSrcIdx = ptCount - 1;
-      segSrcIdx.push(closerSrcIdx);
+    const scale2 = run.fontSize / font.info.size;
+    const tracking = run.letterSpacing;
+    for (const ch of [...run.text]) {
+      const cp = ch.codePointAt(0);
+      const isNewline = cp === 10;
+      const isSpace = cp === 32;
+      if (isNewline) {
+        entries.push({
+          run,
+          font,
+          glyph: { id: cp, x: 0, y: 0, width: 0, height: 0, xoffset: 0, yoffset: 0, xadvance: 0, page: 0 },
+          // A newline consumes no advance, so it takes no tracking either.
+          cp,
+          advance: 0,
+          tracking: 0,
+          kerningBefore: 0,
+          isSpace: false,
+          isNewline: true,
+          resolved,
+          fontSize: run.fontSize
+        });
+        prevCp = void 0;
+        prevFont = void 0;
+        prevFontSize = void 0;
+        continue;
+      }
+      if (isSpace) {
+        const spaceGlyph = resolved.dynamicFace ? resolved.dynamicFace.requestGlyph(32) : font.charMap.get(32);
+        const advance = spaceGlyph ? spaceGlyph.xadvance * scale2 : run.fontSize * 0.25;
+        let kerningBefore2 = 0;
+        if (prevCp !== void 0 && prevFont !== void 0 && prevFontSize !== void 0) {
+          const kAtlas = prevFont.kerningMap.get(prevCp)?.get(cp) ?? 0;
+          kerningBefore2 = kAtlas * (prevFontSize / prevFont.info.size);
+        }
+        entries.push({
+          run,
+          font,
+          glyph: spaceGlyph ?? { id: 32, x: 0, y: 0, width: 0, height: 0, xoffset: 0, yoffset: 0, xadvance: 0, page: 0 },
+          cp,
+          advance,
+          tracking,
+          kerningBefore: kerningBefore2,
+          isSpace: true,
+          isNewline: false,
+          resolved,
+          fontSize: run.fontSize
+        });
+        prevCp = cp;
+        prevFont = font;
+        prevFontSize = run.fontSize;
+        continue;
+      }
+      const hit = resolved.dynamicFace ? { glyph: resolved.dynamicFace.requestGlyph(cp), font, resolved } : resolveGlyph(run, font, resolved, cp);
+      if (!hit) {
+        prevCp = cp;
+        prevFont = font;
+        prevFontSize = run.fontSize;
+        continue;
+      }
+      const glyphFont = hit.font;
+      const glyphScale = run.fontSize / glyphFont.info.size;
+      let kerningBefore = 0;
+      if (prevCp !== void 0 && prevFont !== void 0 && prevFontSize !== void 0) {
+        const kAtlas = prevFont.kerningMap.get(prevCp)?.get(cp) ?? 0;
+        kerningBefore = kAtlas * (prevFontSize / prevFont.info.size);
+      }
+      entries.push({
+        run,
+        font: glyphFont,
+        glyph: hit.glyph,
+        cp,
+        advance: hit.glyph.xadvance * glyphScale,
+        tracking,
+        kerningBefore,
+        isSpace,
+        isNewline: false,
+        resolved: hit.resolved,
+        fontSize: run.fontSize
+      });
+      prevCp = cp;
+      prevFont = glyphFont;
+      prevFontSize = run.fontSize;
     }
   }
-  if (segs.length === 0) return;
-  const segBaseIdx = [];
-  for (let s = 0; s < segs.length; s++) {
-    const seg = segs[s];
-    const startSrc = segSrcIdx[s];
-    const endSrc = s === segs.length - 1 && pl.closed && closerSrcIdx >= 0 ? 0 : startSrc + 1;
-    const base = verts.length / 2;
-    segBaseIdx.push(base);
-    const nxA = seg.nxUnit * seg.halfA, nyA = seg.nyUnit * seg.halfA;
-    const nxB = seg.nxUnit * seg.halfB, nyB = seg.nyUnit * seg.halfB;
-    verts.push(seg.ax + nxA, seg.ay + nyA);
-    anchorA.push(plA[startSrc]);
-    anchorB.push(plB[startSrc]);
-    anchorT.push(plT[startSrc]);
-    verts.push(seg.ax - nxA, seg.ay - nyA);
-    anchorA.push(plA[startSrc]);
-    anchorB.push(plB[startSrc]);
-    anchorT.push(plT[startSrc]);
-    verts.push(seg.bx + nxB, seg.by + nyB);
-    anchorA.push(plA[endSrc]);
-    anchorB.push(plB[endSrc]);
-    anchorT.push(plT[endSrc]);
-    verts.push(seg.bx - nxB, seg.by - nyB);
-    anchorA.push(plA[endSrc]);
-    anchorB.push(plB[endSrc]);
-    anchorT.push(plT[endSrc]);
-    idx.push(base, base + 1, base + 2, base + 1, base + 3, base + 2);
-  }
-  const joinCount = pl.closed ? segs.length : segs.length - 1;
-  for (let j = 0; j < joinCount; j++) {
-    emitJoin(segs, segBaseIdx, j, join, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT, segSrcIdx, plA, plB, plT);
-  }
-  if (!pl.closed && cap !== "butt") {
-    const first = segs[0];
-    const firstBase = segBaseIdx[0];
-    emitCap(first, firstBase + 0, firstBase + 1, false, first.halfA, cap, verts, idx, anchorA, anchorB, anchorT, plA[0], plB[0], plT[0]);
-    const last = segs[segs.length - 1];
-    const lastBase = segBaseIdx[segs.length - 1];
-    const lastSrc = segSrcIdx[segs.length - 1] + 1;
-    emitCap(last, lastBase + 2, lastBase + 3, true, last.halfB, cap, verts, idx, anchorA, anchorB, anchorT, plA[lastSrc], plB[lastSrc], plT[lastSrc]);
+  const lines = [];
+  let cur = { entries: [], width: 0, height: 0 };
+  function commitLine() {
+    lines.push(cur);
+    cur = { entries: [], width: 0, height: 0 };
   }
-}
-function populatePolylineWidths(pl, vertexWidths, fallbackWidth) {
-  const ptCount = pl.points.length / 2;
-  if (ptCount === 0) return;
-  const aA = pl.anchorA ?? new Uint32Array(ptCount);
-  const aB = pl.anchorB ?? new Uint32Array(ptCount);
-  const aT = pl.anchorT ?? new Float32Array(ptCount);
-  const widths = new Float32Array(ptCount);
-  const read = (i) => {
-    const v = vertexWidths[i];
-    return typeof v === "number" && isFinite(v) && v > 0 ? v : fallbackWidth;
-  };
-  for (let i = 0; i < ptCount; i++) {
-    const a = aA[i], b = aB[i], t = aT[i];
-    if (a === b) {
-      widths[i] = read(a);
-    } else {
-      const wa = read(a);
-      const wb = read(b);
-      widths[i] = wa + (wb - wa) * t;
+  let i = 0;
+  while (i < entries.length) {
+    const e = entries[i];
+    if (e.isNewline) {
+      if (cur.entries.length === 0) {
+        cur.height = Math.max(cur.height, e.fontSize * opts.lineHeight);
+        cur.blank = e;
+      }
+      commitLine();
+      i++;
+      continue;
     }
-  }
-  pl.widths = widths;
-}
-var ROUND_CAP_STEP_RAD = 10 * Math.PI / 180;
-function emitCap(seg, leftIdx, rightIdx, atEnd, half, cap, verts, idx, anchorA, anchorB, anchorT, endA, endB, endT) {
-  const sign = atEnd ? 1 : -1;
-  const dx = (seg.bx - seg.ax) / seg.len * sign;
-  const dy = (seg.by - seg.ay) / seg.len * sign;
-  const cx = atEnd ? seg.bx : seg.ax;
-  const cy = atEnd ? seg.by : seg.ay;
-  const nx = seg.nxUnit * half;
-  const ny = seg.nyUnit * half;
-  if (cap === "square") {
-    const ox = cx + dx * half;
-    const oy = cy + dy * half;
-    const lOut = verts.length / 2;
-    verts.push(ox + nx, oy + ny);
-    anchorA.push(endA);
-    anchorB.push(endB);
-    anchorT.push(endT);
-    const rOut = verts.length / 2;
-    verts.push(ox - nx, oy - ny);
-    anchorA.push(endA);
-    anchorB.push(endB);
-    anchorT.push(endT);
-    if (atEnd) {
-      idx.push(leftIdx, lOut, rOut, leftIdx, rOut, rightIdx);
-    } else {
-      idx.push(leftIdx, rOut, lOut, leftIdx, rightIdx, rOut);
+    if (e.isSpace) {
+      if (cur.entries.length > 0) {
+        cur.entries.push(e);
+        cur.width += e.kerningBefore + e.advance + e.tracking;
+        cur.height = Math.max(cur.height, e.fontSize * opts.lineHeight);
+      }
+      i++;
+      continue;
     }
-    return;
-  }
-  if (cap === "round") {
-    const pivotIdx = verts.length / 2;
-    verts.push(cx, cy);
-    anchorA.push(endA);
-    anchorB.push(endB);
-    anchorT.push(endT);
-    const startAngle = Math.atan2(ny, nx);
-    const sweep = atEnd ? -Math.PI : Math.PI;
-    const steps = Math.max(1, Math.ceil(Math.abs(sweep) / ROUND_CAP_STEP_RAD));
-    const stepAngle = sweep / steps;
-    let prevIdx = leftIdx;
-    for (let i = 1; i < steps; i++) {
-      const ang = startAngle + i * stepAngle;
-      const fx = cx + Math.cos(ang) * half;
-      const fy = cy + Math.sin(ang) * half;
-      const newIdx = verts.length / 2;
-      verts.push(fx, fy);
-      anchorA.push(endA);
-      anchorB.push(endB);
-      anchorT.push(endT);
-      if (atEnd) idx.push(prevIdx, newIdx, pivotIdx);
-      else idx.push(prevIdx, pivotIdx, newIdx);
-      prevIdx = newIdx;
+    let j = i;
+    let wordWidth = 0;
+    while (j < entries.length && !entries[j].isSpace && !entries[j].isNewline) {
+      const w = entries[j];
+      wordWidth += w.kerningBefore + w.advance + w.tracking;
+      j++;
     }
-    if (atEnd) idx.push(prevIdx, rightIdx, pivotIdx);
-    else idx.push(prevIdx, pivotIdx, rightIdx);
+    if (Number.isFinite(opts.maxWidth) && cur.width + wordWidth > opts.maxWidth && cur.entries.length > 0) {
+      commitLine();
+    }
+    for (let k = i; k < j; k++) {
+      const w = entries[k];
+      const kerningBefore = cur.entries.length === 0 ? 0 : w.kerningBefore;
+      cur.entries.push({ ...w, kerningBefore });
+      cur.width += kerningBefore + w.advance + w.tracking;
+      cur.height = Math.max(cur.height, w.fontSize * opts.lineHeight);
+    }
+    i = j;
   }
-}
-function splitForDash(pl, dash) {
-  const out = [];
-  const plA = pl.anchorA ?? new Uint32Array(pl.points.length / 2);
-  const plB = pl.anchorB ?? new Uint32Array(pl.points.length / 2);
-  const plT = pl.anchorT ?? new Float32Array(pl.points.length / 2);
-  let dashIdx = 0;
-  let dashRemaining = dash[0];
-  let onPhase = true;
-  let curPts = onPhase ? [pl.points[0], pl.points[1]] : null;
-  let curA = onPhase ? [plA[0]] : null;
-  let curB = onPhase ? [plB[0]] : null;
-  let curT = onPhase ? [plT[0]] : null;
-  const flushAndAdvance = () => {
-    if (curPts && curPts.length >= 4) {
-      out.push({
-        points: curPts,
-        closed: false,
-        anchorA: new Uint32Array(curA),
-        anchorB: new Uint32Array(curB),
-        anchorT: new Float32Array(curT)
-      });
+  if (cur.entries.length > 0) commitLine();
+  function outlineFor(e) {
+    const min = opts.outlineMinSize;
+    if (min === void 0 || e.fontSize < min) return null;
+    if (e.resolved.synthetic.bold) return null;
+    const r = e.resolved.resolved;
+    return glyphOutline(r.family, r.weight, r.style, e.cp);
+  }
+  const decorations = [];
+  let span = null;
+  function flushSpan() {
+    const s = span;
+    span = null;
+    if (!s || s.x1 <= s.x0) return;
+    const thickness = s.fontSize * DECORATION_THICKNESS;
+    if (s.underline) {
+      const y0 = s.baselineY + s.fontSize * UNDERLINE_OFFSET;
+      decorations.push({ kind: "underline", x0: s.x0, y0, x1: s.x1, y1: y0 + thickness, fill: s.fill });
     }
-    curPts = null;
-    curA = null;
-    curB = null;
-    curT = null;
-    dashIdx = (dashIdx + 1) % dash.length;
-    dashRemaining = dash[dashIdx];
-    onPhase = !onPhase;
-  };
-  let prevX = pl.points[0], prevY = pl.points[1];
-  const ptCount = pl.points.length / 2;
-  const segCount = pl.closed ? ptCount : ptCount - 1;
-  for (let i = 0; i < segCount; i++) {
-    const nextIdx = (i + 1) % ptCount;
-    const cx = pl.points[nextIdx * 2], cy = pl.points[nextIdx * 2 + 1];
-    const startA = plA[i], startB = plB[i], startT = plT[i];
-    const endA = plA[nextIdx], endB = plB[nextIdx], endT = plT[nextIdx];
-    const segFullDx = cx - prevX, segFullDy = cy - prevY;
-    const segFullLen = Math.hypot(segFullDx, segFullDy);
-    let segDx = segFullDx, segDy = segFullDy;
-    let segLen = segFullLen;
-    let traveled = 0;
-    while (segLen > 1e-9) {
-      if (segLen <= dashRemaining) {
-        if (onPhase && curPts) {
-          curPts.push(cx, cy);
-          curA.push(endA);
-          curB.push(endB);
-          curT.push(endT);
-        }
-        dashRemaining -= segLen;
-        prevX = cx;
-        prevY = cy;
-        traveled = segFullLen;
-        segLen = 0;
-        if (dashRemaining <= 1e-9) {
-          flushAndAdvance();
-          if (onPhase) {
-            curPts = [prevX, prevY];
-            curA = [endA];
-            curB = [endB];
-            curT = [endT];
-          }
-        }
-      } else {
-        const tConsume = dashRemaining / segLen;
-        const ix = prevX + segDx * tConsume;
-        const iy = prevY + segDy * tConsume;
-        traveled += dashRemaining;
-        const frac = traveled / segFullLen;
-        let mA, mB, mT;
-        if (startA === endA && startB === endB) {
-          mA = startA;
-          mB = startB;
-          mT = startT + (endT - startT) * frac;
+    if (s.strikethrough) {
+      const y0 = s.baselineY + s.fontSize * STRIKETHROUGH_OFFSET;
+      decorations.push({ kind: "strikethrough", x0: s.x0, y0, x1: s.x1, y1: y0 + thickness, fill: s.fill });
+    }
+  }
+  const lineBoxes = [];
+  let penY = 0;
+  let maxLineWidth = 0;
+  const finiteWidth = Number.isFinite(opts.maxWidth) ? opts.maxWidth : 0;
+  for (const line of lines) {
+    const alignShift = (() => {
+      if (opts.align === "left") return 0;
+      if (!Number.isFinite(opts.maxWidth)) {
+        return opts.align === "center" ? -line.width / 2 : -line.width;
+      }
+      const slack = finiteWidth - line.width;
+      return opts.align === "center" ? slack / 2 : slack;
+    })();
+    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;
+    for (const e of line.entries) {
+      penX += e.kerningBefore;
+      const step = e.advance + e.tracking;
+      const scale2 = e.fontSize / e.font.info.size;
+      const baselineY = penY + e.font.common.base * scale2;
+      if (e.run.underline || e.run.strikethrough) {
+        if (span !== null && span.underline === e.run.underline && span.strikethrough === e.run.strikethrough && span.fontSize === e.fontSize && span.baselineY === baselineY && sameFill(span.fill, e.run.fill)) {
+          span.x1 = penX + step;
         } else {
-          if (frac < 0.5) {
-            mA = startA;
-            mB = startB;
-            mT = startT;
-          } else {
-            mA = endA;
-            mB = endB;
-            mT = endT;
-          }
-        }
-        if (onPhase && curPts) {
-          curPts.push(ix, iy);
-          curA.push(mA);
-          curB.push(mB);
-          curT.push(mT);
-        }
-        prevX = ix;
-        prevY = iy;
-        segDx = cx - prevX;
-        segDy = cy - prevY;
-        segLen = Math.hypot(segDx, segDy);
-        flushAndAdvance();
-        if (onPhase) {
-          curPts = [prevX, prevY];
-          curA = [mA];
-          curB = [mB];
-          curT = [mT];
+          flushSpan();
+          span = {
+            underline: e.run.underline,
+            strikethrough: e.run.strikethrough,
+            fill: e.run.fill,
+            fontSize: e.fontSize,
+            baselineY,
+            x0: penX,
+            x1: penX + step
+          };
         }
+      } else {
+        flushSpan();
+      }
+      const outlineD = outlineFor(e);
+      if (outlineD !== null) {
+        const group2 = getOrCreateGroup(ctx, e.run, e.resolved, 0, "outline");
+        group2.glyphs.push({
+          d: outlineD,
+          key: `${e.resolved.resolved.family}|${e.resolved.resolved.weight}|${e.resolved.resolved.style}|${e.cp}`,
+          x: penX,
+          baselineY,
+          // Em space is unit-scale, so world units per em is just the size.
+          scale: e.fontSize
+        });
+        penX += step;
+        continue;
+      }
+      if (e.advance === 0 || e.glyph.width === 0 || e.glyph.page < 0) {
+        penX += step;
+        continue;
       }
+      const group = getOrCreateGroup(ctx, e.run, e.resolved, e.glyph.page);
+      const atlasW = e.font.common.scaleW;
+      const atlasH = e.font.common.scaleH;
+      const qx0 = penX + e.glyph.xoffset * scale2;
+      const qy0 = penY + e.glyph.yoffset * scale2;
+      const qx1 = qx0 + e.glyph.width * scale2;
+      const qy1 = qy0 + e.glyph.height * scale2;
+      const u0 = e.glyph.x / atlasW;
+      const v0 = e.glyph.y / atlasH;
+      const u1 = (e.glyph.x + e.glyph.width) / atlasW;
+      const v1 = (e.glyph.y + e.glyph.height) / atlasH;
+      group.quads.push({ x0: qx0, y0: qy0, x1: qx1, y1: qy1, u0, v0, u1, v1, baselineY });
+      penX += step;
     }
-  }
-  if (curPts && curPts.length >= 4) {
-    out.push({
-      points: curPts,
-      closed: false,
-      anchorA: new Uint32Array(curA),
-      anchorB: new Uint32Array(curB),
-      anchorT: new Float32Array(curT)
+    flushSpan();
+    lineBoxes.push({
+      x0: lineX0,
+      y0: penY,
+      x1: lineX0 + line.width,
+      y1: penY + line.height,
+      baselineY: lineBaselineY
     });
+    maxLineWidth = Math.max(maxLineWidth, line.width);
+    penY += line.height;
   }
-  return out;
-}
-function makeSeg(ax, ay, bx, by, halfA, halfB) {
-  const dx = bx - ax, dy = by - ay;
-  const len = Math.hypot(dx, dy);
-  if (len === 0) return null;
   return {
-    ax,
-    ay,
-    bx,
-    by,
-    nxUnit: -dy / len,
-    nyUnit: dx / len,
-    halfA,
-    halfB,
-    len
+    groups: [...ctx.groups.values()],
+    decorations,
+    lines: lineBoxes,
+    bounds: { width: maxLineWidth, height: penY }
   };
 }
-var DEFAULT_MITER_LIMIT = 10;
-var DEFAULT_VARYING_WIDTH_JOIN_THRESHOLD = 1.5;
-function emitJoin(segs, segBaseIdx, j, join, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT, segSrcIdx, plA, plB, plT) {
-  const a = segs[j];
-  const b = segs[(j + 1) % segs.length];
-  const aBase = segBaseIdx[j];
-  const bBase = segBaseIdx[(j + 1) % segs.length];
-  const adx = a.bx - a.ax, ady = a.by - a.ay;
-  const bdx = b.bx - b.ax, bdy = b.by - b.ay;
-  const cross = adx * bdy - ady * bdx;
-  if (cross === 0) return;
-  const onPositive = cross > 0;
-  const aOuterEnd = onPositive ? aBase + 3 : aBase + 2;
-  const bOuterStart = onPositive ? bBase + 1 : bBase + 0;
-  const nextSeg = (j + 1) % segs.length;
-  const cornerSrc = segSrcIdx[nextSeg];
-  const cornerA = plA[cornerSrc];
-  const cornerB = plB[cornerSrc];
-  const cornerT = plT[cornerSrc];
-  const halfAtCorner = a.halfB;
-  const taperA = Math.max(a.halfA, a.halfB) / Math.max(1e-9, Math.min(a.halfA, a.halfB));
-  const taperB = Math.max(b.halfA, b.halfB) / Math.max(1e-9, Math.min(b.halfA, b.halfB));
-  const forceBevelForVarying = taperA > varyingThreshold || taperB > varyingThreshold;
-  if (join === "bevel" || forceBevelForVarying) {
-    emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
-    return;
-  }
-  if (join === "miter") {
-    const aOX = verts[aOuterEnd * 2], aOY = verts[aOuterEnd * 2 + 1];
-    const bOX = verts[bOuterStart * 2], bOY = verts[bOuterStart * 2 + 1];
-    const apex = lineLineIntersect(aOX, aOY, adx, ady, bOX, bOY, -bdx, -bdy);
-    if (!apex) {
-      emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
-      return;
-    }
-    const miterLen = Math.hypot(apex[0] - a.bx, apex[1] - a.by);
-    if (miterLen > miterLimit * halfAtCorner) {
-      emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
-      return;
-    }
-    const apexIdx = verts.length / 2;
-    verts.push(apex[0], apex[1]);
-    anchorA.push(cornerA);
-    anchorB.push(cornerB);
-    anchorT.push(cornerT);
-    const jIdx = verts.length / 2;
-    verts.push(a.bx, a.by);
-    anchorA.push(cornerA);
-    anchorB.push(cornerB);
-    anchorT.push(cornerT);
-    if (onPositive) {
-      idx.push(aOuterEnd, apexIdx, bOuterStart);
-      idx.push(aOuterEnd, bOuterStart, jIdx);
-    } else {
-      idx.push(aOuterEnd, bOuterStart, apexIdx);
-      idx.push(aOuterEnd, jIdx, bOuterStart);
-    }
-    return;
-  }
-  if (join === "round") {
-    emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
-    return;
-  }
-}
-var ROUND_STEP_RAD = 10 * Math.PI / 180;
-function emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT) {
-  const cx = a.bx, cy = a.by;
-  const pivotIdx = verts.length / 2;
-  verts.push(cx, cy);
-  anchorA.push(cornerA);
-  anchorB.push(cornerB);
-  anchorT.push(cornerT);
-  const startX = verts[aOuterEnd * 2] - cx;
-  const startY = verts[aOuterEnd * 2 + 1] - cy;
-  const endX = verts[bOuterStart * 2] - cx;
-  const endY = verts[bOuterStart * 2 + 1] - cy;
-  const r = Math.hypot(startX, startY);
-  const startAngle = Math.atan2(startY, startX);
-  const endAngle = Math.atan2(endY, endX);
-  let sweep = endAngle - startAngle;
-  if (onPositive && sweep < 0) sweep += 2 * Math.PI;
-  else if (!onPositive && sweep > 0) sweep -= 2 * Math.PI;
-  const steps = Math.max(1, Math.ceil(Math.abs(sweep) / ROUND_STEP_RAD));
-  const stepAngle = sweep / steps;
-  let prevIdx = aOuterEnd;
-  for (let i = 1; i < steps; i++) {
-    const ang = startAngle + i * stepAngle;
-    const fx = cx + Math.cos(ang) * r;
-    const fy = cy + Math.sin(ang) * r;
-    const newIdx = verts.length / 2;
-    verts.push(fx, fy);
-    anchorA.push(cornerA);
-    anchorB.push(cornerB);
-    anchorT.push(cornerT);
-    if (onPositive) idx.push(prevIdx, pivotIdx, newIdx);
-    else idx.push(prevIdx, newIdx, pivotIdx);
-    prevIdx = newIdx;
-  }
-  if (onPositive) idx.push(prevIdx, pivotIdx, bOuterStart);
-  else idx.push(prevIdx, bOuterStart, pivotIdx);
-}
-function emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT) {
-  const jIdx = verts.length / 2;
-  verts.push(a.bx, a.by);
-  anchorA.push(cornerA);
-  anchorB.push(cornerB);
-  anchorT.push(cornerT);
-  if (onPositive) idx.push(aOuterEnd, jIdx, bOuterStart);
-  else idx.push(aOuterEnd, bOuterStart, jIdx);
-}
-function lineLineIntersect(apx, apy, adx, ady, bpx, bpy, bdx, bdy) {
-  const denom = adx * bdy - ady * bdx;
-  if (Math.abs(denom) < 1e-9) return null;
-  const t = ((bpx - apx) * bdy - (bpy - apy) * bdx) / denom;
-  return [apx + t * adx, apy + t * ady];
+var LAYOUT_CACHE_VARIANT_LIMIT = 8;
+var cache2 = /* @__PURE__ */ new WeakMap();
+function outlineBucket(runs, min) {
+  if (min === void 0) return -1;
+  const sizes = /* @__PURE__ */ new Set();
+  for (const r of runs) sizes.add(r.fontSize);
+  let n = 0;
+  for (const size of sizes) if (size >= min) n++;
+  return n;
 }
-var UNDERLINE_OFFSET = 0.1;
-var STRIKETHROUGH_OFFSET = -0.3;
-var DECORATION_THICKNESS = 0.05;
-function fillKey(p) {
-  if ("color" in p) return `s:${p.color}:${p.opacity ?? 1}`;
-  return `nx:${Math.random()}`;
+function variantKey(runs, opts) {
+  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}`;
 }
-function sameFill(a, b) {
-  if (a === b) return true;
-  if ("color" in a && "color" in b) {
-    return a.color === b.color && (a.opacity ?? 1) === (b.opacity ?? 1);
+function cachedLayoutRuns(runs, opts) {
+  const fonts = glyphGeneration();
+  let entry = cache2.get(runs);
+  if (entry === void 0) {
+    entry = { generation: fonts, byVariant: /* @__PURE__ */ new Map() };
+    cache2.set(runs, entry);
+  } else if (entry.generation !== fonts) {
+    entry.generation = fonts;
+    entry.byVariant.clear();
   }
-  return false;
-}
-function strokeKey(s) {
-  if (!s) return "-";
-  return [
-    fillKey(s.paint),
-    s.width ?? 1,
-    s.join ?? "miter",
-    s.cap ?? "butt",
-    s.miterLimit ?? "",
-    s.align ?? "center",
-    (s.dash ?? []).join(",")
-  ].join(":");
+  const key = variantKey(runs, opts);
+  const hit = entry.byVariant.get(key);
+  if (hit !== void 0) return hit;
+  const laid = layoutRuns(runs, opts);
+  if (entry.byVariant.size >= LAYOUT_CACHE_VARIANT_LIMIT) entry.byVariant.clear();
+  entry.byVariant.set(key, laid);
+  return laid;
 }
-function groupKey(family, weight, style, synthetic, fill, stroke, source, page) {
-  return `${family}|${weight}|${style}|${synthetic.bold ? 1 : 0}${synthetic.italic ? 1 : 0}|${fillKey(fill)}|${strokeKey(stroke)}|${source}|${page}`;
+
+// src/features/text/verticalAlign.ts
+function verticalAlignOffset(align, boxHeight, textHeight) {
+  if (align === void 0 || align === "top" || boxHeight === void 0) return 0;
+  const slack = boxHeight - textHeight;
+  return align === "center" ? slack / 2 : slack;
 }
-function getOrCreateGroup(ctx, run, resolved, page, sourceOverride) {
-  const atlasFamily = resolved.resolved.family;
-  const resolvedWeight = resolved.resolved.weight;
-  const resolvedStyle = resolved.resolved.style;
-  const source = sourceOverride ?? resolved.source;
-  const key = groupKey(
-    atlasFamily,
-    resolvedWeight,
-    resolvedStyle,
-    resolved.synthetic,
-    run.fill,
-    source === "outline" ? run.stroke : void 0,
-    source,
-    page
-  );
-  let g = ctx.groups.get(key);
-  if (!g) {
-    g = {
-      family: atlasFamily,
-      weight: resolvedWeight,
-      style: resolvedStyle,
-      synthetic: { ...resolved.synthetic },
-      source,
-      page,
-      fill: run.fill,
-      // Only the outline tier can paint it, and carrying it on an SDF group
-      // would be a promise the renderer cannot keep.
-      ...source === "outline" && run.stroke !== void 0 ? { stroke: run.stroke } : {},
-      quads: [],
-      glyphs: []
-    };
-    ctx.groups.set(key, g);
+
+// src/features/paths/pathFromD.ts
+var NUM_RE = /[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g;
+function tokenize(d) {
+  const out = [];
+  let i = 0;
+  while (i < d.length) {
+    const ch = d[i];
+    if (/[A-Za-z]/.test(ch)) {
+      let j = i + 1;
+      while (j < d.length && !/[A-Za-z]/.test(d[j])) j++;
+      const argSlice = d.slice(i + 1, j);
+      out.push({ cmd: ch, args: readNumbers(argSlice) });
+      i = j;
+    } else {
+      i++;
+    }
   }
-  return g;
+  return out;
 }
-function resolveGlyph(run, font, resolved, cp) {
-  const direct = font.charMap.get(cp);
-  if (direct) return { glyph: direct, font, resolved };
-  const fallback = resolveGlyphFallback(run.fontFamily, run.fontWeight, run.fontStyle);
-  const face = fallback?.dynamicFace;
-  if (fallback && face) {
-    const glyph = face.requestGlyph(cp);
-    if (glyph.xadvance > 0 || glyph.width > 0) {
-      return { glyph, font: face.font, resolved: fallback };
-    }
+function readNumbers(s) {
+  const out = [];
+  let m;
+  NUM_RE.lastIndex = 0;
+  while ((m = NUM_RE.exec(s)) !== null) {
+    const n = Number(m[0]);
+    if (Number.isFinite(n)) out.push(n);
   }
-  warnMissingGlyphOnce(resolved.resolved.family, cp);
-  return null;
+  return out;
 }
-var warnedMissingGlyphs = /* @__PURE__ */ new Set();
-function warnMissingGlyphOnce(family, cp) {
-  const key = `${family}|${cp}`;
-  if (warnedMissingGlyphs.has(key)) return;
-  warnedMissingGlyphs.add(key);
-  const ch = String.fromCodePoint(cp);
-  console.warn(
-    `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) {
-  const ctx = { groups: /* @__PURE__ */ new Map() };
-  const entries = [];
-  let prevCp;
-  let prevFont;
-  let prevFontSize;
-  for (const run of runs) {
-    const resolved = resolveFontVariant(run.fontFamily, run.fontWeight, run.fontStyle);
-    const font = resolved.entry?.font ?? resolved.dynamicFace?.font;
-    if (!font) {
-      prevCp = void 0;
-      prevFont = void 0;
-      prevFontSize = void 0;
+var ARG_COUNTS = {
+  M: 2,
+  L: 2,
+  H: 1,
+  V: 1,
+  C: 6,
+  S: 4,
+  Q: 4,
+  T: 2,
+  A: 7,
+  Z: 0
+};
+function pathFromD(d, onWarn) {
+  const tokens = tokenize(d);
+  const b = new PathBuilder();
+  const st = {
+    x: 0,
+    y: 0,
+    startX: 0,
+    startY: 0,
+    lastCubicCtrl: null,
+    lastQuadCtrl: null
+  };
+  for (const { cmd, args } of tokens) {
+    const upper = cmd.toUpperCase();
+    const relative = cmd !== upper;
+    const argCount = ARG_COUNTS[upper];
+    if (argCount === void 0) {
+      onWarn?.(`unknown path command: ${cmd}`);
       continue;
     }
-    const scale2 = run.fontSize / font.info.size;
-    const tracking = run.letterSpacing;
-    for (const ch of [...run.text]) {
-      const cp = ch.codePointAt(0);
-      const isNewline = cp === 10;
-      const isSpace = cp === 32;
-      if (isNewline) {
-        entries.push({
-          run,
-          font,
-          glyph: { id: cp, x: 0, y: 0, width: 0, height: 0, xoffset: 0, yoffset: 0, xadvance: 0, page: 0 },
-          // A newline consumes no advance, so it takes no tracking either.
-          cp,
-          advance: 0,
-          tracking: 0,
-          kerningBefore: 0,
-          isSpace: false,
-          isNewline: true,
-          resolved,
-          fontSize: run.fontSize
-        });
-        prevCp = void 0;
-        prevFont = void 0;
-        prevFontSize = void 0;
-        continue;
-      }
-      if (isSpace) {
-        const spaceGlyph = resolved.dynamicFace ? resolved.dynamicFace.requestGlyph(32) : font.charMap.get(32);
-        const advance = spaceGlyph ? spaceGlyph.xadvance * scale2 : run.fontSize * 0.25;
-        let kerningBefore2 = 0;
-        if (prevCp !== void 0 && prevFont !== void 0 && prevFontSize !== void 0) {
-          const kAtlas = prevFont.kerningMap.get(prevCp)?.get(cp) ?? 0;
-          kerningBefore2 = kAtlas * (prevFontSize / prevFont.info.size);
-        }
-        entries.push({
-          run,
-          font,
-          glyph: spaceGlyph ?? { id: 32, x: 0, y: 0, width: 0, height: 0, xoffset: 0, yoffset: 0, xadvance: 0, page: 0 },
-          cp,
-          advance,
-          tracking,
-          kerningBefore: kerningBefore2,
-          isSpace: true,
-          isNewline: false,
-          resolved,
-          fontSize: run.fontSize
-        });
-        prevCp = cp;
-        prevFont = font;
-        prevFontSize = run.fontSize;
-        continue;
-      }
-      const hit = resolved.dynamicFace ? { glyph: resolved.dynamicFace.requestGlyph(cp), font, resolved } : resolveGlyph(run, font, resolved, cp);
-      if (!hit) {
-        prevCp = cp;
-        prevFont = font;
-        prevFontSize = run.fontSize;
-        continue;
-      }
-      const glyphFont = hit.font;
-      const glyphScale = run.fontSize / glyphFont.info.size;
-      let kerningBefore = 0;
-      if (prevCp !== void 0 && prevFont !== void 0 && prevFontSize !== void 0) {
-        const kAtlas = prevFont.kerningMap.get(prevCp)?.get(cp) ?? 0;
-        kerningBefore = kAtlas * (prevFontSize / prevFont.info.size);
-      }
-      entries.push({
-        run,
-        font: glyphFont,
-        glyph: hit.glyph,
-        cp,
-        advance: hit.glyph.xadvance * glyphScale,
-        tracking,
-        kerningBefore,
-        isSpace,
-        isNewline: false,
-        resolved: hit.resolved,
-        fontSize: run.fontSize
-      });
-      prevCp = cp;
-      prevFont = glyphFont;
-      prevFontSize = run.fontSize;
-    }
-  }
-  const lines = [];
-  let cur = { entries: [], width: 0, height: 0 };
-  function commitLine() {
-    lines.push(cur);
-    cur = { entries: [], width: 0, height: 0 };
-  }
-  let i = 0;
-  while (i < entries.length) {
-    const e = entries[i];
-    if (e.isNewline) {
-      if (cur.entries.length === 0) {
-        cur.height = Math.max(cur.height, e.fontSize * opts.lineHeight);
-        cur.blank = e;
-      }
-      commitLine();
-      i++;
+    if (upper === "Z") {
+      b.close();
+      st.x = st.startX;
+      st.y = st.startY;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
       continue;
     }
-    if (e.isSpace) {
-      if (cur.entries.length > 0) {
-        cur.entries.push(e);
-        cur.width += e.kerningBefore + e.advance + e.tracking;
-        cur.height = Math.max(cur.height, e.fontSize * opts.lineHeight);
-      }
-      i++;
-      continue;
+    const groups = argCount === 0 ? 1 : Math.floor(args.length / argCount);
+    for (let g = 0; g < groups; g++) {
+      const a = args.slice(g * argCount, (g + 1) * argCount);
+      const effectiveUpper = upper === "M" && g > 0 ? "L" : upper;
+      runCommand(effectiveUpper, relative, a, st, b);
     }
-    let j = i;
-    let wordWidth = 0;
-    while (j < entries.length && !entries[j].isSpace && !entries[j].isNewline) {
-      const w = entries[j];
-      wordWidth += w.kerningBefore + w.advance + w.tracking;
-      j++;
+  }
+  return b.build();
+}
+function runCommand(upper, relative, a, st, b) {
+  const rx = relative ? st.x : 0;
+  const ry = relative ? st.y : 0;
+  switch (upper) {
+    case "M": {
+      const x = a[0] + rx;
+      const y = a[1] + ry;
+      b.moveTo(x, y);
+      st.x = x;
+      st.y = y;
+      st.startX = x;
+      st.startY = y;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
+      return;
     }
-    if (Number.isFinite(opts.maxWidth) && cur.width + wordWidth > opts.maxWidth && cur.entries.length > 0) {
-      commitLine();
+    case "L": {
+      const x = a[0] + rx;
+      const y = a[1] + ry;
+      b.lineTo(x, y);
+      st.x = x;
+      st.y = y;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
+      return;
     }
-    for (let k = i; k < j; k++) {
-      const w = entries[k];
-      const kerningBefore = cur.entries.length === 0 ? 0 : w.kerningBefore;
-      cur.entries.push({ ...w, kerningBefore });
-      cur.width += kerningBefore + w.advance + w.tracking;
-      cur.height = Math.max(cur.height, w.fontSize * opts.lineHeight);
+    case "H": {
+      const x = a[0] + (relative ? st.x : 0);
+      b.lineTo(x, st.y);
+      st.x = x;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
+      return;
     }
-    i = j;
-  }
-  if (cur.entries.length > 0) commitLine();
-  function outlineFor(e) {
-    const min = opts.outlineMinSize;
-    if (min === void 0 || e.fontSize < min) return null;
-    if (e.resolved.synthetic.bold) return null;
-    const r = e.resolved.resolved;
-    return glyphOutline(r.family, r.weight, r.style, e.cp);
-  }
-  const decorations = [];
-  let span = null;
-  function flushSpan() {
-    const s = span;
-    span = null;
-    if (!s || s.x1 <= s.x0) return;
-    const thickness = s.fontSize * DECORATION_THICKNESS;
-    if (s.underline) {
-      const y0 = s.baselineY + s.fontSize * UNDERLINE_OFFSET;
-      decorations.push({ kind: "underline", x0: s.x0, y0, x1: s.x1, y1: y0 + thickness, fill: s.fill });
+    case "V": {
+      const y = a[0] + (relative ? st.y : 0);
+      b.lineTo(st.x, y);
+      st.y = y;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
+      return;
     }
-    if (s.strikethrough) {
-      const y0 = s.baselineY + s.fontSize * STRIKETHROUGH_OFFSET;
-      decorations.push({ kind: "strikethrough", x0: s.x0, y0, x1: s.x1, y1: y0 + thickness, fill: s.fill });
+    case "C": {
+      const x1 = a[0] + rx, y1 = a[1] + ry;
+      const x2 = a[2] + rx, y2 = a[3] + ry;
+      const x = a[4] + rx, y = a[5] + ry;
+      b.curveTo(x1, y1, x2, y2, x, y);
+      st.x = x;
+      st.y = y;
+      st.lastCubicCtrl = { x: x2, y: y2 };
+      st.lastQuadCtrl = null;
+      return;
     }
-  }
-  const lineBoxes = [];
-  let penY = origin.y;
-  let maxLineWidth = 0;
-  const finiteWidth = Number.isFinite(opts.maxWidth) ? opts.maxWidth : 0;
-  for (const line of lines) {
-    const alignShift = (() => {
-      if (opts.align === "left") return 0;
-      if (!Number.isFinite(opts.maxWidth)) {
-        return opts.align === "center" ? -line.width / 2 : -line.width;
+    case "S": {
+      const ref = st.lastCubicCtrl ?? { x: st.x, y: st.y };
+      const x1 = 2 * st.x - ref.x;
+      const y1 = 2 * st.y - ref.y;
+      const x2 = a[0] + rx, y2 = a[1] + ry;
+      const x = a[2] + rx, y = a[3] + ry;
+      b.curveTo(x1, y1, x2, y2, x, y);
+      st.x = x;
+      st.y = y;
+      st.lastCubicCtrl = { x: x2, y: y2 };
+      st.lastQuadCtrl = null;
+      return;
+    }
+    case "Q": {
+      const x1 = a[0] + rx, y1 = a[1] + ry;
+      const x = a[2] + rx, y = a[3] + ry;
+      b.quadTo(x1, y1, x, y);
+      st.x = x;
+      st.y = y;
+      st.lastQuadCtrl = { x: x1, y: y1 };
+      st.lastCubicCtrl = null;
+      return;
+    }
+    case "T": {
+      const ref = st.lastQuadCtrl ?? { x: st.x, y: st.y };
+      const x1 = 2 * st.x - ref.x;
+      const y1 = 2 * st.y - ref.y;
+      const x = a[0] + rx, y = a[1] + ry;
+      b.quadTo(x1, y1, x, y);
+      st.x = x;
+      st.y = y;
+      st.lastQuadCtrl = { x: x1, y: y1 };
+      st.lastCubicCtrl = null;
+      return;
+    }
+    case "A": {
+      const rxA = Math.abs(a[0]);
+      const ryA = Math.abs(a[1]);
+      const xRot = a[2];
+      const largeArc = a[3] !== 0;
+      const sweep = a[4] !== 0;
+      const ex = a[5] + rx;
+      const ey = a[6] + ry;
+      arcToCubics(st.x, st.y, ex, ey, rxA, ryA, xRot, largeArc, sweep, b);
+      st.x = ex;
+      st.y = ey;
+      st.lastCubicCtrl = null;
+      st.lastQuadCtrl = null;
+      return;
+    }
+    default:
+      return;
+  }
+}
+function arcToCubics(x1, y1, x2, y2, rx, ry, xAxisRotationDeg, largeArc, sweep, b) {
+  if (x1 === x2 && y1 === y2) return;
+  if (rx === 0 || ry === 0) {
+    b.lineTo(x2, y2);
+    return;
+  }
+  const phi = xAxisRotationDeg * Math.PI / 180;
+  const cosPhi = Math.cos(phi);
+  const sinPhi = Math.sin(phi);
+  const dx = (x1 - x2) / 2;
+  const dy = (y1 - y2) / 2;
+  const x1p = cosPhi * dx + sinPhi * dy;
+  const y1p = -sinPhi * dx + cosPhi * dy;
+  let rxs = rx * rx;
+  let rys = ry * ry;
+  const x1ps = x1p * x1p;
+  const y1ps = y1p * y1p;
+  const lambda = x1ps / rxs + y1ps / rys;
+  let rxFixed = rx;
+  let ryFixed = ry;
+  if (lambda > 1) {
+    const sqrtLambda = Math.sqrt(lambda);
+    rxFixed = sqrtLambda * rx;
+    ryFixed = sqrtLambda * ry;
+    rxs = rxFixed * rxFixed;
+    rys = ryFixed * ryFixed;
+  }
+  const sign = largeArc === sweep ? -1 : 1;
+  const num = rxs * rys - rxs * y1ps - rys * x1ps;
+  const den = rxs * y1ps + rys * x1ps;
+  const factor = sign * Math.sqrt(Math.max(0, num / den));
+  const cxp = factor * (rxFixed * y1p) / ryFixed;
+  const cyp = factor * -(ryFixed * x1p) / rxFixed;
+  const cx = cosPhi * cxp - sinPhi * cyp + (x1 + x2) / 2;
+  const cy = sinPhi * cxp + cosPhi * cyp + (y1 + y2) / 2;
+  const angle = (ux, uy, vx, vy) => {
+    const dot = ux * vx + uy * vy;
+    const len = Math.sqrt((ux * ux + uy * uy) * (vx * vx + vy * vy));
+    let a = Math.acos(Math.max(-1, Math.min(1, dot / len)));
+    if (ux * vy - uy * vx < 0) a = -a;
+    return a;
+  };
+  const theta1 = angle(1, 0, (x1p - cxp) / rxFixed, (y1p - cyp) / ryFixed);
+  let dTheta = angle(
+    (x1p - cxp) / rxFixed,
+    (y1p - cyp) / ryFixed,
+    (-x1p - cxp) / rxFixed,
+    (-y1p - cyp) / ryFixed
+  );
+  if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI;
+  else if (sweep && dTheta < 0) dTheta += 2 * Math.PI;
+  const segCount = Math.max(1, Math.ceil(Math.abs(dTheta) / (Math.PI / 2)));
+  const segAngle = dTheta / segCount;
+  const t = 4 / 3 * Math.tan(segAngle / 4);
+  let prevX = x1;
+  let prevY = y1;
+  let prevDx = -Math.sin(theta1) * rxFixed;
+  let prevDy = Math.cos(theta1) * ryFixed;
+  for (let i = 1; i <= segCount; i++) {
+    const theta = theta1 + i * segAngle;
+    const cosT = Math.cos(theta);
+    const sinT = Math.sin(theta);
+    const px = cosPhi * (cosT * rxFixed) - sinPhi * (sinT * ryFixed) + cx;
+    const py = sinPhi * (cosT * rxFixed) + cosPhi * (sinT * ryFixed) + cy;
+    const dxNew = -sinT * rxFixed;
+    const dyNew = cosT * ryFixed;
+    const c1x = prevX + cosPhi * (t * prevDx) - sinPhi * (t * prevDy);
+    const c1y = prevY + sinPhi * (t * prevDx) + cosPhi * (t * prevDy);
+    const c2x = px - cosPhi * (t * dxNew) + sinPhi * (t * dyNew);
+    const c2y = py - sinPhi * (t * dxNew) - cosPhi * (t * dyNew);
+    b.curveTo(c1x, c1y, c2x, c2y, px, py);
+    prevX = px;
+    prevY = py;
+    prevDx = dxNew;
+    prevDy = dyNew;
+  }
+}
+
+// src/renderer/cache/outlineMeshCache.ts
+var OUTLINE_FLATTEN_TOLERANCE = 1 / 4096;
+var OUTLINE_MESH_CACHE_LIMIT = 2048;
+var cache3 = /* @__PURE__ */ new Map();
+function outlineMesh(key, d) {
+  const cached = cache3.get(key);
+  if (cached !== void 0) return cached;
+  if (cache3.size >= OUTLINE_MESH_CACHE_LIMIT) cache3 = /* @__PURE__ */ new Map();
+  const mesh = tessellate(pathFromD(d), { flattenTolerance: OUTLINE_FLATTEN_TOLERANCE });
+  cache3.set(key, mesh);
+  return mesh;
+}
+
+// src/features/paths/tessellate/polyline.ts
+function extractPolylines(path, opts = {}) {
+  if (path.kind === "rect") return [extractRect(path)];
+  return extractPolygon(path, opts);
+}
+function extractRect(p) {
+  const { x, y, width: w, height: h } = p;
+  return {
+    points: [x, y, x + w, y, x + w, y + h, x, y + h],
+    closed: true,
+    anchorA: new Uint32Array([0, 1, 2, 3]),
+    anchorB: new Uint32Array([0, 1, 2, 3]),
+    anchorT: new Float32Array([0, 0, 0, 0])
+  };
+}
+function extractPolygon(p, opts) {
+  const tolerance = opts.flattenTolerance ?? DEFAULT_FLATTEN_TOLERANCE;
+  const { commands, coords } = p;
+  const out = [];
+  let anchorCounter = 0;
+  let pts = null;
+  let aA = null;
+  let aB = null;
+  let aT = null;
+  let current = null;
+  let coordIdx = 0;
+  let prevX = 0;
+  let prevY = 0;
+  let prevAnchor = -1;
+  const beginContour = () => {
+    pts = [];
+    aA = [];
+    aB = [];
+    aT = [];
+    const next = { points: pts, closed: false };
+    out.push(next);
+    return next;
+  };
+  const dropDuplicateClosingPoint = () => {
+    if (!pts || !aA || !aB || !aT) return;
+    const n = pts.length / 2;
+    if (n < 2) return;
+    if (pts[0] !== pts[(n - 1) * 2] || pts[1] !== pts[(n - 1) * 2 + 1]) return;
+    pts.length -= 2;
+    aA.length -= 1;
+    aB.length -= 1;
+    aT.length -= 1;
+  };
+  const commit = (target) => {
+    if (!pts || !aA || !aB || !aT) return;
+    target.anchorA = new Uint32Array(aA);
+    target.anchorB = new Uint32Array(aB);
+    target.anchorT = new Float32Array(aT);
+  };
+  for (let cmdIdx = 0; cmdIdx < commands.length; cmdIdx++) {
+    const cmd = commands[cmdIdx];
+    switch (cmd) {
+      case PATH_M: {
+        if (current) commit(current);
+        current = beginContour();
+        prevX = coords[coordIdx];
+        prevY = coords[coordIdx + 1];
+        pts.push(prevX, prevY);
+        aA.push(anchorCounter);
+        aB.push(anchorCounter);
+        aT.push(0);
+        prevAnchor = anchorCounter;
+        anchorCounter++;
+        coordIdx += 2;
+        break;
       }
-      const slack = finiteWidth - line.width;
-      return opts.align === "center" ? slack / 2 : slack;
-    })();
-    const lineX0 = origin.x + 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;
-    for (const e of line.entries) {
-      penX += e.kerningBefore;
-      const step = e.advance + e.tracking;
-      const scale2 = e.fontSize / e.font.info.size;
-      const baselineY = penY + e.font.common.base * scale2;
-      if (e.run.underline || e.run.strikethrough) {
-        if (span !== null && span.underline === e.run.underline && span.strikethrough === e.run.strikethrough && span.fontSize === e.fontSize && span.baselineY === baselineY && sameFill(span.fill, e.run.fill)) {
-          span.x1 = penX + step;
-        } else {
-          flushSpan();
-          span = {
-            underline: e.run.underline,
-            strikethrough: e.run.strikethrough,
-            fill: e.run.fill,
-            fontSize: e.fontSize,
-            baselineY,
-            x0: penX,
-            x1: penX + step
-          };
+      case PATH_L: {
+        prevX = coords[coordIdx];
+        prevY = coords[coordIdx + 1];
+        pts.push(prevX, prevY);
+        aA.push(anchorCounter);
+        aB.push(anchorCounter);
+        aT.push(0);
+        prevAnchor = anchorCounter;
+        anchorCounter++;
+        coordIdx += 2;
+        break;
+      }
+      case PATH_Q: {
+        const cx = coords[coordIdx], cy = coords[coordIdx + 1];
+        const ex = coords[coordIdx + 2], ey = coords[coordIdx + 3];
+        const targetAnchor = anchorCounter;
+        const segStart = pts.length / 2;
+        const arcAccum = [];
+        const total = flattenQuadraticWithArcLen(prevX, prevY, cx, cy, ex, ey, tolerance, pts, arcAccum);
+        for (let k = 0; k < arcAccum.length; k++) {
+          aA.push(prevAnchor);
+          aB.push(targetAnchor);
+          aT.push(total > 0 ? arcAccum[k] / total : 0);
         }
-      } else {
-        flushSpan();
+        const lastIdx = segStart + arcAccum.length - 1;
+        aA[lastIdx] = targetAnchor;
+        aB[lastIdx] = targetAnchor;
+        aT[lastIdx] = 0;
+        prevX = ex;
+        prevY = ey;
+        prevAnchor = targetAnchor;
+        anchorCounter++;
+        coordIdx += 4;
+        break;
       }
-      const outlineD = outlineFor(e);
-      if (outlineD !== null) {
-        const group2 = getOrCreateGroup(ctx, e.run, e.resolved, 0, "outline");
-        group2.glyphs.push({
-          d: outlineD,
-          key: `${e.resolved.resolved.family}|${e.resolved.resolved.weight}|${e.resolved.resolved.style}|${e.cp}`,
-          x: penX,
-          baselineY,
-          // Em space is unit-scale, so world units per em is just the size.
-          scale: e.fontSize
-        });
-        penX += step;
-        continue;
+      case PATH_C: {
+        const c1x = coords[coordIdx], c1y = coords[coordIdx + 1];
+        const c2x = coords[coordIdx + 2], c2y = coords[coordIdx + 3];
+        const ex = coords[coordIdx + 4], ey = coords[coordIdx + 5];
+        const targetAnchor = anchorCounter;
+        const segStart = pts.length / 2;
+        const arcAccum = [];
+        const total = flattenCubicWithArcLen(prevX, prevY, c1x, c1y, c2x, c2y, ex, ey, tolerance, pts, arcAccum);
+        for (let k = 0; k < arcAccum.length; k++) {
+          aA.push(prevAnchor);
+          aB.push(targetAnchor);
+          aT.push(total > 0 ? arcAccum[k] / total : 0);
+        }
+        const lastIdx = segStart + arcAccum.length - 1;
+        aA[lastIdx] = targetAnchor;
+        aB[lastIdx] = targetAnchor;
+        aT[lastIdx] = 0;
+        prevX = ex;
+        prevY = ey;
+        prevAnchor = targetAnchor;
+        anchorCounter++;
+        coordIdx += 6;
+        break;
       }
-      if (e.advance === 0 || e.glyph.width === 0 || e.glyph.page < 0) {
-        penX += step;
-        continue;
+      case PATH_Z: {
+        if (current) {
+          current.closed = true;
+          dropDuplicateClosingPoint();
+        }
+        break;
       }
-      const group = getOrCreateGroup(ctx, e.run, e.resolved, e.glyph.page);
-      const atlasW = e.font.common.scaleW;
-      const atlasH = e.font.common.scaleH;
-      const qx0 = penX + e.glyph.xoffset * scale2;
-      const qy0 = penY + e.glyph.yoffset * scale2;
-      const qx1 = qx0 + e.glyph.width * scale2;
-      const qy1 = qy0 + e.glyph.height * scale2;
-      const u0 = e.glyph.x / atlasW;
-      const v0 = e.glyph.y / atlasH;
-      const u1 = (e.glyph.x + e.glyph.width) / atlasW;
-      const v1 = (e.glyph.y + e.glyph.height) / atlasH;
-      group.quads.push({ x0: qx0, y0: qy0, x1: qx1, y1: qy1, u0, v0, u1, v1, baselineY });
-      penX += step;
+      default:
+        throw new Error(`extractPolylines: unknown command code ${cmd}`);
+    }
+  }
+  if (current) commit(current);
+  return out;
+}
+
+// src/features/paths/tessellate/stroke.ts
+var EMPTY_MESH = {
+  vertices: new Float32Array(0),
+  indices: new Uint32Array(0),
+  anchorA: new Uint32Array(0),
+  anchorB: new Uint32Array(0),
+  anchorT: new Float32Array(0)
+};
+function tessellateStroke(path, stroke, opts = {}) {
+  const width = stroke.width ?? 1;
+  if (width <= 0) return EMPTY_MESH;
+  const join = stroke.join ?? "miter";
+  const cap = stroke.cap ?? "butt";
+  const align = stroke.align ?? "center";
+  const miterLimit = stroke.miterLimit ?? DEFAULT_MITER_LIMIT;
+  const varyingThreshold = stroke.varyingWidthJoinThreshold ?? DEFAULT_VARYING_WIDTH_JOIN_THRESHOLD;
+  let workingPath = path;
+  if (path.kind === "rect" && align !== "center") {
+    const aligned = alignedStrokeRect(path, align, width);
+    workingPath = {
+      kind: "rect",
+      x: aligned.x,
+      y: aligned.y,
+      width: aligned.width,
+      height: aligned.height
+    };
+  }
+  const polylines = extractPolylines(workingPath, opts);
+  if (stroke.vertexWidths && stroke.vertexWidths.length > 0) {
+    for (const pl of polylines) populatePolylineWidths(pl, stroke.vertexWidths, width);
+  }
+  const dash = stroke.dash ?? [];
+  const verts = [];
+  const idx = [];
+  const anchorA = [];
+  const anchorB = [];
+  const anchorT = [];
+  for (const pl of polylines) {
+    const subs = dash.length > 0 ? splitForDash(pl, dash) : [pl];
+    for (const sub2 of subs) {
+      expandPolyline(sub2, width, join, cap, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT);
     }
-    flushSpan();
-    lineBoxes.push({
-      x0: lineX0,
-      y0: penY,
-      x1: lineX0 + line.width,
-      y1: penY + line.height,
-      baselineY: lineBaselineY
-    });
-    maxLineWidth = Math.max(maxLineWidth, line.width);
-    penY += line.height;
   }
   return {
-    groups: [...ctx.groups.values()],
-    decorations,
-    lines: lineBoxes,
-    bounds: { width: maxLineWidth, height: penY - origin.y }
+    vertices: new Float32Array(verts),
+    indices: new Uint32Array(idx),
+    anchorA: new Uint32Array(anchorA),
+    anchorB: new Uint32Array(anchorB),
+    anchorT: new Float32Array(anchorT)
   };
 }
-var LAYOUT_CACHE_VARIANT_LIMIT = 8;
-var cache2 = /* @__PURE__ */ new WeakMap();
-function outlineBucket(runs, min) {
-  if (min === void 0) return -1;
-  const sizes = /* @__PURE__ */ new Set();
-  for (const r of runs) sizes.add(r.fontSize);
-  let n = 0;
-  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 cachedLayoutRuns(runs, opts, origin) {
-  const fonts = glyphGeneration();
-  let entry = cache2.get(runs);
-  if (entry === void 0) {
-    entry = { generation: fonts, byVariant: /* @__PURE__ */ new Map() };
-    cache2.set(runs, entry);
-  } else if (entry.generation !== fonts) {
-    entry.generation = fonts;
-    entry.byVariant.clear();
+function expandPolyline(pl, width, join, cap, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT) {
+  const half = width / 2;
+  const pts = pl.points;
+  const ptCount = pts.length / 2;
+  const segCount = ptCount - 1;
+  if (segCount < 1) return;
+  const plA = pl.anchorA ?? new Uint32Array(ptCount);
+  const plB = pl.anchorB ?? new Uint32Array(ptCount);
+  const plT = pl.anchorT ?? new Float32Array(ptCount);
+  const plHalf = pl.widths ? pl.widths.map((w) => w / 2) : null;
+  const segs = [];
+  const segSrcIdx = [];
+  for (let s = 0; s < segCount; s++) {
+    const ha = plHalf ? plHalf[s] : half;
+    const hb = plHalf ? plHalf[s + 1] : half;
+    const seg = makeSeg(pts[s * 2], pts[s * 2 + 1], pts[(s + 1) * 2], pts[(s + 1) * 2 + 1], ha, hb);
+    if (seg) {
+      segs.push(seg);
+      segSrcIdx.push(s);
+    }
   }
-  const key = variantKey(runs, opts, origin);
-  const hit = entry.byVariant.get(key);
-  if (hit !== void 0) return hit;
-  const laid = layoutRuns(runs, opts, origin);
-  if (entry.byVariant.size >= LAYOUT_CACHE_VARIANT_LIMIT) entry.byVariant.clear();
-  entry.byVariant.set(key, laid);
-  return laid;
-}
-
-// src/features/text/verticalAlign.ts
-function verticalAlignOffset(align, boxHeight, textHeight) {
-  if (align === void 0 || align === "top" || boxHeight === void 0) return 0;
-  const slack = boxHeight - textHeight;
-  return align === "center" ? slack / 2 : slack;
-}
-
-// src/features/paths/pathFromD.ts
-var NUM_RE = /[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g;
-function tokenize(d) {
-  const out = [];
-  let i = 0;
-  while (i < d.length) {
-    const ch = d[i];
-    if (/[A-Za-z]/.test(ch)) {
-      let j = i + 1;
-      while (j < d.length && !/[A-Za-z]/.test(d[j])) j++;
-      const argSlice = d.slice(i + 1, j);
-      out.push({ cmd: ch, args: readNumbers(argSlice) });
-      i = j;
-    } else {
-      i++;
+  let closerSrcIdx = -1;
+  if (pl.closed && segs.length >= 1) {
+    const last = segs[segs.length - 1];
+    const first = segs[0];
+    const haCloser = plHalf ? plHalf[ptCount - 1] : half;
+    const hbCloser = plHalf ? plHalf[0] : half;
+    const closer = makeSeg(last.bx, last.by, first.ax, first.ay, haCloser, hbCloser);
+    if (closer) {
+      segs.push(closer);
+      closerSrcIdx = ptCount - 1;
+      segSrcIdx.push(closerSrcIdx);
     }
   }
-  return out;
-}
-function readNumbers(s) {
-  const out = [];
-  let m;
-  NUM_RE.lastIndex = 0;
-  while ((m = NUM_RE.exec(s)) !== null) {
-    const n = Number(m[0]);
-    if (Number.isFinite(n)) out.push(n);
+  if (segs.length === 0) return;
+  const segBaseIdx = [];
+  for (let s = 0; s < segs.length; s++) {
+    const seg = segs[s];
+    const startSrc = segSrcIdx[s];
+    const endSrc = s === segs.length - 1 && pl.closed && closerSrcIdx >= 0 ? 0 : startSrc + 1;
+    const base = verts.length / 2;
+    segBaseIdx.push(base);
+    const nxA = seg.nxUnit * seg.halfA, nyA = seg.nyUnit * seg.halfA;
+    const nxB = seg.nxUnit * seg.halfB, nyB = seg.nyUnit * seg.halfB;
+    verts.push(seg.ax + nxA, seg.ay + nyA);
+    anchorA.push(plA[startSrc]);
+    anchorB.push(plB[startSrc]);
+    anchorT.push(plT[startSrc]);
+    verts.push(seg.ax - nxA, seg.ay - nyA);
+    anchorA.push(plA[startSrc]);
+    anchorB.push(plB[startSrc]);
+    anchorT.push(plT[startSrc]);
+    verts.push(seg.bx + nxB, seg.by + nyB);
+    anchorA.push(plA[endSrc]);
+    anchorB.push(plB[endSrc]);
+    anchorT.push(plT[endSrc]);
+    verts.push(seg.bx - nxB, seg.by - nyB);
+    anchorA.push(plA[endSrc]);
+    anchorB.push(plB[endSrc]);
+    anchorT.push(plT[endSrc]);
+    idx.push(base, base + 1, base + 2, base + 1, base + 3, base + 2);
+  }
+  const joinCount = pl.closed ? segs.length : segs.length - 1;
+  for (let j = 0; j < joinCount; j++) {
+    emitJoin(segs, segBaseIdx, j, join, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT, segSrcIdx, plA, plB, plT);
+  }
+  if (!pl.closed && cap !== "butt") {
+    const first = segs[0];
+    const firstBase = segBaseIdx[0];
+    emitCap(first, firstBase + 0, firstBase + 1, false, first.halfA, cap, verts, idx, anchorA, anchorB, anchorT, plA[0], plB[0], plT[0]);
+    const last = segs[segs.length - 1];
+    const lastBase = segBaseIdx[segs.length - 1];
+    const lastSrc = segSrcIdx[segs.length - 1] + 1;
+    emitCap(last, lastBase + 2, lastBase + 3, true, last.halfB, cap, verts, idx, anchorA, anchorB, anchorT, plA[lastSrc], plB[lastSrc], plT[lastSrc]);
   }
-  return out;
 }
-var ARG_COUNTS = {
-  M: 2,
-  L: 2,
-  H: 1,
-  V: 1,
-  C: 6,
-  S: 4,
-  Q: 4,
-  T: 2,
-  A: 7,
-  Z: 0
-};
-function pathFromD(d, onWarn) {
-  const tokens = tokenize(d);
-  const b = new PathBuilder();
-  const st = {
-    x: 0,
-    y: 0,
-    startX: 0,
-    startY: 0,
-    lastCubicCtrl: null,
-    lastQuadCtrl: null
+function populatePolylineWidths(pl, vertexWidths, fallbackWidth) {
+  const ptCount = pl.points.length / 2;
+  if (ptCount === 0) return;
+  const aA = pl.anchorA ?? new Uint32Array(ptCount);
+  const aB = pl.anchorB ?? new Uint32Array(ptCount);
+  const aT = pl.anchorT ?? new Float32Array(ptCount);
+  const widths = new Float32Array(ptCount);
+  const read = (i) => {
+    const v = vertexWidths[i];
+    return typeof v === "number" && isFinite(v) && v > 0 ? v : fallbackWidth;
   };
-  for (const { cmd, args } of tokens) {
-    const upper = cmd.toUpperCase();
-    const relative = cmd !== upper;
-    const argCount = ARG_COUNTS[upper];
-    if (argCount === void 0) {
-      onWarn?.(`unknown path command: ${cmd}`);
-      continue;
-    }
-    if (upper === "Z") {
-      b.close();
-      st.x = st.startX;
-      st.y = st.startY;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
-      continue;
-    }
-    const groups = argCount === 0 ? 1 : Math.floor(args.length / argCount);
-    for (let g = 0; g < groups; g++) {
-      const a = args.slice(g * argCount, (g + 1) * argCount);
-      const effectiveUpper = upper === "M" && g > 0 ? "L" : upper;
-      runCommand(effectiveUpper, relative, a, st, b);
+  for (let i = 0; i < ptCount; i++) {
+    const a = aA[i], b = aB[i], t = aT[i];
+    if (a === b) {
+      widths[i] = read(a);
+    } else {
+      const wa = read(a);
+      const wb = read(b);
+      widths[i] = wa + (wb - wa) * t;
     }
   }
-  return b.build();
+  pl.widths = widths;
 }
-function runCommand(upper, relative, a, st, b) {
-  const rx = relative ? st.x : 0;
-  const ry = relative ? st.y : 0;
-  switch (upper) {
-    case "M": {
-      const x = a[0] + rx;
-      const y = a[1] + ry;
-      b.moveTo(x, y);
-      st.x = x;
-      st.y = y;
-      st.startX = x;
-      st.startY = y;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
-      return;
-    }
-    case "L": {
-      const x = a[0] + rx;
-      const y = a[1] + ry;
-      b.lineTo(x, y);
-      st.x = x;
-      st.y = y;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
-      return;
-    }
-    case "H": {
-      const x = a[0] + (relative ? st.x : 0);
-      b.lineTo(x, st.y);
-      st.x = x;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
-      return;
-    }
-    case "V": {
-      const y = a[0] + (relative ? st.y : 0);
-      b.lineTo(st.x, y);
-      st.y = y;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
-      return;
+var ROUND_CAP_STEP_RAD = 10 * Math.PI / 180;
+function emitCap(seg, leftIdx, rightIdx, atEnd, half, cap, verts, idx, anchorA, anchorB, anchorT, endA, endB, endT) {
+  const sign = atEnd ? 1 : -1;
+  const dx = (seg.bx - seg.ax) / seg.len * sign;
+  const dy = (seg.by - seg.ay) / seg.len * sign;
+  const cx = atEnd ? seg.bx : seg.ax;
+  const cy = atEnd ? seg.by : seg.ay;
+  const nx = seg.nxUnit * half;
+  const ny = seg.nyUnit * half;
+  if (cap === "square") {
+    const ox = cx + dx * half;
+    const oy = cy + dy * half;
+    const lOut = verts.length / 2;
+    verts.push(ox + nx, oy + ny);
+    anchorA.push(endA);
+    anchorB.push(endB);
+    anchorT.push(endT);
+    const rOut = verts.length / 2;
+    verts.push(ox - nx, oy - ny);
+    anchorA.push(endA);
+    anchorB.push(endB);
+    anchorT.push(endT);
+    if (atEnd) {
+      idx.push(leftIdx, lOut, rOut, leftIdx, rOut, rightIdx);
+    } else {
+      idx.push(leftIdx, rOut, lOut, leftIdx, rightIdx, rOut);
     }
-    case "C": {
-      const x1 = a[0] + rx, y1 = a[1] + ry;
-      const x2 = a[2] + rx, y2 = a[3] + ry;
-      const x = a[4] + rx, y = a[5] + ry;
-      b.curveTo(x1, y1, x2, y2, x, y);
-      st.x = x;
-      st.y = y;
-      st.lastCubicCtrl = { x: x2, y: y2 };
-      st.lastQuadCtrl = null;
-      return;
+    return;
+  }
+  if (cap === "round") {
+    const pivotIdx = verts.length / 2;
+    verts.push(cx, cy);
+    anchorA.push(endA);
+    anchorB.push(endB);
+    anchorT.push(endT);
+    const startAngle = Math.atan2(ny, nx);
+    const sweep = atEnd ? -Math.PI : Math.PI;
+    const steps = Math.max(1, Math.ceil(Math.abs(sweep) / ROUND_CAP_STEP_RAD));
+    const stepAngle = sweep / steps;
+    let prevIdx = leftIdx;
+    for (let i = 1; i < steps; i++) {
+      const ang = startAngle + i * stepAngle;
+      const fx = cx + Math.cos(ang) * half;
+      const fy = cy + Math.sin(ang) * half;
+      const newIdx = verts.length / 2;
+      verts.push(fx, fy);
+      anchorA.push(endA);
+      anchorB.push(endB);
+      anchorT.push(endT);
+      if (atEnd) idx.push(prevIdx, newIdx, pivotIdx);
+      else idx.push(prevIdx, pivotIdx, newIdx);
+      prevIdx = newIdx;
     }
-    case "S": {
-      const ref = st.lastCubicCtrl ?? { x: st.x, y: st.y };
-      const x1 = 2 * st.x - ref.x;
-      const y1 = 2 * st.y - ref.y;
-      const x2 = a[0] + rx, y2 = a[1] + ry;
-      const x = a[2] + rx, y = a[3] + ry;
-      b.curveTo(x1, y1, x2, y2, x, y);
-      st.x = x;
-      st.y = y;
-      st.lastCubicCtrl = { x: x2, y: y2 };
-      st.lastQuadCtrl = null;
-      return;
+    if (atEnd) idx.push(prevIdx, rightIdx, pivotIdx);
+    else idx.push(prevIdx, pivotIdx, rightIdx);
+  }
+}
+function splitForDash(pl, dash) {
+  const out = [];
+  const plA = pl.anchorA ?? new Uint32Array(pl.points.length / 2);
+  const plB = pl.anchorB ?? new Uint32Array(pl.points.length / 2);
+  const plT = pl.anchorT ?? new Float32Array(pl.points.length / 2);
+  let dashIdx = 0;
+  let dashRemaining = dash[0];
+  let onPhase = true;
+  let curPts = onPhase ? [pl.points[0], pl.points[1]] : null;
+  let curA = onPhase ? [plA[0]] : null;
+  let curB = onPhase ? [plB[0]] : null;
+  let curT = onPhase ? [plT[0]] : null;
+  const flushAndAdvance = () => {
+    if (curPts && curPts.length >= 4) {
+      out.push({
+        points: curPts,
+        closed: false,
+        anchorA: new Uint32Array(curA),
+        anchorB: new Uint32Array(curB),
+        anchorT: new Float32Array(curT)
+      });
     }
-    case "Q": {
-      const x1 = a[0] + rx, y1 = a[1] + ry;
-      const x = a[2] + rx, y = a[3] + ry;
-      b.quadTo(x1, y1, x, y);
-      st.x = x;
-      st.y = y;
-      st.lastQuadCtrl = { x: x1, y: y1 };
-      st.lastCubicCtrl = null;
-      return;
+    curPts = null;
+    curA = null;
+    curB = null;
+    curT = null;
+    dashIdx = (dashIdx + 1) % dash.length;
+    dashRemaining = dash[dashIdx];
+    onPhase = !onPhase;
+  };
+  let prevX = pl.points[0], prevY = pl.points[1];
+  const ptCount = pl.points.length / 2;
+  const segCount = pl.closed ? ptCount : ptCount - 1;
+  for (let i = 0; i < segCount; i++) {
+    const nextIdx = (i + 1) % ptCount;
+    const cx = pl.points[nextIdx * 2], cy = pl.points[nextIdx * 2 + 1];
+    const startA = plA[i], startB = plB[i], startT = plT[i];
+    const endA = plA[nextIdx], endB = plB[nextIdx], endT = plT[nextIdx];
+    const segFullDx = cx - prevX, segFullDy = cy - prevY;
+    const segFullLen = Math.hypot(segFullDx, segFullDy);
+    let segDx = segFullDx, segDy = segFullDy;
+    let segLen = segFullLen;
+    let traveled = 0;
+    while (segLen > 1e-9) {
+      if (segLen <= dashRemaining) {
+        if (onPhase && curPts) {
+          curPts.push(cx, cy);
+          curA.push(endA);
+          curB.push(endB);
+          curT.push(endT);
+        }
+        dashRemaining -= segLen;
+        prevX = cx;
+        prevY = cy;
+        traveled = segFullLen;
+        segLen = 0;
+        if (dashRemaining <= 1e-9) {
+          flushAndAdvance();
+          if (onPhase) {
+            curPts = [prevX, prevY];
+            curA = [endA];
+            curB = [endB];
+            curT = [endT];
+          }
+        }
+      } else {
+        const tConsume = dashRemaining / segLen;
+        const ix = prevX + segDx * tConsume;
+        const iy = prevY + segDy * tConsume;
+        traveled += dashRemaining;
+        const frac = traveled / segFullLen;
+        let mA, mB, mT;
+        if (startA === endA && startB === endB) {
+          mA = startA;
+          mB = startB;
+          mT = startT + (endT - startT) * frac;
+        } else {
+          if (frac < 0.5) {
+            mA = startA;
+            mB = startB;
+            mT = startT;
+          } else {
+            mA = endA;
+            mB = endB;
+            mT = endT;
+          }
+        }
+        if (onPhase && curPts) {
+          curPts.push(ix, iy);
+          curA.push(mA);
+          curB.push(mB);
+          curT.push(mT);
+        }
+        prevX = ix;
+        prevY = iy;
+        segDx = cx - prevX;
+        segDy = cy - prevY;
+        segLen = Math.hypot(segDx, segDy);
+        flushAndAdvance();
+        if (onPhase) {
+          curPts = [prevX, prevY];
+          curA = [mA];
+          curB = [mB];
+          curT = [mT];
+        }
+      }
     }
-    case "T": {
-      const ref = st.lastQuadCtrl ?? { x: st.x, y: st.y };
-      const x1 = 2 * st.x - ref.x;
-      const y1 = 2 * st.y - ref.y;
-      const x = a[0] + rx, y = a[1] + ry;
-      b.quadTo(x1, y1, x, y);
-      st.x = x;
-      st.y = y;
-      st.lastQuadCtrl = { x: x1, y: y1 };
-      st.lastCubicCtrl = null;
+  }
+  if (curPts && curPts.length >= 4) {
+    out.push({
+      points: curPts,
+      closed: false,
+      anchorA: new Uint32Array(curA),
+      anchorB: new Uint32Array(curB),
+      anchorT: new Float32Array(curT)
+    });
+  }
+  return out;
+}
+function makeSeg(ax, ay, bx, by, halfA, halfB) {
+  const dx = bx - ax, dy = by - ay;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return null;
+  return {
+    ax,
+    ay,
+    bx,
+    by,
+    nxUnit: -dy / len,
+    nyUnit: dx / len,
+    halfA,
+    halfB,
+    len
+  };
+}
+var DEFAULT_MITER_LIMIT = 10;
+var DEFAULT_VARYING_WIDTH_JOIN_THRESHOLD = 1.5;
+function emitJoin(segs, segBaseIdx, j, join, miterLimit, varyingThreshold, verts, idx, anchorA, anchorB, anchorT, segSrcIdx, plA, plB, plT) {
+  const a = segs[j];
+  const b = segs[(j + 1) % segs.length];
+  const aBase = segBaseIdx[j];
+  const bBase = segBaseIdx[(j + 1) % segs.length];
+  const adx = a.bx - a.ax, ady = a.by - a.ay;
+  const bdx = b.bx - b.ax, bdy = b.by - b.ay;
+  const cross = adx * bdy - ady * bdx;
+  if (cross === 0) return;
+  const onPositive = cross > 0;
+  const aOuterEnd = onPositive ? aBase + 3 : aBase + 2;
+  const bOuterStart = onPositive ? bBase + 1 : bBase + 0;
+  const nextSeg = (j + 1) % segs.length;
+  const cornerSrc = segSrcIdx[nextSeg];
+  const cornerA = plA[cornerSrc];
+  const cornerB = plB[cornerSrc];
+  const cornerT = plT[cornerSrc];
+  const halfAtCorner = a.halfB;
+  const taperA = Math.max(a.halfA, a.halfB) / Math.max(1e-9, Math.min(a.halfA, a.halfB));
+  const taperB = Math.max(b.halfA, b.halfB) / Math.max(1e-9, Math.min(b.halfA, b.halfB));
+  const forceBevelForVarying = taperA > varyingThreshold || taperB > varyingThreshold;
+  if (join === "bevel" || forceBevelForVarying) {
+    emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
+    return;
+  }
+  if (join === "miter") {
+    const aOX = verts[aOuterEnd * 2], aOY = verts[aOuterEnd * 2 + 1];
+    const bOX = verts[bOuterStart * 2], bOY = verts[bOuterStart * 2 + 1];
+    const apex = lineLineIntersect(aOX, aOY, adx, ady, bOX, bOY, -bdx, -bdy);
+    if (!apex) {
+      emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
       return;
     }
-    case "A": {
-      const rxA = Math.abs(a[0]);
-      const ryA = Math.abs(a[1]);
-      const xRot = a[2];
-      const largeArc = a[3] !== 0;
-      const sweep = a[4] !== 0;
-      const ex = a[5] + rx;
-      const ey = a[6] + ry;
-      arcToCubics(st.x, st.y, ex, ey, rxA, ryA, xRot, largeArc, sweep, b);
-      st.x = ex;
-      st.y = ey;
-      st.lastCubicCtrl = null;
-      st.lastQuadCtrl = null;
+    const miterLen = Math.hypot(apex[0] - a.bx, apex[1] - a.by);
+    if (miterLen > miterLimit * halfAtCorner) {
+      emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
       return;
     }
-    default:
-      return;
-  }
-}
-function arcToCubics(x1, y1, x2, y2, rx, ry, xAxisRotationDeg, largeArc, sweep, b) {
-  if (x1 === x2 && y1 === y2) return;
-  if (rx === 0 || ry === 0) {
-    b.lineTo(x2, y2);
+    const apexIdx = verts.length / 2;
+    verts.push(apex[0], apex[1]);
+    anchorA.push(cornerA);
+    anchorB.push(cornerB);
+    anchorT.push(cornerT);
+    const jIdx = verts.length / 2;
+    verts.push(a.bx, a.by);
+    anchorA.push(cornerA);
+    anchorB.push(cornerB);
+    anchorT.push(cornerT);
+    if (onPositive) {
+      idx.push(aOuterEnd, apexIdx, bOuterStart);
+      idx.push(aOuterEnd, bOuterStart, jIdx);
+    } else {
+      idx.push(aOuterEnd, bOuterStart, apexIdx);
+      idx.push(aOuterEnd, jIdx, bOuterStart);
+    }
     return;
   }
-  const phi = xAxisRotationDeg * Math.PI / 180;
-  const cosPhi = Math.cos(phi);
-  const sinPhi = Math.sin(phi);
-  const dx = (x1 - x2) / 2;
-  const dy = (y1 - y2) / 2;
-  const x1p = cosPhi * dx + sinPhi * dy;
-  const y1p = -sinPhi * dx + cosPhi * dy;
-  let rxs = rx * rx;
-  let rys = ry * ry;
-  const x1ps = x1p * x1p;
-  const y1ps = y1p * y1p;
-  const lambda = x1ps / rxs + y1ps / rys;
-  let rxFixed = rx;
-  let ryFixed = ry;
-  if (lambda > 1) {
-    const sqrtLambda = Math.sqrt(lambda);
-    rxFixed = sqrtLambda * rx;
-    ryFixed = sqrtLambda * ry;
-    rxs = rxFixed * rxFixed;
-    rys = ryFixed * ryFixed;
+  if (join === "round") {
+    emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
+    return;
   }
-  const sign = largeArc === sweep ? -1 : 1;
-  const num = rxs * rys - rxs * y1ps - rys * x1ps;
-  const den = rxs * y1ps + rys * x1ps;
-  const factor = sign * Math.sqrt(Math.max(0, num / den));
-  const cxp = factor * (rxFixed * y1p) / ryFixed;
-  const cyp = factor * -(ryFixed * x1p) / rxFixed;
-  const cx = cosPhi * cxp - sinPhi * cyp + (x1 + x2) / 2;
-  const cy = sinPhi * cxp + cosPhi * cyp + (y1 + y2) / 2;
-  const angle = (ux, uy, vx, vy) => {
-    const dot = ux * vx + uy * vy;
-    const len = Math.sqrt((ux * ux + uy * uy) * (vx * vx + vy * vy));
-    let a = Math.acos(Math.max(-1, Math.min(1, dot / len)));
-    if (ux * vy - uy * vx < 0) a = -a;
-    return a;
-  };
-  const theta1 = angle(1, 0, (x1p - cxp) / rxFixed, (y1p - cyp) / ryFixed);
-  let dTheta = angle(
-    (x1p - cxp) / rxFixed,
-    (y1p - cyp) / ryFixed,
-    (-x1p - cxp) / rxFixed,
-    (-y1p - cyp) / ryFixed
-  );
-  if (!sweep && dTheta > 0) dTheta -= 2 * Math.PI;
-  else if (sweep && dTheta < 0) dTheta += 2 * Math.PI;
-  const segCount = Math.max(1, Math.ceil(Math.abs(dTheta) / (Math.PI / 2)));
-  const segAngle = dTheta / segCount;
-  const t = 4 / 3 * Math.tan(segAngle / 4);
-  let prevX = x1;
-  let prevY = y1;
-  let prevDx = -Math.sin(theta1) * rxFixed;
-  let prevDy = Math.cos(theta1) * ryFixed;
-  for (let i = 1; i <= segCount; i++) {
-    const theta = theta1 + i * segAngle;
-    const cosT = Math.cos(theta);
-    const sinT = Math.sin(theta);
-    const px = cosPhi * (cosT * rxFixed) - sinPhi * (sinT * ryFixed) + cx;
-    const py = sinPhi * (cosT * rxFixed) + cosPhi * (sinT * ryFixed) + cy;
-    const dxNew = -sinT * rxFixed;
-    const dyNew = cosT * ryFixed;
-    const c1x = prevX + cosPhi * (t * prevDx) - sinPhi * (t * prevDy);
-    const c1y = prevY + sinPhi * (t * prevDx) + cosPhi * (t * prevDy);
-    const c2x = px - cosPhi * (t * dxNew) + sinPhi * (t * dyNew);
-    const c2y = py - sinPhi * (t * dxNew) - cosPhi * (t * dyNew);
-    b.curveTo(c1x, c1y, c2x, c2y, px, py);
-    prevX = px;
-    prevY = py;
-    prevDx = dxNew;
-    prevDy = dyNew;
+}
+var ROUND_STEP_RAD = 10 * Math.PI / 180;
+function emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT) {
+  const cx = a.bx, cy = a.by;
+  const pivotIdx = verts.length / 2;
+  verts.push(cx, cy);
+  anchorA.push(cornerA);
+  anchorB.push(cornerB);
+  anchorT.push(cornerT);
+  const startX = verts[aOuterEnd * 2] - cx;
+  const startY = verts[aOuterEnd * 2 + 1] - cy;
+  const endX = verts[bOuterStart * 2] - cx;
+  const endY = verts[bOuterStart * 2 + 1] - cy;
+  const r = Math.hypot(startX, startY);
+  const startAngle = Math.atan2(startY, startX);
+  const endAngle = Math.atan2(endY, endX);
+  let sweep = endAngle - startAngle;
+  if (onPositive && sweep < 0) sweep += 2 * Math.PI;
+  else if (!onPositive && sweep > 0) sweep -= 2 * Math.PI;
+  const steps = Math.max(1, Math.ceil(Math.abs(sweep) / ROUND_STEP_RAD));
+  const stepAngle = sweep / steps;
+  let prevIdx = aOuterEnd;
+  for (let i = 1; i < steps; i++) {
+    const ang = startAngle + i * stepAngle;
+    const fx = cx + Math.cos(ang) * r;
+    const fy = cy + Math.sin(ang) * r;
+    const newIdx = verts.length / 2;
+    verts.push(fx, fy);
+    anchorA.push(cornerA);
+    anchorB.push(cornerB);
+    anchorT.push(cornerT);
+    if (onPositive) idx.push(prevIdx, pivotIdx, newIdx);
+    else idx.push(prevIdx, newIdx, pivotIdx);
+    prevIdx = newIdx;
   }
+  if (onPositive) idx.push(prevIdx, pivotIdx, bOuterStart);
+  else idx.push(prevIdx, bOuterStart, pivotIdx);
 }
-
-// src/renderer/cache/outlineMeshCache.ts
-var OUTLINE_FLATTEN_TOLERANCE = 1 / 4096;
-var OUTLINE_MESH_CACHE_LIMIT = 2048;
-var cache3 = /* @__PURE__ */ new Map();
-function outlineMesh(key, d) {
-  const cached = cache3.get(key);
-  if (cached !== void 0) return cached;
-  if (cache3.size >= OUTLINE_MESH_CACHE_LIMIT) cache3 = /* @__PURE__ */ new Map();
-  const mesh = tessellate(pathFromD(d), { flattenTolerance: OUTLINE_FLATTEN_TOLERANCE });
-  cache3.set(key, mesh);
-  return mesh;
+function emitBevel(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT) {
+  const jIdx = verts.length / 2;
+  verts.push(a.bx, a.by);
+  anchorA.push(cornerA);
+  anchorB.push(cornerB);
+  anchorT.push(cornerT);
+  if (onPositive) idx.push(aOuterEnd, jIdx, bOuterStart);
+  else idx.push(aOuterEnd, bOuterStart, jIdx);
+}
+function lineLineIntersect(apx, apy, adx, ady, bpx, bpy, bdx, bdy) {
+  const denom = adx * bdy - ady * bdx;
+  if (Math.abs(denom) < 1e-9) return null;
+  const t = ((bpx - apx) * bdy - (bpy - apy) * bdx) / denom;
+  return [apx + t * adx, apy + t * ady];
 }
 
 // src/renderer/cache/outlineStrokeMeshCache.ts
@@ -2827,26 +2842,299 @@ function outlineStrokeMesh(glyphKey, d, emWidth, stroke) {
   return mesh.indices.length === 0 ? null : mesh;
 }
 
+// src/renderer/cache/strokeMeshCache.ts
+var STROKE_CONFIGS_PER_PATH = 8;
+var cache5 = /* @__PURE__ */ new WeakMap();
+function configKey(stroke, flattenTolerance) {
+  return [
+    stroke.width ?? 1,
+    stroke.cap ?? "butt",
+    stroke.join ?? "miter",
+    stroke.miterLimit ?? "",
+    stroke.align ?? "center",
+    (stroke.dash ?? []).join(","),
+    stroke.varyingWidthJoinThreshold ?? "",
+    flattenTolerance ?? ""
+  ].join("|");
+}
+function strokeMesh(path, stroke, flattenTolerance) {
+  let byConfig = cache5.get(path);
+  if (byConfig === void 0) {
+    byConfig = /* @__PURE__ */ new Map();
+    cache5.set(path, byConfig);
+  }
+  const key = configKey(stroke, flattenTolerance);
+  const entry = byConfig.get(key);
+  if (entry !== void 0 && entry.vertexWidths === stroke.vertexWidths) {
+    return entry.mesh;
+  }
+  const mesh = tessellateStroke(path, stroke, { flattenTolerance });
+  if (entry === void 0 && byConfig.size >= STROKE_CONFIGS_PER_PATH) byConfig.clear();
+  byConfig.set(key, { mesh, vertexWidths: stroke.vertexWidths });
+  return 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 +3143,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);
   }
 }
@@ -2998,40 +3289,106 @@ function drawGroup(ctx, cmd) {
   ctx.state.pop();
 }
 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);
-    } 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);
-      } else {
-        drawPathFillByKind(ctx, cmd.fill, handle);
-      }
-    }
+  if (cmd.fill) drawPathFill(ctx, cmd);
+  if (cmd.stroke) drawPathStroke(ctx, cmd);
+}
+function drawPathFill(ctx, cmd) {
+  const fill = cmd.fill;
+  const isSolid = fill.fill === void 0 || fill.fill === "solid";
+  const hasVColors = !!(cmd.vertexColors && cmd.vertexColors.length > 0);
+  const solid = fill;
+  if (isSolid && !hasVColors && cmd.path.kind === "rect") {
+    pushRect(ctx, cmd.path, solid);
+    return;
+  }
+  const mesh = fillMesh(ctx, cmd.path);
+  if (tryStageSolid(ctx, mesh, isSolid && !hasVColors ? solid : void 0)) return;
+  const handle = meshHandle(ctx, mesh);
+  if (isSolid && hasVColors) {
+    drawPathFillVColor(ctx, cmd, solid, handle);
+  } else if (handle.requiresStencil) {
+    drawPathFillStencil(ctx, fill, handle);
+  } else {
+    drawPathFillByKind(ctx, fill, handle);
+  }
+}
+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
+    };
   }
-  if (cmd.stroke) {
-    drawPathStroke(ctx, cmd);
+  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 tryStageSolid(ctx, mesh, paint) {
+  if (paint !== void 0 && canBatchMesh(mesh)) {
+    pushMesh(ctx, mesh, paint);
+    return true;
   }
+  flushSolids(ctx);
+  return false;
 }
-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 +3433,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 +3551,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;
@@ -3212,6 +3575,7 @@ function rasterizePathToStencil(ctx, path) {
   gl.bindVertexArray(null);
 }
 function pushClip(ctx, path, newDepth) {
+  flushSolids(ctx);
   const gl = ctx.gl;
   const ancestors = ancestorMask(newDepth - 1);
   const newBit = 1 << newDepth;
@@ -3226,6 +3590,7 @@ function pushClip(ctx, path, newDepth) {
   gl.stencilMask(255);
 }
 function popClip(ctx, path, oldDepth) {
+  flushSolids(ctx);
   const gl = ctx.gl;
   gl.enable(gl.STENCIL_TEST);
   const oldBit = 1 << oldDepth + 1;
@@ -3273,6 +3638,7 @@ function drawPathStroke(ctx, cmd) {
   }
   const align = stroke.align ?? "center";
   if (cmd.path.kind === "polygon" && align !== "center") {
+    flushSolids(ctx);
     drawPathStrokeStenciled(ctx, cmd, align);
     return;
   }
@@ -3281,11 +3647,13 @@ function drawPathStroke(ctx, cmd) {
 function drawPathStrokeUnclipped(ctx, cmd) {
   const stroke = cmd.stroke;
   const solid = stroke.paint;
-  const mesh = tessellateStroke(cmd.path, stroke, { flattenTolerance: ctx.flattenTolerance });
+  const mesh = strokeMesh(cmd.path, stroke, ctx.flattenTolerance);
   if (mesh.indices.length === 0) return;
-  const handle = ctx.meshCache.uploadTransient(mesh);
+  const hasVColors = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
+  if (tryStageSolid(ctx, mesh, hasVColors ? void 0 : solid)) return;
+  const handle = hasVColors ? ctx.meshCache.uploadTransient(mesh) : ctx.meshCache.uploadRecurring(mesh);
   const gl = ctx.gl;
-  if (stroke.vertexColors && stroke.vertexColors.length > 0) {
+  if (hasVColors) {
     const prog = ctx.pathFillVColor;
     gl.useProgram(prog.handle);
     gl.bindVertexArray(handle.vao);
@@ -3316,16 +3684,30 @@ function drawPathStrokeUnclipped(ctx, cmd) {
   gl.drawElements(gl.TRIANGLES, handle.indexCount, gl.UNSIGNED_INT, 0);
   gl.bindVertexArray(null);
 }
+var DOUBLED_VERTEX_WIDTHS = /* @__PURE__ */ new WeakMap();
+function doubledVertexWidths(widths) {
+  let doubled = DOUBLED_VERTEX_WIDTHS.get(widths);
+  if (doubled === void 0) {
+    doubled = widths.map((w) => w * 2);
+    DOUBLED_VERTEX_WIDTHS.set(widths, doubled);
+  }
+  return doubled;
+}
 function drawPathStrokeStenciled(ctx, cmd, align) {
   const stroke = cmd.stroke;
   const solid = stroke.paint;
-  const widerStroke = { ...stroke, width: (stroke.width ?? 1) * 2, align: "center" };
+  const widerStroke = {
+    ...stroke,
+    width: (stroke.width ?? 1) * 2,
+    ...stroke.vertexWidths ? { vertexWidths: doubledVertexWidths(stroke.vertexWidths) } : {},
+    align: "center"
+  };
+  const useVColor = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
   const fillHandle = fillMeshHandle(ctx, cmd.path);
-  const ribbonMesh = tessellateStroke(cmd.path, widerStroke, { flattenTolerance: ctx.flattenTolerance });
+  const ribbonMesh = strokeMesh(cmd.path, widerStroke, ctx.flattenTolerance);
   if (ribbonMesh.indices.length === 0) return;
-  const ribbonHandle = ctx.meshCache.uploadTransient(ribbonMesh);
+  const ribbonHandle = useVColor ? ctx.meshCache.uploadTransient(ribbonMesh) : ctx.meshCache.uploadRecurring(ribbonMesh);
   const gl = ctx.gl;
-  const useVColor = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
   const prog = useVColor ? ctx.pathFillVColor : ctx.pathFill;
   gl.useProgram(prog.handle);
   setProjAndModel(ctx, prog);
@@ -3361,11 +3743,11 @@ function drawPathStrokeStenciled(ctx, cmd, align) {
     }
   }
   gl.drawElements(gl.TRIANGLES, ribbonHandle.indexCount, gl.UNSIGNED_INT, 0);
-  if (colorVbo) gl.deleteBuffer(colorVbo);
   gl.stencilMask(1);
   gl.clear(gl.STENCIL_BUFFER_BIT);
   gl.disable(gl.STENCIL_TEST);
   gl.bindVertexArray(null);
+  if (colorVbo) gl.deleteBuffer(colorVbo);
 }
 var OUTLINE_MIN_SCREEN_PX = 48;
 function modelScale(m) {
@@ -3380,20 +3762,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 +3787,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);
-  if (strokeMesh) {
-    drawPathFillByKind(ctx, group.stroke.paint, ctx.meshCache.uploadTransient(strokeMesh));
+  const ribbon = outlineGroupStrokeMesh(group, dx, dy);
+  if (ribbon) {
+    drawPathFillByKind(ctx, group.stroke.paint, ctx.meshCache.uploadTransient(ribbon));
   }
 }
-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 +3834,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 +3842,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 +3865,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 +3912,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 +3923,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;
@@ -3757,16 +4138,28 @@ function registerProgram(id, vert, frag) {
 }
 
 // src/renderer/WeaselRenderer.ts
+var UNIFORM_QUALIFIER = /^(?:lowp|mediump|highp|precise|invariant|centroid|flat|smooth|noperspective)$/;
 function extractUniformNames(glsl) {
-  const reScalar = /\buniform\s+\S+\s+(\w+)\s*;/g;
-  const reArray = /\buniform\s+\S+\s+(\w+)\s*\[\s*(\d+)\s*\]\s*;/g;
+  const re = /\buniform\s+([^;{]+);/g;
   const names = [];
   let m;
-  while ((m = reScalar.exec(glsl)) !== null) names.push(m[1]);
-  while ((m = reArray.exec(glsl)) !== null) {
-    const name = m[1];
-    const size = parseInt(m[2], 10);
-    for (let i = 0; i < size; i++) names.push(`${name}[${i}]`);
+  while ((m = re.exec(glsl)) !== null) {
+    const words = m[1].trim().split(/\s+/);
+    let i = 0;
+    while (i < words.length && UNIFORM_QUALIFIER.test(words[i])) i++;
+    i++;
+    const declarators = words.slice(i).join(" ");
+    if (!declarators) continue;
+    for (const raw of declarators.split(",")) {
+      const d = raw.trim();
+      const arr = /^(\w+)\s*\[\s*(\d+)\s*\]$/.exec(d);
+      if (arr) {
+        const size = parseInt(arr[2], 10);
+        for (let k = 0; k < size; k++) names.push(`${arr[1]}[${k}]`);
+      } else if (/^\w+$/.test(d)) {
+        names.push(d);
+      }
+    }
   }
   return names;
 }
@@ -3786,10 +4179,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 +4254,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 +4342,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 +4402,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 +4435,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 +4445,7 @@ var WeaselRenderer = class {
       viewMatrix
     };
     for (const cmd of commands) dispatch(ctx, cmd);
+    flushSolids(ctx);
     this.meshCache.freeTransient();
   }
   resize(dims) {
@@ -4111,6 +4475,10 @@ var WeaselRenderer = class {
     return this.pathFillVColor;
   }
   /** @internal */
+  _solidBatch() {
+    return this.solidBatch;
+  }
+  /** @internal */
   _textSdf() {
     return this.textSdf;
   }
@@ -4320,6 +4688,14 @@ function createViewportLayer(opts) {
     id,
     label,
     space: "screen",
+    reproject(outer, dims, screen) {
+      const b = bounds(outer, dims);
+      if (screen.x < b.x || screen.x >= b.x + b.w || screen.y < b.y || screen.y >= b.y + b.h) return null;
+      return {
+        x: (screen.x - b.x) / view.scale.x + view.x,
+        y: (screen.y - b.y) / view.scale.y + view.y
+      };
+    },
     draw: (data, outerView, dims) => {
       const b = bounds(outerView, dims);
       const children = [];
@@ -4346,6 +4722,14 @@ function createViewportLayer(opts) {
     }
   };
 }
+function viewportsAt(layers, outer, dims, screen) {
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const layer = layers[i];
+    const point = layer.reproject(outer, dims, screen);
+    if (point) return { layer, point };
+  }
+  return null;
+}
 
 // src/features/parallax/deriveParallaxView.ts
 function asXY(v) {
@@ -5380,12 +5764,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,
@@ -5484,6 +5863,12 @@ function runLayoutPass(scratch, moveCtx) {
     if (layout2.contains) return layout2.contains(cPose, draggedCenter);
     return draggedCenter.x >= aabb.x && draggedCenter.x < aabb.x + aabb.width && draggedCenter.y >= aabb.y && draggedCenter.y < aabb.y + aabb.height;
   };
+  const draggedArg = {
+    id: draggedId,
+    originPose: startWorld,
+    pose: draggedWorld,
+    sourceContainerId
+  };
   const consider = (id, zPath) => {
     if (id === draggedId) return;
     const layout2 = layoutDep.getLayout(id);
@@ -5493,6 +5878,7 @@ function runLayoutPass(scratch, moveCtx) {
     const worldPose = composeWorldPose(poseAdapter, id, pc.compose);
     const worldAABB = boundsOf2(worldPose);
     if (!testInside(worldPose, worldAABB, layout2)) return;
+    if (layout2.acceptsDrop && !layout2.acceptsDrop({ id, bounds: worldAABB }, draggedArg)) return;
     candidates.push({
       id,
       bounds: worldAABB,
@@ -5541,20 +5927,16 @@ function runLayoutPass(scratch, moveCtx) {
     id: cid,
     pose: composeWorldPose(poseAdapter, cid, pc.compose)
   }));
-  const draggedArg = {
-    id: draggedId,
-    originPose: startWorld,
-    pose: draggedWorld,
-    sourceContainerId
-  };
   const targets = layout.getDropTargets(container, children, draggedArg);
   const target = layout.snap.pickTarget(targets, { x: moveCtx.drag.current.x, y: moveCtx.drag.current.y });
   if (!target) return;
+  const reflowIds = /* @__PURE__ */ new Set();
   for (const [cid, pose] of layout.reflowPoses(container, children, draggedArg, target)) {
     if (asNodeId(cid) === draggedId) continue;
     const parent = scene.get(asNodeId(cid))?.parent ?? null;
     const local = rebaseLocalPose(poseAdapter, pose, parent, pc.compose, pc.decompose);
     scratch.previews.set(asNodeId(cid), local);
+    reflowIds.add(asNodeId(cid));
   }
   const sourceReflow = /* @__PURE__ */ new Map();
   if (sourceContainerId && sourceContainerId !== dest.id) {
@@ -5577,10 +5959,11 @@ function runLayoutPass(scratch, moveCtx) {
         sourceReflow.set(cid, pose);
         const parent = scene.get(asNodeId(cid))?.parent ?? null;
         scratch.previews.set(asNodeId(cid), rebaseLocalPose(poseAdapter, pose, parent, pc.compose, pc.decompose));
+        reflowIds.add(asNodeId(cid));
       }
     }
   }
-  scratch.layoutPass = { layout, container, children, target, sourceReflow };
+  scratch.layoutPass = { layout, container, children, target, sourceReflow, reflowIds };
 }
 function scenePoseAdapter(scene) {
   return {
@@ -5888,7 +6271,8 @@ var moveAction = {
           scratch.previews.clear();
         },
         previewIds: () => scratch.previews.keys(),
-        previewPose: (id) => scratch.previews.get(id) ?? null
+        previewPose: (id) => scratch.previews.get(id) ?? null,
+        previewOpaqueIds: () => scratch.layoutPass?.reflowIds ?? null
       };
     }
   },
@@ -6001,12 +6385,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,
@@ -6662,7 +7041,8 @@ var KIT_INSERT_KINDS = /* @__PURE__ */ new Set([
   "line",
   "polygon",
   "star",
-  "pencil"
+  "pencil",
+  "image"
 ]);
 var liveInsertScratch = null;
 function effectiveOriginMode(paramsOrigin, altHeld) {
@@ -7791,7 +8171,7 @@ var pinchZoomAction = {
       const multiTouch = ctx.multiTouch;
       if (!multiTouch) return {};
       const startSpread = multiTouch.spread > 0 ? multiTouch.spread : 1;
-      const scratch = { view, startSpread };
+      const scratch = { view, startSpread, centroid: multiTouch.centroid };
       return {
         kind: "pinch",
         onMove(moveCtx) {
@@ -7801,8 +8181,15 @@ var pinchZoomAction = {
           if (currentSpread <= 0 || scratch.startSpread <= 0) return;
           const factor = currentSpread / scratch.startSpread;
           scratch.startSpread = currentSpread;
+          const prev = scratch.centroid;
+          scratch.centroid = centroid;
           const current = scratch.view.get();
-          scratch.view.set(zoomAt(current, centroid, factor));
+          const zoomed = zoomAt(current, prev, factor);
+          scratch.view.set({
+            scale: zoomed.scale,
+            x: zoomed.x - (centroid.x - prev.x) / zoomed.scale.x,
+            y: zoomed.y - (centroid.y - prev.y) / zoomed.scale.y
+          });
         }
         // onEnd: nothing to do — zoom was applied each frame.
       };
@@ -8286,10 +8673,12 @@ function normalizeNegativeExtent(pose) {
 }
 
 // src/interactions/actions/defaults/flip.ts
-function flipSelection(selection, scene, axis, applyOps, geometryProjection) {
+function flipSelection(selection, scene, axis, pivot, applyOps, geometryProjection) {
   const ids = selection.get();
   if (ids.length === 0) return;
   const geom = AUTO_POSE_DESCRIPTOR;
+  const nodes = ids.map((id) => scene.get(id)).filter((n) => n != null);
+  const unionPivot = pivot === "union" ? unionBounds(nodes.map((n) => geom.getBounds(n.pose))) : null;
   const ops = [];
   for (const id of ids) {
     const node = scene.get(id);
@@ -8297,10 +8686,10 @@ function flipSelection(selection, scene, axis, applyOps, geometryProjection) {
     ops.push(createTransformOp({
       id,
       from: node.pose,
-      to: flipPoseViaDescriptor(node.pose, axis, geom),
+      to: unionPivot ? flipPoseAboutBounds(node.pose, axis, geom, unionPivot) : flipPoseViaDescriptor(node.pose, axis, geom),
       label: "Flip"
     }));
-    const g = geom.getBounds(node.pose);
+    const g = unionPivot ?? geom.getBounds(node.pose);
     const cx = g.x + g.width / 2;
     const cy = g.y + g.height / 2;
     const m = axis === "x" ? [-1, 0, 0, 1, 2 * cx, 0] : [1, 0, 0, -1, 0, 2 * cy];
@@ -8329,12 +8718,13 @@ var flipAction = {
     timing: "immediate",
     run: (deps, params) => {
       const axis = params?.axis ?? "x";
+      const pivot = params?.pivot ?? "each";
       const selection = deps.selection;
       const scene = deps.scene;
       const applyOps = deps.applyOps;
       const geometryProjection = deps.geometryProjection;
       if (!selection || !scene) return;
-      flipSelection(selection, scene, axis, applyOps, geometryProjection);
+      flipSelection(selection, scene, axis, pivot, applyOps, geometryProjection);
     }
   },
   enabled: requiresSelection
@@ -10283,6 +10673,12 @@ var DEFAULT_DEBUG_THEME = {
   fpsText: "#e0e0e0",
   fpsTextBg: "rgba(0, 0, 0, 0.6)"
 };
+var DEFAULT_DEBUG_STROKES = {
+  hitbox: { width: 1, dash: [2, 2] },
+  bounds: { width: 1 },
+  handle: { width: 1 },
+  snap: { width: 1 }
+};
 
 // src/debug/createDebugOverlayLayer.ts
 function createDebugOverlayLayer({
@@ -10290,6 +10686,7 @@ function createDebugOverlayLayer({
   config
 }) {
   const theme = { ...DEFAULT_DEBUG_THEME, ...config.theme ?? {} };
+  const strokes = { ...DEFAULT_DEBUG_STROKES, ...config.strokes ?? {} };
   const fpsHistory = [];
   const FPS_WINDOW = 60;
   return {
@@ -10301,11 +10698,11 @@ function createDebugOverlayLayer({
       const s = sink.snapshot();
       const t = viewToTransform(view);
       const out = [];
-      if (config.hitboxes) emitHitboxes(out, s, view, t, theme);
-      if (config.bounds) emitBounds(out, s, view, t, theme);
-      if (config.handles) emitHandles(out, s, t, theme);
+      if (config.hitboxes) emitHitboxes(out, s, view, t, theme, strokes);
+      if (config.bounds) emitBounds(out, s, view, t, theme, strokes);
+      if (config.handles) emitHandles(out, s, t, theme, strokes);
       if (config.origins) emitOrigins(out, s, t, theme);
-      if (config.snap) emitSnap(out, s, t, theme);
+      if (config.snap) emitSnap(out, s, t, theme, strokes);
       if (config.ids) emitIds(out, s, t, theme);
       if (config.layers) emitLayersPanel(out, s, dims, theme);
       if (config.fps) {
@@ -10338,9 +10735,16 @@ function approxCircleScreen(cx, cy, r, segments = 24) {
 function rectPath2(x, y, w, h) {
   return { kind: "rect", x, y, width: w, height: h };
 }
-function emitHitboxes(out, s, view, t, theme) {
+function strokeOf(s, color) {
+  return {
+    paint: { fill: "solid", color },
+    width: s.width,
+    ...s.dash && s.dash.length > 0 ? { dash: [...s.dash] } : {}
+  };
+}
+function emitHitboxes(out, s, view, t, theme, strokes) {
   const fill = { fill: "solid", color: theme.hitboxFill };
-  const stroke = { paint: { fill: "solid", color: theme.hitboxStroke }, width: 1, dash: [2, 2] };
+  const stroke = strokeOf(strokes.hitbox, theme.hitboxStroke);
   for (const h of s.hitboxes) {
     if (h.shape.kind === "rect") {
       const [sx, sy] = worldToScreen(h.shape.x, h.shape.y, t);
@@ -10354,8 +10758,8 @@ function emitHitboxes(out, s, view, t, theme) {
     }
   }
 }
-function emitBounds(out, s, view, t, theme) {
-  const stroke = { paint: { fill: "solid", color: theme.bounds }, width: 1 };
+function emitBounds(out, s, view, t, theme, strokes) {
+  const stroke = strokeOf(strokes.bounds, theme.bounds);
   for (const b of s.bounds) {
     const [sx, sy] = worldToScreen(b.bounds.x, b.bounds.y, t);
     const sw = b.bounds.width * view.scale.x;
@@ -10363,8 +10767,8 @@ function emitBounds(out, s, view, t, theme) {
     out.push({ kind: "path", path: rectPath2(sx, sy, sw, sh), stroke });
   }
 }
-function emitHandles(out, s, t, theme) {
-  const stroke = { paint: { fill: "solid", color: theme.handle }, width: 1 };
+function emitHandles(out, s, t, theme, strokes) {
+  const stroke = strokeOf(strokes.handle, theme.handle);
   for (const h of s.handles) {
     const [cx, cy] = worldToScreen(h.position.x, h.position.y, t);
     const horiz = {
@@ -10390,14 +10794,14 @@ function emitOrigins(out, s, t, theme) {
     out.push({ kind: "path", path: approxCircleScreen(cx, cy, 3), fill });
   }
 }
-function emitSnap(out, s, t, theme) {
+function emitSnap(out, s, t, theme, strokes) {
   const color = theme.snap;
   for (const c of s.snap) {
     const [cx, cy] = worldToScreen(c.point.x, c.point.y, t);
     const cmd = {
       kind: "path",
       path: approxCircleScreen(cx, cy, 4),
-      ...c.accepted ? { fill: { fill: "solid", color } } : { stroke: { paint: { fill: "solid", color }, width: 1 } }
+      ...c.accepted ? { fill: { fill: "solid", color } } : { stroke: strokeOf(strokes.snap, color) }
     };
     out.push(cmd);
   }
@@ -10706,18 +11110,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;
@@ -10759,11 +11184,22 @@ function reportDeadClaim(owner, warn) {
     `[weasel] exclusive claim by "${key}" matched no binding: no \`affordance:\` or \`kindOf\` target resolved against it, so the press was dropped.`
   );
 }
+function phaseRank(spec) {
+  if (spec === void 0) return 0;
+  const atoms = typeof spec === "string" ? [{ channel: "&", phase: spec }] : spec;
+  if (atoms.length === 0) return 0;
+  let min = 2;
+  for (const a of atoms) {
+    const rank = (a.channel === "*" ? 0 : 1) + (a.phase === "*" ? 0 : 1);
+    if (rank < min) min = rank;
+  }
+  return min;
+}
 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;
+  const p = phaseRank("phase" in spec ? spec.phase : void 0);
   const typed = (spec.kind === "drop" || spec.kind === "paste") && spec.types !== void 0 && spec.types.length > 0 ? 2 : 1;
   return [t, m, p, typed];
 }
@@ -12423,8 +12859,7 @@ function useGestureDispatcher(opts) {
       if (!cd) return;
       const items = itemsFromClipboardData(cd);
       if (items.length === 0) return;
-      e.preventDefault();
-      dispatch2({
+      const result = dispatch2({
         kind: "paste",
         items,
         // ClipboardEvent carries no modifier state.
@@ -12433,6 +12868,7 @@ function useGestureDispatcher(opts) {
         metaKey: false,
         shiftKey: false
       });
+      if (result === "handled") e.preventDefault();
     };
     if (keyboard) {
       window.addEventListener("keydown", onKeyDown);
@@ -12776,6 +13212,52 @@ function useViewAnimation(setView) {
   );
   return { animateTo, animateToBounds, cancel };
 }
+function validateId(id, kind) {
+  if (id.length === 0) {
+    throw new Error(`weasel: ${kind} id may not be empty`);
+  }
+  if (RESERVED_ID_PREFIXES.has(id[0])) {
+    throw new Error(
+      `weasel: ${kind} id "${id}" starts with reserved sigil "${id[0]}" (reserved set: ${[...RESERVED_ID_PREFIXES].join(" ")})`
+    );
+  }
+  if (RESERVED_ID_NAMES.has(id)) {
+    throw new Error(
+      `weasel: ${kind} id "${id}" collides with a reserved phase keyword (reserved: ${[...RESERVED_ID_NAMES].join(", ")})`
+    );
+  }
+}
+function defineTool(def) {
+  validateId(def.id, "tool");
+  const resolveCursor = (ctx) => {
+    if (def.cursor == null) return "";
+    return typeof def.cursor === "function" ? def.cursor(ctx) : def.cursor;
+  };
+  return {
+    id: def.id,
+    eligibility: {
+      focus: true,
+      capabilities: def.capabilities,
+      ...def.hotkey ? { offhand: def.hotkey } : {}
+    },
+    actions: def.actions,
+    def,
+    presentation: def.presentation,
+    keybinding: def.keybinding,
+    onActivate: def.onActivate,
+    onDeactivate: def.onDeactivate,
+    initScratch: def.initScratch ?? (() => null),
+    cursor: resolveCursor,
+    bindings: def.bindings,
+    overlay: def.overlay,
+    overlayPosition: def.overlayPosition
+  };
+}
+
+// src/tools/defineViewportTool.ts
+function defineViewportTool(def) {
+  return defineTool(def);
+}
 
 // src/interactions/actions/defaults/toolOffhand.ts
 var TOOL_OFFHAND_ID = "tool.offhand";
@@ -12870,17 +13352,19 @@ function useContributions(opts) {
     const { ordered, state } = snapshot();
     return scopeBindings(ordered, state);
   }, [snapshot]);
-  const overlays = useCallback(() => {
+  const overlays = useCallback((position = "top") => {
     const { ordered, state } = snapshot();
     const active = [];
     const hotkey = [];
     const ambient = [];
     for (const entry of ordered) {
       if (!entry.overlay) continue;
+      if ((entry.overlayPosition ?? "top") !== position) continue;
+      const layers = Array.isArray(entry.overlay) ? entry.overlay : [entry.overlay];
       const scope = liveScope(entry.id, entry.eligibility ?? {}, state);
-      if (scope === "active") active.push(entry.overlay);
-      else if (scope === "hotkey") hotkey.push(entry.overlay);
-      else if (scope === "ambient") ambient.push(entry.overlay);
+      if (scope === "active") active.push(...layers);
+      else if (scope === "hotkey") hotkey.push(...layers);
+      else if (scope === "ambient") ambient.push(...layers);
     }
     return [...active, ...hotkey, ...ambient];
   }, [snapshot]);
@@ -13633,21 +14117,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
@@ -13710,7 +14191,7 @@ function isBoundsGradient(fill) {
 }
 
 // src/features/patterns/resolveSpec.ts
-var cache5 = /* @__PURE__ */ new Map();
+var cache6 = /* @__PURE__ */ new Map();
 function specKey(spec) {
   const keys = Object.keys(spec).sort();
   const bag = spec;
@@ -13718,10 +14199,10 @@ function specKey(spec) {
 }
 function resolvePatternSpec(spec) {
   const key = specKey(spec);
-  const hit = cache5.get(key);
+  const hit = cache6.get(key);
   if (hit !== void 0) return hit;
   const built = buildTile(spec);
-  cache5.set(key, built);
+  cache6.set(key, built);
   return built;
 }
 function buildTile(spec) {
@@ -13757,7 +14238,7 @@ function resolveFillPattern(fill) {
 }
 
 // src/features/images/imageCache.ts
-var cache6 = /* @__PURE__ */ new Map();
+var cache7 = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var defaultLoader = async (src) => {
   if (typeof Image === "undefined" || typeof createImageBitmap === "undefined") {
@@ -13775,28 +14256,28 @@ function notify() {
 }
 function startLoad(src) {
   const entry = { status: "loading" };
-  cache6.set(src, entry);
+  cache7.set(src, entry);
   loader(src).then(
     (bitmap) => {
-      if (cache6.get(src) !== entry) return;
-      cache6.set(src, { status: "ready", bitmap });
+      if (cache7.get(src) !== entry) return;
+      cache7.set(src, { status: "ready", bitmap });
       notify();
     },
     () => {
-      if (cache6.get(src) !== entry) return;
-      cache6.set(src, { status: "error" });
+      if (cache7.get(src) !== entry) return;
+      cache7.set(src, { status: "error" });
       notify();
     }
   );
 }
 function getImageBitmap(src) {
-  const entry = cache6.get(src);
+  const entry = cache7.get(src);
   if (entry) return entry.bitmap;
   startLoad(src);
   return void 0;
 }
 function imageStatus(src) {
-  return cache6.get(src)?.status ?? "idle";
+  return cache7.get(src)?.status ?? "idle";
 }
 function subscribeImageReady(cb) {
   subscribers.add(cb);
@@ -14163,6 +14644,7 @@ registerBuiltInShapePainters();
 function pickTopMostHit(ids, adapter) {
   if (ids.length === 0) return null;
   if (ids.length === 1) return ids[0];
+  let candidates = ids;
   const getParent = adapter?.getParent;
   if (typeof getParent === "function") {
     const set = new Set(ids);
@@ -14177,15 +14659,40 @@ function pickTopMostHit(ids, adapter) {
     }
     if (dropped.size > 0) {
       const filtered = ids.filter((id) => !dropped.has(id));
-      if (filtered.length === 0) ; else if (filtered.length === 1) {
-        return filtered[0];
-      } else {
-        return filtered[filtered.length - 1];
+      if (filtered.length === 1) return filtered[0];
+      if (filtered.length > 1) candidates = filtered;
+    }
+  }
+  return pickHighestZ(candidates, adapter);
+}
+function pickHighestZ(ids, adapter) {
+  const compareZ = adapter?.compareZ;
+  if (typeof compareZ === "function") {
+    let best = ids[0];
+    for (let i = 1; i < ids.length; i++) {
+      if (compareZ(ids[i], best) >= 0) best = ids[i];
+    }
+    return best;
+  }
+  const getZIndex = adapter?.getZIndex;
+  if (typeof getZIndex === "function") {
+    let best = ids[0];
+    let bestZ = zOf(getZIndex, best);
+    for (let i = 1; i < ids.length; i++) {
+      const z = zOf(getZIndex, ids[i]);
+      if (z >= bestZ) {
+        best = ids[i];
+        bestZ = z;
       }
     }
+    return best;
   }
   return ids[ids.length - 1];
 }
+function zOf(getZIndex, id) {
+  const z = getZIndex(id);
+  return typeof z === "number" && Number.isFinite(z) ? z : -Infinity;
+}
 
 // src/core/selection/selectionTarget.ts
 var MULTI_RESIZE_TARGET_ID = "__weasel:multi-selection";
@@ -14590,9 +15097,19 @@ function composeAffordanceLayer(id, label, affordances) {
     },
     // The walk itself lives in `hitAffordanceRegions` so this layer and
     // `buildAffordanceAt` share one implementation rather than two that can
-    // drift. This wrapper exists because `RenderLayer.hitTest` wants only the
-    // binding back.
-    hitTest: (wx, wy, state, view, _dims, isVisible) => hitAffordanceRegions(affordances, wx, wy, state, view, isVisible)?.binding ?? null
+    // drift. This wrapper lifts the region's declared cursor and claim onto
+    // the binding, the way `buildAffordanceAt` lifts them onto `AffordanceHit`.
+    hitTest: (wx, wy, state, view, _dims, isVisible) => {
+      const hit = hitAffordanceRegions(affordances, wx, wy, state, view, isVisible);
+      if (!hit) return null;
+      const { cursor, strength, claimedKinds } = hit.region;
+      return {
+        ...hit.binding,
+        ...cursor !== void 0 ? { cursor } : {},
+        ...strength !== void 0 ? { strength } : {},
+        ...claimedKinds !== void 0 ? { claimedKinds } : {}
+      };
+    }
   };
 }
 function asChromeState(data) {
@@ -15375,7 +15892,7 @@ function useEllipseTool() {
   );
 }
 function useImageTool(options) {
-  const { src, label = "Image" } = options;
+  const { src, label = "Image", preview = "bitmap" } = options;
   return useMemo(
     () => defineTool({
       id: "image",
@@ -15394,11 +15911,11 @@ function useImageTool(options) {
         {
           spec: { kind: "drag" },
           actionId: "insert",
-          opts: { params: { kind: "image", src } }
+          opts: { params: { kind: "image", src, preview } }
         }
       ]
     }),
-    [src, label]
+    [src, label, preview]
   );
 }
 function useEyedropperTool(opts) {
@@ -15865,6 +16382,19 @@ function composeOrderedLayers(layersMap, standardLayers, sceneLayers) {
   }
   return out;
 }
+function placeToolOverlays(ordered, selectionOverlay, overlays) {
+  const before = overlays("before-selection");
+  const after = overlays("after-selection");
+  const at = selectionOverlay ? ordered.indexOf(selectionOverlay) : -1;
+  if (at >= 0) {
+    ordered.splice(at + 1, 0, ...after);
+    ordered.splice(at, 0, ...before);
+  } else {
+    ordered.push(...before, ...after);
+  }
+  ordered.push(...overlays("top"));
+  return ordered;
+}
 
 // src/canvas/toolPreview.ts
 function* toolsInPriorityOrder(tools) {
@@ -16630,6 +17160,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 +17420,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 +17444,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;
@@ -17412,7 +17941,7 @@ function CanvasInner(props, ref) {
     const out = composeOrderedLayers(effectiveLayersMap, standardLayers, sceneLayers);
     if (decorationLayer) out.push(decorationLayer);
     if (tools) {
-      out.push(...tools.getActiveOverlays());
+      placeToolOverlays(out, standardLayers.selectionOverlay, tools.getActiveOverlays);
     }
     return out;
   }, [layersMap, adapter, selectedIds, effectiveBoundsOf, multiActive2, debugSink, tools, backgroundLayer, decorationLayer]);
@@ -17630,6 +18159,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 +18185,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 +18194,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 +18274,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 +18417,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 +18537,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 +18850,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 +18885,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 +19183,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 +19524,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 +19562,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);
       }
@@ -18996,6 +19608,7 @@ function useSceneSelectTool(args) {
     boundsOf: wiredBoundsOf
   };
 }
+var GHOST_ALPHA = 0.85;
 function usePreviewGhostLayer(args) {
   const { scene, tools, sceneSlot, dispatcher } = args;
   const sceneRef = useRef(scene);
@@ -19082,15 +19695,26 @@ function usePreviewGhostLayer(args) {
         }
         return [group];
       };
+      const opaqueSet = /* @__PURE__ */ new Set();
+      for (const source of sources) {
+        const ids = source.previewOpaqueIds?.();
+        if (!ids) continue;
+        for (const id of ids) opaqueSet.add(id);
+      }
       const children = [];
+      const opaque = [];
       for (const id of idSet) {
         const node = sc.get(asNodeId(id));
         const parent = node?.parent;
         if (parent != null && idSet.has(parent)) continue;
-        for (const cmd of buildSubtree(id)) children.push(cmd);
+        const sink = opaqueSet.has(id) ? opaque : children;
+        for (const cmd of buildSubtree(id)) sink.push(cmd);
       }
-      if (children.length === 0) return [];
-      return [{ kind: "group", alpha: 0.85, children }];
+      if (children.length === 0 && opaque.length === 0) return [];
+      const out = [];
+      if (opaque.length > 0) out.push({ kind: "group", children: opaque });
+      if (children.length > 0) out.push({ kind: "group", alpha: GHOST_ALPHA, children });
+      return out;
     }
   }), []);
 }
@@ -19100,6 +19724,7 @@ var DEFAULT_STYLE = {
   dash: [3, 3],
   lineWidth: 1
 };
+var PREVIEW_CONTENT_OPACITY = 0.85;
 function useDispatcherOverlayLayer(args) {
   const { dispatcher, style } = args;
   const dispatcherRef = useRef(dispatcher);
@@ -19162,6 +19787,26 @@ function useDispatcherOverlayLayer(args) {
                 pathCmd = rectPath(sx, sy, b.width * view.scale.x, b.height * view.scale.y);
                 break;
               }
+              case "image": {
+                const e = ov.extras;
+                const [sx, sy] = worldToScreen(b.x, b.y, t);
+                const sw = b.width * view.scale.x;
+                const sh = b.height * view.scale.y;
+                const bmp = e.preview === "outline" || !e.src ? void 0 : getImageBitmap(e.src);
+                if (bmp) {
+                  out.push({
+                    kind: "image",
+                    image: bmp,
+                    x: sx,
+                    y: sy,
+                    w: sw,
+                    h: sh,
+                    opacity: PREVIEW_CONTENT_OPACITY
+                  });
+                }
+                pathCmd = rectPath(sx, sy, sw, sh);
+                break;
+              }
               case "ellipse": {
                 const [sx, sy] = worldToScreen(b.x, b.y, t);
                 pathCmd = ellipsePath({
@@ -19220,7 +19865,7 @@ function useDispatcherOverlayLayer(args) {
             const cmd = {
               kind: "path",
               path: pathCmd,
-              fill: ov.shape === "line" || ov.shape === "pencil" ? void 0 : { color: cfg.fill },
+              fill: ov.shape === "line" || ov.shape === "pencil" || ov.shape === "image" ? void 0 : { color: cfg.fill },
               stroke: { paint: { color: cfg.stroke }, width: cfg.lineWidth, dash: cfg.dash }
             };
             out.push(cmd);
@@ -19933,9 +20578,6 @@ function buildClassifyTarget(getSelection, pickBest, kindOfNode) {
 function w2s3(wx, wy, view) {
   return [(wx - view.x) * view.scale.x, (wy - view.y) * view.scale.y];
 }
-function r2s(radiusWorld, view) {
-  return radiusWorld * meanScale(view.scale);
-}
 var SLOP_FILL = "rgba(255, 80, 140, 0.18)";
 var SLOP_STROKE = "rgba(255, 80, 140, 0.55)";
 function createSlopsDebugLayer(opts) {
@@ -19946,7 +20588,7 @@ function createSlopsDebugLayer(opts) {
     draw: (_data, view) => {
       const out = [];
       const sel = opts.selectionRef.current?.current ?? [];
-      const r = r2s(HANDLE_HIT_RADIUS, view);
+      const r = HANDLE_HIT_RADIUS;
       for (const id of sel) {
         const b = opts.boundsOf(id);
         if (!b) continue;
@@ -19983,6 +20625,7 @@ function createSlopsDebugLayer(opts) {
       }
       const editingId = opts.getEditingId();
       if (editingId) {
+        const anchorR = ANCHOR_HIT_RADIUS;
         const pose = opts.getPose(editingId);
         if (pose && pose.kind === "polygon") {
           const anchors = enumerateAnchors(pose);
@@ -19990,7 +20633,7 @@ function createSlopsDebugLayer(opts) {
             const [sx, sy] = w2s3(a.x, a.y, view);
             out.push({
               kind: "path",
-              path: circlePath(sx, sy, r),
+              path: circlePath(sx, sy, anchorR),
               fill: { fill: "solid", color: SLOP_FILL },
               stroke: { paint: { fill: "solid", color: SLOP_STROKE }, width: 1 }
             });
@@ -19998,7 +20641,7 @@ function createSlopsDebugLayer(opts) {
               const [csx, csy] = w2s3(a.controlIn.x, a.controlIn.y, view);
               out.push({
                 kind: "path",
-                path: circlePath(csx, csy, r),
+                path: circlePath(csx, csy, anchorR),
                 fill: { fill: "solid", color: SLOP_FILL },
                 stroke: { paint: { fill: "solid", color: SLOP_STROKE }, width: 1 }
               });
@@ -20007,7 +20650,7 @@ function createSlopsDebugLayer(opts) {
               const [csx, csy] = w2s3(a.controlOut.x, a.controlOut.y, view);
               out.push({
                 kind: "path",
-                path: circlePath(csx, csy, r),
+                path: circlePath(csx, csy, anchorR),
                 fill: { fill: "solid", color: SLOP_FILL },
                 stroke: { paint: { fill: "solid", color: SLOP_STROKE }, width: 1 }
               });
@@ -20089,30 +20732,41 @@ function DepRegistryProviderIfRoot({ children }) {
 function hitTestArea(scene, bounds) {
   const { x, y, width: w, height: h } = bounds;
   const area = [x, y, x + w, y, x + w, y + h, x, y + h];
-  return hitTestAreaPolygon(scene, area, { x, y, width: w, height: h });
+  return hitTestAreaPolygon(scene, area, { x, y, width: w, height: h }, true);
 }
-function hitTestAreaPolygon(scene, area, areaBounds) {
+function hitTestAreaPolygon(scene, area, areaBounds, areaIsRect = false) {
   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 (areaIsRect && b.x >= ab.x && b.y >= ab.y && b.x + b.width <= ab.x + ab.width && b.y + b.height <= ab.y + ab.height) {
+      hits.push(node.id);
       continue;
     }
-    if (silhouetteOverlapsArea(pose.coords, area)) {
-      hits.push(id);
+    if (silhouette) {
+      if (silhouetteOverlapsArea(pose.coords, area)) {
+        hits.push(node.id);
+      }
+      continue;
+    }
+    const drawn = findShapeSilhouette(node, pose);
+    if (drawn?.kind === "polygon") {
+      if (silhouetteOverlapsArea(drawn.coords, area)) hits.push(node.id);
+      continue;
     }
+    hits.push(node.id);
   }
   return hits;
 }
@@ -22345,14 +22999,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 +23028,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 +23056,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 +23081,8 @@ function SceneViewCanvasInner(props) {
       width,
       height,
       drawOne,
-      extraCommands
+      extraCommands,
+      alphaFor
     });
   });
   return /* @__PURE__ */ jsx(
@@ -22515,6 +23181,7 @@ function MinimapCanvasInner(props) {
     width,
     height,
     drawOne,
+    alphaFor,
     fit = "scene",
     poseBounds,
     indicatorStyle,
@@ -22626,6 +23293,7 @@ function MinimapCanvasInner(props) {
       height,
       drawOne,
       extraCommands,
+      alphaFor,
       className,
       canvasRef: setCanvasRef
     }
@@ -22667,7 +23335,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 +23687,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;
 }
 
@@ -23929,6 +24593,14 @@ function useSceneTextEdit(scene, container, options = {}) {
       const setter = optsRef.current.setRuns;
       const data = setter ? setter(node.data, runs) : { ...node.data, runs };
       sceneRef.current.update(nid, { data });
+    },
+    setStyle: (id, style) => {
+      const nid = asNodeId(id);
+      const node = sceneRef.current.get(nid);
+      if (!node) return;
+      const setter = optsRef.current.setStyle;
+      const data = setter ? setter(node.data, style) : { ...node.data, style };
+      sceneRef.current.update(nid, { data });
     }
   });
   const onDoubleClick = useCallback((e) => {
@@ -23940,10 +24612,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,
@@ -27638,6 +28309,6 @@ function mergeContributions(...bundles) {
   return out;
 }
 
-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
+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_STROKES, 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, defineTool, defineViewportTool, 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, viewportsAt, when, withAlpha01, withCoord, withGradientKind, worldEditToStorage, worldPoseLookup, worldToScreen, zoomAt, zoomAtLeast };
+//# sourceMappingURL=chunk-PI56ORHE.js.map
+//# sourceMappingURL=chunk-PI56ORHE.js.map