@weasel-js/guides 1.7.0 → 1.7.1

package/dist/index.js

@@ -3,8 +3,8 @@ export { gridSnapStrategy, pointToGridCell } from './chunk-5BCCIJY3.js';
 export { pointSnapToGrid } from './chunk-B25KFI3I.js';
 export { DEFAULT_GUIDE_TOLERANCE_PX, guideSnapStrategy } from './chunk-GEDAPTOM.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { useLatest, resolveUnit, pxExtent, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, translatePoseViaDescriptor, unionBounds, fixedCornerOf, createTransformOp, resolveStrokeWidth, screenToWorld, screenTolerance } from '@weasel-js/core';
-import { PATH_M, PATH_L } from '@weasel-js/geom';
+import { useLatest, resolveUnit, pxExtent, textCommandFromRuns, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, translatePoseViaDescriptor, unionBounds, fixedCornerOf, createTransformOp, resolveStrokeWidth, screenToWorld, screenTolerance } from '@weasel-js/core';
+import { rectPath, PATH_M, PATH_L } from '@weasel-js/geom';
 
 // src/grid/roundToCell.ts
 function roundToCell(value, cellSize) {
@@ -188,44 +188,74 @@ function useGuides(initial = []) {
   return { guides, getGuides, addGuide, removeGuide, clearGuides };
 }
 var DEFAULT_COLOR = "#3aa0ff";
+var LABEL_FONT = { fontSize: 10 };
+var LABEL_CHAR_W = 6;
+var LABEL_H = 14;
+var LABEL_PAD_X = 4;
+function tickedSegment(x0, y0, x1, y1, t) {
+  const h = t / 2;
+  const vertical = x0 === x1;
+  const ends = t <= 0 ? [] : vertical ? [x0 - h, y0, x0 + h, y0, x1 - h, y1, x1 + h, y1] : [x0, y0 - h, x0, y0 + h, x1, y1 - h, x1, y1 + h];
+  const coords = [x0, y0, x1, y1, ...ends];
+  const commands = [];
+  for (let i = 0; i < coords.length; i += 4) commands.push(PATH_M, PATH_L);
+  return {
+    kind: "polygon",
+    commands: new Uint8Array(commands),
+    coords: new Float32Array(coords),
+    fillRule: "nonzero"
+  };
+}
 function createGuidesLayer(opts) {
   const lineWidth = opts.lineWidth ?? 1;
   const color = opts.color ?? DEFAULT_COLOR;
-  const stroke = {
-    paint: { fill: "solid", color },
-    width: lineWidth
-  };
+  const gapColor = opts.gapColor ?? color;
+  const ticks = opts.ticks ?? 6;
+  const spanned = (opts.extent ?? "span") === "span";
+  const format = opts.gapLabels === false ? null : typeof opts.gapLabels === "function" ? opts.gapLabels : (n) => String(Math.round(n));
+  const stroke = { paint: { fill: "solid", color }, width: lineWidth };
+  const gapStroke = { paint: { fill: "solid", color: gapColor }, width: lineWidth };
   return {
     id: opts.id ?? "guides",
     label: opts.label ?? "Guides",
     space: "screen",
     draw: (_data, view, dims) => {
       const guides = opts.getGuides();
-      if (guides.length === 0) return [];
+      const gaps = opts.getGaps?.() ?? [];
+      if (guides.length === 0 && gaps.length === 0) return [];
+      const sx = (x) => (x - view.x) * view.scale.x;
+      const sy = (y) => (y - view.y) * view.scale.y;
       const out = [];
       for (const g of guides) {
+        const span = spanned ? g.span : void 0;
         if (g.axis === "x") {
-          const sx = (g.offset - view.x) * view.scale.x;
-          if (sx < -lineWidth || sx > dims.width + lineWidth) continue;
-          const path = {
-            kind: "polygon",
-            commands: new Uint8Array([PATH_M, PATH_L]),
-            coords: new Float32Array([sx, 0, sx, dims.height]),
-            fillRule: "nonzero"
-          };
+          const x = sx(g.offset);
+          if (x < -lineWidth || x > dims.width + lineWidth) continue;
+          const path = span ? tickedSegment(x, sy(span.min), x, sy(span.max), ticks) : tickedSegment(x, 0, x, dims.height, 0);
           out.push({ kind: "path", path, stroke });
         } else {
-          const sy = (g.offset - view.y) * view.scale.y;
-          if (sy < -lineWidth || sy > dims.height + lineWidth) continue;
-          const path = {
-            kind: "polygon",
-            commands: new Uint8Array([PATH_M, PATH_L]),
-            coords: new Float32Array([0, sy, dims.width, sy]),
-            fillRule: "nonzero"
-          };
+          const y = sy(g.offset);
+          if (y < -lineWidth || y > dims.height + lineWidth) continue;
+          const path = span ? tickedSegment(sx(span.min), y, sx(span.max), y, ticks) : tickedSegment(0, y, dims.width, y, 0);
           out.push({ kind: "path", path, stroke });
         }
       }
+      for (const g of gaps) {
+        const [x0, y0, x1, y1] = g.axis === "x" ? [sx(g.min), sy(g.at), sx(g.max), sy(g.at)] : [sx(g.at), sy(g.min), sx(g.at), sy(g.max)];
+        out.push({ kind: "path", path: tickedSegment(x0, y0, x1, y1, ticks), stroke: gapStroke });
+        if (format === null) continue;
+        const text = format(g.max - g.min);
+        const w = text.length * LABEL_CHAR_W + LABEL_PAD_X * 2;
+        const left = (x0 + x1) / 2 - w / 2;
+        const top = (y0 + y1) / 2 - LABEL_H / 2;
+        out.push({ kind: "path", path: rectPath(left, top, w, LABEL_H), fill: { fill: "solid", color: gapColor } });
+        out.push(textCommandFromRuns(
+          left + LABEL_PAD_X,
+          top + 2,
+          [{ text, fill: { fill: "solid", color: "#fff" } }],
+          LABEL_FONT
+        ));
+      }
       return out;
     }
   };
@@ -237,22 +267,28 @@ function deriveAlignmentGuides(targets, opts = {}) {
   const centers = opts.centers ?? true;
   const seenX = /* @__PURE__ */ new Map();
   const seenY = /* @__PURE__ */ new Map();
-  const add = (axis, offset) => {
+  const add = (axis, offset, b) => {
     const seen = axis === "x" ? seenX : seenY;
     const key = Math.round(offset / EPS);
-    if (seen.has(key)) return;
-    seen.set(key, { id: `align:${axis}:${offset.toFixed(3)}`, axis, offset });
+    const min = axis === "x" ? b.y : b.x;
+    const max = min + (axis === "x" ? b.height : b.width);
+    const prev = seen.get(key);
+    if (prev) {
+      prev.span = { min: Math.min(prev.span.min, min), max: Math.max(prev.span.max, max) };
+      return;
+    }
+    seen.set(key, { id: `align:${axis}:${offset.toFixed(3)}`, axis, offset, span: { min, max } });
   };
   const emit = (b) => {
     if (edges) {
-      add("x", b.x);
-      add("x", b.x + b.width);
-      add("y", b.y);
-      add("y", b.y + b.height);
+      add("x", b.x, b);
+      add("x", b.x + b.width, b);
+      add("y", b.y, b);
+      add("y", b.y + b.height, b);
     }
     if (centers) {
-      add("x", b.x + b.width / 2);
-      add("y", b.y + b.height / 2);
+      add("x", b.x + b.width / 2, b);
+      add("y", b.y + b.height / 2, b);
     }
   };
   for (const t of targets) emit(visualBoundsViaDescriptor(t, d));
@@ -297,9 +333,161 @@ function bestAxis(b, axis, anchors, candidates, worldTolerance) {
 function matchAlignment(bounds, candidates, worldTolerance, anchors) {
   const x = bestAxis(bounds, "x", anchors.x, candidates, worldTolerance.x);
   const y = bestAxis(bounds, "y", anchors.y, candidates, worldTolerance.y);
-  return { dx: x.delta, dy: y.delta, activeX: x.guide, activeY: y.guide };
+  const top = bounds.y + y.delta;
+  const left = bounds.x + x.delta;
+  return {
+    dx: x.delta,
+    dy: y.delta,
+    activeX: stretchSpan(x.guide, top, top + bounds.height),
+    activeY: stretchSpan(y.guide, left, left + bounds.width)
+  };
+}
+function stretchSpan(g, min, max) {
+  if (g === null || g.span === void 0) return g;
+  return { ...g, span: { min: Math.min(g.span.min, min), max: Math.max(g.span.max, max) } };
+}
+
+// src/guides/alignment/spacing.ts
+var EPS2 = 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;
+}
+function gapBetween(a, b, axis) {
+  const shared = overlap(a, b, cross(axis));
+  if (shared === null) return null;
+  return { axis, min: hi(a, axis), max: lo(b, axis), at: (shared[0] + shared[1]) / 2 };
+}
+function hitsStrip(g, b, span) {
+  const c = cross(g.axis);
+  return lo(b, g.axis) < g.max - EPS2 && hi(b, g.axis) > g.min + EPS2 && lo(b, c) < span[1] - EPS2 && hi(b, c) > span[0] + EPS2;
+}
+function measureGaps(targets, axis) {
+  return measure(targets, axis).map((m) => m.gap);
+}
+function measure(targets, axis) {
+  const out = [];
+  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 (overlap(a, c, cross(axis)) === null) continue;
+      if (next === null || lo(c, axis) < lo(next, axis)) next = c;
+    }
+    if (next === null) continue;
+    const gap = gapBetween(a, next, axis);
+    const span = overlap(a, next, cross(axis));
+    if (targets.some((t) => t !== a && t !== next && hitsStrip(gap, t, span))) continue;
+    out.push({ gap, span });
+  }
+  return out.sort((p, q) => p.gap.min - q.gap.min || p.gap.at - q.gap.at);
+}
+function bestAxis2(b, axis, edge, targets, refs, tol) {
+  const bLo = lo(b, axis);
+  const bHi = hi(b, axis);
+  const size = bHi - bLo;
+  const center = (bLo + bHi) / 2;
+  let left = null;
+  let right = null;
+  for (const t of targets) {
+    if (overlap(t, b, cross(axis)) === null) continue;
+    if (hi(t, axis) <= center && (left === null || hi(t, axis) > hi(left, axis))) left = t;
+    if (lo(t, axis) >= center && (right === null || lo(t, axis) < lo(right, axis))) right = t;
+  }
+  const sizes = refs.map((g) => g.max - g.min);
+  let best = null;
+  const offer = (delta, gap) => {
+    if (gap <= EPS2 || Math.abs(delta) > tol) return;
+    if (best === null || Math.abs(delta) < Math.abs(best.delta)) best = { 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) {
+      const g = (R - L - size) / 2;
+      offer(L + g - bLo, g);
+    }
+  } 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);
+  } 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);
+  }
+  return best;
+}
+function markers(b, axis, size, targets, refs) {
+  const eq = (g) => Math.abs(g.max - g.min - size) < 1e-3;
+  const out = refs.filter(eq);
+  const own = measureGaps([...targets, b], axis).filter((g) => (Math.abs(g.max - lo(b, axis)) < EPS2 || Math.abs(g.min - hi(b, axis)) < EPS2) && eq(g));
+  return [...out, ...own];
+}
+function matchSpacing(bounds, targets, worldTolerance, moving = { x: "both", y: "both" }) {
+  const refsFor = (axis) => measure(targets, axis).filter((m) => !hitsStrip(m.gap, bounds, m.span)).map((m) => m.gap);
+  const refsX = refsFor("x");
+  const refsY = refsFor("y");
+  const x = moving.x === null ? null : bestAxis2(bounds, "x", moving.x, targets, refsX, worldTolerance.x);
+  const y = moving.y === null ? null : bestAxis2(bounds, "y", moving.y, targets, refsY, worldTolerance.y);
+  const dx = x?.delta ?? 0;
+  const dy = y?.delta ?? 0;
+  const final = applyEdges(bounds, dx, dy, moving);
+  return {
+    dx,
+    dy,
+    gapsX: x === null ? [] : markers(final, "x", x.size, targets, refsX),
+    gapsY: y === null ? [] : markers(final, "y", y.size, targets, refsY)
+  };
+}
+function applyEdges(b, dx, dy, moving) {
+  let { x, y, width, height } = b;
+  if (moving.x === "both") x += dx;
+  else if (moving.x === "min") {
+    x += dx;
+    width -= dx;
+  } else if (moving.x === "max") width += dx;
+  if (moving.y === "both") y += dy;
+  else if (moving.y === "min") {
+    y += dy;
+    height -= dy;
+  } else if (moving.y === "max") height += dy;
+  return { x, y, width, height };
 }
 var activeList = (m) => [m.activeX, m.activeY].filter((g) => g !== null);
