@statelyai/layout 0.2.0 → 0.4.0

package/dist/types-CT2akdK0.d.mts

@@ -0,0 +1,133 @@
+import { EntityRect, Graph, GraphDiff, Point } from "@statelyai/graph";
+
+//#region src/routing/types.d.ts
+type RoutePoint = Readonly<Point>;
+type RouteSegment = {
+  readonly kind: "line";
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "quadratic";
+  readonly control: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "cubic";
+  readonly control1: RoutePoint;
+  readonly control2: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "arc";
+  readonly rx: number;
+  readonly ry: number;
+  readonly rotation: number;
+  readonly largeArc: boolean;
+  readonly sweep: boolean;
+  readonly to: RoutePoint;
+};
+interface RoutePath {
+  readonly start: RoutePoint;
+  readonly segments: readonly RouteSegment[];
+}
+type RouteEndpoint = {
+  readonly kind: "node";
+  readonly nodeId: string;
+  readonly port?: string;
+} | {
+  readonly kind: "label";
+  readonly edgeId: string;
+} | {
+  readonly kind: "junction";
+  readonly id: string;
+};
+interface RouteSection {
+  readonly id: string;
+  readonly from: RouteEndpoint;
+  readonly to: RouteEndpoint;
+  readonly path: RoutePath;
+  /** Same ID denotes a shared trunk; render it once. */
+  readonly sharedId?: string;
+}
+type RoutingDiagnosticCode = "MISSING_GEOMETRY" | "MISSING_PORT" | "ROUTE_CONFLICT" | "ROUTE_BLOCKED" | "SEARCH_BUDGET" | "CONSTRAINT_VIOLATION";
+interface RoutingDiagnostic {
+  readonly code: RoutingDiagnosticCode;
+  readonly edgeId: string;
+  readonly message: string;
+}
+interface Route {
+  readonly edgeId: string;
+  readonly sections: readonly RouteSection[];
+  readonly status: "routed" | "fallback";
+  readonly diagnostics: readonly RoutingDiagnostic[];
+}
+type RoutePatch = {
+  readonly op: "set";
+  readonly edgeId: string;
+  readonly route: Route;
+} | {
+  readonly op: "delete";
+  readonly edgeId: string;
+};
+type RouteStyle = "straight" | "bezier" | "orthogonal" | "polyline" | "octilinear" | "curved" | "organic" | "parallel" | "self-loop" | "fan" | "bus" | "bundle";
+type RouteSide = "left" | "right" | "top" | "bottom";
+interface RouteAttachment {
+  /** Node-local attachment rectangle, independent of its outer obstacle bounds. */
+  readonly bounds: RouteBounds;
+  readonly facing?: "inward" | "outward";
+}
+interface EdgeRoutingSettings {
+  readonly sourceAttachment?: RouteAttachment;
+  readonly targetAttachment?: RouteAttachment;
+  readonly sourceSide?: RouteSide;
+  readonly targetSide?: RouteSide;
+  readonly waypoints?: readonly RoutePoint[];
+  /** Explicit shared routing group. Native binary edges describe branches of a net. */
+  readonly group?: string;
+}
+interface RoutingSettings {
+  /** Native compound geometry is parent-relative; adapters may supply resolved world geometry. */
+  readonly coordinateSpace?: "parent" | "world";
+  readonly clearance?: number;
+  readonly radius?: number;
+  readonly edgeSpacing?: number;
+  readonly bendPenalty?: number;
+  /** Soft cost per crossing; finite costs keep detours proportionate. Default 80. */
+  readonly crossingPenalty?: number;
+  /** Cost per unit of parallel overlap within edgeSpacing. Default 8. */
+  readonly overlapPenalty?: number;
+  readonly maxSearchNodes?: number;
+  readonly organicIterations?: number;
+  readonly edges?: Readonly<Record<string, EdgeRoutingSettings>>;
+}
+interface RoutingMetrics {
+  readonly routedEdges: number;
+  readonly reusedEdges: number;
+  readonly affectedEdges: number;
+  readonly searchNodes: number;
+  readonly obstacleCandidates: number;
+}
+/** Immutable value. Retain it per canvas; the private state uses structural sharing. */
+interface RoutingSnapshot {
+  readonly strategy: string;
+  readonly revision: number;
+  readonly routes: ReadonlyMap<string, Route>;
+  readonly metrics: RoutingMetrics;
+}
+interface RoutingUpdate {
+  readonly snapshot: RoutingSnapshot;
+  readonly patches: readonly RoutePatch[];
+  /** Compare identity before accepting an asynchronous result. */
+  readonly base: RoutingSnapshot;
+}
+type RoutingGraph = Graph<unknown, unknown, unknown, unknown>;
+interface RoutingStrategy {
+  readonly id: string;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot | Promise<RoutingSnapshot>;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate | Promise<RoutingUpdate>;
+}
+interface NativeRoutingStrategy extends RoutingStrategy {
+  readonly id: RouteStyle;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate;
+}
+type RouteBounds = Readonly<EntityRect>;
+//#endregion
+export { RoutingMetrics as _, RouteBounds as a, RoutingStrategy as b, RoutePath as c, RouteSegment as d, RouteSide as f, RoutingGraph as g, RoutingDiagnosticCode as h, RouteAttachment as i, RoutePoint as l, RoutingDiagnostic as m, NativeRoutingStrategy as n, RouteEndpoint as o, RouteStyle as p, Route as r, RoutePatch as s, EdgeRoutingSettings as t, RouteSection as u, RoutingSettings as v, RoutingUpdate as x, RoutingSnapshot as y };

