@weasel-js/guides 1.9.3 → 1.10.0

package/dist/index.js

@@ -1,9 +1,10 @@
-import { pointToGridCell } from './chunk-5BCCIJY3.js';
-export { gridSnapStrategy, pointToGridCell } from './chunk-5BCCIJY3.js';
+import { pointToGridCell } from './chunk-TLFMAZ6M.js';
+export { gridSnapStrategy, pointToGridCell } from './chunk-TLFMAZ6M.js';
 export { pointSnapToGrid } from './chunk-B25KFI3I.js';
-export { DEFAULT_GUIDE_TOLERANCE_PX, guideSnapStrategy } from './chunk-GEDAPTOM.js';
+import { guideOffsetOn } from './chunk-LOFNN7EQ.js';
+export { DEFAULT_GUIDE_TOLERANCE_PX, guideSnapStrategy } from './chunk-LOFNN7EQ.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { useLatest, resolveUnit, pxExtent, textCommandFromRuns, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, translatePoseViaDescriptor, unionBounds, fixedCornerOf, createTransformOp, resolveStrokeWidth, screenToWorld, screenTolerance } from '@weasel-js/core';
+import { useLatest, resolveAxes, pxExtent, textCommandFromRuns, AUTO_POSE_DESCRIPTOR, visualBoundsViaDescriptor, rectFromPlane, translatePoseViaDescriptor, unionBounds, fixedCornerOf, createTransformOp, resolveStrokeWidth, screenToWorld, rectToPlane, screenTolerance } from '@weasel-js/core';
 import { rectPath, PATH_M, PATH_L } from '@weasel-js/geom';
 
 // src/grid/roundToCell.ts
@@ -52,15 +53,15 @@ function useGridCellHover(opts) {
   return { cell, getCell };
 }
 var DEFAULT_LINE = {
-  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.08)" },
+  paint: { kind: "solid", color: "rgba(255, 255, 255, 0.08)" },
   width: 1
 };
 var DEFAULT_ACCENT = {
-  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.16)" },
+  paint: { kind: "solid", color: "rgba(255, 255, 255, 0.16)" },
   width: 1
 };
 var DEFAULT_SUB = {
-  paint: { fill: "solid", color: "rgba(255, 255, 255, 0.04)" },
+  paint: { kind: "solid", color: "rgba(255, 255, 255, 0.04)" },
   width: 1
 };
 function createGridLayer(opts) {
@@ -74,7 +75,7 @@ function createGridLayer(opts) {
       const b = opts.bounds();
       if (b.width <= 0 || b.height <= 0) return [];
       const { accentEvery, subdivisions } = opts;
-      const spacing = resolveUnit(opts.spacing, opts.unitSystem);
+      const spacing = resolveAxes(opts.spacing, opts.unitSystem);
       const x0 = b.x;
       const y0 = b.y;
       const x1 = b.x + b.width;
@@ -88,46 +89,47 @@ function createGridLayer(opts) {
           coords: new Float32Array([sx, sy, ex, ey]),
           fillRule: "nonzero"
         };
-        const across = sx === ex ? px.x : px.y;
+        const across2 = sx === ex ? px.x : px.y;
         children.push({
           kind: "path",
           path,
-          stroke: { ...s, width: resolveStrokeWidth(s.width ?? 1, 1) * across }
+          stroke: { ...s, width: resolveStrokeWidth(s.width ?? 1, 1) * across2 }
         });
       };
       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);
+        const stepX = spacing.x / subdivisions;
+        for (let x = x0; x <= x1 + 1e-9; x += stepX) {
+          const k = Math.round((x - x0) / stepX);
           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);
+        const stepY = spacing.y / subdivisions;
+        for (let y = y0; y <= y1 + 1e-9; y += stepY) {
+          const k = Math.round((y - y0) / stepY);
           if (k % subdivisions === 0) continue;
           pushSegment(x0, y, x1, y, sub);
         }
       }
       let idx = 0;
