@weasel-js/diagram 1.10.1 → 1.11.1

package/dist/index.js

@@ -1,1436 +1,1058 @@
-import { layered, insetOf, portsOf, portOf, outlinePath, diagramNodeOf, expandGroupEdges, forceRelaxation, center, force, tree, DIAGRAM_TRAIT_KEY, axesFor, ranksOf, backEdges, DEFAULT_GROUP_INSET, sizeToBody, measureBody, buildBody, DEFAULT_NODE_GAP } from './chunk-JZ4CVLAB.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, untilSettled } from './chunk-JZ4CVLAB.js';
-import { dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, reconcileSpecs, SceneCanvas, fitViewToBounds, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, pointAlongPath, polylineFromPoints, registerNodeShape, effectivePose, usePoseRun, RECT_POSE_DESCRIPTOR, commandFill, commandStroke, 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 '@weasel-js/animator';
-import { jsx } from 'react/jsx-runtime';
+import './chunk-WDIE35AK.js';
+import { createConnectAction, avoidSceneInput, sceneEdges, inOrUnder, withHopsData, edgePolylines, themeWrites, hopDataOps, diagramDropParentAt, containerBuild } from './chunk-CI3I3I6T.js';
+export { ADD_LANE_ACTION_ID, CONNECT_ACTION_ID, CONTAINER_STENCILS, DEFAULT_EDGE_STROKE, DiagramView, EASED_LAYOUTS, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, LANE_AFFORDANCE_KIND, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, MOVE_LABEL_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, addLane, applyLayout, avoidSceneInput, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, containerBuild, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, defaultCanConnect, diagramCanDropInto, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramPorts, diagramResizable, diagramShape, diagramWaypoints, dragSegment, dragVertex, easedProducer, edgeEndLayer, edgeEndScratchOf, editContainerTitleAction, editContainerTitleBinding, forceProducer, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, insertWaypoint, isBodyEnd, laneLayer, laneResizeFrame, laneScratchOf, lanesOf, layoutPoses, movedLabelData, pinSegment, poolAxisOf, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, registerDiagramShape, releaseMembers, removeSegment, removeWaypoint, reorderBinding, reorderContribution, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneParticipants, segmentAxis, sequenceSlots, themeWrites, unpinSegment, useLiveLayout, useMirroredSelection, waypointLayer, waypointScratchOf, withRouter } from './chunk-CI3I3I6T.js';
+import { createAvoidRouter, HOPS_DOC_KEY, edgeHops, placeLabels } from './chunk-T6DQT553.js';
+export { AVOID_DEFAULTS, DEFAULT_HOP_SIZE, HOPS_DOC_KEY, createAvoidRouter, edgeHops, placeLabels, simplifyStops } from './chunk-T6DQT553.js';
+import { NODE, NODE_STROKE_WIDTH, rowTextStyle, DEFAULT_FONT, bodyLayoutOf, offPageTagLook, diagramThemeOf, offPageSplits, offPageTagOf, DIAGRAM_THEMES, DIAGRAM_THEME_KEY, themeDocValue, DIAGRAM_ROLES, diagramLabelOf, diagramContainerOf, diagramGroupOf, offPageTagId, offPageFarText, offPageTagSpec, offPageTagData, offPageTagSize, relayoutBodies, labelSize, labelStyleOf } from './chunk-43LDZ6L4.js';
+export { ANCHOR_DERIVE_POSE, CONTAINER_HEADER, CONTAINER_LAYOUTS, DEFAULT_LANE_SIZE, DEFAULT_POOL_ACROSS, DIAGRAM_ANCHOR, DIAGRAM_CONTAINER_LAYOUT, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DIAGRAM_LANE_COLUMNS_LAYOUT, DIAGRAM_LANE_ROWS_LAYOUT, DIAGRAM_OFF_PAGE_TAG, DIAGRAM_POOL_COLUMNS_LAYOUT, DIAGRAM_POOL_ROWS_LAYOUT, DIAGRAM_ROLES, DIAGRAM_THEMES, DIAGRAM_THEME_KEY, EDGE_DERIVE_PATH, EDGE_STROKE_WIDTH, EDIT_EDGE_LABEL_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LABEL_DRAG_AFFORDANCE_KIND, LABEL_DRAG_LAYER_ID, LABEL_PLACEMENT, LANE_HEADER_SIZE, LANE_STROKE_WIDTH, MIN_LANE_SIZE, NODE_STROKE_WIDTH, OFF_PAGE_STUB, OFF_PAGE_TAG_DERIVE_POSE, OFF_PAGE_TAG_PADDING, POOL_HEADER_SIZE, ROUTERS, anchorDerivePose, avoid, bezier, bodyBox, boxAround, buildGraph, containerShape, dataEdgeStyle, dataNodeStyle, dataOffPage, dataRegionStyle, diagramAnchorOf, diagramContainerLayout, diagramContainerOf, diagramGroupOf, diagramLabelOf, diagramMarkOf, diagramPages, diagramScene, diagramThemeFrom, diagramThemeOf, draggableLabels, dropEmptyEdgeLabel, edgeDerivePath, edgeIdOf, edgeLabelSpec, edgeRouter, editEdgeLabelAction, editEdgeLabelBinding, firstLanes, groupDerivePose, headerBox, labelDerivePose, labelDragLayer, labelScratchOf, labelSize, labelUnder, laneHeader, laneStackLayout, markShape, nextOffPageRef, offPageFarText, offPageSplits, offPageTagData, offPageTagDerivePose, offPageTagId, offPageTagLook, offPageTagOf, offPageTagSize, offPageTagSpec, offPageTagSpecs, offPageTagText, orthogonal, poolHeader, regionSpecs, registerMarkShape, relayoutBodies, resolveEnd, roleEdgeStyle, roleStyle, rowTextStyle, selfLoop, stackedLanes, straight, themeDocValue, themeEdgeStroke, themeFont, themeLabelFont, themeLabelStyle, titleIdOf, titlePose, withDiagramRegistry, withHops } from './chunk-43LDZ6L4.js';
+import { buildBody, diagramEdgeOf, samePoints, diagramNodeOf, labelCenter } from './chunk-IM6DHWZO.js';
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, PORT_LABEL_GAP, anchorOffset, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, chain, contentBox, createDiagramNodes, dataKeyReader, diagramEdgeOf, diagramNodeOf, expandGroupEdges, footprintNode, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, labelCenter, layered, layeredPlan, layeredRoutes, layoutBody, layoutOwnsPort, layoutOwnsRoute, layoutRowPorts, layoutWritesRoute, marginOf, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, planOf, plannerPlan, portLabelBox, portLabelsOf, portOf, portSitesOf, portsOf, portsOnOutline, rankGaps, ranksByLength, ranksOf, rayHit, routeHolds, seededOrder, settle, sizeToBody, subpathOf, translated, tree, untilSettled } from './chunk-IM6DHWZO.js';
+import { useMemo, useRef, useEffect } from 'react';
+import { bodyPredicate, AUTO_POSE_DESCRIPTOR, defineTool, createInsertOp, INSERT_REPOSITION_BINDING, useDepRegistry, useLatest, useDepSource, commitOps, createSetDataOp, useOptionalDepRegistry, useTransformFollower, documentPose, placedPagesOf, PAGES_DOC_KEY, ActionDisabledReason, measureTextBounds, writtenBy, documentDepOf, createDeleteOp, createTransformOp, fitViewToPage, parseColor } from '@weasel-js/core';
+import { PATH_M } from '@weasel-js/core/math';
 
-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;
+var CONNECTOR_TOOL_ID = "diagram.connector";
+var CONNECTOR_ACTION_ID = "diagram.connectorDraw";
+function connectorTool(opts) {
+  return defineTool({
+    id: CONNECTOR_TOOL_ID,
+    hookName: "useConnectorTool",
+    cursor: "crosshair",
+    presentation: { label: "Connector", icon: (
+      /* @icon */
+      "core:arrow"
+    ), group: "draw" },
+    actions: [createConnectAction({ ...opts, id: CONNECTOR_ACTION_ID, startFrom: "body", bodies: true })],
+    bindings: [{ spec: { kind: "drag" }, actionId: CONNECTOR_ACTION_ID }]
+  });
 }
-function diagramGroupOf(node) {
-  const group = traitOf(node)?.group;
-  return group !== null && typeof group === "object" ? group : null;
+function useConnectorTool(opts) {
+  const { participants, read: read2, geometry, canConnect, showsPort, snapRadius, router, routers, commit, edgeStroke } = opts;
+  return useMemo(
+    () => connectorTool(opts),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `opts` is the fields listed
+    [participants, read2, geometry, canConnect, showsPort, snapRadius, router, routers, commit, edgeStroke]
+  );
 }
-function diagramAnchorOf(node) {
-  const anchor = traitOf(node)?.anchor;
-  return anchor !== null && typeof anchor === "object" && "at" in anchor ? anchor : null;
+var FLOWCHART_STENCILS = [
+  { id: "process", label: "Process", outline: "rect", size: { width: 120, height: 60 }, icon: (
+    /* @icon */
+    "shape:rectangle"
+  ) },
+  { id: "decision", label: "Decision", outline: "diamond", size: { width: 120, height: 80 }, icon: (
+    /* @icon */
+    "shape:diamond"
+  ) },
+  { id: "terminal", label: "Terminal", outline: "stadium", size: { width: 120, height: 50 }, icon: (
+    /* @icon */
+    "shape:stadium"
+  ) },
+  { id: "data", label: "Data", outline: "parallelogram", size: { width: 130, height: 60 }, icon: (
+    /* @icon */
+    "shape:parallelogram"
+  ) },
+  { id: "manual", label: "Manual", outline: "trapezoid", size: { width: 130, height: 60 }, icon: (
+    /* @icon */
+    "shape:trapezoidSide"
+  ) },
+  { id: "preparation", label: "Preparation", outline: "hexagon", size: { width: 130, height: 60 }, icon: (
+    /* @icon */
+    "shape:hexagonFlat"
+  ) },
+  { id: "connector", label: "Connector", outline: "ellipse", size: { width: 50, height: 50 }, icon: (
+    /* @icon */
+    "shape:circle"
+  ) }
+];
+var stencilKind = (id) => `stencil:${id}`;
+function stencilIdOf(kind) {
+  return kind.startsWith("stencil:") ? kind.slice("stencil:".length) : 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);
+var DEFAULT_ROWS = [{ kind: "label", text: "" }];
+function placedBounds(stencil, b) {
+  if (b.width > 0 && b.height > 0) return b;
+  const { width, height } = stencil.size;
+  return { x: b.x + b.width / 2 - width / 2, y: b.y + b.height / 2 - height / 2, width, height };
+}
+function stencilBuild(stencil, bounds, opts) {
+  const id = opts.newId();
+  const style = opts.style ?? NODE;
+  const at = placedBounds(stencil, bounds);
+  const spec = { outline: stencil.outline, rows: stencil.rows ?? DEFAULT_ROWS };
+  const built = buildBody(
+    spec,
+    at,
+    {
+      id,
+      layer: opts.layer,
+      ...opts.measure ? { measure: opts.measure } : {},
+      body: (trait) => ({
+        diagram: { ...trait, ...bodyLayoutOf(spec, trait) },
+        fill: { paint: { color: style.fill } },
+        stroke: { paint: { color: style.stroke }, width: style.strokeWidth ?? NODE_STROKE_WIDTH, ...style.dash ? { dash: style.dash } : {} }
+      }),
+      row: (text, box) => box.row.kind === "label" || box.row.kind === "field" ? {
+        text,
+        style: rowTextStyle(box.row, opts.font ?? DEFAULT_FONT),
+        fill: { paint: { color: style.text } },
+        bodyRow: box.index
+      } : null
     }
-    if (!Number.isFinite(x0)) return null;
-    return geometry.fromBounds(boxAround({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }, group), node.pose);
-  };
+  );
+  const ops = built.specs.map((spec2, k) => createInsertOp({
+    node: { ...spec2, id: spec2.id ?? `${id}/${k}`, parent: spec2.parent ?? opts.parent ?? null },
+    label: `Insert ${stencil.label}`
+  }));
+  return { id, ops };
 }
-function boxAround(union, group) {
-  const inset = insetOf(group.inset);
-  const width = union.width + inset.left + inset.right;
-  const grow = Math.max(0, (group.minWidth ?? 0) - width);
-  return {
-    x: union.x - inset.left - grow / 2,
-    y: union.y - inset.top,
-    width: width + grow,
-    height: union.height + inset.top + inset.bottom
-  };
+function stencilTool(stencil) {
+  return defineTool({
+    id: stencilKind(stencil.id),
+    hookName: "useStencilTool",
+    capabilities: ["creates-shapes"],
+    cursor: "crosshair",
+    presentation: { label: stencil.label, icon: stencil.icon, group: "stencil" },
+    bindings: [
+      { spec: { kind: "drag" }, actionId: "insert", opts: { params: { kind: stencilKind(stencil.id) } } },
+      INSERT_REPOSITION_BINDING
+    ]
+  });
 }
-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);
-  };
+function useStencilTool(stencil) {
+  return useMemo(() => stencilTool(stencil), [stencil]);
 }
