@weasel-js/guides 1.14.2 → 1.15.1

package/dist/index.js

@@ -1,12 +1,197 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { sceneBoxFrames, scenePoseFrame, resolveAxes, useLatest, viewportWorldRect, tickedSegment, measuredSegmentCommands, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, rectFromPlane, unionAABB, createTransformOp, asNodeId, sceneSharedUnitScopes, sceneUnitScopes, screenToWorld, nodeGates, resolveScoped, resolveStrokeWidth } from '@weasel-js/core';
-import { pointInPolygon, invert, applyToPoint, mat3, pxExtent, PATH_M, PATH_L, PATH_Z, pxExtentInFrame } from '@weasel-js/geom';
+import { sceneBoxFrames, scenePoseFrame, useLatest, viewportWorldRect, tickedSegment, measuredSegmentCommands, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, rectFromPlane, unionAABB, sceneMagnification, asNodeId, createTransformOp, sceneUnitScopes, screenToWorld, nodeGates, resolveStrokeWidth, resolveUnit, axisUnits, resolveScoped } from '@weasel-js/core';
+import { pointInPolygon, invert, mat3, applyToPoint, pxExtent, PATH_M, PATH_L, PATH_Z, pxExtentInFrame } from '@weasel-js/geom';
 
 // src/grid/roundToCell.ts
 function roundToCell(value, cellSize) {
   return Math.round(value / cellSize) * cellSize || 0;
 }
