@weasel-js/diagram 1.9.2 → 1.9.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, R as Row, O as Outline, c as PortSpec, B as BodySpec, d as DiagramNode, L as LayoutFn, e as LayoutOptions, M as MeasureRowText, G as GraphSource, F as ForceOptions, f as LayoutResult, g as Graph } from './layout.entry-W-8PYfGM.js';
-export { h as BodyFloor, i as BodyNodeSpec, j as Bounds, k as BuildBodyOptions, l as BuildGraphOptions, C as COMPASS, m as DEFAULT_NODE_GAP, n as DEFAULT_PORTS, o as DEFAULT_RANK_GAP, p as DIAGRAM_TRAIT_KEY, q as DiagramNodeEntry, r as ForceBody, s as ForceRelaxation, t as GraphEdge, u as GraphNode, v as GraphNodeLike, w as LayoutAxes, x as LayoutDirection, y as PortAnchor, z as RowBox, A as RowNodeData, E as RowPort, H as RowPortBox, I as RowTextStyle, S as Slot, J as axesFor, K as backEdges, N as bodyOutline, Q as bodyTrait, T as boxForContent, U as buildBody, V as buildGraph, W as canvasMeasure, X as contentBox, Y as createDiagramNodes, Z as dataKeyReader, _ as diagramNodeOf, $ as force, a0 as forceRelaxation, a1 as forestOf, a2 as graphOrder, a3 as isPinned, a4 as layered, a5 as layoutBody, a6 as layoutRowPorts, a7 as measureBody, a8 as outlinePath, a9 as outlinePolyline, aa as packAcross, ab as pinnedSet, ac as portOf, ad as portsOf, ae as portsOnOutline, af as ranksOf, ag as rayHit, ah as seededOrder, ai as settle, aj as sizeToBody, ak as translated, al as tree } from './layout.entry-W-8PYfGM.js';
+import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, c as PortAnchor, d as DiagramGroup, R as Row, O as Outline, e as PortSpec, B as BodySpec, f as DiagramNode, L as LayoutFn, g as LayoutOptions, M as MeasureRowText, G as GraphSource, F as ForceOptions, h as LayoutResult, i as Graph } from './layout.entry-KHbx5uGC.js';
+export { j as BodyFloor, k as BodyNodeSpec, l as Bounds, m as BuildBodyOptions, n as BuildGraphOptions, C as COMPASS, o as DEFAULT_GROUP_INSET, p as DEFAULT_NODE_GAP, q as DEFAULT_PORTS, r as DEFAULT_RANK_GAP, s as DIAGRAM_TRAIT_KEY, t as DiagramNodeEntry, u as ForceBody, v as ForceRelaxation, w as GraphEdge, x as GraphGroup, y as GraphNode, z as GraphNodeLike, A as GroupInset, E as LayoutAxes, H as LayoutDirection, I as RowBox, J as RowNodeData, K as RowPort, N as RowPortBox, Q as RowTextStyle, S as Slot, T as axesFor, U as backEdges, V as bodyOutline, W as bodyTrait, X as boxForContent, Y as buildBody, Z as buildGraph, _ as canvasMeasure, $ as contentBox, a0 as createDiagramNodes, a1 as dataKeyReader, a2 as diagramNodeOf, a3 as expandGroupEdges, a4 as force, a5 as forceRelaxation, a6 as forestOf, a7 as graphOrder, a8 as insetOf, a9 as isPinned, aa as layered, ab as layoutBody, ac as layoutRowPorts, ad as measureBody, ae as outlinePath, af as outlinePolyline, ag as packAcross, ah as packClusters, ai as pinnedSet, aj as portOf, ak as portsOf, al as portsOnOutline, am as rankGaps, an as ranksOf, ao as rayHit, ap as seededOrder, aq as settle, ar as sizeToBody, as as translated, at as tree } from './layout.entry-KHbx5uGC.js';
 import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, FillStyle, Stroke, CursorSpec, Affordance, InvocationCtx, GestureBinding, Action, Contribution, RenderLayer, MarkerRef, AddNodeSpec, RectPose, Scene, EasingFn, NodeId, NodeShapeEntry, View, SelectionApi } from '@weasel-js/core';
 import { Vec2 as Vec2$1 } from '@weasel-js/core/math';
 import * as react from 'react';
@@ -417,6 +417,64 @@ declare const LABEL_DERIVE_POSE: (node: {
     data: unknown;
 }, deps: readonly (DerivedDep<unknown, unknown, string> | undefined)[]) => unknown;
 
