@weasel-js/diagram 1.13.0 → 1.14.0

package/dist/{chunk-ESFIS7BB.js → chunk-62SMY45E.js}

@@ -1,11 +1,13 @@
-import { createAvoidRouter, placeLabels, edgeHops, DEFAULT_HOP_SIZE, HOPS_DOC_KEY, simplifyStops } from './chunk-Y72FK3Y7.js';
-import { edgeRouter, registerMarkShape, withDiagramRegistry, diagramLabelOf, editEdgeLabelBinding, editEdgeLabelAction, diagramGroupOf, diagramContainerOf, headerBox, labelFollowsLayout, buildGraph, LABEL_DRAG_AFFORDANCE_KIND, EDIT_EDGE_LABEL_ACTION_ID, labelDragLayer, laneOutlineOf, routerOf, labelScratchOf, ROUTERS, avoid, LABEL_PLACEMENT, editableLabels, titleIdOf, orthogonal, diagramAnchorOf, MIN_LANE_SIZE, endAims, resolveEnd, EDGE_DERIVE_PATH, titlePose, regionSpecs, DIAGRAM_THEME_KEY, diagramThemeOf, boxCenter, themeLabelFamily, roleEdgeStyle, roleStyle, themeLabelFont, firstLanes, DEFAULT_LANE_SIZE, bodyBox } from './chunk-QU4QZUC6.js';
-import { diagramEdgeOf, isPromise, dataKeyReader, diagramNodeOf, portsOf, portSitesOf, outlinePath, samePoints, layoutWritesRoute, plannerPlan, planOf, layered, forceRelaxation, center, layoutOwnsPort, chain, force, tree, portOf, labelCenter, labelSpotAt, isPinned, layoutOwnsRoute } from './chunk-L4H444QI.js';
-import { bodyPredicate, dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, SceneCanvas, useDepSource, registerNodeShape, reconcileSpecs, nodeGates, effectivePose, pagesBounds, pagesLayer, AUTO_POSE_DESCRIPTOR, usePoseRun, drawnBoundsScene, pointAlongPath, drawnAABBOf, RECT_POSE_DESCRIPTOR, resolveFill, resolveStroke, commandFill, commandStroke, fitViewToBounds, translatePoseViaDescriptor, composeAffordanceLayer, createResizeAction, createDeleteAction, polylineFromPoints, SNAP_ROLES, ActionDisabledReason, paintsLayer, viewToTransform, ellipsePath, snapMods, documentDepOf, carriedDescendants, sceneCarrySource, derivedDepOf, PathBuilder, createInsertOp, createSetDataOp, documentPose } from '@weasel-js/core';
+import { createAvoidRouter, placeLabels, edgeHops, radial, DEFAULT_HOP_SIZE, HOPS_DOC_KEY, simplifyStops } from './chunk-5VNPLOIX.js';
+import { edgeRouter, registerMarkShape, withDiagramRegistry, diagramLabelOf, editEdgeLabelBinding, editEdgeLabelAction, diagramGroupOf, diagramContainerOf, headerBox, labelFollowsLayout, buildGraph, LABEL_DRAG_AFFORDANCE_KIND, EDIT_EDGE_LABEL_ACTION_ID, labelDragLayer, laneOutlineOf, recordedRows, keyedIndex, boxIndex, boxesMeeting, routerOf, labelScratchOf, ROUTERS, avoid, LABEL_PLACEMENT, editableLabels, titleIdOf, orthogonal, diagramAnchorOf, MIN_LANE_SIZE, EDGE_DERIVE_PATH, titleInFrame, regionSpecs, DIAGRAM_THEME_KEY, diagramThemeOf, endAims, resolveEnd, themeLabelFamily, bodyBox, boxCenter, roleEdgeStyle, roleStyle, themeLabelFont, firstLanes, DEFAULT_LANE_SIZE } from './chunk-ZWXM5F4I.js';
+import { diagramEdgeOf, isPromise, diagramNodeOf, portsOf, portSitesOf, outlinePath, outlineDetail, samePoints, layoutWritesRoute, plannerPlan, planOf, layered, dataKeyReader, layoutBody, forceRelaxation, center, layoutOwnsPort, chain, force, tree, portOf, labelCenter, labelSpotAt, isPinned, layoutOwnsRoute } from './chunk-VB6HUKNG.js';
+import { bodyPredicate, dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, SceneCanvas, useDepSource, RIGID_POSE_COMPOSITION, registerNodeShape, reconcileSpecs, pagesBounds, pagesLayer, AUTO_POSE_DESCRIPTOR, usePoseRun, drawnBoundsScene, pointAlongPath, scenePoseAdapter, drawnAABBOf, composeWorldPose, worldPosesOf, RECT_POSE_DESCRIPTOR, resolveFill, resolveStroke, commandFill, commandStroke, nodeGates, scenePoseFrame, fitViewToBounds, clampView, rebaseLocalPose, translatePoseViaDescriptor, carriedDescendants, sceneCarrySource, composeAffordanceLayer, createResizeAction, createDeleteAction, effectivePose, polylineFromPoints, SNAP_ROLES, ActionDisabledReason, refusalOf, snapMods, documentDepOf, definesFrame, paintsLayer, viewToTransform, ellipsePath, derivedDepOf, localizeWorldPoses, PathBuilder, startCarry, createInsertOp, createSetDataOp, documentPose } from '@weasel-js/core';
+import { createSettledCache } from '@weasel-js/geom/nd';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1, rotatePoint } from '@weasel-js/core/math';
 import { clampRectWithin, placeRect, pathContainsPoint } from '@weasel-js/geom';
-import { useLatest as useLatest$1, adoptCssOnce } from '@weasel-js/react';
+import { nudgeGap, moveItems, nearestGap, isNoopDrop } from '@weasel-js/headless';
 import { forwardRef, useMemo, useEffect, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
+import { useLatest as useLatest$1, adoptCssOnce } from '@weasel-js/react';
 import '@weasel-js/animator';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -50,34 +52,69 @@ function createPortAffordance(participants, opts = {}) {
       }
     };
   };