-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;
-  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 useStencilInsert(stencils, opts = {}) {
+  const registry = useDepRegistry();
+  const stencilsRef = useLatest(stencils);
+  const optsRef = useLatest(opts);
+  useDepSource("insert", (below) => {
+    const scene = registry.get("scene");
+    const fallback = below();
+    const layer = () => optsRef.current.layer ?? fallback?.layer?.() ?? scene?.layers[0]?.id ?? "default";
+    const stencilOf = (kind) => {
+      const id = stencilIdOf(kind);
+      if (id === null) return void 0;
+      return stencilsRef.current.find((s) => s.id === id) ?? optsRef.current.containers?.find((s) => s.id === id);
+    };
+    const builtAt = (stencil, bounds) => {
+      if (scene === void 0) return null;
+      const center = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+      const role = "role" in stencil ? stencil.role : null;
+      const { style, measure, font, containerStyle, laneStyles } = optsRef.current;
+      const common = {
+        layer: layer(),
+        newId: () => scene.mintId(),
+        parent: diagramDropParentAt(scene, center, role)
+      };
+      if ("role" in stencil) {
+        const boxStyle = containerStyle ?? style;
+        return containerBuild(stencil, bounds, {
+          ...common,
+          ...boxStyle ? { style: boxStyle } : {},
+          ...laneStyles ? { laneStyles } : {}
+        });
+      }
+      return stencilBuild(stencil, bounds, {
+        ...common,
+        ...style ? { style } : {},
+        ...measure ? { measure } : {},
+        ...font ? { font } : {}
+      });
+    };
+    const build = (bounds, extras, ends) => {
+      const stencil = stencilOf(extras.kind);
+      if (stencil === void 0) return fallback?.build?.(bounds, extras, ends) ?? null;
+      const built = builtAt(stencil, bounds);
+      return built === null ? null : { id: built.id, ops: built.ops };
+    };
+    return {
+      layer,
+      build,
+      commit(bounds, extras, ends) {
+        const stencil = stencilOf(extras.kind);
+        if (stencil === void 0) return fallback?.commit(bounds, extras, ends) ?? null;
+        const built = build(bounds, extras, ends);
+        if (built === null) return null;
+        const deps = { scene, applyOps: registry.get("applyOps"), selection: registry.get("selection") };
+        commitOps(deps, built.ops, `Insert ${stencil.label}`);
+        return built.id;
+      }
+    };
+  });
 }
-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 bounds = geometry.getBounds(node.pose);
-    const nx = station.tangent.y;
-    const ny = -station.tangent.x;
-    const offset = label.offset ?? 0;
-    const reach = offset + Math.sign(offset) * (Math.abs(nx) * bounds.width + Math.abs(ny) * bounds.height) / 2;
-    const x = station.point.x + nx * reach;
-    const y = station.point.y + ny * reach;
-    return translatePoseViaDescriptor(
-      node.pose,
-      x - (bounds.x + bounds.width / 2),
-      y - (bounds.y + bounds.height / 2),
-      geometry
-    );
-  };
+var EPS = 1e-6;
+function offsetOf(geometry, before, after) {
+  const a = geometry.getBounds(before);
+  const b = geometry.getBounds(after);
+  return { x: b.x - a.x, y: b.y - a.y };
 }
-var DIAGRAM_LABEL = "diagram:label";
-var LABEL_DERIVE_POSE = labelDerivePose();
-
-// src/selfLoop.ts
-var dot = (a, b) => a.x * b.x + a.y * b.y;
-function selfLoop(ports, standoff) {
-  const facing = ports.filter((p) => p.normal !== null);
-  const most = (dir, among) => among.reduce(
-    (best, p) => best === void 0 || dot(p.normal, dir) > dot(best.normal, dir) ? p : best,
-    void 0
-  );
-  const from = most({ x: 1, y: 0 }, facing);
-  if (from === void 0) return null;
-  const to = most({ x: 0, y: -1 }, facing.filter((p) => Math.abs(dot(p.normal, from.normal)) < 0.5));
-  if (to === void 0) return null;
-  const out = { x: from.point.x + from.normal.x * standoff, y: from.point.y + from.normal.y * standoff };
-  const reach = dot({ x: to.point.x - out.x, y: to.point.y - out.y }, to.normal) + standoff;
-  return { from, to, via: { x: out.x + to.normal.x * reach, y: out.y + to.normal.y * reach } };
+function carried(edge, d) {
+  const move = (points) => points.map((p) => ({ x: p.x + d.x, y: p.y + d.y }));
+  const waypoints = move(edge.waypoints ?? []);
+  const owned = edge.laidOut !== void 0 && samePoints(edge.waypoints ?? [], edge.laidOut);
+  return { ...edge, waypoints, ...owned ? { laidOut: waypoints } : {} };
 }
-
-// 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;
-    }
-    const prev = out.length > 1 ? out[out.length - 2] : null;
-    if (leaveHorizontal) {
-      const mid = (a.x + b.x) / 2;
-      if (prev !== null && (mid - a.x) * (a.x - prev.x) < 0) out.push({ x: a.x, y: b.y }, b);
-      else out.push({ x: mid, y: a.y }, { x: mid, y: b.y }, b);
-    } else {
-      const mid = (a.y + b.y) / 2;
-      if (prev !== null && (mid - a.y) * (a.y - prev.y) < 0) out.push({ x: b.x, y: a.y }, b);
-      else 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 = (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 outN = i === 1 ? req.from.normal : through(stops, i - 1);
-    const inN = i === stops.length - 1 ? req.to.normal : negated(through(stops, i));
-    const leg = portCurvePoints(
-      a.x,
-      a.y,
-      b.x,
-      b.y,
-      outN == null ? null : [outN.x, outN.y],
-      inN == null ? null : [inN.x, inN.y],
-      BEZIER_SAMPLES
-    );
-    for (const [x, y] of leg) out.push({ x, y });
+function followers(sc, geometry, frame) {
+  const out = [];
+  for (const node of sc.renderOrderNodes()) {
+    const edge = diagramEdgeOf(node);
+    const ends = node.dependsOn;
+    if (edge === null || (edge.waypoints ?? []).length === 0 || !Array.isArray(ends) || ends.length !== 2) continue;
+    const [from, to] = ends.map((id) => sc.get(id));
+    const fromAfter = frame.get(ends[0]);
+    const toAfter = frame.get(ends[1]);
+    if (from === void 0 || to === void 0 || fromAfter === void 0 || toAfter === void 0) continue;
+    const d = offsetOf(geometry, from.pose, fromAfter);
+    const e = offsetOf(geometry, to.pose, toAfter);
+    if (Math.abs(d.x - e.x) > EPS || Math.abs(d.y - e.y) > EPS || d.x === 0 && d.y === 0) continue;
+    const data = node.data;
+    out.push({ id: node.id, pose: node.pose, data: { ...data, diagram: carried(edge, d) } });
   }
   return out;
-};
-var BEZIER_SAMPLES = 16;
-function through(stops, i) {
-  const dx = stops[i + 1].x - stops[i - 1].x;
-  const dy = stops[i + 1].y - stops[i - 1].y;
-  const len = Math.hypot(dx, dy);
-  return len === 0 ? null : { x: dx / len, y: dy / len };
-}
-var negated = (v) => v === null ? null : { x: -v.x, y: -v.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 };
-  };
-  const standoffOf = (d) => {
-    const b = geometry.getBounds(d.pose);
-    return Math.min(b.width, 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 loop = fromDep.node.id === toDep.node.id && edge.from.port === void 0 && edge.to.port === void 0 ? selfLoop(allPorts(fromDep), opts.selfLoopStandoff ?? standoffOf(fromDep)) : null;
-    const from = loop?.from ?? resolveEnd(edge.from, fromDep, centerOf(toDep), portOpts, allPorts);
-    const to = loop?.to ?? resolveEnd(edge.to, toDep, centerOf(fromDep), portOpts, allPorts);
-    if (from === void 0 || to === void 0) return null;
-    const authored = edge.waypoints ?? [];
-    const waypoints = loop !== null && authored.length === 0 ? [loop.via] : authored;
-    const routers = opts.routers ?? ROUTERS;
-    const router = edge.router !== void 0 && routers[edge.router] || straight;
-    const points = router({ from, to, waypoints });
-    return points.length < 2 ? null : polylineFromPoints(points);
-  };
+function posesMovedBy(sc, ops) {
+  const written = writtenBy(sc, ops);
+  if (written === null) return null;
+  const moved = /* @__PURE__ */ new Map();
+  for (const [id, w] of written) if (w.pose !== sc.get(id)?.pose) moved.set(id, w.pose);
+  return moved;
 }
-var DIAGRAM_EDGE = "diagram:edge";
-var EDGE_DERIVE_PATH = edgeDerivePath();
-function withDiagramRegistry(registry = {}) {
+function waypointFollower(scene, geometry = AUTO_POSE_DESCRIPTOR) {
+  const sc = scene;
+  const geo = geometry;
   return {
-    ...registry,
-    derivePath: {
-      [DIAGRAM_EDGE]: EDGE_DERIVE_PATH,
-      ...registry.derivePath
-    },
-    derivePose: {
-      [DIAGRAM_LABEL]: LABEL_DERIVE_POSE,
-      [DIAGRAM_GROUP]: GROUP_DERIVE_POSE,
-      [DIAGRAM_ANCHOR]: ANCHOR_DERIVE_POSE,
-      ...registry.derivePose
+    preview: (frame) => frame.size < 2 ? [] : followers(sc, geo, frame),
+    finish(ops, label) {
+      const moved = posesMovedBy(sc, ops);
+      if (moved === null || moved.size < 2) return [...ops];
+      const changes = followers(sc, geo, moved).map((c) => createSetDataOp({
+        id: c.id,
+        from: sc.get(c.id).data,
+        to: c.data,
+        label
+      }));
+      return [...ops, ...changes];
     }
   };
 }
 
-// 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/passOrder.ts
+var DIAGRAM_PASS_ORDER = { offPage: 100, avoid: 200, labels: 300, hops: 400 };
 
-// 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
-  };
+// src/avoid/install.ts
+function withRoute(data, edge, route) {
+  const { route: _r, ...rest } = edge;
+  return { ...data, diagram: route === null ? rest : { ...rest, route } };
 }
-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 routeDataOps(scene, routes) {
+  const ops = [];
+  for (const [id, route] of routes) {
+    const node = scene.get(id);
+    const edge = node === void 0 ? null : diagramEdgeOf(node);
+    if (node === void 0 || edge === null) continue;
+    const had = edge.route;
+    if (route === null ? had === void 0 : had !== void 0 && samePoints(had, route)) continue;
+    ops.push(createSetDataOp({ id, from: node.data, to: withRoute(node.data, edge, route), label: "Route" }));
+  }
+  return ops;
 }
-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 }
-  ];
+var touched = (s) => s.added.size + s.removed.size + s.posed.size + s.reparented.size + s.dataChanged.size > 0;
+function offsetOf2(geometry, before, after) {
+  const a = geometry.getBounds(before);
+  const b = geometry.getBounds(after);
+  return { x: b.x - a.x, y: b.y - a.y };
 }
-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 },
-    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 carried2(data, input) {
+  const edges = input.edges.map((e) => {
+    const shown = data.get(e.id);
+    const waypoints = shown === void 0 ? void 0 : diagramEdgeOf({ data: shown })?.waypoints;
+    return waypoints === void 0 ? e : { ...e, waypoints };
   });
+  return { obstacles: input.obstacles, edges };
 }
