@weasel-js/diagram 1.9.1 → 1.9.3

package/README.md

@@ -95,19 +95,65 @@ relaxation seeded from the current positions, so re-running it keeps relaxing.
 ### From data
 
 `diagramScene` turns plain `{ nodes, edges }` into a laid-out scene, and
-`DiagramView` draws one read-only, with pan, zoom and picking:
+`DiagramView` draws it, with pan, zoom and picking:
 
 ```tsx
 const specs = useMemo(() => diagramScene(data, { nodeStyle }), [data]);
 return <DiagramView specs={specs} width={360} height={600} selected={id} onSelect={setId} />;
 ```
 
-Node sizes are estimated from line lengths, so layout runs without a canvas.
-It defaults to `layered` with `order: 'barycenter'`. Labels paint only in a
-registered font family, and the default is sans-serif, so call
-`registerCanvasFont('sans-serif')` once or they render blank. `minScale` stops
-the initial fit from shrinking a wide diagram past readable; the rest is a pan
-away.
+Every box is a `buildBody` body, so a data node takes the same knobs a body
+does — `outline`, `rows`, `padding`, `gap`, `verticalAlign`, `ports` — plus `pinned`, a
+starting `at`, and a minimum `width`/`height`; `lines` is shorthand for one
+label row each. An edge can name `fromPort`/`toPort`, its own `router`,
+`waypoints` and `labelPlacement`.
+
+`groups` draws a box around some nodes, with an optional `label` inside it:
+
+```tsx
+diagramScene({ nodes, edges, groups: [{ id: 'ingest', members: ['fetch', 'decode'], label: 'ingest' }] });
+```
+
+`layered` and `tree` keep a group's members together. Each group gets a column
+on the cross axis that nothing else enters, in every rank from its first
+member's to its last, and rank gaps widen where a box needs the room. The box
+is an ordinary scene node that depends on its members and derives its pose from
+theirs (`groupDerivePose`), so dragging a member carries the box along. An edge
+whose `from` or `to` names a group meets the box, and ranks against the
+group's first stage. Groups are flat, and `force` ignores them. A scene built
+any other way joins in with a node whose trait carries `group` and whose
+`dependsOn` lists its members.
+
+Text is sized from character counts unless `measure` is given, so layout runs
+without a canvas. The layout defaults to `layered`, picked by name or passed as
+any `LayoutFn`; `layoutOptions` merge over `order: 'barycenter'`, and
+`'none'` leaves every node at its `at`.
+
+`DiagramView` is the front door for the whole package. The data owns the
+diagram: a new `specs` array is reconciled into the scene the view already
+holds (`reconcileSpecs` in core), so the view, the pick and anything moved
+since survive it. Editing reports rather than writes —
+
+```tsx
+<DiagramView
+  ref={view}
+  specs={specs}
+  onMove={(moves) => setNodes((ns) => withPositions(ns, moves))}
+  onConnect={(edge) => setEdges((es) => [...es, edge])}
+/>
+```
+
+— `onMove` turns on dragging and hears every node a drag or a layout run
+moved; `onConnect` makes ports grabbable and hears the edge a connect
+describes. Store a move as the node's `at`, with `pinned: true` unless the
+scene uses `layout: 'none'`, or the next `diagramScene` lays it out again.
+`view.current.layout('layered')` re-runs a layout animated from where the
+nodes stand; `'force'` relaxes live.
+
+Labels paint only in a registered font family, and the default is
+sans-serif, so call `registerCanvasFont('sans-serif')` once or they render
+blank. `minScale` stops the initial fit from shrinking a wide diagram past
+readable; the rest is a pan away.
 
 ## Design notes
 

package/dist/{chunk-6VYT4WCM.js → chunk-ERT3XWBS.js}

@@ -1,4 +1,5 @@
 import { rectPath, polygonFromPoints, PathBuilder, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, AUTO_POSE_DESCRIPTOR, rotatePoint, createSimulation } from '@weasel-js/core/math';