+  const regionOf = (node, port) => ({
+    id: `${node.id}:${port.id}`,
+    targetId: null,
+    shape: { kind: "point", x: port.point.x, y: port.point.y, hitRadiusPx },
+    ...withPaint(paintOf2(port)),
+    ...opts.cursor !== void 0 ? { cursor: opts.cursor } : {},
+    strength,
+    claimedKinds: ["pointer"],
+    bind: () => ({
+      initialScratch: {
+        targetId: node.id,
+        nodeId: node.id,
+        portId: port.id,
+        port
+      }
+    })
+  });
+  const shown = (participant, state) => offersPorts(participant, state) && (opts.shows === void 0 || opts.shows(participant.node, state));
+  const showsPort = (port) => opts.showsPort === void 0 || opts.showsPort(port);
+  const generation = participants.generation;
+  const allPorts = () => {
+    const at = [];
+    for (const participant of participants()) {
+      for (const port of portsOf(participant.node, participant.pose, portOpts)) at.push({ participant, port });
+    }
+    return at;
+  };
+  const held = createSettledCache({ reads: 1 });
+  const portsAt = (key) => held.read(key, allPorts) ?? allPorts();
+  const regionAt = (entry) => entry.region ??= regionOf(entry.participant.node, entry.port);
+  const index = keyedIndex(generation ?? (() => void 0), () => {
+    const at = portsAt(generation());
+    return { at, boxes: boxIndex(at.map(({ port: { point: p } }) => [p.x, p.y, p.x, p.y])) };
+  });
+  const regions = (state) => {
+    const out = [];
+    if (generation !== void 0) {
+      for (const entry of portsAt(generation())) {
+        if (shown(entry.participant, state) && showsPort(entry.port)) out.push(regionAt(entry));
+      }
+      return out;
+    }
+    for (const participant of participants()) {
+      if (!shown(participant, state)) continue;
+      for (const port of portsOf(participant.node, participant.pose, portOpts)) {
+        if (showsPort(port)) out.push(regionOf(participant.node, port));
+      }
+    }
+    return out;
+  };
   return {
     id,
-    regions(state) {
+    regions,
+    regionsAt(state, wx, wy, view) {
+      const built = index();
+      const rx = hitRadiusPx / Math.abs(view.scale.x);
+      const ry = hitRadiusPx / Math.abs(view.scale.y);
+      const near2 = built && boxesMeeting(built.boxes, wx - rx, wy - ry, wx + rx, wy + ry);
+      if (!built || !near2) return regions(state);
       const out = [];
-      for (const participant of participants()) {
-        if (!offersPorts(participant, state)) continue;
-        const { node, pose } = participant;
-        if (opts.shows !== void 0 && !opts.shows(node, state)) continue;
-        for (const port of portsOf(node, pose, portOpts)) {
-          if (opts.showsPort !== void 0 && !opts.showsPort(port)) continue;
-          out.push({
-            id: `${node.id}:${port.id}`,
-            targetId: null,
-            shape: { kind: "point", x: port.point.x, y: port.point.y, hitRadiusPx },
-            ...withPaint(paintOf2(port)),
-            ...opts.cursor !== void 0 ? { cursor: opts.cursor } : {},
-            strength,
-            claimedKinds: ["pointer"],
-            bind: () => ({
-              initialScratch: {
-                targetId: node.id,
-                nodeId: node.id,
-                portId: port.id,
-                port
-              }
-            })
-          });
-        }
+      for (const i of near2) {
+        const entry = built.at[i];
+        if (shown(entry.participant, state) && showsPort(entry.port)) out.push(regionAt(entry));
       }
       return out;
     }
@@ -104,7 +141,28 @@ function bodyAt(participants, at, opts = {}) {
   }
   return hit;
 }
+function refusalMarks(box, at, reason) {
+  const out = [];
+  if (box !== null) {
+    const { x, y, width, height } = box;
+    out.push({ kind: "polyline", points: [{ x, y }, { x: x + width, y }, { x: x + width, y: y + height }, { x, y: y + height }, { x, y }], role: "refused" });
+  }
+  out.push({ kind: "reason", at: { x: at.x, y: at.y }, text: reason });
+  return out;
+}
 function createTargets(opts) {
+  const resolver = createResolver(opts);
+  const { landing, preview, boxOf } = resolver;
+  function overlays(route, fixed, at, view, moving = "to", waypoints = []) {
+    const points = preview(route, fixed, at, view, moving, waypoints);
+    const hit = landing(fixed, at, view);
+    const run = points.length < 2 ? [] : [{ kind: "polyline", points, role: hit?.refuse != null ? "refused" : "connector" }];
+    if (hit === null || hit.refuse === null) return run;
+    return [...run, ...refusalMarks(boxOf(hit.end.nodeId), at, hit.refuse)];
+  }
+  return { ...resolver, overlays };
+}
+function createResolver(opts) {
   const portOpts = {
     ...opts.geometry ? { geometry: opts.geometry } : {},
     ...opts.read ? { read: opts.read } : {}
@@ -117,22 +175,27 @@ function createTargets(opts) {
       if (!offersPorts(participant, view)) continue;
       for (const port of portsOf(participant.node, participant.pose, portOpts)) {
         if (opts.showsPort !== void 0 && !opts.showsPort(port)) continue;
-        if (!opts.canConnect(from, port)) continue;
         const d2 = (port.point.x - at.x) ** 2 + (port.point.y - at.y) ** 2;
-        if (d2 <= bestD2) {
-          bestD2 = d2;
-          best = port;
-        }
+        if (d2 > bestD2) continue;
+        const verdict = opts.canConnect(from, port);
+        if (verdict === false) continue;
+        bestD2 = d2;
+        best = { end: port, refuse: refusalOf(verdict) };
       }
     }
     return best;
   }
-  function target(from, at, view) {
+  function landing(from, at, view) {
     const port = portTarget(from, at, view);
     if (port !== null || !opts.bodies) return port;
     const body = bodyAt(opts.participants, at, { ...portOpts, view });
     if (body === null || portsOf(body.participant.node, body.participant.pose, portOpts).length === 0) return null;
-    return opts.canConnect(from, body.end) ? body.end : null;
+    const verdict = opts.canConnect(from, body.end);
+    return verdict === false ? null : { end: body.end, refuse: refusalOf(verdict) };
+  }
+  function target(from, at, view) {
+    const hit = landing(from, at, view);
+    return hit === null || hit.refuse !== null ? null : hit.end;
   }
   function participantOf(nodeId) {
     for (const participant of opts.participants()) {
@@ -153,7 +216,7 @@ function createTargets(opts) {
     return resolveEnd({}, dep, toward2, portOpts, all) ?? null;
   }
   function preview(route, fixed, at, view, moving = "to", waypoints = []) {
-    const landed = target(fixed, at, view);
+    const landed = landing(fixed, at, view)?.end ?? null;
     const [fixedCenter, landedCenter] = [centerOf(fixed), landed === null ? at : centerOf(landed)];
     const aims = moving === "to" ? endAims(fixedCenter, landedCenter, waypoints) : endAims(landedCenter, fixedCenter, waypoints);
     const [fixedAim, landedAim] = moving === "to" ? [aims.from, aims.to] : [aims.to, aims.from];
@@ -162,7 +225,11 @@ function createTargets(opts) {
     if (free === null || anchored === null) return [];
     return moving === "to" ? route({ from: anchored, to: free, waypoints }) : route({ from: free, to: anchored, waypoints });
   }
-  return { target, portFor, preview };
+  function boxOf(nodeId) {
+    const participant = participantOf(nodeId);
+    return participant === void 0 ? null : geometry.getBounds(participant.pose);
+  }
+  return { target, landing, portFor, preview, boxOf };
 }
 var CONNECT_ACTION_ID = "diagram.connect";
 var defaultCanConnect = (from, to) => {
@@ -266,66 +333,513 @@ function createConnectAction(opts) {
             scratch.current = { x: moveCtx.world.x, y: moveCtx.world.y };
           },
           overlay() {
-            if (!scratch.open) return null;
-            const points = targets.preview(route, scratch.from, scratch.current, scratch.deps.view);
-            if (points.length < 2) return null;
-            return { kind: "polyline", points, role: "connector" };
+            if (!scratch.open) return null;
+            return targets.overlays(route, scratch.from, scratch.current, scratch.deps.view);
+          },
+          onEnd(endCtx, reason) {
+            scratch.open = false;
+            if (reason === "cancel") return;
+            const to = targets.target(scratch.from, { x: endCtx.world.x, y: endCtx.world.y }, scratch.deps.view);
+            if (to === null) return;
+            commit(
+              { from: scratch.from, to, router: routerKey },
+              { ...endCtx, deps: scratch.deps }
+            );
+          }
+        };
+      }
+    },
+    enabled: () => true
+  };
+}
+
+// src/containers/canDropInto.ts
+function diagramCanDropInto(scene, canReparent) {
+  const nodeOf = (id) => scene.get(id);
+  const roleOf = (id) => {
+    const node = nodeOf(id);
+    return node === void 0 ? null : diagramContainerOf(node)?.role ?? null;
+  };
+  const attached = (id) => {
+    const node = nodeOf(id);
+    return node !== void 0 && (diagramEdgeOf(node) !== null || diagramLabelOf(node) !== null);
+  };
+  const allowed = (parent, ids) => {
+    const node = nodeOf(parent);
+    if (node === void 0 || ids.some(attached)) return false;
+    const role = roleOf(parent);
+    if (role === "pool") return ids.every((id) => roleOf(id) === "lane");
+    if (ids.some((id) => roleOf(id) === "lane")) return false;
+    if (role !== null) return ids.every((id) => roleOf(id) !== "pool");
+    return !attached(parent) && dataKeyReader(node) === null;
+  };
+  return (parent, ids) => {
+    if (!allowed(parent, ids)) return false;
+    if (canReparent === void 0 || ids.every((id) => nodeOf(id)?.parent === parent)) return true;
+    return canReparent(ids, parent);
+  };
+}
+function diagramDropParentAt(scene, point, role) {
+  if (role === "pool" || role === "lane") return null;
+  let best = null;
+  const compose = scene.composition?.compose;
+  const walk = (ids, frame) => {
+    for (const id of ids) {
+      const node = scene.get(id);
+      if (node === void 0) continue;
+      const pose = node.pose;
+      const world = frame === null || compose === void 0 ? pose : compose(frame, pose);
+      const trait = diagramContainerOf(node);
+      const b = bodyBox(world, trait?.header);
+      const inside2 = point.x >= b.x && point.x < b.x + b.width && point.y >= b.y && point.y < b.y + b.height;
+      if (!inside2) continue;
+      if (trait?.role === "container" || trait?.role === "lane") best = id;
+      walk(scene.childrenOf(id), world);
+    }
+  };
+  walk(scene.roots, null);
+  return best;
+}
+function packed(items, spans, order) {
+  const gaps = items.slice(1).map((m, i) => spans.get(m).start - (spans.get(items[i]).start + spans.get(items[i]).size));
+  const out = /* @__PURE__ */ new Map();
+  let at = items.length > 0 ? spans.get(items[0]).start : 0;
+  order.forEach((m, i) => {
+    out.set(m, at);
+    at += spans.get(m).size + (gaps[i] ?? gaps[gaps.length - 1] ?? 0);
+  });
+  return out;
+}
+var carriedBy = (item) => item.carries ?? [item.id];
+var RELEASE_MS = 500;
+function slideOthers(scene, slots, carried) {
+  const { axis } = slots;
+  const size = axis === "x" ? "width" : "height";
+  const ids = slots.items.map((i) => i.id);
+  const spans = new Map(slots.items.map((i) => [i.id, { start: i.bounds[axis], size: i.bounds[size] }]));
+  const nodes = slots.items.map((item) => ({
+    id: item.id,
+    poses: carriedBy(item).flatMap((id) => {
+      const node = scene.get(id);
+      return node === void 0 || node.derivePose !== void 0 ? [] : [{ id, pose: effectivePose(scene, node) }];
+    })
+  }));
+  const hold = scene.overrides.hold();
+  return {
+    /** The items standing in `order`, or as they were for `null`, with the carried one `by` along. */
+    show(order, by) {
+      const starts = packed(ids, spans, order ?? ids);
+      hold.set(nodes.flatMap(({ id, poses }) => {
+        const d = id === carried ? by : starts.get(id) - spans.get(id).start;
+        return poses.map(({ id: node, pose }) => [node, { ...pose, [axis]: pose[axis] + d }]);
+      }));
+    },
+    drop: () => hold.drop(),
+    /** Held until the host's new specs land, so the items do not jump back for
+     *  the frames in between; a host that keeps the old order gets it back shortly after. */
+    keep() {
+      const release = () => {
+        stop();
+        clearTimeout(timer);
+        hold.drop();
+      };
+      const stop = scene.subscribe(release);
+      const timer = setTimeout(release, RELEASE_MS);
+    }
+  };
+}
+
+// src/reorder.ts
+var REORDER_ACTION_ID = "diagram.reorder";
+var END_GAP = 24;
+var inside = (p, b) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
+function sequenceSlots(axis, items) {
+  const [along2, across, size, depth] = axis === "x" ? ["x", "y", "width", "height"] : ["y", "x", "height", "width"];
+  const lo = (b) => b[along2];
+  const hi = (b) => b[along2] + b[size];
+  const bar = (at, boxes2) => {
+    const from = Math.min(...boxes2.map((b) => b[across]));
+    const to = Math.max(...boxes2.map((b) => b[across] + b[depth]));
+    const point = (c) => axis === "x" ? { x: at, y: c } : { x: c, y: at };
+    return { a: point(from), b: point(to) };
+  };
+  const boxes = items.map((i) => i.bounds);
+  const halves = boxes.slice(1).map((b, k) => (lo(b) - hi(boxes[k])) / 2);
+  const gaps = [];
+  if (boxes.length === 0) return { axis, items, gaps };
+  gaps.push({ index: 0, ...bar(lo(boxes[0]) - (halves[0] ?? END_GAP / 2), [boxes[0]]) });
+  for (let k = 1; k < boxes.length; k++) gaps.push({ index: k, ...bar(hi(boxes[k - 1]) + halves[k - 1], [boxes[k - 1], boxes[k]]) });
+  const last = boxes[boxes.length - 1];
+  gaps.push({ index: boxes.length, ...bar(hi(last) + (halves[halves.length - 1] ?? END_GAP / 2), [last]) });
+  return { axis, items, gaps };
+}
+function pickAt(slots, at) {
+  const from = slots?.items.findIndex((i) => i.grip !== null && inside(at, i.grip ?? i.bounds)) ?? -1;
+  return from < 0 ? null : { from, item: slots.items[from] };
+}
+function gapAt(held, by) {
+  const { axis, gaps } = held.slots;
+  const size = axis === "x" ? "width" : "height";
+  const mid = held.item.bounds[axis] + held.item.bounds[size] / 2 + by;
+  const best = gaps[nearestGap(gaps.map((g) => g.a[axis]), mid)];
+  return best === void 0 || isNoopDrop([held.from], best.index) ? null : best;
+}
+function moveOf(held, gap) {
+  const order = moveItems(held.slots.items.map((i) => i.id), [held.from], gap.index);
+  return { id: held.item.id, from: held.from, to: gap.index, order };
+}
+function createReorderAction(opts) {
+  const { canDrop = () => true, show = "bar" } = opts;
+  return {
+    id: opts.id ?? REORDER_ACTION_ID,
+    label: opts.label ?? "Reorder",
+    group: "diagram",
+    requires: ["scene", ...opts.requires ?? []],
+    cursor: "grab",
+    activeCursor: "grabbing",
+    enabled: (deps, at) => deps === void 0 || at === void 0 || pickAt(opts.slots(deps, at), at) !== null ? true : ActionDisabledReason.NotApplicable,
+    invoker: {
+      timing: "ongoing",
+      start(ctx) {
+        const start = { x: (ctx.drag?.start ?? ctx.world).x, y: (ctx.drag?.start ?? ctx.world).y };
+        const slots = opts.slots(ctx.deps, start);
+        const picked = pickAt(slots, start);
+        if (slots === null || picked === null) return {};
+        const held = { slots, ...picked };
+        const { axis } = slots;
+        const region = opts.region?.(ctx.deps, held.item) ?? null;
+        const leaves = (at) => region !== null && !inside(at, region);
+        let by = ctx.world[axis] - start[axis];
+        let open = true;
+        const verdicts = /* @__PURE__ */ new Map();
+        const landing = (gap) => {
+          if (gap === null) return null;
+          if (!verdicts.has(gap.index)) {
+            const move = moveOf(held, gap);
+            verdicts.set(gap.index, canDrop(move) ? move : null);
+          }
+          return verdicts.get(gap.index);
+        };
+        const finish = (endCtx, reason) => {
+          open = false;
+          by = endCtx.world[axis] - start[axis];
+          const move = reason === "commit" ? landing(gapAt(held, by)) : null;
+          if (move !== null) opts.commit(move, { ...endCtx, deps: ctx.deps });
+          return move;
+        };
+        if (show === "slide") {
+          const slide = ctx.deps.scene === void 0 ? null : slideOthers(ctx.deps.scene, held.slots, held.item.id);
+          return {
+            kind: "diagram-reorder",
+            onMove(moveCtx) {
+              if (leaves(moveCtx.world)) return "pass";
+              by = moveCtx.world[axis] - start[axis];
+              slide?.show(landing(gapAt(held, by))?.order ?? null, by);
+            },
+            onEnd(endCtx, reason) {
+              const move = finish(endCtx, reason);
+              if (move === null) slide?.drop();
+              else slide?.keep();
+            }
+          };
+        }
+        const carried = carriedBy(held.item);
+        const poses = /* @__PURE__ */ new Map();
+        for (const id of carried) {
+          const pose = ctx.deps.scene?.get(id)?.pose;
+          if (pose !== void 0) poses.set(id, pose);
+        }
+        return {
+          kind: "diagram-reorder",
+          onMove(moveCtx) {
+            if (leaves(moveCtx.world)) return "pass";
+            by = moveCtx.world[axis] - start[axis];
+          },
+          previewIds: () => open && poses.size > 0 ? [...poses.keys()] : null,
+          previewPose: (id) => {
+            const pose = poses.get(id);
+            return pose === void 0 ? null : { ...pose, [axis]: pose[axis] + by };
+          },
+          previewOpaqueIds: () => [...carried],
+          overlay() {
+            const gap = open ? gapAt(held, by) : null;
+            if (gap === null) return null;
+            return { kind: "polyline", points: [gap.a, gap.b], role: landing(gap) !== null ? "insert" : "refused" };
+          },
+          onEnd(endCtx, reason) {
+            finish(endCtx, reason);
+          }
+        };
+      }
+    }
+  };
+}
+var ANYWHERE = bodyPredicate(() => true);
+function reorderBinding(actionId = REORDER_ACTION_ID, on = ANYWHERE) {
+  return { spec: { kind: "drag", target: { kindOf: on } }, actionId, opts: { id: on === ANYWHERE ? `${actionId}.drag` : `${actionId}.bodyDrag` } };
+}
+function reorderContribution(opts) {
+  const actionId = opts.id ?? REORDER_ACTION_ID;
+  return {
+    id: `weasel-diagram-reorder:${actionId}`,
+    eligibility: { always: true },
+    actions: [createReorderAction({ ...opts, id: actionId })],
+    bindings: [reorderBinding(actionId, opts.on)]
+  };
+}
+function worldRectOf(scene, id) {
+  const node = scene.get(id);
+  if (node === void 0) return null;
+  const drawn = drawnBoundsScene(scene);
+  const route = diagramEdgeOf(node) === null ? null : drawn.derivedPathOf?.(id) ?? null;
+  const mid = route === null ? null : pointAlongPath(route, 0.5);
+  if (mid != null) return { x: mid.point.x, y: mid.point.y, width: 0, height: 0 };
+  const live = { ...scenePoseAdapter(scene), getPose: (at) => effectivePose(scene, scene.get(at)) };
+  return drawnAABBOf(drawn, id, composeWorldPose(live, id, scene.composition.compose), { includeStroke: false });
+}
+function screenRectOf(rect, view) {
+  return {
+    x: (rect.x - view.x) * view.scale.x,
+    y: (rect.y - view.y) * view.scale.y,
+    width: rect.width * view.scale.x,
+    height: rect.height * view.scale.y
+  };
+}
+var CENTER = "center";
+function place(el, overlay, anchor, view) {
+  const size = { width: el.offsetWidth, height: el.offsetHeight };
+  const placement = overlay.placement ?? CENTER;
+  const at = placement === CENTER ? { x: anchor.x + (anchor.width - size.width) / 2, y: anchor.y + (anchor.height - size.height) / 2 } : clampRectWithin(placeRect({ anchor, overlay: size, boundary: view, placement, offset: overlay.offset ?? 0 }).rect, view);
+  el.style.transform = `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px)`;
+}
+function useOverlayPlacement(canvasRef, scene, overlays) {
+  const elements = useRef(/* @__PURE__ */ new Map());
+  const current = useLatest$1(overlays);
+  const placeAll = useCallback(() => {
+    const canvas = canvasRef.current;
+    const surface = canvas?.element;
+    if (canvas == null || surface == null) return;
+    const view = canvas.getView();
+    for (const overlay of current.current) {
+      const el = elements.current.get(overlay.key ?? overlay.target);
+      if (el === void 0) continue;
+      const world = worldRectOf(scene, overlay.target);
+      el.hidden = world === null;
+      if (world === null) continue;
+      const rect = screenRectOf(world, view);
+      const anchor = { ...rect, x: rect.x + surface.offsetLeft, y: rect.y + surface.offsetTop };
+      place(el, overlay, anchor, {
+        x: surface.offsetLeft,
+        y: surface.offsetTop,
+        width: surface.offsetWidth,
+        height: surface.offsetHeight
+      });
+    }
+  }, [canvasRef, scene, current]);
+  useLayoutEffect(() => {
+    placeAll();
+    const canvas = canvasRef.current;
+    if (canvas == null) return;
+    const stop = canvas.subscribeFrame(placeAll);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(placeAll);
+    for (const el of elements.current.values()) observer?.observe(el);
+    return () => {
+      stop();
+      observer?.disconnect();
+    };
+  }, [canvasRef, placeAll, overlays]);
+  const refs = useRef(/* @__PURE__ */ new Map());
+  return useCallback((key) => {
+    let ref = refs.current.get(key);
+    if (ref === void 0) {
+      ref = (el) => {
+        if (el !== null) {
+          elements.current.set(key, el);
+          return;
+        }
+        elements.current.delete(key);
+        refs.current.delete(key);
+      };
+      refs.current.set(key, ref);
+    }
+    return ref;
+  }, []);
+}
+
+// src/reorderModel.ts
+var depsOf = (node) => Array.isArray(node?.dependsOn) ? node.dependsOn : [];
+function holders(scene) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of scene.renderOrderNodes()) {
+    if (diagramGroupOf(node) === null) continue;
+    for (const dep of depsOf(node)) {
+      const member = scene.get(dep);
+      if (member !== void 0 && diagramLabelOf(member) === null) out.set(dep, node.id);
+    }
+  }
+  return out;
+}
+function membersOf(scene, holder) {
+  const node = scene.get(holder);
+  const ids = node !== void 0 && diagramGroupOf(node) !== null ? depsOf(node) : (scene.childrenOf?.(holder) ?? []).filter((id) => id !== titleIdOf(holder));
+  return ids.filter((id) => {
+    const member = scene.get(id);
+    return member !== void 0 && diagramLabelOf(member) === null && diagramEdgeOf(member) === null;
+  });
+}
+function holderOf(scene, held, id) {
+  const group = held.get(id);
+  if (group !== void 0) return group;
+  const parent = scene.get(id)?.parent;
+  const node = parent == null ? void 0 : scene.get(parent);
+  return node !== void 0 && diagramContainerOf(node)?.role === "container" ? node.id : void 0;
+}
+var axisOf = (node) => diagramGroupOf(node)?.reorder ?? diagramContainerOf(node)?.reorder;
+function reorderTargetOf(scene, id, boxOf) {
+  const held = holders(scene);
+  for (let member = id, holder = holderOf(scene, held, id); holder !== void 0; member = holder, holder = holderOf(scene, held, holder)) {
+    const axis = axisOf(scene.get(holder));
+    if (axis === void 0) continue;
+    const start = (m) => {
+      const box = boxOf(m);
+      return box === null ? 0 : axis === "x" ? box.x : box.y;
+    };
+    const members2 = membersOf(scene, holder).sort((a, b) => start(a) - start(b));
+    return { parent: holder, axis, member, members: members2 };
+  }
+  return null;
+}
+function carriedWith(scene, member) {
+  const out = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (out.has(id)) return;
+    out.add(id);
+    const node = scene.get(id);
+    if (node !== void 0 && diagramGroupOf(node) !== null) depsOf(node).forEach(visit);
+    scene.childrenOf?.(id).forEach(visit);
+  };
+  visit(member);
+  for (const node of scene.renderOrderNodes()) {
+    const on = depsOf(node)[0];
+    if (on !== void 0 && out.has(on) && diagramAnchorOf(node) !== null) out.add(node.id);
+  }
+  return out;
+}
+
+// src/itemDropTarget.ts
+function placeAmong(scene, container, at) {
+  const axis = diagramContainerOf(scene.get(container))?.reorder;
+  const boxed = membersOf(scene, container).flatMap((id) => {
+    const bounds = worldRectOf(scene, id);
+    return bounds === null ? [] : [{ id, bounds }];
+  });
+  if (axis === void 0) {
+    const before = (b) => at.y > b.y + b.height || at.y >= b.y && at.x > b.x + b.width / 2;
+    return { index: boxed.filter((m) => before(m.bounds)).length, gap: null };
+  }
+  const slots = sequenceSlots(axis, [...boxed].sort((p, q) => p.bounds[axis] - q.bounds[axis]));
+  const gap = slots.gaps[nearestGap(slots.gaps.map((g) => g.a[axis]), at[axis])] ?? null;
+  return { index: gap?.index ?? 0, gap };
+}
+function itemDropTargetAt(scene, participants, at) {
+  const point = { x: at.x, y: at.y };
+  const hit = bodyAt(participants, point);
+  const node = hit !== null && diagramContainerOf(hit.participant.node) === null ? hit.end.nodeId : null;
+  const container = diagramDropParentAt(scene, point, null);
+  const place2 = container === null ? null : placeAmong(scene, container, point);
+  return { target: node ?? container, container, index: place2?.index ?? null, at: point, gap: place2?.gap ?? null };
+}
+function outlineOf(scene, id, role) {
+  const b = worldRectOf(scene, id);
+  if (b === null) return null;
+  const points = [{ x: b.x, y: b.y }, { x: b.x + b.width, y: b.y }, { x: b.x + b.width, y: b.y + b.height }, { x: b.x, y: b.y + b.height }, { x: b.x, y: b.y }];
+  return { kind: "polyline", points, role };
+}
+
+// src/itemDrop.ts
+var DIAGRAM_ITEM_CARRY = "weasel-diagram/item";
+var ITEM_DROP_ACTION_ID = "diagram.dropItem";
+function startItemDrag(down, item, cb) {
+  return startCarry(down.currentTarget, down, { type: DIAGRAM_ITEM_CARRY, value: item }, cb);
+}
+function dragItemProps(item, cb) {
+  return {
+    onPointerDown: (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      startItemDrag(e, item, cb);
+    }
+  };
+}
+var ANY = "optional";
+function createItemDropAction(opts) {
+  const { participants, report, canDrop = () => true, requires = [] } = opts;
+  return {
+    id: ITEM_DROP_ACTION_ID,
+    label: "Drop an item",
+    group: "diagram",
+    requires: [.../* @__PURE__ */ new Set(["scene", ...requires])],
+    defaultBinding: [{
+      spec: { kind: "carry", types: [DIAGRAM_ITEM_CARRY], mods: { alt: ANY, ctrl: ANY, meta: ANY, shift: ANY } },
+      opts: { id: `${ITEM_DROP_ACTION_ID}.carry` }
+    }],
+    invoker: {
+      timing: "ongoing",
+      start(ctx) {
+        const scene = ctx.deps.scene;
+        if (scene === void 0 || ctx.carry === void 0) return {};
+        const item = ctx.carry.value;
+        const { deps } = ctx;
+        const verdicts = /* @__PURE__ */ new Map();
+        const over = (c) => {
+          const { gap, ...drop } = itemDropTargetAt(scene, participants, c.world);
+          const key = `${drop.target}|${drop.container}|${drop.index}`;
+          if (!verdicts.has(key)) verdicts.set(key, canDrop(item, drop));
+          return { drop, gap, verdict: verdicts.get(key) };
+        };
+        let now = over(ctx);
+        let open = true;
+        return {
+          kind: "diagram-item-drop",
+          onMove(moveCtx) {
+            now = over(moveCtx);
+          },
+          overlay() {
+            const { drop, gap, verdict } = now;
+            if (!open || drop.target === null || verdict === false) return null;
+            const reason = refusalOf(verdict);
+            const box = outlineOf(scene, drop.target, reason === null ? "target" : "refused");
+            const out = box === null ? [] : [box];
+            if (reason !== null) out.push({ kind: "reason", at: drop.at, text: reason });
+            else if (gap !== null) out.push({ kind: "polyline", points: [gap.a, gap.b], role: "insert" });
+            return out;
           },
           onEnd(endCtx, reason) {
-            scratch.open = false;
-            if (reason === "cancel") return;
-            const to = targets.target(scratch.from, { x: endCtx.world.x, y: endCtx.world.y }, scratch.deps.view);
-            if (to === null) return;
-            commit(
-              { from: scratch.from, to, router: routerKey },
-              { ...endCtx, deps: scratch.deps }
-            );
+            open = false;
+            if (reason !== "commit") return;
+            now = over(endCtx);
+            if (now.verdict === true) report({ item, ...now.drop }, deps);
           }
         };
       }
-    },
-    enabled: () => true
+    }
   };
 }
