@weasel-js/diagram 1.4.3 → 1.5.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { rectPath, polygonFromPoints, PathBuilder, AUTO_POSE_DESCRIPTOR, rotatePoint } from '@weasel-js/core';
+import { AUTO_POSE_DESCRIPTOR, pointAlongPath, translatePoseViaDescriptor, polylineFromPoints, rotatePoint, rectPath, polygonFromPoints, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, PathBuilder, effectivePose, composeAffordanceLayer, createSimulation, usePoseRun, RECT_POSE_DESCRIPTOR, registerNodeShape } from '@weasel-js/core';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 
 // src/outline.ts
 var LEAN = 0.2;
@@ -49,6 +50,136 @@ function stadiumPath(x, y, w, h) {
   const midX = x + w / 2;
   return b.moveTo(right, top).lineTo(right, bottom).curveTo(right, bottom + k, midX + k, y + h, midX, y + h).curveTo(midX - k, y + h, left, bottom + k, left, bottom).lineTo(left, top).curveTo(left, top - k, midX - k, y, midX, y).curveTo(midX + k, y, right, top - k, right, top).close().build();
 }
+function contentBox(outline, bounds) {
+  if (typeof outline !== "string") return bounds;
+  const { x, y, width: w, height: h } = bounds;
+  switch (outline) {
+    case "rect":
+      return bounds;
+    case "diamond":
+      return { x: x + w / 4, y: y + h / 4, width: w / 2, height: h / 2 };
+    case "parallelogram": {
+      const lean = Math.min(w * LEAN, w / 2);
+      return { x: x + lean, y, width: Math.max(w - lean * 2, 0), height: h };
+    }
+    case "stadium": {
+      const r = Math.min(w, h) / 2;
+      return w >= h ? { x: x + r, y, width: Math.max(w - r * 2, 0), height: h } : { x, y: y + r, width: w, height: Math.max(h - r * 2, 0) };
+    }
+  }
+}
+function boxForContent(outline, content) {
+  if (typeof outline !== "string") return content;
+  switch (outline) {
+    case "rect":
+      return content;
+    case "diamond":
+      return { width: content.width * 2, height: content.height * 2 };
+    case "parallelogram":
+      return { width: content.width / (1 - LEAN * 2), height: content.height };
+    case "stadium":
+      return { width: content.width + content.height, height: content.height };
+  }
+}
+var TOLERANCE = 0.25;
+function outlinePolyline(outline, bounds) {
+  const path = outlinePath(outline, bounds);
+  return flattenPath(path);
+}
+function flattenPath(path) {
+  if (path.kind === "rect") {
+    const { x, y, width: w, height: h } = path;
+    return [x, y, x + w, y, x + w, y + h, x, y + h, x, y];
+  }
+  const out = [];
+  const { commands, coords } = path;
+  let ci = 0;
+  let cx = 0;
+  let cy = 0;
+  let sx = 0;
+  let sy = 0;
+  for (const cmd of commands) {
+    if (cmd === PATH_M) {
+      cx = coords[ci];
+      cy = coords[ci + 1];
+      ci += 2;
+      sx = cx;
+      sy = cy;
+      out.push(cx, cy);
+    } else if (cmd === PATH_L) {
+      cx = coords[ci];
+      cy = coords[ci + 1];
+      ci += 2;
+      out.push(cx, cy);
+    } else if (cmd === PATH_C) {
+      const x1 = coords[ci], y1 = coords[ci + 1];
+      const x2 = coords[ci + 2], y2 = coords[ci + 3];
+      const x3 = coords[ci + 4], y3 = coords[ci + 5];
+      ci += 6;
+      flattenCubic(cx, cy, x1, y1, x2, y2, x3, y3, TOLERANCE, out);
+      cx = x3;
+      cy = y3;
+    } else if (cmd === PATH_Q) {
+      const qx = coords[ci], qy = coords[ci + 1];
+      const x3 = coords[ci + 2], y3 = coords[ci + 3];
+      ci += 4;
+      flattenCubic(
+        cx,
+        cy,
+        cx + 2 / 3 * (qx - cx),
+        cy + 2 / 3 * (qy - cy),
+        x3 + 2 / 3 * (qx - x3),
+        y3 + 2 / 3 * (qy - y3),
+        x3,
+        y3,
+        TOLERANCE,
+        out
+      );
+      cx = x3;
+      cy = y3;
+    } else if (cmd === PATH_Z) {
+      out.push(sx, sy);
+      cx = sx;
+      cy = sy;
+    }
+  }
+  if (out.length >= 2 && (out[0] !== out[out.length - 2] || out[1] !== out[out.length - 1])) {
+    out.push(out[0], out[1]);
+  }
+  return out;
+}
+function rayHit(poly, center2, point) {
+  const dx = point.x - center2.x;
+  const dy = point.y - center2.y;
+  if (dx === 0 && dy === 0) return null;
+  let bestT = -Infinity;
+  let hit = null;
+  for (let i = 0; i + 3 < poly.length; i += 2) {
+    const ax = poly[i], ay = poly[i + 1];
+    const bx = poly[i + 2], by = poly[i + 3];
+    const ex = bx - ax;
+    const ey = by - ay;
+    const denom = dx * ey - dy * ex;
+    if (denom === 0) continue;
+    const t = ((ax - center2.x) * ey - (ay - center2.y) * ex) / denom;
+    const u = ((ax - center2.x) * dy - (ay - center2.y) * dx) / denom;
+    if (t < 0 || u < 0 || u > 1) continue;
+    if (t > bestT) {
+      bestT = t;
+      hit = { x: center2.x + dx * t, y: center2.y + dy * t };
+    }
+  }
+  return hit;
+}
+function portsOnOutline(ports, outline, bounds) {
+  if (bounds.width <= 0 || bounds.height <= 0) return [...ports];
+  const poly = outlinePolyline(outline, bounds);
+  const center2 = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  return ports.map((port) => {
+    const hit = rayHit(poly, center2, port.point);
+    return hit === null ? port : { ...port, point: hit };
+  });
+}
 
 // src/trait.ts
 var DIAGRAM_TRAIT_KEY = "diagram";