+var EXACT = { x: 1e-6, y: 1e-6 };
+function resolve(b, args, tol, anchors, edges) {
+  const candidates = args.getCandidates();
+  const m = matchAlignment(b, candidates, tol, anchors);
+  const targets = args.getSpacingTargets?.();
+  if (targets === void 0) {
+    if (m.activeX === null && m.activeY === null) return null;
+    return { dx: m.dx, dy: m.dy, guides: activeList(m), gaps: [] };
+  }
+  const s = matchSpacing(b, targets, tol, edges);
+  const pick = (hit, d, spaced, sd) => hit && (!spaced || Math.abs(d) <= Math.abs(sd)) ? d : spaced ? sd : null;
+  const dx = pick(m.activeX !== null, m.dx, s.gapsX.length > 0, s.dx);
+  const dy = pick(m.activeY !== null, m.dy, s.gapsY.length > 0, s.dy);
+  if (dx === null && dy === null) return null;
+  const settled = applyEdges(b, dx ?? 0, dy ?? 0, edges);
+  const shown = matchSpacing(settled, targets, EXACT, edges);
+  return {
+    dx: dx ?? 0,
+    dy: dy ?? 0,
+    guides: activeList(matchAlignment(settled, candidates, EXACT, anchors)),
+    gaps: [...shown.gapsX, ...shown.gapsY]
+  };
+}
+function publish(args, r) {
+  args.setActiveGuides(r?.guides ?? []);
+  args.setActiveGaps?.(r?.gaps ?? []);
+}
 function worldTol(base, ctx) {
   return screenTolerance(base.tolerance ?? 6, ctx);
 }