-function sceneGridRegions(scene, root, outlineOf) {
+
+// src/grid/axes.ts
+function isGridLength(v) {
+  return typeof v === "number" || typeof v === "object" && v !== null && "value" in v;
+}
+function resolveGridLines(spacing, read) {
+  const on = (axis) => {
+    const a = isGridLength(spacing) ? spacing : spacing[axis];
+    if (a === void 0) return null;
+    try {
+      return resolveAxis(a, (v) => read(v, axis));
+    } catch (e) {
+      throw new Error(`${axis} axis: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  };
+  return { x: on("x"), y: on("y") };
+}
+function resolveAxis(a, read) {
+  if (isGridLength(a)) return periodic(read(a), 0, -Infinity, Infinity);
+  if ("at" in a) {
+    const at = [...new Set(a.at.map(read))].filter(Number.isFinite).sort((p, q) => p - q);
+    return at.length ? { at } : null;
+  }
+  return periodic(
+    read(a.pitch),
+    a.offset === void 0 ? 0 : read(a.offset),
+    a.from === void 0 ? -Infinity : read(a.from),
+    a.to === void 0 ? Infinity : read(a.to)
+  );
+}
+function periodic(pitch, offset, from, to) {
+  return pitch > 0 && Number.isFinite(pitch) && from <= to ? { pitch, offset, from, to } : null;
+}
+var EPS = 1e-9;
+function indexRange(a) {
+  return [Math.ceil((a.from - a.offset) / a.pitch - EPS), Math.floor((a.to - a.offset) / a.pitch + EPS)];
+}
+function linesNear(a, v) {
+  let pair;
+  if ("at" in a) {
+    const i = Math.min(Math.max(0, lastAtOrBefore(a.at, v)), Math.max(0, a.at.length - 2));
+    pair = a.at.slice(i, i + 2);
+  } else {
+    const [lo3, hi3] = indexRange(a);
+    if (lo3 > hi3) return [];
+    const k = Math.min(Math.max(Math.floor((v - a.offset) / a.pitch), lo3), Math.max(lo3, hi3 - 1));
+    pair = k + 1 <= hi3 ? [a.offset + k * a.pitch, a.offset + (k + 1) * a.pitch] : [a.offset + k * a.pitch];
+  }
+  return pair.length === 2 && v - pair[0] >= pair[1] - v ? [pair[1], pair[0]] : pair;
+}
+function nearestLine(a, v) {
+  let best = null;
+  for (const l of linesNear(a, v)) if (best === null || Math.abs(l - v) < Math.abs(best - v)) best = l;
+  return best;
+}
+function linesIn(a, lo3, hi3) {
+  if ("at" in a) return a.at.filter((l) => l >= lo3 - EPS && l <= hi3 + EPS);
+  const [k0, k1] = indexRange({ ...a, from: Math.max(a.from, lo3), to: Math.min(a.to, hi3) });
+  const out = [];
+  for (let k = k0; k <= k1; k++) out.push(a.offset + k * a.pitch);
+  return out;
+}
+function cellOf(a, v) {
+  if (!a) return { index: 0, lo: -Infinity, hi: Infinity };
+  if ("at" in a) {
+    const i = lastAtOrBefore(a.at, v);
+    return i >= 0 && i < a.at.length - 1 ? { index: i, lo: a.at[i], hi: a.at[i + 1] } : null;
+  }
+  const [lo3, hi3] = indexRange(a);
+  const k = Math.floor((v - a.offset) / a.pitch);
+  if (k < lo3 || k >= hi3) return null;
+  return { index: k, lo: a.offset + k * a.pitch, hi: a.offset + (k + 1) * a.pitch };
+}
+function mapLines(a, scale, shift) {
+  const m = (p) => p * scale + shift;
+  if ("at" in a) return { at: a.at.map(m).sort((p, q) => p - q) };
+  const [from, to] = [m(a.from), m(a.to)].sort((p, q) => p - q);
+  return { pitch: Math.abs(a.pitch * scale), offset: m(a.offset), from: Number.isNaN(from) ? -Infinity : from, to: Number.isNaN(to) ? Infinity : to };
+}
+function lastAtOrBefore(at, v) {
+  let lo3 = 0;
+  let hi3 = at.length - 1;
+  let found = -1;
+  while (lo3 <= hi3) {
+    const mid2 = lo3 + hi3 >> 1;
+    if (at[mid2] <= v + EPS) {
+      found = mid2;
+      lo3 = mid2 + 1;
+    } else hi3 = mid2 - 1;
+  }
+  return found;
+}
+var MIN_SCREEN_SPACING = 4;
+function hasArea(r) {
+  return r.width > 0 && r.height > 0 && Number.isFinite(r.width) && Number.isFinite(r.height);
+}
+var other = (axis) => axis === "x" ? "y" : "x";
+function lattice(b, lines, shape, view, styles, frame) {
+  const px = frame ? pxExtentInFrame(1, view.scale, frame) : pxExtent(1, view.scale);
+  const span2 = { x: [b.x, b.x + b.width], y: [b.y, b.y + b.height] };
+  const children = [];
+  const across = (axis) => {
+    const a = lines[axis];
+    const [lo3, hi3] = span2[axis];
+    return a && "pitch" in a ? [Math.max(lo3, a.from), Math.min(hi3, a.to)] : [lo3, hi3];
+  };
+  const draw = (axis, at, s) => {
+    const [lo3, hi3] = across(other(axis));
+    if (!(hi3 > lo3)) return;
+    const width = resolveStrokeWidth(s.width ?? 1, 1) * px[axis];
+    for (const p of at) {
+      const coords = axis === "x" ? [p, lo3, p, hi3] : [lo3, p, hi3, p];
+      const path = {
+        kind: "polygon",
+        commands: new Uint8Array([PATH_M, PATH_L]),
+        coords: new Float32Array(coords),
+        fillRule: "nonzero"
+      };
+      children.push({ kind: "path", path, stroke: { ...s, width } });
+    }
+  };
+  const periodic2 = (axis, a, step, skipEvery, s) => {
+    if (!(step / px[axis] >= MIN_SCREEN_SPACING)) return;
+    const at = linesIn({ ...a, pitch: step }, ...span2[axis]);
+    draw(axis, skipEvery > 0 ? at.filter((p) => Math.round((p - a.offset) / step) % skipEvery !== 0) : at, s);
+  };
+  const { accentEvery, subdivisions } = shape;
+  const accentOn = accentEvery !== void 0 && accentEvery > 0;
+  const passes = [
+    // Sub-lines first so cell lines paint on top, accents last of all.
+    (axis, a) => {
+      if (subdivisions && subdivisions > 1) periodic2(axis, a, a.pitch / subdivisions, subdivisions, styles.sub);
+    },
+    (axis, a) => periodic2(axis, a, a.pitch, accentOn ? accentEvery : 0, styles.line),
+    (axis, a) => {
+      if (accentOn) periodic2(axis, a, a.pitch * accentEvery, 0, styles.accent);
+    }
+  ];
+  for (const pass of passes) {
+    for (const axis of ["x", "y"]) {
+      const a = lines[axis];
+      if (a && "pitch" in a) pass(axis, a);
+    }
+  }
+  for (const axis of ["x", "y"]) {
+    const a = lines[axis];
+    if (a && "at" in a) draw(axis, thinned(linesIn(a, ...span2[axis]), px[axis] * MIN_SCREEN_SPACING), styles.line);
+  }
+  return children;
+}
+function thinned(at, gap) {
+  const out = [];
+  for (const p of at) if (out.length === 0 || p - out[out.length - 1] >= gap) out.push(p);
+  return out;
+}
+function outlineBox(outline) {
+  const xs = outline.map((p) => p.x);
+  const ys = outline.map((p) => p.y);
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function intersect(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  return { x, y, width: Math.min(end(a.x, a.width), end(b.x, b.width)) - x, height: Math.min(end(a.y, a.height), end(b.y, b.height)) - y };
+}
+var end = (start, size) => size === Infinity ? Infinity : start + size;
+function span(v, chain) {
+  const zero = typeof v === "number" ? 0 : { ...v, value: 0 };
+  return resolveScoped(v, chain) - resolveScoped(zero, chain);
+}
+function gridLines(spacing, unitSystem, scopes, chain) {
+  if (!scopes) return resolveGridLines(spacing, (v, axis) => resolveUnit(v, axisUnits(unitSystem, axis)));
+  const at = chain ?? [scopes.root];
+  return resolveGridLines(spacing, (v) => span(v, at));
+}
+function scopeSpacing(spacing, scopes, chain) {
+  const inner = chain && chain.length > 1 ? chain[chain.length - 1] : null;
+  return inner && scopes?.spacing ? scopes.spacing(inner) : spacing;
+}
+function containerLines(own, spacing, unitSystem, scopes, chain) {
+  if (own === null) return null;
+  return gridLines(own ?? scopeSpacing(spacing, scopes, chain), unitSystem, scopes, chain);
+}
+function sceneGridRegions(scene, owners, outlineOf) {
   const frames = sceneBoxFrames(scene);
   const poses = scenePoseFrame(scene);
   const boxOutline = (id, frame) => {
@@ -18,8 +203,8 @@ function sceneGridRegions(scene, root, outlineOf) {
   };
   const children = /* @__PURE__ */ new Map();
   for (const id of scene.nodes.keys()) {
-    if (scene.get(id)?.units === void 0) continue;
-    const parent = scopeOwner(scene, id);
+    if (!ownsGrid(scene, id, owners)) continue;
+    const parent = gridOwner(scene, id, owners);
     children.set(parent, [...children.get(parent) ?? [], id]);
   }
   const build = (parent) => {
@@ -29,9 +214,11 @@ function sceneGridRegions(scene, root, outlineOf) {
       const outline = outlineOf ? outlineOf(id) : frame && boxOutline(id, frame);
       if (!outline) continue;
       const inner = build(id);
+      const own = owners.gridOf?.(id);
       out.push({
         outline,
-        chain: sceneUnitScopes(scene, id, root, { inclusive: true }),
+        ...owners.root ? { chain: sceneUnitScopes(scene, id, owners.root, { inclusive: true }) } : {},
+        ...own !== void 0 ? { spacing: own } : {},
         ...inner.length ? { regions: inner } : {},
         ...frame ? { frame } : {}
       });
@@ -40,9 +227,12 @@ function sceneGridRegions(scene, root, outlineOf) {
   };
   return build(null);
 }
-function scopeOwner(scene, id, inclusive = false) {
+function ownsGrid(scene, id, owners) {
+  return owners.gridOf?.(id) !== void 0 || owners.root !== void 0 && scene.get(id)?.units !== void 0;
+}
+function gridOwner(scene, id, owners, inclusive = false) {
   for (let at = inclusive ? id : scene.get(id)?.parent ?? null; at !== null; at = scene.get(at)?.parent ?? null) {
-    if (scene.get(at)?.units !== void 0) return at;
+    if (ownsGrid(scene, at, owners)) return at;
   }
   return null;
 }
@@ -53,48 +243,41 @@ function regionAt(regions, point) {
   }
   return null;
 }
-function span(v, chain) {
-  const zero = typeof v === "number" ? 0 : { ...v, value: 0 };
-  return resolveScoped(v, chain) - resolveScoped(zero, chain);
-}
-function scopedGridPitch(spacing, scopes, chain) {
-  const inner = chain.length > 1 ? chain[chain.length - 1] : null;
-  const v = inner && scopes.spacing ? scopes.spacing(inner) : spacing;
-  const on = (axis) => {
-    const a = typeof v === "object" && "x" in v ? v[axis] : v;
-    try {
-      return span(a, chain);
-    } catch (e) {
-      throw new Error(`${axis} axis: ${e instanceof Error ? e.message : String(e)}`);
-    }
-  };
-  return { x: on("x"), y: on("y") };
-}
-function gridPitch(spacing, unitSystem, scopes, chain) {
-  return scopes ? scopedGridPitch(spacing, scopes, chain ?? [scopes.root]) : resolveAxes(spacing, unitSystem);
-}
 
 // src/grid/pointToGridCell.ts
 function pointToGridCell(point, spacing, unitSystem, origin = { x: 0, y: 0 }, scoped) {
-  const region = scoped ? regionAt(scoped.regions, point) : null;
-  const s = gridPitch(spacing, unitSystem, scoped?.scopes, region?.chain);
-  const back = region?.frame && invert(region.frame);
-  if (region?.frame && back) {
-    const [x, y] = applyToPoint(back, point.x, point.y);
-    return { col: Math.floor(x / s.x), row: Math.floor(y / s.y), pitch: s, frame: region.frame };
+  const region = regionAt(scoped?.regions, point);
+  if (!region) {
+    const cell2 = cellIn(gridLines(spacing, unitSystem, scoped?.scopes), point.x - origin.x, point.y - origin.y);
+    return cell2 && { ...cell2, box: { ...cell2.box, x: cell2.box.x + origin.x, y: cell2.box.y + origin.y } };
   }
-  return {
-    col: Math.floor((point.x - origin.x) / s.x),
-    row: Math.floor((point.y - origin.y) / s.y),
-    ...scoped ? { pitch: s } : {}
+  const lines = containerLines(region.spacing, spacing, unitSystem, scoped?.scopes, region.chain);
+  if (!lines) return null;
+  const back = region.frame && invert(region.frame);
+  if (region.frame && !back) return null;
+  const local = (p) => {
+    if (!back) return p;
+    const [x, y] = applyToPoint(back, p.x, p.y);
+    return { x, y };
   };
+  const at = local(point);
+  const cell = cellIn(lines, at.x, at.y, outlineBox(region.outline.map(local)));
+  return cell && (region.frame ? { ...cell, frame: region.frame } : cell);
+}
+function cellIn(lines, x, y, within) {
+  const cx = cellOf(lines.x, x);
+  const cy = cellOf(lines.y, y);
+  if (!cx || !cy) return null;
+  const [x0, x1] = within && !lines.x ? [within.x, within.x + within.width] : [cx.lo, cx.hi];
+  const [y0, y1] = within && !lines.y ? [within.y, within.y + within.height] : [cy.lo, cy.hi];
+  return { col: cx.index, row: cy.index, box: { x: x0, y: y0, width: x1 - x0, height: y1 - y0 } };
 }
 
 // src/grid/useGridCellHover.ts
 function cellsEqual(a, b) {
   if (a === b) return true;
   if (a === null || b === null) return false;
-  return a.col === b.col && a.row === b.row && a.pitch?.x === b.pitch?.x && a.pitch?.y === b.pitch?.y && (a.frame === b.frame || !!a.frame && !!b.frame && a.frame.every((v, i) => v === b.frame[i]));
+  return a.col === b.col && a.row === b.row && a.box.x === b.box.x && a.box.y === b.box.y && a.box.width === b.box.width && a.box.height === b.box.height && (a.frame === b.frame || !!a.frame && !!b.frame && a.frame.every((v, i) => v === b.frame[i]));
 }
 function useGridCellHover(opts) {
   const [cell, setCell] = useState(null);
@@ -118,7 +301,7 @@ function useGridCellHover(opts) {
       const sx = e.clientX - rect.left;
       const sy = e.clientY - rect.top;
       const [wx, wy] = screenToWorld(sx, sy, o.view());
-      const scoped = o.scopes ? { scopes: o.scopes, ...o.regions ? { regions: o.regions() } : {} } : void 0;
+      const scoped = { ...o.scopes ? { scopes: o.scopes } : {}, ...o.regions ? { regions: o.regions() } : {} };
       update(pointToGridCell({ x: wx, y: wy }, o.spacing, o.unitSystem, o.origin, scoped));
     };
     const onLeave = () => update(null);
@@ -133,66 +316,6 @@ function useGridCellHover(opts) {
   }, [enabled, opts.ref, optsRef]);
   return { cell, getCell };
 }
-var MIN_SCREEN_SPACING = 4;
-function hasArea(r) {
-  return r.width > 0 && r.height > 0 && Number.isFinite(r.width) && Number.isFinite(r.height);
-}
-function lattice(b, spacing, shape, view, styles, frame) {
-  const { accentEvery, subdivisions } = shape;
-  const x0 = b.x;
-  const y0 = b.y;
-  const x1 = b.x + b.width;
-  const y1 = b.y + b.height;
-  const px = frame ? pxExtentInFrame(1, view.scale, frame) : pxExtent(1, view.scale);
-  const children = [];
-  const pushSegment = (sx, sy, ex, ey, s) => {
-    const path = {
-      kind: "polygon",
-      commands: new Uint8Array([PATH_M, PATH_L]),
-      coords: new Float32Array([sx, sy, ex, ey]),
-      fillRule: "nonzero"
-    };
-    const across = sx === ex ? px.x : px.y;
-    children.push({
-      kind: "path",
-      path,
-      stroke: { ...s, width: resolveStrokeWidth(s.width ?? 1, 1) * across }
-    });
-  };
-  const family = (axis, step, skipEvery, s) => {
-    if (!(step / px[axis] >= MIN_SCREEN_SPACING)) return;
-    const [from, to] = axis === "x" ? [x0, x1] : [y0, y1];
-    for (let k = 0; from + k * step <= to + 1e-9; k++) {
-      if (skipEvery > 0 && k % skipEvery === 0) continue;
-      const at = from + k * step;
-      if (axis === "x") pushSegment(at, y0, at, y1, s);
-      else pushSegment(x0, at, x1, at, s);
-    }
-  };
-  const accentOn = accentEvery !== void 0 && accentEvery > 0;
-  for (const axis of ["x", "y"]) {
-    if (subdivisions && subdivisions > 1) family(axis, spacing[axis] / subdivisions, subdivisions, styles.sub);
-  }
-  for (const axis of ["x", "y"]) family(axis, spacing[axis], accentOn ? accentEvery : 0, styles.line);
-  if (accentOn) {
-    for (const axis of ["x", "y"]) family(axis, spacing[axis] * accentEvery, 0, styles.accent);
-  }
-  return children;
-}
-function onLattice(r, spacing, accentEvery, anchor) {
-  const px = spacing.x * accentEvery;
-  const py = spacing.y * accentEvery;
-  const x = anchor.x + Math.floor((r.x - anchor.x) / px) * px;
-  const y = anchor.y + Math.floor((r.y - anchor.y) / py) * py;
-  return {
-    x,
-    y,
-    width: anchor.x + Math.ceil((r.x + r.width - anchor.x) / px) * px - x,
-    height: anchor.y + Math.ceil((r.y + r.height - anchor.y) / py) * py - y
-  };
-}
-
-// src/grid/layer.ts
 var DEFAULT_LINE = {
   paint: { kind: "solid", color: "rgba(255, 255, 255, 0.08)" },
   width: 1
@@ -215,20 +338,16 @@ function createGridLayer(opts) {
     id: "grid",
     label: "Grid",
     draw: (_data, view, dims) => {
-      const every = opts.accentEvery && opts.accentEvery > 0 ? opts.accentEvery : 1;
-      const spacing = gridPitch(opts.spacing, opts.unitSystem, opts.scopes);
-      const shown = viewportWorldRect(view, dims);
-      const b = opts.bounds ? opts.bounds(view, dims) : onLattice(shown, spacing, every, { x: 0, y: 0 });
+      const b = opts.bounds ? opts.bounds(view, dims) : padded(viewportWorldRect(view, dims), view);
       if (!hasArea(b)) return [];
-      const root = lattice(b, spacing, opts, view, styles);
-      const regions = opts.scopes && opts.regions ? opts.regions() : [];
-      if (regions.length === 0) return root;
       const anchor = opts.bounds ? { x: b.x, y: b.y } : { x: 0, y: 0 };
-      const area = opts.bounds ? b : shown;
+      const root = lattice(b, placed(gridLines(opts.spacing, opts.unitSystem, opts.scopes), anchor), opts, view, styles);
+      const regions = opts.regions?.() ?? [];
+      if (regions.length === 0) return root;
       const children = [{ kind: "group", clip: withHoles(rectOutline(b), regions), children: root }];
       const visit = (r) => {
-        const pitch = gridPitch(opts.spacing, opts.unitSystem, opts.scopes, r.chain);
-        const lines = regionLattice(r, area, (box, frame) => lattice(onLattice(box, pitch, every, frame ? { x: 0, y: 0 } : anchor), pitch, opts, view, styles, frame));
+        const own = containerLines(r.spacing, opts.spacing, opts.unitSystem, opts.scopes, r.chain);
+        const lines = own ? regionLattice(r, b, (box, frame) => lattice(box, placed(own, frame ? { x: 0, y: 0 } : anchor), opts, view, styles, frame)) : [];
         if (lines.length) children.push({ kind: "group", clip: withHoles(r.outline, r.regions ?? []), children: lines });
         for (const inner of r.regions ?? []) visit(inner);
       };
@@ -237,6 +356,14 @@ function createGridLayer(opts) {
     }
   };
 }
+function padded(r, view) {
+  const px = 1 / Math.abs(view.scale.x);
+  const py = 1 / Math.abs(view.scale.y);
+  return { x: r.x - px, y: r.y - py, width: r.width + 2 * px, height: r.height + 2 * py };
+}
+function placed(lines, anchor) {
+  return { x: lines.x && mapLines(lines.x, 1, anchor.x), y: lines.y && mapLines(lines.y, 1, anchor.y) };
+}
 function rectOutline(r) {
   return [
     { x: r.x, y: r.y },
@@ -273,51 +400,36 @@ function regionLattice(r, area, draw) {
   const lines = draw(box, r.frame);
   return lines.length ? [{ kind: "group", transform: mat3.fromAffine(r.frame), children: lines }] : [];
 }
-function outlineBox(outline) {
-  const xs = outline.map((p) => p.x);
-  const ys = outline.map((p) => p.y);
-  const x = Math.min(...xs);
-  const y = Math.min(...ys);
-  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
-}
-function intersect(a, b) {
-  const x = Math.max(a.x, b.x);
-  const y = Math.max(a.y, b.y);
-  return { x, y, width: Math.min(a.x + a.width, b.x + b.width) - x, height: Math.min(a.y + a.height, b.y + b.height) - y };
-}
 var DEFAULT_FILL = { paint: { kind: "solid", color: "rgba(127,176,105,0.15)" } };
 function createCellHighlightLayer(opts) {
   const fill = opts.fill ?? DEFAULT_FILL;
   return {
     id: "cell-highlight",
     label: "Cell highlight",
-    draw: () => {
+    draw: (_data, view, dims) => {
       const cell = opts.getCell();
       if (!cell) return [];
-      const spacing = cell.pitch ?? resolveAxes(opts.spacing, opts.unitSystem);
-      const o = cell.frame || !opts.origin ? { x: 0, y: 0 } : opts.origin();
-      const x = o.x + cell.col * spacing.x;
-      const y = o.y + cell.row * spacing.y;
-      const children = [
-        {
-          kind: "path",
-          path: { kind: "rect", x, y, width: spacing.x, height: spacing.y },
-          fill
-        }
-      ];
+      const box = cell.frame ? cell.box : intersect(cell.box, viewportWorldRect(view, dims));
+      if (!hasArea(box)) return [];
+      const children = [{ kind: "path", path: { kind: "rect", ...box }, fill }];
       return cell.frame ? [{ kind: "group", transform: mat3.fromAffine(cell.frame), children }] : children;
     }
   };
 }
 
-// src/strategies/onPlane.ts
-function guideOffsetOn(g, plane) {
-  return plane ? g.offset * plane.scale[g.axis] + plane.offset[g.axis] : g.offset;
-}
-function roundToGridOn(value, axis, spacing, plane) {
-  if (!plane) return Math.round(value / spacing) * spacing;
-  const camera = (value - plane.offset[axis]) / plane.scale[axis];
-  return Math.round(camera / spacing) * spacing * plane.scale[axis] + plane.offset[axis];
+// src/grid/fit.ts
+function gridFit(points, lines, tolerance = 1e-6) {
+  const misses = [];
+  points.forEach((p, index) => {
+    for (const axis of ["x", "y"]) {
+      const a = lines[axis];
+      if (!a) continue;
+      const near = nearestLine(a, p[axis]);
+      const distance = near === null ? Infinity : Math.abs(p[axis] - near);
+      if (distance > tolerance) misses.push({ index, axis, distance });
+    }
+  });
+  return { fits: misses.length === 0, misses };
 }
 
 // src/sources/lines.ts
@@ -345,53 +457,56 @@ function landedBox(q, delta) {
 }
 
 // src/sources/grid.ts
+var AXES = ["x", "y"];
 function gridSnapSource(opts) {
-  const { scopes } = opts;
-  const rootPitch = gridPitch(opts.spacing, opts.unitSystem, scopes);
+  const { scopes, gridOf } = opts;
+  const owners = { ...scopes ? { root: scopes.root } : {}, ...gridOf ? { gridOf } : {} };
+  const rootLines = gridLines(opts.spacing, opts.unitSystem, scopes);
+  const latticeOf = (q, owner) => {
+    if (owner === null) return { lines: rootLines };
+    const chain = scopes && q.scene ? sceneUnitScopes(q.scene, owner, scopes.root, { inclusive: true }) : void 0;
+    return {
+      lines: containerLines(gridOf?.(owner), opts.spacing, opts.unitSystem, scopes, chain),
+      frame: q.frameOf?.(owner)
+    };
+  };
   const latticeFor = (q) => {
     const scene = q.scene;
-    if (!scopes || !scene) return { pitch: rootPitch };
-    const within = (owner) => owner === null ? void 0 : q.frameOf?.(owner);
+    if (!scopes && !gridOf || !scene) return { lines: rootLines };
     if (q.ids?.length) {
-      const ids = q.ids.map(asNodeId);
-      const owners = new Set(ids.map((id) => scopeOwner(scene, id)));
-      return {
-        pitch: scopedGridPitch(opts.spacing, scopes, sceneSharedUnitScopes(scene, ids, scopes.root)),
-        // Nodes in two containers share no one lattice, whatever their scopes.
-        frame: owners.size === 1 ? within([...owners][0]) : void 0
-      };
+      const held = [...new Set(q.ids.map((id) => gridOwner(scene, asNodeId(id), owners)))];
+      if (held.length === 1) return latticeOf(q, held[0]);
+      const each = held.map((owner) => JSON.stringify(latticeOf(q, owner).lines));
+      return { lines: each.every((l) => l === each[0]) ? latticeOf(q, held[0]).lines : null };
     }
-    if (q.parent === void 0) return { pitch: rootPitch };
-    const parent = asNodeId(q.parent);
-    return {
-      pitch: scopedGridPitch(opts.spacing, scopes, sceneUnitScopes(scene, parent, scopes.root, { inclusive: true })),
-      frame: within(scopeOwner(scene, parent, true))
-    };
+    if (q.parent === void 0) return { lines: rootLines };
+    return latticeOf(q, gridOwner(scene, asNodeId(q.parent), owners, true));
   };
   const o = opts.origin ?? { x: 0, y: 0 };
-  const lines = (v, axis, pitch, plane) => {
-    const s = plane ? plane.scale[axis] : 1;
-    const near = roundToGridOn(v - o[axis] * s, axis, pitch[axis], plane) + o[axis] * s;
-    const step = pitch[axis] * s;
-    return [near, near + (v >= near ? step : -step)];
-  };
   return {
-    id: "grid",
+    id: opts.id ?? "grid",
     tier: "fallback",
     reachPx: Infinity,
-    roles: ["box", "origin", "pointer"],
+    roles: ["box", "origin", "pointer", "anchor"],
     *collect(q) {
-      const { pitch, frame } = latticeFor(q);
+      const { lines, frame } = latticeFor(q);
+      if (!lines) return;
       const plane = q.plane ?? null;
+      const scale = (axis) => plane ? plane.scale[axis] : 1;
+      const anchored = q.probes.some((p) => p.role === "anchor");
       const skip = frame && turns(frame) ? "box" : "origin";
-      for (const p of q.probes) {
-        if (p.role === skip) continue;
-        if (frame) {
-          yield* framedLines(p.id, p.at, pitch, frame, plane);
-          continue;
-        }
-        for (const axis of ["x", "y"]) {
-          for (const at of lines(p.at[axis], axis, pitch, plane)) yield { probe: p.id, locus: axisLine(axis, at, p.at) };
+      const probes = q.probes.filter((p) => anchored ? p.role === "anchor" || p.role === "pointer" : p.role !== skip);
+      if (frame) {
+        const local = { x: lines.x && mapLines(lines.x, scale("x"), 0), y: lines.y && mapLines(lines.y, scale("y"), 0) };
+        for (const p of probes) yield* framedLines(p.id, p.at, local, frame);
+        return;
+      }
+      const shift = (axis) => o[axis] * scale(axis) + (plane ? plane.offset[axis] : 0);
+      const world = { x: lines.x && mapLines(lines.x, scale("x"), shift("x")), y: lines.y && mapLines(lines.y, scale("y"), shift("y")) };
+      for (const p of probes) {
+        for (const axis of AXES) {
+          const a = world[axis];
+          if (a) for (const at of linesNear(a, p.at[axis])) yield { probe: p.id, locus: axisLine(axis, at, p.at) };
         }
       }
     }
@@ -407,15 +522,12 @@ function turns(frame) {
   };
   return !(along(ex, "x") && along(ey, "y") || along(ex, "y") && along(ey, "x"));
 }
-function* framedLines(probe, at, pitch, frame, plane) {
+function* framedLines(probe, at, lines, frame) {
   const local = frame.toLocal(at);
   if (!local) return;
-  for (const axis of ["x", "y"]) {
-    const step = pitch[axis] * (plane ? plane.scale[axis] : 1);
-    const near = Math.round(local[axis] / step) * step;
-    for (const offset of [near, near + (local[axis] >= near ? step : -step)]) {
-      yield { probe, locus: frameLine(frame, axis, offset, local) };
-    }
+  for (const axis of AXES) {
+    const a = lines[axis];
+    if (a) for (const offset of linesNear(a, local[axis])) yield { probe, locus: frameLine(frame, axis, offset, local) };
   }
 }
 
@@ -427,6 +539,7 @@ function createGridPreset(opts) {
     id,
     layers: { grid: { layer: createGridLayer(layer) } },
     snapSources: snap === false ? [] : [gridSnapSource({
+      id,
       spacing,
       ...unitSystem === void 0 ? {} : { unitSystem },
       ...scopes === void 0 ? {} : { scopes },
@@ -504,7 +617,7 @@ function createGuidesLayer(opts) {
     }
   };
 }
-var EPS = 1e-3;
+var EPS2 = 1e-3;
 function deriveAlignmentGuides(targets, opts = {}) {
   const d = opts.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
   const edges = opts.edges ?? true;
@@ -513,7 +626,7 @@ function deriveAlignmentGuides(targets, opts = {}) {
   const seenY = /* @__PURE__ */ new Map();
   const add = (axis, offset, b) => {
     const seen = axis === "x" ? seenX : seenY;
-    const key = Math.round(offset / EPS);
+    const key = Math.round(offset / EPS2);
     const min = axis === "x" ? b.y : b.x;
     const max = min + (axis === "x" ? b.height : b.width);
     const prev = seen.get(key);
@@ -545,14 +658,14 @@ function deriveAlignmentGuides(targets, opts = {}) {
 }
 
 // src/guides/alignment/spacing.ts
-var EPS2 = 1e-6;
+var EPS3 = 1e-6;
 var lo = (b, a) => a === "x" ? b.x : b.y;
 var hi = (b, a) => a === "x" ? b.x + b.width : b.y + b.height;
 var cross = (a) => a === "x" ? "y" : "x";
 function overlap(a, b, axis) {
   const min = Math.max(lo(a, axis), lo(b, axis));
   const max = Math.min(hi(a, axis), hi(b, axis));
-  return max - min > EPS2 ? [min, max] : null;
+  return max - min > EPS3 ? [min, max] : null;
 }
 function gapBetween(a, b, axis) {
   const shared = overlap(a, b, cross(axis));
@@ -561,7 +674,7 @@ function gapBetween(a, b, axis) {
 }
 function hitsStrip(g, b, span2) {
   const c = cross(g.axis);
-  return lo(b, g.axis) < g.max - EPS2 && hi(b, g.axis) > g.min + EPS2 && lo(b, c) < span2[1] - EPS2 && hi(b, c) > span2[0] + EPS2;
+  return lo(b, g.axis) < g.max - EPS3 && hi(b, g.axis) > g.min + EPS3 && lo(b, c) < span2[1] - EPS3 && hi(b, c) > span2[0] + EPS3;
 }
 function measureGaps(targets, axis) {
   return measureGapSpans(targets, axis).map((m) => m.gap);
@@ -571,7 +684,7 @@ function measureGapSpans(targets, axis) {
   for (const a of targets) {
     let next = null;
     for (const c of targets) {
-      if (c === a || lo(c, axis) < hi(a, axis) + EPS2) continue;
+      if (c === a || lo(c, axis) < hi(a, axis) + EPS3) continue;
       if (overlap(a, c, cross(axis)) === null) continue;
       if (next === null || lo(c, axis) < lo(next, axis)) next = c;
     }
@@ -598,14 +711,14 @@ function spacingOffers(b, axis, edge, targets, refs) {
   const sizes = refs.map((g) => g.max - g.min);
   const out = [];
   const offer = (delta, gap) => {
-    if (gap > EPS2) out.push({ delta, size: gap });
+    if (gap > EPS3) out.push({ delta, size: gap });
   };
   const L = left === null ? null : hi(left, axis);
   const R = right === null ? null : lo(right, axis);
   if (edge === "both") {
     for (const g of sizes) {
-      if (L !== null && (R === null || L + g + size <= R + EPS2)) offer(L + g - bLo, g);
-      if (R !== null && (L === null || R - g - size >= L - EPS2)) offer(R - g - size - bLo, g);
+      if (L !== null && (R === null || L + g + size <= R + EPS3)) offer(L + g - bLo, g);
+      if (R !== null && (L === null || R - g - size >= L - EPS3)) offer(R - g - size - bLo, g);
     }
     if (L !== null && R !== null) {
       const g = (R - L - size) / 2;
@@ -613,10 +726,10 @@ function spacingOffers(b, axis, edge, targets, refs) {
     }
   } else if (edge === "max" && R !== null) {
     const own = L !== null ? [bLo - L] : [];
-    for (const g of [...sizes, ...own]) if (R - g > bLo + EPS2) offer(R - g - bHi, g);
+    for (const g of [...sizes, ...own]) if (R - g > bLo + EPS3) offer(R - g - bHi, g);
   } else if (edge === "min" && L !== null) {
     const own = R !== null ? [R - bHi] : [];
-    for (const g of [...sizes, ...own]) if (L + g < bHi - EPS2) offer(L + g - bLo, g);
+    for (const g of [...sizes, ...own]) if (L + g < bHi - EPS3) offer(L + g - bLo, g);
   }
   return out;
 }
@@ -631,8 +744,8 @@ function bestAxis(b, axis, edge, targets, refs, tol) {
 function equalGaps(b, axis, size, targets, refs) {
   const eq = (g) => Math.abs(g.max - g.min - size) < 1e-3;
   const out = refs.filter(eq);
-  const near = targets.filter((t) => hi(t, axis) > lo(b, axis) - size - EPS2 && lo(t, axis) < hi(b, axis) + size + EPS2);
-  const own = measureGaps([...near, b], axis).filter((g) => (Math.abs(g.max - lo(b, axis)) < EPS2 || Math.abs(g.min - hi(b, axis)) < EPS2) && eq(g));
+  const near = targets.filter((t) => hi(t, axis) > lo(b, axis) - size - EPS3 && lo(t, axis) < hi(b, axis) + size + EPS3);
+  const own = measureGaps([...near, b], axis).filter((g) => (Math.abs(g.max - lo(b, axis)) < EPS3 || Math.abs(g.min - hi(b, axis)) < EPS3) && eq(g));
   return [...out, ...own];
 }
 function referenceGaps(bounds, measured) {
@@ -703,6 +816,11 @@ function siblingBounds(scene, ids, opts = {}) {
   return worldBoundsOf(scene, siblingIds(scene, ids), opts);
 }
 
+// src/strategies/onPlane.ts
+function guideOffsetOn(g, plane) {
+  return plane ? g.offset * plane.scale[g.axis] + plane.offset[g.axis] : g.offset;
+}
+
 // src/sources/guides.ts
 function guideSnapSource(getGuides) {
   return {
@@ -824,8 +942,6 @@ function extentAcross(q, p, axis, delta) {
   const lo3 = c === "x" ? landed.x : landed.y;
   return [lo3, lo3 + (c === "x" ? landed.width : landed.height)];
 }
-
-// src/sources/spacing.ts
 var TRANSLATE = [
   { axis: "x", edge: "both", rate: { x: 1, y: 0 } },
   { axis: "y", edge: "both", rate: { x: 0, y: 1 } }
@@ -834,9 +950,9 @@ function movingSides(q) {
   return q.sides ? q.sides.map((s) => ({ axis: s.axis, edge: s.side, rate: s.rate })) : TRANSLATE;
 }
 var measureAll = (boxes) => ({ boxes, x: measureGapSpans(boxes, "x"), y: measureGapSpans(boxes, "y") });
-function gapMark(g, color) {
+function gapMark(g, color, magnification) {
   const ends = g.axis === "x" ? { from: { x: g.min, y: g.at }, to: { x: g.max, y: g.at } } : { from: { x: g.at, y: g.min }, to: { x: g.at, y: g.max } };
-  return { kind: "gap", ...ends, value: g.max - g.min, ...color === void 0 ? {} : { color } };
+  return { kind: "gap", ...ends, value: (g.max - g.min) / magnification, ...color === void 0 ? {} : { color } };
 }
 function spacingSnapSource(opts = {}) {
   const fromScene = cachedPerScene(measureAll, opts.filter);
@@ -853,6 +969,7 @@ function spacingSnapSource(opts = {}) {
       const reach = q.reachWorld(q.reachPx);
       const refs = { x: referenceGaps(box, measured.x), y: referenceGaps(box, measured.y) };
       const seen = /* @__PURE__ */ new Set();
+      const magnification = q.scene && q.ids?.length ? sceneMagnification(q.scene, q.ids.map(asNodeId)) : 1;
       for (const { axis, edge, rate } of movingSides(q)) {
         const speed = Math.hypot(rate.x, rate.y);
         for (const o of spacingOffers(box, axis, edge, measured.boxes, refs[axis])) {
@@ -864,7 +981,7 @@ function spacingSnapSource(opts = {}) {
             locus: sideLine(probe.at, rate, o.delta),
             mark: (delta) => {
               const landed = landedBox(q, delta) ?? box;
-              return equalGaps(landed, axis, o.size, measured.boxes, refs[axis]).map((g) => gapMark(g, opts.color));
+              return equalGaps(landed, axis, o.size, measured.boxes, refs[axis]).map((g) => gapMark(g, opts.color, magnification));
             }
           };
         }
@@ -874,7 +991,7 @@ function spacingSnapSource(opts = {}) {
 }
 
 // src/spacingHints/distance.ts
-var EPS3 = 1e-6;
+var EPS4 = 1e-6;
 var lo2 = (b, a) => a === "x" ? b.x : b.y;
 var hi2 = (b, a) => a === "x" ? b.x + b.width : b.y + b.height;
 var mid = (b, a) => (lo2(b, a) + hi2(b, a)) / 2;
@@ -888,15 +1005,15 @@ function measureAxis(from, to, axis, out) {
   const c = cross3(axis);
   const sharedMin = Math.max(lo2(from, c), lo2(to, c));
   const sharedMax = Math.min(hi2(from, c), hi2(to, c));
-  const shares = sharedMax - sharedMin > EPS3;
+  const shares = sharedMax - sharedMin > EPS4;
   const push = (min, max, at2) => {
-    if (max - min > EPS3) out.gaps.push({ axis, min, max, at: at2 });
+    if (max - min > EPS4) out.gaps.push({ axis, min, max, at: at2 });
   };
-  const before = hi2(from, axis) <= lo2(to, axis) + EPS3;
-  const after = hi2(to, axis) <= lo2(from, axis) + EPS3;
+  const before = hi2(from, axis) <= lo2(to, axis) + EPS4;
+  const after = hi2(to, axis) <= lo2(from, axis) + EPS4;
   if (before || after) {
     const [min, max] = before ? [hi2(from, axis), lo2(to, axis)] : [hi2(to, axis), lo2(from, axis)];
-    if (max - min <= EPS3) return;
+    if (max - min <= EPS4) return;
     const at2 = shares ? (sharedMin + sharedMax) / 2 : mid(from, c);
     push(min, max, at2);
     if (!shares) {
@@ -907,7 +1024,7 @@ function measureAxis(from, to, axis, out) {
     return;
   }
   if (!shares) return;
-  const [inner, outer] = lo2(from, axis) >= lo2(to, axis) - EPS3 && hi2(from, axis) <= hi2(to, axis) + EPS3 ? [from, to] : lo2(to, axis) >= lo2(from, axis) - EPS3 && hi2(to, axis) <= hi2(from, axis) + EPS3 ? [to, from] : [null, null];
+  const [inner, outer] = lo2(from, axis) >= lo2(to, axis) - EPS4 && hi2(from, axis) <= hi2(to, axis) + EPS4 ? [from, to] : lo2(to, axis) >= lo2(from, axis) - EPS4 && hi2(to, axis) <= hi2(from, axis) + EPS4 ? [to, from] : [null, null];
   if (inner === null || outer === null) return;
   const at = mid(inner, c);
   push(lo2(outer, axis), lo2(inner, axis), at);
@@ -915,10 +1032,13 @@ function measureAxis(from, to, axis, out) {
 }
 
 // src/spacingHints/distanceReadout.ts
-function marksOf(r, color) {
+function marksOf(r, color, magnification) {
   const c = color === void 0 ? {} : { color };
   return [
-    ...r.gaps.map((g) => g.axis === "x" ? { kind: "distance", from: { x: g.min, y: g.at }, to: { x: g.max, y: g.at }, value: g.max - g.min, ...c } : { kind: "distance", from: { x: g.at, y: g.min }, to: { x: g.at, y: g.max }, value: g.max - g.min, ...c }),
+    ...r.gaps.map((g) => {
+      const value = (g.max - g.min) / magnification;
+      return g.axis === "x" ? { kind: "distance", from: { x: g.min, y: g.at }, to: { x: g.max, y: g.at }, value, ...c } : { kind: "distance", from: { x: g.at, y: g.min }, to: { x: g.at, y: g.max }, value, ...c };
+    }),
     ...r.leaders.flatMap((l) => {
       if (l.span === void 0) return [];
       return [l.axis === "x" ? { kind: "line", from: { x: l.offset, y: l.span.min }, to: { x: l.offset, y: l.span.max }, ...c } : { kind: "line", from: { x: l.span.min, y: l.offset }, to: { x: l.span.max, y: l.offset }, ...c }];
@@ -943,10 +1063,10 @@ function distanceReadout(opts = {}) {
   const modifier = opts.modifier ?? "alt";
   let shown = EMPTY;
   let store = null;
-  const show = (next) => {
+  const show = (next, magnification = 1) => {
     if (next === shown || next.gaps.length === 0 && shown.gaps.length === 0) return;
     shown = next;
-    store?.set(marksOf(next, opts.color));
+    store?.set(marksOf(next, opts.color, magnification));
   };
   const action = {
     id: `${id}.measure`,
@@ -966,7 +1086,8 @@ function distanceReadout(opts = {}) {
         const hit = nodeAtPoint(p.world, subtreeOf(scene, ids));
         const from = worldUnionOf(scene, ids, { poseDescriptor });
         const [to] = hit === null ? [] : worldBoundsOf(scene, [hit], { poseDescriptor });
-        show(from === null || to === void 0 ? EMPTY : measureDistances(from, to));
+        if (from === null || to === void 0) show(EMPTY);
+        else show(measureDistances(from, to), sceneMagnification(scene, [...ids, hit]));
       }
     }
   };
@@ -1787,6 +1908,6 @@ function ringSlots(opts = {}) {
   };
 }
 
-export { alignmentSnapSource, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGridPreset, createGuidesLayer, createSpacingHintsPreset, deriveAlignmentGuides, distanceReadout, freeform, gridPitch, gridSlots, gridSnapSource, guideSnapSource, matchSpacing, measureDistances, measureGaps, nearest, nearestWithin, none, pack, perContainer, pointToGridCell, quadtree, regionAt, ringSlots, roundToCell, rowSlots, sceneGridRegions, scopedGridPitch, sequenceLayout, siblingBounds, slots, snapPoint, spacingSnapSource, tileGrid, useGridCellHover, useGuides, worldBoundsOf, worldUnionOf };
+export { alignmentSnapSource, cellAt, cellOf, containedThenNearest, containerLines, createCellHighlightLayer, createGridLayer, createGridPreset, createGuidesLayer, createSpacingHintsPreset, deriveAlignmentGuides, distanceReadout, freeform, gridFit, gridLines, gridOwner, gridSlots, gridSnapSource, guideSnapSource, linesIn, linesNear, mapLines, matchSpacing, measureDistances, measureGaps, nearest, nearestLine, nearestWithin, none, pack, perContainer, pointToGridCell, quadtree, regionAt, resolveGridLines, ringSlots, roundToCell, rowSlots, sceneGridRegions, sequenceLayout, siblingBounds, slots, snapPoint, spacingSnapSource, tileGrid, useGridCellHover, useGuides, worldBoundsOf, worldUnionOf };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map