+/**
+ * A group's box, and anything pinned to a point on another node.
+ *
+ * The box is an ordinary node that depends on its members and derives its pose
+ * from theirs: their union, grown by the inset. Drag a member and the box
+ * follows; lay the diagram out and the box lands around wherever the members
+ * went. Nothing has to keep it in sync, because nothing stores it.
+ *
+ * An anchored node — a group's title is the first — derives its pose from one
+ * dependency's bounds the same way, so it travels with the box it labels.
+ */
+
+/** Where an anchored node sits on its dependency. */
+interface DiagramAnchor {
+    /** The point on the dependency's bounds, normalized as a port's is. */
+    at: PortAnchor;
+    /** The point on the node's own bounds that lands there. Default `at`, so
+     *  `{ u: 0, v: 0 }` puts the node's top-left on the dependency's. */
+    self?: PortAnchor;
+    /** Then moved by this much, in world units. */
+    offset?: Vec2$1;
+}
+/** The group trait on a node's data, or `null`. */
+declare function diagramGroupOf(node: {
+    data: unknown;
+}): DiagramGroup | null;
+/** The anchor trait on a node's data, or `null`. */
+declare function diagramAnchorOf(node: {
+    data: unknown;
+}): DiagramAnchor | null;
+/** Options for {@link groupDerivePose} and {@link anchorDerivePose}.
+ *  `geometry` defaults to the kit's `AUTO_POSE_DESCRIPTOR`. */
+interface GroupPoseOptions<TPose> {
+    geometry?: PoseDescriptor<TPose>;
+}
+type DerivePose<TPose> = (node: {
+    pose: TPose;
+    data: unknown;
+}, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
+/**
+ * A `derivePose` that draws a group's box around its members: their union,
+ * grown by the trait's inset. `null` — the authored pose stands — when the node
+ * carries no group trait or every member is gone.
+ */
+declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DerivePose<TPose>;
+/**
+ * A `derivePose` that keeps a node at a point on its dependency's bounds.
+ * `null` when the node carries no anchor trait or the dependency is gone.
+ */
+declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DerivePose<TPose>;
+/** Registry key for {@link GROUP_DERIVE_POSE}. */
+declare const DIAGRAM_GROUP = "diagram:group";
+/** Registry key for {@link ANCHOR_DERIVE_POSE}. */
+declare const DIAGRAM_ANCHOR = "diagram:anchor";
+/** The default derivations, as stable references so `toJSON` can find their keys. */
+declare const GROUP_DERIVE_POSE: DerivePose<unknown>;
+declare const ANCHOR_DERIVE_POSE: DerivePose<unknown>;
+
 /**
  * `diagramScene` — a laid-out diagram from plain `{ nodes, edges }`.
  *
@@ -452,6 +510,7 @@ interface DataNode {
     verticalAlign?: BodySpec['verticalAlign'];
 }
 interface DataEdge {
+    /** A node's id, or a group's: an edge naming a group meets its box. */
     from: string;
     to: string;
     /** The port to leave from or arrive at. Unset, the end facing the other
@@ -466,9 +525,26 @@ interface DataEdge {
     /** World points the route passes through. Layout does not move them. */
     waypoints?: readonly Vec2$1[];
 }