@@ -308,7 +496,7 @@ function alignMoveBehavior(args) {
   return {
     onMove(ctx, transform) {
       if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
-        args.setActiveGuides([]);
+        publish(args, null);
         return;
       }
       if (transform.kind !== "translate") return;
@@ -323,19 +511,16 @@ function alignMoveBehavior(args) {
       }
       const union = unionBounds(boxes);
       if (union === null) return;
-      const m = matchAlignment(union, args.getCandidates(), worldTol(args, ctx), MOVE_ANCHORS);
-      if (m.activeX === null && m.activeY === null) {
-        args.setActiveGuides([]);
-        return;
-      }
-      args.setActiveGuides(activeList(m));
-      return { transform: { kind: "translate", dx: transform.dx + m.dx, dy: transform.dy + m.dy } };
+      const r = resolve(union, args, worldTol(args, ctx), MOVE_ANCHORS, { x: "both", y: "both" });
+      publish(args, r);
+      if (r === null) return;
+      return { transform: { kind: "translate", dx: transform.dx + r.dx, dy: transform.dy + r.dy } };
     },
     onEnd() {
-      args.setActiveGuides([]);
+      publish(args, null);
     },
     onCancel() {
-      args.setActiveGuides([]);
+      publish(args, null);
     }
   };
 }