-
-// src/containers/canDropInto.ts
-function diagramCanDropInto(scene) {
-  const nodeOf = (id) => scene.get(id);
-  const roleOf = (id) => {
-    const node = nodeOf(id);
-    return node === void 0 ? null : diagramContainerOf(node)?.role ?? null;
-  };
-  const attached = (id) => {
-    const node = nodeOf(id);
-    return node !== void 0 && (diagramEdgeOf(node) !== null || diagramLabelOf(node) !== null);
-  };
-  return (parent, ids) => {
-    const node = nodeOf(parent);
-    if (node === void 0 || ids.some(attached)) return false;
-    const role = roleOf(parent);
-    if (role === "pool") return ids.every((id) => roleOf(id) === "lane");
-    if (ids.some((id) => roleOf(id) === "lane")) return false;
-    if (role !== null) return ids.every((id) => roleOf(id) !== "pool");
-    return !attached(parent) && dataKeyReader(node) === null;
+function itemDropContribution(opts) {
+  return {
+    id: "weasel-diagram-item-drop",
+    eligibility: { always: true },
+    actions: [createItemDropAction(opts)]
   };
 }
-function diagramDropParentAt(scene, point, role) {
-  if (role === "pool" || role === "lane") return null;
-  let best = null;
-  const walk = (ids) => {
-    for (const id of ids) {
-      const node = scene.get(id);
-      if (node === void 0) continue;
-      const trait = diagramContainerOf(node);
-      const b = bodyBox(node.pose, trait?.header);
-      const inside2 = point.x >= b.x && point.x < b.x + b.width && point.y >= b.y && point.y < b.y + b.height;
-      if (!inside2) continue;
-      if (trait?.role === "container" || trait?.role === "lane") best = id;
-      walk(scene.childrenOf(id));
-    }
-  };
-  walk(scene.roots);
-  return best;
+function useItemDrop(participants, props) {
+  const latest = useLatest(props);
+  const on = props.onDropItem !== void 0;
+  return useMemo(() => on ? itemDropContribution({
+    participants,
+    canDrop: (item, target) => latest.current.canDropItem?.(item, target) ?? true,
+    report: (drop) => latest.current.onDropItem?.(drop)
+  }) : null, [on, participants, latest]);
 }
 
 // src/theme/themeWrites.ts
@@ -439,6 +953,8 @@ function themeWrites(scene, theme, ids, from) {
   }
   return out;
 }
+
+// src/stencils/containers.ts
 var CONTAINER_STENCILS = [
   { id: "container", label: "Container", role: "container", size: { width: 240, height: 160 }, icon: (
     /* @icon */
@@ -453,6 +969,7 @@ var CONTAINER_STENCILS = [
     "diagram:poolColumns"
   ) }
 ];
+var CONTAINERS_GROUP = { id: "containers", label: "Containers", stencils: CONTAINER_STENCILS };
 var NEW_LANE_SIZE = 120;
 function placedBounds(stencil, b) {
   if (b.width > 0 && b.height > 0) return { ...b };
@@ -475,7 +992,8 @@ function containerBuild(stencil, bounds, opts) {
     ...stencil.role === "pool" ? firstLanes(id, axis, at, opts) : []
   ];
   const label = `Insert ${stencil.label}`;
-  return { id, ops: specs.map((node) => createInsertOp({ node, label })) };
+  const stored = localizeWorldPoses(specs, RIGID_POSE_COMPOSITION);
+  return { id, ops: stored.map((node) => createInsertOp({ node, label })) };
 }
 var poolAxisOf = (pool) => pool.header?.side === "top" ? "x" : "y";
 function lanesOf(scene, poolId) {
@@ -495,19 +1013,20 @@ function addLane(scene, poolId, index, style) {
   if (pool === void 0 || trait?.role !== "pool") return null;
   const axis = poolAxisOf(trait);
   const lanes = lanesOf(scene, poolId);
-  const b = pool.pose;
+  const { width, height } = pool.pose;
+  const b = { x: 0, y: 0, width, height };
   const at = index === void 0 || index >= lanes.length ? null : scene.get(lanes[index]).pose;
   const boundary = at !== null ? axis === "y" ? at.y : at.x : axis === "y" ? b.y + b.height : b.x + b.width;
   const start = boundary - NEW_LANE_SIZE / 2;
   const offset = trait.header?.size ?? 0;
   const pose = axis === "y" ? { x: b.x + offset, y: start, width: b.width - offset, height: NEW_LANE_SIZE } : { x: start, y: b.y + offset, width: NEW_LANE_SIZE, height: b.height - offset };
   const id = scene.mintId();
-  const specs = regionSpecs("lane", axis, pose, `Lane ${lanes.length + 1}`, {
+  const specs = localizeWorldPoses(regionSpecs("lane", axis, pose, `Lane ${lanes.length + 1}`, {
     id,
     layer: pool.layer,
     parent: poolId,
     ...style ? { style } : {}
-  });
+  }), scene.composition);
   scene.batch("Add lane", () => {
     for (const spec of specs) scene.add(spec);
     if (style === void 0 && scene.doc.get(DIAGRAM_THEME_KEY) !== void 0) {
@@ -531,11 +1050,27 @@ function releaseMembers(scene, id) {
   const beside = releasedFrom(scene, node.id);
   const parent = scene.get(beside).parent;
   const index = (parent === null ? scene.roots : scene.childrenOf(parent)).indexOf(beside);
+  const frame = scenePoseFrame(scene);
+  const worlds = members2.map((m) => frame.world(m));
   scene.batch("Release members", () => {
-    members2.forEach((m, k) => scene.move(m, parent, index + k));
+    members2.forEach((m, k) => {
+      scene.move(m, parent, index + k);
+      scene.setPose(m, frame.localUnder(parent, worlds[k]));
+    });
     scene.remove(node.id);
   });
 }
+function worldWith(sc, frame = /* @__PURE__ */ new Map()) {
+  const poses = {
+    getPose: (id) => frame.has(id) ? frame.get(id) : sc.get(id).pose,
+    getParent: (id) => sc.get(id)?.parent ?? null,
+    definesFrame: (id) => {
+      const n = sc.get(id);
+      return n === void 0 || definesFrame(n);
+    }
+  };
+  return (id) => composeWorldPose(poses, id, sc.composition.compose);
+}
 var LANE_LAYER_ID = "diagram-lanes";
 var LANE_AFFORDANCE_KIND = `layer:${LANE_LAYER_ID}`;
 function laneScratchOf(hit) {
@@ -544,6 +1079,7 @@ function laneScratchOf(hit) {
 }
 function poolsOf(scene) {
   const out = [];
+  const world = worldWith(scene);
   for (const node of scene.renderOrderNodes()) {
     const trait = diagramContainerOf(node);
     if (trait?.role !== "pool" || scene.isHidden(node.id) || scene.isLocked(node.id)) continue;
@@ -551,7 +1087,8 @@ function poolsOf(scene) {
       id: node.id,
       axis: poolAxisOf(trait),
       pose: node.pose,
-      lanes: lanesOf(scene, node.id).map((id) => ({ id, pose: scene.get(id).pose }))
+      at: world(node.id),
+      lanes: lanesOf(scene, node.id).map((id) => ({ id, pose: scene.get(id).pose, at: world(id) }))
     });
   }
   return out;
@@ -595,7 +1132,7 @@ function createLaneAffordance(scene, opts = {}) {
           out.push({
             id: `${lane.id}:boundary`,
             targetId: null,
-            shape: { kind: "outline", path: boundaryOf(pool.axis, lane.pose), hitRadiusPx },
+            shape: { kind: "outline", path: boundaryOf(pool.axis, lane.at), hitRadiusPx },
             cursor,
             strength: "exclusive",
             claimedKinds: ["pointer"],
@@ -603,7 +1140,7 @@ function createLaneAffordance(scene, opts = {}) {
           });
         }
         if (addSizePx <= 0) continue;
-        const p = pool.pose;
+        const p = pool.at;
         const end = pool.axis === "y" ? { x: p.x + p.width / 2, y: p.y + p.height, normal: { x: 0, y: 1 } } : { x: p.x + p.width, y: p.y + p.height / 2, normal: { x: 1, y: 0 } };
         out.push({
           id: `${pool.id}:add-lane`,
@@ -652,7 +1189,7 @@ function laneResizeFrame(scene, pool, index, size) {
   const placeTitle = (id, at) => {
     const node = scene.get(id);
     if (node !== void 0 && scene.get(titleIdOf(id)) !== void 0) {
-      out.set(titleIdOf(id), titlePose(at, diagramContainerOf(node)?.header));
+      out.set(titleIdOf(id), titleInFrame(at, diagramContainerOf(node)?.header));
     }
   };
   const laneAt = grow(lane.pose, d);
@@ -722,9 +1259,10 @@ function createAddLaneAction(opts) {
     invoker: {
       timing: "immediate",
       run(deps, params) {
-        const pressed = laneScratchOf(params?.affordance);
-        if (pressed === null || pressed.laneId !== void 0) return;
-        const world = { x: Number(params?.worldX), y: Number(params?.worldY) };
+        const p = params;
+        const pressed = laneScratchOf(p?.affordance);
+        const world = p?.world;
+        if (pressed === null || pressed.laneId !== void 0 || !world) return;
         commit(pressed.poolId, { world, modifiers: NO_MODIFIERS, deps });
       }
     },
@@ -803,7 +1341,8 @@ function editContainerTitleAction(commit) {
     invoker: {
       timing: "immediate",
       run(deps, params) {
-        const id = regionHeaderAt(deps, { x: Number(params?.worldX), y: Number(params?.worldY) });
+        const world = params?.world;
+        const id = world ? regionHeaderAt(deps, world) : null;
         if (id !== null) commit(id);
       }
     },
@@ -826,6 +1365,10 @@ function createSetHopsAction(opts = {}) {
   return {
     id: SET_HOPS_ACTION_ID,
     label: "Line jumps",
+    icon: (
+      /* @icon */
+      "diagram:lineJumps"
+    ),
     group: "diagram",
     requires: ["scene"],
     invoker: {
@@ -960,20 +1503,27 @@ function createResetLabelAction(opts) {
   };
 }
 function sceneParticipants(scene) {
-  return function* () {
+  const each = function* () {
     const gates = nodeGates(scene);
+    const frame = scenePoseFrame(scene);
     for (const node of scene.renderOrderNodes()) {
       const hidden = gates.hidden(node.id);
       const locked = gates.locked(node.id);
       yield {
         node,
-        pose: effectivePose(scene, node),
+        pose: frame.world(node.id),
         ...node.layer !== void 0 ? { layer: node.layer } : {},
         ...hidden ? { hidden } : {},
         ...locked ? { locked } : {}
       };
     }
   };
+  const { getVersion } = scene;
+  const getGeneration = scene.overrides.getGeneration;
+  if (getVersion === void 0 || getGeneration === void 0) return each;
+  return Object.assign(each, {
+    generation: () => [getVersion.call(scene), getGeneration.call(scene.overrides)]
+  });
 }
 function portLayer(participants, opts = {}) {
   return composeAffordanceLayer(
@@ -1330,7 +1880,7 @@ function neighborsOf(handle, stops) {
   const at = handle.kind === "vertex" ? handle.index + 1 : handle.leg + 1;
   return [stops[at - 1], stops[handle.kind === "vertex" ? at + 1 : at]];
 }
-function moveOf(p, session, ctx) {
+function moveOf2(p, session, ctx) {
   const d = { x: ctx.world.x - p.press.x, y: ctx.world.y - p.press.y };
   if (session === null) return d;
   const at = session.at({ x: p.handle.at.x + d.x, y: p.handle.at.y + d.y }, snapMods(ctx)).point;
@@ -1382,7 +1932,7 @@ function createRouteEditAction(opts) {
         return {
           kind: "diagram-edit-route",
           onMove(moveCtx) {
-            waypoints = waypointsAt(p, moveOf(p, session, moveCtx));
+            waypoints = waypointsAt(p, moveOf2(p, session, moveCtx));
           },
           previewIds: () => proposed() === null ? null : [p.edgeId],
           previewPose: (id) => id === p.edgeId && proposed() !== null ? p.pose : null,
@@ -1392,7 +1942,7 @@ function createRouteEditAction(opts) {
           },
           onEnd(endCtx, reason) {
             open = false;
-            const final = reason === "commit" ? waypointsAt(p, moveOf(p, session, endCtx)) : null;
+            const final = reason === "commit" ? waypointsAt(p, moveOf2(p, session, endCtx)) : null;
             session?.end();
             if (final !== null) commit({ edgeId: p.edgeId, waypoints: final }, { ...endCtx, deps: p.deps });
           }
@@ -1439,8 +1989,10 @@ function createRemoveWaypointAction(opts) {
     invoker: {
       timing: "immediate",
       run(deps, params) {
-        const world = { x: Number(params?.worldX), y: Number(params?.worldY) };
-        const pressed = waypointScratchOf(params?.affordance);
+        const p = params;
+        const world = p?.world;
+        if (!world) return;
+        const pressed = waypointScratchOf(p.affordance);
         const route = pressed === null ? null : routeOf3(pressed.edgeId);
         const waypoints = pressed === null || route === null ? null : removalOf(route, pressed.handle);
         const edit = pressed !== null && waypoints !== null ? { edgeId: pressed.edgeId, waypoints } : removalAt(deps, world);
@@ -1493,6 +2045,24 @@ var ROUTER_LABELS = {
   straight: "Straight",
   bezier: "Curved"
 };
+var ROUTER_ICONS = {
+  avoid: (
+    /* @icon */
+    "diagram:routerAvoid"
+  ),
+  orthogonal: (
+    /* @icon */
+    "diagram:routerOrthogonal"
+  ),
+  straight: (
+    /* @icon */
+    "diagram:routerStraight"
+  ),
+  bezier: (
+    /* @icon */
+    "diagram:routerCurved"
+  )
+};
 function withRouter(data, trait, router) {
   const { route: _r, ...rest } = trait;
   return { ...data, diagram: { ...rest, router } };
@@ -1520,6 +2090,7 @@ function createSetRouterAction(router, opts) {
   return {
     id: SET_ROUTER_ACTION_IDS[router],
     label: ROUTER_LABELS[router],
+    icon: ROUTER_ICONS[router],
     group: "diagram",
     requires: ["scene"],
     invoker: {
@@ -1650,7 +2221,7 @@ function avoidSceneInput(scene, opts = {}, poseOf) {
   const pose = (node) => {
     let p = poses.get(node.id);
     if (p === void 0) {
-      p = poseOf?.(node.id) ?? documentPose(sc, node);
+      p = poseOf?.(node.id) ?? composeWorldPose(scenePoseAdapter(sc), node.id, sc.composition.compose);
       poses.set(node.id, p);
     }
     return p;
@@ -1714,10 +2285,20 @@ function avoidSceneInput(scene, opts = {}, poseOf) {
   }
   return { obstacles, edges };
 }
+var specWorldPoses = (specs, composition = RIGID_POSE_COMPOSITION) => worldPosesOf(specs, composition);
+function specDeps(specs, world) {
+  const byId = new Map(specs.map((s) => [s.id, s]));
+  return (id) => {
+    const s = byId.get(id);
+    if (s === void 0) return void 0;
+    const pose = world.get(s.id) ?? s.pose;
+    return { node: { ...s, parent: null, pose }, pose, path: null };
+  };
+}
 
 // src/avoid/specRoutes.ts
 var facing = (ports) => ports.flatMap((p) => p.normal === null ? [] : [{ point: p.point, normal: p.normal }]);
-function obstaclesOf(specs) {
+function obstaclesOf(specs, world) {
   const children = /* @__PURE__ */ new Map();
   for (const s of specs) {
     if (s.parent == null) continue;
@@ -1736,10 +2317,11 @@ function obstaclesOf(specs) {
     if (spec.derivePose !== void 0 || diagramEdgeOf(spec) !== null) continue;
     const region = diagramContainerOf(spec);
     if (diagramNodeOf(node) === null && region?.role !== "lane") continue;
-    const header = region === null ? null : headerBox(spec.pose, region.header);
+    const box = world.get(node.id) ?? spec.pose;
+    const header = region === null ? null : headerBox(box, region.header);
     if (header !== null) out.push({ id: headerIdOf(node.id), kind: "shape", box: header });
     if (region?.role === "lane") continue;
-    out.push(region === null ? { id: node.id, kind: "shape", box: spec.pose } : { id: node.id, kind: "region", box: spec.pose, members: inside2(node.id, /* @__PURE__ */ new Set()) });
+    out.push(region === null ? { id: node.id, kind: "shape", box } : { id: node.id, kind: "region", box, members: inside2(node.id, /* @__PURE__ */ new Set()) });
   }
   return out;
 }
@@ -1755,12 +2337,14 @@ function labelsOf(specs) {
   return out;
 }
 function createSpecRouter(options = {}) {
-  const router = createAvoidRouter(options);
+  const { composition = RIGID_POSE_COMPOSITION, ...avoid2 } = options;
+  const router = createAvoidRouter(avoid2);
   let held = /* @__PURE__ */ new Map();
   return (specs) => {
     const byId = new Map(specs.map((s) => [s.id, s]));
     const labels = labelsOf(specs);
-    const obstacles = obstaclesOf(specs);
+    const world = specWorldPoses(specs, composition);
+    const obstacles = obstaclesOf(specs, world);
     const edges = [];
     for (const spec of specs) {
       const edge = diagramEdgeOf(spec);
@@ -1770,7 +2354,8 @@ function createSpecRouter(options = {}) {
       if (a === void 0 || b === void 0 || a === b) continue;
       const portsAt = (s, port) => {
         const n = { id: s.id, kind: s.kind, data: s.data };
-        return facing(port === void 0 ? portsOf(n, s.pose) : portSitesOf(n, s.pose, port));
+        const pose = world.get(n.id) ?? s.pose;
+        return facing(port === void 0 ? portsOf(n, pose) : portSitesOf(n, pose, port));
       };
       const route = held.get(spec.id);
       edges.push({
@@ -1846,11 +2431,7 @@ function hopDataOps(scene, hops) {
 function createSpecHops(r) {
   const route = edgeRouter();
   return (specs) => {
-    const byId = new Map(specs.map((s) => [s.id, s]));
-    const dep = (id) => {
-      const s = byId.get(id);
-      return s === void 0 ? void 0 : { node: s, pose: s.pose, path: null };
-    };
+    const dep = specDeps(specs, specWorldPoses(specs));
     const polylines = /* @__PURE__ */ new Map();
     const order = [];
     for (const spec of specs) {
@@ -1911,390 +2492,74 @@ function sameEnd(ends, moving, target) {
 function createReconnectAction(opts) {
   const { canConnect = defaultCanConnect, commit = commitReconnectToScene } = opts;
   const endsOf = createEdgeEnds(opts.participants, opts);
-  const shared = { ...opts, snapRadius: opts.snapRadius ?? DEFAULT_SNAP2, bodies: opts.bodies ?? true };
-  const targetsFor = (moving) => createTargets({
-    ...shared,
-    canConnect: moving.end === "to" ? (fixed, candidate) => canConnect(fixed, candidate, moving) : (fixed, candidate) => canConnect(candidate, fixed, moving)
-  });
-  return {
-    id: opts.id ?? RECONNECT_ACTION_ID,
-    label: "Reconnect",
-    group: "diagram",
-    requires: ["scene", "view"],
-    invoker: {
-      timing: "ongoing",
-      start(ctx) {
-        const pressed = edgeEndScratchOf(ctx.drag?.affordance);
-        const ends = pressed === null ? null : endsOf(pressed.edgeId);
-        if (pressed === null || ends === null) return {};
-        const scratch = {
-          edgeId: pressed.edgeId,
-          moving: pressed.end,
-          fixed: fixedEndOf(ends, pressed.end, opts),
-          ends,
-          route: routerOf(ends.trait, opts.routers),
-          current: { x: ctx.world.x, y: ctx.world.y },
-          open: true,
-          deps: ctx.deps
-        };
-        const resolver = targetsFor({ edge: scratch.edgeId, end: scratch.moving });
-        return {
-          kind: "diagram-reconnect",
-          onMove(moveCtx) {
-            scratch.current = { x: moveCtx.world.x, y: moveCtx.world.y };
-          },
-          overlay() {
-            if (!scratch.open) return null;
-            const points = resolver.preview(scratch.route, scratch.fixed, scratch.current, scratch.deps.view, scratch.moving, scratch.ends.trait.waypoints);
-            return points.length < 2 ? null : { kind: "polyline", points, role: "connector" };
-          },
-          onEnd(endCtx, reason) {
-            scratch.open = false;
-            if (reason === "cancel") return;
-            const target = resolver.target(scratch.fixed, { x: endCtx.world.x, y: endCtx.world.y }, scratch.deps.view);
-            if (target === null || sameEnd(scratch.ends, scratch.moving, target)) return;
-            commit({ edgeId: scratch.edgeId, end: scratch.moving, target }, { ...endCtx, deps: scratch.deps });
-          }
-        };
-      }
-    },
-    enabled: () => true
-  };
-}
-function reconnectBinding(actionId = RECONNECT_ACTION_ID) {
-  return { spec: { kind: "drag", target: `affordance:${EDGE_END_AFFORDANCE_KIND}` }, actionId, opts: { id: `${actionId}.drag` } };
-}
-function diagramEdgeEnds(opts) {
-  const actionId = opts.id ?? RECONNECT_ACTION_ID;
-  return {
-    // `opts.id` names the action; the layer keeps its own id.
-    layer: edgeEndLayer(opts.participants, opts.selected, { ...opts, id: EDGE_END_LAYER_ID }),
-    contribution: {
-      id: "weasel-diagram-edge-ends",
-      eligibility: { claimed: true },
-      actions: [createReconnectAction({ ...opts, id: actionId }), grabPortAction(GRAB_EDGE_END_ACTION_ID)],
-      bindings: [
-        reconnectBinding(actionId),
-        ...grabPortBindings(GRAB_EDGE_END_ACTION_ID, EDGE_END_AFFORDANCE_KIND)
-      ]
-    }
-  };
-}
-function packed(items, spans, order) {
-  const gaps = items.slice(1).map((m, i) => spans.get(m).start - (spans.get(items[i]).start + spans.get(items[i]).size));
-  const out = /* @__PURE__ */ new Map();
-  let at = items.length > 0 ? spans.get(items[0]).start : 0;
-  order.forEach((m, i) => {
-    out.set(m, at);
-    at += spans.get(m).size + (gaps[i] ?? gaps[gaps.length - 1] ?? 0);
-  });
-  return out;
-}
-var carriedBy = (item) => item.carries ?? [item.id];
-var RELEASE_MS = 500;
-function slideOthers(scene, slots, carried) {
-  const { axis } = slots;
-  const size = axis === "x" ? "width" : "height";
-  const ids = slots.items.map((i) => i.id);
-  const spans = new Map(slots.items.map((i) => [i.id, { start: i.bounds[axis], size: i.bounds[size] }]));
-  const nodes = slots.items.map((item) => ({
-    id: item.id,
-    poses: carriedBy(item).flatMap((id) => {
-      const node = scene.get(id);
-      return node === void 0 || node.derivePose !== void 0 ? [] : [{ id, pose: effectivePose(scene, node) }];
-    })
-  }));
-  const hold = scene.overrides.hold();
-  return {
-    /** The items standing in `order`, or as they were for `null`, with the carried one `by` along. */
-    show(order, by) {
-      const starts = packed(ids, spans, order ?? ids);
-      hold.set(nodes.flatMap(({ id, poses }) => {
-        const d = id === carried ? by : starts.get(id) - spans.get(id).start;
-        return poses.map(({ id: node, pose }) => [node, { ...pose, [axis]: pose[axis] + d }]);
-      }));
-    },
-    drop: () => hold.drop(),
-    /** Held until the host's new specs land, so the items do not jump back for
-     *  the frames in between; a host that keeps the old order gets it back shortly after. */
-    keep() {
-      const release = () => {
-        stop();
-        clearTimeout(timer);
-        hold.drop();
-      };
-      const stop = scene.subscribe(release);
-      const timer = setTimeout(release, RELEASE_MS);
-    }
-  };
-}
-
-// src/reorder.ts
-var REORDER_ACTION_ID = "diagram.reorder";
-var END_GAP = 24;
-var inside = (p, b) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
-function sequenceSlots(axis, items) {
-  const [along2, across, size, depth] = axis === "x" ? ["x", "y", "width", "height"] : ["y", "x", "height", "width"];
-  const lo = (b) => b[along2];
-  const hi = (b) => b[along2] + b[size];
-  const bar = (at, boxes2) => {
-    const from = Math.min(...boxes2.map((b) => b[across]));
-    const to = Math.max(...boxes2.map((b) => b[across] + b[depth]));
-    const point = (c) => axis === "x" ? { x: at, y: c } : { x: c, y: at };
-    return { a: point(from), b: point(to) };
-  };
-  const boxes = items.map((i) => i.bounds);
-  const halves = boxes.slice(1).map((b, k) => (lo(b) - hi(boxes[k])) / 2);
-  const gaps = [];
-  if (boxes.length === 0) return { axis, items, gaps };
-  gaps.push({ index: 0, ...bar(lo(boxes[0]) - (halves[0] ?? END_GAP / 2), [boxes[0]]) });
-  for (let k = 1; k < boxes.length; k++) gaps.push({ index: k, ...bar(hi(boxes[k - 1]) + halves[k - 1], [boxes[k - 1], boxes[k]]) });
-  const last = boxes[boxes.length - 1];
-  gaps.push({ index: boxes.length, ...bar(hi(last) + (halves[halves.length - 1] ?? END_GAP / 2), [last]) });
-  return { axis, items, gaps };
-}
-function pickAt(slots, at) {
-  const from = slots?.items.findIndex((i) => i.grip !== null && inside(at, i.grip ?? i.bounds)) ?? -1;
-  return from < 0 ? null : { from, item: slots.items[from] };
-}
-function gapAt(held, by) {
-  const { axis, gaps } = held.slots;
-  const size = axis === "x" ? "width" : "height";
-  const mid = held.item.bounds[axis] + held.item.bounds[size] / 2 + by;
-  let best = null;
-  for (const g of gaps) if (best === null || Math.abs(g.a[axis] - mid) < Math.abs(best.a[axis] - mid)) best = g;
-  return best === null || best.index === held.from || best.index === held.from + 1 ? null : best;
-}
-function moveOf2(held, gap) {
-  const order = held.slots.items.map((i) => i.id);
-  order.splice(held.from, 1);
-  order.splice(gap.index > held.from ? gap.index - 1 : gap.index, 0, held.item.id);
-  return { id: held.item.id, from: held.from, to: gap.index, order };
-}
-function createReorderAction(opts) {
-  const { canDrop = () => true, show = "bar" } = opts;
-  return {
-    id: opts.id ?? REORDER_ACTION_ID,
-    label: opts.label ?? "Reorder",
-    group: "diagram",
-    requires: ["scene", ...opts.requires ?? []],
-    cursor: "grab",
-    activeCursor: "grabbing",
-    enabled: (deps, at) => deps === void 0 || at === void 0 || pickAt(opts.slots(deps, at), at) !== null ? true : ActionDisabledReason.NotApplicable,
-    invoker: {
-      timing: "ongoing",
-      start(ctx) {
-        const start = { x: (ctx.drag?.start ?? ctx.world).x, y: (ctx.drag?.start ?? ctx.world).y };
-        const slots = opts.slots(ctx.deps, start);
-        const picked = pickAt(slots, start);
-        if (slots === null || picked === null) return {};
-        const held = { slots, ...picked };
-        const { axis } = slots;
-        let by = ctx.world[axis] - start[axis];
-        let open = true;
-        const verdicts = /* @__PURE__ */ new Map();
-        const landing = (gap) => {
-          if (gap === null) return null;
-          if (!verdicts.has(gap.index)) {
-            const move = moveOf2(held, gap);
-            verdicts.set(gap.index, canDrop(move) ? move : null);
-          }
-          return verdicts.get(gap.index);
-        };
-        const finish = (endCtx, reason) => {
-          open = false;
-          by = endCtx.world[axis] - start[axis];
-          const move = reason === "commit" ? landing(gapAt(held, by)) : null;
-          if (move !== null) opts.commit(move, { ...endCtx, deps: ctx.deps });
-          return move;
+  const shared = { ...opts, snapRadius: opts.snapRadius ?? DEFAULT_SNAP2, bodies: opts.bodies ?? true };
+  const targetsFor = (moving) => createTargets({
+    ...shared,
+    canConnect: moving.end === "to" ? (fixed, candidate) => canConnect(fixed, candidate, moving) : (fixed, candidate) => canConnect(candidate, fixed, moving)
+  });
+  return {
+    id: opts.id ?? RECONNECT_ACTION_ID,
+    label: "Reconnect",
+    group: "diagram",
+    requires: ["scene", "view"],
+    invoker: {
+      timing: "ongoing",
+      start(ctx) {
+        const pressed = edgeEndScratchOf(ctx.drag?.affordance);
+        const ends = pressed === null ? null : endsOf(pressed.edgeId);
+        if (pressed === null || ends === null) return {};
+        const scratch = {
+          edgeId: pressed.edgeId,
+          moving: pressed.end,
+          fixed: fixedEndOf(ends, pressed.end, opts),
+          ends,
+          route: routerOf(ends.trait, opts.routers),
+          current: { x: ctx.world.x, y: ctx.world.y },
+          open: true,
+          deps: ctx.deps
         };
-        if (show === "slide") {
-          const slide = ctx.deps.scene === void 0 ? null : slideOthers(ctx.deps.scene, held.slots, held.item.id);
-          return {
-            kind: "diagram-reorder",
-            onMove(moveCtx) {
-              by = moveCtx.world[axis] - start[axis];
-              slide?.show(landing(gapAt(held, by))?.order ?? null, by);
-            },
-            onEnd(endCtx, reason) {
-              const move = finish(endCtx, reason);
-              if (move === null) slide?.drop();
-              else slide?.keep();
-            }
-          };
-        }
-        const carried = carriedBy(held.item);
-        const poses = /* @__PURE__ */ new Map();
-        for (const id of carried) {
-          const pose = ctx.deps.scene?.get(id)?.pose;
-          if (pose !== void 0) poses.set(id, pose);
-        }
+        const resolver = targetsFor({ edge: scratch.edgeId, end: scratch.moving });
         return {
-          kind: "diagram-reorder",
+          kind: "diagram-reconnect",
           onMove(moveCtx) {
-            by = moveCtx.world[axis] - start[axis];
-          },
-          previewIds: () => open && poses.size > 0 ? [...poses.keys()] : null,
-          previewPose: (id) => {
-            const pose = poses.get(id);
-            return pose === void 0 ? null : { ...pose, [axis]: pose[axis] + by };
+            scratch.current = { x: moveCtx.world.x, y: moveCtx.world.y };
           },
-          previewOpaqueIds: () => [...carried],
           overlay() {
-            const gap = open ? gapAt(held, by) : null;
-            if (gap === null) return null;
-            return { kind: "polyline", points: [gap.a, gap.b], role: landing(gap) !== null ? "insert" : "refused" };
+            if (!scratch.open) return null;
+            return resolver.overlays(scratch.route, scratch.fixed, scratch.current, scratch.deps.view, scratch.moving, scratch.ends.trait.waypoints);
           },
           onEnd(endCtx, reason) {
-            finish(endCtx, reason);
+            scratch.open = false;
+            if (reason === "cancel") return;
+            const target = resolver.target(scratch.fixed, { x: endCtx.world.x, y: endCtx.world.y }, scratch.deps.view);
+            if (target === null || sameEnd(scratch.ends, scratch.moving, target)) return;
+            commit({ edgeId: scratch.edgeId, end: scratch.moving, target }, { ...endCtx, deps: scratch.deps });
           }
         };
       }
-    }
-  };
-}
-var ANYWHERE = bodyPredicate(() => true);
-function reorderBinding(actionId = REORDER_ACTION_ID, on = ANYWHERE) {
-  return { spec: { kind: "drag", target: { kindOf: on } }, actionId, opts: { id: on === ANYWHERE ? `${actionId}.drag` : `${actionId}.bodyDrag` } };
-}
-function reorderContribution(opts) {
-  const actionId = opts.id ?? REORDER_ACTION_ID;
-  return {
-    id: `weasel-diagram-reorder:${actionId}`,
-    eligibility: { always: true },
-    actions: [createReorderAction({ ...opts, id: actionId })],
-    bindings: [reorderBinding(actionId, opts.on)]
+    },
+    enabled: () => true
   };
 }
-function worldRectOf(scene, id) {
-  const node = scene.get(id);
-  if (node === void 0) return null;
-  const drawn = drawnBoundsScene(scene);
-  const route = diagramEdgeOf(node) === null ? null : drawn.derivedPathOf?.(id) ?? null;
-  const mid = route === null ? null : pointAlongPath(route, 0.5);
-  if (mid != null) return { x: mid.point.x, y: mid.point.y, width: 0, height: 0 };
-  return drawnAABBOf(drawn, id, effectivePose(scene, node), { includeStroke: false });
+function reconnectBinding(actionId = RECONNECT_ACTION_ID) {
+  return { spec: { kind: "drag", target: `affordance:${EDGE_END_AFFORDANCE_KIND}` }, actionId, opts: { id: `${actionId}.drag` } };
 }
-function screenRectOf(rect, view) {
+function diagramEdgeEnds(opts) {
+  const actionId = opts.id ?? RECONNECT_ACTION_ID;
   return {
-    x: (rect.x - view.x) * view.scale.x,
-    y: (rect.y - view.y) * view.scale.y,
-    width: rect.width * view.scale.x,
-    height: rect.height * view.scale.y
-  };
-}
-var CENTER = "center";
-function place(el, overlay, anchor, view) {
-  const size = { width: el.offsetWidth, height: el.offsetHeight };
-  const placement = overlay.placement ?? CENTER;
-  const at = placement === CENTER ? { x: anchor.x + (anchor.width - size.width) / 2, y: anchor.y + (anchor.height - size.height) / 2 } : clampRectWithin(placeRect({ anchor, overlay: size, boundary: view, placement, offset: overlay.offset ?? 0 }).rect, view);
-  el.style.transform = `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px)`;
-}
-function useOverlayPlacement(canvasRef, scene, overlays) {
-  const elements = useRef(/* @__PURE__ */ new Map());
-  const current = useLatest$1(overlays);
-  const placeAll = useCallback(() => {
-    const canvas = canvasRef.current;
-    const surface = canvas?.element;
-    if (canvas == null || surface == null) return;
-    const view = canvas.getView();
-    for (const overlay of current.current) {
-      const el = elements.current.get(overlay.key ?? overlay.target);
-      if (el === void 0) continue;
-      const world = worldRectOf(scene, overlay.target);
-      el.hidden = world === null;
-      if (world === null) continue;
-      const rect = screenRectOf(world, view);
-      const anchor = { ...rect, x: rect.x + surface.offsetLeft, y: rect.y + surface.offsetTop };
-      place(el, overlay, anchor, {
-        x: surface.offsetLeft,
-        y: surface.offsetTop,
-        width: surface.offsetWidth,
-        height: surface.offsetHeight
-      });
-    }
-  }, [canvasRef, scene, current]);
-  useLayoutEffect(() => {
-    placeAll();
-    const canvas = canvasRef.current;
-    if (canvas == null) return;
-    const stop = canvas.subscribeFrame(placeAll);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(placeAll);
-    for (const el of elements.current.values()) observer?.observe(el);
-    return () => {
-      stop();
-      observer?.disconnect();
-    };
-  }, [canvasRef, placeAll, overlays]);
-  const refs = useRef(/* @__PURE__ */ new Map());
-  return useCallback((key) => {
-    let ref = refs.current.get(key);
-    if (ref === void 0) {
-      ref = (el) => {
-        if (el !== null) {
-          elements.current.set(key, el);
-          return;
-        }
-        elements.current.delete(key);
-        refs.current.delete(key);
-      };
-      refs.current.set(key, ref);
-    }
-    return ref;
-  }, []);
-}
-
-// src/reorderModel.ts
-var depsOf = (node) => Array.isArray(node?.dependsOn) ? node.dependsOn : [];
-function holders(scene) {
-  const out = /* @__PURE__ */ new Map();
-  for (const node of scene.renderOrderNodes()) {
-    if (diagramGroupOf(node) === null) continue;
-    for (const dep of depsOf(node)) {
-      const member = scene.get(dep);
-      if (member !== void 0 && diagramLabelOf(member) === null) out.set(dep, node.id);
+    // `opts.id` names the action; the layer keeps its own id.
+    layer: edgeEndLayer(opts.participants, opts.selected, { ...opts, id: EDGE_END_LAYER_ID }),
+    contribution: {
+      id: "weasel-diagram-edge-ends",
+      eligibility: { claimed: true },
+      actions: [createReconnectAction({ ...opts, id: actionId }), grabPortAction(GRAB_EDGE_END_ACTION_ID)],
+      bindings: [
+        reconnectBinding(actionId),
+        ...grabPortBindings(GRAB_EDGE_END_ACTION_ID, EDGE_END_AFFORDANCE_KIND)
+      ]
     }
-  }
-  return out;
-}
-function membersOf(scene, group) {
-  return depsOf(scene.get(group)).filter((id) => {
-    const node = scene.get(id);
-    return node !== void 0 && diagramLabelOf(node) === null;
-  });
-}
-function reorderTargetOf(scene, id, boxOf) {
-  const held = holders(scene);
-  for (let member = id, group = held.get(id); group !== void 0; member = group, group = held.get(group)) {
-    const axis = diagramGroupOf(scene.get(group))?.reorder;
-    if (axis === void 0) continue;
-    const start = (m) => {
-      const box = boxOf(m);
-      return box === null ? 0 : axis === "x" ? box.x : box.y;
-    };
-    const members2 = membersOf(scene, group).sort((a, b) => start(a) - start(b));
-    return { group, axis, member, members: members2 };
-  }
-  return null;
-}
-function carriedWith(scene, member) {
-  const out = /* @__PURE__ */ new Set();
-  const visit = (id) => {
-    if (out.has(id)) return;
-    out.add(id);
-    const node = scene.get(id);
-    if (node !== void 0 && diagramGroupOf(node) !== null) depsOf(node).forEach(visit);
-    scene.childrenOf?.(id).forEach(visit);
   };
-  visit(member);
-  for (const node of scene.renderOrderNodes()) {
-    const on = depsOf(node)[0];
-    if (on !== void 0 && out.has(on) && diagramAnchorOf(node) !== null) out.add(node.id);
-  }
-  return out;
 }
-
-// src/groupReorder.ts
 var STEP_REORDER_ACTION_ID = "diagram.stepReorder";
 var sceneOf = (deps) => deps?.scene;
 function targetAt(deps, id) {
@@ -2336,17 +2601,21 @@ function createStepReorderAction(report) {
         if (target === null || params?.axis !== target.axis) return;
         const { members: members2, member } = target;
         const at = members2.indexOf(member);
-        const to = at + (params.step === -1 ? -1 : 1);
-        if (to < 0 || to >= members2.length) return;
-        const order = [...members2];
-        order.splice(at, 1);
-        order.splice(to, 0, member);
-        report({ group: target.group, order });
+        const to = nudgeGap([at], params.step === -1 ? -1 : 1, members2.length);
+        if (to === null) return;
+        report({ parent: target.parent, order: moveItems(members2, [at], to) });
       }
     },
     enabled: (deps) => selectedTarget(deps) !== null ? true : ActionDisabledReason.NotApplicable
   };
 }
+function containerRegion(deps, member) {
+  const scene = sceneOf(deps);
+  const parent = targetAt(deps, member)?.parent;
+  const node = parent === void 0 ? void 0 : scene?.get(parent);
+  if (scene === void 0 || node === void 0 || diagramContainerOf(node)?.role !== "container") return null;
+  return worldRectOf(scene, parent);
+}
 var onBody2 = bodyPredicate((target) => target === "selected-body" || target === "unselected-body");
 function groupReorderContribution(report) {
   const drag = reorderContribution({
@@ -2354,9 +2623,10 @@ function groupReorderContribution(report) {
     requires: ["nodeAtPoint"],
     show: "slide",
     on: onBody2,
+    region: (deps, item) => containerRegion(deps, item.id),
     commit: (move, ctx) => {
-      const group = targetAt(ctx.deps, move.id)?.group;
-      if (group !== void 0) report({ group, order: move.order });
+      const parent = targetAt(ctx.deps, move.id)?.parent;
+      if (parent !== void 0) report({ parent, order: move.order });
     }
   });
   return { ...drag, id: "weasel-diagram-reorder", actions: [...drag.actions ?? [], createStepReorderAction(report)] };
@@ -2365,11 +2635,8 @@ function groupReorderContribution(report) {
 // src/labels/specLabels.ts
 var routeOf = edgeRouter();
 function inputOf(specs) {
-  const byId = new Map(specs.map((s) => [s.id, s]));
-  const dep = (id) => {
-    const s = byId.get(id);
-    return s === void 0 ? void 0 : { node: { ...s, parent: null }, pose: s.pose, path: null };
-  };
+  const world = specWorldPoses(specs);
+  const dep = specDeps(specs, world);
   const shapes = [];
   const routes = [];
   const labels = [];
@@ -2389,7 +2656,7 @@ function inputOf(specs) {
     }
     const node = { id, kind: spec.kind, data: spec.data };
     if (spec.derivePose !== void 0 || diagramContainerOf(node) !== null || diagramGroupOf(node) !== null || diagramNodeOf(node) === null) continue;
-    shapes.push({ id, box: spec.pose });
+    shapes.push({ id, box: world.get(id) ?? spec.pose });
   }
   return { shapes, routes, labels };
 }
@@ -2500,7 +2767,8 @@ var LAYOUTS = Object.freeze({
   layered,
   tree,
   force,
-  chain
+  chain,
+  radial
 });
 function applyLayout(scene, result, opts = {}) {
   const poses = layoutPoses(scene, result, opts.geometry);
@@ -2518,39 +2786,52 @@ function applyLayout(scene, result, opts = {}) {
   return moved;
 }
 function layoutPoses(scene, result, geometry = AUTO_POSE_DESCRIPTOR) {
+  const sc = scene;
+  const { compose, decompose } = sc.composition;
+  const stored = scenePoseAdapter(sc);
   const out = /* @__PURE__ */ new Map();
-  for (const [id, at] of result) {
-    const node = scene.get(id);
-    if (node === void 0) continue;
-    const bounds = geometry.getBounds(node.pose);
+  const decided = { ...stored, getPose: (id) => out.has(id) ? out.get(id) : stored.getPose(id) };
+  const depth = (id) => {
+    let d = 0;
+    for (let at = scene.get(id)?.parent; at != null; at = scene.get(at)?.parent) d++;
+    return d;
+  };
+  const ids = [...result.keys()].filter((id) => scene.get(id) !== void 0).sort((a, b) => depth(a) - depth(b));
+  for (const id of ids) {
+    const at = result.get(id);
+    const world = composeWorldPose(stored, id, compose);
+    const bounds = geometry.getBounds(world);
     const dx = at.x - bounds.x;
     const dy = at.y - bounds.y;
     if (dx === 0 && dy === 0) continue;
-    out.set(id, translatePoseViaDescriptor(node.pose, dx, dy, geometry));
-    for (const descendant of subtreeOf(scene, id)) {
-      const child = scene.get(descendant);
-      if (child === void 0) continue;
-      out.set(descendant, translatePoseViaDescriptor(child.pose, dx, dy, geometry));
-    }
-  }
-  return out;
-}
-function subtreeOf(scene, id) {
-  const out = [];
-  const stack = [...scene.childrenOf(id)];
-  while (stack.length > 0) {
-    const next = stack.pop();
-    out.push(next);
-    stack.push(...scene.childrenOf(next));
+    const parent = scene.get(id).parent;
+    out.set(id, rebaseLocalPose(decided, translatePoseViaDescriptor(world, dx, dy, geometry), parent, compose, decompose));
+    const carried = carriedDescendants(sceneCarrySource(sc), id, (w) => translatePoseViaDescriptor(w, dx, dy, geometry));
+    for (const [d, pose] of carried) out.set(d, pose);
   }
   return out;
 }
 var LAYOUT_ACTION_ID = "diagram.layout";
-function createLayoutAction(opts) {
-  const algorithm = typeof opts.algorithm === "function" ? opts.algorithm : LAYOUTS[opts.algorithm ?? "layered"] ?? layered;
-  const build = {
+function layoutDiagram(scene, source, algorithm, opts = {}) {
+  const fn = typeof algorithm === "function" ? algorithm : LAYOUTS[algorithm] ?? layered;
+  const graph = buildGraph(source, {
     ...opts.read ? { read: opts.read } : {},
     ...opts.geometry ? { geometry: opts.geometry } : {}
+  });
+  const plan = planOf(fn, graph, opts.layout);
+  return applyLayout(scene, plan.moves, {
+    ...opts.geometry ? { geometry: opts.geometry } : {},
+    ...opts.label ? { label: opts.label } : {},
+    routes: routesOf(graph, plan)
+  });
+}
+function createLayoutAction(opts) {
+  const { read, geometry, layout, label } = opts;
+  const options = {
+    ...read ? { read } : {},
+    ...geometry ? { geometry } : {},
+    ...layout ? { layout } : {},
+    ...label ? { label } : {}
   };
   return {
     id: opts.id ?? LAYOUT_ACTION_ID,
@@ -2561,14 +2842,7 @@ function createLayoutAction(opts) {
       timing: "immediate",
       run: (deps) => {
         const scene = deps["scene"];
-        if (scene === void 0) return;
-        const graph = buildGraph(opts.source, build);
-        const plan = planOf(algorithm, graph, opts.layout);
-        applyLayout(scene, plan.moves, {
-          ...opts.geometry ? { geometry: opts.geometry } : {},
-          ...opts.label ? { label: opts.label } : {},
-          routes: routesOf(graph, plan)
-        });
+        if (scene !== void 0) layoutDiagram(scene, opts.source, opts.algorithm ?? "layered", options);
       }
     },
     enabled: () => true
@@ -2965,14 +3239,27 @@ var EASED_LAYOUTS = Object.freeze({
   tree,
   chain
 });
+function bodyRules(trait, box) {
+  const layout = trait.body;
+  if (layout?.dividers === void 0 || trait.outline === void 0) return [];
+  const rows = recordedRows(layout);
+  if (rows === null) return [];
+  const spec = { outline: trait.outline, rows, padding: layout.padding, gap: layout.gap, verticalAlign: layout.verticalAlign };
+  return layoutBody(spec, box).filter((b) => b.row.kind === "divider").map((b) => {
+    const y = b.y + b.height / 2;
+    return polylineFromPoints([{ x: b.x, y }, { x: b.x + b.width, y }]);
+  });
+}
+
+// src/shape.ts
 function diagramShape(opts = {}) {
   const geometry = opts.geometry ?? RECT_POSE_DESCRIPTOR;
-  const outlineOf = (node) => diagramNodeOf(node, opts.read)?.outline ?? laneOutlineOf(node);
+  const outlineOf2 = (node) => diagramNodeOf(node, opts.read)?.outline ?? laneOutlineOf(node);
   return {
     id: opts.id ?? "diagram:outline",
-    matches: (node) => outlineOf(node) !== void 0,
+    matches: (node) => outlineOf2(node) !== void 0,
     paint: (node, pose, ctx) => {
-      const outline = outlineOf(node);
+      const outline = outlineOf2(node);
       if (outline === void 0) return [];
       const d = node.data;
       const box = geometry.getBounds(pose);
@@ -2982,17 +3269,21 @@ function diagramShape(opts = {}) {
       const stroke = declaredStroke && commandStroke(declaredStroke, box);
       const header = headerBox(box, diagramContainerOf(node)?.header);
       const divider = header === null || !stroke ? [] : [{ kind: "path", path: dividerPath(box, header), stroke }];
+      const detailPath = stroke ? outlineDetail(outline, box) : null;
+      const detail = stroke && detailPath ? [{ kind: "path", path: detailPath, stroke }] : [];
+      const trait = diagramNodeOf(node, opts.read);
+      const rules = stroke && trait !== null ? bodyRules(trait, box).map((path) => ({ kind: "path", path, stroke })) : [];
       return [{
         kind: "path",
         path: outlinePath(outline, box),
         ...fill ? { fill } : {},
         ...stroke ? { stroke } : {}
-      }, ...divider];
+      }, ...detail, ...rules, ...divider];
     },
     // The drawn boundary, so picking and clipping follow the diamond rather
     // than its bounding box.
     silhouette: (node, pose) => {
-      const outline = outlineOf(node);
+      const outline = outlineOf2(node);
       return outline === void 0 ? null : outlinePath(outline, geometry.getBounds(pose));
     }
   };
@@ -3007,17 +3298,24 @@ function registerDiagramShape(opts = {}) {
 // src/bodyNode.ts
 var isDiagramBody = (node) => diagramContainerOf(node) === null && diagramGroupOf(node) === null && dataKeyReader(node) !== null;
 var isBodyOrRegion = (node) => diagramContainerOf(node) !== null || isDiagramBody(node);
+function agrees(selection, want) {
+  if (typeof want === "string" || want === null) return (selection.at(-1) ?? null) === want;
+  return selection.length === want.length && want.every((id) => selection.includes(id));
+}
 function useMirroredSelection(selection, selected, onSelect) {
   const want = selected ?? null;
+  const key = typeof want === "string" || want === null ? want : `\0${want.join("\0")}`;
   const pushed = useRef(void 0);
   useEffect(() => {
-    if (pushed.current === want) return;
-    pushed.current = want;
-    if ((selection.get()[0] ?? null) !== want) selection.set(want === null ? [] : [want]);
-  }, [want]);
+    if (pushed.current === key) return;
+    pushed.current = key;
+    if (agrees(selection.get(), want)) return;
+    selection.set(want === null ? [] : typeof want === "string" ? [want] : [...want]);
+  }, [key]);
   const onSelectRef = useLatest(onSelect);
   return useCallback(() => {
-    onSelectRef.current?.(selection.get()[0] ?? null);
+    const ids = [...selection.get()];
+    onSelectRef.current?.(ids.at(-1) ?? null, ids);
   }, [selection, onSelectRef]);
 }
 
@@ -3035,10 +3333,11 @@ function laneList(scene, poolId) {
 function readRegions(scene) {
   const regions = /* @__PURE__ */ new Map();
   const pools = /* @__PURE__ */ new Map();
+  const at = worldWith(scene);
   for (const n of scene.renderOrderNodes()) {
     const trait = diagramContainerOf(n);
     if (trait === null) continue;
-    const { x, y, width, height } = n.pose;
+    const { x, y, width, height } = at(n.id);
     regions.set(n.id, { box: { x, y, width, height }, parent: n.parent, fitted: trait.fitted === true });
     if (trait.role === "pool") pools.set(n.id, laneList(scene, n.id));
   }
@@ -3086,9 +3385,11 @@ var routeOf2 = (edge) => ({ waypoints: edge.waypoints ?? NONE, ports: portsOf2(e
 function readScene(scene) {
   const nodes = /* @__PURE__ */ new Map();
   const routes = /* @__PURE__ */ new Map();
+  const at = worldWith(scene);
   for (const n of scene.renderOrderNodes()) {
     if (isDiagramBody(n)) {
-      nodes.set(n.id, { x: n.pose.x, y: n.pose.y, parent: n.parent });
+      const { x, y } = at(n.id);
+      nodes.set(n.id, { x, y, parent: n.parent });
       continue;
     }
     if (diagramContainerOf(n) !== null) continue;
@@ -3101,18 +3402,19 @@ function diagramLayoutOf(specs) {
   const moves = [];
   const routes = [];
   const containers = [];
+  const world = worldPosesOf(specs, RIGID_POSE_COMPOSITION);
   for (const s of specs) {
     const id = s.id;
     if (id === void 0) continue;
     if (isBodyOrRegion(s)) {
       const region = diagramContainerOf(s);
       const pinned = isPinned({ id, kind: s.kind, data: s.data });
+      const { x, y, width, height } = world.get(id);
       if (region !== null) {
         if (!pinned && region.role !== "lane" && region.fitted !== true) {
-          const { x, y, width, height } = s.pose;
           containers.push({ kind: "box", id, box: { x, y, width, height } });
         }
-      } else if (!pinned) moves.push({ id, x: s.pose.x, y: s.pose.y });
+      } else if (!pinned) moves.push({ id, x, y });
       continue;
     }
     const edge = diagramEdgeOf(s);
@@ -3177,14 +3479,20 @@ function laneResizeReports(scene, resize) {
   const lanes = laneList(scene, pool.id).map((l) => l.id === resize.laneId ? { ...l, size: resize.size } : l);
   const moves = [];
   const boxes = [];
-  for (const [id, pose] of laneResizeFrame(scene, pool, index, resize.size)) {
-    const node = scene.get(id);
-    if (node === void 0) continue;
-    const region = diagramContainerOf(node);
-    const { x, y, width, height } = pose;
-    if (region !== null) {
-      if (region.role === "container" && region.fitted !== true) boxes.push({ kind: "box", id, box: { x, y, width, height } });
-    } else if (isDiagramBody(node)) moves.push({ id, x, y });
+  const after = worldWith(scene, laneResizeFrame(scene, pool, index, resize.size));
+  const before = worldWith(scene);
+  for (const lane of pool.lanes.slice(index + 1)) {
+    for (const id of descendantsOf(scene, lane.id)) {
+      const node = scene.get(id);
+      if (node === void 0) continue;
+      const { x, y, width, height } = after(id);
+      const was = before(id);
+      if (x === was.x && y === was.y) continue;
+      const region = diagramContainerOf(node);
+      if (region !== null) {
+        if (region.role === "container" && region.fitted !== true) boxes.push({ kind: "box", id, box: { x, y, width, height } });
+      } else if (isDiagramBody(node)) moves.push({ id, x, y });
+    }
   }
   return { lanes: { kind: "lanes", pool: pool.id, lanes }, moves, boxes };
 }
@@ -3214,6 +3522,11 @@ function regionEditing(scene, selected, reports) {
   };
   return { layer: containers.layer, contributions: [containers.contribution, title] };
 }
+function descendantsOf(scene, id) {
+  const out = [];
+  for (const c of scene.childrenOf(id)) out.push(c, ...descendantsOf(scene, c));
+  return out;
+}
 
 // src/diagramEditing.ts
 var AMBIENT = [dragPanContribution()];
@@ -3366,8 +3679,14 @@ function usePagesView(pages) {
     };
   }, [placed, fill]);
 }
+var DEFAULT_FIT_PADDING = 16;
 function diagramBounds(specs, extra) {
-  const boxes = specs.filter((s) => isBodyOrRegion(s) || diagramGroupOf(s) !== null).map((s) => s.pose);
+  const world = worldPosesOf(specs, RIGID_POSE_COMPOSITION);
+  const boxes = specs.filter((s) => isBodyOrRegion(s) || diagramGroupOf(s) !== null).map((s) => world.get(s.id ?? "") ?? s.pose);
+  for (const s of specs) {
+    const edge = diagramEdgeOf(s);
+    for (const p of [...edge?.waypoints ?? [], ...edge?.route ?? []]) boxes.push({ x: p.x, y: p.y, width: 0, height: 0 });
+  }
   if (extra !== void 0) boxes.push(extra);
   if (boxes.length === 0) return null;
   const x = Math.min(...boxes.map((b) => b.x));
@@ -3382,12 +3701,17 @@ function diagramBounds(specs, extra) {
 function fitDiagram(specs, size, fit = {}, extra) {
   const bounds = diagramBounds(specs, extra);
   if (bounds === null) return void 0;
-  return fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
+  const view = fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
     maxScale: fit.maxScale ?? 1,
     ...fit.minScale !== void 0 ? { minScale: fit.minScale } : {},
     ...fit.anchor !== void 0 ? { anchor: fit.anchor } : {},
-    ...fit.padding !== void 0 ? { padding: fit.padding } : {}
+    padding: fit.padding ?? DEFAULT_FIT_PADDING
   });
+  return fit.bounds === void 0 ? view : clampView(view, fit.bounds, size);
+}
+function diagramViewBounds(specs, padding, extra) {
+  const b = diagramBounds(specs, extra);
+  return b === null ? void 0 : { x: b.x - padding, y: b.y - padding, width: b.width + 2 * padding, height: b.height + 2 * padding };
 }
 var IDENTITY = { x: 0, y: 0, scale: { x: 1, y: 1 } };
 var sameView = (a, b) => a.x === b.x && a.y === b.y && a.scale.x === b.scale.x && a.scale.y === b.scale.y;
@@ -3401,14 +3725,14 @@ function useDiagramFit(args) {
   const unsized = size.width === 0 || size.height === 0;
   const defaultView = useMemo(
     () => controlled || unsized ? void 0 : fitDiagram(specs, size, fit, extra),
-    // A later `specs` is the overflow check's to answer.
+    // A later `specs` is the refit check's to answer.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controlled, unsized, size.width, size.height, fit.minScale, fit.maxScale, fit.anchor, fit.padding, extra]
   );
   const [later, setLater] = useState(null);
   const target = later !== null && later.over === defaultView ? later.view : defaultView;
   const fitted = useRef(target);
-  const opts = useLatest({ controlled, unsized, size, fit, extra, defaultView, current: args.current });
+  const opts = useLatest({ controlled, unsized, size, fit, extra, defaultView, current: args.current, refit: args.refit ?? "overflow" });
   useEffect(() => {
     const canvas = canvasRef.current;
     const was = fitted.current;
@@ -3423,10 +3747,11 @@ function useDiagramFit(args) {
       first.current = false;
       return;
     }
-    const { controlled: c, unsized: u, size: box, fit: f, extra: more, defaultView: over } = opts.current;
+    const { controlled: c, unsized: u, size: box, fit: f, extra: more, defaultView: over, refit } = opts.current;
     const canvas = canvasRef.current;
     const bounds = diagramBounds(specs, more);
-    if (c || u || canvas === null || bounds === null || inView(bounds, canvas.getView(), box)) return;
+    if (c || u || canvas === null || bounds === null) return;
+    if (refit === "overflow" && inView(bounds, canvas.getView(), box)) return;
     setLater({ view: fitDiagram(specs, box, f, more), over });
   }, [specs, canvasRef, opts]);
   return useMemo(() => {
@@ -3464,6 +3789,7 @@ function Inner({
   hops,
   width,
   height,
+  selectionMode = "single",
   selected,
   onSelect,
   onHover,
@@ -3478,6 +3804,9 @@ function Inner({
   onReorder,
   onEditContainer,
   connectBodies,
+  canReparent,
+  onDropItem,
+  canDropItem,
   pickEdges,
   overlays = NO_OVERLAYS,
   ambient: extraAmbient,
@@ -3490,6 +3819,8 @@ function Inner({
   maxScale,
   anchor,
   fitPadding,
+  bounded,
+  refit,
   background,
   pages,
   view,
@@ -3516,7 +3847,7 @@ function Inner({
     initial: specs,
     registry
   });
-  const selection = useSelection({ scene, mode: "single" });
+  const selection = useSelection({ scene, mode: selectionMode === "multiple" ? "multi" : "single" });
   const onClick = useMirroredSelection(selection, selected, onSelect);
   useSceneSync(scene, specs, { onMove, onEditContainer });
   const source = useMemo(() => sceneParticipants(scene), [scene]);
@@ -3527,14 +3858,19 @@ function Inner({
   const { layers, box: pagesBox } = usePagesView(pages);
   const canvasRef = useRef(null);
   const current = useCallback(() => Array.from(source(), ({ node, pose }) => ({ ...node, pose })), [source]);
+  const viewBounds = useMemo(
+    () => bounded ? diagramViewBounds(specs, fitPadding ?? DEFAULT_FIT_PADDING, pagesBox) : void 0,
+    [bounded, specs, fitPadding, pagesBox]
+  );
   const fitting = useDiagramFit({
     canvasRef,
     specs,
     current,
     controlled,
     size: { width: width ?? measured?.width ?? 0, height: height ?? measured?.height ?? 0 },
-    fit: { minScale, maxScale, anchor, padding: fitPadding },
-    extra: pagesBox
+    fit: { minScale, maxScale, anchor, padding: fitPadding, ...viewBounds ? { bounds: viewBounds } : {} },
+    extra: pagesBox,
+    ...refit ? { refit } : {}
   });
   const { defaultView } = fitting;
   const settled = useLatest((moved) => {
@@ -3573,6 +3909,8 @@ function Inner({
     portOptions,
     ambient: extraAmbient
   });
+  const itemDrop = useItemDrop(source, { onDropItem, canDropItem });
+  const ambient = useMemo(() => itemDrop === null ? editing.ambient : [...editing.ambient, itemDrop], [editing.ambient, itemDrop]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas === null) return;
@@ -3596,7 +3934,7 @@ function Inner({
         features,
         ...resizes ? { selectTool } : {},
         enableKeybindings: enableKeybindings ?? edits,
-        ambient: editing.ambient,
+        ambient,
         actions: editing.actions,
         onClick,
         ...onHover ? { onHover } : {},
@@ -3606,9 +3944,10 @@ function Inner({
         ...defaultView ? { defaultView } : {},
         ...view ? { view } : {},
         ...onViewChange ? { onViewChange } : {},
+        ...viewBounds ? { viewBounds } : {},
         ...background ? { backgroundFill: background } : {},
         ...layers ? { layers } : {},
-        children: /* @__PURE__ */ jsx(DropRules, { scene })
+        children: /* @__PURE__ */ jsx(DropRules, { scene, canReparent })
       }
     ),
     overlays.map((o) => {
@@ -3618,8 +3957,13 @@ function Inner({
   ] });
 }
 var NO_OVERLAYS = [];
-function DropRules({ scene }) {
-  const canDropInto = useMemo(() => diagramCanDropInto(scene), [scene]);
+function DropRules({ scene, canReparent }) {
+  const latest = useLatest(canReparent);
+  const asks = canReparent !== void 0;
+  const canDropInto = useMemo(
+    () => diagramCanDropInto(scene, asks ? (ids, into) => latest.current?.(ids, into) ?? true : void 0),
+    [scene, asks, latest]
+  );
   useDepSource("canDropInto", () => canDropInto);
   return null;
 }
@@ -3653,6 +3997,6 @@ function useDiagramApi(apiRef, canvasRef, scene, live, setRun, fitNow) {
   }), [canvasRef, live, scene, setRun, fitNow]);
 }
 
-export { ADD_LANE_ACTION_ID, ANYWHERE, CONNECT_ACTION_ID, CONTAINER_STENCILS, DEFAULT_EDGE_STROKE, DiagramView, EASED_LAYOUTS, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, LANE_AFFORDANCE_KIND, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, MOVE_LABEL_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, addLane, applyLayout, avoidSceneInput, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, containerBuild, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, defaultCanConnect, diagramCanDropInto, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramPorts, diagramResizable, diagramShape, diagramWaypoints, dragSegment, dragVertex, easedProducer, edgeEndLayer, edgeEndScratchOf, edgePolylines, editContainerTitleAction, editContainerTitleBinding, forceProducer, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, hopDataOps, inOrUnder, insertWaypoint, isBodyEnd, isBodyOrRegion, isDiagramBody, laneLayer, laneResizeFrame, laneScratchOf, lanesOf, layoutPoses, movedLabelData, pinSegment, poolAxisOf, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, registerDiagramShape, releaseMembers, removeSegment, removeWaypoint, reorderBinding, reorderContribution, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneEdges, sceneParticipants, segmentAxis, sequenceSlots, themeWrites, unpinSegment, useLiveLayout, useMirroredSelection, waypointLayer, waypointScratchOf, withHopsData, withRouter };
-//# sourceMappingURL=chunk-ESFIS7BB.js.map
-//# sourceMappingURL=chunk-ESFIS7BB.js.map
+export { ADD_LANE_ACTION_ID, ANYWHERE, CONNECT_ACTION_ID, CONTAINERS_GROUP, CONTAINER_STENCILS, DEFAULT_EDGE_STROKE, DIAGRAM_ITEM_CARRY, DiagramView, EASED_LAYOUTS, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, ITEM_DROP_ACTION_ID, LANE_AFFORDANCE_KIND, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, MOVE_LABEL_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, addLane, applyLayout, avoidSceneInput, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, containerBuild, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createItemDropAction, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, defaultCanConnect, diagramCanDropInto, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramPorts, diagramResizable, diagramShape, diagramWaypoints, dragItemProps, dragSegment, dragVertex, easedProducer, edgeEndLayer, edgeEndScratchOf, edgePolylines, editContainerTitleAction, editContainerTitleBinding, forceProducer, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, hopDataOps, inOrUnder, insertWaypoint, isBodyEnd, isBodyOrRegion, isDiagramBody, itemDropContribution, laneLayer, laneResizeFrame, laneScratchOf, lanesOf, layoutDiagram, layoutPoses, movedLabelData, pinSegment, poolAxisOf, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, registerDiagramShape, releaseMembers, removeSegment, removeWaypoint, reorderBinding, reorderContribution, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneEdges, sceneParticipants, segmentAxis, sequenceSlots, startItemDrag, themeWrites, unpinSegment, useLiveLayout, useMirroredSelection, waypointLayer, waypointScratchOf, withHopsData, withRouter, worldWith };
+//# sourceMappingURL=chunk-62SMY45E.js.map
+//# sourceMappingURL=chunk-62SMY45E.js.map