@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/utils/clipboard.test.ts

@@ -67,7 +67,7 @@ describe('clipboard', () => {
       nodeZ: (index) => `n${index}`,
       linkZ: (index) => `l${index}`,
     });
-    expect(ids).toEqual(['ellipse-1', 'class-2', 'spline-3']);
+    expect(ids).toEqual(['ellipse-1', 'rect-2', 'spline-3']);
     const next = reduceIntent(scene, intent);
     expect(Object.keys(next.nodes).length).toBe(6);
     // Offsets are read against the fixture, whose coordinates are a layout and change with it.
@@ -78,11 +78,32 @@ describe('clipboard', () => {
     const spline = next.links['spline-3'];
     expect(spline.type === 'spline' && spline.points).toEqual(controls.map(({ x, y }) => ({ x: x + 64, y: y + 64 })));
     expect(endpointNode(spline.source)).toBe('ellipse-1');
-    expect(endpointNode(spline.target)).toBe('class-2');
+    expect(endpointNode(spline.target)).toBe('rect-2');
     // The originals are untouched.
     expect(next.nodes['scene:r/b'].center).toEqual(scene.nodes['scene:r/b'].center);
   });
 
+  test('paste puts every element on the given layer', ({ expect }) => {
+    const scene = fixture();
+    const clipboard = copySelection(scene, ['scene:r/b', 'scene:r/c']);
+    if (!clipboard) {
+      throw new Error('nothing copied');
+    }
+    let counter = 0;
+    const { intent } = pasteFragment({
+      clipboard,
+      offset: { x: 64, y: 64 },
+      createId: (prefix) => `${prefix}-${++counter}`,
+      nodeZ: (index) => `n${index}`,
+      linkZ: (index) => `l${index}`,
+      layer: 'top',
+    });
+    const next = reduceIntent(scene, intent);
+    expect(
+      [next.nodes['ellipse-1'], next.nodes['rect-2'], next.links['spline-3']].map((element) => element.layer),
+    ).toEqual(['top', 'top', 'top']);
+  });
+
   test('a free end is copied with its node and moves with the paste', ({ expect }) => {
     const scene = fixture();
     const free: Link = {

package/src/utils/clipboard.ts

@@ -13,6 +13,7 @@ import {
   type ElementId,
   type Endpoint,
   type Intent,
+  type LayerId,
   type Link,
   type Node,
   type Point,
@@ -60,19 +61,22 @@ export type PasteOptions = {
   /** Z keys for the pasted nodes and links, above the scene. */
   nodeZ: (index: number) => string;
   linkZ: (index: number) => string;
+  /** The layer the pasted elements go on; unset, each keeps its own. */
+  layer?: LayerId;
 };
 
 export type Paste = { intent: Intent; ids: ElementId[] };
 
 /** The batch that recreates the fragment with fresh ids at `offset`, and the ids it will create. */
-export const pasteFragment = ({ clipboard, offset, createId, nodeZ, linkZ }: PasteOptions): Paste => {
+export const pasteFragment = ({ clipboard, offset, createId, nodeZ, linkZ, layer }: PasteOptions): Paste => {
   const idMap = new Map<ElementId, ElementId>();
   const shift = (point: Point): Point => ({ x: point.x + offset.x, y: point.y + offset.y });
+  const onLayer = layer !== undefined ? { layer } : {};
   const nodes: Node[] = clipboard.nodes.map((node, index) => {
     const id = createId(node.type);
     idMap.set(node.id, id);
     // A pasted portal shares the child scene: two portals to one scene are Muse "linked cards" (§4).
-    return { ...node, id, z: nodeZ(index), center: shift(node.center) };
+    return { ...node, ...onLayer, id, z: nodeZ(index), center: shift(node.center) };
   });
   const links: Link[] = clipboard.links.map((link, index) => {
     const id = createId(link.type);
@@ -81,8 +85,8 @@ export const pasteFragment = ({ clipboard, offset, createId, nodeZ, linkZ }: Pas
       isPointEndpoint(end) ? { point: shift(end.point) } : { ...end, node: idMap.get(end.node) ?? end.node };
     const ends = { source: remap(link.source), target: remap(link.target) };
     return link.type === 'spline'
-      ? { ...link, id, z: linkZ(index), ...ends, points: link.points.map(shift) }
-      : { ...link, id, z: linkZ(index), ...ends };
+      ? { ...link, ...onLayer, id, z: linkZ(index), ...ends, points: link.points.map(shift) }
+      : { ...link, ...onLayer, id, z: linkZ(index), ...ends };
   });
   return {
     intent: {

package/src/utils/diagram.test.ts

@@ -19,7 +19,9 @@ describe('diagram', () => {
     const scene = build([
       rect('scene:test/a', box(0, 0), 'A'),
       rect('scene:test/b', box(256, 0), 'B'),
-      SceneBuilder.link('line', 'scene:test/a', 'scene:test/b').id('scene:test/ab').properties({ directed: true }),
+      SceneBuilder.link('line', 'scene:test/a', 'scene:test/b')
+        .id('scene:test/ab')
+        .properties({ ends: { end: 'arrow' } }),
     ]);
     const { metrics, diagnostics } = Diagnostics.analyze(toDiagramObjects(scene, defaultNodeRegistry).objects);
     expect(metrics.nodes).toBe(2);

package/src/utils/diagram.ts

@@ -10,17 +10,8 @@
 import { type Scene as Diagram } from '@dxos/diagram';
 
 import { type NodeRegistry } from '../model/registry.ts';
-import {
-  type ElementId,
-  type Link,
-  type Node,
-  type Point,
-  type Scene,
-  isClassNode,
-  isEllipseNode,
-  isNoteNode,
-  isRectNode,
-} from '../model/types.ts';
+import { type ElementId, type Link, type Point, type Scene, isEllipseNode } from '../model/types.ts';
+import { nodeTitle } from './parts.ts';
 import { curvePoint, linkGeometry, smartPoints } from './route.ts';
 import { nodeBounds } from './shapes.ts';
 
@@ -39,19 +30,6 @@ export type DiagramObjects = {
  */
 const objectId = (id: ElementId): string => encodeURIComponent(id);
 
-const nodeText = (node: Node): string | undefined => {
-  if (isRectNode(node) || isEllipseNode(node)) {
-    return node.label;
-  }
-  if (isClassNode(node)) {
-    return node.name;
-  }
-  if (isNoteNode(node)) {
-    return node.text;
-  }
-  return undefined;
-};
-
 /** The polyline a link is drawn along, in scene coordinates. */
 const linkPoints = (scene: Scene, registry: NodeRegistry, link: Link): Point[] | undefined => {
   const geometry = linkGeometry(scene, registry, link);
@@ -93,7 +71,7 @@ export const toDiagramObjects = (scene: Scene, registry: NodeRegistry): DiagramO
           y,
           w: width,
           h: height,
-          ...(node.style?.guide ? {} : { text: nodeText(node) }),
+          ...(node.style?.guide ? {} : { text: nodeTitle(registry, node) }),
         },
       ],
     });

package/src/utils/group.test.ts

@@ -0,0 +1,69 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { reduceIntent } from '../model/projection.ts';
+import { type Layer } from '../model/types.ts';
+import { SceneBuilder } from './builder.ts';
+import { groupIntoScene } from './group.ts';
+import { DEFAULT_LAYER } from './layers.ts';
+import { between } from './order.ts';
+
+describe('groupIntoScene', () => {
+  const box = (x: number) => ({ x, y: 0, width: 100, height: 50 });
+  const {
+    scenes: [scene],
+  } = SceneBuilder.scene('s', [
+    SceneBuilder.rect('a', box(0)),
+    SceneBuilder.rect('b', box(200)),
+    SceneBuilder.rect('c', box(400)),
+    SceneBuilder.link('line', 'a', 'b').id('ab'),
+    SceneBuilder.link('line', 'b', 'c').id('bc'),
+  ]).build();
+
+  test('the selection moves into a scene that a shape over its bounds opens', ({ expect }) => {
+    const group = groupIntoScene(scene, ['a', 'b', 'ab'], 'g');
+    expect(group).toBeDefined();
+    if (!group) {
+      return;
+    }
+    expect(Object.keys(group.child.nodes)).toEqual(['a', 'b']);
+    expect(Object.keys(group.child.links)).toEqual(['ab']);
+
+    const parent = reduceIntent(scene, { kind: 'batch', intents: group.intents });
+    expect(Object.keys(parent.nodes).sort()).toEqual(['c', 'g']);
+    expect(parent.nodes.g).toMatchObject({
+      type: 'frame',
+      scene: 'g',
+      center: { x: 150, y: 25 },
+      size: { width: 300, height: 50 },
+    });
+    // The link out of the group stays, now from the shape.
+    expect(Object.keys(parent.links)).toEqual(['bc']);
+    expect(parent.links.bc.source).toEqual({ node: 'g' });
+  });
+
+  test('the shape goes on the given layer, and the new scene keeps the layers its elements were on', ({ expect }) => {
+    const top: Layer = { id: 'top', name: 'Top', z: between(DEFAULT_LAYER.z) };
+    const layered = reduceIntent(reduceIntent(scene, { kind: 'layer', layer: top }), {
+      kind: 'update',
+      id: 'b',
+      values: { layer: 'top' },
+    });
+    const group = groupIntoScene(layered, ['a', 'b', 'ab'], 'g', 'top');
+    expect(group?.intents[0]).toMatchObject({ kind: 'create', node: { id: 'g', layer: 'top' } });
+    expect(group?.child.layers).toEqual({ [DEFAULT_LAYER.id]: DEFAULT_LAYER, top });
+    expect([group?.child.nodes.a.layer, group?.child.nodes.b.layer]).toEqual([DEFAULT_LAYER.id, 'top']);
+  });
+
+  test('a selection of links alone groups nothing', ({ expect }) => {
+    expect(groupIntoScene(scene, ['ab'], 'g')).toBeUndefined();
+  });
+
+  test('a selection holding a locked node is not grouped', ({ expect }) => {
+    const locked = { ...scene, nodes: { ...scene.nodes, a: { ...scene.nodes.a, locked: true } } };
+    expect(groupIntoScene(locked, ['a', 'b'], 'g')).toBeUndefined();
+  });
+});

package/src/utils/group.ts

@@ -0,0 +1,94 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import {
+  type Element,
+  type ElementId,
+  type Endpoint,
+  type FrameNode,
+  type Intent,
+  type LayerId,
+  type Link,
+  type Scene,
+  endpointNode,
+} from '../model/types.ts';
+import { unionBounds } from './hit.ts';
+import { elementLayer, sceneLayers } from './layers.ts';
+import { topZ } from './order.ts';
+import { nodeBounds } from './shapes.ts';
+
+/** What grouping a selection makes: the new scene, and the intents that replace the selection with its shape. */
+export type SceneGroup = { child: Scene; intents: Intent[] };
+
+/** `end` moved onto the scene shape when it was on a grouped node; a port of the old node means nothing there. */
+const reattach = (end: Endpoint, inside: ReadonlySet<string>, portal: string): Endpoint => {
+  const node = endpointNode(end);
+  return node !== undefined && inside.has(node) ? { node: portal } : end;
+};
+
+/**
+ * Moves the selected nodes into a new scene `id`, opened by a scene shape of the same id where they were. A link
+ * between two grouped nodes moves with them; one crossing out of the group stays here, re-attached to the shape.
+ * The nodes keep their coordinates: the shape frames whatever the child holds. None when no node is selected, or
+ * when a selected node is locked. The shape goes on `layer`; the new scene has the layers its elements were on.
+ */
+export const groupIntoScene = (
+  scene: Scene,
+  ids: Iterable<ElementId>,
+  id: string,
+  layer?: LayerId,
+): SceneGroup | undefined => {
+  const selected = new Set(ids);
+  const nodes = Object.values(scene.nodes).filter((node) => selected.has(node.id));
+  const bounds = unionBounds(nodes.map(nodeBounds));
+  // A locked node may not leave its scene, so a selection holding one is not grouped at all.
+  if (nodes.length === 0 || !bounds || nodes.some((node) => node.locked)) {
+    return undefined;
+  }
+
+  const inside = new Set(nodes.map((node) => node.id));
+  const isInside = (end: Endpoint) => {
+    const node = endpointNode(end);
+    return node === undefined || inside.has(node);
+  };
+  const touches = (link: Link) => [link.source, link.target].some((end) => inside.has(endpointNode(end) ?? ''));
+  const links = Object.values(scene.links).filter(touches);
+  // A link with both ends in the group (a free end counts as either side) goes with it; the rest cross out.
+  const moved = links.filter((link) => isInside(link.source) && isInside(link.target));
+  const crossing = links.filter((link) => !moved.includes(link));
+
+  const portal: FrameNode = {
+    type: 'frame',
+    id,
+    z: topZ(Object.values(scene.nodes)),
+    center: { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+    size: { width: bounds.width, height: bounds.height },
+    scene: id,
+    ...(layer !== undefined ? { layer } : {}),
+  };
+  // Each element names the layer it resolved to here, and the new scene has those layers, in their order.
+  const layers = sceneLayers(scene);
+  const placed = <T extends Element>(element: T): T => ({ ...element, layer: elementLayer(element, layers) });
+  const childNodes = nodes.map(placed);
+  const childLinks = moved.map(placed);
+  const used = new Set([...childNodes, ...childLinks].map((element) => element.layer));
+  return {
+    child: {
+      id,
+      nodes: Object.fromEntries(childNodes.map((node) => [node.id, node])),
+      links: Object.fromEntries(childLinks.map((link) => [link.id, link])),
+      layers: Object.fromEntries(layers.filter((entry) => used.has(entry.id)).map((entry) => [entry.id, entry])),
+    },
+    intents: [
+      { kind: 'create', node: portal },
+      // Re-attached before the nodes go, since deleting a node takes the links on it.
+      ...crossing.map((link): Intent => ({
+        kind: 'update',
+        id: link.id,
+        values: { source: reattach(link.source, inside, id), target: reattach(link.target, inside, id) },
+      })),
+      { kind: 'delete', ids: [...inside] },
+    ],
+  };
+};

package/src/utils/gutter-route.test.ts

@@ -116,6 +116,55 @@ describe('gutter route', () => {
     }
   });
 
+  test('a wall wider than the search margin is still routed round', ({ expect }) => {
+    // Eleven cells wide across row 0, between two ends in column 0: the way round lies beyond its ends.
+    const wall = cellNode('wall', -5, 0, 11, 1);
+    const route = gutterRoute(
+      [wall],
+      spec,
+      { point: { x: 0, y: -128 }, side: 's' },
+      { point: { x: 0, y: 128 }, side: 'n' },
+    );
+    expect(route).toBeDefined();
+    const { x, y, width, height } = cellBounds({ col: -5, row: 0, spanX: 11, spanY: 1 }, spec);
+    for (const [from, to] of (route ?? []).slice(1).map((point, index) => [route?.[index] ?? point, point])) {
+      // No segment passes through the wall's interior.
+      const crosses =
+        Math.min(from.x, to.x) < x + width &&
+        Math.max(from.x, to.x) > x &&
+        Math.min(from.y, to.y) < y + height &&
+        Math.max(from.y, to.y) > y;
+      expect(crosses).toBe(false);
+    }
+  });
+
+  test('a distant shape adds no lines to the search', ({ expect }) => {
+    // A shape a million pitches away is no obstacle; the route between B and D is found as without it.
+    const far = cellNode('far', 1_000_000, 1_000_000);
+    const ends = [
+      { point: { x: -256, y: 0 }, side: 'e' },
+      { point: { x: -128, y: 0 }, side: 'w' },
+    ] as const;
+    const started = performance.now();
+    const route = gutterRoute([...nodes, far], spec, ...ends);
+    expect(performance.now() - started).toBeLessThan(1_000);
+    expect(route).toEqual(gutterRoute(nodes, spec, ...ends));
+  });
+
+  test('a chain of abutting shapes does not widen a local search', ({ expect }) => {
+    // A row of cells running far to the right, each within reach of the next: only a failed local search
+    // may follow the chain, and B to D routes without it.
+    const chain = Array.from({ length: 400 }, (_, index) => cellNode(`chain-${index}`, index, 3));
+    const ends = [
+      { point: { x: -256, y: 0 }, side: 'e' },
+      { point: { x: -128, y: 0 }, side: 'w' },
+    ] as const;
+    const started = performance.now();
+    const route = gutterRoute([...nodes, ...chain], spec, ...ends);
+    expect(performance.now() - started).toBeLessThan(1_000);
+    expect(route).toEqual(gutterRoute(nodes, spec, ...ends));
+  });
+
   test('links sharing a gutter are nudged into separate lanes', ({ expect }) => {
     const scene: Scene = { id: 's', nodes: Object.fromEntries(nodes.map((node) => [node.id, node])), links: {} };
     const link = (id: string, source: string, sourcePort: string, target: string, targetPort: string): Link =>

package/src/utils/gutter-route.ts

@@ -11,7 +11,7 @@
 //
 
 import { type Bounds, type Node, type Point } from '../model/types.ts';
-import { type LatticeSpec } from './lattice.ts';
+import { type LatticeSpec, onLattice } from './lattice.ts';
 import { sideNormal } from './ports.ts';
 import { type RouteEnd } from './route.ts';
 import { nodeBounds } from './shapes.ts';
@@ -19,7 +19,7 @@ import { nodeBounds } from './shapes.ts';
 /** A bend costs as much as this much distance: turns dominate, length breaks ties. */
 const TURN_COST = 100_000;
 
-/** Gutter lines beyond the two ends the search may use, so a route can go round an obstacle. */
+/** Gutter lines beyond the ends and the shapes the search may use, so a route can go round the outermost. */
 const MARGIN = 3;
 
 const EPSILON = 1e-6;
@@ -49,6 +49,53 @@ const gutterLines = (low: number, high: number, pitch: number): number[] => {
   return Array.from({ length: last - first + 1 }, (_, index) => (first + index + 0.5) * pitch);
 };
 
+type Region = { left: number; right: number; top: number; bottom: number };
+
+/**
+ * The span the search covers: the ends, grown by every frame within `MARGIN` pitches of them, so a way round
+ * an obstacle is in range while a distant shape adds no lines to the grid. `transitive` keeps growing by the
+ * frames near the grown span until none is left, for the rare detour round a chain of abutting shapes.
+ */
+const searchRegion = (
+  start: Point,
+  end: Point,
+  frames: readonly Bounds[],
+  pitchX: number,
+  pitchY: number,
+  transitive: boolean,
+): Region => {
+  const region: Region = {
+    left: Math.min(start.x, end.x),
+    right: Math.max(start.x, end.x),
+    top: Math.min(start.y, end.y),
+    bottom: Math.max(start.y, end.y),
+  };
+  const [reachX, reachY] = [MARGIN * pitchX, MARGIN * pitchY];
+  const pending = new Set(frames);
+  for (let grown = true; grown;) {
+    grown = false;
+    // A single pass measures nearness against the ends' span only, so one frame cannot pull in the next.
+    const reach = { ...region };
+    for (const frame of pending) {
+      const span = transitive ? region : reach;
+      const near =
+        frame.x <= span.right + reachX &&
+        frame.x + frame.width >= span.left - reachX &&
+        frame.y <= span.bottom + reachY &&
+        frame.y + frame.height >= span.top - reachY;
+      if (near) {
+        region.left = Math.min(region.left, frame.x);
+        region.right = Math.max(region.right, frame.x + frame.width);
+        region.top = Math.min(region.top, frame.y);
+        region.bottom = Math.max(region.bottom, frame.y + frame.height);
+        pending.delete(frame);
+        grown = transitive;
+      }
+    }
+  }
+  return region;
+};
+
 const sortedUnique = (values: number[]): number[] =>
   [...new Set(values.map((value) => Math.round(value * 1000) / 1000))].sort((left, right) => left - right);
 
@@ -63,15 +110,43 @@ export const gutterRoute = (
   spec: LatticeSpec,
   from: RouteEnd,
   to: RouteEnd,
-): Point[] | undefined => {
+): Point[] | undefined => gutterRouteWithCost(nodes, spec, from, to)?.points;
+
+/** A gutter route and what it cost the search: `TURN_COST` a bend, plus its length. */
+export type GutterRoute = { points: Point[]; cost: number };
+
+/** {@link gutterRoute} with its cost, so routes between different ports can be compared. */
+export const gutterRouteWithCost = (
+  nodes: readonly Node[],
+  spec: LatticeSpec,
+  from: RouteEnd,
+  to: RouteEnd,
+): GutterRoute | undefined => {
   const [pitchX, pitchY] = [spec.width + spec.gutterX, spec.height + spec.gutterY];
   const start = gutterExit(from, spec);
   const end = gutterExit(to, spec);
-  const verticals = gutterLines(Math.min(start.x, end.x), Math.max(start.x, end.x), pitchX);
-  const horizontals = gutterLines(Math.min(start.y, end.y), Math.max(start.y, end.y), pitchY);
+  const frames = nodes.filter(onLattice).map(nodeBounds);
+  // The local grid finds almost every route; only when it offers no way round does the search widen.
+  const search = (transitive: boolean) =>
+    searchGrid(from, to, start, end, frames, searchRegion(start, end, frames, pitchX, pitchY, transitive), spec);
+  return search(false) ?? search(true);
+};
+
+/** Dijkstra over the gutter lines and port lines in `region`, from the gutter exit `start` to `end`. */
+const searchGrid = (
+  from: RouteEnd,
+  to: RouteEnd,
+  start: Point,
+  end: Point,
+  frames: readonly Bounds[],
+  region: Region,
+  spec: LatticeSpec,
+): GutterRoute | undefined => {
+  const [pitchX, pitchY] = [spec.width + spec.gutterX, spec.height + spec.gutterY];
+  const verticals = gutterLines(region.left, region.right, pitchX);
+  const horizontals = gutterLines(region.top, region.bottom, pitchY);
   const xs = sortedUnique([...verticals, start.x, end.x]);
   const ys = sortedUnique([...horizontals, start.y, end.y]);
-  const frames = nodes.map(nodeBounds);
   const clear = (a: Point, b: Point) => !frames.some((frame) => crosses(a, b, frame));
 
   const indexOf = (values: number[], value: number) => values.indexOf(Math.round(value * 1000) / 1000);
@@ -80,25 +155,29 @@ export const gutterRoute = (
   // The stub leaves along the side's normal, so the first run continuing that axis is not a bend.
   const axisOf = (end: RouteEnd): Axis => (end.side === 'e' || end.side === 'w' ? 'h' : 'v');
 
-  // Dijkstra over (column, row, arriving axis); the grid is a few dozen lines a side, so a linear scan of
-  // the open set is cheap enough.
+  // Dijkstra over (column, row, arriving axis), the open set a binary heap: a route is searched for each candidate
+  // pair of ports, so each search must be cheap.
   type State = { i: number; j: number; axis: Axis };
   const key = ({ i, j, axis }: State) => `${i},${j},${axis}`;
   const cost = new Map<string, number>();
   const previous = new Map<string, State>();
-  const open: State[] = [];
+  const open = new MinHeap<State>();
   const startState: State = { i: startI, j: startJ, axis: axisOf(from) };
   cost.set(key(startState), 0);
-  open.push(startState);
+  open.push(startState, 0);
   let best: State | undefined;
   let bestCost = Infinity;
-  while (open.length > 0) {
-    open.sort((left, right) => (cost.get(key(left)) ?? Infinity) - (cost.get(key(right)) ?? Infinity));
-    const current = open.shift();
-    if (!current) {
+  while (open.size > 0) {
+    const entry = open.pop();
+    if (!entry) {
       break;
     }
+    const current = entry.value;
     const currentCost = cost.get(key(current)) ?? Infinity;
+    // A state queued again at a lower cost leaves its older entry behind; skip the stale one.
+    if (entry.priority > currentCost) {
+      continue;
+    }
     if (currentCost >= bestCost) {
       break;
     }
@@ -132,7 +211,7 @@ export const gutterRoute = (
       if (nextCost < (cost.get(key(next)) ?? Infinity)) {
         cost.set(key(next), nextCost);
         previous.set(key(next), current);
-        open.push(next);
+        open.push(next, nextCost);
       }
     }
   }
@@ -144,9 +223,56 @@ export const gutterRoute = (
   for (let state: State | undefined = best; state; state = previous.get(key(state))) {
     corners.unshift({ x: xs[state.i], y: ys[state.j] });
   }
-  return collapse([from.point, ...corners, to.point]);
+  return { points: collapse([from.point, ...corners, to.point]), cost: bestCost };
 };
 
+/** A binary min-heap of values by priority. */
+class MinHeap<T> {
+  #items: { value: T; priority: number }[] = [];
+
+  get size(): number {
+    return this.#items.length;
+  }
+
+  push(value: T, priority: number): void {
+    const items = this.#items;
+    items.push({ value, priority });
+    for (let index = items.length - 1; index > 0;) {
+      const parent = (index - 1) >> 1;
+      if (items[parent].priority <= items[index].priority) {
+        break;
+      }
+      [items[parent], items[index]] = [items[index], items[parent]];
+      index = parent;
+    }
+  }
+
+  pop(): { value: T; priority: number } | undefined {
+    const items = this.#items;
+    const top = items[0];
+    const last = items.pop();
+    if (items.length > 0 && last) {
+      items[0] = last;
+      for (let index = 0; ;) {
+        const [left, right] = [index * 2 + 1, index * 2 + 2];
+        let smallest = index;
+        if (left < items.length && items[left].priority < items[smallest].priority) {
+          smallest = left;
+        }
+        if (right < items.length && items[right].priority < items[smallest].priority) {
+          smallest = right;
+        }
+        if (smallest === index) {
+          break;
+        }
+        [items[smallest], items[index]] = [items[index], items[smallest]];
+        index = smallest;
+      }
+    }
+    return top;
+  }
+}
+
 /** Drops repeated points and the middle of any three collinear ones, so only the real bends remain. */
 const collapse = (points: Point[]): Point[] => {
   const unique = points.filter(

package/src/utils/hit.test.ts

@@ -4,8 +4,8 @@
 
 import { describe, test } from 'vitest';
 
-import { type BuiltinNode, MAJOR_GRID, type Scene } from '../model/types.ts';
-import { DEFAULT_EXTENT, boundsFromPoints, contentBounds, hitTest, nodesIntersecting, sceneBounds } from './hit.ts';
+import { type BuiltinNode, type Scene } from '../model/types.ts';
+import { boundsFromPoints, contentBounds, hitTest, nodesIntersecting } from './hit.ts';
 
 const nodes: Record<string, BuiltinNode> = {
   a: { type: 'rect', id: 'a', z: 'M', center: { x: 100, y: 100 }, size: { width: 100, height: 100 } },
@@ -40,44 +40,10 @@ describe('hit', () => {
     expect(nodesIntersecting(scene, boundsFromPoints({ x: 0, y: 0 }, { x: 600, y: 600 })).length).toBe(3);
   });
 
-  test('the default extent is centred on the origin and lands on the major grid', ({ expect }) => {
-    // A scene is laid out around (0, 0); an extent anchored at the origin instead would put its centre
-    // — and so the initial fit — well below and right of the content.
-    expect(DEFAULT_EXTENT.x + DEFAULT_EXTENT.width / 2).toBe(0);
-    expect(DEFAULT_EXTENT.y + DEFAULT_EXTENT.height / 2).toBe(0);
-    expect(Math.abs(DEFAULT_EXTENT.x % MAJOR_GRID)).toBe(0);
-    expect(Math.abs(DEFAULT_EXTENT.y % MAJOR_GRID)).toBe(0);
-  });
-
-  test('sceneBounds grows the default extent by the padded union of the nodes', ({ expect }) => {
-    // Content inside the default extent leaves it as it is, whatever the padding or grid.
-    const near: Scene = { id: 'near', nodes: { a: nodes.a }, links: {} };
-    expect(sceneBounds(near, 10, 1)).toEqual(DEFAULT_EXTENT);
-    expect(sceneBounds(near, 10)).toEqual(DEFAULT_EXTENT);
-    expect(sceneBounds({ id: 'empty', nodes: {}, links: {} })).toEqual(DEFAULT_EXTENT);
-    // A node beyond it grows the frame that way, and the default still holds the other three sides.
-    const far: BuiltinNode = {
-      type: 'rect',
-      id: 'far',
-      z: 'Z',
-      center: { x: 2000, y: -400 },
-      size: { width: 100, height: 100 },
-    };
-    expect(sceneBounds({ ...near, nodes: { ...near.nodes, far } })).toEqual({
-      x: -832,
-      y: -576,
-      width: 3008,
-      height: 1088,
-    });
-  });
-
-  test('contentBounds frames the content alone, and the floor only when there is none', ({ expect }) => {
-    // The same scene seen two ways: on its own it gets the editing surface, in a portal its own content.
+  test('contentBounds frames the content alone, and nothing for an empty scene', ({ expect }) => {
     const near: Scene = { id: 'near', nodes: { a: nodes.a }, links: {} };
-    expect(sceneBounds(near)).toEqual(DEFAULT_EXTENT);
     // The node's 50..150 box, padded by a major cell and grown to the grid.
     expect(contentBounds(near)).toEqual({ x: -64, y: -64, width: 320, height: 320 });
-    // Nothing to frame, so the floor is the frame rather than a degenerate box.
-    expect(contentBounds({ id: 'empty', nodes: {}, links: {} })).toEqual(DEFAULT_EXTENT);
+    expect(contentBounds({ id: 'empty', nodes: {}, links: {} })).toBeUndefined();
   });
 });