@@ -369,14 +554,14 @@ function alignResizeBehavior(args) {
   return {
     onMove(ctx, { pose, anchor }) {
       if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
-        args.setActiveGuides([]);
+        publish(args, null);
         return;
       }
       const origin = ctx.origin.get(ctx.draggedIds[0]);
       const rotation = origin === void 0 ? 0 : d.getRotation?.(origin) ?? 0;
-      const m = rotation === 0 ? matchMovingEdges(pose, anchor, args.getCandidates(), worldTol(args, ctx)) : matchRotatedCorners(pose, anchor, d.getBounds(origin), rotation, args.getCandidates(), worldTol(args, ctx));
+      const m = rotation === 0 ? matchMovingEdges(pose, anchor, args, worldTol(args, ctx)) : matchRotatedCorners(pose, anchor, d.getBounds(origin), rotation, args.getCandidates(), worldTol(args, ctx));
       if (m === null) {
-        args.setActiveGuides([]);
+        publish(args, null);
         return;
       }
       let { x, y, width, height } = pose;
@@ -390,23 +575,26 @@ function alignResizeBehavior(args) {
         y += m.ly;
         height -= m.ly;
       }
-      args.setActiveGuides(m.guides);
+      publish(args, { guides: m.guides, gaps: m.gaps });
       return { pose: { ...pose, x, y, width, height } };
     },
     onEnd() {
-      args.setActiveGuides([]);
+      publish(args, null);
     },
     onCancel() {
-      args.setActiveGuides([]);
+      publish(args, null);
     }
   };
 }