-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;
-        }
-      }
+function avoidFollower(scene, router, opts) {
+  const sc = scene;
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  let last = null;
+  const still = (frame) => {
+    if (last === null || last.frame.size !== frame.size) return false;
+    const px = opts.pixelSize?.() ?? 1;
+    for (const [id, pose] of frame) {
+      const was = last.frame.get(id);
+      if (was === void 0) return false;
+      const d = offsetOf2(geometry, was, pose);
+      if (Math.abs(d.x) >= px || Math.abs(d.y) >= px) return false;
     }
-    return best;
-  }
-  function endAt(from, at) {
-    const port = targetPort(from, at);
-    return {
-      port,
-      end: port ?? { id: "", nodeId: "", point: at, normal: null }
-    };
-  }
+    return true;
+  };
   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 }
-            );
-          }
-        };
+    preview(frame, data) {
+      if (frame.size === 0) return [];
+      if (still(frame)) return last.out;
+      const input = carried2(data, avoidSceneInput(scene, opts, (id) => frame.get(id)));
+      const routes = router.update(input, { preview: true, budgetMs: opts.frameBudgetMs ?? 4 });
+      const out = [];
+      for (const [id, route] of routes) {
+        const node = sc.get(id);
+        const shown = data.get(id) ?? node?.data;
+        const edge = node === void 0 ? null : diagramEdgeOf({ data: shown });
+        if (node === void 0 || edge === null) continue;
+        out.push({ id, pose: node.pose, data: withRoute(shown, edge, route) });
       }
+      last = { frame, out };
+      return out;
     },
-    enabled: () => true
+    finish: (ops) => [...ops]
   };
 }
-function sceneParticipants(scene) {
-  return function* () {
-    for (const node of scene.renderOrderNodes()) {
-      yield {
-        node,
-        pose: effectivePose(scene, node)
-      };
-    }
-  };
+function installAvoidRouting(scene, opts = {}) {
+  const sc = scene;
+  const router = createAvoidRouter(opts);
+  router.seed(avoidSceneInput(scene, opts));
+  const dispose = scene.addEditPass((summary) => {
+    if (!touched(summary)) return null;
+    const ops = routeDataOps(sc, router.update(avoidSceneInput(scene, opts)));
+    return ops.length === 0 ? null : ops;
+  }, { order: DIAGRAM_PASS_ORDER.avoid });
+  return { router, follower: avoidFollower(scene, router, opts), dispose };
 }
-function portLayer(participants, opts = {}) {
-  return composeAffordanceLayer(
-    opts.id ?? PORT_LAYER_ID,
-    "Diagram ports",
-    [createPortAffordance(participants, opts)]
-  );
+function useAvoidRouting(scene, opts = {}) {
+  const deps = useOptionalDepRegistry();
+  const latest = useLatest(opts);
+  const follower = useRef(null);
+  useEffect(() => {
+    const pixelSize = () => latest.current.pixelSize?.() ?? 1 / Math.abs(deps?.get("view")?.get().scale.x || 1);
+    const routing = installAvoidRouting(scene, { ...latest.current, pixelSize });
+    follower.current = routing.follower;
+    return () => {
+      routing.dispose();
+      follower.current = null;
+    };
+  }, [scene, deps, latest]);
+  useTransformFollower(() => follower.current);
 }
 
-// src/contribution.ts
-function createDiagramContribution(opts) {
-  const actionId = opts.id ?? CONNECT_ACTION_ID;
+// src/hops/follower.ts
+function hopFollower(scene) {
+  const sc = scene;
   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)
+    preview(frame, data) {
+      if (frame.size === 0) return [];
+      const edges = sceneEdges(sc);
+      const moved = /* @__PURE__ */ new Set();
+      for (const e of edges) {
+        if (frame.has(e.node.id) || e.ends.some((end) => inOrUnder(sc, end, frame))) moved.add(e.node.id);
+      }
+      const out = [];
+      for (const e of edges) {
+        const hops = e.trait.hops;
+        if (hops === void 0 || hops.length === 0) continue;
+        if (!moved.has(e.node.id) && !hops.some((h) => h.over.some((id) => moved.has(id)))) continue;
+        const shown = data.get(e.node.id) ?? e.node.data;
+        const trait = diagramEdgeOf({ data: shown }) ?? e.trait;
+        out.push({ id: e.node.id, pose: e.node.pose, data: withHopsData(shown, trait, []) });
+      }
+      return out;
+    },
+    finish: (ops) => [...ops]
   };
 }
 
-// src/groupTree.ts
-function nestGroups(declared, isNode) {
-  const groupIds = new Set(declared.map((g) => g.id));
-  const parentOf = /* @__PURE__ */ new Map();
-  const claimedNodes = /* @__PURE__ */ new Set();
-  const direct = /* @__PURE__ */ new Map();
-  const isAncestorOrSelf = (candidate, of) => {
-    for (let at = of; at !== void 0; at = parentOf.get(at)) {
-      if (at === candidate) return true;
-    }
-    return false;
+// src/hops/install.ts
+function boxOf(points, pad) {
+  const b = { x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity };
+  for (const p of points) {
+    b.x0 = Math.min(b.x0, p.x - pad);
+    b.y0 = Math.min(b.y0, p.y - pad);
+    b.x1 = Math.max(b.x1, p.x + pad);
+    b.y1 = Math.max(b.y1, p.y + pad);
+  }
+  return b;
+}
+var meets = (a, b) => a.x0 <= b.x1 && b.x0 <= a.x1 && a.y0 <= b.y1 && b.y0 <= a.y1;
+function reordered(before, now) {
+  const was = new Set(before);
+  const is = new Set(now);
+  const a = before.filter((id) => is.has(id));
+  const b = now.filter((id) => was.has(id));
+  return a.some((id, i) => id !== b[i]);
+}
+function allPolylines(edges, polylineOf) {
+  const out = /* @__PURE__ */ new Map();
+  for (const e of edges) {
+    const p = polylineOf(e);
+    if (p !== null) out.set(e.node.id, p);
+  }
+  return out;
+}
+function candidates(sc, edges, held, s) {
+  const changed = /* @__PURE__ */ new Set([...s.added, ...s.removed, ...s.posed, ...s.reparented, ...s.dataChanged]);
+  const derived = (id) => sc.get(id)?.derivePose !== void 0;
+  return edges.filter((e) => changed.has(e.node.id) || !held.polylines.has(e.node.id) || e.ends.some((end) => inOrUnder(sc, end, changed) || derived(end)));
+}
+function installHops(scene, opts = {}) {
+  const sc = scene;
+  const polylineOf = edgePolylines(sc, opts);
+  let held = null;
+  const full = (edges, r) => {
+    const order = edges.map((e) => e.node.id);
+    held = { polylines: allPolylines(edges, polylineOf), order, r };
+    return hopDataOps(sc, edgeHops(held.polylines, order, r));
   };
-  for (const group of declared) {
-    const own = [];
-    for (const id of group.members) {
-      if (isNode(id)) {
-        if (claimedNodes.has(id)) continue;
-        claimedNodes.add(id);
-        own.push(id);
-      } else if (groupIds.has(id) && !parentOf.has(id) && !isAncestorOrSelf(id, group.id)) {
-        parentOf.set(id, group.id);
-        own.push(id);
+  const pass = (summary) => {
+    const value = sc.doc.get(HOPS_DOC_KEY);
+    const keyed = summary.docChanged.has(HOPS_DOC_KEY);
+    if (value === void 0) {
+      held = null;
+      return keyed ? hopDataOps(sc, new Map(sceneEdges(sc).map((e) => [e.node.id, []]))) : null;
+    }
+    const edges = sceneEdges(sc);
+    const order = edges.map((e) => e.node.id);
+    if (keyed || held === null || held.r !== value.size || reordered(held.order, order)) return full(edges, value.size);
+    const h = held;
+    const r = h.r;
+    const boxes = [];
+    const dirty = /* @__PURE__ */ new Set();
+    for (const e of candidates(sc, edges, h, summary)) {
+      const was = h.polylines.get(e.node.id);
+      const now = polylineOf(e);
+      if (was !== void 0 && now !== null && samePoints(was, now)) continue;
+      dirty.add(e.node.id);
+      if (was !== void 0) boxes.push(boxOf(was, r));
+      if (now === null) h.polylines.delete(e.node.id);
+      else {
+        boxes.push(boxOf(now, r));
+        h.polylines.set(e.node.id, now);
       }
     }
-    direct.set(group.id, own);
-  }
-  const flat = /* @__PURE__ */ new Map();
-  const flatten = (id) => {
-    const known = flat.get(id);
-    if (known !== void 0) return known;
-    const out = [];
-    for (const member of direct.get(id)) {
-      if (groupIds.has(member)) out.push(...flatten(member));
-      else out.push(member);
+    const present = new Set(order);
+    for (const [id, was] of h.polylines) {
+      if (present.has(id)) continue;
+      boxes.push(boxOf(was, r));
+      h.polylines.delete(id);
     }
-    flat.set(id, out);
-    return out;
+    h.order = order;
+    if (boxes.length === 0) return null;
+    const affected = new Set(dirty);
+    for (const [id, points] of h.polylines) {
+      if (affected.has(id)) continue;
+      const box = boxOf(points, 0);
+      if (boxes.some((b) => meets(box, b))) affected.add(id);
+    }
+    const ops = hopDataOps(sc, edgeHops(h.polylines, order, r, affected));
+    return ops.length === 0 ? null : ops;
   };
-  const live = new Set(declared.filter((g) => flatten(g.id).length > 0).map((g) => g.id));
-  return declared.filter((g) => live.has(g.id)).map((g) => {
-    const parent = parentOf.get(g.id);
-    return {
-      id: g.id,
-      direct: direct.get(g.id).filter((id) => !groupIds.has(id) || live.has(id)),
-      members: flat.get(g.id),
-      ...parent !== void 0 ? { parent } : {}
+  const on = sc.doc.get(HOPS_DOC_KEY);
+  if (on !== void 0) {
+    const edges = sceneEdges(sc);
+    held = { polylines: allPolylines(edges, polylineOf), order: edges.map((e) => e.node.id), r: on.size };
+  }
+  const dispose = scene.addEditPass(pass, { order: DIAGRAM_PASS_ORDER.hops });
+  return { follower: hopFollower(scene), dispose };
+}
+function useHops(scene, opts = {}) {
+  const latest = useLatest(opts);
+  const follower = useRef(null);
+  useEffect(() => {
+    const hops = installHops(scene, latest.current);
+    follower.current = hops.follower;
+    return () => {
+      hops.dispose();
+      follower.current = null;
     };
-  });
+  }, [scene, latest]);
+  useTransformFollower(() => follower.current);
+}
+var isRect = (pose) => typeof pose === "object" && pose !== null && typeof pose.width === "number" && typeof pose.height === "number";
+function labelFitOps(scene, summary, measure) {
+  const ops = [];
+  const sizes = /* @__PURE__ */ new Map();
+  for (const id of summary.dataChanged) {
+    const node = scene.get(id);
+    if (node === void 0 || diagramLabelOf(node) === null || !isRect(node.pose)) continue;
+    const data = node.data;
+    if (typeof data.text !== "string") continue;
+    const size = labelSize(data.text, data.style ?? labelStyleOf(DEFAULT_FONT), measure);
+    if (Math.abs(size.width - node.pose.width) < 1e-6 && Math.abs(size.height - node.pose.height) < 1e-6) continue;
+    sizes.set(id, size);
+    ops.push(createTransformOp({ id, from: node.pose, to: { ...node.pose, ...size }, label: "Fit label" }));
+  }
+  return { ops, sizes };
 }
 
-// src/graph.ts
-function buildGraph(source, opts = {}) {
-  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR$1;
-  const nodes = [];
-  const byId = /* @__PURE__ */ new Map();
-  const candidates = [];
-  const groupNodes = [];
-  for (const { node, pose } of source()) {
+// src/labels/install.ts
+function runsOf(path) {
+  if (path === null || path.kind !== "polygon") return [];
+  const runs = [];
+  for (let i = 0; i < path.commands.length; i++) {
+    if (path.commands[i] === PATH_M || runs.length === 0) runs.push([]);
+    runs[runs.length - 1].push({ x: path.coords[2 * i], y: path.coords[2 * i + 1] });
+  }
+  return runs.filter((r) => r.length >= 2);
+}
+function read(sc, geometry, reader, sizes) {
+  const out = { shapes: [], routes: /* @__PURE__ */ new Map(), labels: [] };
+  for (const node of sc.renderOrderNodes()) {
+    const ends = Array.isArray(node.dependsOn) ? node.dependsOn : [];
     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] });
-      }
+      const path = documentDepOf(sc, node.id)?.path ?? null;
+      const [points, ...more] = runsOf(path);
+      if (path !== null && points !== void 0) out.routes.set(node.id, { id: node.id, points, more, path, ends });
       continue;
     }
-    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),
-        ...trait.group.minWidth !== void 0 ? { minWidth: trait.group.minWidth } : {}
-      });
+    const placement = diagramLabelOf(node);
+    if (placement !== null) {
+      const { width, height } = sizes?.get(node.id) ?? geometry.getBounds(node.pose);
+      if (ends[0] !== void 0) out.labels.push({ id: node.id, edge: ends[0], placement, size: { width, height }, node });
       continue;
     }
-    const entry = {
-      id: node.id,
-      bounds: geometry.getBounds(pose),
-      pinned: trait.pinned === true
-    };
-    nodes.push(entry);
-    byId.set(entry.id, entry);
+    if (diagramContainerOf(node) !== null || diagramGroupOf(node) !== null || diagramNodeOf(node, reader) === null) continue;
+    out.shapes.push({ id: node.id, box: geometry.getBounds(documentPose(sc, node)) });
   }
-  const declared = new Map(groupNodes.map((g) => [g.id, g]));
-  const live = nestGroups(groupNodes, (id) => byId.has(id)).map((g) => {
-    for (const id of g.direct) {
-      const node = byId.get(id);
-      if (node !== void 0) node.group = g.id;
-    }
-    return {
-      id: g.id,
-      members: g.members,
-      inset: declared.get(g.id).inset,
-      ...declared.get(g.id).minWidth !== void 0 ? { minWidth: declared.get(g.id).minWidth } : {},
-      ...g.parent !== void 0 ? { parent: g.parent } : {}
-    };
-  });
-  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) {
-    push(out, edge.from, edge);
-    push(into, edge.to, edge);
-  }
-  const NONE = Object.freeze([]);
-  return {
-    nodes,
-    edges,
-    groups: live,
-    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);
+  return out;
 }
-
-// src/dataGroups.ts
-function resolveGroups(groups, ids, nodeIds, opts) {
-  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);
+var grow = (b, by) => ({ x: b.x - by, y: b.y - by, width: b.width + 2 * by, height: b.height + 2 * by });
+var meets2 = (a, b) => a.x <= b.x + b.width && b.x <= a.x + a.width && a.y <= b.y + b.height && b.y <= a.y + a.height;
+function routeMeets(points, box) {
+  for (let i = 0; i + 1 < points.length; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    const seg = { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(a.x - b.x), height: Math.abs(a.y - b.y) };
+    if (meets2(seg, box)) return true;
   }
-  const declared = new Map(groups.map((g) => [g.id, g]));
-  const nested = nestGroups(groups, (id) => nodeIds.has(id));
-  const depthOf = /* @__PURE__ */ new Map();
-  const byId = new Map(nested.map((g) => [g.id, g]));
-  const depth = (id) => {
-    const parent = byId.get(id).parent;
-    let d = depthOf.get(id);
-    if (d === void 0) depthOf.set(id, d = parent === void 0 ? 0 : depth(parent) + 1);
-    return d;
-  };
-  return nested.map((g, i) => ({ g, i })).sort((a, b) => depth(a.g.id) - depth(b.g.id) || a.i - b.i).map(({ g }) => {
-    const group = declared.get(g.id);
-    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 };
-    return {
-      group,
-      direct: g.direct,
-      members: g.members,
-      inset,
-      pad,
-      title,
-      ...title ? { minWidth: title.width + 2 * pad } : {},
-      ...g.parent !== void 0 ? { parent: g.parent } : {}
-    };
-  });
+  return false;
 }