-      for (let x = x0; x <= x1 + 1e-9; x += spacing) {
+      for (let x = x0; x <= x1 + 1e-9; x += spacing.x) {
         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) {
+      for (let y = y0; y <= y1 + 1e-9; y += spacing.y) {
         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) {
+        for (let x = x0; x <= x1 + 1e-9; x += spacing.x) {
           if (idx % accentEvery === 0) pushSegment(x, y0, x, y1, accent);
           idx++;
         }
         idx = 0;
-        for (let y = y0; y <= y1 + 1e-9; y += spacing) {
+        for (let y = y0; y <= y1 + 1e-9; y += spacing.y) {
           if (idx % accentEvery === 0) pushSegment(x0, y, x1, y, accent);
           idx++;
         }
@@ -136,7 +138,7 @@ function createGridLayer(opts) {
     }
   };
 }
-var DEFAULT_FILL = { fill: "solid", color: "rgba(127,176,105,0.15)" };
+var DEFAULT_FILL = { paint: { kind: "solid", color: "rgba(127,176,105,0.15)" } };
 function createCellHighlightLayer(opts) {
   const fill = opts.fill ?? DEFAULT_FILL;
   return {
@@ -145,14 +147,14 @@ function createCellHighlightLayer(opts) {
     draw: () => {
       const cell = opts.getCell();
       if (!cell) return [];
-      const spacing = resolveUnit(opts.spacing, opts.unitSystem);
+      const spacing = resolveAxes(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 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, height: spacing },
+          path: { kind: "rect", x, y, width: spacing.x, height: spacing.y },
           fill
         }
       ];
@@ -213,8 +215,8 @@ function createGuidesLayer(opts) {
   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 };
+  const stroke = { paint: { kind: "solid", color }, width: lineWidth };
+  const gapStroke = { paint: { kind: "solid", color: gapColor }, width: lineWidth };
   return {
     id: opts.id ?? "guides",
     label: opts.label ?? "Guides",
@@ -248,11 +250,11 @@ function createGuidesLayer(opts) {
         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({ kind: "path", path: rectPath(left, top, w, LABEL_H), fill: { paint: { kind: "solid", color: gapColor } } });
         out.push(textCommandFromRuns(
           left + LABEL_PAD_X,
           top + 2,
-          [{ text, fill: { fill: "solid", color: "#fff" } }],
+          [{ text, fill: { paint: { kind: "solid", color: "#fff" } } }],
           LABEL_FONT
         ));
       }
@@ -291,7 +293,11 @@ function deriveAlignmentGuides(targets, opts = {}) {
       add("y", b.y + b.height / 2, b);
     }
   };
-  for (const t of targets) emit(visualBoundsViaDescriptor(t, d));
+  targets.forEach((t, i) => {
+    const box = visualBoundsViaDescriptor(t, d);
+    const plane = opts.planeOf?.(t, i);
+    emit(plane ? rectFromPlane(plane, box) : box);
+  });
   if (opts.page) emit(opts.page);
   return [...seenX.values(), ...seenY.values()];
 }
@@ -460,6 +466,39 @@ function applyEdges(b, dx, dy, moving) {
   } else if (moving.y === "max") height += dy;
   return { x, y, width, height };
 }
+var across = (axis) => axis === "x" ? "y" : "x";
+var into = (m, axis, v) => v * m.scale[axis] + m.offset[axis];
+var outOf = (m, axis, v) => (v - m.offset[axis]) / m.scale[axis];
+function range(r, map) {
+  const a = map(r.min);
+  const b = map(r.max);
+  return { ...r, min: Math.min(a, b), max: Math.max(a, b) };
+}
+function guideToPlane(g, m) {
+  const span = g.span && range(g.span, (v) => into(m, across(g.axis), v));
+  return { ...g, offset: guideOffsetOn(g, m), ...span ? { span } : {} };
+}
+function guideFromPlane(g, m) {
+  const span = g.span && range(g.span, (v) => outOf(m, across(g.axis), v));
+  return { ...g, offset: outOf(m, g.axis, g.offset), ...span ? { span } : {} };
+}
+function gapFromPlane(g, m) {
+  return { ...range(g, (v) => outOf(m, g.axis, v)), at: outOf(m, across(g.axis), g.at) };
+}
+function alignmentOnPlane(args, plane) {
+  if (!plane) return args;
+  const spacing = args.getSpacingTargets;
+  const setGaps = args.setActiveGaps;
+  return {
+    ...args,
+    getCandidates: () => args.getCandidates().map((g) => guideToPlane(g, plane)),
+    setActiveGuides: (guides) => args.setActiveGuides(guides.map((g) => guideFromPlane(g, plane))),
+    ...spacing ? { getSpacingTargets: () => spacing().map((b) => rectToPlane(plane, b)) } : {},
+    ...setGaps ? { setActiveGaps: (gaps) => setGaps(gaps.map((g) => gapFromPlane(g, plane))) } : {}
+  };
+}
+
+// src/guides/alignment/behaviors.ts
 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) {
@@ -491,10 +530,11 @@ function publish(args, r) {
 function worldTol(base, ctx) {
   return screenTolerance(base.tolerance ?? 6, ctx);
 }
-function alignMoveBehavior(args) {
-  const d = args.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
+function alignMoveBehavior(given) {
+  const d = given.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
   return {
     onMove(ctx, transform) {
+      const args = alignmentOnPlane(given, ctx.plane);
       if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
         publish(args, null);
         return;
@@ -517,17 +557,18 @@ function alignMoveBehavior(args) {
       return { transform: { kind: "translate", dx: transform.dx + r.dx, dy: transform.dy + r.dy } };
     },
     onEnd() {
-      publish(args, null);
+      publish(given, null);
     },
     onCancel() {
-      publish(args, null);
+      publish(given, null);
     }
   };
 }
-function alignInsertBehavior(args) {
+function alignInsertBehavior(given) {
   const pointAnchors = { x: ["min"], y: ["min"] };
   return {
     onMove(ctx, { current }) {
+      const args = alignmentOnPlane(given, ctx.plane);
       if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
         args.setActiveGuides([]);
         return;
@@ -542,17 +583,18 @@ function alignInsertBehavior(args) {
       return { current: { x: current.x + m.dx, y: current.y + m.dy } };
     },
     onEnd() {
-      args.setActiveGuides([]);
+      given.setActiveGuides([]);
     },
     onCancel() {
-      args.setActiveGuides([]);
+      given.setActiveGuides([]);
     }
   };
 }
-function alignResizeBehavior(args) {
-  const d = args.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
+function alignResizeBehavior(given) {
+  const d = given.poseDescriptor ?? AUTO_POSE_DESCRIPTOR;
   return {
     onMove(ctx, { pose, anchor }) {
+      const args = alignmentOnPlane(given, ctx.plane);
       if (args.bypassKey && ctx.modifiers[args.bypassKey]) {
         publish(args, null);
         return;
@@ -579,10 +621,10 @@ function alignResizeBehavior(args) {
       return { pose: { ...pose, x, y, width, height } };
     },
     onEnd() {
-      publish(args, null);
+      publish(given, null);
     },
     onCancel() {
-      publish(args, null);
+      publish(given, null);
     }
   };
 }
@@ -627,8 +669,8 @@ function matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol)
   const dir = along === "x" ? toWorld(1, 0) : toWorld(0, 1);
   const edge = movingEdge(along)[0];
   let best = null;
-  for (const across2 of movingEdge(along === "x" ? "y" : "x")) {
-    const c = along === "x" ? drawn(edge, across2) : drawn(across2, edge);
+  for (const across3 of movingEdge(along === "x" ? "y" : "x")) {
+    const c = along === "x" ? drawn(edge, across3) : drawn(across3, edge);
     for (const g of candidates) {
       const reach = g.axis === "x" ? dir.x : dir.y;
       if (Math.abs(reach) < 1e-9) continue;
@@ -638,8 +680,8 @@ function matchRotatedCorners(pose, anchor, originBox, rotation, candidates, tol)
     }
   }
   if (best === null) return null;
-  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)];
+  const across2 = best.guide.axis === "x" ? best.at.y + best.t * dir.y : best.at.x + best.t * dir.x;
+  const guides = [stretchSpan(best.guide, across2, across2)];
   return along === "x" ? { lx: best.t, ly: 0, guides, gaps: [] } : { lx: 0, ly: best.t, guides, gaps: [] };
 }
 
@@ -705,6 +747,41 @@ function cellAt() {
     }
   };
 }
+
+// src/layout/perContainer.ts
+function perContainer(factory, opts) {
+  const max = opts.max ?? 256;
+  const built = /* @__PURE__ */ new Map();
+  const of = (container) => {
+    let strategy = built.get(container.id);
+    if (strategy) built.delete(container.id);
+    else strategy = factory(container);
+    built.set(container.id, strategy);
+    if (built.size > max) built.delete(built.keys().next().value);
+    return strategy;
+  };
+  return {
+    snap: opts.snap,
+    contains: opts.contains,
+    forget: (containerId) => void built.delete(containerId),
+    childPoses: (container, children) => of(container).childPoses(container, children),
+    getDropTargets: (container, children, dragged) => of(container).getDropTargets(container, children, dragged),
+    reflowPoses: (container, children, dragged, target) => of(container).reflowPoses(container, children, dragged, target),
+    commitDrop: (container, children, dragged, target) => of(container).commitDrop(container, children, dragged, target),
+    dropRegion: (container) => of(container).dropRegion?.(container) ?? null,
+    acceptsDrop: (container, dragged) => of(container).acceptsDrop?.(container, dragged) ?? true,
+    arrive(container, children, arrivals) {
+      const s = of(container);
+      return s.arrive ? s.arrive(container, children, arrivals) : { poses: s.childPoses(container, children) };
+    },
+    depart(container, children, departed) {
+      const s = of(container);
+      return s.depart ? s.depart(container, children, departed) : { poses: s.childPoses(container, children) };
+    },
+    contentExtent: (container, children) => of(container).contentExtent?.(container, children) ?? container.bounds,
+    releaseDrop: (container, children, dragged) => of(container).releaseDrop?.(container, children, dragged) ?? null
+  };
+}
 function freeform(opts = {}) {
   const snap = opts.snap ?? none();
   return {
@@ -798,7 +875,7 @@ function tileGrid(opts) {
     if (fromIdx === null || fromIdx === idx) return null;
     return { occupant: occupant.id, from: occupant.pose, newPose: cellToPose(grid.rectAt(fromIdx), occupant.pose) };
   }
-  function pack(from, into, children) {
+  function pack2(from, into2, 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;
@@ -809,7 +886,7 @@ function tileGrid(opts) {
     });
     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));
+      out.set(ordered[i].c.id, cellToPose(into2.rectAt(i), ordered[i].c.pose));
     }
     return out;
   }
@@ -817,7 +894,7 @@ function tileGrid(opts) {
     snap,
     childPoses(container, children) {
       const grid = gridOf(container.bounds, children.length);
-      return pack(grid, grid, children);
+      return pack2(grid, grid, children);
     },
     getDropTargets(container, children, dragged) {
       const grid = gridOf(container.bounds, heldBy(container, children, dragged));
@@ -884,7 +961,7 @@ function tileGrid(opts) {
       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 slots2 = overflow === "reject" ? capacity : linesFor(n) * perLine;
       const taken = /* @__PURE__ */ new Set();
       for (const c of children) {
         if (arrivals.has(c.id)) continue;
@@ -896,13 +973,13 @@ function tileGrid(opts) {
         if (!arrivals.has(c.id)) continue;
         const own = grid.indexOf(c.pose);
         let idx;
-        if (own !== null && own < slots && !taken.has(own)) {
+        if (own !== null && own < slots2 && !taken.has(own)) {
           idx = own;
         } else {
           const at = centerOf(c.pose);
           let best = -1;
           let bestD = Infinity;
-          for (let i = 0; i < slots; i++) {
+          for (let i = 0; i < slots2; i++) {
             if (taken.has(i)) continue;
             const r = grid.rectAt(i);
             const dx = r.x + r.width / 2 - at.x;
@@ -929,10 +1006,10 @@ function tileGrid(opts) {
       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) };
+        return { poses: pack2(before, before, children) };
       }
       const bounds = before.boundsFor(lines);
-      return { poses: pack(before, gridOf(bounds, n), children), bounds };
+      return { poses: pack2(before, gridOf(bounds, n), children), bounds };
     },
     contentExtent(container, children) {
       const grid = gridOf(container.bounds, children.length);
@@ -1009,7 +1086,377 @@ function snapPoint(opts) {
     }
   };
 }
+function defaultCenterOf2(pose) {
+  const p = pose;
+  return { x: (p.x ?? 0) + (p.width ?? 0) / 2, y: (p.y ?? 0) + (p.height ?? 0) / 2 };
+}
+var withAt = (list, index, item) => [
+  ...list.slice(0, index),
+  item,
+  ...list.slice(index)
+];
+function othersOf(seq, container, children, dragged) {
+  const held = children.filter((c) => c.id !== dragged.id);
+  const count = held.length + (dragged.sourceContainerId === container.id ? 1 : 0);
+  return seq.order(container, held, count);
+}
+function nearestIndex(seq, container, sequence, child) {
+  const at = seq.centerOf(child.pose);
+  let best = null;
+  let bestD = Infinity;
+  for (let i = 0; i <= sequence.length; i++) {
+    const pose = seq.place(container, withAt(sequence, i, child))?.get(child.id);
+    if (pose === void 0) continue;
+    const p = seq.centerOf(pose);
+    const d = (p.x - at.x) ** 2 + (p.y - at.y) ** 2;
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  }
+  return best;
+}
+function sequenceLayout(seq) {
+  const { centerOf } = seq;
+  const moved = (a, b) => {
+    const p = centerOf(a);
+    const q = centerOf(b);
+    return p.x !== q.x || p.y !== q.y;
+  };
+  const arranged = (container, sequence, poses) => {
+    const bounds = seq.resize?.(container, sequence);
+    return bounds ? { poses, bounds } : { poses };
+  };
+  const shifted = (container, children, dragged, target) => {
+    if (!target) return /* @__PURE__ */ new Map();
+    const others = othersOf(seq, container, children, dragged);
+    const self = { id: dragged.id, pose: dragged.pose };
+    const poses = seq.place(container, withAt(others, target.meta.index, self)) ?? /* @__PURE__ */ new Map();
+    poses.delete(dragged.id);
+    return poses;
+  };
+  return {
+    snap: seq.snap,
+    childPoses(container, children) {
+      const sequence = seq.order(container, children, children.length);
+      return seq.place(container, sequence) ?? new Map(children.map((c) => [c.id, c.pose]));
+    },
+    getDropTargets(container, children, dragged) {
+      const others = othersOf(seq, container, children, dragged);
+      const self = { id: dragged.id, pose: dragged.pose };
+      const targets = [];
+      for (let index = 0; index <= others.length; index++) {
+        const pose = seq.place(container, withAt(others, index, self))?.get(dragged.id);
+        if (pose === void 0) continue;
+        targets.push({ pose, origin: centerOf(pose), meta: { index } });
+      }
+      return targets;
+    },
+    reflowPoses: shifted,
+    commitDrop(container, children, dragged, target) {
+      const ops = [];
+      if (target) {
+        const poses = shifted(container, children, dragged, target);
+        for (const c of children) {
+          const to = poses.get(c.id);
+          if (to !== void 0 && moved(c.pose, to)) {
+            ops.push(createTransformOp({ id: c.id, from: c.pose, to, label: seq.labels.shift }));
+          }
+        }
+      }
+      ops.push(
+        createTransformOp({
+          id: dragged.id,
+          from: dragged.originPose,
+          to: target?.pose ?? dragged.pose,
+          label: seq.labels.drop
+        })
+      );
+      return ops;
+    },
+    arrive(container, children, arrivals) {
+      const held = children.filter((c) => !arrivals.has(c.id));
+      let sequence = seq.order(container, held, held.length);
+      for (const c of children) {
+        if (!arrivals.has(c.id)) continue;
+        const index = nearestIndex(seq, container, sequence, c);
+        if (index === null) return null;
+        sequence = withAt(sequence, index, c);
+      }
+      const poses = seq.place(container, sequence);
+      return poses && arranged(container, sequence, poses);
+    },
+    depart(container, children, departed) {
+      const sequence = seq.order(container, children, children.length + departed.size);
+      const poses = seq.place(container, sequence) ?? /* @__PURE__ */ new Map();
+      return arranged(container, sequence, poses);
+    }
+  };
+}
+
+// src/layout/strategies/slots.ts
+function defaultSlotToPose(slot, pose) {
+  const { width = 0, height = 0 } = pose;
+  return { ...pose, x: slot.x - width / 2, y: slot.y - height / 2 };
+}
+function nearestSlot(at, places) {
+  let best = -1;
+  let bestD = Infinity;
+  for (let i = 0; i < places.length; i++) {
+    const d = (places[i].x - at.x) ** 2 + (places[i].y - at.y) ** 2;
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  }
+  return best;
+}
+function slots(opts) {
+  const { arrangement } = opts;
+  const slotToPose = opts.slotToPose ?? defaultSlotToPose;
+  const centerOf = opts.centerOf ?? defaultCenterOf2;
+  return sequenceLayout({
+    snap: opts.snap ?? nearest(),
+    centerOf,
+    labels: { drop: "Slot drop", shift: "Slot shift" },
+    // Ties break by id, so a container nobody has arranged yet still has an order.
+    order(container, children, count) {
+      const places = arrangement(container.bounds, count);
+      return children.map((c) => ({ c, slot: nearestSlot(centerOf(c.pose), places) })).sort((a, b) => a.slot - b.slot || (a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0)).map((e) => e.c);
+    },
+    place(container, sequence) {
+      const places = arrangement(container.bounds, sequence.length);
+      if (places.length < sequence.length) return null;
+      return new Map(sequence.map((c, i) => [c.id, slotToPose(places[i], c.pose)]));
+    }
+  });
+}
+
+// src/layout/strategies/pack.ts
+function pack(opts = {}) {
+  const gap = opts.gap ?? 0;
+  const overflow = opts.overflow ?? "reject";
+  const minHeight = opts.minHeight ?? 0;
+  const rectOf2 = opts.rectOf ?? ((pose) => pose);
+  const moveTo = opts.moveTo ?? ((pose, at) => ({ ...pose, ...at }));
+  const readingOrder = (children) => children.map((c) => ({ c, r: rectOf2(c.pose) })).sort((a, b) => a.r.y - b.r.y || a.r.x - b.r.x || (a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0)).map((e) => e.c);
+  function shelve(bounds, sequence) {
+    const poses = /* @__PURE__ */ new Map();
+    let x = 0;
+    let y = 0;
+    let shelf = 0;
+    for (const c of sequence) {
+      const { width, height } = rectOf2(c.pose);
+      if (width > bounds.width) return null;
+      if (x > 0 && x + width > bounds.width) {
+        y += shelf + gap;
+        x = 0;
+        shelf = 0;
+      }
+      poses.set(c.id, moveTo(c.pose, { x: bounds.x + x, y: bounds.y + y }));
+      x += width + gap;
+      shelf = Math.max(shelf, height);
+    }
+    return { poses, height: y + shelf };
+  }
+  const layout = sequenceLayout({
+    snap: opts.snap ?? nearest(),
+    labels: { drop: "Pack drop", shift: "Pack shift" },
+    centerOf(pose) {
+      const r = rectOf2(pose);
+      return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+    },
+    order: (_container, children) => readingOrder(children),
+    place(container, sequence) {
+      const shelved = shelve(container.bounds, sequence);
+      if (!shelved) return null;
+      return overflow === "reject" && shelved.height > container.bounds.height ? null : shelved.poses;
+    },
+    resize(container, sequence) {
+      if (overflow !== "grow") return void 0;
+      const height = Math.max(minHeight, shelve(container.bounds, sequence)?.height ?? 0);
+      return height === container.bounds.height ? void 0 : { ...container.bounds, height };
+    }
+  });
+  return {
+    ...layout,
+    contentExtent(container, children) {
+      const reach = shelve(container.bounds, readingOrder(children))?.height ?? 0;
+      return { ...container.bounds, height: Math.max(container.bounds.height, reach) };
+    }
+  };
+}
+function overlaps(a, b) {
+  const [outer, inner] = a.depth <= b.depth ? [a, b] : [b, a];
+  const shift = inner.depth - outer.depth;
+  return inner.col >> shift === outer.col && inner.row >> shift === outer.row;
+}
+function rectOf(bounds, cell) {
+  const width = bounds.width / 2 ** cell.depth;
+  const height = bounds.height / 2 ** cell.depth;
+  return { x: bounds.x + cell.col * width, y: bounds.y + cell.row * height, width, height };
+}
+function freeCell(bounds, taken, depth, at) {
+  let best = null;
+  let bestD = Infinity;
+  for (const cell of freeCells(taken, depth)) {
+    const r = rectOf(bounds, cell);
+    const d = (r.x + r.width / 2 - at.x) ** 2 + (r.y + r.height / 2 - at.y) ** 2;
+    if (d < bestD) {
+      bestD = d;
+      best = cell;
+    }
+  }
+  return best;
+}
+function freeCells(taken, depth) {
+  const out = [];
+  const n = 2 ** depth;
+  for (let row = 0; row < n; row++) {
+    for (let col = 0; col < n; col++) {
+      const cell = { depth, col, row };
+      if (!taken.some((t) => overlaps(t, cell))) out.push(cell);
+    }
+  }
+  return out;
+}
+function defaultCellToPose(cell, pose) {
+  const { width = 0, height = 0 } = pose;
+  return {
+    ...pose,
+    x: cell.x + (cell.width - width) / 2,
+    y: cell.y + (cell.height - height) / 2
+  };
+}
+function quadtree(opts = {}) {
+  const maxDepth = opts.maxDepth ?? 4;
+  const snap = opts.snap ?? containedThenNearest();
+  const cellToPose = opts.cellToPose ?? defaultCellToPose;
+  const centerOf = opts.centerOf ?? defaultCenterOf2;
+  const sizeOf = opts.sizeOf ?? ((pose) => {
+    const { width = 0, height = 0 } = pose;
+    return Math.max(width, height);
+  });
+  function depthOf(bounds, pose) {
+    const size = sizeOf(pose);
+    const side = Math.min(bounds.width, bounds.height);
+    let depth = 0;
+    while (depth < maxDepth && side / 2 ** (depth + 1) >= size) depth++;
+    return depth;
+  }
+  function assign(bounds, children, held = []) {
+    const taken = [...held];
+    const cells = /* @__PURE__ */ new Map();
+    const bySize = children.map((c) => ({ c, depth: depthOf(bounds, c.pose) })).sort((a, b) => a.depth - b.depth || (a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0));
+    for (const { c, depth } of bySize) {
+      const cell = freeCell(bounds, taken, depth, centerOf(c.pose));
+      if (!cell) continue;
+      taken.push(cell);
+      cells.set(c.id, cell);
+    }
+    return { cells, taken };
+  }
+  return {
+    snap,
+    childPoses(container, children) {
+      const { cells } = assign(container.bounds, children);
+      return new Map(
+        children.map((c) => {
+          const cell = cells.get(c.id);
+          return [c.id, cell ? cellToPose(rectOf(container.bounds, cell), c.pose) : c.pose];
+        })
+      );
+    },
+    getDropTargets(container, children, dragged) {
+      const { taken } = assign(container.bounds, children.filter((c) => c.id !== dragged.id));
+      return freeCells(taken, depthOf(container.bounds, dragged.pose)).map((cell) => {
+        const hitBounds = rectOf(container.bounds, cell);
+        return {
+          pose: cellToPose(hitBounds, dragged.pose),
+          origin: { x: hitBounds.x + hitBounds.width / 2, y: hitBounds.y + hitBounds.height / 2 },
+          hitBounds
+        };
+      });
+    },
+    reflowPoses: () => /* @__PURE__ */ new Map(),
+    commitDrop: (_container, _children, dragged, target) => [
+      createTransformOp({
+        id: dragged.id,
+        from: dragged.originPose,
+        to: target?.pose ?? dragged.pose,
+        label: "Quadtree drop"
+      })
+    ],
+    arrive(container, children, arrivals) {
+      const { taken } = assign(container.bounds, children.filter((c) => !arrivals.has(c.id)));
+      const joining = children.filter((c) => arrivals.has(c.id));
+      const { cells } = assign(container.bounds, joining, taken);
+      if (cells.size < joining.length) return null;
+      return {
+        poses: new Map(joining.map((c) => [c.id, cellToPose(rectOf(container.bounds, cells.get(c.id)), c.pose)]))
+      };
+    },
+    cells(container, children) {
+      const { cells } = assign(container.bounds, children);
+      return [...cells].map(([id, cell]) => ({ id, depth: cell.depth, rect: rectOf(container.bounds, cell) })).sort((a, b) => a.depth - b.depth || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+    }
+  };
+}
+
+// src/layout/strategies/arrangements.ts
+function rowSlots(opts = {}) {
+  const alongX = opts.axis !== "y";
+  return (bounds, count) => {
+    const length = alongX ? bounds.width : bounds.height;
+    const pitch = opts.pitch ?? length / Math.max(count, 1);
+    const first = length / 2 - pitch * (count - 1) / 2;
+    const out = [];
+    for (let i = 0; i < count; i++) {
+      const along = first + i * pitch;
+      out.push(
+        alongX ? { x: bounds.x + along, y: bounds.y + bounds.height / 2 } : { x: bounds.x + bounds.width / 2, y: bounds.y + along }
+      );
+    }
+    return out;
+  };
+}
+function gridSlots(opts) {
+  return (bounds, count) => {
+    const rows = Math.max(opts.rows ?? 1, Math.ceil(count / opts.cols));
+    const cw = bounds.width / opts.cols;
+    const ch = bounds.height / rows;
+    const out = [];
+    for (let i = 0; i < count; i++) {
+      out.push({
+        x: bounds.x + (i % opts.cols + 0.5) * cw,
+        y: bounds.y + (Math.floor(i / opts.cols) + 0.5) * ch
+      });
+    }
+    return out;
+  };
+}
+function ringSlots(opts = {}) {
+  const start = opts.start ?? -Math.PI / 2;
+  const sweep = opts.sweep ?? Math.PI * 2;
+  const inset = opts.inset ?? 0;
+  const closed = Math.abs(sweep) >= Math.PI * 2;
+  return (bounds, count) => {
+    const rx = bounds.width / 2 - inset;
+    const ry = bounds.height / 2 - inset;
+    const steps = closed ? count : Math.max(count - 1, 1);
+    const out = [];
+    for (let i = 0; i < count; i++) {
+      const angle = start + sweep * i / steps;
+      out.push({
+        x: bounds.x + bounds.width / 2 + rx * Math.cos(angle),
+        y: bounds.y + bounds.height / 2 + ry * Math.sin(angle),
+        angle
+      });
+    }
+    return out;
+  };
+}
 
-export { MOVE_ANCHORS, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGuidesLayer, deriveAlignmentGuides, freeform, matchAlignment, matchSpacing, measureGaps, nearest, nearestWithin, none, roundToCell, snapPoint, tileGrid, useGridCellHover, useGuides };
+export { MOVE_ANCHORS, alignInsertBehavior, alignMoveBehavior, alignResizeBehavior, cellAt, containedThenNearest, createCellHighlightLayer, createGridLayer, createGuidesLayer, deriveAlignmentGuides, freeform, gridSlots, matchAlignment, matchSpacing, measureGaps, nearest, nearestWithin, none, pack, perContainer, quadtree, ringSlots, roundToCell, rowSlots, sequenceLayout, slots, snapPoint, tileGrid, useGridCellHover, useGuides };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map