-function matchMovingEdges(pose, anchor, candidates, tol) {
-  const movingX = anchor.x === "min" ? ["max"] : anchor.x === "max" ? ["min"] : [];
-  const movingY = anchor.y === "min" ? ["max"] : anchor.y === "max" ? ["min"] : [];
-  const m = matchAlignment(pose, candidates, tol, { x: movingX, y: movingY });
-  if (m.activeX === null && m.activeY === null) return null;
-  return { lx: m.dx, ly: m.dy, guides: activeList(m) };
+function matchMovingEdges(pose, anchor, args, tol) {
+  const moving = (a) => a === "min" ? "max" : a === "max" ? "min" : null;
+  const edges = { x: moving(anchor.x), y: moving(anchor.y) };
+  const anchors = {
+    x: edges.x === null ? [] : [edges.x],
+    y: edges.y === null ? [] : [edges.y]
+  };
+  const r = resolve(pose, args, tol, anchors, edges);
+  return r === null ? null : { lx: r.dx, ly: r.dy, guides: r.guides, gaps: r.gaps };
 }
 function matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol) {
   const cos = Math.cos(rotation);
@@ -421,10 +609,10 @@ function matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol)
     return { x: fixedWorld.x + o.x, y: fixedWorld.y + o.y };
   };
   const movingEdge = (axis) => {
-    const lo = axis === "x" ? pose.x : pose.y;
-    const hi = lo + (axis === "x" ? pose.width : pose.height);
+    const lo2 = axis === "x" ? pose.x : pose.y;
+    const hi2 = lo2 + (axis === "x" ? pose.width : pose.height);
     const a = anchor[axis];
-    return a === "min" ? [hi] : a === "max" ? [lo] : [lo, hi];
+    return a === "min" ? [hi2] : a === "max" ? [lo2] : [lo2, hi2];
   };
   if (anchor.x !== "free" && anchor.y !== "free") {
     const c = drawn(movingEdge("x")[0], movingEdge("y")[0]);
@@ -432,25 +620,27 @@ function matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol)
     if (m.activeX === null && m.activeY === null) return null;
     const lx = m.dx * cos + m.dy * sin;
     const ly = -m.dx * sin + m.dy * cos;
-    return { lx, ly, guides: activeList(m) };
+    return { lx, ly, guides: activeList(m), gaps: [] };
   }
   if (anchor.x === "free" && anchor.y === "free") return null;
   const along = anchor.x === "free" ? "y" : "x";
   const dir = along === "x" ? toWorld(1, 0) : toWorld(0, 1);
   const edge = movingEdge(along)[0];
   let best = null;