+/** A box drawn around some nodes, which layout keeps together. */
+interface DataGroup {
+    /** Shares one namespace with node ids. */
+    id: string;
+    /** Node ids. A node a later group also names stays in this one, and an id
+     *  that is not a node is ignored. */
+    members: readonly string[];
+    /** Drawn inside the box, above its members. */
+    label?: string;
+    /** Between the box and its members, and around the label. Default
+     *  `DiagramSceneOptions.groupPadding`. */
+    padding?: number;
+}
 interface DiagramData {
     nodes: readonly DataNode[];
     edges: readonly DataEdge[];
+    /** Flat: a group is never a member of another. `layered` and `tree` keep
+     *  each group's members together; `force` and `'none'` ignore groups but
+     *  still draw them. */
+    groups?: readonly DataGroup[];
 }
 interface NodeStyle {
     fill: string;
@@ -497,6 +573,8 @@ type TextStyle = {
 interface DiagramSceneData {
     diagram?: DiagramNode | DiagramEdge | {
         label: DiagramLabel;
+    } | {
+        anchor: DiagramAnchor;
     };
     fill?: {
         color: string;
@@ -535,12 +613,17 @@ interface DiagramSceneOptions {
     /** Where edge labels sit. Default `{ at: 'mid', offset: 9 }`. */
     labelPlacement?: DiagramLabel;
     nodeStyle?: (node: DataNode) => NodeStyle;
+    /** Default 12. */
+    groupPadding?: number;
+    /** A group's box and label. `text` colors the label. */
+    groupStyle?: (group: DataGroup) => NodeStyle;
     edgeStyle?: (edge: DataEdge) => EdgeStyle;
 }
 declare const edgeIdOf: (e: DataEdge) => string;
-/** Every spec carries an id — a node's own, `<id>/<k>` for its text, and
- *  `<edge id>/label` — so a later call's specs can be reconciled against this
- *  one's. Throws on a repeated node id, which names two nodes as one. An edge whose
+/** Every spec carries an id — a node's own, `<id>/<k>` for its text,
+ *  `<edge id>/label`, a group's own and `<group id>/label` — so a later call's
+ *  specs can be reconciled against this one's. Throws on a repeated id among
+ *  nodes and groups, which names two things as one. An edge whose
  *  end is not a node is dropped, and so is a repeat of an earlier edge with
  *  the same ends, ports and label: it would draw exactly on top of the first. */
 declare function diagramScene(data: DiagramData, opts?: DiagramSceneOptions): DiagramSpec[];
@@ -845,6 +928,11 @@ interface DiagramViewProps {
     /** Set to make ports grabbable. Dragging one port onto another reports the
      *  edge it describes and draws nothing; add it to the data to keep it. */
     onConnect?: (edge: DataEdge) => void;
+    /** Whether the canvas's keyboard shortcuts — held Space to pan among them —
+     *  run. They listen page-wide, so a view-only diagram beside other UI would
+     *  claim keys meant for the page. Default: on when `onMove` or `onConnect`
+     *  is set. */
+    enableKeybindings?: boolean;
     /** Which ports may be joined. Default: a port may not join itself, and two
      *  typed ports must share a type. */
     canConnect?: CanConnect;
@@ -896,4 +984,4 @@ declare const DiagramView: react.ForwardRefExoticComponent<DiagramViewProps & re
  *  `<SceneCanvas onClick>`. */
 declare function useMirroredSelection(selection: Pick<SelectionApi, 'get' | 'set'>, selected: string | null | undefined, onSelect: ((id: string | null) => void) | undefined): () => void;
 
-export { type ApplyLayoutOptions, BodySpec, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, type DataEdge, type DataNode, type DiagramContributionOptions, type DiagramData, type DiagramEdge, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, DiagramView, type DiagramViewApi, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, Graph, GraphSource, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MeasureRowText, type NodeMove, type NodeStyle, Outline, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, type PortScratch, PortSpec, PortsOptions, ROUTERS, type RouteRequest, type Router$1 as Router, Row, type UseLiveLayoutOptions, applyLayout, bezier, 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, type ApplyLayoutOptions, BodySpec, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, type DataEdge, type DataGroup, type DataNode, type DiagramAnchor, type DiagramContributionOptions, type DiagramData, type DiagramEdge, DiagramGroup, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, DiagramView, type DiagramViewApi, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, Graph, GraphSource, type GroupPoseOptions, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MeasureRowText, type NodeMove, type NodeStyle, Outline, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, PortAnchor, type PortScratch, PortSpec, PortsOptions, ROUTERS, type RouteRequest, type Router$1 as Router, Row, type UseLiveLayoutOptions, anchorDerivePose, applyLayout, bezier, 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 };

package/dist/index.js

@@ -1,11 +1,73 @@
-import { layered, portOf, outlinePath, diagramNodeOf, forceRelaxation, center, force, tree, portsOf, sizeToBody, measureBody, buildBody } from './chunk-UBM2J3HJ.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-UBM2J3HJ.js';
-import { dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, reconcileSpecs, SceneCanvas, fitViewToBounds, AUTO_POSE_DESCRIPTOR, pointAlongPath, translatePoseViaDescriptor, polylineFromPoints, registerNodeShape, effectivePose, usePoseRun, RECT_POSE_DESCRIPTOR, composeAffordanceLayer } 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 { 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,17 +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 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 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) {
+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();
@@ -464,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) ?? []
@@ -485,6 +637,12 @@ function diagramScene(data, opts = {}) {
     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);
@@ -507,13 +665,29 @@ function diagramScene(data, opts = {}) {
     );
     return { id: n.id, bounds: pose, pinned: n.pinned === true };
   });
-  const graph = graphOf(seeds, edges.map((e) => ({ id: edgeIdOf(e), from: e.from, to: e.to })));
+  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;
+    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;
     const textData = (text, s) => ({ text, style: styleOf(s), fill: { color: style.text } });
     const built = buildBody(
@@ -874,6 +1048,7 @@ function Inner({
   onSelect,
   onMove,
   onConnect,
+  enableKeybindings,
   canConnect,
   portOptions,
   live: liveOpts,
@@ -972,6 +1147,7 @@ function Inner({
       scene,
       selection,
       features: onMove ? ["view", "pick", "move"] : ["view", "pick"],
+      enableKeybindings: enableKeybindings ?? (onMove !== void 0 || onConnect !== void 0),
       ambient,
       onClick,
       width,
@@ -985,7 +1161,7 @@ function Inner({
   );
 }
 function fitDiagram(specs, size, fit = {}) {
-  const boxes = specs.filter((s) => s.kind === "container").map((s) => s.pose);
+  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));
@@ -1003,6 +1179,6 @@ function fitDiagram(specs, size, fit = {}) {
   });
 }
 
-export { CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, LABEL_DERIVE_POSE, LAYOUTS2 as 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