@weasel-js/diagram 1.9.1 → 1.9.3

package/dist/index.js

@@ -1,11 +1,73 @@
-import { portOf, portsOf, diagramNodeOf, layered, force, tree, forceRelaxation, center, outlinePath } from './chunk-6VYT4WCM.js';
-export { COMPASS, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, force, forceRelaxation, forestOf, graphOrder, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, pinnedSet, portOf, portsOf, portsOnOutline, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree } from './chunk-6VYT4WCM.js';
-import { dragPanContribution, AUTO_POSE_DESCRIPTOR, pointAlongPath, translatePoseViaDescriptor, polylineFromPoints, effectivePose, composeAffordanceLayer, useLatest, usePoseRun, RECT_POSE_DESCRIPTOR, registerNodeShape, WeaselProvider, useScene, useSelection, SceneCanvas, fitViewToBounds } from '@weasel-js/core';
+import { insetOf, layered, portOf, outlinePath, diagramNodeOf, expandGroupEdges, forceRelaxation, center, force, tree, DIAGRAM_TRAIT_KEY, portsOf, DEFAULT_GROUP_INSET, sizeToBody, measureBody, buildBody } from './chunk-ERT3XWBS.js';
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, 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 } from './chunk-ERT3XWBS.js';
+import { dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, reconcileSpecs, SceneCanvas, fitViewToBounds, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, pointAlongPath, polylineFromPoints, registerNodeShape, effectivePose, usePoseRun, RECT_POSE_DESCRIPTOR, composeAffordanceLayer } from '@weasel-js/core';
 import { portCurvePoints } from '@weasel-js/geom';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1 } from '@weasel-js/core/math';
-import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState, useImperativeHandle, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+function traitOf(node) {
+  const data = node.data;
+  if (data === null || typeof data !== "object") return null;
+  const trait = data[DIAGRAM_TRAIT_KEY];
+  return trait !== null && typeof trait === "object" ? trait : null;
+}
+function diagramGroupOf(node) {
+  const group = traitOf(node)?.group;
+  return group !== null && typeof group === "object" ? group : null;
+}
+function diagramAnchorOf(node) {
+  const anchor = traitOf(node)?.anchor;
+  return anchor !== null && typeof anchor === "object" && "at" in anchor ? anchor : null;
+}
+function groupDerivePose(opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  return (node, deps) => {
+    const group = diagramGroupOf(node);
+    if (group === null) return null;
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const dep of deps) {
+      if (dep === void 0) continue;
+      const b = geometry.getBounds(dep.pose);
+      x0 = Math.min(x0, b.x);
+      y0 = Math.min(y0, b.y);
+      x1 = Math.max(x1, b.x + b.width);
+      y1 = Math.max(y1, b.y + b.height);
+    }
+    if (!Number.isFinite(x0)) return null;
+    const inset = insetOf(group.inset);
+    return geometry.fromBounds(
+      {
+        x: x0 - inset.left,
+        y: y0 - inset.top,
+        width: x1 - x0 + inset.left + inset.right,
+        height: y1 - y0 + inset.top + inset.bottom
+      },
+      node.pose
+    );
+  };
+}
+function anchorDerivePose(opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  return (node, deps) => {
+    const anchor = diagramAnchorOf(node);
+    const dep = deps[0];
+    if (anchor === null || dep === void 0) return null;
+    const target = geometry.getBounds(dep.pose);
+    const own = geometry.getBounds(node.pose);
+    const self = anchor.self ?? anchor.at;
+    const x = target.x + anchor.at.u * target.width + (anchor.offset?.x ?? 0) - self.u * own.width;
+    const y = target.y + anchor.at.v * target.height + (anchor.offset?.y ?? 0) - self.v * own.height;
+    return translatePoseViaDescriptor(node.pose, x - own.x, y - own.y, geometry);
+  };
+}
+var DIAGRAM_GROUP = "diagram:group";
+var DIAGRAM_ANCHOR = "diagram:anchor";
+var GROUP_DERIVE_POSE = groupDerivePose();
+var ANCHOR_DERIVE_POSE = anchorDerivePose();
 var NAMED = { start: 0, mid: 0.5, end: 1 };
 function diagramLabelOf(node) {
   const data = node.data;
@@ -161,6 +223,8 @@ function withDiagramRegistry(registry = {}) {
     },
     derivePose: {
       [DIAGRAM_LABEL]: LABEL_DERIVE_POSE,
+      [DIAGRAM_GROUP]: GROUP_DERIVE_POSE,
+      [DIAGRAM_ANCHOR]: ANCHOR_DERIVE_POSE,
       ...registry.derivePose
     }
   };