-  for (const across of movingEdge(along === "x" ? "y" : "x")) {
-    const c = along === "x" ? drawn(edge, across) : drawn(across, edge);
+  for (const across2 of movingEdge(along === "x" ? "y" : "x")) {
+    const c = along === "x" ? drawn(edge, across2) : drawn(across2, edge);
     for (const g of candidates) {
       const reach = g.axis === "x" ? dir.x : dir.y;
       if (Math.abs(reach) < 1e-9) continue;
       const t = (g.offset - (g.axis === "x" ? c.x : c.y)) / reach;
       if (Math.abs(t * dir.x) > tol.x || Math.abs(t * dir.y) > tol.y) continue;
-      if (best === null || Math.abs(t) < Math.abs(best.t)) best = { t, guide: g };
+      if (best === null || Math.abs(t) < Math.abs(best.t)) best = { t, guide: g, at: c };
     }
   }
   if (best === null) return null;
-  return along === "x" ? { lx: best.t, ly: 0, guides: [best.guide] } : { lx: 0, ly: best.t, guides: [best.guide] };
+  const across = best.guide.axis === "x" ? best.at.y + best.t * dir.y : best.at.x + best.t * dir.x;
+  const guides = [stretchSpan(best.guide, across, across)];
+  return along === "x" ? { lx: best.t, ly: 0, guides, gaps: [] } : { lx: 0, ly: best.t, guides, gaps: [] };
 }
 
 // src/layout/snaps.ts
@@ -546,103 +736,111 @@ function defaultCenterOf(pose) {
   const p = pose;
   return { x: (p.x ?? 0) + (p.width ?? 0) / 2, y: (p.y ?? 0) + (p.height ?? 0) / 2 };
 }