@@ -56,7 +187,9 @@ var dataKeyReader = (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;
+  if (trait === null || typeof trait !== "object") return null;
+  if ("from" in trait && "to" in trait) return null;
+  return trait;
 };
 function createDiagramNodes(entries) {
   const seen = /* @__PURE__ */ new Set();
@@ -115,11 +248,13 @@ function portsOf(node, pose, opts = {}) {
   const rotation = geometry.getRotation?.(pose) ?? 0;
   const cx = bounds.x + bounds.width / 2;
   const cy = bounds.y + bounds.height / 2;
+  const poly = trait.outline === void 0 || bounds.width <= 0 || bounds.height <= 0 ? null : outlinePolyline(trait.outline, bounds);
   return (trait.ports ?? DEFAULT_PORTS).map((spec) => {
-    const flat = {
+    const anchored = {
       x: bounds.x + spec.at.u * bounds.width,
       y: bounds.y + spec.at.v * bounds.height
     };
+    const flat = (poly === null ? null : rayHit(poly, { x: cx, y: cy }, anchored)) ?? anchored;
     const normal = spec.normal === void 0 ? normalOf(spec.at) : spec.normal;
     if (rotation === 0) {
       return { id: spec.id, nodeId: node.id, point: flat, normal, ...typeOf(spec) };
@@ -184,7 +319,11 @@ function measureBody(spec, measure) {
     width = Math.max(width, m.width);
     height += m.height + (i > 0 ? gap : 0);
   }
-  return { minWidth: width + padding * 2, minHeight: height + padding * 2 };
+  const box = boxForContent(spec.outline, {
+    width: width + padding * 2,
+    height: height + padding * 2
+  });
+  return { minWidth: box.width, minHeight: box.height };
 }
 function sizeToBody(pose, floor) {
   const width = Math.max(pose.width, floor.minWidth);
@@ -195,34 +334,65 @@ function sizeToBody(pose, floor) {
 function layoutBody(spec, bounds, measure) {
   const padding = spec.padding ?? DEFAULT_PADDING;
   const gap = spec.gap ?? DEFAULT_GAP;
-  const width = Math.max(bounds.width - padding * 2, 0);
-  let y = bounds.y + padding;
+  const inner = contentBox(spec.outline, bounds);
+  const width = Math.max(inner.width - padding * 2, 0);
+  let y = inner.y + padding;
   return spec.rows.map((row, index) => {
     const h = measureRow(row, measure).height;
-    const box = { row, index, x: bounds.x + padding, y, width, height: h };
+    const box = { row, index, x: inner.x + padding, y, width, height: h };
     y += h + gap;
     return box;
   });
 }
+function layoutRowPorts(row, box, measure) {
+  const width = (label) => label === void 0 ? 0 : measureRow({ kind: "label", text: label }, measure).width;
+  const slots = Math.max(row.left?.length ?? 0, row.right?.length ?? 0, 1);
+  const slotHeight = box.height / slots;
+  const out = [];
+  const side = (ports, which) => {
+    for (const [index, port] of (ports ?? []).entries()) {
+      const w = width(port.label);
+      out.push({
+        port,
+        side: which,
+        index,
+        x: which === "left" ? box.x : box.x + box.width - w,
+        y: box.y + index * slotHeight,
+        width: w,
+        height: slotHeight
+      });
+    }
+  };
+  side(row.left, "left");
+  side(row.right, "right");
+  return out;
+}
 function bodyTrait(spec, bounds, measure) {
-  const ports = [
+  const outline = spec.outline;
+  const compass = [
     { 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 { ports };
+  if (bounds.height <= 0) return { outline, ports: compass };
+  const rowPorts = [];
+  let hasLeft = false;
+  let hasRight = false;
   for (const box of layoutBody(spec, bounds, measure)) {
     if (box.row.kind !== "ports") continue;
-    const v = (box.y + box.height / 2 - bounds.y) / bounds.height;
-    for (const p of box.row.left ?? []) {
-      ports.push(withType({ id: p.id, at: { u: 0, v } }, p.type));
-    }
-    for (const p of box.row.right ?? []) {
-      ports.push(withType({ id: p.id, at: { u: 1, v } }, p.type));
+    for (const pb of layoutRowPorts(box.row, box, measure)) {
+      if (pb.side === "left") hasLeft = true;
+      else hasRight = true;
+      const v = (pb.y + pb.height / 2 - bounds.y) / bounds.height;
+      rowPorts.push(withType(
+        { id: pb.port.id, at: { u: pb.side === "left" ? 0 : 1, v } },
+        pb.port.type
+      ));
     }
   }
-  return { ports };
+  const kept = compass.filter((p) => !(p.id === "w" && hasLeft) && !(p.id === "e" && hasRight));
+  return { outline, ports: [...kept, ...rowPorts] };
 }
 function withType(spec, type) {
   return type === void 0 ? spec : { ...spec, type };
@@ -230,7 +400,1159 @@ function withType(spec, type) {
 function bodyOutline(spec, bounds) {
   return outlinePath(spec.outline, bounds);
 }
+function buildBody(spec, at, opts) {
+  const pose = sizeToBody(at, measureBody(spec, opts.measure));
+  const specs = [{
+    kind: "container",
+    layer: opts.layer,
+    pose,
+    data: opts.body(bodyTrait(spec, pose, opts.measure), pose),
+    ...opts.id === void 0 ? {} : { id: opts.id }
+  }];
+  const leaf = (box, data) => {
+    specs.push({
+      kind: "leaf",
+      layer: opts.layer,
+      pose: { ...pose, x: box.x, y: box.y, width: box.width, height: box.height },
+      data,
+      pickable: false,
+      ...opts.id === void 0 ? {} : { parent: opts.id }
+    });
+  };
+  const portLabel = opts.portLabel;
+  for (const box of layoutBody(spec, pose, opts.measure)) {
+    const data = opts.row(rowText(box.row), box);
+    if (data !== null) leaf(box, data);
+    if (portLabel === void 0 || box.row.kind !== "ports") continue;
+    for (const pb of layoutRowPorts(box.row, box, opts.measure)) {
+      if (pb.port.label === void 0) continue;
+      const labelData = portLabel(pb.port.label, pb);
+      if (labelData !== null) leaf(pb, labelData);
+    }
+  }
+  return { pose, specs };
+}
+function rowText(row) {
+  if (row.kind === "label") return row.text;
+  if (row.kind === "field") return `${row.label}: ${row.value}`;
+  return "";
+}
+var NAMED = { start: 0, mid: 0.5, end: 1 };
+function diagramLabelOf(node) {
+  const data = node.data;
+  if (data === null || typeof data !== "object") return null;
+  const trait = data.diagram;
+  if (trait === null || typeof trait !== "object") return null;
+  const label = trait.label;
+  if (label === null || typeof label !== "object") return null;
+  return "at" in label ? label : null;
+}
+function labelDerivePose(opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  return (node, deps) => {
+    const label = diagramLabelOf(node);
+    if (label === null) return null;
+    const path = deps[0]?.path ?? null;
+    if (path === null) return null;
+    const t = typeof label.at === "number" ? label.at : NAMED[label.at] ?? 0.5;
+    const station = pointAlongPath(path, t);
+    if (station === null) return null;
+    const offset = label.offset ?? 0;
+    const x = station.point.x + station.tangent.y * offset;
+    const y = station.point.y - station.tangent.x * offset;
+    const bounds = geometry.getBounds(node.pose);
+    return translatePoseViaDescriptor(
+      node.pose,
+      x - (bounds.x + bounds.width / 2),
+      y - (bounds.y + bounds.height / 2),
+      geometry
+    );
+  };
+}
+var DIAGRAM_LABEL = "diagram:label";
+var LABEL_DERIVE_POSE = labelDerivePose();
+
+// src/edge.ts
+var straight = (req) => [req.from.point, ...req.waypoints, req.to.point];
+var orthogonal = (req) => {
+  const stops = [req.from.point, ...req.waypoints, req.to.point];
+  const out = [stops[0]];
+  for (let i = 1; i < stops.length; i++) {
+    const a = out[out.length - 1];
+    const b = stops[i];
+    if (a.x === b.x || a.y === b.y) {
+      out.push(b);
+      continue;
+    }
+    const leaveHorizontal = i === 1 ? isHorizontal(req.from.normal) : out.length > 1 && out[out.length - 2].y === a.y;
+    const arriving = i === stops.length - 1 ? req.to.normal : null;
+    const arriveHorizontal = arriving == null ? !leaveHorizontal : isHorizontal(arriving);
+    if (leaveHorizontal !== arriveHorizontal) {
+      out.push(leaveHorizontal ? { x: b.x, y: a.y } : { x: a.x, y: b.y });
+      out.push(b);
+      continue;
+    }
+    if (leaveHorizontal) {
+      const mid = (a.x + b.x) / 2;
+      out.push({ x: mid, y: a.y }, { x: mid, y: b.y }, b);
+    } else {
+      const mid = (a.y + b.y) / 2;
+      out.push({ x: a.x, y: mid }, { x: b.x, y: mid }, b);
+    }
+  }
+  return out;
+};
+function isHorizontal(normal) {
+  return Math.abs(normal?.x ?? 1) >= Math.abs(normal?.y ?? 0);
+}
+var BEZIER_REACH = 0.4;
+var bezier = (req) => {
+  const stops = [req.from.point, ...req.waypoints, req.to.point];
+  const out = [stops[0]];
+  for (let i = 1; i < stops.length; i++) {
+    const a = stops[i - 1];
+    const b = stops[i];
+    const reach = Math.hypot(b.x - a.x, b.y - a.y) * BEZIER_REACH;
+    const outN = i === 1 ? req.from.normal : null;
+    const inN = i === stops.length - 1 ? req.to.normal : null;
+    const c1 = outN === null || outN === void 0 ? { x: a.x + (b.x - a.x) * BEZIER_REACH, y: a.y + (b.y - a.y) * BEZIER_REACH } : { x: a.x + outN.x * reach, y: a.y + outN.y * reach };
+    const c2 = inN === null || inN === void 0 ? { x: b.x - (b.x - a.x) * BEZIER_REACH, y: b.y - (b.y - a.y) * BEZIER_REACH } : { x: b.x + inN.x * reach, y: b.y + inN.y * reach };
+    for (let s = 1; s <= BEZIER_SAMPLES; s++) {
+      out.push(cubicAt(a, c1, c2, b, s / BEZIER_SAMPLES));
+    }
+  }
+  return out;
+};
+var BEZIER_SAMPLES = 16;
+function cubicAt(p0, p1, p2, p3, t) {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const d = t * t * t;
+  return {
+    x: a * p0.x + b * p1.x + c * p2.x + d * p3.x,
+    y: a * p0.y + b * p1.y + c * p2.y + d * p3.y
+  };
+}
+var ROUTERS = Object.freeze({
+  straight,
+  orthogonal,
+  bezier
+});
+function diagramEdgeOf(node) {
+  const data = node.data;
+  if (data === null || typeof data !== "object") return null;
+  const edge = data.diagram;
+  if (edge === null || typeof edge !== "object") return null;
+  return "from" in edge && "to" in edge ? edge : null;
+}
+function resolveEnd(end, dep, toward, opts, allPorts) {
+  if (end.port !== void 0) {
+    const named = portOf(dep.node, dep.pose, end.port, opts);
+    if (named !== void 0) return named;
+  }
+  let best;
+  let bestScore = -Infinity;
+  for (const port of allPorts(dep)) {
+    const dx = toward.x - port.point.x;
+    const dy = toward.y - port.point.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const facing = port.normal === null ? 0 : (port.normal.x * dx + port.normal.y * dy) / len;
+    const score = facing - len / 1e6;
+    if (score > bestScore) {
+      bestScore = score;
+      best = port;
+    }
+  }
+  return best;
+}
+function edgeDerivePath(opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  const portOpts = { geometry, ...opts.read ? { read: opts.read } : {} };
+  const allPorts = (d) => portsOf(d.node, d.pose, portOpts);
+  const centerOf = (d) => {
+    const b = geometry.getBounds(d.pose);
+    return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  };
+  return (node, deps) => {
+    const edge = diagramEdgeOf(node);
+    if (edge === null) return null;
+    const [fromDep, toDep] = deps;
+    if (fromDep === void 0 || toDep === void 0) return null;
+    const from = resolveEnd(edge.from, fromDep, centerOf(toDep), portOpts, allPorts);
+    const to = resolveEnd(edge.to, toDep, centerOf(fromDep), portOpts, allPorts);
+    if (from === void 0 || to === void 0) return null;
+    const routers = opts.routers ?? ROUTERS;
+    const router = edge.router !== void 0 && routers[edge.router] || straight;
+    const points = router({ from, to, waypoints: edge.waypoints ?? [] });
+    return points.length < 2 ? null : polylineFromPoints(points);
+  };
+}
+var DIAGRAM_EDGE = "diagram:edge";
+var EDGE_DERIVE_PATH = edgeDerivePath();
+function withDiagramRegistry(registry = {}) {
+  return {
+    ...registry,
+    derivePath: {
+      [DIAGRAM_EDGE]: EDGE_DERIVE_PATH,
+      ...registry.derivePath
+    },
+    derivePose: {
+      [DIAGRAM_LABEL]: LABEL_DERIVE_POSE,
+      ...registry.derivePose
+    }
+  };
+}
+
+// src/portAffordance.ts
+var PORT_LAYER_ID = "diagram-ports";
+var PORT_AFFORDANCE_KIND = `layer:${PORT_LAYER_ID}`;
+var DEFAULT_HIT_PX = 8;
+var DEFAULT_SIZE_PX = 7;
+function portScratchOf(hit) {
+  const payload = hit?.payload;
+  return payload !== void 0 && typeof payload.portId === "string" ? payload : null;
+}
+function createPortAffordance(participants, opts = {}) {
+  const {
+    id = PORT_LAYER_ID,
+    hitRadiusPx = DEFAULT_HIT_PX,
+    sizePx = DEFAULT_SIZE_PX,
+    strength = "exclusive"
+  } = opts;
+  const portOpts = {
+    ...opts.geometry ? { geometry: opts.geometry } : {},
+    ...opts.read ? { read: opts.read } : {}
+  };
+  const paint = sizePx <= 0 ? void 0 : {
+    kind: "square",
+    sizePx,
+    ...opts.fill ? { fill: opts.fill } : {},
+    ...opts.stroke ? { stroke: opts.stroke } : {}
+  };
+  return {
+    id,
+    regions(state) {
+      const out = [];
+      for (const { node, pose } of participants()) {
+        if (opts.shows !== void 0 && !opts.shows(node, state)) continue;
+        for (const port of portsOf(node, pose, portOpts)) {
+          out.push({
+            id: `${node.id}:${port.id}`,
+            targetId: null,
+            shape: { kind: "point", x: port.point.x, y: port.point.y, hitRadiusPx },
+            ...paint ? { paint } : {},
+            ...opts.cursor !== void 0 ? { cursor: opts.cursor } : {},
+            strength,
+            claimedKinds: ["pointer"],
+            bind: () => ({
+              initialScratch: {
+                targetId: node.id,
+                nodeId: node.id,
+                portId: port.id,
+                port
+              }
+            })
+          });
+        }
+      }
+      return out;
+    }
+  };
+}
+
+// src/connect.ts
+var CONNECT_ACTION_ID = "diagram.connect";
+var defaultCanConnect = (from, to) => {
+  if (from.nodeId === to.nodeId && from.id === to.id) return false;
+  if (from.type === void 0 || to.type === void 0) return true;
+  return from.type === to.type;
+};
+var DEFAULT_SNAP = 16;
+var DEFAULT_EDGE_STROKE = {
+  paint: { color: "#7ba7c7" },
+  width: 2,
+  markerEnd: "arrow"
+};
+var DEFAULT_ROUTER = "straight";
+function connectBinding(actionId = CONNECT_ACTION_ID) {
+  return {
+    spec: { kind: "drag", target: `affordance:${PORT_AFFORDANCE_KIND}` },
+    actionId
+  };
+}
+var GRAB_PORT_ACTION_ID = "diagram.grabPort";
+function grabPortAction(id = GRAB_PORT_ACTION_ID) {
+  return {
+    id,
+    label: "Grab port",
+    group: "diagram",
+    invoker: { timing: "immediate", run: () => {
+    } },
+    enabled: () => true
+  };
+}
+function grabPortBindings(actionId = GRAB_PORT_ACTION_ID) {
+  return [
+    { spec: { kind: "pointerDown", target: `affordance:${PORT_AFFORDANCE_KIND}` }, actionId },
+    { spec: { kind: "click", target: `affordance:${PORT_AFFORDANCE_KIND}` }, actionId }
+  ];
+}
+function commitEdgeToScene(edge, ctx) {
+  const scene = ctx.deps["scene"];
+  if (scene === void 0) return;
+  const trait = {
+    from: { port: edge.from.id },
+    to: { port: edge.to.id },
+    router: edge.router
+  };
+  const source = scene.get(edge.from.nodeId);
+  scene.add({
+    kind: "leaf",
+    layer: source?.layer ?? scene.layers[0].id,
+    pose: { x: 0, y: 0, width: 0, height: 0 },
+    // An edge runs *from* one node *to* another, and a plain line does not say
+    // so. The arrowhead is an ordinary stroke marker, which is why nothing in
+    // this package draws one.
+    data: { diagram: trait, stroke: DEFAULT_EDGE_STROKE },
+    dependsOn: [edge.from.nodeId, edge.to.nodeId],
+    // Without this the edge re-resolves on every dependency move and paints
+    // nothing. `EDGE_DERIVE_PATH` rather than a fresh `edgeDerivePath()` so the
+    // scene can find its registry key and the edge survives `toJSON`.
+    derivePath: EDGE_DERIVE_PATH
+  });
+}
+function createConnectAction(opts) {
+  const {
+    id = CONNECT_ACTION_ID,
+    canConnect = defaultCanConnect,
+    snapRadius = DEFAULT_SNAP,
+    router: routerKey = DEFAULT_ROUTER,
+    commit = commitEdgeToScene
+  } = opts;
+  const routers = opts.routers ?? ROUTERS;
+  const portOpts = {
+    ...opts.geometry ? { geometry: opts.geometry } : {},
+    ...opts.read ? { read: opts.read } : {}
+  };
+  const route = routers[routerKey] ?? routers["straight"] ?? ROUTERS["straight"];
+  function targetPort(from, at) {
+    let best = null;
+    let bestD2 = snapRadius * snapRadius;
+    for (const { node, pose } of opts.participants()) {
+      for (const port of portsOf(node, pose, portOpts)) {
+        if (!canConnect(from, port)) continue;
+        const d2 = (port.point.x - at.x) ** 2 + (port.point.y - at.y) ** 2;
+        if (d2 <= bestD2) {
+          bestD2 = d2;
+          best = port;
+        }
+      }
+    }
+    return best;
+  }
+  function endAt(from, at) {
+    const port = targetPort(from, at);
+    return {
+      port,
+      end: port ?? { id: "", nodeId: "", point: at, normal: null }
+    };
+  }
+  return {
+    id,
+    label: "Connect",
+    group: "diagram",
+    requires: ["scene"],
+    invoker: {
+      timing: "ongoing",
+      start(ctx) {
+        const pressed = portScratchOf(ctx.drag?.affordance);
+        if (pressed === null) return {};
+        const scratch = {
+          from: pressed.port,
+          current: { x: ctx.world.x, y: ctx.world.y },
+          open: true,
+          deps: ctx.deps
+        };
+        return {
+          kind: "diagram-connect",
+          onMove(moveCtx) {
+            scratch.current = { x: moveCtx.world.x, y: moveCtx.world.y };
+          },
+          overlay() {
+            if (!scratch.open) return null;
+            const { end } = endAt(scratch.from, scratch.current);
+            const points = route({ from: scratch.from, to: end, waypoints: [] });
+            if (points.length < 2) return null;
+            return { kind: "polyline", points, role: "connector" };
+          },
+          onEnd(endCtx, reason) {
+            scratch.open = false;
+            if (reason === "cancel") return;
+            const { port } = endAt(scratch.from, { x: endCtx.world.x, y: endCtx.world.y });
+            if (port === null) return;
+            commit(
+              { from: scratch.from, to: port, router: routerKey },
+              { ...endCtx, deps: scratch.deps }
+            );
+          }
+        };
+      }
+    },
+    enabled: () => true
+  };
+}
+function sceneParticipants(scene) {
+  return function* () {
+    for (const node of scene.renderOrderNodes()) {
+      yield {
+        node,
+        pose: effectivePose(scene, node)
+      };
+    }
+  };
+}
+function portLayer(participants, opts = {}) {
+  return composeAffordanceLayer(
+    opts.id ?? PORT_LAYER_ID,
+    "Diagram ports",
+    [createPortAffordance(participants, opts)]
+  );
+}
+
+// src/contribution.ts
+function createDiagramContribution(opts) {
+  const actionId = opts.id ?? CONNECT_ACTION_ID;
+  return {
+    id: "weasel-diagram",
+    eligibility: { claimed: true },
+    actions: [createConnectAction({ ...opts, id: actionId }), grabPortAction()],
+    bindings: [connectBinding(actionId), ...grabPortBindings()]
+  };
+}
+function diagramPorts(opts) {
+  return {
+    layer: portLayer(opts.participants, opts),
+    contribution: createDiagramContribution(opts)
+  };
+}
+function buildGraph(source, opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  const nodes = [];
+  const byId = /* @__PURE__ */ new Map();
+  const candidates = [];
+  for (const { node, pose } of source()) {
+    if (diagramEdgeOf(node) !== null) {
+      const deps = node.dependsOn;
+      if (Array.isArray(deps) && deps.length === 2) {
+        candidates.push({ id: node.id, from: deps[0], to: deps[1] });
+      }
+      continue;
+    }
+    const trait = diagramNodeOf(node, opts.read);
+    if (trait === null) continue;
+    const entry = {
+      id: node.id,
+      bounds: geometry.getBounds(pose),
+      pinned: trait.pinned === true
+    };
+    nodes.push(entry);
+    byId.set(entry.id, entry);
+  }
+  const edges = candidates.filter((e) => byId.has(e.from) && byId.has(e.to));
+  const out = /* @__PURE__ */ new Map();
+  const into = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    push(out, edge.from, edge);
+    push(into, edge.to, edge);
+  }
+  const NONE = Object.freeze([]);
+  return {
+    nodes,
+    edges,
+    node: (id) => byId.get(id),
+    outgoing: (id) => out.get(id) ?? NONE,
+    incoming: (id) => into.get(id) ?? NONE
+  };
+}
+function push(index, key, edge) {
+  const list = index.get(key);
+  if (list === void 0) index.set(key, [edge]);
+  else list.push(edge);
+}
+
+// src/layout.ts
+var DEFAULT_NODE_GAP = 48;
+var DEFAULT_RANK_GAP = 96;
+var DEFAULT_TOLERANCE = 1e-6;
+function axesFor(direction = "down") {
+  switch (direction) {
+    case "up":
+      return { rank: "y", cross: "x", sign: -1 };
+    case "right":
+      return { rank: "x", cross: "y", sign: 1 };
+    case "left":
+      return { rank: "x", cross: "y", sign: -1 };
+    default:
+      return { rank: "y", cross: "x", sign: 1 };
+  }
+}
+function extent(bounds, axis) {
+  return axis === "x" ? bounds.width : bounds.height;
+}
+function center(bounds, axis) {
+  return axis === "x" ? bounds.x + bounds.width / 2 : bounds.y + bounds.height / 2;
+}
+function pinnedSet(graph, opts = {}) {
+  const pinned = new Set(opts.pin ?? []);
+  for (const node of graph.nodes) {
+    if (node.pinned) pinned.add(node.id);
+  }
+  return pinned;
+}
+function settle(graph, slots, opts = {}) {
+  const axes = axesFor(opts.direction);
+  const pinned = pinnedSet(graph, opts);
+  const tolerance = opts.tolerance ?? DEFAULT_TOLERANCE;
+  const placed = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const slot = slots.get(node.id);
+    if (slot === void 0) continue;
+    const along = axes.sign === 1 ? slot.rank : -(slot.rank + extent(node.bounds, axes.rank));
+    placed.set(
+      node.id,
+      axes.rank === "y" ? { x: slot.cross, y: along } : { x: along, y: slot.cross }
+    );
+  }
+  return translated(graph, placed, pinned, tolerance);
+}
+function translated(graph, placed, pinned, tolerance = DEFAULT_TOLERANCE) {
+  const anchor = anchorDelta(graph, placed, pinned);
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const at = placed.get(node.id);
+    if (at === void 0 || pinned.has(node.id)) continue;
+    const x = at.x + anchor.x;
+    const y = at.y + anchor.y;
+    if (Math.abs(x - node.bounds.x) <= tolerance && Math.abs(y - node.bounds.y) <= tolerance) {
+      continue;
+    }
+    out.set(node.id, { x, y });
+  }
+  return out;
+}
+function anchorDelta(graph, placed, pinned) {
+  for (const node of graph.nodes) {
+    if (!pinned.has(node.id)) continue;
+    const at = placed.get(node.id);
+    if (at !== void 0) return { x: node.bounds.x - at.x, y: node.bounds.y - at.y };
+  }
+  let minCurX = Infinity;
+  let minCurY = Infinity;
+  let minNewX = Infinity;
+  let minNewY = Infinity;
+  for (const node of graph.nodes) {
+    const at = placed.get(node.id);
+    if (at === void 0) continue;
+    minCurX = Math.min(minCurX, node.bounds.x);
+    minCurY = Math.min(minCurY, node.bounds.y);
+    minNewX = Math.min(minNewX, at.x);
+    minNewY = Math.min(minNewY, at.y);
+  }
+  if (!Number.isFinite(minCurX)) return { x: 0, y: 0 };
+  return { x: minCurX - minNewX, y: minCurY - minNewY };
+}
+function packAcross(nodes, axis, gap) {
+  const at = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  for (const node of nodes) {
+    at.set(node.id, cursor);
+    cursor += extent(node.bounds, axis) + gap;
+  }
+  return { at, span: nodes.length === 0 ? 0 : cursor - gap };
+}
+function seededOrder(nodes, axis, indexOf) {
+  return [...nodes].sort((a, b) => {
+    const d = center(a.bounds, axis) - center(b.bounds, axis);
+    return d !== 0 ? d : indexOf(a.id) - indexOf(b.id);
+  });
+}
+function graphOrder(graph) {
+  const index = /* @__PURE__ */ new Map();
+  graph.nodes.forEach((node, i) => index.set(node.id, i));
+  return (id) => index.get(id) ?? Number.MAX_SAFE_INTEGER;
+}
+
+// src/force.ts
+var DEFAULTS = {
+  iterations: 300,
+  linkDistance: 160,
+  linkStrength: 0.35,
+  charge: -3e3,
+  gravity: 0.02,
+  padding: 24
+};
+var GOLDEN = Math.PI * (3 - Math.sqrt(5));
+var NUDGE = 0.5;
+function charge(bodies, strength) {
+  return (alpha) => {
+    for (let i = 0; i < bodies.length; i++) {
+      const a = bodies[i];
+      for (let j = i + 1; j < bodies.length; j++) {
+        const b = bodies[j];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const d2 = dx * dx + dy * dy;
+        if (d2 === 0) continue;
+        const w = strength * alpha / d2;
+        a.vx += dx * w;
+        a.vy += dy * w;
+        b.vx -= dx * w;
+        b.vy -= dy * w;
+      }
+    }
+  };
+}
+function links(bodies, graph, distance, strength) {
+  return (alpha) => {
+    for (const edge of graph.edges) {
+      const a = bodies.get(edge.from);
+      const b = bodies.get(edge.to);
+      if (a === void 0 || b === void 0 || a === b) continue;
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const d = Math.hypot(dx, dy);
+      if (d === 0) continue;
+      const pull = (d - distance) / d * alpha * strength;
+      a.vx += dx * pull;
+      a.vy += dy * pull;
+      b.vx -= dx * pull;
+      b.vy -= dy * pull;
+    }
+  };
+}
+function separateBoxes(bodies, padding) {
+  return () => {
+    for (let i = 0; i < bodies.length; i++) {
+      const a = bodies[i];
+      for (let j = i + 1; j < bodies.length; j++) {
+        const b = bodies[j];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const gapX = a.hw + b.hw + padding - Math.abs(dx);
+        const gapY = a.hh + b.hh + padding - Math.abs(dy);
+        if (gapX <= 0 || gapY <= 0) continue;
+        if (gapX < gapY) {
+          const push2 = (Math.sign(dx) || 1) * gapX * 0.5;
+          a.vx -= push2;
+          b.vx += push2;
+        } else {
+          const push2 = (Math.sign(dy) || 1) * gapY * 0.5;
+          a.vy -= push2;
+          b.vy += push2;
+        }
+      }
+    }
+  };
+}
+function gravity(bodies, at, strength) {
+  return (alpha) => {
+    for (const body of bodies) {
+      body.vx += (at.x - body.x) * strength * alpha;
+      body.vy += (at.y - body.y) * strength * alpha;
+    }
+  };
+}
+function forceRelaxation(graph, opts = {}) {
+  const {
+    linkDistance = DEFAULTS.linkDistance,
+    linkStrength = DEFAULTS.linkStrength,
+    charge: chargeStrength = DEFAULTS.charge,
+    gravity: gravityStrength = DEFAULTS.gravity,
+    padding = DEFAULTS.padding
+  } = opts;
+  const pinned = pinnedSet(graph, opts);
+  const bodies = graph.nodes.map((node) => {
+    const body = {
+      id: node.id,
+      x: center(node.bounds, "x"),
+      y: center(node.bounds, "y"),
+      hw: node.bounds.width / 2,
+      hh: node.bounds.height / 2
+    };
+    if (pinned.has(node.id)) {
+      body.fx = body.x;
+      body.fy = body.y;
+    }
+    return body;
+  });
+  separate(bodies);
+  const byId = new Map(bodies.map((b) => [b.id, b]));
+  const centroid = {
+    x: bodies.reduce((sum, b) => sum + b.x, 0) / bodies.length,
+    y: bodies.reduce((sum, b) => sum + b.y, 0) / bodies.length
+  };
+  const sim = createSimulation({
+    nodes: bodies,
+    forces: [
+      charge(bodies, chargeStrength),
+      links(byId, graph, linkDistance, linkStrength),
+      gravity(bodies, centroid, gravityStrength),
+      separateBoxes(bodies, padding)
+    ]
+  });
+  return {
+    bodies,
+    byId,
+    pinned,
+    sim,
+    placed() {
+      const placed = /* @__PURE__ */ new Map();
+      for (const node of graph.nodes) {
+        const body = byId.get(node.id);
+        placed.set(node.id, {
+          x: body.x - node.bounds.width / 2,
+          y: body.y - node.bounds.height / 2
+        });
+      }
+      return placed;
+    }
+  };
+}
+var force = (graph, opts = {}) => {
+  if (graph.nodes.length === 0) return /* @__PURE__ */ new Map();
+  const relaxation = forceRelaxation(graph, opts);
+  relaxation.sim.tick(opts.iterations ?? DEFAULTS.iterations);
+  return translated(graph, relaxation.placed(), relaxation.pinned, opts.tolerance);
+};
+function separate(bodies) {
+  const seen = /* @__PURE__ */ new Map();
+  bodies.forEach((body, i) => {
+    const key = `${body.x},${body.y}`;
+    const nth = seen.get(key) ?? 0;
+    seen.set(key, nth + 1);
+    if (nth === 0 || body.fx != null || body.fy != null) return;
+    const angle = GOLDEN * i;
+    const radius = NUDGE * nth;
+    body.x += Math.cos(angle) * radius;
+    body.y += Math.sin(angle) * radius;
+  });
+}
+
+// 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 ranks = ranksOf(graph, backEdges(graph));
+  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);
+  const packed = /* @__PURE__ */ new Map();
+  let widest = 0;
+  for (const rank of rows) {
+    const row = seededOrder(byRank.get(rank), axes.cross, order);
+    const p = packAcross(row, axes.cross, nodeGap);
+    packed.set(rank, p);
+    widest = Math.max(widest, p.span);
+  }
+  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)));
+    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
+      });
+    }
+    along += depth + rankGap;
+  }
+  return settle(graph, slots, opts);
+};
+
+// src/tree.ts
+function forestOf(graph, crossAxis) {
+  const order = graphOrder(graph);
+  const children = /* @__PURE__ */ new Map();
+  const depth = /* @__PURE__ */ new Map();
+  const roots = [];
+  const claim = (node, at) => {
+    depth.set(node.id, at);
+    const kids = [];
+    for (const edge of graph.outgoing(node.id)) {
+      if (edge.to === node.id || depth.has(edge.to)) continue;
+      const child = graph.node(edge.to);
+      if (child === void 0) continue;
+      depth.set(child.id, at + 1);
+      kids.push(child);
+    }
+    const ordered = seededOrder(kids, crossAxis, order);
+    children.set(node.id, ordered);
+    for (const child of ordered) claim(child, at + 1);
+  };
+  const rootish = graph.nodes.filter((node) => graph.incoming(node.id).every((edge) => edge.from === node.id));
+  for (const node of seededOrder(rootish, crossAxis, order)) {
+    if (depth.has(node.id)) continue;
+    roots.push(node);
+    claim(node, 0);
+  }
+  for (const node of graph.nodes) {
+    if (depth.has(node.id)) continue;
+    roots.push(node);
+    claim(node, 0);
+  }
+  return { roots, children, depth };
+}
+var tree = (graph, opts = {}) => {
+  const axes = axesFor(opts.direction);
+  const nodeGap = opts.nodeGap ?? DEFAULT_NODE_GAP;
+  const rankGap = opts.rankGap ?? DEFAULT_RANK_GAP;
+  const { roots, children, depth } = forestOf(graph, axes.cross);
+  const bands = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const at = depth.get(node.id) ?? 0;
+    bands.set(at, Math.max(bands.get(at) ?? 0, extent(node.bounds, axes.rank)));
+  }
+  const bandStart = /* @__PURE__ */ new Map();
+  let along = 0;
+  for (const at of [...bands.keys()].sort((a, b) => a - b)) {
+    bandStart.set(at, along);
+    along += bands.get(at) + rankGap;
+  }
+  const slots = /* @__PURE__ */ new Map();
+  const measured = /* @__PURE__ */ new Map();
+  const measure = (node) => {
+    const known = measured.get(node.id);
+    if (known !== void 0) return known;
+    const kids = children.get(node.id) ?? [];
+    let width = 0;
+    for (const child of kids) width += measure(child);
+    if (kids.length > 0) width += nodeGap * (kids.length - 1);
+    const block = Math.max(extent(node.bounds, axes.cross), width);
+    measured.set(node.id, block);
+    return block;
+  };
+  const place = (node, from) => {
+    const kids = children.get(node.id) ?? [];
+    const block = measure(node);
+    const width = kids.reduce((sum, k) => sum + measure(k), 0) + Math.max(0, kids.length - 1) * nodeGap;
+    let cursor2 = from + (block - width) / 2;
+    for (const child of kids) {
+      place(child, cursor2);
+      cursor2 += measure(child) + nodeGap;
+    }
+    const own = extent(node.bounds, axes.cross);
+    const at = depth.get(node.id) ?? 0;
+    slots.set(node.id, {
+      cross: from + (block - own) / 2,
+      rank: bandStart.get(at) + (bands.get(at) - extent(node.bounds, axes.rank)) / 2
+    });
+  };
+  let cursor = 0;
+  for (const root of roots) {
+    place(root, cursor);
+    cursor += measure(root) + nodeGap;
+  }
+  return settle(graph, slots, opts);
+};
+
+// src/layoutAction.ts
+var LAYOUTS = Object.freeze({
+  layered,
+  tree,
+  force
+});
+function applyLayout(scene, result, opts = {}) {
+  const poses = layoutPoses(scene, result, opts.geometry);
+  if (poses.size === 0) return 0;
+  scene.batch(opts.label ?? "Layout", () => {
+    for (const [id, pose] of poses) scene.setPose(id, pose);
+  });
+  let moved = 0;
+  for (const id of result.keys()) if (poses.has(id)) moved++;
+  return moved;
+}
+function layoutPoses(scene, result, geometry = AUTO_POSE_DESCRIPTOR) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, at] of result) {
+    const node = scene.get(id);
+    if (node === void 0) continue;
+    const bounds = geometry.getBounds(node.pose);
+    const dx = at.x - bounds.x;
+    const dy = at.y - bounds.y;
+    if (dx === 0 && dy === 0) continue;
+    out.set(id, translatePoseViaDescriptor(node.pose, dx, dy, geometry));
+    for (const descendant of subtreeOf(scene, id)) {
+      const child = scene.get(descendant);
+      if (child === void 0) continue;
+      out.set(descendant, translatePoseViaDescriptor(child.pose, dx, dy, geometry));
+    }
+  }
+  return out;
+}
+function subtreeOf(scene, id) {
+  const out = [];
+  const stack = [...scene.childrenOf(id)];
+  while (stack.length > 0) {
+    const next = stack.pop();
+    out.push(next);
+    stack.push(...scene.childrenOf(next));
+  }
+  return out;
+}
+var LAYOUT_ACTION_ID = "diagram.layout";
+function createLayoutAction(opts) {
+  const algorithm = typeof opts.algorithm === "function" ? opts.algorithm : LAYOUTS[opts.algorithm ?? "layered"] ?? layered;
+  const build = {
+    ...opts.read ? { read: opts.read } : {},
+    ...opts.geometry ? { geometry: opts.geometry } : {}
+  };
+  return {
+    id: opts.id ?? LAYOUT_ACTION_ID,
+    label: opts.label ?? "Lay out diagram",
+    group: opts.group ?? "diagram",
+    requires: ["scene"],
+    invoker: {
+      timing: "immediate",
+      run: (deps) => {
+        const scene = deps["scene"];
+        if (scene === void 0) return;
+        const graph = buildGraph(opts.source, build);
+        applyLayout(scene, algorithm(graph, opts.layout), {
+          ...opts.geometry ? { geometry: opts.geometry } : {},
+          ...opts.label ? { label: opts.label } : {}
+        });
+      }
+    },
+    enabled: () => true
+  };
+}
+
+// src/live.ts
+var EASE_FRAMES = 24;
+var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+function forceProducer(graph, opts = {}) {
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  const relaxation = forceRelaxation(graph, opts);
+  const dragAlpha = opts.dragAlpha ?? 0.3;
+  return ({ pinned }) => {
+    for (const node of graph.nodes) {
+      const body = relaxation.byId.get(node.id);
+      if (body === void 0) continue;
+      const held = pinned.get(node.id);
+      if (held !== void 0) {
+        const bounds = geometry.getBounds(held);
+        body.fx = center(bounds, "x");
+        body.fy = center(bounds, "y");
+      } else if (!relaxation.pinned.has(node.id)) {
+        delete body.fx;
+        delete body.fy;
+      }
+    }
+    relaxation.sim.alphaTarget(pinned.size > 0 ? dragAlpha : 0);
+    relaxation.sim.tick();
+    return { result: relaxation.placed(), done: relaxation.sim.isSettled() };
+  };
+}
+function easedProducer(graph, algorithm, opts = {}) {
+  const frames = opts.frames ?? EASE_FRAMES;
+  const easing = opts.easing ?? easeInOut;
+  const target = algorithm(graph, opts.layout);
+  const from = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) from.set(node.id, { x: node.bounds.x, y: node.bounds.y });
+  return ({ pinned, frame }) => {
+    const t = Math.min((frame + 1) / frames, 1);
+    const u = easing(t);
+    const result = /* @__PURE__ */ new Map();
+    for (const [id, to] of target) {
+      if (pinned.has(id)) continue;
+      const start = from.get(id);
+      if (start === void 0) continue;
+      result.set(id, {
+        x: start.x + (to.x - start.x) * u,
+        y: start.y + (to.y - start.y) * u
+      });
+    }
+    return { result, done: t >= 1 };
+  };
+}
+function shapeOf(graph) {
+  const nodes = graph.nodes.map((n) => n.id).sort().join(",");
+  const edges = graph.edges.map((e) => `${e.from}>${e.to}`).sort().join(",");
+  return `${nodes}|${edges}`;
+}
+function useLiveLayout(opts) {
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
+  const producer = useRef(null);
+  const producerFrame = useRef(0);
+  const shape = useRef("");
+  const build = useCallback(() => {
+    const o = optsRef.current;
+    const graph = buildGraph(o.source, {
+      ...o.read ? { read: o.read } : {},
+      ...o.geometry ? { geometry: o.geometry } : {}
+    });
+    shape.current = shapeOf(graph);
+    producerFrame.current = 0;
+    const algorithm = o.algorithm ?? "force";
+    if (algorithm === "force") {
+      producer.current = forceProducer(graph, {
+        ...o.layout,
+        ...o.force,
+        ...o.geometry ? { geometry: o.geometry } : {}
+      });
+      return;
+    }
+    const fn = typeof algorithm === "function" ? algorithm : LAYOUTS[algorithm] ?? layered;
+    producer.current = easedProducer(graph, fn, {
+      ...o.layout ? { layout: o.layout } : {},
+      ...o.frames === void 0 ? {} : { frames: o.frames },
+      ...o.easing ? { easing: o.easing } : {}
+    });
+  }, []);
+  const step = useCallback((ctx) => {
+    const o = optsRef.current;
+    if (producer.current === null) return { poses: [], done: true };
+    const { result, done } = producer.current({
+      pinned: ctx.pinned,
+      frame: producerFrame.current++
+    });
+    let placed = result;
+    if (ctx.pinned.size > 0) {
+      const held = new Map(result);
+      for (const id of ctx.pinned.keys()) held.delete(id);
+      placed = held;
+    }
+    const poses = layoutPoses(o.scene, placed, o.geometry);
+    return { poses: [...poses], done };
+  }, []);
+  const run = usePoseRun({
+    scene: opts.scene,
+    step,
+    onCommit: (moved) => optsRef.current.onSettle?.(moved),
+    ...opts.label ? { label: opts.label } : {},
+    ...opts.requestFrame ? { requestFrame: opts.requestFrame } : {},
+    ...opts.cancelFrame ? { cancelFrame: opts.cancelFrame } : {}
+  });
+  useEffect(() => {
+    if (opts.reheatOnGraphChange === false) return;
+    return opts.scene.subscribe(() => {
+      if (!run.isRunning()) return;
+      const o = optsRef.current;
+      const graph = buildGraph(o.source, {
+        ...o.read ? { read: o.read } : {},
+        ...o.geometry ? { geometry: o.geometry } : {}
+      });
+      if (shapeOf(graph) === shape.current) return;
+      build();
+    });
+  }, [opts.scene, opts.reheatOnGraphChange, run, build]);
+  return useMemo(() => ({
+    start() {
+      if (run.isRunning()) return;
+      build();
+      run.start();
+    },
+    stop: () => {
+      run.stop();
+    },
+    cancel: () => {
+      run.cancel();
+    },
+    restart() {
+      run.cancel();
+      build();
+      run.start();
+    },
+    isRunning: () => run.isRunning()
+  }), [run, build]);
+}
+var EASED_LAYOUTS = Object.freeze({
+  layered,
+  tree
+});
+function diagramShape(opts = {}) {
+  const geometry = opts.geometry ?? RECT_POSE_DESCRIPTOR;
+  const outlineOf = (node) => diagramNodeOf(node, opts.read)?.outline;
+  return {
+    id: opts.id ?? "diagram:outline",
+    matches: (node) => outlineOf(node) !== void 0,
+    paint: (node, pose) => {
+      const outline = outlineOf(node);
+      if (outline === void 0) return [];
+      const d = node.data;
+      const fill = d.fill === void 0 ? opts.defaultFill : d.fill;
+      const stroke = d.stroke === void 0 ? opts.defaultStroke : d.stroke;
+      return [{
+        kind: "path",
+        path: outlinePath(outline, geometry.getBounds(pose)),
+        ...fill ? { fill } : {},
+        ...stroke ? { stroke } : {}
+      }];
+    },
+    // The drawn boundary, so picking and clipping follow the diamond rather
+    // than its bounding box.
+    silhouette: (node, pose) => {
+      const outline = outlineOf(node);
+      return outline === void 0 ? null : outlinePath(outline, geometry.getBounds(pose));
+    }
+  };
+}
+function registerDiagramShape(opts = {}) {
+  return registerNodeShape(diagramShape(opts), { priority: "high" });
+}
 