-function groupBoxes(groups, placedAt) {
-  const byId = new Map(groups.map((g) => [g.group.id, g]));
-  const boxes = /* @__PURE__ */ new Map();
-  const boxOf = (id) => {
-    const known = boxes.get(id);
-    if (known !== void 0) return known;
-    const g = byId.get(id);
-    const rs = g.direct.map((m) => byId.has(m) ? boxOf(m) : placedAt.get(m));
-    const x = Math.min(...rs.map((r) => r.x));
-    const y = Math.min(...rs.map((r) => r.y));
-    const box = boxAround({
-      x,
-      y,
-      width: Math.max(...rs.map((r) => r.x + r.width)) - x,
-      height: Math.max(...rs.map((r) => r.y + r.height)) - y
-    }, g);
-    boxes.set(id, box);
-    return box;
-  };
-  for (const g of groups) boxOf(g.group.id);
-  return boxes;
-}
-function groupSpecs(groups, placedAt, styleOf) {
-  const boxes = groupBoxes(groups, placedAt);
-  const specs = [];
-  for (const g of groups) {
-    const { style, text } = styleOf(g.group);
-    const { x, y, width, height } = boxes.get(g.group.id);
-    specs.push({
-      id: g.group.id,
-      kind: "leaf",
-      layer: "main",
-      pose: { x, y, width, height },
-      data: {
-        diagram: { outline: "rect", group: { inset: g.inset, ...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {} } },
-        fill: { paint: { color: style.fill } },
-        stroke: {
-          paint: { color: style.stroke },
-          width: style.strokeWidth ?? 1,
-          ...style.dash ? { dash: style.dash } : {}
-        }
-      },
-      dependsOn: g.direct,
-      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: { paint: { color: style.text } } },
-      dependsOn: [g.group.id],
-      derivePose: ANCHOR_DERIVE_POSE
-    });
+var runsIn = (r) => [r.points, ...r.more ?? []];
+function changesOf(scene, summary, seen) {
+  const touched2 = (id) => summary.added.has(id) || summary.posed.has(id) || summary.dataChanged.has(id);
+  const edges = /* @__PURE__ */ new Set();
+  const routes = [];
+  for (const r of scene.routes.values()) {
+    if (!touched2(r.id) && !r.ends.some((e) => touched2(e) || summary.removed.has(e))) continue;
+    edges.add(r.id);
+    routes.push(...runsIn(r));
+    routes.push(...seen.routes.get(r.id) ?? []);
   }
-  return specs;
-}
-
-// src/route.ts
-var FACES = {
-  down: { out: "s", in: "n" },
-  up: { out: "n", in: "s" },
-  right: { out: "e", in: "w" },
-  left: { out: "w", in: "e" }
-};
-function layeredRoutes(input) {
-  const { graph, boxes, members, compass, clearance } = input;
-  const direction = input.direction ?? "down";
-  const axes = axesFor(direction);
-  const faces = FACES[direction];
-  const ranks = ranksOf(graph, backEdges(graph));
-  const span = (id) => {
-    const ids = members.get(id) ?? [id];
-    const rs = ids.map((m) => ranks.get(m)).filter((r) => r !== void 0);
-    return rs.length === 0 ? null : [Math.min(...rs), Math.max(...rs)];
-  };
-  const lo = (r, axis) => axis === "x" ? r.x : r.y;
-  const hi = (r, axis) => axis === "x" ? r.x + r.width : r.y + r.height;
-  const mid = (r, axis) => (lo(r, axis) + hi(r, axis)) / 2;
-  const byRank = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    const rank = ranks.get(node.id);
-    const box = boxes.get(node.id);
-    if (rank === void 0 || box === void 0) continue;
-    byRank.set(rank, [...byRank.get(rank) ?? [], box]);
+  const shapes = [];
+  for (const s of scene.shapes) {
+    if (!touched2(s.id)) continue;
+    shapes.push(s.box);
+    const was = seen.shapes.get(s.id);
+    if (was !== void 0) shapes.push(was);
   }
-  const routes = /* @__PURE__ */ new Map();
-  for (const edge of input.edges) {
-    const from = span(edge.from);
-    const to = span(edge.to);
-    const a = boxes.get(edge.from);
-    const b = boxes.get(edge.to);
-    if (from === null || to === null || a === void 0 || b === void 0 || from[1] >= to[0]) continue;
-    const route = {};
-    if (compass.has(edge.from)) route.fromPort = faces.out;
-    if (compass.has(edge.to)) route.toPort = faces.in;
-    const near = axes.sign === 1 ? hi : lo;
-    const far = axes.sign === 1 ? lo : hi;
-    const start = { cross: mid(a, axes.cross), rank: near(a, axes.rank) };
-    const end = { cross: mid(b, axes.cross), rank: far(b, axes.rank) };
-    const ends = /* @__PURE__ */ new Set([edge.from, edge.to, ...members.get(edge.from) ?? [], ...members.get(edge.to) ?? []]);
-    const groupsInWay = [...members].filter(([g, ms]) => !ends.has(g) && !ms.some((m) => ends.has(m)));
-    const stops = [];
-    let blocked = false;
-    for (let k = from[1] + 1; k < to[0]; k++) {
-      const row = byRank.get(k) ?? [];
-      if (row.length === 0) continue;
-      const bandLo = Math.min(...row.map((r) => lo(r, axes.rank)));
-      const bandHi = Math.max(...row.map((r) => hi(r, axes.rank)));
-      const obstacles = [...row];
-      for (const [g] of groupsInWay) {
-        const box = boxes.get(g);
-        if (box !== void 0 && lo(box, axes.rank) < bandHi && hi(box, axes.rank) > bandLo) obstacles.push(box);
-      }
-      const t = ((bandLo + bandHi) / 2 - start.rank) / (end.rank - start.rank);
-      const ideal = start.cross + (end.cross - start.cross) * t;
-      const cross = freeAt(ideal, obstacles.map((r) => [lo(r, axes.cross) - clearance, hi(r, axes.cross) + clearance]));
-      if (cross !== ideal) blocked = true;
-      const [first, last] = axes.sign === 1 ? [bandLo, bandHi] : [bandHi, bandLo];
-      stops.push({ cross, rank: first }, { cross, rank: last });
-    }
-    if (blocked) {
-      route.waypoints = stops.map((s) => axes.rank === "y" ? { x: s.cross, y: s.rank } : { x: s.rank, y: s.cross });
-    }
-    if (route.fromPort !== void 0 || route.toPort !== void 0 || route.waypoints !== void 0) {
-      routes.set(edge.id, route);
-    }
+  for (const id of summary.removed) {
+    const shape = seen.shapes.get(id);
+    if (shape !== void 0) shapes.push(shape);
+    routes.push(...seen.routes.get(id) ?? []);
   }
-  return routes;
-}
-function authoredOver(edges, input) {
-  const routes = layeredRoutes({ ...input, edges });
-  return new Map(edges.map((e) => {
-    const r = routes.get(e.id);
-    const fromPort = e.fromPort ?? r?.fromPort;
-    const toPort = e.toPort ?? r?.toPort;
-    const waypoints = e.waypoints ?? r?.waypoints;
-    return [e.id, { ...fromPort ? { fromPort } : {}, ...toPort ? { toPort } : {}, ...waypoints ? { waypoints } : {} }];
-  }));
+  return { touched: touched2, edges, routes, shapes };
 }
-function freeAt(at, spans) {
-  const sorted = [...spans].sort((p, q) => p[0] - q[0]);
-  const merged = [];
-  for (const [s, e] of sorted) {
-    const top = merged[merged.length - 1];
-    if (top !== void 0 && s < top[1]) top[1] = Math.max(top[1], e);
-    else merged.push([s, e]);
+function boxesOf(scene, label, gap) {
+  const route = scene.routes.get(label.edge);
+  if (route === void 0) return [];
+  const { placed, ...preferred } = label.placement;
+  const out = [];
+  for (const placement of placed === void 0 ? [preferred] : [label.placement, preferred]) {
+    const c = labelCenter(route.path, placement, label.size);
+    if (c !== null) out.push(grow({ x: c.x - label.size.width / 2, y: c.y - label.size.height / 2, ...label.size }, gap));
   }
-  for (const [s, e] of merged) {
-    if (at > s && at < e) return at - s <= e - at ? s : e;
+  return out;
+}
+function movingOf(scene, summary, seen, gap) {
+  const changed = changesOf(scene, summary, seen);
+  const boxes = new Map(scene.labels.map((l) => [l.id, boxesOf(scene, l, gap)]));
+  const first = /* @__PURE__ */ new Set();
+  for (const l of scene.labels) {
+    const own = boxes.get(l.id);
+    const hit = own.some((box) => changed.shapes.some((s) => meets2(s, box)) || changed.routes.some((r) => routeMeets(r, box)));
+    if (changed.edges.has(l.edge) || changed.touched(l.id) || hit) first.add(l.id);
   }
-  return at;
+  const moving = new Set(first);
+  for (const l of scene.labels) {
+    if (moving.has(l.id)) continue;
+    const own = boxes.get(l.id);
+    for (const id of first) if (boxes.get(id).some((b) => own.some((o) => meets2(b, o)))) moving.add(l.id);
+  }
+  return moving;
 }
-
-// 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, groups = []) {
-  const byId = new Map(nodes.map((n) => [n.id, n]));
-  const out = /* @__PURE__ */ new Map();
-  const inc = /* @__PURE__ */ new Map();
-  for (const e of edges) {
-    out.set(e.from, [...out.get(e.from) ?? [], e]);
-    inc.set(e.to, [...inc.get(e.to) ?? [], e]);
+var sameSpot = (a, b) => a === b || a !== void 0 && b !== void 0 && Math.abs(a.at - b.at) < 1e-9 && Math.abs(a.offset - b.offset) < 1e-9;
+function withSpot(data, label, spot) {
+  const { placed: _p, ...rest } = label;
+  const diagram = data.diagram;
+  return { ...data, diagram: { ...diagram, label: spot === void 0 ? rest : { ...rest, placed: spot } } };
+}
+function placementOps(scene, summary, opts, seen) {
+  const sc = scene;
+  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
+  const fit = labelFitOps(sc, summary, opts.measure);
+  const reading = read(sc, geometry, opts.read, fit.sizes);
+  const moving = movingOf(reading, summary, seen, opts.gap ?? 2);
+  seen.shapes = new Map(reading.shapes.map((s) => [s.id, s.box]));
+  seen.routes = new Map([...reading.routes.values()].map((r) => [r.id, runsIn(r)]));
+  if (moving.size === 0) return fit.ops;
+  const labels = reading.labels.map((l) => ({ ...l, moving: moving.has(l.id) }));
+  const placed = placeLabels({ shapes: reading.shapes, routes: [...reading.routes.values()], labels }, opts);
+  const ops = [...fit.ops];
+  for (const l of labels) {
+    if (!placed.has(l.id)) continue;
+    const spot = placed.get(l.id) ?? void 0;
+    if (sameSpot(l.placement.placed, spot)) continue;
+    ops.push(createSetDataOp({ id: l.id, from: l.node.data, to: withSpot(l.node.data, l.placement, spot), label: "Place label" }));
   }
-  return {
-    nodes,
-    edges,
-    groups,
-    node: (id) => byId.get(id),
-    outgoing: (id) => out.get(id) ?? [],
-    incoming: (id) => inc.get(id) ?? []
+  return ops;
+}
+var any = (s) => s.added.size + s.removed.size + s.posed.size + s.reparented.size + s.dataChanged.size > 0;
+function installLabelPlacement(scene, opts = {}) {
+  const sc = scene;
+  const first = read(sc, opts.geometry ?? AUTO_POSE_DESCRIPTOR, opts.read);
+  const seen = {
+    shapes: new Map(first.shapes.map((s) => [s.id, s.box])),
+    routes: new Map([...first.routes.values()].map((r) => [r.id, runsIn(r)]))
   };
+  const dispose = scene.addEditPass((summary) => {
+    if (!any(summary)) return null;
+    const ops = placementOps(scene, summary, opts, seen);
+    return ops.length === 0 ? null : ops;
+  }, { order: DIAGRAM_PASS_ORDER.labels });
+  return { dispose };
 }
-function routed(data, edges, graph, groups, placedAt, layoutOptions) {
-  return authoredOver(edges.map((e) => ({ ...e, id: edgeIdOf(e) })), {
-    graph,
-    boxes: new Map([...placedAt, ...groupBoxes(groups, placedAt)]),
-    members: new Map(groups.map((g) => [g.group.id, g.members])),
-    compass: /* @__PURE__ */ new Set([...data.nodes.filter((n) => n.ports === void 0).map((n) => n.id), ...groups.map((g) => g.group.id)]),
-    clearance: (layoutOptions.nodeGap ?? DEFAULT_NODE_GAP) / 2,
-    ...layoutOptions.direction ? { direction: layoutOptions.direction } : {}
-  });
+function useLabelPlacement(scene, opts = {}) {
+  const latest = useLatest(opts);
+  useEffect(() => installLabelPlacement(scene, latest.current).dispose, [scene, latest]);
 }
-function placed(data, seeds, moved) {
-  return 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 }];
-  }));
+function documentBoundsOf(scene, node, geometry = AUTO_POSE_DESCRIPTOR) {
+  return geometry.getBounds(documentPose(scene, node));
 }
-function diagramScene(data, opts = {}) {
-  const font = opts.font ?? FONT;
-  const styleOf = (s) => ({
-    fontFamily: s?.fontFamily ?? font.fontFamily,
-    fontSize: s?.fontSize ?? font.fontSize,
-    ...s?.bold === true ? { fontWeight: 700 } : {}
-  });
-  const measure = opts.measure ? (text, s) => opts.measure(text, { ...s, fontFamily: s.fontFamily ?? font.fontFamily, fontSize: s.fontSize ?? font.fontSize }) : (text, s) => {
-    const size = s.fontSize ?? font.fontSize;
-    return { width: text.length * GLYPH * size, height: Math.ceil(LINE * size) };
-  };
-  const ids = /* @__PURE__ */ new Set();
-  for (const n of data.nodes) {
-    if (ids.has(n.id)) throw new Error(`diagramScene: node id "${n.id}" appears more than once`);
-    ids.add(n.id);
+var ENDS = ["from", "to"];
+var sameSplit = (a, b) => a === void 0 ? b === null : b !== null && a.ref === b.ref && a.from === b.from && a.to === b.to;
+function withSplit(data, edge, split) {
+  const { offPage: _o, ...rest } = edge;
+  return { ...data, diagram: split === null ? rest : { ...rest, offPage: split } };
+}
+function reached(scene, s) {
+  const ids = /* @__PURE__ */ new Set([...s.added, ...s.posed, ...s.reparented, ...s.dataChanged]);
+  const out = /* @__PURE__ */ new Set();
+  for (const id of s.removed) {
+    const tagged = /^(.*)\/offpage-(?:from|to)$/.exec(id);
+    if (tagged !== null) out.add(tagged[1]);
   }
-  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);
-    if (seen.has(id) || !ids.has(e.from) || !ids.has(e.to)) return false;
-    seen.add(id);
-    return true;
-  });
-  const bodies = data.nodes.map((n) => ({
-    outline: n.outline ?? opts.outline ?? "rect",
-    rows: n.rows ?? (n.lines ?? []).map((text) => ({ kind: "label", text })),
-    padding: n.padding ?? opts.padding ?? 8,
-    gap: n.gap ?? opts.gap ?? 4,
-    verticalAlign: n.verticalAlign ?? opts.verticalAlign ?? "center",
-    ...n.ports ? { ports: n.ports } : {}
-  }));
-  const seeds = data.nodes.map((n, i) => {
-    const pose = sizeToBody(
-      { ...n.at ?? { x: i, y: i }, width: n.width ?? opts.minWidth ?? MIN_WIDTH, height: n.height ?? 0 },
-      measureBody(bodies[i], measure)
-    );
-    return { id: n.id, bounds: pose, pinned: n.pinned === true };
-  });
-  const graphGroups = groups.map((g) => ({
-    id: g.group.id,
-    members: g.members,
-    inset: g.inset,
-    ...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {},
-    ...g.parent !== void 0 ? { parent: g.parent } : {}
-  }));
-  const seedOf = new Map(seeds.map((n) => [n.id, n]));
-  for (const g of groups) {
-    for (const m of g.direct) {
-      const seed = seedOf.get(m);
-      if (seed !== void 0) seed.group = g.group.id;
-    }
+  for (const node of scene.renderOrderNodes()) {
+    if (diagramEdgeOf(node) === null) continue;
+    const deps = node.dependsOn;
+    if (ids.has(node.id) || Array.isArray(deps) && deps.some((d) => ids.has(d))) out.add(node.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 layoutOptions = { order: "barycenter", ...opts.layoutOptions };
-  const moved = layout === null ? /* @__PURE__ */ new Map() : layout(graph, layoutOptions);
-  const specs = [];
-  const placedAt = placed(data, seeds, moved);
-  const routes = layout === layered ? routed(data, edges, graph, groups, placedAt, layoutOptions) : null;
-  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: { paint: { color: style.text } } });
-    const built = buildBody(
-      bodies[i],
-      { x: at.x, y: at.y, width: seed.width, height: seed.height },
-      {
-        id: n.id,
-        layer: "main",
-        measure,
-        body: (trait) => ({
-          diagram: n.pinned === true ? { ...trait, pinned: true } : trait,
-          fill: { paint: { color: style.fill } },
-          stroke: {
-            paint: { color: style.stroke },
-            width: style.strokeWidth ?? 2,
-            ...style.dash ? { dash: style.dash } : {}
-          }
-        }),
-        row: (text, box) => text === "" ? null : textData(text, box.row.kind === "label" || box.row.kind === "field" ? box.row.style : void 0),
-        portLabel: (text) => textData(text, void 0)
-      }
-    );
-    for (const [k, s] of built.specs.entries()) {
-      specs.push({ ...s, ...k === 0 ? {} : { id: `${n.id}/${k}` } });
+  return out;
+}
+function tagOps(scene, edge, split, pages, look) {
+  const ops = [];
+  let lookNow = null;
+  const lookOf = () => lookNow ??= look();
+  for (const end of ENDS) {
+    const id = offPageTagId(edge.id, end);
+    const tag = scene.get(id);
+    if (split === null) {
+      if (tag !== void 0) ops.push(createDeleteOp({ node: tag, label: "Off-page" }));
+      continue;
     }
-  }
-  for (const e of edges) {
-    const id = edgeIdOf(e);
-    const { fromPort, toPort, waypoints } = routes?.get(id) ?? e;
-    const style = opts.edgeStyle?.(e) ?? EDGE;
-    const markerStart = style.markerStart ?? null;
-    const markerEnd = style.markerEnd === void 0 ? "arrow" : style.markerEnd;
-    specs.push({
-      id,
-      kind: "leaf",
-      layer: "main",
-      pickable: false,
-      pose: { x: 0, y: 0, width: 0, height: 0 },
-      data: {
-        diagram: {
-          from: fromPort ? { port: fromPort } : {},
-          to: toPort ? { port: toPort } : {},
-          router: e.router ?? opts.router ?? "bezier",
-          ...waypoints ? { waypoints } : {}
-        },
-        stroke: {
-          paint: { color: style.stroke },
-          width: style.width ?? 1.5,
-          ...style.dash ? { dash: style.dash } : {},
-          ...markerStart !== null ? { markerStart } : {},
-          ...markerEnd !== null ? { markerEnd } : {}
-        }
-      },
-      dependsOn: [e.from, e.to],
-      derivePath: EDGE_DERIVE_PATH
-    });
-    if (e.label) {
-      const labelStyle = { ...font, fontSize: font.fontSize - 2 };
-      specs.push({
-        id: `${id}/label`,
-        kind: "leaf",
-        layer: "main",
-        pickable: false,
-        pose: { x: 0, y: 0, width: measure(e.label, labelStyle).width, height: labelStyle.fontSize },
-        data: {
-          diagram: { label: e.labelPlacement ?? opts.labelPlacement ?? LABEL_PLACEMENT },
-          text: e.label,
-          style: labelStyle,
-          fill: { paint: { color: style.label ?? style.stroke } }
-        },
-        dependsOn: [id],
-        derivePose: LABEL_DERIVE_POSE
-      });
+    const text = offPageFarText(pages, split, end);
+    if (tag === void 0) {
+      const spec = offPageTagSpec(edge.id, end, text, { ...lookOf(), layer: edge.layer });
+      ops.push(createInsertOp({ node: { ...spec, parent: null }, label: "Off-page" }));
+    } else if (tag.data.text !== text) {
+      const old = tag.data;
+      const kept = {
+        ...lookOf(),
+        ...old.style ? { style: old.style } : {},
+        ...old.fill?.paint?.color ? { fill: old.fill.paint.color } : {},
+        ...old.background?.paint?.color ? { background: old.background.paint.color } : {},
+        ...old.padding !== void 0 ? { padding: old.padding } : {}
+      };
+      ops.push(createSetDataOp({ id, from: tag.data, to: { ...tag.data, ...offPageTagData(edge.id, end, text, kept) }, label: "Off-page" }));
+      const pose = tag.pose;
+      ops.push(createTransformOp({ id, from: tag.pose, to: { ...pose, ...offPageTagSize(text, kept) }, label: "Off-page" }));
     }
   }
-  return specs;
-}
-var LAYOUTS2 = 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;
+  return ops;
 }
-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));
+function offPageOps(scene, edges, opts = {}) {
+  const sc = scene;
+  const geometry = opts.geometry;
+  const look = opts.look ?? (() => offPageTagLook(diagramThemeOf(sc, opts.theme)));
+  const wanted = edges === "all" ? null : new Set(edges);
+  const pages = placedPagesOf(sc);
+  const boxOf2 = (id) => {
+    const node = sc.get(id);
+    return node === void 0 ? null : documentBoundsOf(scene, node, geometry);
+  };
+  const inputs = [];
+  const used = [];
+  for (const node of sc.renderOrderNodes()) {
+    const trait = diagramEdgeOf(node);
+    if (trait === null) continue;
+    if (wanted !== null && !wanted.has(node.id)) {
+      if (trait.offPage !== void 0) used.push(trait.offPage.ref);
+      continue;
     }
+    const deps = node.dependsOn;
+    const from = Array.isArray(deps) ? boxOf2(deps[0]) : null;
+    const to = Array.isArray(deps) ? boxOf2(deps[1]) : null;
+    if (from === null || to === null) continue;
+    inputs.push({ id: node.id, from, to, offPage: trait.offPage, node, trait });
   }
-  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));
+  if (inputs.length === 0) return [];
+  const splits = offPageSplits({ pages, edges: inputs, used });
+  const ops = [];
+  for (const edge of inputs) {
+    const split = splits.get(edge.id) ?? null;
+    if (!sameSplit(edge.trait.offPage, split)) {
+      ops.push(createSetDataOp({ id: edge.id, from: edge.node.data, to: withSplit(edge.node.data, edge.trait, split), label: "Off-page" }));
+    }
+    ops.push(...tagOps(sc, edge.node, split, pages, look));
   }
-  return out;
+  return ops;
 }
-var LAYOUT_ACTION_ID = "diagram.layout";
-function createLayoutAction(opts) {
-  const algorithm = typeof opts.algorithm === "function" ? opts.algorithm : LAYOUTS2[opts.algorithm ?? "layered"] ?? layered;
-  const build = {
-    ...opts.read ? { read: opts.read } : {},
-    ...opts.geometry ? { geometry: opts.geometry } : {}
-  };
+function installOffPageMarkers(scene, opts = {}) {
+  const sc = scene;
+  return scene.addEditPass((summary) => {
+    const edges = summary.docChanged.has(PAGES_DOC_KEY) ? "all" : reached(sc, summary);
+    if (edges !== "all" && edges.size === 0) return null;
+    const ops = offPageOps(scene, edges, opts);
+    return ops.length === 0 ? null : ops;
+  }, { order: DIAGRAM_PASS_ORDER.offPage });
+}
+function useOffPageMarkers(scene, opts = {}) {
+  const latest = useLatest(opts);
+  useEffect(() => installOffPageMarkers(scene, latest.current), [scene, latest]);
+}
+var FOLLOW_OFF_PAGE_ACTION_ID = "diagram.followOffPage";
+function offPageTargetOf(scene, tagId) {
+  const node = scene.get(tagId);
+  const tag = node === void 0 ? null : offPageTagOf(node);
+  const edgeNode = tag === null ? void 0 : scene.get(tag.edge);
+  const split = edgeNode === void 0 ? void 0 : diagramEdgeOf(edgeNode)?.offPage;
+  const deps = edgeNode?.dependsOn;
+  if (tag === null || split === void 0 || !Array.isArray(deps)) return null;
+  const far = tag.end === "from" ? 1 : 0;
+  return { tag: tagId, edge: tag.edge, node: deps[far], page: far === 1 ? split.to : split.from };
+}
+function tagUnder(deps, at) {
+  if (deps?.scene === void 0 || at === void 0) return null;
+  const id = deps.nodeAtPoint?.(at);
+  return id == null ? null : offPageTargetOf(deps.scene, id);
+}
+function followDefault(target, ctx, padding) {
+  const { scene, selection, view } = ctx.deps;
+  if (scene === void 0) return;
+  selection?.set([target.node]);
+  const page = placedPagesOf(scene).find((p) => p.id === target.page);
+  const size = view?.hostSize?.();
+  if (page === void 0 || view === void 0 || size == null) return;
+  view.set(fitViewToPage(page, size, view.get(), { padding }));
+}
+function createFollowOffPageAction(opts = {}) {
+  const padding = opts.padding ?? 24;
+  const follow = opts.follow ?? ((target, ctx) => followDefault(target, ctx, padding));
   return {
-    id: opts.id ?? LAYOUT_ACTION_ID,
-    label: opts.label ?? "Lay out diagram",
-    group: opts.group ?? "diagram",
-    requires: ["scene"],
+    id: FOLLOW_OFF_PAGE_ACTION_ID,
+    label: "Go to the other page",
+    group: "diagram",
+    requires: ["scene", "nodeAtPoint", "selection", "view"],
+    eligible: { mode: { in: ["normal", "isolation"] } },
     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 } : {}
-        });
+      run(deps, params) {
+        const world = { x: Number(params?.worldX), y: Number(params?.worldY) };
+        const target = tagUnder(deps, world);
+        if (target === null) return;
+        follow(target, { world, modifiers: { alt: false, shift: false, meta: false, ctrl: false }, deps });
       }
     },
