castle-web-cli 0.4.114 → 0.4.116

package/kits/physics-2d/engine/pxartPath.js

@@ -0,0 +1,1356 @@
+// ============================================================================
+// Path layers — stacked-shape vector source + the normative pixel bake.
+// ============================================================================
+//
+// "Pixels are truth": a path LAYER's cell stores a baked `grid` (identical
+// shape/semantics to a plain pixel cell's grid — every non-path-aware
+// consumer reads only that) PLUS a `path` object carrying the vector source
+// the editor keeps re-baking from. Schema (see docs/pxart-format.md):
+//
+//   path: {
+//     shapes: [
+//       {
+//         fill: paletteKey | null,
+//         stroke: paletteKey | null,
+//         subpaths: [{ closed, start: [x,y], segs: [{ to, c1?, c2? }] }]
+//       },
+//       ...
+//     ]
+//   }
+//
+// Shapes paint back-to-front (array order). Per shape: fill first, then its
+// own 1px stroke. Later shapes overwrite earlier pixels. Multi-subpath fills
+// use even-odd (donuts). Open stroked subpaths with no fill are 1px polylines.
+// Stroke is per-shape (whole outline or none) — no per-segment strokes.
+//
+// Points are stored as authored; the half-cell lattice is a magnetic guide at
+// input time (§6.1.2). Each segment stores relative cubic offsets c1/c2 from
+// its start and end anchors (absent or zero → straight). Sagitta/bow is a
+// gesture vocabulary only: the bend tool reads/writes it through
+// bowForEdge/snapBow/bowToSegments, but anything answering "what does this
+// look like / where is it" (fill, stroke, hit-test, render) flattens the
+// stored cubics.
+//
+// Shape objects may carry extra keys for forward-compatible variants; v1 only
+// understands fill/stroke/subpaths (/prim).
+//
+// This module owns tolerant parse/serialize PLUS bakePathCell. Kept as a
+// sibling of pxart.js so the core parser stays focused on the on-disk
+// cell/layer shape; pxartPath.js does NOT import from pxart.js.
+// ============================================================================
+
+const TRANSPARENT = '.';
+
+/**
+ * The half-cell lattice (§6.1.2): integers are pixel corners, half-integers are
+ * pixel centers. Authoring tools magnetize toward it; storage no longer enforces it.
+ */
+export const LATTICE = 0.5;
+
+/** Decimal places for serialized coordinates — far below a pixel, stable diffs. */
+export const COORD_DECIMALS = 4;
+const COORD_SCALE = 10 ** COORD_DECIMALS;
+
+/** Normalize -0 and round for on-disk coordinates. */
+export function roundCoord(n) {
+  if (!Number.isFinite(n)) return 0;
+  return Math.round(n * COORD_SCALE) / COORD_SCALE + 0;
+}
+
+export function roundPoint(x, y) {
+  return [roundCoord(x), roundCoord(y)];
+}
+
+/** Screen pixels within which a lattice site magnetizes (constant to the finger). */
+export const MAGNETIC_SCREEN_PX = 12;
+
+/**
+ * Pull one coordinate toward the nearest magnetic target when within `cellPull`.
+ * `corners` → half-cell lattice (integers and half-integers); otherwise pixel
+ * centers only (half-integers).
+ */
+export function magneticSnapValue(n, cellPull, corners = false) {
+  if (!(cellPull > 0) || !Number.isFinite(n)) return n;
+  const targets = corners
+    ? [Math.round(n / LATTICE) * LATTICE]
+    : [Math.round(n - LATTICE) + LATTICE];
+  let best = n;
+  let bestDist = cellPull;
+  for (const t of targets) {
+    const d = Math.abs(n - t);
+    if (d <= cellPull && d < bestDist) {
+      bestDist = d;
+      best = t + 0;
+    }
+  }
+  return best;
+}
+
+export function magneticSnapPoint(x, y, cellPull, corners = false) {
+  return [magneticSnapValue(x, cellPull, corners), magneticSnapValue(y, cellPull, corners)];
+}
+
+/** Cell-unit pull radius from screen pixels, artboard zoom, and resolution. */
+export function magneticCellPull(resolution, displayWidthPx, zoom = 1) {
+  if (!(resolution > 0) || !(displayWidthPx > 0) || !(zoom > 0)) return LATTICE / 2;
+  const cellPx = (displayWidthPx * zoom) / resolution;
+  return MAGNETIC_SCREEN_PX / cellPx;
+}
+
+/**
+ * How many spans trace a derived ellipse. Circular arcs cannot be an ellipse,
+ * so this is an accuracy dial: measured against a true 7×4 oval, 4 spans are
+ * off by 0.225 cells, 8 by 0.039, and 16 comfortably under a tenth. A circle
+ * is exact at any count, since then each span really is a circular arc.
+ */
+const ELLIPSE_SPANS = 16;
+
+/** Shapes whose geometry is generated from parameters rather than authored. */
+export function isPrimitiveShape(shape) {
+  return shape?.prim === 'ellipse';
+}
+
+/**
+ * Which derived anchors double as edit handles — the four on the ellipse's own
+ * axes, so dragging one reads directly as a radius. The rest of the ring is
+ * scenery: showing all sixteen would suggest an editability that is not there.
+ */
+export function primitiveHandleIndices(shape) {
+  if (!isPrimitiveShape(shape)) return [];
+  const quarter = ELLIPSE_SPANS / 4;
+  return [0, quarter, 2 * quarter, 3 * quarter];
+}
+
+/**
+ * Runtime-only ellipse ring as cubic segments (see deriveShape).
+ * Never serialized. The generated curve stays off the half-cell lattice so
+ * ovals remain faithful; only the parameters are magnetized during authoring
+ * (§6.1.2).
+ */
+export function ellipseSubpaths(cx, cy, rx, ry) {
+  const at = (t) => [cx + rx * Math.cos(t), cy + ry * Math.sin(t)];
+  const points = [];
+  for (let i = 0; i < ELLIPSE_SPANS; i++) points.push(at((2 * Math.PI * i) / ELLIPSE_SPANS));
+
+  const start = [points[0][0], points[0][1]];
+  const segs = [];
+  for (let i = 0; i < ELLIPSE_SPANS; i++) {
+    const t0 = (2 * Math.PI * i) / ELLIPSE_SPANS;
+    const t1 = (2 * Math.PI * (i + 1)) / ELLIPSE_SPANS;
+    const samples = [];
+    for (let k = 0; k <= 16; k++) {
+      const [x, y] = at(t0 + ((t1 - t0) * k) / 16);
+      samples.push({ x, y });
+    }
+    const from = [points[i][0], points[i][1]];
+    const to = points[(i + 1) % ELLIPSE_SPANS];
+    const bow = sagittaAgainstChord(samples, from, to);
+    segs.push(...bowToSegments(from, to, bow));
+  }
+  return [{ closed: true, start, segs }];
+}
+
+/** Regenerate a primitive's geometry from its parameters. Identity otherwise. */
+export function deriveShape(shape) {
+  if (shape?.prim !== 'ellipse') return shape;
+  return { ...shape, subpaths: ellipseSubpaths(shape.cx, shape.cy, shape.rx, shape.ry) };
+}
+
+export function emptyPathData() {
+  return { shapes: [] };
+}
+
+export function isEmptyPathData(path) {
+  return !path || !Array.isArray(path.shapes) || path.shapes.length === 0;
+}
+
+export function pointsEqual(a, b) {
+  return (
+    a &&
+    b &&
+    Math.abs(a[0] - b[0]) < 1e-12 &&
+    Math.abs(a[1] - b[1]) < 1e-12
+  );
+}
+
+function cloneSegment(seg) {
+  const out = { to: [seg.to[0], seg.to[1]] };
+  if (seg.c1) out.c1 = [seg.c1[0], seg.c1[1]];
+  if (seg.c2) out.c2 = [seg.c2[0], seg.c2[1]];
+  return out;
+}
+
+export function cloneSubpath(sub) {
+  const norm = normalizeSubpath(sub);
+  return {
+    closed: !!norm.closed,
+    start: [norm.start[0], norm.start[1]],
+    segs: (norm.segs ?? []).map(cloneSegment),
+  };
+}
+
+export function straightSegment(to) {
+  return { to: [to[0], to[1]] };
+}
+
+export function makeSubpath(closed, start, segs) {
+  return {
+    closed: !!closed,
+    start: [start[0], start[1]],
+    segs: (segs ?? []).map(cloneSegment),
+  };
+}
+
+export function clonePathData(path) {
+  return {
+    shapes: (path?.shapes ?? []).map((shape) => ({
+      ...shape,
+      fill: shape.fill ?? null,
+      stroke: shape.stroke ?? null,
+      subpaths: (shape.subpaths ?? []).map((sub) => cloneSubpath(sub)),
+    })),
+  };
+}
+
+/** Shift every absolute anchor by (dx, dy). Relative c1/c2 offsets are unchanged. */
+export function translatePathData(path, dx, dy) {
+  return {
+    shapes: (path?.shapes ?? []).map((shape) => {
+      // A primitive's centre is the truth; its points are regenerated from it,
+      // so moving them alone would be undone by the next derive.
+      const moved = isPrimitiveShape(shape)
+        ? { ...shape, cx: shape.cx + dx, cy: shape.cy + dy }
+        : shape;
+      return {
+        ...moved,
+        subpaths: (shape.subpaths ?? []).map((sub) => ({
+          ...sub,
+          start: [sub.start[0] + dx, sub.start[1] + dy],
+          segs: (sub.segs ?? []).map((seg) => ({
+            ...cloneSegment(seg),
+            to: [seg.to[0] + dx, seg.to[1] + dy],
+          })),
+        })),
+      };
+    }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// tolerant parse / serialize
+// ---------------------------------------------------------------------------
+
+function finite(n, fallback = 0) {
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback;
+}
+
+/** Parse one point — finite only; lattice magnetism is an authoring-time aid. */
+function parsePoint(raw) {
+  if (!Array.isArray(raw) || raw.length < 2) return [0, 0];
+  return [finite(raw[0]) + 0, finite(raw[1]) + 0];
+}
+
+function parsePaletteKey(raw) {
+  if (raw == null) return null;
+  return typeof raw === 'string' && raw.length === 1 ? raw : null;
+}
+
+function parseSegment(raw) {
+  if (!raw || typeof raw !== 'object' || !Array.isArray(raw.to)) return null;
+  const to = parsePoint(raw.to);
+  const seg = { to };
+  if (Array.isArray(raw.c1) && raw.c1.length >= 2) {
+    seg.c1 = [finite(raw.c1[0]) + 0, finite(raw.c1[1]) + 0];
+  }
+  if (Array.isArray(raw.c2) && raw.c2.length >= 2) {
+    seg.c2 = [finite(raw.c2[0]) + 0, finite(raw.c2[1]) + 0];
+  }
+  return stripZeroHandles(seg);
+}
+
+function parseSubpath(raw) {
+  if (!raw || typeof raw !== 'object' || !Array.isArray(raw.start)) return null;
+  const closed = !!raw.closed;
+  const start = parsePoint(raw.start);
+  const segsIn = Array.isArray(raw.segs) ? raw.segs : [];
+  const segs = [];
+  for (const s of segsIn) {
+    const seg = parseSegment(s);
+    if (seg) segs.push(seg);
+  }
+  if (!start && segs.length === 0) return null;
+  return canonicalizeSubpath({ closed, start, segs });
+}
+
+const MIN_ELLIPSE_RADIUS = 0.01;
+export { MIN_ELLIPSE_RADIUS };
+
+/** Ellipse parameters — continuous; a zero radius would read as empty geometry. */
+function parseEllipseParams(raw) {
+  return {
+    cx: finite(raw.cx) + 0,
+    cy: finite(raw.cy) + 0,
+    rx: Math.max(MIN_ELLIPSE_RADIUS, Math.abs(finite(raw.rx))),
+    ry: Math.max(MIN_ELLIPSE_RADIUS, Math.abs(finite(raw.ry))),
+  };
+}
+
+function parseShape(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+
+  // Primitives carry parameters instead of geometry. Derive on the way in so
+  // every consumer downstream — bake, stroke tracing, hit-testing, the vector
+  // renderer — sees an ordinary shape and needs to know nothing about this.
+  if (raw.prim === 'ellipse') {
+    const { fill: _pf, stroke: _ps, subpaths: _psp, ...rest } = raw;
+    return deriveShape({
+      ...rest,
+      ...parseEllipseParams(raw),
+      fill: parsePaletteKey(raw.fill),
+      stroke: parsePaletteKey(raw.stroke),
+    });
+  }
+
+  const subpaths = Array.isArray(raw.subpaths)
+    ? raw.subpaths.map(parseSubpath).filter(Boolean)
+    : [];
+  if (subpaths.length === 0 && raw.fill == null && raw.stroke == null) return null;
+  // Preserve unknown keys for additive future variants.
+  const { fill: _f, stroke: _s, subpaths: _sp, ...rest } = raw;
+  return {
+    ...rest,
+    fill: parsePaletteKey(raw.fill),
+    stroke: parsePaletteKey(raw.stroke),
+    subpaths,
+  };
+}
+
+/**
+ * Tolerantly parse a cell's `path` field. Returns null when unusable at the
+ * TOP level (no `shapes` array) — callers then treat the cell as a plain
+ * pixel cell (grid is truth regardless). Malformed shapes/subpaths drop
+ * individually.
+ */
+export function parsePathData(raw) {
+  if (!raw || typeof raw !== 'object' || !Array.isArray(raw.shapes)) return null;
+  const shapes = raw.shapes.map(parseShape).filter(Boolean);
+  return { shapes };
+}
+
+/** Serialize path, or undefined when empty (omit-when-default). */
+export function serializePathData(path) {
+  if (isEmptyPathData(path)) return undefined;
+  return {
+    shapes: path.shapes.map((shape) => {
+      const { fill, stroke, subpaths, ...rest } = shape;
+      if (isPrimitiveShape(shape)) {
+        return {
+          ...rest,
+          fill: fill ?? null,
+          stroke: stroke ?? null,
+          cx: roundCoord(shape.cx),
+          cy: roundCoord(shape.cy),
+          rx: roundCoord(shape.rx),
+          ry: roundCoord(shape.ry),
+        };
+      }
+      return {
+        ...rest,
+        fill: fill ?? null,
+        stroke: stroke ?? null,
+        subpaths: (subpaths ?? []).map((sub) => serializeSubpath(sub)),
+      };
+    }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Curve sampling + stroke rasterization
+// ---------------------------------------------------------------------------
+
+function dist(a, b) {
+  return Math.hypot(b[0] - a[0], b[1] - a[1]);
+}
+
+export function cubicPoint(p0, c1, c2, p1, t) {
+  const mt = 1 - t;
+  const a = mt * mt * mt;
+  const b = 3 * mt * mt * t;
+  const c = 3 * mt * t * t;
+  const d = t * t * t;
+  return [
+    a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0],
+    a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1],
+  ];
+}
+
+export function sampleEdgeCurve(edge, verts) {
+  const p0 = verts[edge.a] ?? [0, 0];
+  const p1 = verts[edge.b] ?? [0, 0];
+  const points = [];
+  // Representation layer: stored handles win. Bow-only edges (gesture previews,
+  // no handles yet) sample the arc chain. Wide arcs are already split into ≤90°
+  // cubics at every write/parse funnel, so a single stored cubic never spans one.
+  let segs = null;
+  if (edge.ha || edge.hb) {
+    segs = [
+      {
+        c1: edge.ha ? [p0[0] + edge.ha[0], p0[1] + edge.ha[1]] : p0,
+        c2: edge.hb ? [p1[0] + edge.hb[0], p1[1] + edge.hb[1]] : p1,
+        to: p1,
+      },
+    ];
+  } else if (edge.bow != null) {
+    segs = arcCubics(p0, p1, edge.bow);
+  }
+  if (!segs) {
+    const steps = Math.max(1, Math.ceil(dist(p0, p1) * 4));
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      points.push({
+        x: p0[0] + (p1[0] - p0[0]) * t,
+        y: p0[1] + (p1[1] - p0[1]) * t,
+        t,
+      });
+    }
+    return points;
+  }
+  let from = p0;
+  segs.forEach((seg, segIndex) => {
+    const approxLength =
+      dist(from, seg.c1) + dist(seg.c1, seg.c2) + dist(seg.c2, seg.to);
+    const steps = Math.max(12, Math.ceil(approxLength * 4));
+    for (let i = segIndex === 0 ? 0 : 1; i <= steps; i++) {
+      const local = i / steps;
+      const [x, y] = cubicPoint(from, seg.c1, seg.c2, seg.to, local);
+      points.push({ x, y, t: (segIndex + local) / segs.length });
+    }
+    from = seg.to;
+  });
+  return points;
+}
+
+const BOUNDARY_EPS = 1e-7;
+
+function quantizeAxis(v, centroid) {
+  const nearest = Math.round(v);
+  if (Math.abs(v - nearest) >= BOUNDARY_EPS) return Math.floor(v);
+  if (Math.abs(v - centroid) < BOUNDARY_EPS) return Math.floor(v);
+  return v < centroid ? nearest - 1 : nearest;
+}
+
+function flattenEdge(edge, verts) {
+  const samples = sampleEdgeCurve(edge, verts);
+  if (samples.length === 0) return { points: [], cx: 0, cy: 0 };
+  let cx = 0;
+  let cy = 0;
+  for (const s of samples) {
+    cx += s.x;
+    cy += s.y;
+  }
+  cx /= samples.length;
+  cy /= samples.length;
+  return {
+    points: samples.map(({ x, y, t }) => ({
+      x: quantizeAxis(x, cx),
+      y: quantizeAxis(y, cy),
+      t,
+    })),
+    cx,
+    cy,
+  };
+}
+
+function bresenham(a, b) {
+  const pts = [];
+  let x = a.x;
+  let y = a.y;
+  const dx = Math.abs(b.x - x);
+  const dy = Math.abs(b.y - y);
+  const sx = b.x >= x ? 1 : -1;
+  const sy = b.y >= y ? 1 : -1;
+  let err = dx - dy;
+  for (;;) {
+    pts.push({ x, y });
+    if (x === b.x && y === b.y) break;
+    const e2 = err * 2;
+    if (e2 > -dy) {
+      err -= dy;
+      x += sx;
+    }
+    if (e2 < dx) {
+      err += dx;
+      y += sy;
+    }
+  }
+  const t0 = typeof a.t === 'number' ? a.t : 0;
+  const t1 = typeof b.t === 'number' ? b.t : t0;
+  if (pts.length === 1) {
+    pts[0].t = t0;
+  } else {
+    for (let i = 0; i < pts.length; i++) {
+      pts[i].t = t0 + (t1 - t0) * (i / (pts.length - 1));
+    }
+  }
+  return pts;
+}
+
+function repairChain(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out[out.length - 1];
+    if (last && last.x === p.x && last.y === p.y) continue;
+    if (last && (Math.abs(p.x - last.x) > 1 || Math.abs(p.y - last.y) > 1)) {
+      const bridge = bresenham(last, p);
+      for (let i = 1; i < bridge.length - 1; i++) out.push(bridge[i]);
+    }
+    out.push(p);
+  }
+  return out;
+}
+
+function isElbow(prev, cur, next) {
+  const diagonal = Math.abs(next.x - prev.x) === 1 && Math.abs(next.y - prev.y) === 1;
+  return (
+    diagonal && ((cur.x === prev.x && cur.y === next.y) || (cur.y === prev.y && cur.x === next.x))
+  );
+}
+
+function cellDist2(p, cx, cy) {
+  const dx = p.x + 0.5 - cx;
+  const dy = p.y + 0.5 - cy;
+  return dx * dx + dy * dy;
+}
+
+function cleanupCorners(chain, cx, cy) {
+  if (chain.length < 3) return chain.slice();
+  const candidates = [];
+  for (let i = 1; i < chain.length - 1; i++) {
+    const prev = chain[i - 1];
+    const cur = chain[i];
+    const next = chain[i + 1];
+    if (!isElbow(prev, cur, next)) continue;
+    const opp = {
+      x: prev.x === cur.x ? next.x : prev.x,
+      y: prev.y === cur.y ? next.y : prev.y,
+    };
+    const d = cellDist2(cur, cx, cy);
+    if (d > cellDist2(opp, cx, cy)) candidates.push({ i, d });
+  }
+  candidates.sort(
+    (a, b) =>
+      b.d - a.d ||
+      Math.abs(chain[b.i].x + 0.5 - cx) - Math.abs(chain[a.i].x + 0.5 - cx) ||
+      Math.abs(chain[b.i].y + 0.5 - cy) - Math.abs(chain[a.i].y + 0.5 - cy),
+  );
+  const dropped = new Set();
+  for (const { i } of candidates) {
+    dropped.add(i);
+    let ok = true;
+    let prevKept = -1;
+    for (let j = 0; j < chain.length; j++) {
+      if (dropped.has(j)) continue;
+      if (prevKept >= 0) {
+        const a = chain[prevKept];
+        const b = chain[j];
+        if (Math.abs(a.x - b.x) > 1 || Math.abs(a.y - b.y) > 1) {
+          ok = false;
+          break;
+        }
+      }
+      prevKept = j;
+    }
+    if (!ok) dropped.delete(i);
+  }
+  return chain.filter((_, i) => !dropped.has(i));
+}
+
+/** Flatten → repair → direction-invariant corner cleanup. */
+export function traceEdgePixels(edge, verts) {
+  const { points, cx, cy } = flattenEdge(edge, verts);
+  return cleanupCorners(repairChain(points), cx, cy);
+}
+
+export function closestParamOnEdge(edge, verts, x, y) {
+  const samples = sampleEdgeCurve(edge, verts);
+  let bestT = 0.5;
+  let bestD = Infinity;
+  for (const s of samples) {
+    const dx = s.x - x;
+    const dy = s.y - y;
+    const d = dx * dx + dy * dy;
+    if (d < bestD) {
+      bestD = d;
+      bestT = s.t;
+    }
+  }
+  return bestT;
+}
+
+// ---------------------------------------------------------------------------
+// Detented bow vocabulary
+// ---------------------------------------------------------------------------
+
+const BOW_EPS = 1e-12;
+
+function chordNormal(pa, pb) {
+  const dx = pb[0] - pa[0];
+  const dy = pb[1] - pa[1];
+  const L = Math.hypot(dx, dy);
+  if (L < BOW_EPS) return { L: 0, nx: 0, ny: 0, dx, dy };
+  return { L, nx: -dy / L, ny: dx / L, dx, dy };
+}
+
+// Detent ratios = tan(θ/4)/2 for central angles θ ∈ {0°, 45°, 90°, 135°, 180°}.
+// For a circular arc of chord L spanning central angle θ, sagitta/L = tan(θ/4)/2.
+// Detents therefore describe arc SHAPE (how much of a circle), not apex
+// position: scale-invariant, and the quarter-circle detent (θ=90°) means four
+// anchors on a circle's cardinals produce an exact circle at every radius.
+// Top detent is 0.5 (semicircle), so |bow| ≤ L/2 is subsumed.
+const BOW_RATIO_DETENTS = [0, 45, 90, 135, 180].map(
+  (deg) => Math.tan(((deg * Math.PI) / 180) / 4) / 2,
+);
+
+/** Semicircle — also the top detent. */
+const MAX_BOW_RATIO = 0.5;
+
+/**
+ * How near a detent a raw ratio must fall to be pulled onto it. Ratio units,
+ * so it is scale-invariant like the detents themselves. Detent gaps run
+ * 0.099–0.166, so this magnetizes roughly the outer fifth of each gap.
+ * Purely a feel constant — tune it here.
+ */
+export const BOW_DETENT_PULL = 0.03;
+
+/**
+ * Resolve a raw sagitta against the ratio detents, clamped to a semicircle.
+ * Detents are magnetic (BOW_DETENT_PULL), not mandatory — used by bend/gesture
+ * tooling; storage is cubics.
+ */
+export function snapBow(bow, chordLength, pull = BOW_DETENT_PULL) {
+  if (!(chordLength > BOW_EPS) || !Number.isFinite(bow)) return 0;
+  const ratio = bow / chordLength;
+  const sign = ratio < 0 ? -1 : 1;
+  // Clamp to a semicircle so the bow matches what handlesForBow / arcCubics
+  // will draw (they clamp too).
+  const abs = Math.min(MAX_BOW_RATIO, Math.abs(ratio));
+  let best = BOW_RATIO_DETENTS[0];
+  let bestDist = Infinity;
+  for (const d of BOW_RATIO_DETENTS) {
+    const dist = Math.abs(abs - d);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = d;
+    }
+  }
+  const resolved = bestDist <= pull ? best : abs;
+  const out = sign * resolved * chordLength;
+  if (Math.abs(out) < BOW_EPS) return 0;
+  return out;
+}
+
+export function handlesForBow(pa, pb, bow) {
+  if (!pa || !pb || !Number.isFinite(bow)) return null;
+  const { L, nx, ny } = chordNormal(pa, pb);
+  if (L < BOW_EPS) return null;
+  const maxBow = L / 2;
+  let s = Math.min(maxBow, Math.max(-maxBow, bow));
+  if (Math.abs(s) < BOW_EPS) return null;
+
+  const R = (s * s + (L * L) / 4) / (2 * Math.abs(s));
+  const mx = (pa[0] + pb[0]) / 2;
+  const my = (pa[1] + pb[1]) / 2;
+  const sign = s > 0 ? 1 : -1;
+  const cx = mx + (s - sign * R) * nx;
+  const cy = my + (s - sign * R) * ny;
+
+  const sinPhi = Math.min(1, L / (2 * R));
+  const phi = Math.asin(sinPhi);
+  const k = ((4 / 3) * Math.tan(phi / 2)) * R;
+
+  let rax = pa[0] - cx;
+  let ray = pa[1] - cy;
+  let rbx = pb[0] - cx;
+  let rby = pb[1] - cy;
+  const raLen = Math.hypot(rax, ray);
+  const rbLen = Math.hypot(rbx, rby);
+  if (raLen < BOW_EPS || rbLen < BOW_EPS) return null;
+  rax /= raLen;
+  ray /= raLen;
+  rbx /= rbLen;
+  rby /= rbLen;
+
+  const toApexX = mx + s * nx - cx;
+  const toApexY = my + s * ny - cy;
+  const ccw = rax * toApexY - ray * toApexX >= 0;
+  const tax = ccw ? -ray : ray;
+  const tay = ccw ? rax : -rax;
+  const tbx = ccw ? -rby : rby;
+  const tby = ccw ? rbx : -rbx;
+
+  return {
+    ha: [k * tax, k * tay],
+    hb: [-k * tbx, -k * tby],
+  };
+}
+
+/**
+ * Widest arc drawn as a single cubic. One cubic tracks a circular arc well only
+ * while the span stays small, and the falloff is steep: at radius 4 a 90° span
+ * is off by 0.001 cells, but a 180° span — a pill's cap, or any bow at the
+ * semicircle clamp — is off by 0.073, which is visible. Since a bow can never
+ * exceed a semicircle, this ceiling means at most two cubics per edge.
+ */
+const MAX_CUBIC_ARC = Math.PI / 2;
+
+/**
+ * The arc a bow describes, as centre, radius, start angle and signed sweep.
+ * Null when the bow is too slight to be an arc at all.
+ */
+function arcFromBow(pa, pb, bow) {
+  if (!pa || !pb || !Number.isFinite(bow)) return null;
+  const { L, nx, ny } = chordNormal(pa, pb);
+  if (L < BOW_EPS) return null;
+  const maxBow = L / 2;
+  const s = Math.min(maxBow, Math.max(-maxBow, bow));
+  if (Math.abs(s) < BOW_EPS) return null;
+
+  const R = (s * s + (L * L) / 4) / (2 * Math.abs(s));
+  const mx = (pa[0] + pb[0]) / 2;
+  const my = (pa[1] + pb[1]) / 2;
+  const sign = s > 0 ? 1 : -1;
+  const cx = mx + (s - sign * R) * nx;
+  const cy = my + (s - sign * R) * ny;
+  if (!(R > BOW_EPS)) return null;
+
+  // The apex tells us which way round the centre the arc actually travels.
+  const rax = pa[0] - cx;
+  const ray = pa[1] - cy;
+  const ccw = rax * (my + s * ny - cy) - ray * (mx + s * nx - cx) >= 0;
+  const sweep = 2 * Math.asin(Math.min(1, L / (2 * R))) * (ccw ? 1 : -1);
+  return { cx, cy, R, a0: Math.atan2(ray, rax), sweep };
+}
+
+/**
+ * A bow as a chain of absolute cubic segments `{ c1, c2, to }`, subdivided so
+ * no segment spans more than MAX_CUBIC_ARC. Callers that draw or flatten a bow
+ * should use this; `handlesForBow` remains the single-cubic form, still useful
+ * as a "can this bow be drawn at all" predicate.
+ */
+export function arcCubics(pa, pb, bow) {
+  const arc = arcFromBow(pa, pb, bow);
+  if (!arc) return null;
+  const { cx, cy, R, a0, sweep } = arc;
+  const count = Math.max(1, Math.ceil(Math.abs(sweep) / MAX_CUBIC_ARC));
+  const step = sweep / count;
+  const k = ((4 / 3) * Math.tan(step / 4)) * R;
+
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const t0 = a0 + step * i;
+    const t1 = a0 + step * (i + 1);
+    const p0 = [cx + R * Math.cos(t0), cy + R * Math.sin(t0)];
+    const p1 = [cx + R * Math.cos(t1), cy + R * Math.sin(t1)];
+    // Tangents point along the sweep, so k carries the sweep's sign with it.
+    out.push({
+      c1: [p0[0] - k * Math.sin(t0), p0[1] + k * Math.cos(t0)],
+      c2: [p1[0] + k * Math.sin(t1), p1[1] - k * Math.cos(t1)],
+      to: i === count - 1 ? [pb[0], pb[1]] : p1,
+    });
+  }
+  return out;
+}
+
+/** Max signed orthogonal distance of samples from chord pa→pb. */
+export function sagittaAgainstChord(samples, pa, pb) {
+  const { L, dx, dy } = chordNormal(pa, pb);
+  if (L < BOW_EPS) return 0;
+  let bestDist = 0;
+  let bestSign = 0;
+  for (const s of samples) {
+    const cross = dx * (s.y - pa[1]) - dy * (s.x - pa[0]);
+    const side = cross / L;
+    const ad = Math.abs(side);
+    if (ad > bestDist) {
+      bestDist = ad;
+      bestSign = side >= 0 ? 1 : -1;
+    }
+  }
+  if (bestDist < BOW_EPS) return 0;
+  return bestSign * bestDist;
+}
+
+export function bowForEdge(edge, verts) {
+  if (!edge || !verts) return 0;
+  const pa = verts[edge.a];
+  const pb = verts[edge.b];
+  if (!pa || !pb) return 0;
+  return sagittaAgainstChord(sampleEdgeCurve(edge, verts), pa, pb);
+}
+
+// ---------------------------------------------------------------------------
+// Segment-list subpath model (cubic segments)
+// ---------------------------------------------------------------------------
+
+function stripZeroHandles(seg) {
+  const out = { to: [seg.to[0], seg.to[1]] };
+  if (seg.c1 && (Math.abs(seg.c1[0]) > BOW_EPS || Math.abs(seg.c1[1]) > BOW_EPS)) {
+    out.c1 = [seg.c1[0], seg.c1[1]];
+  }
+  if (seg.c2 && (Math.abs(seg.c2[0]) > BOW_EPS || Math.abs(seg.c2[1]) > BOW_EPS)) {
+    out.c2 = [seg.c2[0], seg.c2[1]];
+  }
+  return out;
+}
+
+function segmentFromAbsolute(from, to, c1Abs, c2Abs) {
+  const seg = { to: [to[0], to[1]] };
+  if (c1Abs) {
+    const d1 = [c1Abs[0] - from[0], c1Abs[1] - from[1]];
+    if (Math.hypot(d1[0], d1[1]) >= BOW_EPS) seg.c1 = d1;
+  }
+  if (c2Abs) {
+    const d2 = [c2Abs[0] - to[0], c2Abs[1] - to[1]];
+    if (Math.hypot(d2[0], d2[1]) >= BOW_EPS) seg.c2 = d2;
+  }
+  return stripZeroHandles(seg);
+}
+
+export function absoluteSegment(from, seg) {
+  const to = seg.to;
+  const c1 = seg.c1 ? [from[0] + seg.c1[0], from[1] + seg.c1[1]] : [from[0], from[1]];
+  const c2 = seg.c2 ? [to[0] + seg.c2[0], to[1] + seg.c2[1]] : [to[0], to[1]];
+  return { from, to, c1, c2 };
+}
+
+export function bowToSegments(from, to, bow) {
+  if (Math.abs(bow) < BOW_EPS) return [straightSegment(to)];
+  const cubics = arcCubics(from, to, bow);
+  if (!cubics?.length) return [straightSegment(to)];
+  const out = [];
+  let cur = from;
+  for (const c of cubics) {
+    out.push(segmentFromAbsolute(cur, c.to, c.c1, c.c2));
+    cur = c.to;
+  }
+  return out;
+}
+
+/**
+ * Drop a closing segment that only restates `start` in a straight line.
+ *
+ * Closure is implicit, as in SVG's `Z`: a closed subpath's segment list ends at
+ * its last distinct vertex, and the edge back to `start` is synthesized on read.
+ * A *curved* close can't be synthesized — it carries handles — so it stays an
+ * explicit final segment, which is why subpathClosesOnStart still has work to
+ * do. Canonicalizing here, on the one funnel every reader goes through, is what
+ * keeps the two forms from coexisting in memory and disagreeing on edge count.
+ */
+function canonicalizeSubpath(sub) {
+  const segs = sub.segs ?? [];
+  const last = segs[segs.length - 1];
+  if (!sub.closed || !last || last.c1 || last.c2) return sub;
+  if (!pointsEqual(last.to, sub.start)) return sub;
+  return { ...sub, segs: segs.slice(0, -1) };
+}
+
+/** Canonical start/segs form (clone + drop redundant straight closes). */
+export function normalizeSubpath(sub) {
+  if (!sub || typeof sub !== 'object' || !Array.isArray(sub.start)) return sub;
+  return canonicalizeSubpath({
+    closed: !!sub.closed,
+    start: [sub.start[0], sub.start[1]],
+    segs: (sub.segs ?? []).map(cloneSegment),
+  });
+}
+
+/**
+ * True when the subpath carries an explicit closing segment duplicating `start`.
+ *
+ * That duplicate is vertex 0, not a vertex of its own, so it is invisible to
+ * subpathPoints. Anything that rebuilds segments by index must map the closing
+ * segment back to vertex 0 — indexing it as `segIndex + 1` strands it at the old
+ * coordinate, which surfaces as a phantom anchor and a spike back to where the
+ * shape used to be. Expects a start-form subpath (normalizeSubpath output).
+ */
+export function subpathClosesOnStart(sub) {
+  const segs = sub.segs ?? [];
+  return sub.closed && segs.length > 0 && pointsEqual(segs[segs.length - 1].to, sub.start);
+}
+
+/** Distinct anchor count (closing duplicate omitted). */
+export function subpathVertexCount(sub) {
+  const s = normalizeSubpath(sub);
+  const segs = s.segs ?? [];
+  if (!s?.start) return 0;
+  if (!segs.length) return 1;
+  if (subpathClosesOnStart(s)) return segs.length;
+  return 1 + segs.length;
+}
+
+export function subpathPointAt(sub, index) {
+  const s = normalizeSubpath(sub);
+  const segs = s.segs ?? [];
+  if (!s?.start || index < 0) return null;
+  if (index === 0) return [s.start[0], s.start[1]];
+  if (subpathClosesOnStart(s)) {
+    if (index >= segs.length) return null;
+    return [segs[index - 1].to[0], segs[index - 1].to[1]];
+  }
+  const seg = segs[index - 1];
+  return seg ? [seg.to[0], seg.to[1]] : null;
+}
+
+export function subpathPoints(sub) {
+  const n = subpathVertexCount(sub);
+  const pts = [];
+  for (let i = 0; i < n; i++) {
+    const p = subpathPointAt(sub, i);
+    if (p) pts.push(p);
+  }
+  return pts;
+}
+
+/**
+ * True when the edge back to `start` is implied rather than stored — the
+ * canonical shape of a closed subpath whose closing edge is straight.
+ * Expects a canonicalized subpath (normalizeSubpath output).
+ */
+function hasImpliedClose(sub) {
+  return !!sub.closed && (sub.segs?.length ?? 0) > 0 && !subpathClosesOnStart(sub);
+}
+
+export function subpathEdgeCount(sub) {
+  const s = normalizeSubpath(sub);
+  const n = s.segs?.length ?? 0;
+  return hasImpliedClose(s) ? n + 1 : n;
+}
+
+export function subpathEdgeFrom(sub, edgeIndex) {
+  const s = normalizeSubpath(sub);
+  const segs = s.segs ?? [];
+  if (edgeIndex === segs.length && hasImpliedClose(s)) {
+    return {
+      from: subpathPointAt(s, segs.length),
+      seg: straightSegment([s.start[0], s.start[1]]),
+    };
+  }
+  const seg = segs[edgeIndex];
+  if (!seg) return null;
+  const from =
+    edgeIndex === 0
+      ? [s.start[0], s.start[1]]
+      : subpathPointAt(s, edgeIndex);
+  return { from, seg };
+}
+
+export function segmentToEdge(from, seg, strokeKey = null) {
+  const edge = { a: 0, b: 1, key: strokeKey };
+  if (seg.c1) edge.ha = [seg.c1[0], seg.c1[1]];
+  if (seg.c2) edge.hb = [seg.c2[0], seg.c2[1]];
+  return edge;
+}
+
+export function bowForSegment(from, seg) {
+  return bowForEdge(segmentToEdge(from, seg), [from, seg.to]);
+}
+
+function lerpPoint(a, b, t) {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+
+/** de Casteljau split of one cubic segment at parameter t ∈ [0,1]. */
+export function deCasteljauSplit(from, seg, t) {
+  const { from: p0, to: p3, c1: p1, c2: p2 } = absoluteSegment(from, seg);
+  if (!seg.c1 && !seg.c2) {
+    const mid = lerpPoint(p0, p3, t);
+    return {
+      mid,
+      left: straightSegment(mid),
+      right: straightSegment(p3),
+    };
+  }
+  const p01 = lerpPoint(p0, p1, t);
+  const p12 = lerpPoint(p1, p2, t);
+  const p23 = lerpPoint(p2, p3, t);
+  const p012 = lerpPoint(p01, p12, t);
+  const p123 = lerpPoint(p12, p23, t);
+  const p0123 = lerpPoint(p012, p123, t);
+  return {
+    mid: [p0123[0], p0123[1]],
+    left: segmentFromAbsolute(p0, p0123, p01, p012),
+    right: segmentFromAbsolute(p0123, p3, p123, p23),
+  };
+}
+
+function serializeSegment(seg) {
+  const out = { to: roundPoint(seg.to[0], seg.to[1]) };
+  if (seg.c1) out.c1 = [roundCoord(seg.c1[0]), roundCoord(seg.c1[1])];
+  if (seg.c2) out.c2 = [roundCoord(seg.c2[0]), roundCoord(seg.c2[1])];
+  return out;
+}
+
+function serializeSubpath(sub) {
+  const norm = normalizeSubpath(sub);
+  return {
+    closed: !!norm.closed,
+    start: roundPoint(norm.start[0], norm.start[1]),
+    segs: (norm.segs ?? []).map(serializeSegment),
+  };
+}
+
+export function transformSegmentHandles(seg, mapVector) {
+  const out = { to: [seg.to[0], seg.to[1]] };
+  if (seg.c1) {
+    const v = mapVector(seg.c1);
+    if (Math.hypot(v[0], v[1]) >= BOW_EPS) out.c1 = v;
+  }
+  if (seg.c2) {
+    const v = mapVector(seg.c2);
+    if (Math.hypot(v[0], v[1]) >= BOW_EPS) out.c2 = v;
+  }
+  return stripZeroHandles(out);
+}
+
+// ---------------------------------------------------------------------------
+// Stacked bake
+// ---------------------------------------------------------------------------
+
+export const FILL_SUPERSAMPLE = 4;
+
+function sampleCubic(p0, c1, c2, p1, steps) {
+  const out = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    out.push(cubicPoint(p0, c1, c2, p1, t));
+  }
+  return out;
+}
+
+/**
+ * Flatten one subpath to a polyline via cubic segments.
+ *
+ * A closed subpath's polyline returns to `start`, walking the implied closing
+ * edge. Point-in-polygon does not need that — it wraps — but anything that
+ * measures or samples *along* the outline does: without it, dense sampling has
+ * no points on one whole side, which silently blinded the punch-hole
+ * containment test on every ring's closing edge.
+ */
+export function flattenSubpath(sub, stepsPerUnit = 4) {
+  const norm = normalizeSubpath(sub);
+  const pts = [];
+  if (!norm?.start) return pts;
+  pts.push([norm.start[0], norm.start[1]]);
+  let from = norm.start;
+  for (const seg of norm.segs ?? []) {
+    const to = seg.to;
+    const { c1, c2 } = absoluteSegment(from, seg);
+    const L = Math.hypot(to[0] - from[0], to[1] - from[1]);
+    if (L < 1e-12) {
+      from = to;
+      continue;
+    }
+    if (!seg.c1 && !seg.c2) {
+      pts.push([to[0], to[1]]);
+      from = to;
+      continue;
+    }
+    const steps = Math.max(4, Math.ceil(L * stepsPerUnit));
+    const samples = sampleCubic(from, c1, c2, to, steps);
+    for (let k = 1; k < samples.length; k++) pts.push(samples[k]);
+    from = to;
+  }
+  if (hasImpliedClose(norm)) pts.push([norm.start[0], norm.start[1]]);
+  return pts;
+}
+
+function pointInPolyEvenOdd(px, py, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const xi = poly[i][0];
+    const yi = poly[i][1];
+    const xj = poly[j][0];
+    const yj = poly[j][1];
+    if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi || Number.EPSILON) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+function shapeContains(rings, px, py) {
+  let inside = false;
+  for (const ring of rings) {
+    if (ring.length >= 3 && pointInPolyEvenOdd(px, py, ring)) inside = !inside;
+  }
+  return inside;
+}
+
+function closedRings(shape) {
+  const rings = [];
+  for (const sub of shape?.subpaths ?? []) {
+    if (!sub.closed) continue;
+    const poly = flattenSubpath(sub, 6);
+    if (poly.length >= 3) rings.push(poly);
+  }
+  return rings;
+}
+
+/** Even-odd fill test for a shape's closed subpaths (editor hit-testing). */
+export function shapeContainsPoint(shape, px, py) {
+  if (!shape) return false;
+  return shapeContains(closedRings(shape), px, py);
+}
+
+/** Visit each native pixel a shape's stroke would stamp (editor + bake). */
+export function forEachStrokePixel(shape, visit) {
+  if (!shape?.stroke) return;
+  for (const sub of shape.subpaths ?? []) {
+    const { verts, edges } = edgeObjectsForSubpath(sub, shape.stroke);
+    for (const edge of edges) {
+      for (const p of traceEdgePixels(edge, verts)) visit(p.x, p.y);
+    }
+  }
+}
+
+/** Build edge objects for one subpath (shared by bake + editor). */
+export function edgeObjectsForSubpath(sub, strokeKey = null) {
+  const norm = normalizeSubpath(sub);
+  const verts = [[norm.start[0], norm.start[1]]];
+  for (const seg of norm.segs ?? []) verts.push([seg.to[0], seg.to[1]]);
+  const edges = [];
+  (norm.segs ?? []).forEach((seg, i) => {
+    const edge = { a: i, b: i + 1, key: strokeKey };
+    if (seg.c1) edge.ha = [seg.c1[0], seg.c1[1]];
+    if (seg.c2) edge.hb = [seg.c2[0], seg.c2[1]];
+    edges.push(edge);
+  });
+  if (hasImpliedClose(norm)) edges.push({ a: verts.length - 1, b: 0, key: strokeKey });
+  return { verts, edges };
+}
+
+/**
+ * Majority-downsample a supersampled key raster.
+ * Cell paints when painted subpixels cover ≥ half (ties paint).
+ * Color = majority key among painted subpixels; on key-count ties prefer the
+ * key with the highest last-paint order (painter's-order tiebreak).
+ *
+ * `orderSS` is parallel to `fillSS`: each painted subpixel carries the stack
+ * paint order at which it was last written (higher = later).
+ */
+function downsampleCompositeMajority(fillSS, orderSS, width, height, scale) {
+  const fill = Array.from({ length: height }, () => new Array(width).fill(null));
+  const minCoverage = (scale * scale) / 2;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const counts = new Map();
+      const maxOrder = new Map();
+      let covered = 0;
+      for (let sy = 0; sy < scale; sy++) {
+        for (let sx = 0; sx < scale; sx++) {
+          const key = fillSS[y * scale + sy][x * scale + sx];
+          if (key == null) continue;
+          covered += 1;
+          counts.set(key, (counts.get(key) ?? 0) + 1);
+          const ord = orderSS[y * scale + sy][x * scale + sx];
+          maxOrder.set(key, Math.max(maxOrder.get(key) ?? -1, ord));
+        }
+      }
+      if (covered < minCoverage) continue;
+      let best = null;
+      let bestCount = -1;
+      let bestOrd = -1;
+      for (const [k, n] of counts) {
+        const ord = maxOrder.get(k) ?? -1;
+        if (n > bestCount || (n === bestCount && ord > bestOrd) || (n === bestCount && ord === bestOrd && k < best)) {
+          bestCount = n;
+          bestOrd = ord;
+          best = k;
+        }
+      }
+      fill[y][x] = best;
+    }
+  }
+  return fill;
+}
+
+/**
+ * The supersample index window covering `rings`, clipped to the canvas. Returns
+ * null when the rings fall entirely outside it.
+ *
+ * A shape can only fill samples inside its own bounding box, so this is what
+ * keeps the fill scan proportional to the SHAPE rather than the canvas. Without
+ * it the scan is canvas-area × supersample² × shape count, and since the
+ * supersample is squared, the cost grows with the fourth power of resolution:
+ * shapes that are cheap on a 16x16 sprite are not merely slower at 64x64, they
+ * are unusable, and nothing in the editor hints at why.
+ */
+function ringsSampleWindow(rings, width, height, scale) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const ring of rings) {
+    for (const [x, y] of ring) {
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  if (!(minX <= maxX && minY <= maxY)) return null;
+  // Sample centers sit at (i + 0.5) / scale, so a sample is in range when
+  // i >= minX * scale - 0.5. Floor/ceil out by one to stay conservative.
+  const x0 = Math.max(0, Math.floor(minX * scale - 0.5));
+  const x1 = Math.min(width * scale - 1, Math.ceil(maxX * scale + 0.5));
+  const y0 = Math.max(0, Math.floor(minY * scale - 0.5));
+  const y1 = Math.min(height * scale - 1, Math.ceil(maxY * scale + 0.5));
+  if (x0 > x1 || y0 > y1) return null;
+  return { x0, x1, y0, y1 };
+}
+
+/**
+ * The x where each ring edge crosses the horizontal line y = py, unsorted.
+ * Reuses `out` so the fill scan doesn't allocate per row.
+ */
+function crossingsAtRow(rings, py, out) {
+  out.length = 0;
+  for (const ring of rings) {
+    if (ring.length < 3) continue;
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+      const yi = ring[i][1];
+      const yj = ring[j][1];
+      if (yi > py === yj > py) continue;
+      const xi = ring[i][0];
+      const xj = ring[j][0];
+      out.push(((xj - xi) * (py - yi)) / (yj - yi || Number.EPSILON) + xi);
+    }
+  }
+  return out;
+}
+
+/**
+ * Paint a shape's fill by scanning row by row rather than testing every sample
+ * against every edge.
+ *
+ * Sampling each point independently costs edge-count work per sample, so the
+ * fill is canvas-area × supersample² × edges × shapes. The supersample is
+ * squared, so cost climbs with the FOURTH power of resolution: shapes that bake
+ * instantly at 16x16 take seconds at 128x128, and the editor gives no hint why.
+ * Every sample in a row crosses the same edges, so the crossings are computed
+ * once per row and each sample just reads its parity — edges + width per row
+ * instead of edges × width.
+ *
+ * The parity walk deliberately reuses the exact `px < crossing` comparison the
+ * per-sample test used, on the same `px`, so this is bit-identical to the naive
+ * scan rather than merely equivalent in principle. Even-odd applies across ALL
+ * rings at once (that is what makes multi-subpath donuts work), which is why
+ * every ring's crossings go into one sorted list.
+ */
+function paintFillIntoComposite(fillSS, orderSS, shape, order, width, height, scale) {
+  if (!shape.fill) return;
+  const rings = closedRings(shape);
+  if (!rings.length) return;
+  const window = ringsSampleWindow(rings, width, height, scale);
+  if (!window) return;
+
+  const crossings = [];
+
+  for (let y = window.y0; y <= window.y1; y++) {
+    const py = (y + 0.5) / scale;
+    crossingsAtRow(rings, py, crossings);
+    if (crossings.length === 0) continue;
+    crossings.sort(ascending);
+
+    const fillRow = fillSS[y];
+    const orderRow = orderSS[y];
+    // `next` is the first crossing to the right of the current sample. It only
+    // moves forward as x grows, so each row costs one pass over the crossings.
+    let next = 0;
+    for (let x = window.x0; x <= window.x1; x++) {
+      const px = (x + 0.5) / scale;
+      while (next < crossings.length && !(px < crossings[next])) next++;
+      if ((crossings.length - next) % 2 === 0) continue;
+      fillRow[x] = shape.fill;
+      orderRow[x] = order;
+    }
+  }
+}
+
+function ascending(a, b) {
+  return a - b;
+}
+
+function stampStrokeBlock(fillSS, orderSS, x, y, key, order, width, height, scale) {
+  if (x < 0 || y < 0 || x >= width || y >= height) return;
+  const y0 = y * scale;
+  const x0 = x * scale;
+  for (let sy = 0; sy < scale; sy++) {
+    for (let sx = 0; sx < scale; sx++) {
+      fillSS[y0 + sy][x0 + sx] = key;
+      orderSS[y0 + sy][x0 + sx] = order;
+    }
+  }
+}
+
+function paintStrokeIntoComposite(fillSS, orderSS, shape, order, width, height, scale) {
+  forEachStrokePixel(shape, (x, y) => {
+    stampStrokeBlock(fillSS, orderSS, x, y, shape.stroke, order, width, height, scale);
+  });
+}
+
+/**
+ * Normative stacked bake.
+ *
+ * Compositing fills at supersample BEFORE a single downsample means two
+ * abutting shapes' subpixels union across the shared boundary, so boundary
+ * cells go to whoever owns the majority — no 1px transparent gutters (the
+ * proto-stacked per-shape downsample left that artifact). Stroke cells stamp
+ * as full scale×scale blocks so 1px stroke discipline survives while a later
+ * shape's fill can still cover an earlier stroke (painter's order).
+ */
+export function bakePathCell(path, width, height) {
+  const outW = Math.max(0, width | 0);
+  const outH = Math.max(0, height | 0);
+  const grid = Array.from({ length: outH }, () => new Array(outW).fill(TRANSPARENT));
+  if (!path || outW === 0 || outH === 0) {
+    return grid.map((row) => row.join(''));
+  }
+
+  const S = FILL_SUPERSAMPLE;
+  const ssW = outW * S;
+  const ssH = outH * S;
+  const fillSS = Array.from({ length: ssH }, () => new Array(ssW).fill(null));
+  const orderSS = Array.from({ length: ssH }, () => new Array(ssW).fill(-1));
+
+  let order = 0;
+  for (const shape of path.shapes ?? []) {
+    // Fill then stroke within the shape; each write bumps paint order so
+    // stroke wins over that shape's own fill, and later shapes win ties.
+    paintFillIntoComposite(fillSS, orderSS, shape, order++, outW, outH, S);
+    paintStrokeIntoComposite(fillSS, orderSS, shape, order++, outW, outH, S);
+  }
+
+  const native = downsampleCompositeMajority(fillSS, orderSS, outW, outH, S);
+  for (let y = 0; y < outH; y++) {
+    for (let x = 0; x < outW; x++) {
+      if (native[y][x] != null) grid[y][x] = native[y][x];
+    }
+  }
+  return grid.map((row) => row.join(''));
+}
+
+/** Alias used by tests / validation. */
+export const bakeStacked = bakePathCell;
+
+/**
+ * Collect palette keys referenced by path source (for serialize pruning).
+ */
+export function pathSourceKeys(path) {
+  const used = new Set();
+  for (const shape of path?.shapes ?? []) {
+    if (shape.fill) used.add(shape.fill);
+    if (shape.stroke) used.add(shape.stroke);
+  }
+  return used;
+}