@weasel-js/core 1.0.1 → 1.0.2

package/dist/{chunk-FVNWK7U3.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, parseTargetSpec, 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.1" ;
+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;
+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) {
+  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}`;
+}
+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();
   }
-  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);
+  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;
+}
+
+// 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 {
-      idx.push(aOuterEnd, bOuterStart, apexIdx);
-      idx.push(aOuterEnd, jIdx, bOuterStart);
+      i++;
     }
-    return;
-  }
-  if (join === "round") {
-    emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
-    return;
   }
+  return out;
 }
-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;
+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 (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 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()}`;
+  return out;
 }
-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);
+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;
+    }
+    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);
+    }
   }
-  return false;
+  return b.build();
 }
-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 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;
+    }
+    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;
+    }
+    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 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
+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
   );
-  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);
+  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;
   }
-  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 };
-    }
-  }
-  warnMissingGlyphOnce(resolved.resolved.family, cp);
-  return null;
+
+// 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;
 }
-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.`
-  );
+
+// src/features/paths/tessellate/polyline.ts
+function extractPolylines(path, opts = {}) {
+  if (path.kind === "rect") return [extractRect(path)];
+  return extractPolygon(path, opts);
 }
-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;
-    }
-    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;
+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 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;
+      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;
       }
-      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);
+      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;
       }
-      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;
+      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;
       }
-      commitLine();
-      i++;
-      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);
+      case PATH_Z: {
+        if (current) {
+          current.closed = true;
+          dropDuplicateClosingPoint();
+        }
+        break;
       }
-      i++;
-      continue;
-    }
-    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 (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);
+      default:
+        throw new Error(`extractPolylines: unknown command code ${cmd}`);
     }
-    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);
+  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 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 });
+  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);
     }
-    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 });
+  }
+  return {
+    vertices: new Float32Array(verts),
+    indices: new Uint32Array(idx),
+    anchorA: new Uint32Array(anchorA),
+    anchorB: new Uint32Array(anchorB),
+    anchorT: new Float32Array(anchorT)
+  };
+}
+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 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 {
-          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;
+  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);
     }
-    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 }
-  };
-}
-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) {
-  return `${opts.maxWidth}|${opts.lineHeight}|${opts.align}|${outlineBucket(runs, opts.outlineMinSize)}`;
+  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]);
+  }
 }
-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();
+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;
+    }
   }
-  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;
+  pl.widths = widths;
 }
-
-// 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;
+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);
+    }
+    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;
+    }
+    if (atEnd) idx.push(prevIdx, rightIdx, pivotIdx);
+    else idx.push(prevIdx, pivotIdx, rightIdx);
+  }
 }
-
-// src/features/paths/pathFromD.ts
-var NUM_RE = /[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g;
-function tokenize(d) {
+function splitForDash(pl, dash) {
   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++;
+  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)
+      });
+    }
+    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];
+        }
+      }
     }
   }
-  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 (curPts && curPts.length >= 4) {
+    out.push({
+      points: curPts,
+      closed: false,
+      anchorA: new Uint32Array(curA),
+      anchorB: new Uint32Array(curB),
+      anchorT: new Float32Array(curT)
+    });
   }
   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 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
   };
-  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);
-    }
-  }
-  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;
-    }
-    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;
-    }
-    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;
-    }
-    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;
+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);
-    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 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 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;
+  if (join === "round") {
+    emitRoundJoin(a, aOuterEnd, bOuterStart, onPositive, verts, idx, anchorA, anchorB, anchorT, cornerA, cornerB, cornerT);
+    return;
   }
 }
-
-// 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;
+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];
 }
 
 // src/renderer/cache/outlineStrokeMeshCache.ts
@@ -2827,6 +2842,38 @@ 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;
@@ -3231,44 +3278,40 @@ function drawGroup(ctx, cmd) {
         "weasel: clip nesting depth exceeded (max 7). You can't nest more than 7 levels of clipped containers in a single draw tree. Flatten the hierarchy or compose poses outside the scene graph."
       );
     }
-    flushSolids(ctx);
     pushClip(ctx, cmd.clip, newDepth);
     ctx.clipDepth = newDepth;
   }
   for (const child of cmd.children) dispatch(ctx, child);
   if (cmd.clip) {
-    flushSolids(ctx);
     popClip(ctx, cmd.clip, ctx.clipDepth - 1);
     ctx.clipDepth -= 1;
   }
   ctx.state.pop();
 }
 function drawPath(ctx, cmd) {
-  if (!cmd.fill && !cmd.stroke) return;
-  if (cmd.fill) {
-    const batchablePaint = (cmd.fill.fill === void 0 || cmd.fill.fill === "solid") && (!cmd.vertexColors || cmd.vertexColors.length === 0);
-    const solid = cmd.fill;
-    if (batchablePaint && cmd.path.kind === "rect") {
-      pushRect(ctx, cmd.path, solid);
-    } else {
-      const mesh = fillMesh(ctx, cmd.path);
-      if (batchablePaint && canBatchMesh(mesh)) {
-        pushMesh(ctx, mesh, solid);
-      } else {
-        flushSolids(ctx);
-        const handle = meshHandle(ctx, mesh);
-        if (cmd.vertexColors && cmd.vertexColors.length > 0 && (cmd.fill.fill === void 0 || cmd.fill.fill === "solid")) {
-          drawPathFillVColor(ctx, cmd, solid, handle);
-        } else if (handle.requiresStencil) {
-          drawPathFillStencil(ctx, cmd.fill, handle);
-        } else {
-          drawPathFillByKind(ctx, cmd.fill, handle);
-        }
-      }
-    }
-  }
+  if (cmd.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);
 }
@@ -3321,6 +3364,14 @@ function pushMesh(ctx, mesh, paint) {
   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 flushSolids(ctx) {
   const batch = ctx.solidBatch;
   const staged = ctx.solidState;
@@ -3524,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;
@@ -3538,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;
@@ -3594,17 +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 hasVColors = !!(stroke.vertexColors && stroke.vertexColors.length > 0);
-  if (!hasVColors && canBatchMesh(mesh)) {
-    pushMesh(ctx, mesh, solid);
-    return;
-  }
-  flushSolids(ctx);
-  const handle = ctx.meshCache.uploadTransient(mesh);
+  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);
@@ -3635,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);
@@ -3680,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) {
@@ -3733,9 +3796,9 @@ 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, dx, 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, dx, dy) {
@@ -4075,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;
 }
@@ -4613,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 = [];
@@ -4639,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) {
@@ -5772,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);
@@ -5781,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,
@@ -5829,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) {
@@ -5865,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 {
@@ -6176,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
       };
     }
   },
@@ -6945,7 +7041,8 @@ var KIT_INSERT_KINDS = /* @__PURE__ */ new Set([
   "line",
   "polygon",
   "star",
-  "pencil"
+  "pencil",
+  "image"
 ]);
 var liveInsertScratch = null;
 function effectiveOriginMode(paramsOrigin, altHeld) {
@@ -8074,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) {
@@ -8084,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.
       };
@@ -8569,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);
@@ -8580,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];
@@ -8612,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
@@ -10566,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({
@@ -10573,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 {
@@ -10584,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) {
@@ -10621,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);
@@ -10637,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;
@@ -10646,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 = {
@@ -10673,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);
   }
@@ -11063,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(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];
 }
@@ -12727,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.
@@ -12737,6 +12868,7 @@ function useGestureDispatcher(opts) {
         metaKey: false,
         shiftKey: false
       });
+      if (result === "handled") e.preventDefault();
     };
     if (keyboard) {
       window.addEventListener("keydown", onKeyDown);
@@ -13080,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";
@@ -13174,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]);
@@ -14011,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;
@@ -14019,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) {
@@ -14058,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") {
@@ -14076,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);
@@ -14464,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);
@@ -14478,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";
@@ -14891,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) {
@@ -15676,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",
@@ -15695,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) {
@@ -16166,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) {
@@ -17712,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]);
@@ -19379,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);
@@ -19465,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;
     }
   }), []);
 }
@@ -19483,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);
@@ -19545,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({
@@ -19603,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);
@@ -20316,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) {
@@ -20329,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;
@@ -20366,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);
@@ -20373,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 }
             });
@@ -20381,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 }
               });
@@ -20390,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 }
               });
@@ -20472,9 +20732,9 @@ 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 = [];
@@ -20491,13 +20751,22 @@ function hitTestAreaPolygon(scene, area, areaBounds) {
     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 (!silhouette) {
+    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(node.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;
 }
@@ -24324,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) => {
@@ -28032,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-FVNWK7U3.js.map
-//# sourceMappingURL=chunk-FVNWK7U3.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