-    enabled: () => true
+    enabled: (deps, at) => tagUnder(deps, at) !== null ? true : ActionDisabledReason.NotApplicable
   };
 }
-
-// src/live.ts
-var EASE_FRAMES = 24;
-var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
-var REST_DISTANCE = 0.1;
-var REST_TICKS = 5;
-function forceProducer(graph, opts = {}) {
-  const geometry = opts.geometry ?? AUTO_POSE_DESCRIPTOR;
-  const relaxation = forceRelaxation(graph, opts);
-  const dragAlpha = opts.dragAlpha ?? 0.3;
-  const restDistance = opts.restDistance ?? REST_DISTANCE;
-  const restTicks = opts.restTicks ?? REST_TICKS;
-  const was = relaxation.bodies.map((b) => ({ x: b.x, y: b.y }));
-  let still = 0;
-  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();
-    let moved = 0;
-    relaxation.bodies.forEach((body, i) => {
-      const at = was[i];
-      moved = Math.max(moved, Math.hypot(body.x - at.x, body.y - at.y));
-      at.x = body.x;
-      at.y = body.y;
-    });
-    still = pinned.size === 0 && moved < restDistance ? still + 1 : 0;
-    const done = still >= restTicks || relaxation.sim.isSettled();
-    return { result: relaxation.placed(), done };
-  };
+var onBody = bodyPredicate((target) => target === "selected-body" || target === "unselected-body");
+function followOffPageBinding(actionId = FOLLOW_OFF_PAGE_ACTION_ID) {
+  return { spec: { kind: "doubleClick", target: { kindOf: onBody } }, actionId };
 }