+import { cssFamilyName } from '@weasel-js/core';
 
 // src/outline.ts
 var LEAN = 0.2;
@@ -188,6 +189,7 @@ var dataKeyReader = (node) => {
   const trait = data[DIAGRAM_TRAIT_KEY];
   if (trait === null || typeof trait !== "object") return null;
   if ("from" in trait && "to" in trait) return null;
+  if ("label" in trait || "anchor" in trait) return null;
   return trait;
 };
 function createDiagramNodes(entries) {
@@ -272,20 +274,21 @@ function portOf(node, pose, portId, opts = {}) {
 function typeOf(spec) {
   return spec.type === void 0 ? {} : { type: spec.type };
 }
-
-// src/body.ts
 var DEFAULT_PADDING = 8;
 var DEFAULT_GAP = 4;
 var FALLBACK_LINE = 16;
 function canvasMeasure(ctx) {
   return (text, style) => {
     const size = style.fontSize ?? FALLBACK_LINE;
-    ctx.font = `${style.bold === true ? "bold " : ""}${size}px ${style.fontFamily ?? "sans-serif"}`;
+    ctx.font = `${style.bold === true ? "bold " : ""}${size}px ${cssFamilyName(style.fontFamily ?? "sans-serif")}`;
     return { width: ctx.measureText(text).width, height: Math.ceil(size * 1.2) };
   };
 }
 function measureRow(row, measure) {
-  const text = (s, style) => measure === void 0 ? { width: s.length * ((style?.fontSize ?? FALLBACK_LINE) * 0.6), height: FALLBACK_LINE } : measure(s, style ?? {});
+  const text = (s, style) => measure === void 0 ? {
+    width: s.length * (style?.fontSize ?? FALLBACK_LINE) * 0.6,
+    height: style?.fontSize === void 0 ? FALLBACK_LINE : Math.ceil(style.fontSize * 1.2)
+  } : measure(s, style ?? {});
   switch (row.kind) {
     case "label":
       return text(row.text, row.style);
@@ -333,9 +336,13 @@ function layoutBody(spec, bounds, measure) {
   const gap = spec.gap ?? DEFAULT_GAP;
   const inner = contentBox(spec.outline, bounds);
   const width = Math.max(inner.width - padding * 2, 0);
-  let y = inner.y + padding;
+  const heights = spec.rows.map((row) => measureRow(row, measure).height);
+  const used = heights.reduce((sum, h) => sum + h, 0) + gap * Math.max(heights.length - 1, 0);
+  const slack = Math.max(inner.height - padding * 2 - used, 0);
+  const share = { top: 0, center: 0.5, bottom: 1 }[spec.verticalAlign ?? "center"];
+  let y = inner.y + padding + slack * share;
   return spec.rows.map((row, index) => {
-    const h = measureRow(row, measure).height;
+    const h = heights[index];
     const box = { row, index, x: inner.x + padding, y, width, height: h };
     y += h + gap;
     return box;
@@ -366,13 +373,13 @@ function layoutRowPorts(row, box, measure) {
 }
 function bodyTrait(spec, bounds, measure) {
   const outline = spec.outline;
-  const compass = [
+  const compass = spec.ports ?? [
     { id: "n", at: COMPASS.n },
     { id: "e", at: COMPASS.e },
     { id: "s", at: COMPASS.s },
     { id: "w", at: COMPASS.w }
   ];
-  if (bounds.height <= 0) return { outline, ports: compass };
+  if (bounds.height <= 0) return { outline, ports: [...compass] };
   const rowPorts = [];
   let hasLeft = false;
   let hasRight = false;
@@ -388,7 +395,7 @@ function bodyTrait(spec, bounds, measure) {
       ));
     }
   }
-  const kept = compass.filter((p) => !(p.id === "w" && hasLeft) && !(p.id === "e" && hasRight));
+  const kept = spec.ports !== void 0 ? compass : compass.filter((p) => !(p.id === "w" && hasLeft) && !(p.id === "e" && hasRight));
   return { outline, ports: [...kept, ...rowPorts] };
 }
 function withType(spec, type) {
@@ -537,112 +544,164 @@ function graphOrder(graph) {
   return (id) => index.get(id) ?? Number.MAX_SAFE_INTEGER;
 }
 
-// src/barycenter.ts
-var SWEEPS = 4;
-function barycenterOrder(graph, rows, back) {
-  const out = rows.map((row) => [...row]);
-  const index = /* @__PURE__ */ new Map();
-  const reindex = (row) => row.forEach((n, i) => index.set(n.id, i));
-  out.forEach(reindex);
-  const reorder = (row, neighbors) => {
-    const key = /* @__PURE__ */ new Map();
-    for (const [i, n] of row.entries()) {
-      const at = neighbors(n.id).map((id) => index.get(id)).filter((v) => v !== void 0);
-      key.set(n.id, at.length === 0 ? i : at.reduce((s, v) => s + v, 0) / at.length);
-    }
-    row.sort((a, b) => key.get(a.id) - key.get(b.id) || index.get(a.id) - index.get(b.id));
-    reindex(row);
+// src/cluster.ts
+function insetOf(inset) {
+  if (typeof inset === "number") return { top: inset, right: inset, bottom: inset, left: inset };
+  return {
+    top: inset?.top ?? DEFAULT_GROUP_INSET,
+    right: inset?.right ?? DEFAULT_GROUP_INSET,
+    bottom: inset?.bottom ?? DEFAULT_GROUP_INSET,
+    left: inset?.left ?? DEFAULT_GROUP_INSET
   };
-  const ups = (id) => graph.incoming(id).filter((e) => !back.has(e.id)).map((e) => e.from);
-  const downs = (id) => graph.outgoing(id).filter((e) => !back.has(e.id)).map((e) => e.to);
-  for (let s = 0; s < SWEEPS; s++) {
-    for (let r = 1; r < out.length; r++) reorder(out[r], ups);
-    for (let r = out.length - 2; r >= 0; r--) reorder(out[r], downs);
-  }
-  return out;
 }
-
-// src/layered.ts
-function backEdges(graph) {
-  const back = /* @__PURE__ */ new Set();
-  const done = /* @__PURE__ */ new Set();
-  const onStack = /* @__PURE__ */ new Set();
-  const walk = (id) => {
-    if (done.has(id)) return;
-    onStack.add(id);
-    for (const edge of graph.outgoing(id)) {
-      if (onStack.has(edge.to)) back.add(edge.id);
-      else walk(edge.to);
-    }
-    onStack.delete(id);
-    done.add(id);
-  };
-  for (const node of graph.nodes) walk(node.id);
-  return back;
+var DEFAULT_GROUP_INSET = 12;
+function canonical(inset, axes) {
+  if (axes.rank === "y") {
+    return axes.sign === 1 ? { crossLo: inset.left, crossHi: inset.right, rankLo: inset.top, rankHi: inset.bottom } : { crossLo: inset.left, crossHi: inset.right, rankLo: inset.bottom, rankHi: inset.top };
+  }
+  return axes.sign === 1 ? { crossLo: inset.top, crossHi: inset.bottom, rankLo: inset.left, rankHi: inset.right } : { crossLo: inset.top, crossHi: inset.bottom, rankLo: inset.right, rankHi: inset.left };
 }
-function ranksOf(graph, back) {
-  const ranks = /* @__PURE__ */ new Map();
-  const resolving = /* @__PURE__ */ new Set();
-  const rankOf = (id) => {
-    const known = ranks.get(id);
-    if (known !== void 0) return known;
-    if (resolving.has(id)) return 0;
-    resolving.add(id);
-    let rank = 0;
-    for (const edge of graph.incoming(id)) {
-      if (back.has(edge.id)) continue;
-      rank = Math.max(rank, rankOf(edge.from) + 1);
-    }
-    resolving.delete(id);
-    ranks.set(id, rank);
-    return rank;
-  };
-  for (const node of graph.nodes) rankOf(node.id);
-  return ranks;
+function rankGaps(graph, rows, axes, rankGap) {
+  const gaps = rows.slice(1).map(() => rankGap);
+  const ends = /* @__PURE__ */ new Map();
+  const starts = /* @__PURE__ */ new Map();
+  for (const span of groupSpans(graph, rows)) {
+    const inset = canonical(span.group.inset, axes);
+    ends.set(span.hi, Math.max(ends.get(span.hi) ?? 0, inset.rankHi));
+    starts.set(span.lo, Math.max(starts.get(span.lo) ?? 0, inset.rankLo));
+  }
+  for (let i = 0; i < gaps.length; i++) {
+    gaps[i] = Math.max(gaps[i], rankGap + (ends.get(i) ?? 0) + (starts.get(i + 1) ?? 0));
+  }
+  return gaps;
 }
-var layered = (graph, opts = {}) => {
-  const axes = axesFor(opts.direction);
-  const nodeGap = opts.nodeGap ?? DEFAULT_NODE_GAP;
-  const rankGap = opts.rankGap ?? DEFAULT_RANK_GAP;
-  const order = graphOrder(graph);
-  const back = backEdges(graph);
-  const ranks = ranksOf(graph, back);
-  const byRank = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    const rank = ranks.get(node.id) ?? 0;
-    const list = byRank.get(rank);
-    if (list === void 0) byRank.set(rank, [node]);
-    else list.push(node);
+function groupSpans(graph, rows) {
+  const rankOf = /* @__PURE__ */ new Map();
+  rows.forEach((row, i) => row.forEach((n) => rankOf.set(n.id, i)));
+  const spans = [];
+  for (const group of graph.groups ?? []) {
+    const ranks = group.members.map((id) => rankOf.get(id)).filter((r) => r !== void 0);
+    if (ranks.length === 0) continue;
+    spans.push({ group, lo: Math.min(...ranks), hi: Math.max(...ranks) });
   }
-  const rows = [...byRank.keys()].sort((a, b) => a - b);
-  let ordered = rows.map((rank) => seededOrder(byRank.get(rank), axes.cross, order));
-  if (opts.order === "barycenter") ordered = barycenterOrder(graph, ordered, back);
-  const packed = /* @__PURE__ */ new Map();
-  let widest = 0;
-  for (const [i, rank] of rows.entries()) {
-    const p = packAcross(ordered[i], axes.cross, nodeGap);
-    packed.set(rank, p);
-    widest = Math.max(widest, p.span);
+  return spans;
+}
+function packClusters(graph, rows, preferred, axes, nodeGap) {
+  const spans = groupSpans(graph, rows);
+  const spanOf = /* @__PURE__ */ new Map();
+  for (const span of spans) for (const id of span.group.members) spanOf.set(id, span);
+  const width = (n) => extent(n.bounds, axes.cross);
+  const pref = (n) => preferred.get(n.id) ?? 0;
+  const packedWidth = (ns) => ns.reduce((s, n) => s + width(n), 0) + Math.max(0, ns.length - 1) * nodeGap;
+  const insets = new Map(spans.map((s) => [s, canonical(s.group.inset, axes)]));
+  const inner = /* @__PURE__ */ new Map();
+  const centerOf = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    let widest = 0;
+    let sum = 0;
+    let count = 0;
+    for (const row of rows) {
+      const members = row.filter((n) => spanOf.get(n.id) === span);
+      widest = Math.max(widest, packedWidth(members));
+      for (const n of members) {
+        sum += pref(n) + width(n) / 2;
+        count++;
+      }
+    }
+    inner.set(span, widest);
+    centerOf.set(span, count === 0 ? 0 : sum / count);
   }
-  const slots = /* @__PURE__ */ new Map();
-  let along = 0;
-  for (const rank of rows) {
-    const row = byRank.get(rank);
-    const p = packed.get(rank);
-    const indent = (widest - p.span) / 2;
-    const depth = Math.max(0, ...row.map((n) => extent(n.bounds, axes.rank)));
+  const outer = (span) => inner.get(span) + insets.get(span).crossLo + insets.get(span).crossHi;
+  const itemsByRow = rows.map((row, r) => {
+    const items = [];
     for (const node of row) {
-      slots.set(node.id, {
-        cross: indent + p.at.get(node.id),
-        // Centered in its rank's band, so a tall node does not push its
-        // neighbors' edges off the line they read along.
-        rank: along + (depth - extent(node.bounds, axes.rank)) / 2
+      if (!spanOf.has(node.id)) items.push({ kind: "node", node, center: pref(node) + width(node) / 2 });
+    }
+    for (const span of spans) {
+      if (r < span.lo || r > span.hi) continue;
+      items.push({
+        kind: "group",
+        span,
+        members: row.filter((n) => spanOf.get(n.id) === span),
+        center: centerOf.get(span)
       });
     }
-    along += depth + rankGap;
+    return items.map((item, i) => ({ item, i })).sort((a, b) => a.item.center - b.item.center || a.i - b.i).map(({ item }) => item);
+  });
+  const start = new Map(spans.map((s) => [s, centerOf.get(s) - outer(s) / 2]));
+  const at = /* @__PURE__ */ new Map();
+  for (let pass = 0; pass <= spans.length; pass++) {
+    let raised = false;
+    for (const items of itemsByRow) {
+      let cursor = -Infinity;
+      for (const item of items) {
+        if (item.kind === "node") {
+          const x2 = Math.max(pref(item.node), cursor);
+          at.set(item.node.id, x2);
+          cursor = x2 + width(item.node) + nodeGap;
+          continue;
+        }
+        const s = start.get(item.span);
+        const x = Math.max(s, cursor);
+        if (x > s) {
+          start.set(item.span, x);
+          raised = true;
+        }
+        const inset = insets.get(item.span);
+        let m = x + inset.crossLo + (inner.get(item.span) - packedWidth(item.members)) / 2;
+        for (const node of item.members) {
+          at.set(node.id, m);
+          m += width(node) + nodeGap;
+        }
+        cursor = x + outer(item.span) + nodeGap;
+      }
+    }
+    if (!raised) break;
   }
-  return settle(graph, slots, opts);
-};
+  return at;
+}
+function expandGroupEdges(edges, groups) {
+  const byId = new Map(groups.map((g) => [g.id, g]));
+  if (byId.size === 0) return [...edges];
+  const groupOf = /* @__PURE__ */ new Map();
+  for (const g of groups) for (const m of g.members) groupOf.set(m, g.id);
+  const entries = /* @__PURE__ */ new Map();
+  const exits = /* @__PURE__ */ new Map();
+  for (const g of groups) {
+    const inside = new Set(g.members);
+    const pointedAt = /* @__PURE__ */ new Set();
+    const pointing = /* @__PURE__ */ new Set();
+    for (const e of edges) {
+      if (inside.has(e.from) && inside.has(e.to) && e.from !== e.to) {
+        pointedAt.add(e.to);
+        pointing.add(e.from);
+      }
+    }
+    const entry = g.members.filter((m) => !pointedAt.has(m));
+    const exit = g.members.filter((m) => !pointing.has(m));
+    entries.set(g.id, entry.length > 0 ? entry : g.members);
+    exits.set(g.id, exit.length > 0 ? exit : g.members);
+  }
+  const out = [];
+  for (const e of edges) {
+    const fromGroup = byId.has(e.from) ? e.from : void 0;
+    const toGroup = byId.has(e.to) ? e.to : void 0;
+    if (fromGroup === void 0 && toGroup === void 0) {
+      out.push(e);
+      continue;
+    }
+    const fromOwner = fromGroup ?? groupOf.get(e.from);
+    const toOwner = toGroup ?? groupOf.get(e.to);
+    if (fromOwner !== void 0 && fromOwner === toOwner) continue;
+    const froms = fromGroup !== void 0 ? exits.get(fromGroup) : [e.from];
+    const tos = toGroup !== void 0 ? entries.get(toGroup) : [e.to];
+    let k = 0;
+    for (const from of froms) {
+      for (const to of tos) out.push({ id: `${e.id}#${k++}`, from, to });
+    }
+  }
+  return out;
+}
 var DEFAULTS = {
   iterations: 300,
   linkDistance: 160,
@@ -798,6 +857,113 @@ function separate(bodies) {
   });
 }
 
+// src/barycenter.ts
+var SWEEPS = 4;
+function barycenterOrder(graph, rows, back) {
+  const out = rows.map((row) => [...row]);
+  const index = /* @__PURE__ */ new Map();
+  const reindex = (row) => row.forEach((n, i) => index.set(n.id, i));
+  out.forEach(reindex);
+  const reorder = (row, neighbors) => {
+    const key = /* @__PURE__ */ new Map();
+    for (const [i, n] of row.entries()) {
+      const at = neighbors(n.id).map((id) => index.get(id)).filter((v) => v !== void 0);
+      key.set(n.id, at.length === 0 ? i : at.reduce((s, v) => s + v, 0) / at.length);
+    }
+    row.sort((a, b) => key.get(a.id) - key.get(b.id) || index.get(a.id) - index.get(b.id));
+    reindex(row);
+  };
+  const ups = (id) => graph.incoming(id).filter((e) => !back.has(e.id)).map((e) => e.from);
+  const downs = (id) => graph.outgoing(id).filter((e) => !back.has(e.id)).map((e) => e.to);
+  for (let s = 0; s < SWEEPS; s++) {
+    for (let r = 1; r < out.length; r++) reorder(out[r], ups);
+    for (let r = out.length - 2; r >= 0; r--) reorder(out[r], downs);
+  }
+  return out;
+}
+
+// src/layered.ts
+function backEdges(graph) {
+  const back = /* @__PURE__ */ new Set();
+  const done = /* @__PURE__ */ new Set();
+  const onStack = /* @__PURE__ */ new Set();
+  const walk = (id) => {
+    if (done.has(id)) return;
+    onStack.add(id);
+    for (const edge of graph.outgoing(id)) {
+      if (onStack.has(edge.to)) back.add(edge.id);
+      else walk(edge.to);
+    }
+    onStack.delete(id);
+    done.add(id);
+  };
+  for (const node of graph.nodes) walk(node.id);
+  return back;
+}
+function ranksOf(graph, back) {
+  const ranks = /* @__PURE__ */ new Map();
+  const resolving = /* @__PURE__ */ new Set();
+  const rankOf = (id) => {
+    const known = ranks.get(id);
+    if (known !== void 0) return known;
+    if (resolving.has(id)) return 0;
+    resolving.add(id);
+    let rank = 0;
+    for (const edge of graph.incoming(id)) {
+      if (back.has(edge.id)) continue;
+      rank = Math.max(rank, rankOf(edge.from) + 1);
+    }
+    resolving.delete(id);
+    ranks.set(id, rank);
+    return rank;
+  };
+  for (const node of graph.nodes) rankOf(node.id);
+  return ranks;
+}
+var layered = (graph, opts = {}) => {
+  const axes = axesFor(opts.direction);
+  const nodeGap = opts.nodeGap ?? DEFAULT_NODE_GAP;
+  const rankGap = opts.rankGap ?? DEFAULT_RANK_GAP;
+  const order = graphOrder(graph);
+  const back = backEdges(graph);
+  const ranks = ranksOf(graph, back);
+  const byRank = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const rank = ranks.get(node.id) ?? 0;
+    const list = byRank.get(rank);
+    if (list === void 0) byRank.set(rank, [node]);
+    else list.push(node);
+  }
+  const rows = [...byRank.keys()].sort((a, b) => a - b);
+  let ordered = rows.map((rank) => seededOrder(byRank.get(rank), axes.cross, order));
+  if (opts.order === "barycenter") ordered = barycenterOrder(graph, ordered, back);
+  const packed = ordered.map((row) => packAcross(row, axes.cross, nodeGap));
+  const widest = Math.max(0, ...packed.map((p) => p.span));
+  const preferred = /* @__PURE__ */ new Map();
+  for (const [i, row] of ordered.entries()) {
+    const indent = (widest - packed[i].span) / 2;
+    for (const node of row) preferred.set(node.id, indent + packed[i].at.get(node.id));
+  }
+  const grouped = (graph.groups?.length ?? 0) > 0;
+  const crossAt = grouped ? packClusters(graph, ordered, preferred, axes, nodeGap) : preferred;
+  const gaps = grouped ? rankGaps(graph, ordered, axes, rankGap) : ordered.slice(1).map(() => rankGap);
+  const slots = /* @__PURE__ */ new Map();
+  let along = 0;
+  for (const [i, row] of ordered.entries()) {
+    const depth = Math.max(0, ...row.map((n) => extent(n.bounds, axes.rank)));
+    for (const node of row) {
+      slots.set(node.id, {
+        cross: crossAt.get(node.id),
+        // Centered in its rank's band, so a tall node does not push its
+        // neighbors' edges off the line they read along.
+        rank: along + (depth - extent(node.bounds, axes.rank)) / 2
+      });
+    }
+    along += depth + (gaps[i] ?? 0);
+  }
+  return settle(graph, slots, opts);
+};
+
 // src/tree.ts
 function forestOf(graph, crossAxis) {
   const order = graphOrder(graph);
@@ -841,11 +1007,15 @@ var tree = (graph, opts = {}) => {
     const at = depth.get(node.id) ?? 0;
     bands.set(at, Math.max(bands.get(at) ?? 0, extent(node.bounds, axes.rank)));
   }
+  const depths = [...bands.keys()].sort((a, b) => a - b);
+  const rowsAt = depths.map((at) => graph.nodes.filter((n) => (depth.get(n.id) ?? 0) === at));
+  const grouped = (graph.groups?.length ?? 0) > 0;
+  const gaps = grouped ? rankGaps(graph, rowsAt, axes, rankGap) : depths.slice(1).map(() => rankGap);
   const bandStart = /* @__PURE__ */ new Map();
   let along = 0;
-  for (const at of [...bands.keys()].sort((a, b) => a - b)) {
+  for (const [i, at] of depths.entries()) {
     bandStart.set(at, along);
-    along += bands.get(at) + rankGap;
+    along += bands.get(at) + (gaps[i] ?? 0);
   }
   const slots = /* @__PURE__ */ new Map();
   const measured = /* @__PURE__ */ new Map();
@@ -881,9 +1051,15 @@ var tree = (graph, opts = {}) => {
     place(root, cursor);
     cursor += measure(root) + nodeGap;
   }
+  if (grouped) {
+    const preferred = new Map([...slots].map(([id, slot]) => [id, slot.cross]));
+    const ordered = rowsAt.map((row) => [...row].sort((a, b) => preferred.get(a.id) - preferred.get(b.id)));
+    const crossAt = packClusters(graph, ordered, preferred, axes, nodeGap);
+    for (const [id, slot] of slots) slots.set(id, { ...slot, cross: crossAt.get(id) ?? slot.cross });
+  }
   return settle(graph, slots, opts);
 };
 
-export { COMPASS, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, extent, force, forceRelaxation, forestOf, graphOrder, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, pinnedSet, portOf, portsOf, portsOnOutline, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree };
-//# sourceMappingURL=chunk-6VYT4WCM.js.map
-//# sourceMappingURL=chunk-6VYT4WCM.js.map
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, extent, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree };
+//# sourceMappingURL=chunk-ERT3XWBS.js.map
+//# sourceMappingURL=chunk-ERT3XWBS.js.map