-export { COMPASS, DEFAULT_PORTS, DIAGRAM_TRAIT_KEY, bodyOutline, bodyTrait, canvasMeasure, createDiagramNodes, dataKeyReader, diagramNodeOf, isPinned, layoutBody, measureBody, outlinePath, portOf, portsOf, sizeToBody };
+export { COMPASS, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_EDGE, DIAGRAM_LABEL, DIAGRAM_TRAIT_KEY, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, applyLayout, axesFor, backEdges, bezier, bodyOutline, bodyTrait, boxForContent, buildBody, buildGraph, canvasMeasure, commitEdgeToScene, connectBinding, contentBox, createConnectAction, createDiagramContribution, createDiagramNodes, createLayoutAction, createPortAffordance, dataKeyReader, defaultCanConnect, diagramEdgeOf, diagramLabelOf, diagramNodeOf, diagramPorts, diagramShape, easedProducer, edgeDerivePath, force, forceProducer, forceRelaxation, forestOf, grabPortAction, grabPortBindings, graphOrder, isPinned, labelDerivePose, layered, layoutBody, layoutPoses, layoutRowPorts, measureBody, orthogonal, outlinePath, outlinePolyline, packAcross, pinnedSet, portLayer, portOf, portScratchOf, portsOf, portsOnOutline, ranksOf, rayHit, registerDiagramShape, resolveEnd, sceneParticipants, seededOrder, settle, sizeToBody, straight, translated, tree, useLiveLayout, withDiagramRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map