-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
-      });
+function diagramOffPage(opts = {}) {
+  return {
+    contribution: {
+      id: "weasel-diagram-off-page",
+      eligibility: { always: true },
+      actions: [createFollowOffPageAction(opts)],
+      bindings: [followOffPageBinding()]
     }
-    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 = useLatest(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 : LAYOUTS2[algorithm] ?? layered;
-    producer.current = easedProducer(graph, fn, {
-      ...o.layout ? { layout: o.layout } : {},
-      ...o.frames === void 0 ? {} : { frames: o.frames },
-      ...o.easing ? { easing: o.easing } : {}
-    });
-  }, [optsRef]);
-  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 placed2 = result;
-    if (ctx.pinned.size > 0) {
-      const held = new Map(result);
-      for (const id of ctx.pinned.keys()) held.delete(id);
-      placed2 = held;
-    }
-    const poses = layoutPoses(o.scene, placed2, o.geometry);
-    return { poses: [...poses], done };
-  }, [optsRef]);
-  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, optsRef]);
-  return useMemo(() => ({
-    start() {
-      if (run.isRunning()) return;
-      build();
-      run.start();
-    },
-    stop: () => {
-      run.stop();
-    },
-    cancel: () => {
-      run.cancel();
+
+// src/theme/fromTokens.ts
+function diagramThemeFromTokens(read2, opts = {}) {
+  const paper = DIAGRAM_THEMES.paper;
+  const t = (name, fallback) => read2(`--wzl-${name}`).trim() || fallback;
+  const fg = t("fg", paper.roles.default.text);
+  const muted = t("fg-muted", paper.roles.muted.text);
+  const raised = t("surface-raised", paper.roles.default.fill);
+  const sunken = t("surface-sunken", paper.roles.muted.fill);
+  const border = t("border-strong", t("border", paper.roles.default.stroke));
+  const accent = t("accent", paper.roles.accent.stroke);
+  const success = t("success", paper.roles.positive.stroke);
+  const warning = t("warning", paper.roles.warning.stroke);
+  const danger = t("danger", paper.roles.negative.stroke);
+  const size = Number.parseFloat(read2("--wzl-font-size"));
+  const shape = (stroke) => ({ fill: raised, stroke, text: fg });
+  return {
+    id: opts.id ?? "tokens",
+    name: opts.name ?? "Match chrome",
+    roles: {
+      default: shape(border),
+      accent: { fill: t("accent-soft", raised), stroke: accent, text: fg },
+      muted: { fill: sunken, stroke: border, text: muted },
+      positive: shape(success),
+      warning: shape(warning),
+      negative: shape(danger)
     },
-    restart() {
-      run.cancel();
-      build();
-      run.start();
+    defaultRole: "default",
+    edge: { ...paper.edge, stroke: muted },
+    label: { fill: fg },
+    container: { ...paper.container, fill: sunken, stroke: border, text: muted },
+    lane: {
+      header: { fill: sunken, stroke: border, text: fg, strokeWidth: 1 },
+      bodies: [
+        { fill: t("surface", paper.page), stroke: border, text: fg, strokeWidth: 1 },
+        { fill: raised, stroke: border, text: fg, strokeWidth: 1 }
+      ]
     },
-    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;
+    page: t("surface", paper.page),
+    font: { family: t("font-ui", paper.font.family), size: Number.isFinite(size) && size > 0 ? size : paper.font.size },
+    series: [accent, success, warning, danger, t("accent-strong", accent), muted]
+  };
+}
+var FALLBACK_SIZE = 16;
+var rendererMeasure = (text, style) => {
+  const fontSize = style.fontSize ?? FALLBACK_SIZE;
+  const { width } = measureTextBounds(text, {
+    fontSize,
+    ...style.fontFamily !== void 0 ? { fontFamily: style.fontFamily } : {},
+    ...style.bold === true ? { fontWeight: 700 } : {}
+  });
+  return { width: Math.ceil(width), height: Math.ceil(fontSize * 1.2) };
+};
+
+// src/theme/applyTheme.ts
+function diagramStyleOf(node) {
+  const trait = node.data?.diagram;
+  if (trait === null || typeof trait !== "object") return null;
+  const kind = "from" in trait && "to" in trait ? "connector" : "outline" in trait && !("group" in trait) && !("container" in trait) ? "shape" : null;
+  if (kind === null) return null;
+  const role = trait.style;
   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 box = geometry.getBounds(pose);
-      const declaredFill = d.fill === void 0 ? opts.defaultFill : d.fill;
-      const declaredStroke = d.stroke === void 0 ? opts.defaultStroke : d.stroke;
-      const fill = declaredFill && commandFill(declaredFill, box);
-      const stroke = declaredStroke && commandStroke(declaredStroke, box);
-      return [{
-        kind: "path",
-        path: outlinePath(outline, box),
-        ...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));
-    }
+    kind,
+    ...role !== void 0 ? { role } : {},
+    own: trait.ownStyle ?? [],
+    ownFont: trait.ownFont ?? []
   };
 }
-function registerDiagramShape(opts = {}) {
-  return registerNodeShape(diagramShape(opts), { priority: "high" });
+function writeAll(scene, writes, measure) {
+  const bodies = [];
+  for (const [id, data] of writes) {
+    const node = scene.get(id);
+    if (node.data?.style?.fontSize !== data?.style?.fontSize && node.parent !== null) bodies.push(node.parent);
+    scene.update(id, { data });
+  }
+  relayoutBodies(scene, bodies, measure);
 }
-function useMirroredSelection(selection, selected, onSelect) {
-  const want = selected ?? null;
-  const pushed = useRef(void 0);
-  useEffect(() => {
-    if (pushed.current === want) return;
-    pushed.current = want;
-    if ((selection.get()[0] ?? null) !== want) selection.set(want === null ? [] : [want]);
-  }, [want]);
-  const onSelectRef = useLatest(onSelect);
-  return useCallback(() => {
-    onSelectRef.current?.(selection.get()[0] ?? null);
-  }, [selection, onSelectRef]);
-}
-var AMBIENT = [dragPanContribution()];
-var NO_MARQUEE = { areaSelect: null };
-var DiagramView = forwardRef(function DiagramView2(props, ref) {
-  return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props, apiRef: ref }) });
-});
-function Inner({
-  specs,
-  width,
-  height,
-  selected,
-  onSelect,
-  onMove,
-  onConnect,
-  enableKeybindings,
-  canConnect,
-  portOptions,
-  live: liveOpts,
-  minScale,
-  maxScale,
-  anchor,
-  fitPadding,
-  background,
-  view,
-  onViewChange,
-  className,
-  apiRef
-}) {
-  useEffect(() => registerDiagramShape(), []);
-  const registry = useMemo(() => withDiagramRegistry(), []);
-  const scene = useScene({
-    systemLayers: [{ id: "main" }],
-    initial: specs,
-    registry
+function applyDiagramTheme(scene, theme, label = `Theme: ${theme.name}`, opts = {}) {
+  const from = opts.from ?? diagramThemeOf(scene);
+  scene.batch(label, () => {
+    writeAll(scene, themeWrites(scene, theme, void 0, from), opts.measure);
+    scene.doc.set(DIAGRAM_THEME_KEY, themeDocValue(theme));
+  }, opts.coalesceKey !== void 0 ? { coalesceKey: opts.coalesceKey } : {});
+}
+var withTrait = (data, trait) => ({ ...data, diagram: trait });
+function setDiagramStyle(scene, ids, role, opts = {}) {
+  const theme = opts.theme ?? diagramThemeOf(scene);
+  const styled = ids.filter((id) => {
+    const n = scene.get(id);
+    return n !== void 0 && diagramStyleOf(n) !== null;
   });
-  const selection = useSelection({ scene, mode: "single" });
-  const onClick = useMirroredSelection(selection, selected, onSelect);
-  const onMoveRef = useLatest(onMove);
-  const syncing = useRef(false);
-  const applied = useRef(specs);
-  const known = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
-    const read = () => {
-      const out = /* @__PURE__ */ new Map();
-      for (const n of scene.renderOrderNodes()) {
-        if (n.kind === "container") out.set(n.id, { x: n.pose.x, y: n.pose.y });
-      }
-      return out;
-    };
-    known.current = read();
-    return scene.subscribe(() => {
-      const now = read();
-      const moves = [];
-      if (!syncing.current) {
-        for (const [id, at] of now) {
-          const was = known.current.get(id);
-          if (was !== void 0 && (was.x !== at.x || was.y !== at.y)) moves.push({ id, ...at });
-        }
+  if (styled.length === 0) return;
+  scene.batch(opts.label ?? "Set style", () => {
+    for (const id of styled) {
+      const data = scene.get(id).data;
+      const { ownStyle: _, ...trait } = data.diagram;
+      scene.update(id, { data: withTrait(data, { ...trait, style: role }) });
+    }
+    writeAll(scene, themeWrites(scene, theme, new Set(styled)));
+  });
+}
+var painted = (paint, color) => ({ ...paint, paint: { ...paint?.paint, color } });
+function textNodesOf(scene, id, kind) {
+  if (kind === "shape") return scene.childrenOf(id).filter((c) => typeof scene.get(c)?.data?.text === "string");
+  return scene.renderOrderNodes().filter((n) => {
+    const deps = n.dependsOn;
+    return Array.isArray(deps) && deps.length === 1 && deps[0] === id && "label" in (n.data.diagram ?? {});
+  }).map((n) => n.id);
+}
+function setDiagramColor(scene, ids, field, color, opts = {}) {
+  scene.batch(opts.label ?? `Set ${field} color`, () => {
+    for (const id of ids) {
+      const node = scene.get(id);
+      const state = node === void 0 ? null : diagramStyleOf(node);
+      if (state === null || state.kind === "connector" && field === "fill") continue;
+      const data = node.data;
+      const own = state.own.includes(field) ? state.own : [...state.own, field];
+      const next = withTrait(data, { ...data.diagram, ownStyle: own });
+      if (field !== "text") next[field] = painted(data[field], color);
+      scene.update(id, { data: next });
+      if (field !== "text") continue;
+      for (const t of textNodesOf(scene, id, state.kind)) {
+        const text = scene.get(t).data;
+        scene.update(t, { data: { ...text, fill: painted(text.fill, color) } });
       }
-      known.current = now;
-      if (moves.length > 0) onMoveRef.current?.(moves);
-    });
-  }, [scene, onMoveRef]);
-  useEffect(() => {
-    if (applied.current === specs) return;
-    syncing.current = true;
-    try {
-      reconcileSpecs(scene, applied.current, specs);
-    } finally {
-      syncing.current = false;
     }
-    applied.current = specs;
-  }, [scene, specs]);
-  const source = useMemo(() => sceneParticipants(scene), [scene]);
-  const [run, setRun] = useState(null);
-  const live = useLiveLayout({ ...liveOpts, scene, source, algorithm: run?.algorithm ?? "force" });
-  useEffect(() => {
-    if (run !== null) live.restart();
-  }, [run, live]);
-  useImperativeHandle(apiRef, () => ({
-    layout: (algorithm = "force") => setRun({ algorithm }),
-    live
-  }), [live]);
-  const onConnectRef = useLatest(onConnect);
-  const connecting = onConnect !== void 0;
-  const ports = useMemo(() => connecting ? diagramPorts({
-    ...portOptions,
-    participants: source,
-    ...canConnect ? { canConnect } : {},
-    commit: ({ from, to }) => onConnectRef.current?.({
-      from: from.nodeId,
-      fromPort: from.id,
-      to: to.nodeId,
-      toPort: to.id
-    })
-  }) : null, [connecting, source, canConnect, portOptions, onConnectRef]);
-  const canvasRef = useRef(null);
-  useEffect(() => ports ? canvasRef.current?.registerLayer(ports.layer) : void 0, [ports]);
-  const ambient = useMemo(() => ports ? [...AMBIENT, ports.contribution] : AMBIENT, [ports]);
-  const controlled = view !== void 0;
-  const defaultView = useMemo(
-    () => controlled ? void 0 : fitDiagram(specs, { width, height }, { minScale, maxScale, anchor, padding: fitPadding }),
-    // The fit is where the view opens; a later `specs` keeps the view it has.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [controlled, width, height, minScale, maxScale, anchor, fitPadding]
-  );
-  return /* @__PURE__ */ jsx(
-    SceneCanvas,
-    {
-      ref: canvasRef,
-      scene,
-      selection,
-      features: onMove ? ["view", "pick", "move"] : ["view", "pick"],
-      enableKeybindings: enableKeybindings ?? (onMove !== void 0 || onConnect !== void 0),
-      ambient,
-      actions: NO_MARQUEE,
-      onClick,
-      width,
-      height,
-      className,
-      ...defaultView ? { defaultView } : {},
-      ...view ? { view } : {},
-      ...onViewChange ? { onViewChange } : {},
-      ...background ? { backgroundFill: background } : {}
+  });
+}
+function setDiagramFontSize(scene, ids, size, opts = {}) {
+  scene.batch(opts.label ?? "Set text size", () => {
+    const writes = /* @__PURE__ */ new Map();
+    for (const id of ids) {
+      const node = scene.get(id);
+      const state = node === void 0 ? null : diagramStyleOf(node);
+      if (state === null) continue;
+      const data = node.data;
+      if (!state.ownFont.includes("size")) scene.update(id, { data: withTrait(data, { ...data.diagram, ownFont: [...state.ownFont, "size"] }) });
+      for (const t of textNodesOf(scene, id, state.kind)) {
+        const text = scene.get(t).data;
+        writes.set(t, { ...text, style: { ...text.style, fontSize: size } });
+      }
     }
-  );
+    writeAll(scene, writes, opts.measure);
+  });
 }
-function fitDiagram(specs, size, fit = {}) {
-  const boxes = specs.filter((s) => s.kind === "container" || diagramGroupOf(s) !== null).map((s) => s.pose);
-  if (boxes.length === 0) return void 0;
-  const x = Math.min(...boxes.map((b) => b.x));
-  const y = Math.min(...boxes.map((b) => b.y));
-  const bounds = {
-    x,
-    y,
-    width: Math.max(...boxes.map((b) => b.x + b.width)) - x,
-    height: Math.max(...boxes.map((b) => b.y + b.height)) - y
+
+// src/theme/themeEdit.ts
+var isShippedTheme = (theme) => DIAGRAM_THEMES[theme.id] === theme;
+function forkTheme(theme) {
+  return { ...structuredClone(theme), id: `${theme.id}-edited`, name: `${theme.name} (edited)` };
+}
+var editableTheme = (theme) => isShippedTheme(theme) ? forkTheme(theme) : theme;
+function themeValue(theme, path) {
+  let at = theme;
+  for (const key of path) at = at?.[key];
+  return at;
+}
+function setIn(at, path, value) {
+  if (path.length === 0) return value;
+  const [key, ...rest] = path;
+  if (Array.isArray(at)) {
+    const copy = [...at];
+    copy[key] = setIn(copy[key], rest, value);
+    return copy;
+  }
+  const obj = at ?? {};
+  return { ...obj, [key]: setIn(obj[key], rest, value) };
+}
+var setThemeValue = (theme, path, value) => setIn(theme, path, value);
+function themeRoles(theme) {
+  const shipped = new Map(DIAGRAM_ROLES.map((r) => [r.id, r.label]));
+  const ids = [
+    ...DIAGRAM_ROLES.map((r) => r.id).filter((id) => id in theme.roles),
+    ...Object.keys(theme.roles).filter((id) => !shipped.has(id))
+  ];
+  return ids.map((id) => ({ id, label: theme.roleLabels?.[id] ?? shipped.get(id) ?? id }));
+}
+var slug = (label) => label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "role";
+function addThemeRole(theme, label) {
+  const base = slug(label);
+  let id = base;
+  for (let n = 2; id in theme.roles; n++) id = `${base}-${n}`;
+  return {
+    theme: { ...theme, roles: { ...theme.roles, [id]: { ...theme.roles[theme.defaultRole] } }, roleLabels: { ...theme.roleLabels, [id]: label } },
+    id
   };
-  return fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
-    maxScale: fit.maxScale ?? 1,
-    ...fit.minScale !== void 0 ? { minScale: fit.minScale } : {},
-    ...fit.anchor !== void 0 ? { anchor: fit.anchor } : {},
-    ...fit.padding !== void 0 ? { padding: fit.padding } : {}
-  });
+}
+var renameThemeRole = (theme, id, label) => id in theme.roles ? { ...theme, roleLabels: { ...theme.roleLabels, [id]: label } } : theme;
+function removeThemeRole(theme, id) {
+  if (id === theme.defaultRole || !(id in theme.roles)) return theme;
+  const { [id]: _, ...roles } = theme.roles;
+  const { [id]: __, ...labels } = theme.roleLabels ?? {};
+  return { ...theme, roles, ...theme.roleLabels ? { roleLabels: labels } : {} };
+}
+var DIAGRAM_THEME_EXTENSION = ".weasel-theme.json";
+var themeToJson = (theme) => `${JSON.stringify(theme, null, 2)}
+`;
+var isObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+function isColor(v) {
+  if (typeof v !== "string") return false;
+  try {
+    parseColor(v);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function checker(errors) {
+  const color = (path, v) => {
+    if (!isColor(v)) errors.push(`${path}: ${JSON.stringify(v)} is not a color`);
+  };
+  const box = (path, v) => {
+    if (!isObject(v)) return void errors.push(`${path}: missing`);
+    for (const field of ["fill", "stroke", "text"]) color(`${path}.${field}`, v[field]);
+  };
+  const text = (path, v) => {
+    if (typeof v !== "string" || v === "") errors.push(`${path}: missing`);
+  };
+  const font = (path, v) => {
+    if (!isObject(v)) return void errors.push(`${path}: missing`);
+    text(`${path}.family`, v.family);
+    if (typeof v.size !== "number" || !(v.size > 0)) errors.push(`${path}.size: ${JSON.stringify(v.size)} is not a size`);
+  };
+  return { color, box, text, font };
+}
+function checkTheme(t, errors) {
+  const { color, box, text, font } = checker(errors);
+  text("id", t.id);
+  text("name", t.name);
+  if (!isObject(t.roles) || Object.keys(t.roles).length === 0) errors.push("roles: missing");
+  else for (const [id, style] of Object.entries(t.roles)) box(`roles.${id}`, style);
+  if (typeof t.defaultRole !== "string") errors.push("defaultRole: missing");
+  else if (isObject(t.roles) && !(t.defaultRole in t.roles)) errors.push(`defaultRole: no role ${JSON.stringify(t.defaultRole)}`);
+  if (t.roleLabels !== void 0) {
+    if (!isObject(t.roleLabels)) errors.push("roleLabels: not an object");
+    else for (const [id, label] of Object.entries(t.roleLabels)) text(`roleLabels.${id}`, label);
+  }
+  if (!isObject(t.edge)) errors.push("edge: missing");
+  else color("edge.stroke", t.edge.stroke);
+  if (!isObject(t.label)) errors.push("label: missing");
+  else {
+    color("label.fill", t.label.fill);
+    if (t.label.font !== void 0) font("label.font", t.label.font);
+  }
+  box("container", t.container);
+  if (!isObject(t.lane)) errors.push("lane: missing");
+  else {
+    box("lane.header", t.lane.header);
+    if (!Array.isArray(t.lane.bodies) || t.lane.bodies.length === 0) errors.push("lane.bodies: missing");
+    else t.lane.bodies.forEach((b, i) => box(`lane.bodies.${i}`, b));
+  }
+  color("page", t.page);
+  font("font", t.font);
+  if (!Array.isArray(t.series)) errors.push("series: missing");
+  else t.series.forEach((c, i) => color(`series.${i}`, c));
+}
+function parseDiagramTheme(json) {
+  let raw;
+  try {
+    raw = JSON.parse(json);
+  } catch (err) {
+    return { errors: [`not JSON: ${err.message}`] };
+  }
+  if (!isObject(raw)) return { errors: ["a theme is an object"] };
+  const errors = [];
+  checkTheme(raw, errors);
+  return errors.length > 0 ? { errors } : { theme: raw };
 }
 
-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, boxAround, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layeredRoutes, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, selfLoop, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
+export { CONNECTOR_ACTION_ID, CONNECTOR_TOOL_ID, DIAGRAM_PASS_ORDER, DIAGRAM_THEME_EXTENSION, FLOWCHART_STENCILS, FOLLOW_OFF_PAGE_ACTION_ID, addThemeRole, applyDiagramTheme, connectorTool, createFollowOffPageAction, diagramOffPage, diagramStyleOf, diagramThemeFromTokens, documentBoundsOf, editableTheme, followOffPageBinding, forkTheme, hopFollower, installAvoidRouting, installHops, installLabelPlacement, installOffPageMarkers, isShippedTheme, offPageOps, offPageTargetOf, parseDiagramTheme, removeThemeRole, renameThemeRole, rendererMeasure, routeDataOps, setDiagramColor, setDiagramFontSize, setDiagramStyle, setThemeValue, stencilBuild, stencilIdOf, stencilKind, stencilTool, themeRoles, themeToJson, themeValue, useAvoidRouting, useConnectorTool, useHops, useLabelPlacement, useOffPageMarkers, useStencilInsert, useStencilTool, waypointFollower };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map