package/dist/types-uxPlGRof.d.cts

@@ -0,0 +1,133 @@
+import { EntityRect, Graph, GraphDiff, Point } from "@statelyai/graph";
+
+//#region src/routing/types.d.ts
+type RoutePoint = Readonly<Point>;
+type RouteSegment = {
+  readonly kind: "line";
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "quadratic";
+  readonly control: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "cubic";
+  readonly control1: RoutePoint;
+  readonly control2: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "arc";
+  readonly rx: number;
+  readonly ry: number;
+  readonly rotation: number;
+  readonly largeArc: boolean;
+  readonly sweep: boolean;
+  readonly to: RoutePoint;
+};
+interface RoutePath {
+  readonly start: RoutePoint;
+  readonly segments: readonly RouteSegment[];
+}
+type RouteEndpoint = {
+  readonly kind: "node";
+  readonly nodeId: string;
+  readonly port?: string;
+} | {
+  readonly kind: "label";
+  readonly edgeId: string;
+} | {
+  readonly kind: "junction";
+  readonly id: string;
+};
+interface RouteSection {
+  readonly id: string;
+  readonly from: RouteEndpoint;
+  readonly to: RouteEndpoint;
+  readonly path: RoutePath;
+  /** Same ID denotes a shared trunk; render it once. */
+  readonly sharedId?: string;
+}
+type RoutingDiagnosticCode = "MISSING_GEOMETRY" | "MISSING_PORT" | "ROUTE_CONFLICT" | "ROUTE_BLOCKED" | "SEARCH_BUDGET" | "CONSTRAINT_VIOLATION";
+interface RoutingDiagnostic {
+  readonly code: RoutingDiagnosticCode;
+  readonly edgeId: string;
+  readonly message: string;
+}
+interface Route {
+  readonly edgeId: string;
+  readonly sections: readonly RouteSection[];
+  readonly status: "routed" | "fallback";
+  readonly diagnostics: readonly RoutingDiagnostic[];
+}
+type RoutePatch = {
+  readonly op: "set";
+  readonly edgeId: string;
+  readonly route: Route;
+} | {
+  readonly op: "delete";
+  readonly edgeId: string;
+};
+type RouteStyle = "straight" | "bezier" | "orthogonal" | "polyline" | "octilinear" | "curved" | "organic" | "parallel" | "self-loop" | "fan" | "bus" | "bundle";
+type RouteSide = "left" | "right" | "top" | "bottom";
+interface RouteAttachment {
+  /** Node-local attachment rectangle, independent of its outer obstacle bounds. */
+  readonly bounds: RouteBounds;
+  readonly facing?: "inward" | "outward";
+}
+interface EdgeRoutingSettings {
+  readonly sourceAttachment?: RouteAttachment;
+  readonly targetAttachment?: RouteAttachment;
+  readonly sourceSide?: RouteSide;
+  readonly targetSide?: RouteSide;
+  readonly waypoints?: readonly RoutePoint[];
+  /** Explicit shared routing group. Native binary edges describe branches of a net. */
+  readonly group?: string;
+}
+interface RoutingSettings {
+  /** Native compound geometry is parent-relative; adapters may supply resolved world geometry. */
+  readonly coordinateSpace?: "parent" | "world";
+  readonly clearance?: number;
+  readonly radius?: number;
+  readonly edgeSpacing?: number;
+  readonly bendPenalty?: number;
+  /** Soft cost per crossing; finite costs keep detours proportionate. Default 80. */
+  readonly crossingPenalty?: number;
+  /** Cost per unit of parallel overlap within edgeSpacing. Default 8. */
+  readonly overlapPenalty?: number;
+  readonly maxSearchNodes?: number;
+  readonly organicIterations?: number;
+  readonly edges?: Readonly<Record<string, EdgeRoutingSettings>>;
+}
+interface RoutingMetrics {
+  readonly routedEdges: number;
+  readonly reusedEdges: number;
+  readonly affectedEdges: number;
+  readonly searchNodes: number;
+  readonly obstacleCandidates: number;
+}
+/** Immutable value. Retain it per canvas; the private state uses structural sharing. */
+interface RoutingSnapshot {
+  readonly strategy: string;
+  readonly revision: number;
+  readonly routes: ReadonlyMap<string, Route>;
+  readonly metrics: RoutingMetrics;
+}
+interface RoutingUpdate {
+  readonly snapshot: RoutingSnapshot;
+  readonly patches: readonly RoutePatch[];
+  /** Compare identity before accepting an asynchronous result. */
+  readonly base: RoutingSnapshot;
+}
+type RoutingGraph = Graph<unknown, unknown, unknown, unknown>;
+interface RoutingStrategy {
+  readonly id: string;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot | Promise<RoutingSnapshot>;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate | Promise<RoutingUpdate>;
+}
+interface NativeRoutingStrategy extends RoutingStrategy {
+  readonly id: RouteStyle;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate;
+}
+type RouteBounds = Readonly<EntityRect>;
+//#endregion
+export { RoutingMetrics as _, RouteBounds as a, RoutingStrategy as b, RoutePath as c, RouteSegment as d, RouteSide as f, RoutingGraph as g, RoutingDiagnosticCode as h, RouteAttachment as i, RoutePoint as l, RoutingDiagnostic as m, NativeRoutingStrategy as n, RouteEndpoint as o, RouteStyle as p, Route as r, RoutePatch as s, EdgeRoutingSettings as t, RouteSection as u, RoutingSettings as v, RoutingUpdate as x, RoutingSnapshot as y };