-function cellRectAt(bounds, cols, rows, gap, col, row) {
-  const cw = (bounds.width - gap * (cols - 1)) / cols;
-  const ch = (bounds.height - gap * (rows - 1)) / rows;
-  return {
-    x: bounds.x + col * (cw + gap),
-    y: bounds.y + row * (ch + gap),
-    width: cw,
-    height: ch
-  };
-}
 function tileGrid(opts) {
   const { cols, rows } = opts;
   const gap = opts.gap ?? 0;
+  const byColumn = opts.flow === "column";
+  const overflow = opts.overflow ?? "reject";
   const snap = opts.snap ?? cellAt();
   const capacity = cols * rows;
+  const perLine = byColumn ? rows : cols;
+  const minLines = byColumn ? cols : rows;
   const cellToPose = opts.cellToPose ?? ((cell, dragged) => {
     return { ...dragged, ...cell };
   });
   const centerOf = opts.centerOf ?? defaultCenterOf;
-  function cellPose(bounds, col, row, basis) {
-    return cellToPose(cellRectAt(bounds, cols, rows, gap, col, row), basis);
-  }
-  function cellIndexOf(bounds, pose) {
-    const p = centerOf(pose);
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        const r = cellRectAt(bounds, cols, rows, gap, col, row);
-        if (p.x >= r.x && p.x < r.x + r.width && p.y >= r.y && p.y < r.y + r.height) {
-          return row * cols + col;
-        }
-      }
+  const linesFor = (n) => Math.max(minLines, Math.ceil(n / perLine));
+  function gridOf(bounds, n) {
+    const lines = overflow === "grow" ? linesFor(n) : minLines;
+    const c = byColumn ? lines : cols;
+    const r = byColumn ? rows : lines;
+    const cw = (bounds.width - gap * (c - 1)) / c;
+    const ch = (bounds.height - gap * (r - 1)) / r;
+    function rectAt(index) {
+      const along = index % perLine;
+      const line = Math.floor(index / perLine);
+      const col = byColumn ? line : along;
+      const row = byColumn ? along : line;
+      return { x: bounds.x + col * (cw + gap), y: bounds.y + row * (ch + gap), width: cw, height: ch };
+    }
+    function indexOf(pose) {
+      const p = centerOf(pose);
+      const col = Math.floor((p.x - bounds.x) / (cw + gap));
+      const row = Math.floor((p.y - bounds.y) / (ch + gap));
+      if (col < 0 || row < 0) return null;
+      if (p.x - bounds.x - col * (cw + gap) >= cw) return null;
+      if (p.y - bounds.y - row * (ch + gap) >= ch) return null;
+      if (byColumn ? row >= rows : col >= cols) return null;
+      return byColumn ? col * rows + row : row * cols + col;
     }
-    return null;
+    const cells = overflow === "reject" ? capacity : linesFor(n) * perLine;
+    function boundsFor(lineCount) {
+      return byColumn ? { ...bounds, width: lineCount * cw + gap * (lineCount - 1) } : { ...bounds, height: lineCount * ch + gap * (lineCount - 1) };
+    }
+    return { rectAt, indexOf, cells, boundsFor };
   }
+  const metaOf = (index, cellRect) => {
+    const along = index % perLine;
+    const line = Math.floor(index / perLine);
+    return byColumn ? { col: line, row: along, cellRect } : { col: along, row: line, cellRect };
+  };
+  const indexOfMeta = (m) => byColumn ? m.col * rows + m.row : m.row * cols + m.col;
+  const heldBy = (container, children, dragged) => dragged && dragged.sourceContainerId !== container.id ? children.filter((c) => c.id !== dragged.id).length : children.length;
   function computeSwap(container, children, dragged, target) {
     if (target === null) return null;
     if (dragged.sourceContainerId !== container.id) return null;
-    const meta = target.meta;
-    const idx = meta.row * cols + meta.col;
-    const occupant = children.find(
-      (c) => c.id !== dragged.id && cellIndexOf(container.bounds, c.pose) === idx
-    );
+    const grid = gridOf(container.bounds, children.length);
+    const idx = indexOfMeta(target.meta);
+    const occupant = children.find((c) => c.id !== dragged.id && grid.indexOf(c.pose) === idx);
     if (occupant === void 0) return null;
     const self = children.find((c) => c.id === dragged.id);
-    const fromIdx = cellIndexOf(container.bounds, self ? self.pose : dragged.originPose);
+    const fromIdx = grid.indexOf(self ? self.pose : dragged.originPose);
     if (fromIdx === null || fromIdx === idx) return null;
-    const oldCellRect = cellRectAt(
-      container.bounds,
-      cols,
-      rows,
-      gap,
-      fromIdx % cols,
-      Math.floor(fromIdx / cols)
-    );
-    return { occupant: occupant.id, from: occupant.pose, newPose: cellToPose(oldCellRect, occupant.pose) };
+    return { occupant: occupant.id, from: occupant.pose, newPose: cellToPose(grid.rectAt(fromIdx), occupant.pose) };
+  }
+  function pack(from, into, children) {
+    const ordered = children.map((c) => ({ c, cell: from.indexOf(c.pose) })).sort((a, b) => {
+      if (a.cell !== b.cell) {
+        if (a.cell === null) return 1;
+        if (b.cell === null) return -1;
+        return a.cell - b.cell;
+      }
+      return a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0;
+    });
+    const out = /* @__PURE__ */ new Map();
+    for (let i = 0; i < ordered.length; i++) {
+      out.set(ordered[i].c.id, cellToPose(into.rectAt(i), ordered[i].c.pose));
+    }
+    return out;
   }
   return {
     snap,
     childPoses(container, children) {
-      const out = /* @__PURE__ */ new Map();
-      const ordered = children.map((c) => ({ c, cell: cellIndexOf(container.bounds, c.pose) })).sort((a, b) => {
-        if (a.cell !== b.cell) {
-          if (a.cell === null) return 1;
-          if (b.cell === null) return -1;
-          return a.cell - b.cell;
-        }
-        return a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0;
-      });
-      for (let i = 0; i < ordered.length && i < capacity; i++) {
-        const col = i % cols;
-        const row = Math.floor(i / cols);
-        out.set(ordered[i].c.id, cellPose(container.bounds, col, row, ordered[i].c.pose));
-      }
-      return out;
+      const grid = gridOf(container.bounds, children.length);
+      return pack(grid, grid, children);
     },
     getDropTargets(container, children, dragged) {
+      const grid = gridOf(container.bounds, heldBy(container, children, dragged));
       const occupied = /* @__PURE__ */ new Set();
-      if (dragged.sourceContainerId !== container.id) {
+      const fromOutside = dragged.sourceContainerId !== container.id;
+      if (fromOutside) {
         for (const c of children) {
           if (c.id === dragged.id) continue;
-          const idx = cellIndexOf(container.bounds, c.pose);
+          const idx = grid.indexOf(c.pose);
           if (idx !== null) occupied.add(idx);
         }
       }
-      const out = [];
-      for (let row = 0; row < rows; row++) {
-        for (let col = 0; col < cols; col++) {
-          if (occupied.has(row * cols + col)) continue;
-          const cellRect = cellRectAt(container.bounds, cols, rows, gap, col, row);
-          out.push({
-            pose: cellToPose(cellRect, dragged.pose),
-            origin: { x: cellRect.x + cellRect.width / 2, y: cellRect.y + cellRect.height / 2 },
-            meta: { col, row, cellRect }
-          });
-        }
-      }
-      return out;
+      const offered = [];
+      for (let i = 0; i < grid.cells; i++) if (!occupied.has(i)) offered.push(i);
+      if (fromOutside && offered.length === 0 && overflow !== "reject") offered.push(grid.cells);
+      return offered.map((i) => {
+        const cellRect = grid.rectAt(i);
+        return {
+          pose: cellToPose(cellRect, dragged.pose),
+          origin: { x: cellRect.x + cellRect.width / 2, y: cellRect.y + cellRect.height / 2 },
+          meta: metaOf(i, cellRect)
+        };
+      });
     },
     reflowPoses(container, children, dragged, target) {
       const out = /* @__PURE__ */ new Map();
@@ -681,6 +879,67 @@ function tileGrid(opts) {
         })
       );
       return ops;
+    },
+    arrive(container, children, arrivals) {
+      const n = children.length;
+      if (overflow === "reject" && n > capacity) return null;
+      const grid = gridOf(container.bounds, n - arrivals.size);
+      const slots = overflow === "reject" ? capacity : linesFor(n) * perLine;
+      const taken = /* @__PURE__ */ new Set();
+      for (const c of children) {
+        if (arrivals.has(c.id)) continue;
+        const idx = grid.indexOf(c.pose);
+        if (idx !== null) taken.add(idx);
+      }
+      const poses = /* @__PURE__ */ new Map();
+      for (const c of children) {
+        if (!arrivals.has(c.id)) continue;
+        const own = grid.indexOf(c.pose);
+        let idx;
+        if (own !== null && own < slots && !taken.has(own)) {
+          idx = own;
+        } else {
+          const at = centerOf(c.pose);
+          let best = -1;
+          let bestD = Infinity;
+          for (let i = 0; i < slots; i++) {
+            if (taken.has(i)) continue;
+            const r = grid.rectAt(i);
+            const dx = r.x + r.width / 2 - at.x;
+            const dy = r.y + r.height / 2 - at.y;
+            const d = dx * dx + dy * dy;
+            if (d < bestD) {
+              bestD = d;
+              best = i;
+            }
+          }
+          if (best < 0) return null;
+          idx = best;
+        }
+        taken.add(idx);
+        poses.set(c.id, cellToPose(grid.rectAt(idx), c.pose));
+      }
+      if (overflow !== "grow") return { poses };
+      const lines = linesFor(n);
+      if (lines === linesFor(n - arrivals.size)) return { poses };
+      return { poses, bounds: grid.boundsFor(lines) };
+    },
+    depart(container, children, departed) {
+      const n = children.length;
+      const before = gridOf(container.bounds, n + departed.size);
+      const lines = linesFor(n);
+      if (overflow !== "grow" || lines === linesFor(n + departed.size)) {
+        return { poses: pack(before, before, children) };
+      }
+      const bounds = before.boundsFor(lines);
+      return { poses: pack(before, gridOf(bounds, n), children), bounds };
+    },
+    contentExtent(container, children) {
+      const grid = gridOf(container.bounds, children.length);
+      const lines = Math.ceil(children.length / perLine);
+      if (lines <= minLines) return container.bounds;
+      const reach = grid.boundsFor(lines);
+      return overflow === "grow" ? container.bounds : { ...reach, width: Math.max(reach.width, container.bounds.width), height: Math.max(reach.height, container.bounds.height) };
     }
   };
 }
@@ -751,6 +1010,6 @@ function snapPoint(opts) {
   };
 }
 
-export { MOVE_ANCHORS, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGuidesLayer, deriveAlignmentGuides, freeform, matchAlignment, nearest, nearestWithin, none, roundToCell, snapPoint, tileGrid, useGridCellHover, useGuides };
+export { MOVE_ANCHORS, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGuidesLayer, deriveAlignmentGuides, freeform, matchAlignment, matchSpacing, measureGaps, nearest, nearestWithin, none, roundToCell, snapPoint, tileGrid, useGridCellHover, useGuides };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map