@@ -403,6 +467,7 @@ function buildGraph(source, opts = {}) {
   const nodes = [];
   const byId = /* @__PURE__ */ new Map();
   const candidates = [];
+  const groupNodes = [];
   for (const { node, pose } of source()) {
     if (diagramEdgeOf(node) !== null) {
       const deps = node.dependsOn;
@@ -413,6 +478,15 @@ function buildGraph(source, opts = {}) {
     }
     const trait = diagramNodeOf(node, opts.read);
     if (trait === null) continue;
+    if (trait.group !== void 0) {
+      const deps = node.dependsOn;
+      groupNodes.push({
+        id: node.id,
+        members: Array.isArray(deps) ? deps : [],
+        inset: insetOf(trait.group.inset)
+      });
+      continue;
+    }
     const entry = {
       id: node.id,
       bounds: geometry.getBounds(pose),
@@ -421,7 +495,19 @@ function buildGraph(source, opts = {}) {
     nodes.push(entry);
     byId.set(entry.id, entry);
   }
-  const edges = candidates.filter((e) => byId.has(e.from) && byId.has(e.to));
+  const groups = [];
+  const claimed = /* @__PURE__ */ new Set();
+  for (const g of groupNodes) {
+    const members = g.members.filter((id) => byId.has(id) && !claimed.has(id));
+    for (const id of members) {
+      claimed.add(id);
+      byId.get(id).group = g.id;
+    }
+    groups.push({ ...g, members });
+  }
+  const live = groups.filter((g) => g.members.length > 0);
+  const known = (id) => byId.has(id) || live.some((g) => g.id === id);
+  const edges = expandGroupEdges(candidates.filter((e) => known(e.from) && known(e.to)), live);
   const out = /* @__PURE__ */ new Map();
   const into = /* @__PURE__ */ new Map();
   for (const edge of edges) {
@@ -432,6 +518,7 @@ function buildGraph(source, opts = {}) {
   return {
     nodes,
     edges,
+    groups: live,
     node: (id) => byId.get(id),
     outgoing: (id) => out.get(id) ?? NONE,
     incoming: (id) => into.get(id) ?? NONE
@@ -443,23 +530,81 @@ function push(index, key, edge) {
   else list.push(edge);
 }
 
+// src/dataGroups.ts
+function resolveGroups(groups, ids, nodeIds, opts) {
+  const claimed = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const group of groups) {
+    if (ids.has(group.id)) throw new Error(`diagramScene: group id "${group.id}" is already a node or group id`);
+    ids.add(group.id);
+    const members = group.members.filter((m) => nodeIds.has(m) && !claimed.has(m));
+    for (const m of members) claimed.add(m);
+    if (members.length === 0) continue;
+    const pad = group.padding ?? opts.padding;
+    const title = group.label ? opts.title(group.label) : null;
+    const inset = { top: pad + (title ? title.height + pad / 2 : 0), right: pad, bottom: pad, left: pad };
+    out.push({ group, members, inset, pad, title });
+  }
+  return out;
+}
+function groupSpecs(groups, placedAt, styleOf) {
+  const specs = [];
+  for (const g of groups) {
+    const { style, text } = styleOf(g.group);
+    const rs = g.members.map((m) => placedAt.get(m));
+    const x = Math.min(...rs.map((r) => r.x)) - g.inset.left;
+    const y = Math.min(...rs.map((r) => r.y)) - g.inset.top;
+    specs.push({
+      id: g.group.id,
+      kind: "leaf",
+      layer: "main",
+      pickable: false,
+      pose: {
+        x,
+        y,
+        width: Math.max(...rs.map((r) => r.x + r.width)) + g.inset.right - x,
+        height: Math.max(...rs.map((r) => r.y + r.height)) + g.inset.bottom - y
+      },
+      data: {
+        diagram: { outline: "rect", group: { inset: g.inset } },
+        fill: { color: style.fill },
+        stroke: {
+          paint: { color: style.stroke },
+          width: style.strokeWidth ?? 1,
+          ...style.dash ? { dash: style.dash } : {}
+        }
+      },
+      dependsOn: g.members,
+      derivePose: GROUP_DERIVE_POSE
+    });
+    if (g.title === null || !g.group.label) continue;
+    const anchor = { at: { u: 0, v: 0 }, offset: { x: g.pad, y: g.pad } };
+    specs.push({
+      id: `${g.group.id}/label`,
+      kind: "leaf",
+      layer: "main",
+      pickable: false,
+      pose: { x: x + g.pad, y: y + g.pad, width: g.title.width, height: g.title.height },
+      data: { diagram: { anchor }, text: g.group.label, style: text, fill: { color: style.text } },
+      dependsOn: [g.group.id],
+      derivePose: ANCHOR_DERIVE_POSE
+    });
+  }
+  return specs;
+}
+
 // src/fromData.ts
 var FONT = { fontFamily: "sans-serif", fontSize: 12 };
 var NODE = { fill: "#16222c", stroke: "#7ba7c7", text: "#dbe7f2" };
 var EDGE = { stroke: "#7ba7c7" };
-var PAD = { x: 12, y: 8 };
+var GROUP = { fill: "rgba(123, 167, 199, 0.08)", stroke: "#7ba7c7", text: "#9fbdd6", strokeWidth: 1, dash: [4, 3] };
+var LABEL_PLACEMENT = { at: "mid", offset: 9 };
 var LINE = 1.4;
 var GLYPH = 0.6;
 var MIN_WIDTH = 64;
-var edgeIdOf = (e) => `edge:${e.from}->${e.to}${e.label ? `:${e.label}` : ""}`;
-function sizeOf(node, fontSize) {
-  const longest = Math.max(0, ...node.lines.map((l) => l.length));
-  return {
-    width: Math.max(MIN_WIDTH, Math.ceil(longest * GLYPH * fontSize + 2 * PAD.x)),
-    height: Math.ceil(Math.max(1, node.lines.length) * LINE * fontSize + 2 * PAD.y)
-  };
-}
-function graphOf(nodes, edges) {
+var LAYOUTS = { layered, tree, force };
+var edgeIdOf = (e) => `edge:${e.from}${e.fromPort ? `.${e.fromPort}` : ""}->${e.to}${e.toPort ? `.${e.toPort}` : ""}${e.label ? `:${e.label}` : ""}`;
+function graphOf(nodes, edges, groups = []) {
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const out = /* @__PURE__ */ new Map();
   const inc = /* @__PURE__ */ new Map();
@@ -470,6 +615,7 @@ function graphOf(nodes, edges) {
   return {
     nodes,
     edges,
+    groups,
     node: (id) => byId.get(id),
     outgoing: (id) => out.get(id) ?? [],
     incoming: (id) => inc.get(id) ?? []
@@ -477,11 +623,26 @@ function graphOf(nodes, edges) {
 }
 function diagramScene(data, opts = {}) {
   const font = opts.font ?? FONT;
+  const styleOf = (s) => ({
+    fontFamily: s?.fontFamily ?? font.fontFamily,
+    fontSize: s?.fontSize ?? font.fontSize,
+    ...s?.bold === true ? { fontWeight: 700 } : {}
+  });
+  const measure = opts.measure ? (text, s) => opts.measure(text, { ...s, fontFamily: s.fontFamily ?? font.fontFamily, fontSize: s.fontSize ?? font.fontSize }) : (text, s) => {
+    const size = s.fontSize ?? font.fontSize;
+    return { width: text.length * GLYPH * size, height: Math.ceil(LINE * size) };
+  };
   const ids = /* @__PURE__ */ new Set();
   for (const n of data.nodes) {
     if (ids.has(n.id)) throw new Error(`diagramScene: node id "${n.id}" appears more than once`);
     ids.add(n.id);
   }
+  const nodeIds = new Set(ids);
+  const titleStyle = { ...font, fontSize: font.fontSize - 1 };
+  const groups = resolveGroups(data.groups ?? [], ids, nodeIds, {
+    padding: opts.groupPadding ?? DEFAULT_GROUP_INSET,
+    title: (text) => measure(text, titleStyle)
+  });
   const seen = /* @__PURE__ */ new Set();
   const edges = data.edges.filter((e) => {
     const id = edgeIdOf(e);
@@ -489,49 +650,75 @@ function diagramScene(data, opts = {}) {
     seen.add(id);
     return true;
   });
-  const seeds = data.nodes.map((n, i) => ({
-    id: n.id,
-    bounds: { x: i, y: i, ...sizeOf(n, font.fontSize) },
-    pinned: false
+  const bodies = data.nodes.map((n) => ({
+    outline: n.outline ?? opts.outline ?? "rect",
+    rows: n.rows ?? (n.lines ?? []).map((text) => ({ kind: "label", text })),
+    padding: n.padding ?? opts.padding ?? 8,
+    gap: n.gap ?? opts.gap ?? 4,
+    verticalAlign: n.verticalAlign ?? opts.verticalAlign ?? "center",
+    ...n.ports ? { ports: n.ports } : {}
   }));
-  const graph = graphOf(seeds, edges.map((e) => ({ id: edgeIdOf(e), from: e.from, to: e.to })));
-  const moved = (opts.layout ?? layered)(graph, opts.layoutOptions ?? { order: "barycenter" });
+  const seeds = data.nodes.map((n, i) => {
+    const pose = sizeToBody(
+      { ...n.at ?? { x: i, y: i }, width: n.width ?? opts.minWidth ?? MIN_WIDTH, height: n.height ?? 0 },
+      measureBody(bodies[i], measure)
+    );
+    return { id: n.id, bounds: pose, pinned: n.pinned === true };
+  });
+  const graphGroups = groups.map((g) => ({ id: g.group.id, members: g.members, inset: g.inset }));
+  const seedOf = new Map(seeds.map((n) => [n.id, n]));
+  for (const g of groups) for (const m of g.members) seedOf.get(m).group = g.group.id;
+  const graph = graphOf(
+    seeds,
+    expandGroupEdges(edges.map((e) => ({ id: edgeIdOf(e), from: e.from, to: e.to })), graphGroups),
+    graphGroups
+  );
+  const layout = typeof opts.layout === "function" ? opts.layout : opts.layout === "none" ? null : LAYOUTS[opts.layout ?? "layered"];
+  const moved = layout === null ? /* @__PURE__ */ new Map() : layout(graph, { order: "barycenter", ...opts.layoutOptions });
   const specs = [];
-  for (const [i, n] of data.nodes.entries()) {
+  const placedAt = new Map(data.nodes.map((n, i) => {
     const seed = seeds[i].bounds;
     const at = moved.get(n.id) ?? seed;
-    const pose = { x: at.x, y: at.y, width: seed.width, height: seed.height };
+    return [n.id, { x: at.x, y: at.y, width: seed.width, height: seed.height }];
+  }));
+  specs.push(...groupSpecs(groups, placedAt, (g) => ({
+    style: opts.groupStyle?.(g) ?? GROUP,
+    text: styleOf(titleStyle)
+  })));
+  for (const [i, n] of data.nodes.entries()) {
+    const seed = seeds[i].bounds;
+    const at = placedAt.get(n.id);
     const style = opts.nodeStyle?.(n) ?? NODE;
-    specs.push({
-      id: n.id,
-      kind: "container",
-      layer: "main",
-      pose,
-      data: {
-        diagram: { outline: "rect" },
-        fill: { color: style.fill },
-        stroke: { paint: { color: style.stroke }, width: style.strokeWidth ?? 2 }
-      }
-    });
-    for (const [k, text] of n.lines.entries()) {
-      specs.push({
-        kind: "leaf",
+    const textData = (text, s) => ({ text, style: styleOf(s), fill: { color: style.text } });
+    const built = buildBody(
+      bodies[i],
+      { x: at.x, y: at.y, width: seed.width, height: seed.height },
+      {
+        id: n.id,
         layer: "main",
-        parent: n.id,
-        pickable: false,
-        pose: {
-          x: pose.x + PAD.x,
-          y: pose.y + PAD.y + k * LINE * font.fontSize,
-          width: pose.width - 2 * PAD.x,
-          height: LINE * font.fontSize
-        },
-        data: { text, style: font, fill: { color: style.text } }
-      });
+        measure,
+        body: (trait) => ({
+          diagram: n.pinned === true ? { ...trait, pinned: true } : trait,
+          fill: { color: style.fill },
+          stroke: {
+            paint: { color: style.stroke },
+            width: style.strokeWidth ?? 2,
+            ...style.dash ? { dash: style.dash } : {}
+          }
+        }),
+        row: (text, box) => text === "" ? null : textData(text, box.row.kind === "label" || box.row.kind === "field" ? box.row.style : void 0),
+        portLabel: (text) => textData(text, void 0)
+      }
+    );
+    for (const [k, s] of built.specs.entries()) {
+      specs.push({ ...s, ...k === 0 ? {} : { id: `${n.id}/${k}` } });
     }
   }
   for (const e of edges) {
     const id = edgeIdOf(e);
     const style = opts.edgeStyle?.(e) ?? EDGE;
+    const markerStart = style.markerStart ?? null;
+    const markerEnd = style.markerEnd === void 0 ? "arrow" : style.markerEnd;
     specs.push({
       id,
       kind: "leaf",
@@ -539,23 +726,36 @@ function diagramScene(data, opts = {}) {
       pickable: false,
       pose: { x: 0, y: 0, width: 0, height: 0 },
       data: {
-        diagram: { from: {}, to: {}, router: opts.router ?? "bezier" },
-        stroke: { paint: { color: style.stroke }, width: style.width ?? 1.5, markerEnd: "arrow" }
+        diagram: {
+          from: e.fromPort ? { port: e.fromPort } : {},
+          to: e.toPort ? { port: e.toPort } : {},
+          router: e.router ?? opts.router ?? "bezier",
+          ...e.waypoints ? { waypoints: e.waypoints } : {}
+        },
+        stroke: {
+          paint: { color: style.stroke },
+          width: style.width ?? 1.5,
+          ...style.dash ? { dash: style.dash } : {},
+          ...markerStart !== null ? { markerStart } : {},
+          ...markerEnd !== null ? { markerEnd } : {}
+        }
       },
       dependsOn: [e.from, e.to],
       derivePath: EDGE_DERIVE_PATH
     });
     if (e.label) {
+      const labelStyle = { ...font, fontSize: font.fontSize - 2 };
       specs.push({
+        id: `${id}/label`,
         kind: "leaf",
         layer: "main",
         pickable: false,
-        pose: { x: 0, y: 0, width: e.label.length * GLYPH * (font.fontSize - 2), height: font.fontSize },
+        pose: { x: 0, y: 0, width: measure(e.label, labelStyle).width, height: labelStyle.fontSize },
         data: {
-          diagram: { label: { at: "mid", offset: 9 } },
+          diagram: { label: e.labelPlacement ?? opts.labelPlacement ?? LABEL_PLACEMENT },
           text: e.label,
-          style: { ...font, fontSize: font.fontSize - 2 },
-          fill: { color: style.stroke }
+          style: labelStyle,
+          fill: { color: style.label ?? style.stroke }
         },
         dependsOn: [id],
         derivePose: LABEL_DERIVE_POSE
@@ -564,7 +764,7 @@ function diagramScene(data, opts = {}) {
   }
   return specs;
 }
-var LAYOUTS = Object.freeze({
+var LAYOUTS2 = Object.freeze({
   layered,
   tree,
   force
@@ -609,7 +809,7 @@ function subtreeOf(scene, id) {
 }
 var LAYOUT_ACTION_ID = "diagram.layout";
 function createLayoutAction(opts) {
-  const algorithm = typeof opts.algorithm === "function" ? opts.algorithm : LAYOUTS[opts.algorithm ?? "layered"] ?? layered;
+  const algorithm = typeof opts.algorithm === "function" ? opts.algorithm : LAYOUTS2[opts.algorithm ?? "layered"] ?? layered;
   const build = {
     ...opts.read ? { read: opts.read } : {},
     ...opts.geometry ? { geometry: opts.geometry } : {}
@@ -725,7 +925,7 @@ function useLiveLayout(opts) {
       });
       return;
     }
-    const fn = typeof algorithm === "function" ? algorithm : LAYOUTS[algorithm] ?? layered;
+    const fn = typeof algorithm === "function" ? algorithm : LAYOUTS2[algorithm] ?? layered;
     producer.current = easedProducer(graph, fn, {
       ...o.layout ? { layout: o.layout } : {},
       ...o.frames === void 0 ? {} : { frames: o.frames },
@@ -836,18 +1036,32 @@ function useMirroredSelection(selection, selected, onSelect) {
     onSelectRef.current?.(selection.get()[0] ?? null);
   }, [selection, onSelectRef]);
 }
-var made = 0;
-var keys = /* @__PURE__ */ new WeakMap();
-var keyOf = (specs) => {
-  let k = keys.get(specs);
-  if (k === void 0) keys.set(specs, k = ++made);
-  return k;
-};
 var AMBIENT = [dragPanContribution()];
-function DiagramView(props) {
-  return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props }, keyOf(props.specs)) });
-}
-function Inner({ specs, width, height, selected, onSelect, minScale, anchor, className }) {
+var DiagramView = forwardRef(function DiagramView2(props, ref) {
+  return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props, apiRef: ref }) });
+});
+function Inner({
+  specs,
+  width,
+  height,
+  selected,
+  onSelect,
+  onMove,
+  onConnect,
+  enableKeybindings,
+  canConnect,
+  portOptions,
+  live: liveOpts,
+  minScale,
+  maxScale,
+  anchor,
+  fitPadding,
+  background,
+  view,
+  onViewChange,
+  className,
+  apiRef
+}) {
   useEffect(() => registerDiagramShape(), []);
   const registry = useMemo(() => withDiagramRegistry(), []);
   const scene = useScene({
@@ -857,27 +1071,97 @@ function Inner({ specs, width, height, selected, onSelect, minScale, anchor, cla
   });
   const selection = useSelection({ scene, mode: "single" });
   const onClick = useMirroredSelection(selection, selected, onSelect);
+  const onMoveRef = useLatest(onMove);
+  const syncing = useRef(false);
+  const applied = useRef(specs);
+  const known = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const read = () => {
+      const out = /* @__PURE__ */ new Map();
+      for (const n of scene.renderOrderNodes()) {
+        if (n.kind === "container") out.set(n.id, { x: n.pose.x, y: n.pose.y });
+      }
+      return out;
+    };
+    known.current = read();
+    return scene.subscribe(() => {
+      const now = read();
+      const moves = [];
+      if (!syncing.current) {
+        for (const [id, at] of now) {
+          const was = known.current.get(id);
+          if (was !== void 0 && (was.x !== at.x || was.y !== at.y)) moves.push({ id, ...at });
+        }
+      }
+      known.current = now;
+      if (moves.length > 0) onMoveRef.current?.(moves);
+    });
+  }, [scene, onMoveRef]);
+  useEffect(() => {
+    if (applied.current === specs) return;
+    syncing.current = true;
+    try {
+      reconcileSpecs(scene, applied.current, specs);
+    } finally {
+      syncing.current = false;
+    }
+    applied.current = specs;
+  }, [scene, specs]);
+  const source = useMemo(() => sceneParticipants(scene), [scene]);
+  const [run, setRun] = useState(null);
+  const live = useLiveLayout({ ...liveOpts, scene, source, algorithm: run?.algorithm ?? "force" });
+  useEffect(() => {
+    if (run !== null) live.restart();
+  }, [run, live]);
+  useImperativeHandle(apiRef, () => ({
+    layout: (algorithm = "force") => setRun({ algorithm }),
+    live
+  }), [live]);
+  const onConnectRef = useLatest(onConnect);
+  const connecting = onConnect !== void 0;
+  const ports = useMemo(() => connecting ? diagramPorts({
+    ...portOptions,
+    participants: source,
+    ...canConnect ? { canConnect } : {},
+    commit: ({ from, to }) => onConnectRef.current?.({
+      from: from.nodeId,
+      fromPort: from.id,
+      to: to.nodeId,
+      toPort: to.id
+    })
+  }) : null, [connecting, source, canConnect, portOptions, onConnectRef]);
+  const canvasRef = useRef(null);
+  useEffect(() => ports ? canvasRef.current?.registerLayer(ports.layer) : void 0, [ports]);
+  const ambient = useMemo(() => ports ? [...AMBIENT, ports.contribution] : AMBIENT, [ports]);
+  const controlled = view !== void 0;
   const defaultView = useMemo(
-    () => fitDiagram(specs, { width, height }, minScale, anchor),
-    [specs, width, height, minScale, anchor]
+    () => controlled ? void 0 : fitDiagram(specs, { width, height }, { minScale, maxScale, anchor, padding: fitPadding }),
+    // The fit is where the view opens; a later `specs` keeps the view it has.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlled, width, height, minScale, maxScale, anchor, fitPadding]
   );
   return /* @__PURE__ */ jsx(
     SceneCanvas,
     {
+      ref: canvasRef,
       scene,
       selection,
-      features: ["view", "pick"],
-      ambient: AMBIENT,
+      features: onMove ? ["view", "pick", "move"] : ["view", "pick"],
+      enableKeybindings: enableKeybindings ?? (onMove !== void 0 || onConnect !== void 0),
+      ambient,
       onClick,
       width,
       height,
       className,
-      ...defaultView ? { defaultView } : {}
+      ...defaultView ? { defaultView } : {},
+      ...view ? { view } : {},
+      ...onViewChange ? { onViewChange } : {},
+      ...background ? { backgroundFill: background } : {}
     }
   );
 }
-function fitDiagram(specs, size, minScale, anchor) {
-  const boxes = specs.filter((s) => s.kind === "container").map((s) => s.pose);
+function fitDiagram(specs, size, fit = {}) {
+  const boxes = specs.filter((s) => s.kind === "container" || diagramGroupOf(s) !== null).map((s) => s.pose);
   if (boxes.length === 0) return void 0;
   const x = Math.min(...boxes.map((b) => b.x));
   const y = Math.min(...boxes.map((b) => b.y));
@@ -888,12 +1172,13 @@ function fitDiagram(specs, size, minScale, anchor) {
     height: Math.max(...boxes.map((b) => b.y + b.height)) - y
   };
   return fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
-    maxScale: 1,
-    ...minScale !== void 0 ? { minScale } : {},
-    ...anchor !== void 0 ? { anchor } : {}
+    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 } : {}
   });
 }
 
-export { CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramEdgeOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
+export { ANCHOR_DERIVE_POSE, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LAYOUTS2 as LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, anchorDerivePose, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map