package/dist/{worker-client-DAT_z2OR.d.mts → worker-client-BwGGRD5y.d.mts}

@@ -1,4 +1,4 @@
-import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-B8rAALJq.mjs";
+import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-9NCPoqbp.mjs";
 
 //#region src/elkjs/worker-client.d.ts
 declare class WorkerELK implements ELK {

package/dist/{worker-client-DVhklF6A.d.cts → worker-client-D4zNyPEI.d.cts}

@@ -1,4 +1,4 @@
-import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-CVB0hXGk.cjs";
+import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-BcRZoJE3.cjs";
 
 //#region src/elkjs/worker-client.d.ts
 declare class WorkerELK implements ELK {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/layout",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Extensible, graph-native layout algorithms for @statelyai/graph",
   "license": "EPL-2.0 OR GPL-3.0-or-later",
   "repository": {
@@ -59,7 +59,12 @@
       "import": "./dist/layered/index.mjs",
       "require": "./dist/layered/index.cjs"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./routing": {
+      "types": "./src/routing/index.ts",
+      "import": "./dist/routing/index.mjs",
+      "require": "./dist/routing/index.cjs"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -102,6 +107,7 @@
   "scripts": {
     "build": "tsdown --config tsdown.config.mjs",
     "bench": "vitest bench --run",
+    "bench:statecharts": "tsx scripts/bench-statecharts.ts",
     "demo": "portless --name layout vite --config demo/vite.config.ts",
     "demo:build": "vite build --config demo/vite.config.ts",
     "demo:check": "tsx scripts/generate-demo-corpus.ts --check",
@@ -124,6 +130,11 @@
     "validate:package": "publint --pack npm && tsx scripts/smoke-package.ts",
     "storybook": "storybook dev -p 6018 --host 127.0.0.1 --no-open",
     "storybook:build": "storybook build -o dist-storybook",
-    "storybook:typecheck": "tsc --project stories/tsconfig.json"
+    "storybook:typecheck": "tsc --project stories/tsconfig.json",
+    "test:parity:compound": "tsx scripts/check-compound-parity.ts",
+    "test:parity:self-loops": "tsx scripts/check-mixed-self-loop-parity.ts",
+    "test:parity:flat": "tsx scripts/check-flat-parity.ts",
+    "test:parity:model-order": "tsx scripts/check-model-order-parity.ts",
+    "test:parity:oracle": "vitest run --config vitest.parity.config.ts"
   }
 }

package/src/authoring/coordinates.ts

@@ -1,7 +1,7 @@
 import { LayoutError } from "../errors";
 import type { VisualGraph, Point } from "@statelyai/graph";
 
-/** Native compound nodes and sibling edges are parent-relative; crossing edges are world-relative. */
+/** Legacy sibling edges are parent-relative; native compound output marks world-space edges. */
 function frames<N, E, G, P>(graph: VisualGraph<N, E, G, P>) {
   const nodes = new Map(graph.nodes.map((n) => [n.id, n]));
   const offsets = new Map<string, Point>();
@@ -33,6 +33,7 @@ function frames<N, E, G, P>(graph: VisualGraph<N, E, G, P>) {
       const target = nodes.get(edge.targetId)!;
       return [
         edge.id,
+        (graph as VisualGraph & { edgeCoordinateSpace?: string }).edgeCoordinateSpace !== "world" &&
         (source.parentId ?? null) === (target.parentId ?? null)
           ? offset(source.id)
           : { x: 0, y: 0 },
@@ -44,8 +45,15 @@ function frames<N, E, G, P>(graph: VisualGraph<N, E, G, P>) {
 
 export function worldGeometry<N, E, G, P>(graph: VisualGraph<N, E, G, P>): VisualGraph<N, E, G, P> {
   const offsets = frames(graph);
+  const base = { ...graph } as VisualGraph<N, E, G, P> & {
+    compoundRoutes?: unknown;
+    compoundGeometry?: unknown;
+  };
+  // Authoring may change nodes, labels, or paths. Never carry derived full-layout caches.
+  delete base.compoundRoutes;
+  delete base.compoundGeometry;
   return {
-    ...graph,
+    ...base,
     nodes: graph.nodes.map((n) => {
       const p = offsets.nodes.get(n.id)!;
       return p.x === 0 && p.y === 0 ? n : { ...n, x: n.x + p.x, y: n.y + p.y };
@@ -64,7 +72,10 @@ export function worldGeometry<N, E, G, P>(graph: VisualGraph<N, E, G, P>): Visua
   };
 }
 
-/** Ancestor frames stay fixed during authoring. Preserve untouched coordinates exactly. */
+/**
+ * Convert solved world geometry back to parent-relative coordinates, using
+ * each parent's solved position. Untouched coordinates stay exactly as authored.
+ */
 export function nativeGeometry<N, E, G, P>(
   graph: VisualGraph<N, E, G, P>,
   original: VisualGraph<N, E, G, P>,
@@ -75,30 +86,47 @@ export function nativeGeometry<N, E, G, P>(
   const originalEdges = new Map(original.edges.map((e) => [e.id, e]));
   const worldNodes = new Map(world.nodes.map((n) => [n.id, n]));
   const worldEdges = new Map(world.edges.map((e) => [e.id, e]));
+  const solved = new Map(graph.nodes.map((n) => [n.id, n]));
+  const frame = (id: string): Point => {
+    const parentId = originalNodes.get(id)?.parentId;
+    const parent = parentId == null ? undefined : solved.get(parentId);
+    return parent ? { x: parent.x, y: parent.y } : { x: 0, y: 0 };
+  };
+  const same = (a: Point, b: Point) => a.x === b.x && a.y === b.y;
   return {
     ...graph,
     nodes: graph.nodes.map((n) => {
-      const p = offsets.nodes.get(n.id)!,
+      const p = frame(n.id),
         before = originalNodes.get(n.id)!,
         prior = worldNodes.get(n.id)!;
+      const kept = same(p, offsets.nodes.get(n.id)!);
       return {
         ...n,
-        x: n.x === prior.x ? before.x : n.x - p.x,
-        y: n.y === prior.y ? before.y : n.y - p.y,
+        x: kept && n.x === prior.x ? before.x : n.x - p.x,
+        y: kept && n.y === prior.y ? before.y : n.y - p.y,
       };
     }),
     edges: graph.edges.map((e) => {
-      const p = offsets.edges.get(e.id)!,
+      const old = offsets.edges.get(e.id)!,
         before = originalEdges.get(e.id)!,
         prior = worldEdges.get(e.id)!;
+      const source = originalNodes.get(e.sourceId)!,
+        target = originalNodes.get(e.targetId)!;
+      // Same rule as frames(): sibling edges in legacy space use their parent's frame.
+      const p =
+        (original as VisualGraph & { edgeCoordinateSpace?: string }).edgeCoordinateSpace !==
+          "world" && (source.parentId ?? null) === (target.parentId ?? null)
+          ? frame(source.id)
+          : { x: 0, y: 0 };
+      const kept = same(p, old);
       const points =
-        JSON.stringify(e.points) === JSON.stringify(prior.points)
+        kept && JSON.stringify(e.points) === JSON.stringify(prior.points)
           ? before.points
           : e.points?.map((v) => ({ x: v.x - p.x, y: v.y - p.y }));
       return {
         ...e,
-        x: e.x === prior.x ? before.x : e.x - p.x,
-        y: e.y === prior.y ? before.y : e.y - p.y,
+        x: kept && e.x === prior.x ? before.x : e.x - p.x,
+        y: kept && e.y === prior.y ? before.y : e.y - p.y,
         ...(points === undefined ? {} : { points }),
       };
     }),

package/src/authoring/partial.ts

@@ -92,7 +92,9 @@ export function runPartialLayout<N, E, G, P>(
         throw new LayoutError(`Unknown selected entity: ${id}`, "INVALID_SELECTION");
   }
   const containers = new Set(input.nodes.flatMap((n) => (n.parentId == null ? [] : [n.parentId])));
-  if ([...selectedNodes].some((id) => containers.has(id)))
+  // Only the full-layout constraint phase may move containers: the solver
+  // keeps their children inside and resizes them to fit.
+  if (phase === "selection" && [...selectedNodes].some((id) => containers.has(id)))
     throw new UnsupportedLayoutError(
       "Authoring layout cannot move containers; select leaf nodes or use full layout without geometry constraints",
     );
@@ -288,7 +290,10 @@ export function runPartialLayout<N, E, G, P>(
     geometry === "routes" ? new Set() : selectedEdges,
     context.diagnostics,
   );
-  const moved = graph.nodes.filter((n) => !samePosition(n, byId.get(n.id)!));
+  const moved = graph.nodes.filter((n) => {
+    const before = byId.get(n.id)!;
+    return !samePosition(n, before) || n.width !== before.width || n.height !== before.height;
+  });
   const movedIds = new Set(moved.map((n) => n.id));
   const resultNodes = new Map(graph.nodes.map((n) => [n.id, n]));
   const automatic = new Set<string>();

package/src/authoring/routing.ts

@@ -24,7 +24,10 @@ export function crossesRect(a: Point, b: Point, rect: EntityRect): boolean {
     const min = rect[axis],
       max = min + (axis === "x" ? rect.width : rect.height);
     if (Math.abs(delta) < 1e-10) {
-      if (a[axis] <= min || a[axis] >= max) return false;
+      // Scope transforms can put a boundary point a few ulps inside a
+      // rectangle. Match the existing intersection tolerance for parallel
+      // segments so legal boundary travel is not reported as penetration.
+      if (a[axis] <= min + 1e-10 || a[axis] >= max - 1e-10) return false;
     } else {
       const t1 = (min - a[axis]) / delta,
         t2 = (max - a[axis]) / delta;

package/src/constraints.ts

@@ -85,6 +85,14 @@ export function solveGeometryConstraints<N, E, G, P>(
   const variables = new Map<string, { x: Variable; y: Variable }>();
   const nodes = new Map(graph.nodes.map((n) => [n.id, n]));
   const edges = new Map(graph.edges.map((e) => [e.id, e]));
+  // Movable containers move and resize with their content. Each one keeps its
+  // position most strongly, then its children keep their offsets, then the
+  // children keep their own positions; children always stay inside.
+  const childrenByParent = new Map<string, (typeof graph.nodes)[number][]>();
+  for (const node of graph.nodes)
+    if (node.parentId != null && nodes.has(node.parentId) && movableNodes.has(node.parentId))
+      childrenByParent.set(node.parentId, [...(childrenByParent.get(node.parentId) ?? []), node]);
+  const extents = new Map<string, { right: Variable; bottom: Variable }>();
   function geometry(ref: GeometryReference) {
     const node = "nodeId" in ref;
     const id = node ? ref.nodeId : ref.edgeId;
@@ -95,21 +103,90 @@ export function solveGeometryConstraints<N, E, G, P>(
     if (movable && !variables.has(key)) {
       const pair = { x: new Variable(`${key}.x`), y: new Variable(`${key}.y`) };
       variables.set(key, pair);
-      solver.addConstraint(new Constraint(pair.x, Operator.Eq, rect.x, Strength.weak / 10));
-      solver.addConstraint(new Constraint(pair.y, Operator.Eq, rect.y, Strength.weak / 10));
+      const parentId = node ? nodes.get(id)?.parentId : undefined;
+      const stay =
+        parentId != null && childrenByParent.has(parentId)
+          ? Strength.weak / 100
+          : Strength.weak / 10;
+      solver.addConstraint(new Constraint(pair.x, Operator.Eq, rect.x, stay));
+      solver.addConstraint(new Constraint(pair.y, Operator.Eq, rect.y, stay));
+      if (node && childrenByParent.has(id)) {
+        const extent = {
+          right: new Variable(`${key}.right`),
+          bottom: new Variable(`${key}.bottom`),
+        };
+        extents.set(id, extent);
+        solver.addConstraint(
+          new Constraint(extent.right, Operator.Eq, rect.x + rect.width, Strength.weak / 10),
+        );
+        solver.addConstraint(
+          new Constraint(extent.bottom, Operator.Eq, rect.y + rect.height, Strength.weak / 10),
+        );
+      }
     }
-    return { rect, variables: variables.get(key) };
+    return { rect, variables: variables.get(key), extent: node ? extents.get(id) : undefined };
   }
   function expression(ref: GeometryReference, attribute: GeometryAttribute): Expression {
-    const { rect, variables: pair } = geometry(ref);
+    const { rect, variables: pair, extent: far } = geometry(ref);
     const axis = attribute === "y" || attribute === "centerY" || attribute === "bottom" ? "y" : "x";
+    const start = new Expression(pair?.[axis] ?? rect[axis]);
+    if (far && attribute !== "x" && attribute !== "y") {
+      const end = new Expression(axis === "x" ? far.right : far.bottom);
+      return attribute.startsWith("center") ? start.plus(end).divide(2) : end;
+    }
     const extent = axis === "x" ? rect.width : rect.height;
     const offset = attribute.startsWith("center")
       ? extent / 2
       : attribute === "right" || attribute === "bottom"
         ? extent
         : 0;
-    return new Expression(pair?.[axis] ?? rect[axis], offset);
+    return start.plus(offset);
+  }
+  for (const [parentId, children] of childrenByParent) {
+    const parent = geometry({ nodeId: parentId });
+    const container = parent.rect;
+    // Keep the original padding, header included.
+    const pad = {
+      left: Math.min(...children.map((child) => child.x - container.x)),
+      top: Math.min(...children.map((child) => child.y - container.y)),
+      right: Math.min(
+        ...children.map((child) => container.x + container.width - child.x - child.width),
+      ),
+      bottom: Math.min(
+        ...children.map((child) => container.y + container.height - child.y - child.height),
+      ),
+    };
+    for (const child of children) {
+      const own = geometry({ nodeId: child.id });
+      const x = new Expression(own.variables?.x ?? child.x),
+        y = new Expression(own.variables?.y ?? child.y);
+      const px = new Expression(parent.variables!.x),
+        py = new Expression(parent.variables!.y);
+      solver.addConstraint(
+        new Constraint(x.minus(px), Operator.Eq, child.x - container.x, Strength.weak / 20),
+      );
+      solver.addConstraint(
+        new Constraint(y.minus(py), Operator.Eq, child.y - container.y, Strength.weak / 20),
+      );
+      const right = expression({ nodeId: child.id }, "right"),
+        bottom = expression({ nodeId: child.id }, "bottom");
+      solver.addConstraint(new Constraint(x.minus(px), Operator.Ge, Math.max(0, pad.left)));
+      solver.addConstraint(new Constraint(y.minus(py), Operator.Ge, Math.max(0, pad.top)));
+      solver.addConstraint(
+        new Constraint(
+          new Expression(parent.extent!.right).minus(right),
+          Operator.Ge,
+          Math.max(0, pad.right),
+        ),
+      );
+      solver.addConstraint(
+        new Constraint(
+          new Expression(parent.extent!.bottom).minus(bottom),
+          Operator.Ge,
+          Math.max(0, pad.bottom),
+        ),
+      );
+    }
   }
   const checks: { constraint: LayoutConstraint; expression: Expression; operator: Operator }[] = [];
   const ids = new Set<string>();
@@ -180,6 +257,85 @@ export function solveGeometryConstraints<N, E, G, P>(
     }
   }
   solver.updateVariables();
+  // Overlap is never traded for a constraint. Separate siblings that now
+  // overlap, on the axis that separated them before, until none do; a
+  // required constraint that needs the overlap fails instead.
+  const box = (node: (typeof graph.nodes)[number]) => {
+    const pair = variables.get(JSON.stringify(["node", node.id]));
+    const extent = extents.get(node.id);
+    const x = pair?.x.value() ?? node.x,
+      y = pair?.y.value() ?? node.y;
+    return {
+      x,
+      y,
+      width: extent ? extent.right.value() - x : node.width,
+      height: extent ? extent.bottom.value() - y : node.height,
+    };
+  };
+  const siblingGroups = new Map<string | null, (typeof graph.nodes)[number][]>();
+  for (const node of graph.nodes)
+    siblingGroups.set(node.parentId ?? null, [
+      ...(siblingGroups.get(node.parentId ?? null) ?? []),
+      node,
+    ]);
+  const separated = new Set<string>();
+  for (let round = 0; round < 8; round++) {
+    let added = false;
+    for (const group of siblingGroups.values())
+      for (const [index, first] of group.entries())
+        for (const second of group.slice(index + 1)) {
+          if (!movableNodes.has(first.id) && !movableNodes.has(second.id)) continue;
+          const a = box(first),
+            b = box(second);
+          if (
+            a.x >= b.x + b.width ||
+            b.x >= a.x + a.width ||
+            a.y >= b.y + b.height ||
+            b.y >= a.y + a.height
+          )
+            continue;
+          const key = JSON.stringify([first.id, second.id]);
+          if (separated.has(key)) continue;
+          separated.add(key);
+          // Keep the original order on the axis with the larger original gap.
+          const gapX = Math.max(
+            first.x - second.x - second.width,
+            second.x - first.x - first.width,
+          );
+          const gapY = Math.max(
+            first.y - second.y - second.height,
+            second.y - first.y - first.height,
+          );
+          const axis = gapX >= gapY ? "x" : "y";
+          const firstLeads =
+            axis === "x" ? first.x + first.width <= second.x : first.y + first.height <= second.y;
+          const [lead, trail] = firstLeads ? [first, second] : [second, first];
+          const end = axis === "x" ? "right" : "bottom";
+          const gap = Math.max(0, Math.min(10, Math.max(gapX, gapY)));
+          try {
+            solver.addConstraint(
+              new Constraint(
+                expression({ nodeId: trail.id }, axis).minus(expression({ nodeId: lead.id }, end)),
+                Operator.Ge,
+                gap,
+              ),
+            );
+          } catch {
+            const blocking = constraints.find(
+              (item) => (item.strength ?? "required") === "required",
+            );
+            if (blocking)
+              constraintFailure(blocking, `would make ${first.id} overlap ${second.id}`);
+            throw new LayoutError(
+              `Cannot separate ${first.id} from ${second.id}`,
+              "UNSATISFIED_CONSTRAINT",
+            );
+          }
+          added = true;
+        }
+    if (!added) break;
+    solver.updateVariables();
+  }
   const warned = new Set<string>();
   for (const check of checks) {
     const residual = check.expression.value();
@@ -212,7 +368,19 @@ export function solveGeometryConstraints<N, E, G, P>(
     ...graph,
     nodes: graph.nodes.map((node) => {
       const pair = variables.get(JSON.stringify(["node", node.id]));
-      return pair ? { ...node, x: coordinate(pair.x), y: coordinate(pair.y) } : node;
+      if (!pair) return node;
+      const x = coordinate(pair.x),
+        y = coordinate(pair.y);
+      const extent = extents.get(node.id);
+      return extent
+        ? {
+            ...node,
+            x,
+            y,
+            width: coordinate(extent.right) - x,
+            height: coordinate(extent.bottom) - y,
+          }
+        : { ...node, x, y };
     }),
     edges: graph.edges.map((edge) => {
       const pair = variables.get(JSON.stringify(["label", edge.id]));