@weasel-js/diagram 1.10.1 → 1.11.1

package/dist/index.d.ts

@@ -1,57 +1,144 @@
-import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, c as PortAnchor, d as DiagramGroup, R as Row, O as Outline, e as PortSpec, B as BodySpec, f as DiagramNode, L as LayoutFn, g as LayoutOptions, M as MeasureRowText, G as GraphSource, F as ForceOptions, h as LayoutResult, i as Graph, j as LayoutDirection } from './layout.entry-BUkiRKuX.js';
-export { k as BodyFloor, l as BodyNodeSpec, m as Bounds, n as BuildBodyOptions, o as BuildGraphOptions, C as COMPASS, p as DEFAULT_GROUP_INSET, q as DEFAULT_NODE_GAP, r as DEFAULT_PORTS, s as DEFAULT_RANK_GAP, t as DIAGRAM_TRAIT_KEY, u as DiagramNodeEntry, v as ForceBody, w as ForceRelaxation, x as Forest, y as GraphEdge, z as GraphGroup, A as GraphNode, E as GraphNodeLike, H as GroupInset, I as LayoutAxes, J as RowBox, K as RowNodeData, N as RowPort, Q as RowPortBox, S as RowTextStyle, T as Slot, U as axesFor, V as backEdges, W as bodyOutline, X as bodyTrait, Y as boxForContent, Z as buildBody, _ as buildGraph, $ as canvasMeasure, a0 as contentBox, a1 as createDiagramNodes, a2 as dataKeyReader, a3 as diagramNodeOf, a4 as expandGroupEdges, a5 as force, a6 as forceRelaxation, a7 as forestOf, a8 as graphOrder, a9 as insetOf, aa as isPinned, ab as layered, ac as layoutBody, ad as layoutRowPorts, ae as measureBody, af as outlinePath, ag as outlinePolyline, ah as packAcross, ai as packClusters, aj as pinnedSet, ak as portOf, al as portsOf, am as portsOnOutline, an as rankGaps, ao as ranksOf, ap as rayHit, aq as seededOrder, ar as settle, as as sizeToBody, at as translated, au as tree, av as untilSettled } from './layout.entry-BUkiRKuX.js';
-import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, CommandFill, CommandStroke, CursorSpec, Affordance, InvocationCtx, Stroke, GestureBinding, Action, Contribution, RenderLayer, MarkerRef, AddNodeSpec, RectPose, Scene, NodeId, Fill, NodeShapeEntry, Paint, View, SelectionApi } from '@weasel-js/core';
-import { Vec2 as Vec2$1 } from '@weasel-js/core/math';
+import { g as Port, h as DiagramNodeLike, i as DiagramNodeReader, O as Outline, a as Row, M as MeasureRowText, C as ContainerRole, j as DiagramContainer, k as ContainerHeader, c as DiagramLabel, l as LabelSpot, E as EdgeHop, R as RowTextStyle, m as Bounds$2, e as LayoutOptions, n as LayoutResult, G as Graph, d as LayoutFn, o as GraphSource, p as LayoutPlanner, q as LayoutDirection, L as LayoutPorts, r as LayoutPlan, s as GraphNodeLike, S as StyleField, F as FontField } from './types-BbHunLXm.js';
+export { t as BodyFloor, u as BodyNodeSpec, B as BodySpec, v as BuildBodyOptions, w as BuildGraphOptions, x as DEFAULT_GROUP_INSET, y as DEFAULT_HOP_SIZE, z as DEFAULT_NODE_GAP, A as DEFAULT_RANK_GAP, H as DIAGRAM_TRAIT_KEY, D as DiagramGroup, f as DiagramNode, I as DiagramNodeEntry, J as EdgeLabelRoom, K as GraphEdge, N as GraphGroup, Q as GraphNode, T as GroupInset, U as HOPS_DOC_KEY, V as HopsDocValue, W as LABEL_PLACEMENT, X as LayoutAxes, Y as PORT_LABEL_GAP, Z as PerimeterPortLabelBox, P as PortAnchor, _ as PortLabelPlacement, $ as PortSite, b as PortSpec, a0 as RowBox, a1 as RowNodeData, a2 as RowPort, a3 as RowPortBox, a4 as Slot, a5 as anchorOffset, a6 as axesFor, a7 as bodyBox, a8 as bodyOutline, a9 as bodyTrait, aa as boxForContent, ab as buildBody, ac as buildGraph, ad as canvasMeasure, ae as contentBox, af as createDiagramNodes, ag as dataKeyReader, ah as diagramContainerOf, ai as diagramLabelOf, aj as diagramNodeOf, ak as expandGroupEdges, al as graphOrder, am as headerBox, an as insetOf, ao as isPinned, ap as layoutBody, aq as layoutRowPorts, ar as marginOf, as as measureBody, at as outlinePath, au as packAcross, av as packClusters, aw as pinnedSet, ax as planOf, ay as plannerPlan, az as portLabelBox, aA as portLabelsOf, aB as rankGaps, aC as seededOrder, aD as settle, aE as sizeToBody, aF as titleIdOf, aG as translated, aH as untilSettled } from './types-BbHunLXm.js';
+import { P as PortsOptions, A as AvoidInput, a as AvoidRouter, b as AvoidOptions, c as AvoidRoutes, d as PlaceLabelsOptions, F as ForceOptions } from './layout.entry-CH9gc0CY.js';
+export { e as AVOID_DEFAULTS, f as AvoidEdge, g as AvoidEnd, h as AvoidLabel, i as AvoidObstacle, j as AvoidPort, k as AvoidUpdateOptions, C as COMPASS, D as DEFAULT_PORTS, l as ForceBody, m as ForceRelaxation, n as Forest, L as LabelPlacements, o as LayeredPlan, p as PlaceLabel, q as PlaceLabelsInput, r as PlaceRoute, s as backEdges, t as chain, u as createAvoidRouter, v as edgeHops, w as footprintNode, x as force, y as forceRelaxation, z as forestOf, B as labelCenter, E as layered, G as layeredPlan, H as outlinePolyline, I as placeLabels, J as portOf, K as portSitesOf, M as portsOf, N as portsOnOutline, O as ranksByLength, Q as ranksOf, R as rayHit, S as routeHolds, T as tree } from './layout.entry-CH9gc0CY.js';
+import { Vec2, ActionDeps, Action, InvocationCtx, TargetPredicate, GestureBinding, Contribution, DerivedDep, Path, SceneRegistry, paintsLayer, PoseDescriptor, ChromeState, CommandFill, CommandStroke, CursorSpec, Affordance, Stroke, Tool, Op, AddNodeSpec, RectPose, NodeId, Scene, LayoutStrategy, ContainerBounds, RenderLayer, TransformFollower, PlacedPage, Bounds as Bounds$3, GatedLayer, Fill, NodeShapeEntry, Paint, View, SelectionApi } from '@weasel-js/core';
+import { Vec2 as Vec2$1, Path as Path$2 } from '@weasel-js/core/math';
+import { c as DataEdge, a as DiagramData, b as DiagramSceneOptions, f as DiagramSpec, g as EdgeEnd, N as NodeStyle, h as DiagramSceneData, i as DiagramEdge, O as OffPageSplit, D as DiagramTheme, j as DataContainer, E as EdgeStyle, d as DataNode } from './dataTypes-B-iEwKZp.js';
+export { A as ANCHOR_DERIVE_POSE, k as DEFAULT_LANE_SIZE, l as DEFAULT_POOL_ACROSS, m as DIAGRAM_ANCHOR, n as DIAGRAM_GROUP, o as DIAGRAM_ROLES, p as DIAGRAM_THEME_KEY, q as DataGroup, r as DataLane, s as DataMark, t as DiagramAnchor, u as DiagramDerivePose, v as DiagramFont, w as DiagramMark, x as DiagramRole, e as DiagramRouter, y as DiagramTextStyle, z as EDGE_STROKE_WIDTH, G as GROUP_DERIVE_POSE, B as GroupPoseOptions, L as LANE_STROKE_WIDTH, C as NODE_STROKE_WIDTH, F as OffPageTag, H as anchorDerivePose, I as boxAround, J as diagramAnchorOf, K as diagramEdgeOf, M as diagramGroupOf, P as diagramMarkOf, Q as groupDerivePose, R as layoutOwnsPort, S as layoutOwnsRoute, T as layoutWritesRoute, U as markShape, V as offPageTagId, W as offPageTagOf, X as registerMarkShape, Y as rowTextStyle } from './dataTypes-B-iEwKZp.js';
+import { IconRef } from '@weasel-js/icons';
+import { Path as Path$1, Placement } from '@weasel-js/geom';
 import { EasingFn } from '@weasel-js/animator';
 import * as react from 'react';
-import '@weasel-js/geom';
+import { ReactNode } from 'react';
 import '@weasel-js/simulation';
 
+/** The scene node id `diagramScene` gives an edge: its `id` when set, else one
+ *  built from its ends, ports, and label. Two edges differing in any of those
+ *  get different ids, an empty port or label included: a `.`, `>`, `:`, `/` or
+ *  `\` in one of them is escaped with a backslash. */
+declare const edgeIdOf: (e: DataEdge) => string;
+
+/** Every spec carries an id — a node's own, `<id>/<k>` for its text,
+ *  `<id>/mark:<i>` for its marks, `<edge id>/label`, a group's own and
+ *  `<group id>/label`, a region's own and `<region id>/title` — so a later call's
+ *  specs can be reconciled against this one's. Throws on a repeated id among
+ *  nodes, groups, containers and lanes, which names two things as one. An edge whose
+ *  end is not a node is dropped, and so is a repeat of an earlier edge with
+ *  the same ends, ports and label: it would draw exactly on top of the first. */
+declare function diagramScene<TLayer extends string>(data: DiagramData, opts: DiagramSceneOptions<TLayer> & {
+    layer: TLayer;
+}): DiagramSpec<TLayer>[];
+declare function diagramScene(data: DiagramData, opts?: DiagramSceneOptions): DiagramSpec[];
+
 /**
- * `DiagramEdge` — a connection between two participants.
- *
- * An edge is an ordinary leaf scene node with `dependsOn: [from, to]` and a
- * `derivePath` that runs a **router**. Being a scene node rather than a
- * plugin-owned render layer buys selection, hit-testing, hover, styling,
- * z-order, SVG export, undo, and copy/paste. The cost is that an edge costs
- * what a node costs — right for tens to hundreds of edges, wrong for a
- * 10k-edge force graph.
- *
- * **Author-dragged waypoints are data on the edge and the router routes
- * through them**, so a moved endpoint still re-routes.
- *
- * Arrowheads are not here. They are stroke markers, the same
- * `markerStart` / `markerEnd` any other stroke carries.
+ * The `'slide'` look of a reorder: the carried item under the pointer and the
+ * others in the places they would take, published as pose overrides so
+ * everything that derives its pose from them follows.
  */
 
