@weasel-js/guides 1.7.0

package/dist/index.js

@@ -0,0 +1,756 @@
+import { pointToGridCell } from './chunk-5BCCIJY3.js';
+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';
+
+// src/grid/roundToCell.ts
+function roundToCell(value, cellSize) {
+  return Math.round(value / cellSize) * cellSize || 0;
+}
+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;
+}
+function useGridCellHover(opts) {
+  const [cell, setCell] = useState(null);
+  const cellRef = useRef(null);
+  const optsRef = useLatest(opts);
+  const getCell = useCallback(() => cellRef.current, []);
+  const enabled = opts.enabled ?? true;
+  useEffect(() => {
+    if (!enabled) return;
+    const el = opts.ref.current;
+    if (!el) return;
+    const update = (next) => {
+      if (cellsEqual(cellRef.current, next)) return;
+      cellRef.current = next;
+      setCell(next);
+      optsRef.current.onChange?.(next);
+    };
+    const onMove = (e) => {
+      const o = optsRef.current;
+      const rect = el.getBoundingClientRect();
+      const sx = e.clientX - rect.left;
+      const sy = e.clientY - rect.top;
+      const [wx, wy] = screenToWorld(sx, sy, o.view());
+      update(pointToGridCell({ x: wx, y: wy }, o.spacing, o.unitSystem, o.origin));
+    };
+    const onLeave = () => update(null);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerleave", onLeave);
+    el.addEventListener("pointercancel", onLeave);
+    return () => {
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerleave", onLeave);
+      el.removeEventListener("pointercancel", onLeave);
+    };
+  }, [enabled, opts.ref, optsRef]);
+  return { cell, getCell };
+}
+var DEFAULT_LINE = {
+  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.08)" },
+  width: 1
+};
+var DEFAULT_ACCENT = {
+  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.16)" },
+  width: 1
+};
+var DEFAULT_SUB = {
+  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.04)" },
+  width: 1
+};
+function createGridLayer(opts) {
+  const line = opts.style?.line ?? DEFAULT_LINE;
+  const accent = opts.style?.accent ?? DEFAULT_ACCENT;
+  const sub = opts.style?.sub ?? DEFAULT_SUB;
+  return {
+    id: "grid",
+    label: "Grid",
+    draw: (_data, view) => {
+      const b = opts.bounds();
+      if (b.width <= 0 || b.height <= 0) return [];
+      const { accentEvery, subdivisions } = opts;
+      const spacing = resolveUnit(opts.spacing, opts.unitSystem);
+      const x0 = b.x;
+      const y0 = b.y;
+      const x1 = b.x + b.width;
+      const y1 = b.y + b.height;
+      const px = 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 }
+        });
+      };
+      if (subdivisions && subdivisions > 1) {
+        const step = spacing / subdivisions;
+        for (let x = x0; x <= x1 + 1e-9; x += step) {
+          const k = Math.round((x - x0) / step);
+          if (k % subdivisions === 0) continue;
+          pushSegment(x, y0, x, y1, sub);
+        }
+        for (let y = y0; y <= y1 + 1e-9; y += step) {
+          const k = Math.round((y - y0) / step);
+          if (k % subdivisions === 0) continue;
+          pushSegment(x0, y, x1, y, sub);
+        }
+      }
+      let idx = 0;
+      for (let x = x0; x <= x1 + 1e-9; x += spacing) {
+        const isAccent = !!accentEvery && accentEvery > 0 && idx % accentEvery === 0;
+        if (!isAccent) pushSegment(x, y0, x, y1, line);
+        idx++;
+      }
+      idx = 0;
+      for (let y = y0; y <= y1 + 1e-9; y += spacing) {
+        const isAccent = !!accentEvery && accentEvery > 0 && idx % accentEvery === 0;
+        if (!isAccent) pushSegment(x0, y, x1, y, line);
+        idx++;
+      }
+      if (accentEvery && accentEvery > 0) {
+        idx = 0;
+        for (let x = x0; x <= x1 + 1e-9; x += spacing) {
+          if (idx % accentEvery === 0) pushSegment(x, y0, x, y1, accent);
+          idx++;
+        }
+        idx = 0;
+        for (let y = y0; y <= y1 + 1e-9; y += spacing) {
+          if (idx % accentEvery === 0) pushSegment(x0, y, x1, y, accent);
+          idx++;
+        }
+      }
+      return children;
+    }
+  };
+}
+var DEFAULT_FILL = { fill: "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: () => {
+      const cell = opts.getCell();
+      if (!cell) return [];
+      const spacing = resolveUnit(opts.spacing, opts.unitSystem);
+      const o = opts.origin ? opts.origin() : { x: 0, y: 0 };
+      const x = o.x + cell.col * spacing;
+      const y = o.y + cell.row * spacing;
+      const children = [
+        {
+          kind: "path",
+          path: { kind: "rect", x, y, width: spacing, height: spacing },
+          fill
+        }
+      ];
+      return children;
+    }
+  };
+}
+function useGuides(initial = []) {
+  const [guides, setGuides] = useState(initial);
+  const ref = useLatest(guides);
+  const getGuides = useCallback(() => ref.current, [ref]);
+  const addGuide = useCallback((guide) => {
+    setGuides((prev) => {
+      const idx = prev.findIndex((g) => g.id === guide.id);
+      if (idx === -1) return [...prev, guide];
+      const next = prev.slice();
+      next[idx] = guide;
+      return next;
+    });
+  }, []);
+  const removeGuide = useCallback((id) => {
+    setGuides((prev) => {
+      const idx = prev.findIndex((g) => g.id === id);
+      if (idx === -1) return prev;
+      const next = prev.slice();
+      next.splice(idx, 1);
+      return next;
+    });
+  }, []);
+  const clearGuides = useCallback(() => {
+    setGuides((prev) => prev.length === 0 ? prev : []);
+  }, []);
+  return { guides, getGuides, addGuide, removeGuide, clearGuides };
+}
+var DEFAULT_COLOR = "#3aa0ff";
+function createGuidesLayer(opts) {
+  const lineWidth = opts.lineWidth ?? 1;
+  const color = opts.color ?? DEFAULT_COLOR;
+  const stroke = {
+    paint: { fill: "solid", color },
+    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 out = [];
+      for (const g of guides) {
+        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"
+          };
+          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"
+          };
+          out.push({ kind: "path", path, stroke });
+        }
+      }
+      return out;
+    }
+  };
+}
+var EPS = 1e-3;
+function deriveAlignmentGuides(targets, opts = {}) {
+  const d = opts.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
+  const edges = opts.edges ?? true;
+  const centers = opts.centers ?? true;
+  const seenX = /* @__PURE__ */ new Map();
+  const seenY = /* @__PURE__ */ new Map();
+  const add = (axis, offset) => {
+    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 emit = (b) => {
+    if (edges) {
+      add("x", b.x);
+      add("x", b.x + b.width);
+      add("y", b.y);
+      add("y", b.y + b.height);
+    }
+    if (centers) {
+      add("x", b.x + b.width / 2);
+      add("y", b.y + b.height / 2);
+    }
+  };
+  for (const t of targets) emit(visualBoundsViaDescriptor(t, d));
+  if (opts.page) emit(opts.page);
+  return [...seenX.values(), ...seenY.values()];
+}
+
+// src/guides/alignment/match.ts
+var MOVE_ANCHORS = {
+  x: ["min", "center", "max"],
+  y: ["min", "center", "max"]
+};
+function featureOffset(b, axis, anchor) {
+  if (axis === "x") {
+    if (anchor === "min") return b.x;
+    if (anchor === "center") return b.x + b.width / 2;
+    return b.x + b.width;
+  }
+  if (anchor === "min") return b.y;
+  if (anchor === "center") return b.y + b.height / 2;
+  return b.y + b.height;
+}
+function bestAxis(b, axis, anchors, candidates, worldTolerance) {
+  let bestAbs = Infinity;
+  let bestDelta = 0;
+  let bestGuide = null;
+  for (const anchor of anchors) {
+    const o = featureOffset(b, axis, anchor);
+    for (const g of candidates) {
+      if (g.axis !== axis) continue;
+      const d = g.offset - o;
+      const ad = Math.abs(d);
+      if (ad <= worldTolerance && ad < bestAbs) {
+        bestAbs = ad;
+        bestDelta = d;
+        bestGuide = g;
+      }
+    }
+  }
+  return { delta: bestGuide ? bestDelta : 0, guide: bestGuide };
+}
+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 };
+}
+var activeList = (m) => [m.activeX, m.activeY].filter((g) => g !== null);
+function worldTol(base, ctx) {
+  return screenTolerance(base.tolerance ?? 6, ctx);
+}
+function alignMoveBehavior(args) {
+  const d = args.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
+  return {
+    onMove(ctx, transform) {
+      if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
+        args.setActiveGuides([]);
+        return;
+      }
+      if (transform.kind !== "translate") return;
+      const boxes = [];
+      for (const id of ctx.draggedIds) {
+        const originPose = ctx.origin.get(id);
+        if (originPose === void 0) continue;
+        boxes.push(visualBoundsViaDescriptor(
+          translatePoseViaDescriptor(originPose, transform.dx, transform.dy, d),
+          d
+        ));
+      }
+      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 } };
+    },
+    onEnd() {
+      args.setActiveGuides([]);
+    },
+    onCancel() {
+      args.setActiveGuides([]);
+    }
+  };
+}
+function alignInsertBehavior(args) {
+  const pointAnchors = { x: ["min"], y: ["min"] };
+  return {
+    onMove(ctx, { current }) {
+      if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
+        args.setActiveGuides([]);
+        return;
+      }
+      const box = { x: current.x, y: current.y, width: 0, height: 0 };
+      const m = matchAlignment(box, args.getCandidates(), worldTol(args, ctx), pointAnchors);
+      if (m.activeX === null && m.activeY === null) {
+        args.setActiveGuides([]);
+        return;
+      }
+      args.setActiveGuides(activeList(m));
+      return { current: { x: current.x + m.dx, y: current.y + m.dy } };
+    },
+    onEnd() {
+      args.setActiveGuides([]);
+    },
+    onCancel() {
+      args.setActiveGuides([]);
+    }
+  };
+}
+function alignResizeBehavior(args) {
+  const d = args.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
+  return {
+    onMove(ctx, { pose, anchor }) {
+      if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
+        args.setActiveGuides([]);
+        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));
+      if (m === null) {
+        args.setActiveGuides([]);
+        return;
+      }
+      let { x, y, width, height } = pose;
+      if (anchor.x === "min") width += m.lx;
+      else if (anchor.x === "max") {
+        x += m.lx;
+        width -= m.lx;
+      }
+      if (anchor.y === "min") height += m.ly;
+      else if (anchor.y === "max") {
+        y += m.ly;
+        height -= m.ly;
+      }
+      args.setActiveGuides(m.guides);
+      return { pose: { ...pose, x, y, width, height } };
+    },
+    onEnd() {
+      args.setActiveGuides([]);
+    },
+    onCancel() {
+      args.setActiveGuides([]);
+    }
+  };
+}
+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 matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol) {
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  const toWorld = (lx, ly) => ({ x: lx * cos - ly * sin, y: lx * sin + ly * cos });
+  const fixedLocal = fixedCornerOf(pose, anchor);
+  const f0 = fixedCornerOf(originBox, anchor);
+  const pivot = toWorld(f0.x - originBox.x - originBox.width / 2, f0.y - originBox.y - originBox.height / 2);
+  const fixedWorld = { x: originBox.x + originBox.width / 2 + pivot.x, y: originBox.y + originBox.height / 2 + pivot.y };
+  const drawn = (lx, ly) => {
+    const o = toWorld(lx - fixedLocal.x, ly - fixedLocal.y);
+    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 a = anchor[axis];
+    return a === "min" ? [hi] : a === "max" ? [lo] : [lo, hi];
+  };
+  if (anchor.x !== "free" && anchor.y !== "free") {
+    const c = drawn(movingEdge("x")[0], movingEdge("y")[0]);
+    const m = matchAlignment({ x: c.x, y: c.y, width: 0, height: 0 }, candidates, tol, { x: ["min"], y: ["min"] });
+    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) };
+  }
+  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 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) return null;
+  return along === "x" ? { lx: best.t, ly: 0, guides: [best.guide] } : { lx: 0, ly: best.t, guides: [best.guide] };
+}
+
+// src/layout/snaps.ts
+function dist2(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return dx * dx + dy * dy;
+}
+function nearestOf(targets, pointer) {
+  if (targets.length === 0) return null;
+  let best = targets[0];
+  let bestD = dist2(best.origin, pointer);
+  for (let i = 1; i < targets.length; i++) {
+    const d = dist2(targets[i].origin, pointer);
+    if (d < bestD) {
+      bestD = d;
+      best = targets[i];
+    }
+  }
+  return best;
+}
+function none() {
+  return { pickTarget: () => null };
+}
+function nearest() {
+  return { pickTarget: (targets, pointer) => nearestOf(targets, pointer) };
+}
+function nearestWithin(opts) {
+  const tol2 = opts.tolerance * opts.tolerance;
+  return {
+    pickTarget(targets, pointer) {
+      const got = nearestOf(targets, pointer);
+      if (got === null) return null;
+      return dist2(got.origin, pointer) <= tol2 ? got : null;
+    }
+  };
+}
+function rectContains(r, p) {
+  return p.x >= r.x && p.x < r.x + r.width && p.y >= r.y && p.y < r.y + r.height;
+}
+function containedThenNearest() {
+  return {
+    pickTarget(targets, pointer) {
+      for (const t of targets) {
+        if (t.hitBounds && rectContains(t.hitBounds, pointer)) return t;
+      }
+      return nearestOf(targets, pointer);
+    }
+  };
+}
+function isCellMeta(m) {
+  return typeof m === "object" && m !== null && "cellRect" in m && typeof m.cellRect === "object";
+}
+function cellAt() {
+  return {
+    pickTarget(targets, pointer) {
+      for (const t of targets) {
+        if (t.hitBounds && rectContains(t.hitBounds, pointer)) return t;
+        if (isCellMeta(t.meta) && rectContains(t.meta.cellRect, pointer)) return t;
+      }
+      return nearestOf(targets, pointer);
+    }
+  };
+}
+function freeform(opts = {}) {
+  const snap = opts.snap ?? none();
+  return {
+    snap,
+    childPoses(_container, children) {
+      const out = /* @__PURE__ */ new Map();
+      for (const c of children) out.set(c.id, c.pose);
+      return out;
+    },
+    getDropTargets() {
+      return [];
+    },
+    reflowPoses() {
+      return /* @__PURE__ */ new Map();
+    },
+    commitDrop(_container, _children, dragged, target) {
+      return [
+        createTransformOp({
+          id: dragged.id,
+          from: dragged.originPose,
+          to: target?.pose ?? dragged.pose,
+          label: "Drop"
+        })
+      ];
+    }
+  };
+}
+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 snap = opts.snap ?? cellAt();
+  const capacity = 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;
+        }
+      }
+    }
+    return null;
+  }
+  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
+    );
+    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);
+    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 {
+    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;
+    },
+    getDropTargets(container, children, dragged) {
+      const occupied = /* @__PURE__ */ new Set();
+      if (dragged.sourceContainerId !== container.id) {
+        for (const c of children) {
+          if (c.id === dragged.id) continue;
+          const idx = cellIndexOf(container.bounds, 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;
+    },
+    reflowPoses(container, children, dragged, target) {
+      const out = /* @__PURE__ */ new Map();
+      const swap = computeSwap(container, children, dragged, target);
+      if (swap !== null) {
+        out.set(swap.occupant, swap.newPose);
+      }
+      return out;
+    },
+    commitDrop(container, children, dragged, target) {
+      const ops = [];
+      let droppedPose;
+      if (target === null) {
+        droppedPose = dragged.pose;
+      } else {
+        const meta = target.meta;
+        droppedPose = cellToPose(meta.cellRect, dragged.pose);
+        const swap = computeSwap(container, children, dragged, target);
+        if (swap !== null) {
+          ops.push(
+            createTransformOp({
+              id: swap.occupant,
+              from: swap.from,
+              to: swap.newPose,
+              label: "Tile swap"
+            })
+          );
+        }
+      }
+      ops.push(
+        createTransformOp({
+          id: dragged.id,
+          from: dragged.originPose,
+          to: droppedPose,
+          label: "Tile drop"
+        })
+      );
+      return ops;
+    }
+  };
+}
+function buildPoints(bounds, pattern, gridSpacing) {
+  switch (pattern) {
+    case "corners":
+      return [
+        { x: bounds.x, y: bounds.y },
+        { x: bounds.x + bounds.width, y: bounds.y },
+        { x: bounds.x, y: bounds.y + bounds.height },
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height }
+      ];
+    case "edges":
+      return [
+        { x: bounds.x + bounds.width / 2, y: bounds.y },
+        { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+        { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 }
+      ];
+    case "center":
+      return [{ x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }];
+    case "grid": {
+      const out = [];
+      const cols = Math.floor(bounds.width / gridSpacing);
+      const rows = Math.floor(bounds.height / gridSpacing);
+      for (let j = 0; j <= rows; j++) {
+        for (let i = 0; i <= cols; i++) {
+          out.push({ x: bounds.x + i * gridSpacing, y: bounds.y + j * gridSpacing });
+        }
+      }
+      return out;
+    }
+  }
+}
+function snapPoint(opts) {
+  const gridSpacing = opts.gridSpacing ?? 50;
+  const tolerance = opts.tolerance ?? Infinity;
+  const snap = opts.snap ?? nearestWithin({ tolerance });
+  return {
+    snap,
+    childPoses(_container, children) {
+      const out = /* @__PURE__ */ new Map();
+      for (const c of children) out.set(c.id, c.pose);
+      return out;
+    },
+    getDropTargets(container, _children, dragged) {
+      const points = buildPoints(container.bounds, opts.pattern, gridSpacing);
+      return points.map((p) => ({
+        // Anchor the dragged child's top-left at the snap point.
+        pose: { ...dragged.pose, x: p.x, y: p.y },
+        origin: p
+      }));
+    },
+    reflowPoses() {
+      return /* @__PURE__ */ new Map();
+    },
+    commitDrop(_container, _children, dragged, target) {
+      const to = target === null ? dragged.pose : target.pose;
+      return [
+        createTransformOp({
+          id: dragged.id,
+          from: dragged.originPose,
+          to,
+          label: "Snap drop"
+        })
+      ];
+    }
+  };
+}
+
+export { MOVE_ANCHORS, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGuidesLayer, deriveAlignmentGuides, freeform, matchAlignment, nearest, nearestWithin, none, roundToCell, snapPoint, tileGrid, useGridCellHover, useGuides };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map