-/** Where an edge attaches at one end. */
-interface EdgeEnd {
-    /** The port to leave from, when the endpoint declares one. Falls back to
-     *  the nearest port, so an edge drawn before ports were thought about still
-     *  meets the shape. */
-    port?: string;
+type Box$3 = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+
+/**
+ * Reorder: dragging one item of a drawn sequence — boxes in a row, rows in a
+ * column, the members of a group — to another place in it. The item follows
+ * the pointer along the sequence's axis and lands in the gap nearest its
+ * middle. A `'bar'` drag marks that gap with an insertion bar; a `'slide'`
+ * drag slides the other items into the places they would take. Either way
+ * the release hands the move to a commit, and nothing is written to the scene.
+ */
+
+/** The action that drags an item of a sequence to another place in it. */
+declare const REORDER_ACTION_ID = "diagram.reorder";
+/** One item of a sequence, in world units. */
+interface ReorderItem {
+    /** The scene node drawn for it. */
+    id: string;
+    bounds: Box$3;
+    /** Where a press picks it up. Default `bounds`; `null` never picks it up, though it keeps its gaps. */
+    grip?: Box$3 | null;
+    /** The scene nodes that move with it, in either `show` mode. Default `[id]`. */
+    carries?: readonly string[];
 }
-/** The trait on an edge's `data`, under the same key participants use. */
-interface DiagramEdge {
-    from: EdgeEnd;
-    to: EdgeEnd;
-    /** Registry key for the router. Resolved by whoever builds the edge's
-     *  `derivePath`; unknown keys fall back to `straight`. */
-    router?: string;
-    /** Points in world coordinates the route must pass through, in order. The
-     *  author owns these; the router owns everything between them. */
-    waypoints?: readonly Vec2[];
+/** A place an item can land: before `items[index]`, or after the last at `items.length`. */
+interface ReorderGap {
+    index: number;
+    /** The insertion bar's two ends. */
+    a: Vec2;
+    b: Vec2;
+}
+/** A drawn sequence: its items in order along `axis`, and the gaps between them. */
+interface ReorderSlots {
+    axis: 'x' | 'y';
+    items: readonly ReorderItem[];
+    gaps: readonly ReorderGap[];
+}
+/** The item at index `from` dropped in gap `to`, and every item's id in the order that leaves. */
+interface ReorderMove {
+    id: string;
+    from: number;
+    to: number;
+    order: readonly string[];
 }
-/** What a router is given: the two resolved ends, and the author's waypoints
- *  between them. */
+/** Options for {@link createReorderAction}. */
+interface ReorderOptions {
+    /** Default {@link REORDER_ACTION_ID}. */
+    id?: string;
+    /** Default 'Reorder'. */
+    label?: string;
+    /** The sequence a press at `at` picks from, as drawn now, or `null` when there is none. */
+    slots: (deps: ActionDeps, at: Vec2) => ReorderSlots | null;
+    /** Deps `slots` reads beyond `scene`. */
+    requires?: Action['requires'];
+    /**
+     * `'bar'` (default) carries the item and draws an insertion bar at its
+     * gap. `'slide'` carries everything each item `carries` as pose overrides,
+     * so what derives from them follows, and slides the others into place; the
+     * overrides stay after a commit until the scene next changes.
+     */
+    show?: 'bar' | 'slide';
+    /** Whether a drop may land. The bar draws refused, or nothing slides, where not. Default: every drop. */
+    canDrop?: (move: ReorderMove) => boolean;
+    /** Called once, on release over a gap that is not the item's own and that `canDrop` allows. */
+    commit: (move: ReorderMove, ctx: InvocationCtx) => void;
+}
+/**
+ * The slots of items laid out in order along `axis`: a gap halfway between
+ * each pair, its bar spanning both across the axis, and one beyond each end,
+ * as far out as the nearest interior gap's half, or `END_GAP / 2` with none.
+ */
+declare function sequenceSlots(axis: 'x' | 'y', items: readonly ReorderItem[]): ReorderSlots;
+/** The `diagram.reorder` action: an ongoing drag carrying one item of a sequence. */
+declare function createReorderAction(opts: ReorderOptions): Action;
+/** The binding that starts a reorder: a drag pressed on `on`, by default anywhere; the action declines off an item's grip. */
+declare function reorderBinding(actionId?: string, on?: TargetPredicate): GestureBinding;
+/** The reorder action and its binding, to pass as `ambient`. */
+declare function reorderContribution(opts: ReorderOptions & {
+    on?: TargetPredicate;
+}): Contribution;
+
+/**
+ * The routers an edge is drawn with: functions from two resolved ends and the
+ * waypoints between them to the points the edge runs through. `edge` resolves
+ * the ends and calls one by the key the edge names.
+ */
+
+/** What a router is given: the two resolved ends, the author's waypoints
+ *  between them, and the route stored on the edge, when it holds one. */
 interface RouteRequest {
     from: Port;
     to: Port;
-    waypoints: readonly Vec2[];
+    waypoints: readonly Vec2$1[];
+    route?: readonly Vec2$1[] | undefined;
 }
 /** A router returns the points the edge runs through, `from.point` first and
  *  `to.point` last. */
-type Router = (req: RouteRequest) => readonly Vec2[];
+type Router = (req: RouteRequest) => readonly Vec2$1[];
 /** The straight run between the two ends, through any waypoints. */
 declare const straight: Router;
 /**
@@ -73,15 +160,36 @@ declare const orthogonal: Router;
  * same thing.
  */
 declare const bezier: Router;
+/**
+ * The route the obstacle-avoiding router stored on the edge, while it still
+ * fits the ends and passes every waypoint; else `orthogonal` through the stops,
+ * so an end moved by something that did not reroute still draws sensibly.
+ * The route itself is computed at edit time (`useAvoidRouting`).
+ */
+declare const avoid: Router;
 /** The routers this package ships. A consumer's own go in the same shape. */
 declare const ROUTERS: Readonly<Record<string, Router>>;
-/** The edge trait on a node's data, or `null`. */
-declare function diagramEdgeOf(node: {
-    data: unknown;
-}): DiagramEdge | null;
+
+/**
+ * `DiagramEdge` — a connection between two participants.
+ *
+ * An edge is an ordinary leaf scene node with `dependsOn: [from, to]` and a
+ * `derivePath` that runs a **router**. Being a scene node rather than a
+ * plugin-owned render layer buys selection, hit-testing, hover, styling,
+ * z-order, SVG export, undo, and copy/paste. The cost is that an edge costs
+ * what a node costs — right for tens to hundreds of edges, wrong for a
+ * 10k-edge force graph.
+ *
+ * **Author-dragged waypoints are data on the edge and the router routes
+ * through them**, so a moved endpoint still re-routes.
+ *
+ * Arrowheads are not here. They are stroke markers, the same
+ * `markerStart` / `markerEnd` any other stroke carries.
+ */
+
 /**
- * The port an end resolves to: the one it named, else the port facing the
- * other end most directly.
+ * The port an end resolves to: the one it named, at whichever of its places
+ * faces `toward` most directly, else the port facing `toward` most directly.
  *
  * "Facing" rather than "nearest": a port on the far side of a wide node can be
  * closer in a straight line than the one pointing at the target.
@@ -102,12 +210,36 @@ interface EdgeRouteOptions<TPose> extends PortsOptions<TPose> {
  * sides {@link selfLoop} picks, and where the author set no waypoints the
  * router is handed that rule's point outside the node as one.
  *
+ * An edge carrying `hops` bows over each one that still lies on its route.
+ *
  * Returns `null` — nothing to draw — when the node is not an edge, when either
  * dependency is gone, or when an endpoint offers no ports at all.
  */
 declare function edgeDerivePath<TPose>(opts?: EdgeRouteOptions<TPose>): (node: {
     data: unknown;
 }, deps: readonly (DerivedDep<TPose> | undefined)[]) => Path | null;
+/** An edge's route as {@link edgeDerivePath} draws it, before it becomes a path. */
+interface ResolvedRoute {
+    /** The two ends, resolved. */
+    from: Port;
+    to: Port;
+    /** What the router was handed between them: the author's waypoints, or a
+     *  self-loop's turning point. */
+    waypoints: readonly Vec2[];
+    /** The router's answer, `from.point` first and `to.point` last. */
+    points: readonly Vec2[];
+    /** Set while the edge is split across pages (`DiagramEdge.offPage`): the
+     *  two runs drawn in place of `points`, one out of `from` to its tag's
+     *  side and one from the other tag's side into `to`. */
+    stubs?: readonly [readonly Vec2[], readonly Vec2[]];
+}
+/** How far a split edge's stub runs out of its shape, in world units. */
+declare const OFF_PAGE_STUB = 24;
+/** Routes an edge between its two dependencies the way {@link edgeDerivePath}
+ *  does, answering the route itself; null where that draws nothing. */
+declare function edgeRouter<TPose>(opts?: EdgeRouteOptions<TPose>): (node: {
+    data: unknown;
+}, deps: readonly (DerivedDep<TPose> | undefined)[]) => ResolvedRoute | null;
 /** Registry key for {@link EDGE_DERIVE_PATH}. */
 declare const DIAGRAM_EDGE = "diagram:edge";
 /** The default edge router, as one stable function reference so `toJSON` can
@@ -153,7 +285,23 @@ declare const PORT_AFFORDANCE_KIND: "layer:diagram-ports";
 interface ParticipantPose<TPose> {
     node: DiagramNodeLike;
     pose: TPose;
+    /** Not drawn: on a hidden layer, or hidden on its own or by an ancestor.
+     *  `sceneParticipants` answers it from the scene's `nodeGates`. */
+    hidden?: boolean;
+    /** Out of reach: locked, or on a locked layer. */
+    locked?: boolean;
+    /** The scene layer the node is painted on, which the asking view may not
+     *  paint (`ChromeState.layerIsPainted`, `ViewApi.layerIsPainted`). */
+    layer?: string;
 }
+/** Whether a participant's ports are drawn, grabbed and landed on. A hidden
+ *  or locked node gets none, as it gets no selection or hover chrome either,
+ *  and nor does one on a layer the asking view does not paint. */
+declare function offersPorts(p: {
+    hidden?: boolean;
+    locked?: boolean;
+    layer?: string;
+}, view?: Parameters<typeof paintsLayer>[0]): boolean;
 /** Where the affordance gets its participants. A thunk rather than a scene so
  *  the geometry is testable without one, and so a consumer whose participants
  *  come from somewhere else needs no adapter. */
@@ -178,13 +326,21 @@ interface PortAffordanceOptions<TPose> {
     /** Which participants show their ports. Default: all of them. Gate on
      *  selection or hover by reading `state`. */
     shows?: (node: DiagramNodeLike, state: ChromeState) => boolean;
+    /** Which of a participant's ports show. Default: all of them. A port
+     *  this turns away is not painted or grabbable, and passed with the connect
+     *  options (as `diagramPorts` and `DiagramView` do), no connect lands on it. */
+    showsPort?: (port: Port) => boolean;
     /** Screen-pixel hit radius. Default 8, the kit's `HANDLE_BASE_PX`. */
     hitRadiusPx?: number;
-    /** Screen-pixel side of the painted square. Default 7. Omit `paint` entirely
-     *  by passing 0 — a port the consumer draws itself is still hittable. */
+    /** Screen-pixel size of the painted mark: a square's side, or a circle's
+     *  diameter. Default 7. Omit `paint` entirely by passing 0 — a port the
+     *  consumer draws itself is still hittable. */
     sizePx?: number;
-    fill?: CommandFill;
+    /** One fill for every port, or a function of the port — its `type`, say. */
+    fill?: CommandFill | ((port: Port) => CommandFill);
     stroke?: CommandStroke;
+    /** Default `'square'`. */
+    shape?: 'square' | 'circle';
     cursor?: CursorSpec;
     /** Default `'exclusive'` on pointer gestures: a drag from a port is a
      *  connect, never a move of the node underneath it. */
@@ -201,6 +357,36 @@ declare function portScratchOf(hit: {
  */
 declare function createPortAffordance<TPose>(participants: ParticipantSource<TPose>, opts?: PortAffordanceOptions<TPose>): Affordance;
 
+/** An end on a participant's body rather than on one of its ports. `point` is
+ *  where the pointer was, in world coordinates. */
+interface BodyEnd {
+    kind: 'body';
+    nodeId: string;
+    point: Vec2$1;
+}
+/** Either end of a connect. */
+type ConnectEnd = Port | BodyEnd;
+/** Whether a connect end lands on a node's body rather than a port. */
+declare function isBodyEnd(end: ConnectEnd): end is BodyEnd;
+/** A body under the pointer, and the participant it belongs to. */
+interface BodyHit<TPose> {
+    end: BodyEnd;
+    participant: ParticipantPose<TPose>;
+}
+/** The view a connect started in, which decides what layers it may reach. */
+type ConnectView = Parameters<typeof offersPorts>[1];
+/**
+ * The topmost participant whose body contains `at`, or `null`.
+ *
+ * Its outline when it declares one, else its bounds, both taken in the pose's
+ * unrotated frame. Edges, edge labels and group boxes are not bodies, and nor
+ * is anything the reader does not take as a participant or that `offersPorts`
+ * turns away.
+ */
+declare function bodyAt<TPose>(participants: ParticipantSource<TPose>, at: Vec2$1, opts?: PortsOptions<TPose> & {
+    view?: ConnectView;
+}): BodyHit<TPose> | null;
+
 /**
  * The connect gesture — dragging one port onto another to author an edge.
  *
@@ -217,17 +403,26 @@ declare function createPortAffordance<TPose>(participants: ParticipantSource<TPo
  *
  * One resolver answers both the live preview and the commit, so the preview
  * cannot lie about what releasing will do.
+ *
+ * With `bodies`, a release over a participant's body away from any port lands
+ * on the body (`connectTargets`); with `startFrom: 'body'`, so can the press.
  */
 
 /** The default action id, and what {@link connectBinding} points at. */
 declare const CONNECT_ACTION_ID = "diagram.connect";
-/** Whether an edge may run from `from` to `to`. */
-type CanConnect = (from: Port, to: Port) => boolean;
-/** The edge a finished connect describes. Both ends are resolved ports, so a
- *  consumer minting the node has nothing left to look up. */
+/** The edge end a reconnect is carrying: the scene id of the edge, and which end. */
+interface MovingEnd {
+    edge: string;
+    end: 'from' | 'to';
+}
+/** Whether an edge may run from `from` to `to`. `moving` is the end being
+ *  dragged when the edge already exists, and absent for a new connect. */
+type CanConnect = (from: ConnectEnd, to: ConnectEnd, moving?: MovingEnd) => boolean;
+/** The edge a finished connect describes. Each end is a resolved port, or a
+ *  body whose port the edge picks each time it is routed. */
 interface PendingEdge {
-    from: Port;
-    to: Port;
+    from: ConnectEnd;
+    to: ConnectEnd;
     /** Registry key for the router the new edge should name. */
     router: string;
 }
@@ -236,7 +431,8 @@ interface PendingEdge {
  * declare a `type` must declare the same one.
  *
  * A port with no type joins anything. Two different ports on the *same node*
- * may be joined: a self-edge is meaningful in a state machine.
+ * may be joined: a self-edge is meaningful in a state machine. A body is
+ * untyped, and never joins its own node.
  */
 declare const defaultCanConnect: CanConnect;
 /** Options for {@link createConnectAction}. Only `participants` is required. */
@@ -250,6 +446,10 @@ interface ConnectActionOptions<TPose> {
     geometry?: PoseDescriptor<TPose>;
     /** Default {@link defaultCanConnect}. */
     canConnect?: CanConnect;
+    /** Which ports a connect may land on: a port this turns away is never a
+     *  target. The port affordance's option of the same name, so a port that is
+     *  not shown cannot be dropped onto. Default: all of them. */
+    showsPort?: (port: Port) => boolean;
     /** How near the pointer must come to a port, in world units, before the
      *  edge snaps to it. Default 16. */
     snapRadius?: number;
@@ -257,13 +457,22 @@ interface ConnectActionOptions<TPose> {
      *  Default `'straight'`. */
     router?: string;
     routers?: Readonly<Record<string, Router>>;
+    /** A release over a participant's body, with no port in reach, lands on the
+     *  body. Default false. */
+    bodies?: boolean;
+    /** `'body'`: a press that is not on a port starts from the participant
+     *  under it. Default `'port'`, where such a press falls through. */
+    startFrom?: 'port' | 'body';
     /**
-     * Mints and commits the edge. Called once, on release over a valid port.
+     * Mints and commits the edge. Called once, on release over a valid target.
      *
      * Defaults to {@link commitEdgeToScene} against `deps.scene`. Override it to
      * choose the edge node's data, its layer, or its stroke.
      */
     commit?: (edge: PendingEdge, ctx: InvocationCtx) => void;
+    /** What the default commit draws the edge with. Default {@link DEFAULT_EDGE_STROKE}.
+     *  Ignored when `commit` is given. */
+    edgeStroke?: Stroke;
 }
 /** What a connect-authored edge is drawn with, when the consumer overrides
  *  nothing. */
@@ -289,21 +498,722 @@ declare const GRAB_PORT_ACTION_ID = "diagram.grabPort";
  * happens.
  */
 declare function grabPortAction(id?: string): Action;
-/** The two bindings that keep a port's claim from dropping the press. */
-declare function grabPortBindings(actionId?: string): GestureBinding[];
+/** The two bindings that keep a port's claim from dropping the press. `kind`
+ *  names another affordance that claims the press protocol the same way. */
+declare function grabPortBindings(actionId?: string, kind?: string): GestureBinding[];
 /**
  * The default commit: one leaf node carrying the edge trait, added to
  * `deps.scene`. One `add` is one history entry, so the edge undoes in one.
  *
  * The edge lands on the **source node's** layer rather than the bottom one.
  */
-declare function commitEdgeToScene(edge: PendingEdge, ctx: InvocationCtx): void;
+declare function commitEdgeToScene(edge: PendingEdge, ctx: InvocationCtx, opts?: {
+    stroke?: Stroke;
+}): void;
 /**
  * The `diagram.connect` action: an ongoing drag whose preview is an ephemeral
  * edge and whose commit is one op batch.
  */
 declare function createConnectAction<TPose>(opts: ConnectActionOptions<TPose>): Action;
 
+/** The connector tool's id. */
+declare const CONNECTOR_TOOL_ID = "diagram.connector";
+/** The action the connector tool binds a drag to. */
+declare const CONNECTOR_ACTION_ID = "diagram.connectorDraw";
+/** The connector tool's definition, outside React. `id`, `startFrom` and
+ *  `bodies` are the tool's own. */
+declare function connectorTool<TPose>(opts: ConnectActionOptions<TPose>): Tool;
+/** {@link connectorTool}, rebuilt when one of its options changes rather than
+ *  when the bag holding them does. */
+declare function useConnectorTool<TPose>(opts: ConnectActionOptions<TPose>): Tool;
+
+/**
+ * Stencils: the shapes a palette offers, as data, and what one becomes when it
+ * is drawn — a `buildBody` body whose rows are ordinary text nodes.
+ */
+
+/** One shape a palette offers. `size` is what a click places; `rows` default
+ *  to one empty label, so the body has a text node to type into. `icon` is its
+ *  tool's glyph in a palette. */
+interface DiagramStencil {
+    id: string;
+    label: string;
+    outline: Outline;
+    size: {
+        width: number;
+        height: number;
+    };
+    rows?: readonly Row[];
+    icon?: IconRef;
+}
+/** The basic flowchart symbols. */
+declare const FLOWCHART_STENCILS: readonly DiagramStencil[];
+/** The insert kind a stencil's tool passes to the `insert` dep. */
+declare const stencilKind: (id: string) => string;
+/** The stencil id an insert kind names, or `null` for a kind that is no stencil's. */
+declare function stencilIdOf(kind: string): string | null;
+type Bounds$1 = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * The ops that insert `stencil` at `bounds`: its container first, then one
+ * text node per text row. Applied as one batch, they are one undo entry.
+ * `style` colors the body and its text; default `diagramScene`'s node style.
+ * `font` is the face its text rows fall back on; default 12px sans-serif.
+ * `parent` is the container the body goes in; default the top level.
+ */
+declare function stencilBuild<TLayer extends string>(stencil: DiagramStencil, bounds: Bounds$1, opts: {
+    layer: TLayer;
+    newId: () => string;
+    measure?: MeasureRowText;
+    style?: NodeStyle;
+    font?: {
+        fontFamily: string;
+        fontSize: number;
+    };
+    parent?: string | null;
+}): {
+    id: string;
+    ops: Op[];
+};
+
+/**
+ * The node specs of a region — a container, a pool, or a lane — and its title,
+ * which a stencil drawn on the canvas and a `DiagramData` container both build
+ * from.
+ */
+
+/** A region's node spec, always with an id. */
+type RegionSpec<TLayer extends string> = AddNodeSpec<DiagramSceneData, TLayer, RectPose> & {
+    id: NodeId;
+};
+/** Options for `containerBuild`. */
+interface ContainerBuildOptions<TLayer extends string> {
+    layer: TLayer;
+    newId: () => string;
+    /** The box's fill, stroke and title colors. Default `diagramScene`'s node style. */
+    style?: NodeStyle;
+    /** The container the new one goes in. Default the top level. */
+    parent?: string | null;
+    /** A pool's header colors and its lanes' bodies in turn. Default `style` for both. */
+    laneStyles?: {
+        header: NodeStyle;
+        bodies: readonly NodeStyle[];
+    };
+}
+/** Options for {@link regionSpecs}. */
+interface RegionOptions<TLayer extends string> {
+    id: string;
+    layer: TLayer;
+    /** Default the top level. */
+    parent?: string | null;
+    /** Default `diagramScene`'s node style. */
+    style?: NodeStyle;
+    /** Marks a region whose box is fitted to its members each time it is built from data. */
+    fitted?: boolean;
+    /** The title's family. Default sans-serif. */
+    fontFamily?: string;
+}
+/** The node specs of one region, and its title unless `title` is null. */
+declare function regionSpecs<TLayer extends string>(role: ContainerRole, axis: 'x' | 'y', pose: RectPose, title: string | null, opts: RegionOptions<TLayer>): RegionSpec<TLayer>[];
+/** The lane specs a new pool at `at` starts with. */
+declare function firstLanes<TLayer extends string>(poolId: string, axis: 'x' | 'y', at: RectPose, opts: ContainerBuildOptions<TLayer>): RegionSpec<TLayer>[];
+
+/**
+ * The container stencils a palette offers, what one becomes when it is drawn,
+ * and the edits on one: adding a lane to a pool, and releasing a container's
+ * members.
+ */
+
+/** One container a palette offers. A pool stacks its lanes along `axis`. */
+interface ContainerStencil {
+    id: string;
+    label: string;
+    role: 'container' | 'pool';
+    axis?: 'x' | 'y';
+    size: {
+        width: number;
+        height: number;
+    };
+    /** The glyph a palette draws on its button. */
+    icon?: IconRef;
+}
+/** A titled box, and pools of rows and of columns. */
+declare const CONTAINER_STENCILS: readonly ContainerStencil[];
+type Bounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type AnyScene$3 = Scene<unknown, string, unknown>;
+/** The ops that insert `stencil` at `bounds`: the region and its title, and a
+ *  pool's first lanes. Applied as one batch, they are one undo entry. */
+declare function containerBuild<TLayer extends string>(stencil: ContainerStencil, bounds: Bounds, opts: ContainerBuildOptions<TLayer>): {
+    id: string;
+    ops: Op[];
+};
+/** The axis a pool stacks its lanes along, read off its header. */
+declare const poolAxisOf: (pool: DiagramContainer) => "x" | "y";
+/** The lanes of `poolId`, in the order they stack. */
+declare function lanesOf(scene: AnyScene$3, poolId: string): NodeId[];
+/**
+ * Add a lane to `poolId` before the lane at `index`, or at the end of the
+ * stack, as one history entry. The pool grows to hold it. Returns the new
+ * lane's id, or null when `poolId` is not a pool.
+ */
+declare function addLane(scene: AnyScene$3, poolId: string, index?: number, style?: NodeStyle): string | null;
+/**
+ * Remove container `id` and keep its members, which take its place in its
+ * parent, as one history entry. A pool's members are its lanes' members, and
+ * a lane's go past its pool. Connectors on what is removed go with it.
+ */
+declare function releaseMembers(scene: AnyScene$3, id: string): void;
+
+/** The tool that draws `stencil`, a shape's or a container's: its id is the stencil's insert kind. */
+declare function stencilTool(stencil: Pick<DiagramStencil, 'id' | 'label' | 'icon'>): Tool;
+/** {@link stencilTool}, rebuilt only when the stencil changes. */
+declare function useStencilTool(stencil: Pick<DiagramStencil, 'id' | 'label' | 'icon'>): Tool;
+/** Options for {@link useStencilInsert}. */
+interface StencilInsertOptions {
+    /** The layer bodies are inserted on. Default: the scene's first layer. */
+    layer?: string;
+    measure?: MeasureRowText;
+    /** The body's fill, stroke and text colors. Default `diagramScene`'s node style. */
+    style?: NodeStyle;
+    /** The face the body's text rows fall back on. Default 12px sans-serif. */
+    font?: {
+        fontFamily: string;
+        fontSize: number;
+    };
+    /** Container stencils to draw beside the shapes (`CONTAINER_STENCILS`). */
+    containers?: readonly ContainerStencil[];
+    /** Container stencils' box and title colors. Default `style`. */
+    containerStyle?: NodeStyle;
+    /** A new pool's header colors and its lanes' bodies in turn. Default `containerStyle`. */
+    laneStyles?: {
+        header: NodeStyle;
+        bodies: readonly NodeStyle[];
+    };
+}
+/**
+ * Registers the `insert` dep for stencil kinds. Any other kind goes to the
+ * `insert` dep this one displaced, so core's rect, ellipse and text tools
+ * keep working beside the stencils. A stencil drawn inside a container or a
+ * lane becomes its member (`diagramDropParentAt`).
+ */
+declare function useStencilInsert(stencils: readonly DiagramStencil[], opts?: StencilInsertOptions): void;
+
+type Box$2 = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Where a container's title sits: its header strip, turned a quarter to run
+ *  up a left header. */
+declare function titlePose(bounds: Box$2, header: ContainerHeader | undefined): RectPose;
+
+/**
+ * `diagramContainerLayout` — free placement under a header. A member stays
+ * wherever it is dropped or the container is resized to; only the title is
+ * placed, in the header.
+ *
+ * A strategy sees ids and poses, never data, so it cannot tell a lane from a
+ * shape. Which nodes a container admits is `diagramCanDropInto`'s call.
+ */
+
+/** Options for {@link diagramContainerLayout}. */
+interface ContainerLayoutOptions {
+    /** Where the title sits; matches the container trait's own `header`. */
+    header?: ContainerHeader;
+}
+/** A free-placement layout whose drops land in the body below or beside `header`. */
+declare function diagramContainerLayout(opts?: ContainerLayoutOptions): LayoutStrategy<RectPose>;
+
+/**
+ * `laneStackLayout` — a pool's lanes, stacked along one axis in the order they
+ * sit and stretched across the body past the header. The pool's size along
+ * the stack is the sum of its lanes; its size across is the author's.
+ *
+ * Like every strategy it sees ids and poses only: the title is told apart by
+ * its name, and which nodes a pool admits (lanes) is `diagramCanDropInto`'s call.
+ */
+
+/** Options for {@link laneStackLayout}. */
+interface LaneStackOptions {
+    /** The axis lanes stack along: `'y'` for a pool of rows, `'x'` for columns. */
+    axis: 'x' | 'y';
+    /** The header's depth, across the stack. Default {@link POOL_HEADER_SIZE}. */
+    headerSize?: number;
+}
+/** A pool header's default depth. */
+declare const POOL_HEADER_SIZE = 32;
+/** The least a lane is along the stack. */
+declare const MIN_LANE_SIZE = 40;
+/** The header a pool stacking along `axis` has: across the stack, at its start. */
+declare const poolHeader: (axis: "x" | "y", size?: number) => ContainerHeader;
+/** Where lanes of the given sizes sit, in order, in a pool at `bounds`. */
+declare function stackedLanes(axis: 'x' | 'y', bounds: ContainerBounds, header: ContainerHeader, lanes: readonly {
+    id: string;
+    size: number;
+}[]): Map<string, RectPose>;
+/** A pool stacking its lanes along `axis`. */
+declare function laneStackLayout(opts: LaneStackOptions): LayoutStrategy<RectPose>;
+
+/**
+ * The container layouts by registry key, as stable references so a saved
+ * scene finds them again (`withDiagramRegistry`).
+ */
+
+/** A plain container's header. */
+declare const CONTAINER_HEADER: ContainerHeader;
+/** A lane's header depth, across its pool's stack. */
+declare const LANE_HEADER_SIZE = 28;
+/** The header a lane of a pool stacking along `axis` has. */
+declare const laneHeader: (axis: "x" | "y") => ContainerHeader;
+/** A titled container's layout key: free placement in the body below its header. */
+declare const DIAGRAM_CONTAINER_LAYOUT = "diagram:container";
+/** A pool's layout key when its lanes stack as rows, top to bottom. */
+declare const DIAGRAM_POOL_ROWS_LAYOUT = "diagram:pool-rows";
+/** A pool's layout key when its lanes stack as columns, left to right. */
+declare const DIAGRAM_POOL_COLUMNS_LAYOUT = "diagram:pool-columns";
+/** The layout key of a lane in a pool of rows: free placement beside its left header. */
+declare const DIAGRAM_LANE_ROWS_LAYOUT = "diagram:lane-rows";
+/** The layout key of a lane in a pool of columns: free placement below its top header. */
+declare const DIAGRAM_LANE_COLUMNS_LAYOUT = "diagram:lane-columns";
+/** Every container layout this package registers, by key. */
+declare const CONTAINER_LAYOUTS: Readonly<Record<string, LayoutStrategy<RectPose>>>;
+/** The layout key and header for a container of `role`; a pool or lane's
+ *  follow the axis its pool stacks along. */
+declare function containerShape(role: ContainerRole, axis?: 'x' | 'y'): {
+    layout: string;
+    header: ContainerHeader;
+};
+
+type SceneLike = {
+    get(id: never): {
+        id: string;
+        kind: 'leaf' | 'container';
+        data: unknown;
+    } | undefined;
+};
+/**
+ * The `canDropInto` dep for a diagram scene. A container or a lane takes
+ * shapes and other containers, a pool takes only lanes, and a lane goes
+ * nowhere but a pool. A stencil body, an edge, or a label takes nothing, and
+ * edges and labels are never dropped in: they stay where they are, drawn from
+ * what they are attached to. Any other container — a plain group — takes
+ * anything but a lane.
+ */
+declare function diagramCanDropInto(scene: SceneLike): (parent: string, ids: readonly string[]) => boolean;
+/** What {@link diagramDropParentAt} walks. */
+interface DropParentScene {
+    readonly roots: readonly string[];
+    childrenOf(id: never): readonly string[];
+    get(id: never): {
+        id: string;
+        kind: 'leaf' | 'container';
+        data: unknown;
+        pose: unknown;
+    } | undefined;
+}
+/**
+ * The innermost container or lane whose body holds `point`, that would admit
+ * a new node of `role` (`null` for a shape): where an insert at `point` goes.
+ * Null for the top level — always so for a pool.
+ */
+declare function diagramDropParentAt(scene: DropParentScene, point: {
+    x: number;
+    y: number;
+}, role: ContainerRole | null): string | null;
+
+/**
+ * The lane affordances on every pool: the boundary after each lane, which a
+ * drag moves to resize that lane, and the add-lane button past the end of the
+ * stack. Built the way the edge-end handles are: regions with a `null`
+ * `targetId`, composed into a layer whose id is the kind a press reports.
+ */
+
+/** The layer id the lane affordances are composed into. */
+declare const LANE_LAYER_ID = "diagram-lanes";
+/** The affordance kind a press on a lane affordance reports. */
+declare const LANE_AFFORDANCE_KIND: "layer:diagram-lanes";
+/** What a press on a lane affordance hands the action: the boundary after
+ *  `laneId`, or, with no lane, the add-lane button. */
+interface LaneScratch {
+    targetId: string;
+    poolId: string;
+    laneId?: string;
+}
+/** Read a lane press's scratch back off the hit an action was handed. */
+declare function laneScratchOf(hit: {
+    payload?: unknown;
+} | null | undefined): LaneScratch | null;
+type AnyScene$2 = Scene<unknown, string, unknown>;
+/** A pool as the affordances see it: its box, the axis it stacks along, and its lanes in order. */
+interface PoolLanes {
+    id: string;
+    axis: 'x' | 'y';
+    pose: RectPose;
+    lanes: {
+        id: string;
+        pose: RectPose;
+    }[];
+}
+/** Every pool in `scene` that is drawn and not locked. */
+declare function poolsOf(scene: AnyScene$2): PoolLanes[];
+/** Options for {@link laneLayer}. */
+interface LaneLayerOptions {
+    /** Screen-pixel reach of a boundary either side of it. Default 4. */
+    hitRadiusPx?: number;
+    /** Screen-pixel diameter of the add-lane button. Default 14; 0 hides it. */
+    addSizePx?: number;
+    fill?: CommandFill;
+    stroke?: CommandStroke;
+}
+/** The affordance: a boundary region after each lane of each pool, and an add-lane button per pool. */
+declare function createLaneAffordance(scene: AnyScene$2, opts?: LaneLayerOptions): Affordance;
+/** The composed layer, for `CanvasExtensionApi.registerLayer`. */
+declare function laneLayer(scene: AnyScene$2, opts?: LaneLayerOptions): RenderLayer<unknown>;
+
+/**
+ * The container actions: dragging the boundary after a lane resizes it, the
+ * add-lane button adds one at the end of the stack, and Release members
+ * removes a container and keeps what it holds. The two lane gestures take a
+ * swappable commit; the default writes the scene.
+ */
+
+/** The action that drags a lane's boundary. */
+declare const LANE_RESIZE_ACTION_ID = "diagram.resizeLane";
+/** The action the add-lane button runs. */
+declare const ADD_LANE_ACTION_ID = "diagram.addLane";
+/** The command that removes the selected containers and keeps their members. */
+declare const RELEASE_MEMBERS_ACTION_ID = "diagram.releaseMembers";
+type AnyScene$1 = Scene<unknown, string, unknown>;
+/** A lane resized: its new size along its pool's stack. */
+interface LaneResize {
+    poolId: string;
+    laneId: string;
+    size: number;
+}
+/** The default commit: the lane's and the pool's new size, as one history
+ *  entry labeled "Resize lane". The pool's layout restacks the lanes after it. */
+declare function commitLaneResizeToScene(resize: LaneResize, ctx: InvocationCtx): void;
+/** Where everything stands with the lane at `index` of `pool` resized to `size`: the
+ *  lane, its title, the pool and its title, and every later lane with what it holds. */
+declare function laneResizeFrame(scene: AnyScene$1, pool: PoolLanes, index: number, size: number): Map<string, RectPose>;
+/** Options for the container actions. */
+interface LaneActionOptions extends LaneLayerOptions {
+    scene: AnyScene$1;
+    /** The selected ids, which Release members reads. */
+    selected?: () => readonly string[];
+    /** Defaults to {@link commitLaneResizeToScene}. */
+    commitResize?: (resize: LaneResize, ctx: InvocationCtx) => void;
+    /** Defaults to `addLane` on `deps.scene`, at the end of the stack. */
+    commitAddLane?: (poolId: string, ctx: InvocationCtx) => void;
+    /** Runs for each selected region in place of `releaseMembers`. */
+    commitRelease?: (id: string) => void;
+}
+/** The `diagram.resizeLane` action: an ongoing drag moving one lane's far boundary. */
+declare function createLaneResizeAction(opts: LaneActionOptions): Action;
+/** The `diagram.addLane` action: the add-lane button's click. */
+declare function createAddLaneAction(opts: LaneActionOptions): Action;
+/** The `diagram.releaseMembers` command: removes each selected container and
+ *  keeps what it holds, in one history entry. */
+declare function createReleaseMembersAction(opts: LaneActionOptions): Action;
+/**
+ * Both halves of container editing: the lane layer to `registerLayer`, and
+ * the contribution to pass as `ambient`, which carries the lane boundary
+ * drag, the add-lane click, and the `diagram.releaseMembers` command. Like
+ * `diagramPorts`, one without the other fails quietly.
+ */
+declare function diagramContainers(opts: LaneActionOptions): {
+    layer: RenderLayer<unknown>;
+    contribution: Contribution;
+};
+
+/**
+ * A double-click on a region's header: the action that reports which region's
+ * title to edit, and its binding.
+ */
+
+/** The action a double-click on a region's header runs. */
+declare const EDIT_CONTAINER_TITLE_ACTION_ID = "diagram.editContainerTitle";
+/** The container, pool, or lane whose header holds `at`: the node under it, or a region around that. */
+declare function regionHeaderAt(deps: ActionDeps | undefined, at: {
+    x: number;
+    y: number;
+} | undefined): string | null;
+/** The action that hands `commit` the region whose header a double-click landed on. It declines anywhere else. */
+declare function editContainerTitleAction(commit: (id: string) => void): Action;
+/** A double-click on a node's body; the action declines unless it lands in a region's header. */
+declare function editContainerTitleBinding(): GestureBinding;
+
+/**
+ * Moving an edge label along and beside its edge.
+ *
+ * The label layer (`labelDragLayer`) claims the press; this action moves the
+ * label. The drag previews the label's own data at the station the pointer
+ * proposes, and the pose that data derives, so the preview stands where the
+ * commit will.
+ */
+
+/** The action that drags an edge label. */
+declare const MOVE_LABEL_ACTION_ID = "diagram.moveLabel";
+/** A label placed: where it now sits on its edge, or `null` to reset it to {@link LABEL_PLACEMENT}. */
+interface LabelEdit {
+    labelId: string;
+    edgeId: string;
+    placement: DiagramLabel | null;
+}
+/** Options for {@link createLabelDragAction}. */
+interface LabelDragOptions {
+    /** Defaults to {@link commitLabelToScene} against `deps.scene`. */
+    commit?: (edit: LabelEdit, ctx: InvocationCtx) => void;
+    id?: string;
+}
+/** `data` with its label trait at `spot`, owned by the author from now on:
+ *  placement's `placed` is dropped, and placement won't move it again. */
+declare function movedLabelData(data: unknown, spot: LabelSpot): Record<string, unknown>;
+/** The default commit: the label's placement in `data.diagram.label`, as one
+ *  history entry labeled "Move label", or "Reset label" for a `null` placement. */
+declare function commitLabelToScene(edit: LabelEdit, ctx: InvocationCtx): void;
+/** The `diagram.moveLabel` action: an ongoing drag moving one edge label along and beside its edge. */
+declare function createLabelDragAction(opts?: LabelDragOptions): Action;
+
+/**
+ * Handles on the ends of a selected edge — what makes an edge's end grabbable,
+ * so a drag can carry it onto another shape (`reconnect`).
+ *
+ * Built the way the port affordance is: point regions with a `null`
+ * `targetId` and no `hitKind`, composed into a layer whose id is the kind a
+ * press reports. See `portAffordance` for why both matter.
+ */
+
+/** The layer id the edge-end handles are composed into. */
+declare const EDGE_END_LAYER_ID = "diagram-edge-ends";
+/** The affordance kind a press on an edge-end handle reports. */
+declare const EDGE_END_AFFORDANCE_KIND: "layer:diagram-edge-ends";
+/** What a press on an edge-end handle hands the reconnect action, as
+ *  `InvocationCtx.drag.affordance.payload`. */
+interface EdgeEndScratch {
+    targetId: string;
+    edgeId: string;
+    end: 'from' | 'to';
+}
+/** Read an edge-end press's scratch back off the hit an action was handed. */
+declare function edgeEndScratchOf(hit: {
+    payload?: unknown;
+} | null | undefined): EdgeEndScratch | null;
+/** An edge as it stands: its trait, the participants at its two ends, and
+ *  where its routed path starts and ends. */
+interface EdgeEnds<TPose> {
+    edge: ParticipantPose<TPose>;
+    trait: DiagramEdge;
+    from: ParticipantPose<TPose>;
+    to: ParticipantPose<TPose>;
+    points: {
+        from: Vec2$1;
+        to: Vec2$1;
+    };
+    /** The route as the edge's own `derivePath` draws it. */
+    route: ResolvedRoute;
+}
+/** Options shared by the edge-end affordance and the reconnect action. */
+interface EdgeEndOptions<TPose> extends PortsOptions<TPose> {
+    routers?: Readonly<Record<string, Router>>;
+}
+/** Options for {@link createEdgeEndAffordance}. */
+interface EdgeEndAffordanceOptions<TPose> extends EdgeEndOptions<TPose> {
+    /** Also the chrome-caps visibility id. Default {@link EDGE_END_LAYER_ID}. */
+    id?: string;
+    /** Screen-pixel hit radius. Default 8. */
+    hitRadiusPx?: number;
+    /** Screen-pixel side of the painted square. Default 8; 0 paints nothing. */
+    sizePx?: number;
+    fill?: CommandFill;
+    stroke?: CommandStroke;
+    cursor?: CursorSpec;
+}
+/** The affordance: one point region on each end of each selected edge. */
+declare function createEdgeEndAffordance<TPose>(participants: ParticipantSource<TPose>, selected: () => readonly string[], opts?: EdgeEndAffordanceOptions<TPose>): Affordance;
+/** The composed layer, for `CanvasExtensionApi.registerLayer`. Register it
+ *  after the port layer: the last-registered layer is hit first, and an edge's
+ *  end sits on a port. */
+declare function edgeEndLayer<TPose>(participants: ParticipantSource<TPose>, selected: () => readonly string[], opts?: EdgeEndAffordanceOptions<TPose>): RenderLayer<unknown>;
+
+/**
+ * Route editing — dragging a selected edge's waypoints and segments.
+ *
+ * The route handles (`waypointLayer`) claim the press; this action reshapes
+ * the route. The drag previews the edge's own data with the new waypoints,
+ * so its `derivePath` draws the preview exactly as the commit will.
+ */
+
+/** The action that drags a route handle. */
+declare const ROUTE_EDIT_ACTION_ID = "diagram.editRoute";
+/** An edge's route edited: its waypoints as they now stand. */
+interface RouteEdit {
+    edgeId: string;
+    waypoints: readonly Vec2$1[];
+}
+/** Options for the route-editing actions: the drag, the double-click that removes, and Reset route. */
+interface RouteEditOptions<TPose> extends EdgeEndOptions<TPose> {
+    participants: ParticipantSource<TPose>;
+    /** The selected edge ids, whose routes show handles. */
+    selected: () => readonly string[];
+    /** Screen pixels within which a dragged handle lines up with a neighbor
+     *  or a port's axis. Default 6. */
+    snapPx?: number;
+    /** Screen-pixel reach of a handle, as the handle layer's `hitRadiusPx`. Default 7. */
+    hitRadiusPx?: number;
+    /** Defaults to {@link commitRouteToScene} against `deps.scene`. */
+    commit?: (edit: RouteEdit, ctx: InvocationCtx) => void;
+    id?: string;
+}
+/** `data` with its edge trait routed through `waypoints`: owned by the author
+ *  from now on, so layout's mark is dropped, and no waypoints at all when there are none. */
+declare function routedData(data: unknown, trait: DiagramEdge, waypoints: readonly Vec2$1[]): Record<string, unknown>;
+/** The default commit: the edge's new waypoints in `data.diagram`, as one history entry labeled "Edit route". */
+declare function commitRouteToScene(edit: RouteEdit, ctx: InvocationCtx): void;
+/** The `diagram.editRoute` action: an ongoing drag reshaping one edge's route. */
+declare function createRouteEditAction<TPose>(opts: RouteEditOptions<TPose>): Action;
+
+/** Polyline arithmetic shared by the routers and route editing. */
+
+/** `points` without repeats, and without any interior point lying straight
+ *  between its neighbors. The first and last always stay. */
+declare function simplifyStops(points: readonly Vec2$1[]): Vec2$1[];
+
+/**
+ * Waypoint editing as pure math on an edge's route.
+ *
+ * The **stops** are the points a route must pass through: its `from` end, the
+ * author's waypoints, and its `to` end. The **drawn** route is what the router
+ * made of them. Every shipped router passes through each stop exactly, so the
+ * drawn polyline splits at the stops and a leg's middle is found on it.
+ *
+ * Each edit answers the edge's new waypoints, never the whole route.
+ */
+
+/** A handle a selected edge shows along its route. `at` is where it sits, in world units. */
+type RouteHandle = 
+/** Waypoint `index`: dragging moves it. */
+{
+    kind: 'vertex';
+    index: number;
+    at: Vec2$1;
+}
+/** The middle of leg `leg`, between stops `leg` and `leg + 1`: dragging inserts a waypoint there. */
+ | {
+    kind: 'insert';
+    leg: number;
+    at: Vec2$1;
+}
+/** Segment `index` of an orthogonal route, which runs along `axis`: dragging slides it across. */
+ | {
+    kind: 'segment';
+    index: number;
+    axis: 'x' | 'y';
+    at: Vec2$1;
+};
+/** The axis a segment runs along, or null when it is a point or slanted. */
+declare function segmentAxis(a: Vec2$1, b: Vec2$1): 'x' | 'y' | null;
+/** The handles an edge shows: a bar per segment under `orthogonal` and
+ *  `avoid`, else a dot per waypoint and a hollow dot per leg. */
+declare function routeHandles(drawn: readonly Vec2$1[], stops: readonly Vec2$1[], router: Router): RouteHandle[];
+/** The waypoints with waypoint `index` moved to `to`. */
+declare function dragVertex(stops: readonly Vec2$1[], index: number, to: Vec2$1): Vec2$1[];
+/** The waypoints with one at `at` inserted on leg `leg`: it becomes waypoint `leg`. */
+declare function insertWaypoint(stops: readonly Vec2$1[], leg: number, at: Vec2$1): Vec2$1[];
+/** The waypoints without waypoint `index`. */
+declare function removeWaypoint(stops: readonly Vec2$1[], index: number): Vec2$1[];
+/**
+ * The waypoints of `drawn`, an orthogonal route, with segment `index` slid
+ * `offset` across its axis: every interior bend of the new route, since the
+ * orthogonal router recomputes elbows between stops. A segment touching a
+ * port keeps a short stub there and jogs over, so the port end stays square.
+ */
+declare function dragSegment(drawn: readonly Vec2$1[], index: number, offset: number): Vec2$1[];
+/**
+ * The waypoints of an `avoid` route with segment `index` of `drawn` slid
+ * `offset` across its axis and pinned there: its two ends join the author's
+ * waypoints, in route order, and the router keeps the rest. A waypoint at one
+ * of its ends moves with it, and a segment meeting a port jogs off it so the
+ * port end stays square.
+ */
+declare function pinSegment(drawn: readonly Vec2$1[], stops: readonly Vec2$1[], index: number, offset: number): Vec2$1[];
+/** The waypoints of an `avoid` route without those at either end of segment
+ *  `index`, which hands the segment back to the router; null when neither end is one. */
+declare function unpinSegment(drawn: readonly Vec2$1[], stops: readonly Vec2$1[], index: number): Vec2$1[] | null;
+/**
+ * The waypoints with segment `index` straightened away: its neighbors run in
+ * parallel, and the one touching no port slides onto the other's line. Null
+ * when it is the first or last segment, or both neighbors touch a port.
+ */
+declare function removeSegment(drawn: readonly Vec2$1[], index: number): Vec2$1[] | null;
+
+/**
+ * Handles along a selected edge's route — what makes its waypoints and
+ * segments grabbable, so a drag can reshape the route (`waypointAction`).
+ *
+ * Built the way the edge-end handles are: point regions with a `null`
+ * `targetId` and no `hitKind`, composed into a layer whose id is the kind a
+ * press reports.
+ */
+
+/** The layer id the route handles are composed into. */
+declare const WAYPOINT_LAYER_ID = "diagram-waypoints";
+/** The affordance kind a press on a route handle reports. */
+declare const WAYPOINT_AFFORDANCE_KIND: "layer:diagram-waypoints";
+/** What a press on a route handle hands the route-edit actions, as the hit's `payload`. */
+interface WaypointScratch {
+    targetId: string;
+    edgeId: string;
+    handle: RouteHandle;
+}
+/** Read a route-handle press's scratch back off the hit an action was handed. */
+declare function waypointScratchOf(hit: {
+    payload?: unknown;
+} | null | undefined): WaypointScratch | null;
+/** An edge's route as the handles read it: its resolved ends, its stops, the
+ *  route drawn through them, the router that drew it, and the handles it shows. */
+interface EdgeRouteState {
+    from: Port;
+    to: Port;
+    stops: readonly Vec2$1[];
+    drawn: readonly Vec2$1[];
+    router: Router;
+    handles: readonly RouteHandle[];
+}
+/** The route state of an edge whose ends `ends` resolved. */
+declare function routeStateOf(ends: EdgeEnds<unknown>, routers?: Readonly<Record<string, Router>>): EdgeRouteState;
+/** Options for {@link createWaypointAffordance}. */
+interface WaypointAffordanceOptions<TPose> extends EdgeEndOptions<TPose> {
+    /** Also the chrome-caps visibility id. Default {@link WAYPOINT_LAYER_ID}. */
+    id?: string;
+    /** Screen-pixel hit radius. Default 7. */
+    hitRadiusPx?: number;
+    /** Screen-pixel diameter of a waypoint's dot; an insert dot is three
+     *  quarters of it, and a segment bar twice as long. Default 8; 0 paints nothing. */
+    sizePx?: number;
+    fill?: CommandFill;
+    stroke?: CommandStroke;
+    cursor?: CursorSpec;
+}
+/** A route handle's default screen-pixel hit radius. */
+declare const WAYPOINT_HIT_PX = 7;
+/** The affordance: a region on each route handle of each selected edge. */
+declare function createWaypointAffordance<TPose>(participants: ParticipantSource<TPose>, selected: () => readonly string[], opts?: WaypointAffordanceOptions<TPose>): Affordance;
+/** The composed layer, for `CanvasExtensionApi.registerLayer`. Register it
+ *  after the port layer and before the edge-end layer: the last registered is
+ *  hit first, and an edge's end handle must win over a handle beside it. */
+declare function waypointLayer<TPose>(participants: ParticipantSource<TPose>, selected: () => readonly string[], opts?: WaypointAffordanceOptions<TPose>): RenderLayer<unknown>;
+
 /**
  * The plugin as a `Contribution` bundle — one object a consumer hands to
  * `<SceneCanvas ambient={…}>`.
@@ -335,6 +1245,347 @@ declare function diagramPorts<TPose>(opts: DiagramContributionOptions<TPose>): {
     layer: RenderLayer<unknown>;
     contribution: Contribution;
 };
+/** The action id that absorbs the rest of a press on a route handle. */
+declare const GRAB_WAYPOINT_ACTION_ID = "diagram.grabWaypoint";
+/**
+ * Both halves of route editing: the handle layer to `registerLayer` — after
+ * the port layer and before the edge-end layer, so an end handle wins over a
+ * route handle beside it — and the contribution to pass as `ambient`, which
+ * carries the drag, the double-click that removes, the
+ * `diagram.resetRoute` command, the commands that set the selected
+ * connectors' router (`SET_ROUTER_ACTION_IDS`), and the line jumps toggle
+ * (`SET_HOPS_ACTION_ID`). Like `diagramPorts`, one without the other
+ * fails quietly.
+ */
+declare function diagramWaypoints<TPose>(opts: RouteEditOptions<TPose> & Omit<WaypointAffordanceOptions<TPose>, 'id'>): {
+    layer: RenderLayer<unknown>;
+    contribution: Contribution;
+};
+/** The action id that absorbs a press on an edge label, so it reaches neither marquee nor pan. */
+declare const GRAB_LABEL_ACTION_ID = "diagram.grabLabel";
+/** The action id that selects a clicked label's edge. */
+declare const SELECT_LABEL_EDGE_ACTION_ID = "diagram.selectLabelEdge";
+/**
+ * Both halves of label dragging: the label layer to `registerLayer` — before
+ * the port layer, so a port or a route handle wins over a label beside it —
+ * and the contribution to pass as `ambient`, which carries the drag
+ * (`diagram.moveLabel`), a click that selects the label's edge, and a
+ * double-click that edits the label's text through
+ * `EDIT_EDGE_LABEL_ACTION_ID`, which the host registers. Like `diagramPorts`,
+ * one without the other fails quietly.
+ */
+declare function diagramLabelDrag(opts: LabelDragOptions & {
+    scene: Scene<unknown, string, unknown>;
+    selected: () => readonly string[];
+    cursor?: CursorSpec;
+}): {
+    layer: RenderLayer<unknown>;
+    contribution: Contribution;
+};
+
+/**
+ * The route edits that are not drags: a double-click on a route handle, and
+ * the Reset route command.
+ */
+
+/** The action that removes a waypoint, straightens a segment, or unpins an
+ *  `avoid` connector's segment, on a double-click of its handle. */
+declare const REMOVE_WAYPOINT_ACTION_ID = "diagram.removeWaypoint";
+/** The command that clears the selected edges' waypoints. */
+declare const RESET_ROUTE_ACTION_ID = "diagram.resetRoute";
+/** The `diagram.removeWaypoint` action: a double-click on a waypoint's dot
+ *  removes it, and on a segment's bar straightens that jog away. Where it
+ *  would remove nothing it declines, so the double-click reaches whatever is
+ *  under the handle, an edge's label editing among them. */
+declare function createRemoveWaypointAction<TPose>(opts: RouteEditOptions<TPose>): Action;
+/** The `diagram.resetRoute` command: clears the selected edges' waypoints,
+ *  in one history entry when they commit to the scene. */
+declare function createResetRouteAction<TPose>(opts: RouteEditOptions<TPose>): Action;
+
+/**
+ * The commands that set the selected connectors' router: Around shapes,
+ * Orthogonal, Straight, and Curved. Leaving `avoid` drops the stored route;
+ * joining it leaves the route to the edit pass `useAvoidRouting` installs,
+ * which routes the connectors in the same history entry.
+ */
+
+/** The router commands' ids, by router key. */
+declare const SET_ROUTER_ACTION_IDS: {
+    readonly avoid: "diagram.router.avoid";
+    readonly orthogonal: "diagram.router.orthogonal";
+    readonly straight: "diagram.router.straight";
+    readonly bezier: "diagram.router.bezier";
+};
+/** Each shipped router's name in a menu. */
+declare const ROUTER_LABELS: Readonly<Record<keyof typeof SET_ROUTER_ACTION_IDS, string>>;
+/** One connector's router changed. */
+interface RouterEdit {
+    edgeId: string;
+    router: string;
+}
+/** Options for {@link createSetRouterAction}. */
+interface SetRouterOptions<TPose> {
+    participants: ParticipantSource<TPose>;
+    /** The selected ids; the connectors among them are set. */
+    selected: () => readonly string[];
+    /** Defaults to {@link commitRouterToScene} against `deps.scene`. */
+    commit?: (edit: RouterEdit, ctx: InvocationCtx) => void;
+}
+/** `data` with its edge trait on `router`, its stored route dropped. */
+declare function withRouter(data: unknown, trait: DiagramEdge, router: string): Record<string, unknown>;
+/** The default commit: the connector's `data.diagram.router`, written to the scene. */
+declare function commitRouterToScene(edit: RouterEdit, ctx: InvocationCtx): void;
+/** The command that puts the selected connectors on `router`, in one history
+ *  entry. Active while every selected connector is on it already. */
+declare function createSetRouterAction<TPose>(router: keyof typeof SET_ROUTER_ACTION_IDS, opts: SetRouterOptions<TPose>): Action;
+/** One command per shipped router, in menu order. */
+declare function routerActions<TPose>(opts: SetRouterOptions<TPose>): Action[];
+
+/**
+ * Waypoints ride along with a move: when a whole-node transform carries both
+ * ends of an edge by the same offset, the edge's waypoints go with them.
+ * Otherwise they stay put — a route the author placed is not bent by moving
+ * one end.
+ */
+
+/**
+ * The transform follower that carries waypoints along with a move, for the
+ * `transformFollowers` dep (`useTransformFollower`). `geometry` reads a pose's
+ * bounds; default `AUTO_POSE_DESCRIPTOR`.
+ */
+declare function waypointFollower<TPose>(scene: Scene<unknown, string, TPose>, geometry?: PoseDescriptor<TPose>): TransformFollower;
+
+/**
+ * A diagram scene as the avoid router reads it: every participant, container,
+ * pool, group box, and header as an obstacle, and every `avoid` connector not
+ * split across pages, with the ports each end may use and its label. A split
+ * connector's label, on its first stub, is an obstacle of its own.
+ */
+
+/** How a scene is read for routing. */
+interface AvoidSceneOptions<TPose> extends PortsOptions<TPose> {
+    /** The router key whose connectors are routed. Default `'avoid'`. */
+    routerKey?: string;
+}
+/** The id of a container's header obstacle. */
+declare const headerIdOf: (id: string) => string;
+/**
+ * What the router reads off `scene`: its obstacles and its `avoid` connectors,
+ * each node at the pose `poseOf` gives it, else the one the document holds.
+ */
+declare function avoidSceneInput<TPose>(scene: Scene<unknown, string, TPose>, opts?: AvoidSceneOptions<TPose>, poseOf?: (id: string) => TPose | undefined): AvoidInput;
+
+/**
+ * Obstacle-avoiding routing on a live scene: a scene edit pass that reroutes
+ * whatever an edit disturbed, in that edit's own history entry, and a
+ * transform follower that reroutes the connectors near a dragged shape each
+ * frame.
+ */
+
+/** Options for {@link installAvoidRouting} and `useAvoidRouting`. */
+interface AvoidRoutingOptions<TPose> extends AvoidSceneOptions<TPose>, AvoidOptions {
+    /** World units one screen pixel covers now. A drag frame that moves
+     *  nothing further than this does no work. Default 1. */
+    pixelSize?: () => number;
+    /** Milliseconds one drag frame may spend rerouting. Default 4. */
+    frameBudgetMs?: number;
+}
+/** Routing installed on a scene. */
+interface AvoidRouting {
+    router: AvoidRouter;
+    /** The drag half, for the `transformFollowers` dep (`useTransformFollower`). */
+    follower: TransformFollower;
+    /** Remove the edit pass. */
+    dispose(): void;
+}
+/** The data writes that store `routes` on their edges, skipping any unchanged. */
+declare function routeDataOps(scene: Scene<unknown, string, unknown>, routes: AvoidRoutes): Op[];
+/**
+ * Route `scene`'s `avoid` connectors around its shapes from now on. Every
+ * live edit reroutes what it disturbed, in its own history entry; on install
+ * nothing reroutes, and the routes the scene holds stand. A host without
+ * React calls this; a component calls `useAvoidRouting`.
+ */
+declare function installAvoidRouting<TPose>(scene: Scene<unknown, string, TPose>, opts?: AvoidRoutingOptions<TPose>): AvoidRouting;
+
+/**
+ * Where each of the diagram's scene edit passes runs among the others
+ * (`scene.addEditPass`'s `order`). Each pass hears what the ones before it
+ * wrote: markers are placed before routing sees them, routes before labels
+ * dodge them, and line jumps last, on the routes as they end up.
+ */
+declare const DIAGRAM_PASS_ORDER: {
+    readonly offPage: 100;
+    readonly avoid: 200;
+    readonly labels: 300;
+    readonly hops: 400;
+};
+
+/**
+ * Route `scene`'s `avoid` connectors around its shapes for the life of the
+ * calling component: each edit reroutes what it disturbed in its own history
+ * entry, and a drag reroutes the connectors near what it moves each frame.
+ * Mount it as a child of `<SceneCanvas>`, where the drag's follower is heard,
+ * after any `waypointFollower`, whose carried waypoints the drag routes through.
+ * Options are read when the scene changes; `pixelSize` defaults to the
+ * canvas's own view.
+ */
+declare function useAvoidRouting<TPose>(scene: Scene<unknown, string, TPose>, opts?: AvoidRoutingOptions<TPose>): void;
+
+/**
+ * A function from specs to the same specs with each edge on `avoid` and
+ * holding its route. It holds one router across calls, so each call reroutes
+ * only the edges the change since the last one disturbed.
+ */
+declare function createSpecRouter(options?: AvoidOptions): (specs: readonly DiagramSpec[]) => DiagramSpec[];
+
+/**
+ * A connector's route drawn with its hops: each one a half circle in place of
+ * the stretch of route it spans.
+ */
+
+/**
+ * The open path through `points`, bowing over each of `hops` in a half circle
+ * of its radius. A hop more than half a unit off the route, or too near a bend
+ * or an end for its half circle to fit on one segment, is stale and does not
+ * draw; nor does one overlapping the hop before it.
+ */
+declare function withHops(points: readonly Vec2$1[], hops: readonly EdgeHop[]): Path$1;
+
+/**
+ * Line jumps on a live scene: an edit pass that recomputes the hops an edit
+ * disturbed, in that edit's own history entry, while the document's
+ * line-jump setting is on.
+ */
+
+/** Options for {@link installHops} and `useHops`: how a connector routes, as
+ *  its own `derivePath` does. */
+type HopsOptions<TPose> = EdgeRouteOptions<TPose>;
+/** Line jumps installed on a scene. */
+interface Hops {
+    /** The drag half, for the `transformFollowers` dep (`useTransformFollower`). */
+    follower: TransformFollower;
+    /** Remove the edit pass. */
+    dispose(): void;
+}
+/**
+ * Hop `scene`'s crossing connectors while its `HOPS_DOC_KEY` value is set.
+ * Turning the value on or off, or changing its size, recomputes or clears
+ * every connector in that same entry; any other edit recomputes the
+ * connectors it rerouted and those whose routes meet theirs. Installing
+ * writes nothing. A host without React calls this; a component calls `useHops`.
+ */
+declare function installHops<TPose>(scene: Scene<unknown, string, TPose>, opts?: HopsOptions<TPose>): Hops;
+
+/**
+ * The transform follower that hides hops while a drag is in progress: each
+ * frame previews the connectors it moves, and every connector hopping over
+ * one, without their hops. A hop stays where the edit pass put it, so it
+ * would sit off a moving route; on release the pass recomputes them in the
+ * drag's entry. Register it after any follower that reroutes connectors, whose
+ * previewed data it keeps.
+ */
+declare function hopFollower<TPose>(scene: Scene<unknown, string, TPose>): TransformFollower;
+
+/**
+ * Hop `scene`'s crossing connectors for the life of the calling component,
+ * while its line-jump setting is on: each edit recomputes the hops it
+ * disturbed in its own history entry, and a drag hides the hops on what it
+ * moves. Mount it as a child of `<SceneCanvas>`, after any routing hook, so its
+ * follower hears the routes that one previews. Options are read when the scene
+ * changes.
+ */
+declare function useHops<TPose>(scene: Scene<unknown, string, TPose>, opts?: HopsOptions<TPose>): void;
+
+/** The line jumps command's id. */
+declare const SET_HOPS_ACTION_ID = "diagram.hops";
+/** Options for {@link createSetHopsAction}. */
+interface SetHopsOptions {
+    /** The radius hops take when the command turns them on. Default
+     *  {@link DEFAULT_HOP_SIZE}. */
+    size?: number;
+}
+/**
+ * The command that turns line jumps on for the whole document, or off, by
+ * writing its `HOPS_DOC_KEY` value: one history entry, which the hop pass
+ * (`useHops`) joins with every connector's hops. Active while they are on.
+ */
+declare function createSetHopsAction(opts?: SetHopsOptions): Action;
+
+/** A function from specs to the same specs with every edge's hops of radius
+ *  `r`, edges hopping those earlier in the list. An edge split across pages
+ *  takes no part. */
+declare function createSpecHops(r: number): (specs: readonly DiagramSpec[]) => DiagramSpec[];
+
+/**
+ * Reconnect — dragging a selected edge's end onto another port or shape.
+ *
+ * The edge-end handles (`edgeEndLayer`) claim the press; this action carries
+ * the end. It lands where a connect from the edge's other end would land, by
+ * the same resolver and the same `canConnect`, asked with the edge's from/to
+ * order kept, so a reconnect can never make an edge a connect could not.
+ */
+
+/** The action that drags an edge end onto a new port or body. */
+declare const RECONNECT_ACTION_ID = "diagram.reconnect";
+/** The action id that absorbs a press on an edge-end handle. */
+declare const GRAB_EDGE_END_ACTION_ID = "diagram.grabEdgeEnd";
+/** One end of one edge, moved onto `target`. */
+interface EndChange {
+    edgeId: string;
+    end: 'from' | 'to';
+    target: ConnectEnd;
+}
+/** Options for {@link createReconnectAction}. `bodies` defaults to true: an end
+ *  may be dropped on a shape's body. */
+interface ReconnectOptions<TPose> extends Omit<ConnectActionOptions<TPose>, 'commit' | 'startFrom'> {
+    /** The selected edge ids whose ends show handles. */
+    selected: () => readonly string[];
+    /** Defaults to {@link commitReconnectToScene} against `deps.scene`. */
+    commit?: (change: EndChange, ctx: InvocationCtx) => void;
+}
+/**
+ * The default commit: rewrites the moved end in `data.diagram` — `{ port }`,
+ * or `{}` for a body — and points the edge's `dependsOn` at the new node, as
+ * one history entry.
+ */
+declare function commitReconnectToScene(change: EndChange, ctx: InvocationCtx): void;
+/** The `diagram.reconnect` action: an ongoing drag carrying one edge end. */
+declare function createReconnectAction<TPose>(opts: ReconnectOptions<TPose>): Action;
+/** The binding that starts a reconnect: a drag pressed on an edge-end handle. */
+declare function reconnectBinding(actionId?: string): GestureBinding;
+/**
+ * Both halves of reconnect: the handle layer to `registerLayer` — after the
+ * port layer, since an edge's end sits on a port — and the contribution to
+ * pass as `ambient`. Like `diagramPorts`, one without the other fails quietly.
+ */
+declare function diagramEdgeEnds<TPose>(opts: ReconnectOptions<TPose> & Omit<EdgeEndAffordanceOptions<TPose>, 'id'>): {
+    layer: RenderLayer<unknown>;
+    contribution: Contribution;
+};
+
+/**
+ * Reordering a group marked `reorder`: a member dragged along that axis among
+ * its siblings, which slide into the places they would take, or the selected
+ * one stepped with Alt and an arrow key. Nothing is written: the host hears
+ * the new order, writes it to its data, and layout keeps it.
+ */
+
+/** Alt and an arrow key: the selected member one place along. */
+declare const STEP_REORDER_ACTION_ID = "diagram.stepReorder";
+/** A reorderable group's members in their new order. */
+interface ReorderChange {
+    group: string;
+    order: readonly string[];
+}
+/** The members of the reorderable group a press at `at` carries one of, each
+ *  with everything drawn with it, or `null` off any such group. */
+declare function groupReorderSlots(deps: ActionDeps, at: Vec2): ReorderSlots | null;
+/** Steps the selected node's member one place toward the start (`-1`) or the end (`1`). */
+declare function createStepReorderAction(report: (change: ReorderChange) => void): Action;
+/** Everything `DiagramView` installs for `onReorder`: the reorder drag,
+ *  sliding, pressed on a node's body, and the step action. */
+declare function groupReorderContribution(report: (change: ReorderChange) => void): Contribution;
 
 /** How a self-edge with no ports named leaves its node and comes back. */
 interface SelfLoop {
@@ -355,6 +1606,111 @@ interface SelfLoop {
  */
 declare function selfLoop(ports: readonly Port[], standoff: number): SelfLoop | null;
 
+/**
+ * Edge labels: the one place a label node's spec is made, and the action that
+ * adds or edits an edge's label on a double-click.
+ */
+
+/** The box a label's text takes: measured width, and a height of the font size
+ *  whatever the measure reports. */
+declare function labelSize(text: string, style: RowTextStyle, measure?: MeasureRowText): {
+    width: number;
+    height: number;
+};
+/** Options for {@link edgeLabelSpec}. */
+interface EdgeLabelOptions<TLayer extends string> {
+    layer: TLayer;
+    /** Where along the edge it sits. Default {@link LABEL_PLACEMENT}. */
+    label?: DiagramLabel;
+    style?: RowTextStyle;
+    /** Text color. */
+    fill?: string;
+    /** Sizes the box. Default: a per-character estimate. */
+    measure?: MeasureRowText;
+}
+/** The label node for edge `edgeId`: a leaf that derives its pose from the edge's route. */
+declare function edgeLabelSpec<TLayer extends string>(edgeId: string, text: string, opts: EdgeLabelOptions<TLayer>): AddNodeSpec<unknown, TLayer, RectPose>;
+/**
+ * Removes node `id` if it is an edge label left with no text, and says whether
+ * it did. The default edit adds a label before its text is typed, so a host
+ * passes this as its text edit's `onEnd` to drop one that ends empty.
+ */
+declare function dropEmptyEdgeLabel(scene: Scene<unknown, string, unknown>, id: string): boolean;
+/** The action that adds or edits an edge's label. */
+declare const EDIT_EDGE_LABEL_ACTION_ID = "diagram.editEdgeLabel";
+/** Options for {@link editEdgeLabelAction}. */
+interface EditEdgeLabelOptions {
+    /** Runs in place of the default add-then-edit. */
+    commit?: (edgeId: string, ctx: InvocationCtx) => void;
+    /** The face a new label is set in. Default the diagram's, two sizes down. Ignored when `commit` is given. */
+    style?: RowTextStyle;
+    /** A new label's text color. Ignored when `commit` is given. */
+    fill?: string;
+}
+/**
+ * Creates an edge's label, or edits the one it has, where a double-click
+ * lands on the edge. It declines a double-click on anything else.
+ *
+ * An immediate invoker is handed no `InvocationCtx`, so `commit` gets one
+ * built from the deps and the click point.
+ */
+declare function editEdgeLabelAction(opts?: EditEdgeLabelOptions): Action;
+/** A double-click on a node's body; the action itself declines unless that node is an edge. */
+declare function editEdgeLabelBinding(actionId?: string): GestureBinding;
+
+/**
+ * What makes an edge label grabbable, so a drag can move it along and beside
+ * its edge (`labelDragAction`).
+ *
+ * Built the way the route handles are: rect regions with a `null` `targetId`
+ * and no paint, composed into a layer whose id is the kind a press reports.
+ */
+
+/** The layer id the label regions are composed into. */
+declare const LABEL_DRAG_LAYER_ID = "diagram-edge-labels";
+/** The affordance kind a press on an edge label reports. */
+declare const LABEL_DRAG_AFFORDANCE_KIND: "layer:diagram-edge-labels";
+/** What a press on an edge label hands the label actions, as the hit's `payload`. */
+interface LabelScratch {
+    targetId: string;
+    labelId: string;
+    edgeId: string;
+}
+/** Read a label press's scratch back off the hit an action was handed. */
+declare function labelScratchOf(hit: {
+    payload?: unknown;
+} | null | undefined): LabelScratch | null;
+/** A label a press can pick up: its box as the document places it, and its edge's route. */
+interface DraggableLabel {
+    labelId: string;
+    edgeId: string;
+    box: Bounds$2;
+    path: Path$2;
+}
+/** Every editable label in `scene` whose edge derives a path, in render order. */
+declare function draggableLabels(scene: Scene<unknown, string, unknown>): Iterable<DraggableLabel>;
+/** The topmost draggable label whose box holds `at`, as its press scratch. */
+declare function labelUnder(scene: Scene<unknown, string, unknown>, at: Vec2$1): LabelScratch | null;
+/** The composed layer, for `CanvasExtensionApi.registerLayer`. Register it
+ *  before the port layer: the last registered is hit first, and a port or a
+ *  route handle must win over a label beside it. */
+declare function labelDragLayer(scene: Scene<unknown, string, unknown>, opts?: {
+    cursor?: CursorSpec;
+}): RenderLayer<unknown>;
+
+/**
+ * The label edit that is not a drag: the Reset label command.
+ */
+
+/** The command that puts the selected edges' dragged labels back where placement puts them. */
+declare const RESET_LABEL_ACTION_ID = "diagram.resetLabel";
+/** The `diagram.resetLabel` command: sets each selected edge's dragged label
+ *  back to `LABEL_PLACEMENT`, in one history entry when they commit to the scene. */
+declare function createResetLabelAction(opts: {
+    selected: () => readonly string[];
+    commit?: (edit: LabelEdit, ctx: InvocationCtx) => void;
+}): Action;
+
 /**
  * A label on an edge: an ordinary leaf node that derives its *pose* from the
  * route it sits on.
@@ -365,285 +1721,329 @@ declare function selfLoop(ports: readonly Port[], standoff: number): SelfLoop |
  * data, styling, z-order and selection.
  */
 
-/** Where along an edge a label sits. */
-interface DiagramLabel {
-    /** `'start'`, `'mid'` and `'end'` are 0, 0.5 and 1; a number is that
-     *  fraction of the route's length. */
-    at: 'start' | 'mid' | 'end' | number;
-    /** World units between the route and the label's near side, to the **left
-     *  of the direction of travel** — above a left-to-right edge. Default 0,
-     *  which centers the label on the line. */
-    offset?: number;
-}
-/** The label trait on a node's data, or `null`. */
-declare function diagramLabelOf(node: {
-    data: unknown;
-}): DiagramLabel | null;
 /** Options for {@link labelDerivePose}. `geometry` defaults to the kit's
  *  `AUTO_POSE_DESCRIPTOR`. */
 interface LabelPoseOptions<TPose> {
     geometry?: PoseDescriptor<TPose>;
 }
 /**
- * A `derivePose` that stations a label along its dependency's path.
- *
- * Returns `null` — nothing derived, so the node keeps its authored pose —
- * when the node carries no label trait, when the dependency is gone, or when
- * the dependency derives no path. A label that snapped to the origin because
- * its edge was deleted is worse than one that stayed where the author left it.
+ * A `derivePose` that stations a label along its dependency's path.
+ *
+ * Returns `null` — nothing derived, so the node keeps its authored pose —
+ * when the node carries no label trait, when the dependency is gone, or when
+ * the dependency derives no path. A label that snapped to the origin because
+ * its edge was deleted is worse than one that stayed where the author left it.
+ */
+declare function labelDerivePose<TPose>(opts?: LabelPoseOptions<TPose>): (node: {
+    pose: TPose;
+    data: unknown;
+}, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
+/** Registry key for {@link LABEL_DERIVE_POSE}. */
+declare const DIAGRAM_LABEL = "diagram:label";
+/** The default label derivation, as one stable function reference so `toJSON`
+ *  can find its key. */
+declare const LABEL_DERIVE_POSE: (node: {
+    pose: unknown;
+    data: unknown;
+}, deps: readonly (DerivedDep<unknown, unknown, string> | undefined)[]) => unknown;
+
+/**
+ * Label placement on a live scene: a scene edit pass that moves the labels
+ * an edit covered to the nearest clear station, in that edit's own history
+ * entry. It runs after routing, so labels dodge the routes the edit made.
+ */
+
+/** Options for {@link installLabelPlacement} and `useLabelPlacement`. */
+interface LabelPlacementOptions<TPose> extends PlaceLabelsOptions {
+    geometry?: PoseDescriptor<TPose>;
+    /** How a node's diagram trait is read. Default its own `data.diagram`. */
+    read?: DiagramNodeReader;
+    /** Sizes a label to the text an edit gives it. Default a per-character estimate. */
+    measure?: MeasureRowText;
+}
+/** Placement installed on a scene. */
+interface LabelPlacement {
+    /** Remove the edit pass. */
+    dispose(): void;
+}
+/**
+ * Move `scene`'s edge labels off whatever an edit leaves covering them, from
+ * now on: each live edit places the labels it may have covered, in its own
+ * history entry. Labels hold still during a drag and settle on release. A
+ * host without React calls this; a component calls `useLabelPlacement`.
+ */
+declare function installLabelPlacement<TPose>(scene: Scene<unknown, string, TPose>, opts?: LabelPlacementOptions<TPose>): LabelPlacement;
+
+/**
+ * Move `scene`'s edge labels off whatever an edit leaves covering them, for
+ * the life of the calling component, each edit's moves in its own history
+ * entry. Options are read when the scene changes.
+ */
+declare function useLabelPlacement<TPose>(scene: Scene<unknown, string, TPose>, opts?: LabelPlacementOptions<TPose>): void;
+
+/**
+ * A function from specs to the same specs with each edge label placed off
+ * whatever covers it. Every label is placed afresh, in id order, whenever
+ * the shapes, routes, or labels change, and the last answer is reused while
+ * they do not. Run it after any router, so labels dodge the routes drawn.
+ */
+declare function createSpecLabelPlacer(opts?: PlaceLabelsOptions): (specs: readonly DiagramSpec[]) => DiagramSpec[];
+
+/**
+ * An off-page tag: a text leaf with a background that names the far page and
+ * the reference, and stations itself past the tip of its connector's stub.
+ */
+
+/** How a tag is drawn: its face, its text color, and the box behind the text. */
+interface OffPageTagLook {
+    style: RowTextStyle;
+    fill: string;
+    background: string;
+    /** World units between the box and the text. Default {@link OFF_PAGE_TAG_PADDING}. */
+    padding?: number;
+    /** Sizes the text. Default: a per-character estimate. */
+    measure?: MeasureRowText;
+}
+/** A tag's default padding, in world units. */
+declare const OFF_PAGE_TAG_PADDING = 3;
+/** A tag's look under `theme`: the theme's connector-label face and color, on its page color. */
+declare const offPageTagLook: (theme: DiagramTheme) => OffPageTagLook;
+/** What a tag reads: the far page's name and the connector's reference. */
+declare const offPageTagText: (pageName: string, ref: string) => string;
+/** What the tag at `end` of a split reads: the page at the other end, by name or place, else its raw id, and the reference. */
+declare function offPageFarText(pages: readonly PlacedPage[], split: OffPageSplit, end: 'from' | 'to'): string;
+/** The box a tag of `text` takes in `look`. */
+declare function offPageTagSize(text: string, look: OffPageTagLook): {
+    width: number;
+    height: number;
+};
+/** The tag `data` for end `end` of `edgeId`, reading `text` in `look`. */
+declare function offPageTagData(edgeId: string, end: 'from' | 'to', text: string, look: OffPageTagLook): {
+    diagram: {
+        offPageTag: {
+            edge: string;
+            end: "from" | "to";
+        };
+    };
+    text: string;
+    style: RowTextStyle;
+    fill: {
+        paint: {
+            color: string;
+        };
+    };
+    background: {
+        paint: {
+            color: string;
+        };
+    };
+    padding: number;
+};
+/** The tag node at end `end` of connector `edgeId`, on `layer`: it derives its pose from the connector's stub. */
+declare function offPageTagSpec<TLayer extends string>(edgeId: string, end: 'from' | 'to', text: string, look: OffPageTagLook & {
+    layer: TLayer;
+}): AddNodeSpec<unknown, TLayer, RectPose>;
+/** A split connector's two tag specs, `from` then `to`. */
+declare function offPageTagSpecs<TLayer extends string>(edgeId: string, split: OffPageSplit, pages: readonly PlacedPage[], look: OffPageTagLook & {
+    layer: TLayer;
+}): AddNodeSpec<unknown, TLayer, RectPose>[];
+/**
+ * A `derivePose` that stations a tag just past its stub's tip, on the far
+ * side from the shape. `null`, so the tag keeps its authored pose, while its
+ * connector draws no stub at that end.
  */
-declare function labelDerivePose<TPose>(opts?: LabelPoseOptions<TPose>): (node: {
+declare function offPageTagDerivePose<TPose>(opts?: {
+    geometry?: PoseDescriptor<TPose>;
+}): (node: {
     pose: TPose;
     data: unknown;
 }, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
-/** Registry key for {@link LABEL_DERIVE_POSE}. */
-declare const DIAGRAM_LABEL = "diagram:label";
-/** The default label derivation, as one stable function reference so `toJSON`
- *  can find its key. */
-declare const LABEL_DERIVE_POSE: (node: {
+/** Registry key for {@link OFF_PAGE_TAG_DERIVE_POSE}. */
+declare const DIAGRAM_OFF_PAGE_TAG = "diagram:offPageTag";
+/** The default tag derivation, as one stable function reference so `toJSON` can find its key. */
+declare const OFF_PAGE_TAG_DERIVE_POSE: (node: {
     pose: unknown;
     data: unknown;
 }, deps: readonly (DerivedDep<unknown, unknown, string> | undefined)[]) => unknown;
 
+/** The pages a {@link DiagramData} is drawn on, and the connectors that cross between them. */
+
+/** `data`'s pages, placed in world space. */
+declare function diagramPages(data: DiagramData): PlacedPage[];
 /**
- * A group's box, and anything pinned to a point on another node.
- *
- * The box is an ordinary node that depends on its members and derives its pose
- * from theirs: their union, grown by the inset. Drag a member and the box
- * follows; lay the diagram out and the box lands around wherever the members
- * went. Nothing has to keep it in sync, because nothing stores it.
- *
- * An anchored node — a group's title is the first — derives its pose from one
- * dependency's bounds the same way, so it travels with the box it labels.
- */
-
-/** Where an anchored node sits on its dependency. */
-interface DiagramAnchor {
-    /** The point on the dependency's bounds, normalized as a port's is. */
-    at: PortAnchor;
-    /** The point on the node's own bounds that lands there. Default `at`, so
-     *  `{ u: 0, v: 0 }` puts the node's top-left on the dependency's. */
-    self?: PortAnchor;
-    /** Then moved by this much, in world units. */
-    offset?: Vec2$1;
-}
-/** The group trait on a node's data, or `null`. */
-declare function diagramGroupOf(node: {
-    data: unknown;
-}): DiagramGroup | null;
-/** The anchor trait on a node's data, or `null`. */
-declare function diagramAnchorOf(node: {
-    data: unknown;
-}): DiagramAnchor | null;
-/** Options for {@link groupDerivePose} and {@link anchorDerivePose}.
- *  `geometry` defaults to the kit's `AUTO_POSE_DESCRIPTOR`. */
-interface GroupPoseOptions<TPose> {
-    geometry?: PoseDescriptor<TPose>;
-}
-/** A `derivePose` function as the scene calls it: the node, then what it depends on, in `dependsOn` order. */
-type DiagramDerivePose<TPose> = (node: {
-    pose: TPose;
-    data: unknown;
-}, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
+ * Which of `edges` cross between `pages`, lettered in their order, and the two
+ * off-page tags of each that does. An edge with an end `boxOf` has no box for
+ * is left whole.
+ */
+declare function dataOffPage(edges: readonly {
+    id: string;
+    from: string;
+    to: string;
+}[], pages: readonly PlacedPage[], boxOf: (id: string) => Bounds$3 | undefined, look: OffPageTagLook): {
+    splits: ReadonlyMap<string, OffPageSplit>;
+    tags: DiagramSpec[];
+};
+
 /**
- * A `derivePose` that draws a group's box around its members: their union,
- * grown by the trait's inset. `null` — the authored pose stands — when the node
- * carries no group trait or every member is gone.
+ * Which connectors cross from one page to another, as arithmetic: page
+ * rects and end boxes in, splits out. Nothing here reads a scene.
  */
-declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
-/** A group's box around the union of its members: grown by its inset, and
- *  widened evenly to its `minWidth`. */
-declare function boxAround(union: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}, group: DiagramGroup): {
+
+type Box$1 = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
+/** One connector as {@link offPageSplits} reads it: its two ends' world boxes,
+ *  and the split it holds now, if any. */
+interface OffPageEdgeInput {
+    id: string;
+    from: Box$1;
+    to: Box$1;
+    offPage?: OffPageSplit | undefined;
+}
+/** What {@link offPageSplits} reads. */
+interface OffPageSplitInput {
+    pages: readonly PlacedPage[];
+    edges: readonly OffPageEdgeInput[];
+    /** Refs held by split connectors not in `edges`, which no edge here may take. */
+    used?: Iterable<string>;
+}
+/** The first ref, in A…Z, AA… order, that `used` does not hold. */
+declare function nextOffPageRef(used: ReadonlySet<string>): string;
 /**
- * A `derivePose` that keeps a node at a point on its dependency's bounds.
- * `null` when the node carries no anchor trait or the dependency is gone.
+ * Each connector's split, or `null` where it stays whole. A connector splits
+ * when its two ends belong to different pages (`pageOfBounds`); an end in a
+ * gap belongs to none, and never splits. A split keeps the ref it holds while
+ * no earlier connector here or `used` holds it too; a new one takes the next
+ * free ref.
  */
-declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
-/** Registry key for {@link GROUP_DERIVE_POSE}. */
-declare const DIAGRAM_GROUP = "diagram:group";
-/** Registry key for {@link ANCHOR_DERIVE_POSE}. */
-declare const DIAGRAM_ANCHOR = "diagram:anchor";
-/** The default group derivation, a stable reference so `toJSON` can find its key. */
-declare const GROUP_DERIVE_POSE: DiagramDerivePose<unknown>;
-/** The default anchor derivation, a stable reference for the same reason. */
-declare const ANCHOR_DERIVE_POSE: DiagramDerivePose<unknown>;
+declare function offPageSplits(input: OffPageSplitInput): Map<string, OffPageSplit | null>;
+
+/** The box `node` has in document space, which is where pages are: its pose through every ancestor's transform. */
+declare function documentBoundsOf<TPose>(scene: Scene<unknown, string, TPose>, node: {
+    id: string;
+}, geometry?: PoseDescriptor<unknown>): Bounds$3;
 
 /**
- * `diagramScene` — a laid-out diagram from plain `{ nodes, edges }`.
- *
- * Every box is a `buildBody` body, so a data node can say anything a body
- * can: outline, rows, padding, ports. Sizes are estimated from character
- * counts unless `measure` is given, so layout runs without a canvas and gives
- * the same answer in node and in a browser.
+ * Off-page markers on a live scene: an edit pass that splits a connector
+ * whose ends land on different pages, joins one whose ends share a page
+ * again, and keeps each split connector's two tags, all in the entry of the
+ * edit that caused it.
  */
 
-/** One node of a {@link DiagramData}: its rows of text, and optionally its outline, ports, size, and starting place. */
-interface DataNode {
-    id: string;
-    /** Shorthand for one `label` row per line. Ignored when `rows` is given. */
-    lines?: readonly string[];
-    rows?: readonly Row[];
-    /** Default `DiagramSceneOptions.outline`, which defaults to `'rect'`. */
-    outline?: Outline;
-    /** Perimeter ports, replacing the four compass midpoints. */
-    ports?: readonly PortSpec[];
-    /** Layout leaves this node at `at`. */
-    pinned?: boolean;
-    /** Where the node starts, before layout. Unset, nodes start on the
-     *  diagonal in source order, which is what within-rank order is seeded
-     *  from. */
-    at?: Vec2$1;
-    /** The smallest the box may be. Its content grows it past this. */
-    width?: number;
-    height?: number;
-    /** Default `DiagramSceneOptions.padding`. */
-    padding?: number;
-    /** Default `DiagramSceneOptions.gap`. */
-    gap?: number;
-    /** Default `DiagramSceneOptions.verticalAlign`. */
-    verticalAlign?: BodySpec['verticalAlign'];
-}
-/** One edge of a {@link DiagramData}, between two nodes or groups by id. */
-interface DataEdge {
-    /** A node's id, or a group's: an edge naming a group meets its box. */
-    from: string;
-    to: string;
-    /** The port to leave from or arrive at. Unset, the end facing the other
-     *  node most directly. */
-    fromPort?: string;
-    toPort?: string;
-    label?: string;
-    /** Where along the edge the label sits. Default `DiagramSceneOptions.labelPlacement`. */
-    labelPlacement?: DiagramLabel;
-    /** Default `DiagramSceneOptions.router`. */
-    router?: DiagramRouter;
-    /** World points the route passes through. Layout does not move them. */
-    waypoints?: readonly Vec2$1[];
-}
-/** A box drawn around some nodes, which layout keeps together. */
-interface DataGroup {
-    /** Shares one namespace with node ids. */
-    id: string;
-    /** Node ids, and the ids of groups nested in this one. A node or group a
-     *  later group also names stays in this one; an id that is neither is
-     *  ignored, and so is one that would put a group inside itself. */
-    members: readonly string[];
-    /** Drawn inside the box, above its members. */
-    label?: string;
-    /** Between the box and its members, and around the label. Default
-     *  `DiagramSceneOptions.groupPadding`. */
-    padding?: number;
+/** Options for {@link installOffPageMarkers} and `useOffPageMarkers`. */
+interface OffPageMarkerOptions<TPose> {
+    /** How node poses are measured. Default `AUTO_POSE_DESCRIPTOR`. */
+    geometry?: PoseDescriptor<TPose>;
+    /** The look a tag is given as it is made or retexted. Default the scene's
+     *  theme (`diagram:theme`), else `theme`. */
+    look?: () => OffPageTagLook;
+    /** The theme a scene naming none is drawn in. */
+    theme?: DiagramTheme;
 }
-/** A diagram as plain data, the input to `diagramScene`. */
-interface DiagramData {
-    nodes: readonly DataNode[];
-    edges: readonly DataEdge[];
-    /** A group may be a member of another. `layered`, `tree`, and `force` keep
-     *  each group's members together; `'none'` ignores groups but still draws
-     *  them. */
-    groups?: readonly DataGroup[];
-}
-/** The colors and outline a node is drawn with. */
-interface NodeStyle {
-    fill: string;
-    stroke: string;
-    text: string;
-    strokeWidth?: number;
-    dash?: number[];
+/**
+ * The ops that split, join, and tag the connectors `edges` names (every one,
+ * for `'all'`), so each is split exactly when its ends sit on different
+ * pages. Empty when nothing changes. The edit pass runs this; a host can run
+ * it once over a document saved before it had off-page markers.
+ */
+declare function offPageOps<TPose>(scene: Scene<unknown, string, TPose>, edges: Iterable<string> | 'all', opts?: OffPageMarkerOptions<TPose>): Op[];
+/**
+ * Split `scene`'s connectors across pages from now on: every live edit that
+ * moves a connector's end, adds or rewrites a connector, or changes the pages
+ * splits, joins, and retags what it reached, in its own history entry. On
+ * install nothing is recomputed. Returns the remover. A host without React
+ * calls this; a component calls `useOffPageMarkers`.
+ */
+declare function installOffPageMarkers<TPose>(scene: Scene<unknown, string, TPose>, opts?: OffPageMarkerOptions<TPose>): () => void;
+
+/**
+ * Split `scene`'s connectors across pages for the life of the calling
+ * component: each edit that moves a connector's end or changes the pages
+ * splits, joins, and retags what it reached, in its own history entry.
+ * Options are read when the scene changes.
+ */
+declare function useOffPageMarkers<TPose>(scene: Scene<unknown, string, TPose>, opts?: OffPageMarkerOptions<TPose>): void;
+
+/**
+ * Following a connector off the page: a double-click on an off-page tag goes
+ * to the page at the connector's far end and selects the shape there.
+ */
+
+/** The action that follows an off-page tag to its far page. */
+declare const FOLLOW_OFF_PAGE_ACTION_ID = "diagram.followOffPage";
+/** Where a tag leads: the shape at its connector's far end, and that shape's page. */
+interface OffPageTarget {
+    tag: string;
+    edge: string;
+    node: string;
+    page: string;
 }
-/** The stroke, markers, and label color an edge is drawn with. */
-interface EdgeStyle {
-    stroke: string;
-    width?: number;
-    dash?: number[];
-    /** `null` for none. Default none. */
-    markerStart?: MarkerRef | null;
-    /** `null` for none. Default `'arrow'`. */
-    markerEnd?: MarkerRef | null;
-    /** Default `stroke`. */
-    label?: string;
+type SceneReads = NonNullable<ActionDeps['scene']>;
+/** Where tag `tagId` leads, or `null` when it is no tag of a split connector. */
+declare function offPageTargetOf(scene: SceneReads, tagId: string): OffPageTarget | null;
+/** Options for {@link createFollowOffPageAction}. */
+interface FollowOffPageOptions {
+    /** Runs in place of the default, which selects `target.node` and fits the view to `target.page`. */
+    follow?: (target: OffPageTarget, ctx: InvocationCtx) => void;
+    /** Screen pixels the default leaves around the page it fits. Default 24. */
+    padding?: number;
 }
-/** How an edge is drawn between its ends. */
-type DiagramRouter = 'straight' | 'bezier' | 'orthogonal';
-/** The face a diagram node's text is set in. */
-type DiagramTextStyle = {
-    fontFamily: string;
-    fontSize: number;
-    fontWeight?: number;
+/**
+ * Goes to the far page of the off-page tag a double-click lands on, and
+ * selects the shape at the connector's far end there. It declines a
+ * double-click on anything else.
+ */
+declare function createFollowOffPageAction(opts?: FollowOffPageOptions): Action;
+/** A double-click on a node's body; the action itself declines unless that node is an off-page tag. */
+declare function followOffPageBinding(actionId?: string): GestureBinding;
+/** Following off-page tags, as a contribution to pass as `ambient`. */
+declare function diagramOffPage(opts?: FollowOffPageOptions): {
+    contribution: Contribution;
 };
-/** The `data` of a scene node `diagramScene` makes: its diagram role, and what it paints. */
-interface DiagramSceneData {
-    diagram?: DiagramNode | DiagramEdge | {
-        label: DiagramLabel;
-    } | {
-        anchor: DiagramAnchor;
-    };
-    fill?: {
-        paint: {
-            color: string;
-        };
-    };
-    stroke?: Stroke;
-    text?: string;
-    style?: DiagramTextStyle;
-}
-/** A scene node spec, as `diagramScene` returns them. */
-type DiagramSpec = AddNodeSpec<DiagramSceneData, 'main', RectPose>;
-/** How `diagramScene` lays out, routes, and styles a {@link DiagramData}. */
-interface DiagramSceneOptions {
-    /** A layout by name, or any `LayoutFn`. Default `'layered'`. `'none'`
-     *  leaves every node at its `at`. */
-    layout?: 'layered' | 'tree' | 'force' | 'none' | LayoutFn;
-    /** Merged over `{ order: 'barycenter' }`. */
-    layoutOptions?: LayoutOptions;
-    /** Default `'bezier'`. */
-    router?: DiagramRouter;
-    /** The text style rows fall back on. Default 12px sans-serif. */
-    font?: {
-        fontFamily: string;
-        fontSize: number;
-    };
-    /** Measures one run of text. Default an estimate from character count, so
-     *  layout needs no canvas; pass `canvasMeasure(ctx)` for real widths. */
-    measure?: MeasureRowText;
-    /** Default `'rect'`. */
-    outline?: Outline;
-    /** Between a box's outline and its rows. Default 8. */
-    padding?: number;
-    /** Between adjacent rows. Default 4. */
-    gap?: number;
-    /** Where a box's rows sit when it is taller than they need. Default `'center'`. */
-    verticalAlign?: BodySpec['verticalAlign'];
-    /** The narrowest a box may be. Default 64. */
-    minWidth?: number;
-    /** Where edge labels sit. Default `{ at: 'mid', offset: 9 }`. */
-    labelPlacement?: DiagramLabel;
-    nodeStyle?: (node: DataNode) => NodeStyle;
-    /** Default 12. */
-    groupPadding?: number;
-    /** A group's box and label. `text` colors the label. */
-    groupStyle?: (group: DataGroup) => NodeStyle;
-    edgeStyle?: (edge: DataEdge) => EdgeStyle;
-}
-/** The scene node id `diagramScene` gives an edge, built from its ends, ports, and label. */
-declare const edgeIdOf: (e: DataEdge) => string;
-/** Every spec carries an id — a node's own, `<id>/<k>` for its text,
- *  `<edge id>/label`, a group's own and `<group id>/label` — so a later call's
- *  specs can be reconciled against this one's. Throws on a repeated id among
- *  nodes and groups, which names two things as one. An edge whose
- *  end is not a node is dropped, and so is a repeat of an earlier edge with
- *  the same ends, ports and label: it would draw exactly on top of the first. */
-declare function diagramScene(data: DiagramData, opts?: DiagramSceneOptions): DiagramSpec[];
+
+/** Subpath `index` of `path` as a path of its own: the whole path for index 0
+ *  of one with a single subpath, or of a shape with no commands; null past the last. */
+declare function subpathOf(path: Path$1, index: number): Path$1 | null;
+
+/**
+ * `<SceneCanvas selectTool={{ resize: { resizable } }}>` for a diagram scene:
+ * edges and edge labels take their geometry from what they are attached to,
+ * so their own pose is a placeholder, and a resize handle on it sits at the
+ * origin and resizes nothing. A group's box is its members' union, and a
+ * pool's lane is sized by its pool's stack and resized by dragging its
+ * boundary.
+ */
+declare function diagramResizable(scene: {
+    get(id: never): {
+        data: unknown;
+    } | undefined;
+}): (id: string) => boolean;
+
+/** A node's style: its colors over its role's under `theme`, else over {@link NODE}. */
+declare function dataNodeStyle(node: Pick<DataNode, 'style' | 'colors'>, theme?: DiagramTheme): NodeStyle;
+/** An edge's style: its colors over its role's stroke under `theme`, else over the theme's connector, else over {@link EDGE}. */
+declare function dataEdgeStyle(edge: Pick<DataEdge, 'style' | 'colors'>, theme?: DiagramTheme): EdgeStyle;
+/** A region as {@link dataRegionStyle} reads it: a container, a pool, or a lane. */
+interface StyledRegion {
+    role: DataContainer['role'] | 'lane';
+    style?: string;
+    colors?: Partial<NodeStyle>;
+}
+/**
+ * A region's style: its colors over its theme role's, else over the theme's
+ * container, its pool header, or the lane body at `laneIndex` in turn; with no
+ * theme, over {@link NODE}.
+ */
+declare function dataRegionStyle(region: StyledRegion, theme?: DiagramTheme, laneIndex?: number): NodeStyle;
+
+/**
+ * A live layout's producers: what each frame of a run says about where the
+ * participants are. `forceProducer` relaxes; `easedProducer` walks to a
+ * destination it knows. `useLiveLayout` (`live.ts`) runs them.
+ */
 
 /** What a live producer is told, and what it answers with. */
 interface LiveLayoutCtx<TPose> {
@@ -700,14 +2100,16 @@ interface EasedProducerOptions {
  * over.
  */
 declare function easedProducer<TPose>(graph: Graph, algorithm: LayoutFn, opts?: EasedProducerOptions): LiveLayoutProducer<TPose>;
+
 /** Options for {@link useLiveLayout}. Only `scene` and `source` are required. */
 interface UseLiveLayoutOptions<TPose> {
     scene: Scene<unknown, string, TPose>;
     /** Where the graph is read from. The same thunk the port affordance takes. */
     source: GraphSource<TPose>;
-    /** A key in `LAYOUTS`, or a layout of the consumer's own. `'force'` relaxes
-     *  continuously; anything else eases to its answer. Default `'force'`. */
-    algorithm?: string | LayoutFn;
+    /** A key in `LAYOUTS`, a layout of the consumer's own, or a planner that
+     *  answers later. `'force'` relaxes continuously; anything else eases to its
+     *  answer. Default `'force'`. */
+    algorithm?: string | LayoutFn | LayoutPlanner;
     layout?: LayoutOptions;
     /** The relaxation's forces, and when a live run of it counts as at rest. */
     force?: Omit<ForceProducerOptions<TPose>, 'geometry'>;
@@ -721,6 +2123,9 @@ interface UseLiveLayoutOptions<TPose> {
     /** Fires once the run has settled or been stopped and its poses are in the
      *  document, with how many participants moved. */
     onSettle?: (moved: number) => void;
+    /** Hears why a `LayoutPlanner` failed to answer, and no run starts. Unset,
+     *  the failure goes to `console.error`. */
+    onError?: (error: unknown) => void;
     /** Whether a node or edge appearing or disappearing re-heats the run.
      *  Default true — a diagram that ignores a new edge looks broken. */
     reheatOnGraphChange?: boolean;
@@ -730,9 +2135,11 @@ interface UseLiveLayoutOptions<TPose> {
 }
 /** Controls for a live layout run, from {@link useLiveLayout}. */
 interface LiveLayout {
-    /** Heat and run. Idempotent while running. */
+    /** Heat and run. Idempotent while running, which includes waiting on a
+     *  planner's answer. */
     start(): void;
-    /** Finish now: commit where the nodes stand. */
+    /** Finish now: commit where the nodes stand. A planner's answer still to
+     *  come is dropped. */
     stop(): void;
     /** Abandon: the document keeps the poses it had. */
     cancel(): void;
@@ -756,20 +2163,11 @@ declare const EASED_LAYOUTS: Readonly<Record<string, LayoutFn>>;
  *
  * An edge running down the ranks leaves its source by the face toward the
  * next rank and arrives at its target's face toward the last, so it reads
- * along the direction the diagram flows. An edge that skips ranks gets
- * waypoints through the gaps in each rank it crosses, so it goes around the
- * nodes between its ends rather than through them.
- *
- * An edge running back up the ranks, or within one, is left to the ends'
- * facing rule.
+ * along the direction the diagram flows; one running back up the ranks does
+ * the same the other way round. An edge that spans ranks runs through the
+ * waypoints `layeredPlan` placed for it.
  */
 
-type Rect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
 /** One edge to route, by the ids of its ends: a node's or a group's. */
 interface RouteEdge {
     id: string;
@@ -782,27 +2180,73 @@ interface LayeredRoute {
     fromPort?: string;
     toPort?: string;
     waypoints?: readonly Vec2$1[];
+    /** The point on the route layout left the edge's label room beside, as a
+     *  `DiagramLabel`'s `{ near }`. */
+    labelAt?: Vec2$1;
 }
-/** What {@link layeredRoutes} reads: the ranked graph, and where everything landed. */
+/** What {@link layeredRoutes} reads: where `layeredPlan` put things. */
 interface LayeredRouteInput {
-    /** The graph layout ranked, for which rank each node is in. */
-    graph: Graph;
     edges: readonly RouteEdge[];
-    /** Every node and group box where it was placed. */
-    boxes: ReadonlyMap<string, Rect>;
+    /** Each node's rank, from `layeredPlan`. Empty for a layout with none,
+     *  which names no ports. */
+    ranks: ReadonlyMap<string, number>;
+    /** Each spanning edge's waypoints, from `layeredPlan`. */
+    waypoints: ReadonlyMap<string, readonly Vec2$1[]>;
+    /** Where each labeled edge's label room is among its waypoints, from
+     *  `layeredPlan`. */
+    labels?: ReadonlyMap<string, Vec2$1>;
     /** Each group's node members, through nested groups. */
     members: ReadonlyMap<string, readonly string[]>;
     /** Ids whose ports are the four compass midpoints, which are the only ones
      *  a route names. */
     compass: ReadonlySet<string>;
     direction?: LayoutDirection;
-    /** How far a route keeps from the boxes it passes. */
-    clearance: number;
 }
 /** Ports and waypoints for each edge of a laid-out `layered` diagram that
  *  needs any, keyed by edge id. */
 declare function layeredRoutes(input: LayeredRouteInput): Map<string, LayeredRoute>;
 
+/**
+ * The edge half of writing a layout to a scene: each edge's waypoints, and
+ * where its label sits among them.
+ *
+ * Layout writes only what it owns. An edge's route is its own while the edge
+ * has no waypoints or still has the ones layout last wrote (`laidOut`), and
+ * is not an `avoid` connector, which only gets its ports named; a
+ * label's place is its own while the label sits at the default middle or at a
+ * `{ near }`, and its edge's route is layout's.
+ */
+
+/** Edge routes for `applyLayout` to write alongside a layout's moves. */
+interface LayoutRoutes {
+    /** Every edge the layout laid out. Each one layout owns gets its route
+     *  from `waypoints`, or loses the one a layout gave it before. */
+    edges: ReadonlySet<string>;
+    waypoints: ReadonlyMap<string, readonly Vec2$1[]>;
+    labels?: ReadonlyMap<string, Vec2$1>;
+    /** The ports layout names. Each end layout owns gets its port from here,
+     *  or loses the one a layout named before. */
+    ports?: ReadonlyMap<string, LayoutPorts>;
+}
+/** The routes `plan` laid out for `graph`'s edges. A layout that routes
+ *  nothing routes every edge straight, taking back what `layered` wrote. */
+declare function routesOf(graph: Graph, plan: LayoutPlan): LayoutRoutes;
+/** A scene as {@link routeWrites} reads it. */
+interface RoutedScene {
+    get(id: never): {
+        data: unknown;
+    } | undefined;
+    isLocked(id: never): boolean;
+    renderOrderNodes(): readonly {
+        id: string;
+        data: unknown;
+        dependsOn?: readonly string[] | 'children';
+    }[];
+}
+/** The new `data` for every edge and label whose route or place changes. A
+ *  locked edge or label is left as it is. */
+declare function routeWrites(scene: RoutedScene, routes: LayoutRoutes): Map<string, unknown>;
+
 /**
  * Running a layout against a scene: `LAYOUTS`, one batch of pose writes, and
  * the action that reaches both. A layout is a pure function of the graph;
@@ -816,12 +2260,14 @@ interface ApplyLayoutOptions<TPose> {
     geometry?: PoseDescriptor<TPose>;
     /** The undo entry's name. Default `'Layout'`. */
     label?: string;
+    /** Edge routes to write in the same batch, from `routesOf`. */
+    routes?: LayoutRoutes;
 }
 /**
  * Write a layout's answer to the scene, as one undoable batch.
  *
- * Returns how many nodes moved, which is zero for a layout that had nothing to
- * do — nothing is written and no history entry is pushed.
+ * Returns how many nodes moved. A layout with nothing to do, nodes or routes,
+ * writes nothing and pushes no history entry.
  *
  * Nodes are **translated**, never re-posed from the layout's numbers: a node's
  * pose can be a path or anything else a consumer wired, and only its own
@@ -869,11 +2315,18 @@ declare function createLayoutAction<TPose>(opts: LayoutActionOptions<TPose>): Ac
  */
 
 /** The minimum a participant source needs from a scene. Narrower than `Scene`
- *  so a consumer can pass anything that answers these two. */
+ *  so a consumer can pass anything that answers these. `layers` and each
+ *  node's `layer`, `parent`, `hidden` and `locked` feed `nodeGates`; a stand-in
+ *  without them gates nothing. */
 interface ParticipantScene<TPose> {
+    readonly layers?: readonly GatedLayer[];
     renderOrderNodes(): readonly {
         id: string;
         kind: 'leaf' | 'container';
+        layer?: string;
+        parent?: string | null;
+        hidden?: boolean;
+        locked?: boolean;
         data: unknown;
         pose: TPose;
         dependsOn?: readonly string[] | 'children';
@@ -887,7 +2340,11 @@ interface ParticipantScene<TPose> {
     childrenOf(id: string): readonly string[];
 }
 /**
- * Every node in `scene`, at the pose it is **painted** at.
+ * Every node in `scene`, at the pose it is **painted** at, marked `hidden` or
+ * `locked` where the scene's `nodeGates` says so, and carrying its `layer` so
+ * a view that does not paint that layer can turn its ports away too. The
+ * marks keep ports off such a node; the graph reads past them, so a hidden
+ * node is still laid out.
  *
  * `effectivePose`, not `node.pose`: an override is what a gesture is currently
  * showing, and a port that answers from the document pose while its node is
@@ -895,7 +2352,9 @@ interface ParticipantScene<TPose> {
  *
  * One source answers both the ports and the graph.
  */
-declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): GraphSource<TPose>;
+declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): () => Iterable<ParticipantPose<TPose> & {
+    node: GraphNodeLike;
+}>;
 /**
  * The composed layer, ready for `CanvasExtensionApi.registerLayer` — the only
  * attach route that is hit-tested. Handing this to `SceneCanvas`'s `layers`
@@ -937,11 +2396,139 @@ declare function diagramShape<TPose>(opts?: DiagramShapeOptions<TPose>): NodeSha
  */
 declare function registerDiagramShape<TPose>(opts?: DiagramShapeOptions<TPose>): () => void;
 
-/** Where a moved node now stands. */
+/**
+ * DOM pinned to a diagram's nodes and edges: a settings card beside the picked
+ * node, a button on an edge's midpoint. Each overlay is placed after every
+ * paint, so it follows a pan, a zoom, a resize and a layout run's every frame.
+ */
+
+/** One piece of DOM held against a node, a group or an edge. */
+interface DiagramOverlay {
+    /** The node, group or edge it is held against. While no such id is in the
+     *  diagram it is not shown. */
+    target: string;
+    /** Beside the target's box, kept inside the view and flipped to the far
+     *  side when the near one has no room; or `'center'`, centered on it.
+     *  Default `'center'`. */
+    placement?: Placement | 'center';
+    /** Gap between the target's box and the overlay, in CSS pixels. Default 0. */
+    offset?: number;
+    /** Tells two overlays on one target apart. Default `target`. */
+    key?: string;
+    content: ReactNode;
+}
+
+/**
+ * The regions half of `DiagramView`'s sync: where each container, pool, and
+ * lane stands, and the region edits a change to that is reported as.
+ */
+
+type Box = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * A region edit, which `DiagramView` reports and does not keep: `box`, a
+ * container or pool moved or resized (`parent` present when a drop changed
+ * the region it is in, `null` for the top level); `lanes`, a pool's lanes
+ * resized, reordered, or added to, every lane in stacking order with its size
+ * (a new lane's id is minted by the view); `release`, Release members run on
+ * a region; `title`, a double-click on a region's header.
+ */
+type ContainerEdit = {
+    kind: 'box';
+    id: string;
+    box: Box;
+    parent?: string | null;
+} | {
+    kind: 'lanes';
+    pool: string;
+    lanes: readonly {
+        id: string;
+        size: number;
+    }[];
+} | {
+    kind: 'release';
+    id: string;
+} | {
+    kind: 'title';
+    id: string;
+};
+
+/**
+ * `DiagramView`'s two-way sync with the data it was built from: new specs are
+ * reconciled into the scene, and what a drag or a layout run changed is
+ * reported back, so a consumer keeping the diagram as data can store it.
+ * `diagramLayoutOf` reads the same report off a `diagramScene` build.
+ */
+
+/** Where a moved node now stands. `parent` is present when a drop changed
+ *  the region it is in: that container's or lane's id, or `null` for the top
+ *  level. The host moves the id from one `members` list to the other. */
 interface NodeMove {
     id: string;
     x: number;
     y: number;
+    parent?: string | null;
+}
+/** An edge whose route or ports a layout run rewrote. `id` is the edge's
+ *  scene id, `edgeIdOf` of its data edge; `waypoints` is empty when the run
+ *  took a route away and left the edge straight, and `ports` names the ends
+ *  layout owns. Store them as the data edge's `routed` and `routedPorts`,
+ *  which stay layout's, not as `waypoints`, `fromPort` and `toPort`, which
+ *  would be the author's and rename the edge. */
+interface EdgeRoute {
+    id: string;
+    waypoints: readonly Vec2$1[];
+    ports: LayoutPorts;
+}
+/** What layout placed in a `diagramScene` build, in the shapes `DiagramView`
+ *  reports: every node not pinned, where it stands, every edge whose route
+ *  or ports layout wrote, and the box of every container and pool not pinned
+ *  whose box is its own rather than fitted. Store them the way `onMove` and
+ *  `onEditContainer` say and the next build leaves them where they are. */
+declare function diagramLayoutOf(specs: readonly DiagramSpec[]): {
+    moves: NodeMove[];
+    routes: EdgeRoute[];
+    containers: ContainerEdit[];
+};
+
+/** One end of a data edge moved onto node `node`, at `port` or on its body. */
+interface ReconnectChange {
+    /** The data edge's id, `edgeIdOf` of it. */
+    edge: string;
+    end: 'from' | 'to';
+    node: string;
+    port?: string;
+}
+/** A data edge's route as a drag or a double-click left it. */
+interface RouteChange {
+    /** The data edge's id, `edgeIdOf` of it. */
+    edge: string;
+    /** Empty when the edge no longer has any. */
+    waypoints: readonly Vec2$1[];
+}
+/** Where a drag left a data edge's label, or `null` for Reset label. */
+interface LabelMove {
+    /** The data edge's id, `edgeIdOf` of it. */
+    edge: string;
+    placement: DiagramLabel | null;
+}
+/** A node's box as a resize handle's drag left it: its place too, since a
+ *  handle on its top or left edge moves it. */
+interface NodeResize {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** What a delete would take: the data nodes, and every data edge that goes with them. */
+interface DeleteReport {
+    nodes: readonly string[];
+    edges: readonly string[];
 }
 /** Props for `DiagramView`. */
 interface DiagramViewProps {
@@ -950,24 +2537,104 @@ interface DiagramViewProps {
      *  selection and anything moved since stay put unless the new specs change
      *  them. Pass a new `key` to start over instead. */
     specs: readonly DiagramSpec[];
-    width: number;
-    height: number;
+    /** `'avoid'` routes every edge around the shapes, holding one router across
+     *  new `specs` so each reroutes only what it disturbed. The routes derive
+     *  from the specs and are never reported. */
+    router?: 'avoid';
+    /** `'dodge'` moves each edge label off whatever covers it, along its
+     *  route or across it, after any `router` has run. Placement derives from
+     *  the specs and is never reported. */
+    labels?: 'dodge';
+    /** Line jumps of this radius: where two edges cross, the later one bows
+     *  over the earlier in a half circle. Applied after `router` and `labels`; derived from
+     *  the specs and never reported. */
+    hops?: number;
+    /** The view opens fitted to the diagram, and fits again when the size or a
+     *  fit option changes or a layout run settles, until the user pans or zooms;
+     *  from then on the view is theirs. Omit both to fill the parent, which
+     *  then needs a size of its own; a resize of the parent is a size change. */
+    width?: number;
+    height?: number;
     /** A participant id, or null for none. */
     selected?: string | null;
     /** Reports what each click leaves picked, `null` for none — a re-click on the
      *  picked node reports it again. The canvas keeps the pick even if
      *  `selected` does not follow it; only a change to `selected` is pushed in. */
     onSelect?: (id: string | null) => void;
+    /** Reports the node, group or edge the pointer comes to be over, and `null`
+     *  once it is over none or leaves the canvas. An edge answers only while
+     *  edges are picked (`pickEdges`). */
+    onHover?: (id: string | null) => void;
+    /** Whether a click or a hover can land on an edge, which is then picked
+     *  like a node. Default: on when `onReconnect`, `onEditRoute`, `onDelete`,
+     *  `onEditLabel` or `onMoveLabel` is set. */
+    pickEdges?: boolean;
+    /** DOM held against nodes, groups and edges, kept in place through pans,
+     *  zooms, resizes and layout runs. The view's box is their containing
+     *  block; their content takes the pointer, and the canvas beneath does not
+     *  see it. */
+    overlays?: readonly DiagramOverlay[];
     /** Set to let nodes be dragged. Reports every node a drag or a layout run
-     *  moved. Store each as the data node's `at` with `pinned: true`, or the
-     *  next `diagramScene` lays it out again. */
-    onMove?: (moves: readonly NodeMove[]) => void;
-    /** Set to make ports grabbable. Dragging one port onto another reports the
-     *  edge it describes and draws nothing; add it to the data to keep it. */
+     *  moved, and every edge whose route or ports a layout run rewrote. Store
+     *  each move as the data node's `at` with `pinned: true`, and each route as
+     *  the data edge's `routed` and `routedPorts`, or the next `diagramScene`
+     *  lays them out again. */
+    onMove?: (moves: readonly NodeMove[], routes: readonly EdgeRoute[]) => void;
+    /** Set to give a selected node resize handles. The box resizes live while
+     *  a handle is dragged; on release the new box is reported and the view
+     *  draws it only once the specs do. Store it as the data node's `width`,
+     *  `height`, and `at` with `pinned: true`; the size is a minimum, so a box
+     *  dragged smaller than its rows grows back to them. */
+    onResize?: (resizes: readonly NodeResize[]) => void;
+    /** Ports are grabbable when this is set, unless `ports` says otherwise. Dragging one port onto another reports the
+     *  edge it describes and draws nothing; add it to the data to keep it. An
+     *  end on a shape's body (`connectBodies`) has no port field. */
     onConnect?: (edge: DataEdge) => void;
+    /** Set to let a selected edge's ends be dragged onto another port, or with
+     *  `connectBodies` onto a shape's body. Reports the move and draws nothing; change the data edge to keep it. */
+    onReconnect?: (change: ReconnectChange) => void;
+    /** Set to give a selected edge handles along its route: drag one to move or
+     *  insert a waypoint, or slide an orthogonal segment; double-click one to
+     *  remove it. Reports the edge's new waypoints and draws nothing; store them
+     *  as the data edge's `waypoints` and clear its `routed`. */
+    onEditRoute?: (change: RouteChange) => void;
+    /** Set to let Delete and Backspace remove the selection. Reports the
+     *  selected data nodes (a selected group, not its members; a selected
+     *  container, pool, or lane with everything inside it) and every edge
+     *  selected or ending on one of them, and removes nothing. */
+    onDelete?: (removed: DeleteReport) => void;
+    /** Set to let a member of a group marked `reorder` be dragged along that
+     *  axis among its siblings, or the selected one stepped with Alt and an
+     *  arrow key. Reports the members' new order and moves nothing: write it to
+     *  the group's `members`, which layered layout keeps. */
+    onReorder?: (change: ReorderChange) => void;
+    /** Set to report a double-click on an edge, for its label to be edited. */
+    onEditLabel?: (edge: string) => void;
+    /** Set to let an edge's label be dragged along and beside it, and to enable
+     *  Reset label for the selected edge. Reports the placement and draws
+     *  nothing; store it as the data edge's `labelPlacement`, and delete that
+     *  field for `null`. */
+    onMoveLabel?: (change: LabelMove) => void;
+    /** Set to edit `DiagramData` containers and pools: drag a lane's boundary,
+     *  click a pool's add-lane button, drag a lane by its header to reorder,
+     *  move or resize a region, double-click a header, or run Release members.
+     *  Each is reported and nothing is kept until the specs follow. A region's
+     *  move also reports what it carried to `onMove`, and a lane resize the
+     *  members of the lanes it shifts. Store a `box` edit as the container's
+     *  `box` with `pinned: true`. */
+    onEditContainer?: (edit: ContainerEdit) => void;
+    /** Whether a connect or a reconnect may end on a shape's body, away from
+     *  its ports. Default false. */
+    connectBodies?: boolean;
+    /** Contributions to install after the view's own: a tool's bindings, a key. */
+    ambient?: readonly Contribution[];
+    /** Whether ports are drawn. `'connect'` draws them and lets one be dragged
+     *  onto another; `'show'` only draws them. Default: `'connect'` when
+     *  `onConnect` is set, else `'none'`. */
+    ports?: 'connect' | 'show' | 'none';
     /** Whether the canvas's keyboard shortcuts — held Space to pan among them —
      *  run. They listen page-wide, so a view-only diagram beside other UI would
-     *  claim keys meant for the page. Default: on when `onMove` or `onConnect`
+     *  claim keys meant for the page. Default: on when any callback that edits
      *  is set. */
     enableKeybindings?: boolean;
     /** Which ports may be joined. Default: a port may not join itself, and two
@@ -975,28 +2642,35 @@ interface DiagramViewProps {
     canConnect?: CanConnect;
     /** How ports look and answer the pointer, and the router a connect's
      *  preview draws with. */
-    portOptions?: Pick<DiagramContributionOptions<RectPose>, 'fill' | 'stroke' | 'sizePx' | 'hitRadiusPx' | 'cursor' | 'shows' | 'snapRadius' | 'router'>;
+    portOptions?: Pick<DiagramContributionOptions<RectPose>, 'fill' | 'stroke' | 'shape' | 'sizePx' | 'hitRadiusPx' | 'cursor' | 'shows' | 'showsPort' | 'snapRadius' | 'router'>;
     /** How a layout run from {@link DiagramViewApi.layout} behaves: its forces,
-     *  how many frames an eased layout takes, its easing. */
+     *  how many frames an eased layout takes, its easing, and `onError`, which
+     *  hears a `LayoutPlanner` that failed to answer. */
     live?: Omit<UseLiveLayoutOptions<RectPose>, 'scene' | 'source' | 'algorithm'>;
-    /** The smallest scale the initial fit may use. Unset, the whole diagram fits
+    /** The smallest scale the fit may use. Unset, the whole diagram fits
      *  however small that makes it; set, it stops here and the rest is a pan away. */
     minScale?: number;
-    /** The largest scale the initial fit may use. Default 1, so a small
+    /** The largest scale the fit may use. Default 1, so a small
      *  diagram opens at its own size rather than blown up. */
     maxScale?: number;
     /** Which part of a diagram too big for the box it opens on: its middle
      *  (default) or its top-left, where a layered flow begins. */
     anchor?: 'center' | 'start';
-    /** Space kept clear around the diagram by the initial fit, in CSS pixels.
+    /** Space kept clear around the diagram by the fit, in CSS pixels.
      *  Default 16. */
     fitPadding?: number;
     /** What the canvas paints behind the diagram. Unset, it is transparent. */
     background?: Paint;
-    /** The view, controlled. Set it and the initial fit is skipped; pair it
+    /** Sheets painted under the diagram, one filled rect per page; `diagramPages(data)`
+     *  places them. The default fit takes in every page. */
+    pages?: {
+        placed: readonly PlacedPage[];
+        fill: string;
+    };
+    /** The view, controlled. Set it and the fit is skipped; pair it
      *  with `onViewChange` or panning does nothing. */
     view?: View;
-    /** Every view change, from a pan, a zoom or the initial fit. */
+    /** Every view change, from a pan, a zoom or a refit. */
     onViewChange?: (view: View) => void;
     className?: string;
 }
@@ -1004,13 +2678,42 @@ interface DiagramViewProps {
 interface DiagramViewApi {
     /** Lay the diagram out again from where its nodes stand, animated. `'force'`
      *  (default) relaxes until it settles; any other layout eases to its answer.
-     *  What moved is reported to `onMove` once the run settles. */
-    layout(algorithm?: 'layered' | 'tree' | 'force' | LayoutFn): void;
+     *  A `LayoutPlanner` is handed the diagram's graph and eased to once it
+     *  answers; a drag, an edit or another `layout` call before then drops the
+     *  answer. What moved is reported to `onMove` once the run settles. */
+    layout(algorithm?: DiagramLayout): void;
     /** The run `layout` started: stop it where it stands, or cancel it. */
     live: LiveLayout;
+    /** The world point under a client point: where a drop from outside the canvas lands. */
+    worldAt(clientX: number, clientY: number): Vec2$1;
+    /** The world rect the canvas shows, or `null` before it has a size. */
+    visible(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    /** Where a node, group or edge is drawn, in client coordinates — for an
+     *  edge, an empty rect at the midpoint along its route. `null` for an id the
+     *  diagram does not hold, or before the canvas mounts. Read it again from
+     *  {@link subscribeFrame}, after every paint. */
+    rectOf(id: string): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    /** Run `fn` after every paint: a pan, a zoom, a layout frame, a change of
+     *  specs. Returns an unsubscribe; a call before the canvas mounts returns one
+     *  and never runs `fn`. */
+    subscribeFrame(fn: () => void): () => void;
 }
+/** What {@link DiagramViewApi.layout} runs. */
+type DiagramLayout = 'layered' | 'tree' | 'force' | 'chain' | LayoutFn | LayoutPlanner;
+
 /** A diagram: drag or wheel to pan, zoom, and pick a node; drag nodes with
- *  `onMove`, join ports with `onConnect`. Labels paint only in a registered
+ *  `onMove`, join ports with `onConnect`. Every edit is reported, never
+ *  written: change the specs to keep it. Labels paint only in a registered
  *  font family; `diagramScene` defaults to sans-serif, so call
  *  `registerCanvasFont('sans-serif')` or text renders blank. */
 declare const DiagramView: react.ForwardRefExoticComponent<DiagramViewProps & react.RefAttributes<DiagramViewApi>>;
@@ -1021,4 +2724,216 @@ declare const DiagramView: react.ForwardRefExoticComponent<DiagramViewProps & re
  *  `<SceneCanvas onClick>`. */
 declare function useMirroredSelection(selection: Pick<SelectionApi, 'get' | 'set'>, selected: string | null | undefined, onSelect: ((id: string | null) => void) | undefined): () => void;
 
-export { ANCHOR_DERIVE_POSE, type ApplyLayoutOptions, BodySpec, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, type DataEdge, type DataGroup, type DataNode, type DiagramAnchor, type DiagramContributionOptions, type DiagramData, type DiagramDerivePose, type DiagramEdge, DiagramGroup, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramRouter, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, type DiagramTextStyle, DiagramView, type DiagramViewApi, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, Graph, GraphSource, type GroupPoseOptions, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayeredRoute, type LayeredRouteInput, type LayoutActionOptions, LayoutDirection, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MeasureRowText, type NodeMove, type NodeStyle, Outline, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, PortAnchor, type PortScratch, PortSpec, PortsOptions, ROUTERS, type RouteEdge, type RouteRequest, type Router, Row, type SelfLoop, type UseLiveLayoutOptions, anchorDerivePose, applyLayout, bezier, boxAround, 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 };
+/** The themes that ship, by id, in the order a picker lists them. `paper` is ink on white;
+ *  `night` is the effect looks' own dark colors. */
+declare const DIAGRAM_THEMES: Readonly<Record<string, DiagramTheme>>;
+
+/**
+ * A theme matching its host's chrome, built from resolved `--wzl-*` values:
+ * `read` answers a custom property's value, as `getComputedStyle(el)
+ * .getPropertyValue` does. A token that reads empty takes `paper`'s color.
+ */
+declare function diagramThemeFromTokens(read: (token: string) => string, opts?: {
+    id?: string;
+    name?: string;
+}): DiagramTheme;
+
+/** The style a shape naming `role` is drawn in: that role's, or the theme's default role's. */
+declare function roleStyle(theme: DiagramTheme, role?: string): NodeStyle;
+/** The style a connector naming `role` is drawn in: the role's stroke, its label in that stroke too;
+ *  with no role, the theme's own connector and label colors. */
+declare function roleEdgeStyle(theme: DiagramTheme, role?: string): EdgeStyle;
+/** The stroke a connector drawn under `theme` starts with, for a connect action's `edgeStroke`. */
+declare function themeEdgeStroke(theme: DiagramTheme): Stroke;
+/** The theme's face as `diagramScene` and the stencils take one. */
+declare const themeFont: (theme: DiagramTheme) => {
+    fontFamily: string;
+    fontSize: number;
+};
+/** The face edge labels are sized from, before `labelStyleOf` takes two sizes off: the theme's label
+ *  face where it names one, else `font`. */
+declare const themeLabelFont: (theme: DiagramTheme, font?: {
+    fontFamily: string;
+    fontSize: number;
+}) => {
+    fontFamily: string;
+    fontSize: number;
+};
+/** The face a new connector label is set in under `theme`. */
+declare const themeLabelStyle: (theme: DiagramTheme) => {
+    fontSize: number;
+    fontFamily: string;
+};
+/** The theme a document value names: a shipped theme by id, or a whole theme. `fallback` for none,
+ *  or for an id no shipped theme has. */
+declare function diagramThemeFrom(value: unknown, fallback?: DiagramTheme): DiagramTheme;
+/** The theme a scene's `diagram:theme` value names. */
+declare function diagramThemeOf(scene: {
+    doc: {
+        get(key: string): unknown;
+    };
+}, fallback?: DiagramTheme): DiagramTheme;
+/** What `diagram:theme` holds for `theme`: a shipped theme's id, or the whole theme. */
+declare const themeDocValue: (theme: DiagramTheme) => string | DiagramTheme;
+
+/** A scene node as {@link themeWrites} reads it. */
+interface ThemedNode {
+    id: string;
+    parent: string | null;
+    data: unknown;
+    dependsOn?: readonly string[] | 'children';
+}
+/** A scene as {@link themeWrites} reads it. */
+interface ThemedScene {
+    get(id: never): ThemedNode | undefined;
+    renderOrderNodes(): readonly ThemedNode[];
+    childrenOf(id: never): readonly string[];
+}
+/**
+ * The new `data` for every node `theme` recolors: shapes, their text rows,
+ * groups and containers and their titles, connectors and their labels. Given
+ * `ids`, only those boxes and connectors, and the text that belongs to them.
+ * Given `from`, the theme the scene was in, text moves by the step between the
+ * two themes' sizes, except where its owner's author set the size. A node
+ * already as the theme draws it is left out.
+ */
+declare function themeWrites(scene: ThemedScene, theme: DiagramTheme, ids?: ReadonlySet<string>, from?: DiagramTheme): Map<string, unknown>;
+
+/**
+ * Measures a row's text as the kit's text renderer lays it out, from the
+ * registered font's metrics, so a body sized by it holds the text it draws.
+ * The line height is 1.2 sizes, as `canvasMeasure`'s is. Needs the family
+ * registered; an unregistered one measures as the fallback glyph.
+ */
+declare const rendererMeasure: MeasureRowText;
+
+/**
+ * Laying a built body out again once its text changes size. A body whose
+ * rows are all text records how it stacks them (`DiagramNode.body`), and each
+ * text row records its place (`bodyRow`), so the rows can be read back from
+ * the scene and handed to the same layout `buildBody` used.
+ */
+
+/** A scene as {@link relayoutBodies} reads and writes it. */
+interface RelayoutScene {
+    get(id: never): {
+        pose: unknown;
+        data: unknown;
+    } | undefined;
+    childrenOf(id: never): readonly string[];
+    setPose(id: never, pose: never): void;
+}
+/**
+ * Lays each body among `ids` out again from its text rows as they are now:
+ * the body grows to what its rows need, never shrinks, and its rows are
+ * stacked again inside it. Anything that is not a body carrying a `body`
+ * record is left alone. Call inside the batch that changed the text, so it is
+ * the same undo entry.
+ */
+declare function relayoutBodies(scene: RelayoutScene, ids: Iterable<string>, measure?: MeasureRowText): void;
+
+/**
+ * The edits a theme makes to a scene, each one undo entry: applying a theme,
+ * naming a shape's or connector's role, and setting a color by hand.
+ */
+
+type AnyScene = Scene<unknown, string, unknown>;
+/** What a styleable node says about its style: a shape or a connector, the role it names, and the
+ *  colors its author set by hand. */
+interface DiagramStyleState {
+    kind: 'shape' | 'connector';
+    role?: string;
+    own: readonly StyleField[];
+    /** The parts of its text face the author set: a theme's size change leaves those. */
+    ownFont: readonly FontField[];
+}
+/** The style state of a shape (a body) or a connector, or `null` for anything else — a text row,
+ *  a label, a group, a container. */
+declare function diagramStyleOf(node: {
+    data: unknown;
+}): DiagramStyleState | null;
+/** Options for {@link applyDiagramTheme}. */
+interface ApplyDiagramThemeOptions {
+    /** Fold this apply into the undo entry before it when that one was made under the same key, so a
+     *  run of applies, such as a theme color dragged, undoes as one. See `scene.batch`. */
+    coalesceKey?: string;
+    /** The theme the scene is in now, whose font size text moves from. Default the scene's own
+     *  `diagram:theme`; a host that draws a scene naming none in another theme passes that. */
+    from?: DiagramTheme;
+    /** Measures text, for laying out again a body whose text changed size. Default an estimate. */
+    measure?: MeasureRowText;
+}
+/** Recolors the whole scene in `theme` and saves it as the `diagram:theme` document value, as one
+ *  undo entry. Colors the author set by hand stay. */
+declare function applyDiagramTheme(scene: AnyScene, theme: DiagramTheme, label?: string, opts?: ApplyDiagramThemeOptions): void;
+/** Options for {@link setDiagramStyle} and {@link setDiagramColor}. */
+interface DiagramStyleEditOptions {
+    /** The theme to color by. Default the scene's own `diagram:theme`. */
+    theme?: DiagramTheme;
+    label?: string;
+}
+/**
+ * Names `role` on every shape and connector among `ids` and recolors them in
+ * it, as one undo entry. Choosing a role hands back any color the author had
+ * set, so the role shows.
+ */
+declare function setDiagramStyle(scene: AnyScene, ids: readonly string[], role: string, opts?: DiagramStyleEditOptions): void;
+/**
+ * Sets `field` to `color` on every shape and connector among `ids` — `text`
+ * reaching a shape's rows and a connector's label — and records it in their
+ * `ownStyle`, so a theme change leaves it. One undo entry. A connector has no
+ * fill, and ignores one.
+ */
+declare function setDiagramColor(scene: AnyScene, ids: readonly string[], field: StyleField, color: string, opts?: Pick<DiagramStyleEditOptions, 'label'>): void;
+/**
+ * Sets the text of every shape and connector among `ids` — a shape's rows, a
+ * connector's label — to `size`, and records it in their `ownFont`, so a
+ * theme's size change leaves it. One undo entry.
+ */
+declare function setDiagramFontSize(scene: AnyScene, ids: readonly string[], size: number, opts?: Pick<DiagramStyleEditOptions, 'label'> & {
+    measure?: MeasureRowText;
+}): void;
+
+type BoxField = 'fill' | 'stroke' | 'text';
+/** Where one value sits in a {@link DiagramTheme}. */
+type ThemePath = readonly ['roles', string, BoxField] | readonly ['edge', 'stroke'] | readonly ['label', 'fill'] | readonly ['container', BoxField] | readonly ['lane', 'header', BoxField] | readonly ['lane', 'bodies', number, BoxField] | readonly ['page'] | readonly ['font', 'family'] | readonly ['font', 'size'] | readonly ['series', number];
+/** Whether `theme` is one of {@link DIAGRAM_THEMES} itself, which no edit may change. */
+declare const isShippedTheme: (theme: DiagramTheme) => boolean;
+/** A custom copy of `theme`, named "<name> (edited)", for a document to keep and change. */
+declare function forkTheme(theme: DiagramTheme): DiagramTheme;
+/** `theme` when it is already a custom theme, else a fork of it: what the first edit to a shipped
+ *  theme starts from. */
+declare const editableTheme: (theme: DiagramTheme) => DiagramTheme;
+/** The value at `path` in `theme`. */
+declare function themeValue(theme: DiagramTheme, path: ThemePath): unknown;
+/** `theme` with `value` at `path`; everything else shared with it. */
+declare const setThemeValue: (theme: DiagramTheme, path: ThemePath, value: string | number) => DiagramTheme;
+/** Every role `theme` styles with the name a picker shows: the shipped roles first, in their order,
+ *  then the theme's own. */
+declare function themeRoles(theme: DiagramTheme): {
+    id: string;
+    label: string;
+}[];
+/** `theme` with a role named `label`, in the default role's colors, and the id it was given. */
+declare function addThemeRole(theme: DiagramTheme, label: string): {
+    theme: DiagramTheme;
+    id: string;
+};
+/** `theme` with role `id` shown as `label`. The id, which shapes name the role by, stays. */
+declare const renameThemeRole: (theme: DiagramTheme, id: string, label: string) => DiagramTheme;
+/** `theme` without role `id`; its shapes fall to the default role when the theme is next applied.
+ *  The default role stays: `theme` comes back unchanged. */
+declare function removeThemeRole(theme: DiagramTheme, id: string): DiagramTheme;
+
+/** The extension a theme file is saved with. */
+declare const DIAGRAM_THEME_EXTENSION = ".weasel-theme.json";
+/** `theme` as the text of a theme file. */
+declare const themeToJson: (theme: DiagramTheme) => string;
+/** The theme a theme file holds, or what is wrong with it, each error naming where. */
+declare function parseDiagramTheme(json: string): {
+    theme: DiagramTheme;
+} | {
+    errors: string[];
+};
+
+export { ADD_LANE_ACTION_ID, type ApplyDiagramThemeOptions, type ApplyLayoutOptions, AvoidInput, AvoidOptions, AvoidRouter, AvoidRoutes, type AvoidRouting, type AvoidRoutingOptions, type AvoidSceneOptions, type BodyEnd, type BodyHit, Bounds$2 as Bounds, CONNECTOR_ACTION_ID, CONNECTOR_TOOL_ID, CONNECT_ACTION_ID, CONTAINER_HEADER, CONTAINER_LAYOUTS, CONTAINER_STENCILS, type CanConnect, type ConnectActionOptions, type ConnectEnd, type ConnectView, type ContainerBuildOptions, type ContainerEdit, ContainerHeader, type ContainerLayoutOptions, ContainerRole, type ContainerStencil, DEFAULT_EDGE_STROKE, DIAGRAM_CONTAINER_LAYOUT, DIAGRAM_EDGE, DIAGRAM_LABEL, DIAGRAM_LANE_COLUMNS_LAYOUT, DIAGRAM_LANE_ROWS_LAYOUT, DIAGRAM_OFF_PAGE_TAG, DIAGRAM_PASS_ORDER, DIAGRAM_POOL_COLUMNS_LAYOUT, DIAGRAM_POOL_ROWS_LAYOUT, DIAGRAM_THEMES, DIAGRAM_THEME_EXTENSION, DataContainer, DataEdge, DataNode, type DeleteReport, DiagramContainer, type DiagramContributionOptions, DiagramData, DiagramEdge, DiagramLabel, type DiagramLayout, DiagramNodeLike, DiagramNodeReader, type DiagramOverlay, DiagramSceneData, DiagramSceneOptions, type DiagramShapeOptions, DiagramSpec, type DiagramStencil, type DiagramStyleEditOptions, type DiagramStyleState, DiagramTheme, DiagramView, type DiagramViewApi, type DiagramViewProps, type DraggableLabel, type DropParentScene, EASED_LAYOUTS, EDGE_DERIVE_PATH, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, EDIT_EDGE_LABEL_ACTION_ID, type EasedProducerOptions, EdgeEnd, type EdgeEndAffordanceOptions, type EdgeEndScratch, EdgeHop, type EdgeLabelOptions, type EdgeRoute, type EdgeRouteOptions, type EdgeRouteState, EdgeStyle, type EditEdgeLabelOptions, type EndChange, FLOWCHART_STENCILS, FOLLOW_OFF_PAGE_ACTION_ID, type FollowOffPageOptions, FontField, ForceOptions, type ForceProducerOptions, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, Graph, GraphNodeLike, GraphSource, type Hops, type HopsOptions, LABEL_DERIVE_POSE, LABEL_DRAG_AFFORDANCE_KIND, LABEL_DRAG_LAYER_ID, LANE_AFFORDANCE_KIND, LANE_HEADER_SIZE, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, type LabelDragOptions, type LabelEdit, type LabelMove, type LabelPlacement, type LabelPlacementOptions, type LabelPoseOptions, type LabelScratch, LabelSpot, type LaneActionOptions, type LaneLayerOptions, type LaneResize, type LaneScratch, type LaneStackOptions, type LayeredRoute, type LayeredRouteInput, type LayoutActionOptions, LayoutDirection, LayoutFn, LayoutOptions, LayoutPlan, LayoutPlanner, LayoutPorts, LayoutResult, type LayoutRoutes, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MIN_LANE_SIZE, MOVE_LABEL_ACTION_ID, MeasureRowText, type MovingEnd, type NodeMove, type NodeResize, NodeStyle, OFF_PAGE_STUB, OFF_PAGE_TAG_DERIVE_POSE, OFF_PAGE_TAG_PADDING, type OffPageEdgeInput, type OffPageMarkerOptions, OffPageSplit, type OffPageSplitInput, type OffPageTagLook, type OffPageTarget, Outline, POOL_HEADER_SIZE, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, PlaceLabelsOptions, type PoolLanes, Port, type PortAffordanceOptions, type PortScratch, PortsOptions, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTERS, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, type ReconnectChange, type ReconnectOptions, type RegionOptions, type RegionSpec, type RelayoutScene, type ReorderChange, type ReorderGap, type ReorderItem, type ReorderMove, type ReorderOptions, type ReorderSlots, type ResolvedRoute, type RouteChange, type RouteEdge, type RouteEdit, type RouteEditOptions, type RouteHandle, type RouteRequest, type RoutedScene, type Router, type RouterEdit, Row, RowTextStyle, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, type SelfLoop, type SetHopsOptions, type SetRouterOptions, type StencilInsertOptions, StyleField, type StyledRegion, type ThemePath, type ThemedNode, type ThemedScene, type UseLiveLayoutOptions, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, type WaypointAffordanceOptions, type WaypointScratch, addLane, addThemeRole, applyDiagramTheme, applyLayout, avoid, avoidSceneInput, bezier, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, connectorTool, containerBuild, containerShape, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createFollowOffPageAction, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, dataEdgeStyle, dataNodeStyle, dataOffPage, dataRegionStyle, defaultCanConnect, diagramCanDropInto, diagramContainerLayout, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramOffPage, diagramPages, diagramPorts, diagramResizable, diagramScene, diagramShape, diagramStyleOf, diagramThemeFrom, diagramThemeFromTokens, diagramThemeOf, diagramWaypoints, documentBoundsOf, dragSegment, dragVertex, draggableLabels, dropEmptyEdgeLabel, easedProducer, edgeDerivePath, edgeEndLayer, edgeEndScratchOf, edgeIdOf, edgeLabelSpec, edgeRouter, editContainerTitleAction, editContainerTitleBinding, editEdgeLabelAction, editEdgeLabelBinding, editableTheme, firstLanes, followOffPageBinding, forceProducer, forkTheme, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, hopFollower, insertWaypoint, installAvoidRouting, installHops, installLabelPlacement, installOffPageMarkers, isBodyEnd, isShippedTheme, labelDerivePose, labelDragLayer, labelScratchOf, labelSize, labelUnder, laneHeader, laneLayer, laneResizeFrame, laneScratchOf, laneStackLayout, lanesOf, layeredRoutes, layoutPoses, movedLabelData, nextOffPageRef, offPageFarText, offPageOps, offPageSplits, offPageTagData, offPageTagDerivePose, offPageTagLook, offPageTagSize, offPageTagSpec, offPageTagSpecs, offPageTagText, offPageTargetOf, orthogonal, parseDiagramTheme, pinSegment, poolAxisOf, poolHeader, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, regionSpecs, registerDiagramShape, relayoutBodies, releaseMembers, removeSegment, removeThemeRole, removeWaypoint, renameThemeRole, rendererMeasure, reorderBinding, reorderContribution, resolveEnd, roleEdgeStyle, roleStyle, routeDataOps, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneParticipants, segmentAxis, selfLoop, sequenceSlots, setDiagramColor, setDiagramFontSize, setDiagramStyle, setThemeValue, simplifyStops, stackedLanes, stencilBuild, stencilIdOf, stencilKind, stencilTool, straight, subpathOf, themeDocValue, themeEdgeStroke, themeFont, themeLabelFont, themeLabelStyle, themeRoles, themeToJson, themeValue, themeWrites, titlePose, unpinSegment, useAvoidRouting, useConnectorTool, useHops, useLabelPlacement, useLiveLayout, useMirroredSelection, useOffPageMarkers, useStencilInsert, useStencilTool, waypointFollower, waypointLayer, waypointScratchOf, withDiagramRegistry, withHops, withRouter };