@fusion.dev/helix-headless 0.103.3 → 0.104.1

package/dist/canvas/root/canvas-root.js

@@ -0,0 +1,1831 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { capturePointer, customElement, fillTemplate, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, } from '@fusion.dev/helix-core';
+import { html, nothing, svg } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
+import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
+import { colorOf, connector, ends, extent, groupOf, inside, port, reading, sideNear, } from './canvas-document.js';
+export { fromJsonCanvas } from './canvas-document.js';
+const MARGIN = 32;
+const ARROW = 'canvas-arrow';
+const NUDGE = 16;
+const MIN_WIDTH = 48;
+const MIN_HEIGHT = 32;
+const ZOOM_MIN = 0.1;
+const ZOOM_MAX = 8;
+const ruling = (zoom) => zoom >= 0.5 ? zoom : zoom * 2 ** Math.ceil(Math.log2(0.5 / zoom));
+const SLOP = 3;
+const heads = (edge) => ({
+    end: (edge.toEnd ?? 'arrow') === 'arrow',
+    start: edge.fromEnd === 'arrow',
+});
+const keyBase = (edge) => `edge:${edge.id || `${edge.fromNode}->${edge.toNode}`}`;
+const onPlane = (node, origin) => ({
+    ...node,
+    x: node.x - origin.x,
+    y: node.y - origin.y,
+});
+const INTERACTIVE = 'input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"])';
+const custom = (element, name) => element?.style.getPropertyValue(name).trim() ?? '';
+const finite = (value) => (Number.isFinite(value) ? value : 0);
+const size = (element, name, value) => {
+    if (value > 0) {
+        element.style.setProperty(name, `${value}px`);
+    }
+    else {
+        element.style.removeProperty(name);
+    }
+};
+let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.comesFromLabel = 'from {cards}';
+        this.connectedLabel = 'Asked to connect {from} to {to}.';
+        this.connectingLabel = 'Connecting from {from}. Move to another card and press Enter, or Escape to stop.';
+        this.connectionLabel = 'From {from} to {to}';
+        this.label = '';
+        this.labelEditorLabel = 'Label for {name}';
+        this.leadsToLabel = 'leads to {cards}';
+        this.readOnly = false;
+        this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
+        this.selected = '';
+        this.stoppedLabel = 'Stopped connecting.';
+        this.said = '';
+        this.at = { x: 0, y: 0, zoom: 1 };
+        this.direct = false;
+        this.touched = false;
+        this.painted = new WeakMap();
+        this.placed = new WeakMap();
+        this.cache = {};
+        this.sides = new Map();
+        this.pressing = false;
+        this.pointing = false;
+        this.edgeKeys = new WeakMap();
+        this.handlePointerDown = (event) => {
+            const path = event.composedPath();
+            const on = (name) => path.some((one) => one instanceof Element && (one.getAttribute('part') ?? '').split(' ').includes(name));
+            const card = this.cardOf(event);
+            if (event.button !== 0 || on('controls') || !(card || on('viewport'))) {
+                return;
+            }
+            if (this.held) {
+                event.preventDefault();
+                this.putDown(event);
+                return;
+            }
+            if (path.some((one) => one instanceof Element && one.matches(INTERACTIVE))) {
+                return;
+            }
+            this.pressing = true;
+            const adding = event.shiftKey || event.metaKey || event.ctrlKey;
+            const grip = path.find((one) => one instanceof Element && one.hasAttribute('data-corner'));
+            if (card && grip && !this.fixed(card)) {
+                this.sizing = {
+                    card,
+                    corner: grip.getAttribute('data-corner') ?? 'bottom-right',
+                    from: { x: event.clientX, y: event.clientY },
+                    pointer: event.pointerId,
+                    start: { height: card.height, width: card.width, x: card.x, y: card.y },
+                };
+                capturePointer(this, event.pointerId);
+                return;
+            }
+            const pressed = this.edgeOf(event) ?? card?.name;
+            this.pointing = pressed !== undefined;
+            if (pressed !== undefined && !adding && !this.picked.includes(pressed)) {
+                this.choose(pressed);
+            }
+            if (!card && pressed === undefined && event.shiftKey) {
+                const at = this.toDocument(event);
+                this.marquee = { base: this.picked, from: at, pointer: event.pointerId, to: at };
+                capturePointer(this, event.pointerId);
+                return;
+            }
+            const end = path.find((one) => one instanceof Element && one.hasAttribute('data-end'));
+            const ended = end?.getAttribute('data-edge') ?? undefined;
+            if (end && ended !== undefined && !this.readOnly && !this.edgeElement(ended)?.readOnly) {
+                this.startReconnect(ended, end.getAttribute('data-end') === 'from' ? 'from' : 'to', event);
+                if (this.linking) {
+                    this.linking = { ...this.linking, origin: { x: event.clientX, y: event.clientY } };
+                }
+                capturePointer(this, event.pointerId);
+                return;
+            }
+            const pressedEdge = this.edgeOf(event);
+            if (pressedEdge !== undefined && !this.readOnly && !this.edgeElement(pressedEdge)?.readOnly) {
+                const edge = this.edges.find((one) => this.keyOf(one) === pressedEdge);
+                const byId = new Map(this.nodes.map((one) => [one.id, one]));
+                const from = edge ? byId.get(edge.fromNode) : undefined;
+                const to = edge ? byId.get(edge.toNode) : undefined;
+                if (edge && from && to) {
+                    const at = this.toDocument(event);
+                    const { end, start } = ends(edge, from, to);
+                    const moving = Math.hypot(at.x - start.x, at.y - start.y) < Math.hypot(at.x - end.x, at.y - end.y)
+                        ? 'from'
+                        : 'to';
+                    this.startReconnect(pressedEdge, moving, event);
+                    if (this.linking) {
+                        this.linking = { ...this.linking, pressed: { x: event.clientX, y: event.clientY } };
+                    }
+                    return;
+                }
+            }
+            const handle = path.find((one) => one instanceof Element && one.hasAttribute('data-side'));
+            if (card && handle && !this.fixed(card)) {
+                this.linking = {
+                    at: this.toDocument(event),
+                    from: card.name,
+                    origin: { x: event.clientX, y: event.clientY },
+                    pointer: event.pointerId,
+                    side: handle.getAttribute('data-side'),
+                };
+                capturePointer(this, event.pointerId);
+                return;
+            }
+            const mover = path.some((one) => one instanceof Element && one.hasAttribute('data-move'));
+            if (card && mover && !this.fixed(card)) {
+                this.carrying = {
+                    adding: false,
+                    cards: this.carriedAll(card).map((one) => ({ card: one, x: one.x, y: one.y })),
+                    from: { x: event.clientX, y: event.clientY },
+                    handle: true,
+                    pointer: event.pointerId,
+                    pressed: card.name,
+                    started: true,
+                };
+                capturePointer(this, event.pointerId);
+                return;
+            }
+            if (card && !this.fixed(card)) {
+                this.carrying = {
+                    adding,
+                    cards: this.carriedAll(card).map((one) => ({ card: one, x: one.x, y: one.y })),
+                    from: { x: event.clientX, y: event.clientY },
+                    pointer: event.pointerId,
+                    pressed: card.name,
+                    started: false,
+                };
+                return;
+            }
+            this.touched = true;
+            this.direct = true;
+            this.dragging = {
+                at: { x: this.at.x, y: this.at.y },
+                from: { x: event.clientX, y: event.clientY },
+                pointer: event.pointerId,
+                pressed,
+            };
+            capturePointer(this, event.pointerId);
+        };
+        this.handlePointerMove = (event) => {
+            this.idle.stir();
+            const pressed = this.carrying ?? this.dragging ?? this.sizing ?? this.marquee ?? this.linking?.pointer;
+            if (event.pointerType === 'mouse' &&
+                event.buttons === 0 &&
+                pressed !== undefined &&
+                !this.held) {
+                this.handlePointerUp(new PointerEvent('pointercancel', { pointerId: event.pointerId }));
+                return;
+            }
+            const sizing = this.sizing;
+            if (sizing && (sizing.held || sizing.pointer === event.pointerId)) {
+                const box = this.resized(sizing.start, sizing.corner, (event.clientX - sizing.from.x) / this.at.zoom, (event.clientY - sizing.from.y) / this.at.zoom);
+                const detail = { nodes: [{ name: sizing.card.name, ...box }] };
+                this.touched = true;
+                sizing.asked = true;
+                if (this.requestMove(detail)) {
+                    sizing.moved = detail;
+                }
+                return;
+            }
+            if (this.marquee?.pointer === event.pointerId) {
+                this.marquee = { ...this.marquee, to: this.toDocument(event) };
+                return;
+            }
+            if (this.linking && (this.linking.held || this.linking.pointer === event.pointerId)) {
+                const pressed = this.linking.pressed;
+                if (pressed && Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y) < SLOP) {
+                    return;
+                }
+                if (pressed) {
+                    capturePointer(this, event.pointerId);
+                }
+                const at = this.toDocument(event);
+                const over = this.cardAt(at);
+                const to = this.arrival(over?.id);
+                this.linking = {
+                    ...this.linking,
+                    at,
+                    over: over?.id,
+                    pressed: undefined,
+                    to,
+                    toSide: to !== undefined && over ? sideNear(over, at) : undefined,
+                };
+                return;
+            }
+            const carry = this.carrying;
+            if (carry && (carry.held || carry.pointer === event.pointerId)) {
+                const across = event.clientX - carry.from.x;
+                const down = event.clientY - carry.from.y;
+                if (!carry.started && Math.hypot(across, down) < SLOP) {
+                    return;
+                }
+                if (!carry.started) {
+                    capturePointer(this, event.pointerId);
+                }
+                carry.started = true;
+                this.touched = true;
+                const detail = {
+                    nodes: carry.cards.map(({ card, x, y }) => ({
+                        name: card.name,
+                        x: Math.round(x + across / this.at.zoom),
+                        y: Math.round(y + down / this.at.zoom),
+                    })),
+                };
+                carry.asked = true;
+                if (this.requestMove(detail)) {
+                    carry.moved = detail;
+                }
+                return;
+            }
+            const drag = this.dragging;
+            if (!drag || drag.pointer !== event.pointerId) {
+                return;
+            }
+            this.at = {
+                ...this.at,
+                x: drag.at.x + (event.clientX - drag.from.x),
+                y: drag.at.y + (event.clientY - drag.from.y),
+            };
+        };
+        this.handlePointerUp = (event) => {
+            this.pressing = false;
+            const pointing = this.pointing;
+            this.pointing = false;
+            const sizing = this.sizing;
+            if (sizing?.pointer === event.pointerId) {
+                if (this.picksUp(sizing, event, sizing.from)) {
+                    this.sizing = { ...sizing, held: true };
+                    return;
+                }
+                this.sizing = undefined;
+                if (sizing.moved) {
+                    this.dispatchEvent(new HelixMoveEvent(sizing.moved));
+                }
+                return;
+            }
+            const marquee = this.marquee;
+            if (marquee?.pointer === event.pointerId) {
+                this.marquee = undefined;
+                if (event.type !== 'pointercancel') {
+                    this.choose([...marquee.base, ...this.within(marquee)]);
+                }
+                return;
+            }
+            if (this.linking?.pointer === event.pointerId) {
+                if (this.linking.pressed) {
+                    const clicked = this.linking.edge;
+                    this.linking = undefined;
+                    if (clicked !== undefined && pointing && event.type !== 'pointercancel') {
+                        this.clicked(clicked, event);
+                    }
+                    return;
+                }
+                const origin = this.linking.origin;
+                if (origin && this.picksUp(this.linking, event, origin)) {
+                    this.linking = { ...this.linking, held: true };
+                    return;
+                }
+                if (event.type === 'pointercancel') {
+                    this.linking = undefined;
+                    this.said = '';
+                    return;
+                }
+                this.finishLinking(this.linking.to ?? this.linking.over, this.linking.toSide);
+                return;
+            }
+            const carry = this.carrying;
+            if (carry?.pointer === event.pointerId) {
+                if (carry.handle && this.picksUp(carry, event, carry.from)) {
+                    this.carrying = { ...carry, held: true };
+                    return;
+                }
+                this.carrying = undefined;
+                if (!carry.started && pointing && event.type !== 'pointercancel') {
+                    this.clicked(carry.pressed, event);
+                }
+                if (carry.moved) {
+                    this.dispatchEvent(new HelixMoveEvent(carry.moved));
+                }
+                return;
+            }
+            if (this.dragging?.pointer === event.pointerId) {
+                const drag = this.dragging;
+                if (event.type !== 'pointercancel' &&
+                    Math.hypot(event.clientX - drag.from.x, event.clientY - drag.from.y) < SLOP) {
+                    if (drag.pressed !== undefined && pointing) {
+                        this.clicked(drag.pressed, event);
+                    }
+                    else {
+                        this.choose(undefined);
+                    }
+                }
+                this.dragging = undefined;
+                this.direct = false;
+            }
+        };
+        this.holding = false;
+        this.putting = false;
+        this.putAt = Number.NEGATIVE_INFINITY;
+        this.handleHeldKey = (event) => {
+            if (event.key === 'Escape' && this.held) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.putBack();
+            }
+        };
+        this.handleHeldOutside = (event) => {
+            if (this.held && !event.composedPath().includes(this)) {
+                this.putBack();
+            }
+        };
+        this.handleWheel = (event) => {
+            if (!event.ctrlKey && !this.filled) {
+                return;
+            }
+            event.preventDefault();
+            this.touched = true;
+            this.direct = true;
+            if (event.ctrlKey) {
+                const box = event.currentTarget.getBoundingClientRect();
+                const about = { x: event.clientX - box.left, y: event.clientY - box.top };
+                this.zoomAbout(event.deltaY < 0 ? 1.1 : 1 / 1.1, about);
+                return;
+            }
+            this.at = { ...this.at, x: this.at.x - event.deltaX, y: this.at.y - event.deltaY };
+        };
+        this.handleStopKeydown = (event) => {
+            const origin = event.composedPath()[0];
+            const edge = this.edgeOf(event);
+            const card = edge === undefined ? this.cardOf(event) : undefined;
+            if (edge === undefined && (!card || origin?.getAttribute?.('part') !== 'node')) {
+                return;
+            }
+            const key = edge ?? card.name;
+            const along = inlineStep(this, event.key);
+            const down = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+            if (card && event.shiftKey && (along !== 0 || down !== 0)) {
+                event.preventDefault();
+                if (this.fixed(card)) {
+                    return;
+                }
+                const detail = {
+                    nodes: this.carriedAll(card).map((one) => ({
+                        name: one.name,
+                        x: one.x + along * NUDGE,
+                        y: one.y + down * NUDGE,
+                    })),
+                };
+                if (this.requestMove(detail)) {
+                    this.dispatchEvent(new HelixMoveEvent(detail));
+                }
+                void this.updateComplete.then(() => this.reveal(card.name));
+                return;
+            }
+            if (card && event.altKey && (along !== 0 || down !== 0)) {
+                event.preventDefault();
+                if (this.fixed(card)) {
+                    return;
+                }
+                const box = this.resized({ height: card.height, width: card.width, x: card.x, y: card.y }, 'bottom-right', along * NUDGE, down * NUDGE);
+                const detail = { nodes: [{ name: card.name, ...box }] };
+                if (this.requestMove(detail)) {
+                    this.dispatchEvent(new HelixMoveEvent(detail));
+                }
+                return;
+            }
+            if (event.key === ' ' && !this.linking) {
+                event.preventDefault();
+                this.toggle(key);
+                return;
+            }
+            if ((event.metaKey || event.ctrlKey) && (event.key === 'a' || event.key === 'A')) {
+                event.preventDefault();
+                this.choose(this.walk.map((one) => one.key));
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                if (this.linking) {
+                    const back = this.linking.edge ?? this.linking.from;
+                    this.linking = undefined;
+                    this.said = this.stoppedLabel;
+                    this.focusStop(back);
+                    return;
+                }
+                this.choose(undefined);
+                this.partNamed('region')?.focus();
+                return;
+            }
+            if (!this.linking && (event.key === 'F2' || (card && event.key === 'Enter'))) {
+                event.preventDefault();
+                this.editStop(key);
+                return;
+            }
+            if (event.key === 'Enter') {
+                if (card && this.linking) {
+                    event.preventDefault();
+                    this.finishLinking(card.name);
+                    return;
+                }
+                if (edge !== undefined) {
+                    event.preventDefault();
+                    const to = this.edges.find((one) => this.keyOf(one) === edge)?.toNode;
+                    this.focusStop(to);
+                }
+                return;
+            }
+            if (card && !this.fixed(card) && !this.linking && (event.key === 'c' || event.key === 'C')) {
+                event.preventDefault();
+                this.startLinking(card.name);
+                return;
+            }
+            if (edge !== undefined &&
+                !this.linking &&
+                !this.readOnly &&
+                !this.edgeElement(edge)?.readOnly &&
+                (event.key === 'c' || event.key === 'C')) {
+                event.preventDefault();
+                this.startReconnect(edge, 'to');
+                return;
+            }
+            if (event.key === 'Delete' || event.key === 'Backspace') {
+                const picked = this.picked;
+                const keys = picked.includes(key) ? picked : [key];
+                const loose = keys.filter((one) => one.startsWith('edge:')
+                    ? !this.readOnly && !this.edgeElement(one)?.readOnly
+                    : !this.fixed(this.cardNamed(one)));
+                if (loose.length > 0) {
+                    event.preventDefault();
+                    this.requestRemove(loose);
+                }
+                return;
+            }
+            const walk = this.linking ? this.walk.filter((one) => one.kind === 'node') : this.walk;
+            const at = walk.findIndex((one) => one.key === key);
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? walk.length - 1
+                    : along + down !== 0
+                        ? Math.min(Math.max(at + Math.sign(along + down), 0), walk.length - 1)
+                        : undefined;
+            if (to === undefined) {
+                return;
+            }
+            event.preventDefault();
+            this.focusStop(walk[to]?.key);
+        };
+        this.handleFocusIn = (event) => {
+            const edge = this.edgeOf(event);
+            const card = edge === undefined ? this.cardOf(event) : undefined;
+            if (edge === undefined && !card) {
+                return;
+            }
+            this.refocus = undefined;
+            this.stop = edge ?? card?.name;
+            if (!this.pointing && this.stop !== undefined && !this.picked.includes(this.stop)) {
+                this.choose(this.stop);
+            }
+            if (card) {
+                if (this.linking) {
+                    this.linking = { ...this.linking, to: this.arrival(card.name) };
+                }
+                this.reveal(card.name);
+            }
+        };
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            const linking = this.linking;
+            if (!linking ||
+                linking.pointer !== undefined ||
+                linking.held ||
+                !(next instanceof Node) ||
+                this.contains(next) ||
+                this.renderRoot.contains(next)) {
+                return;
+            }
+            this.linking = undefined;
+            this.said = this.stoppedLabel;
+        };
+        this.handleDoubleClick = (event) => {
+            const path = event.composedPath();
+            if (path.some((one) => one instanceof Element && one.matches(INTERACTIVE))) {
+                return;
+            }
+            if (this.held || event.timeStamp - this.putAt < 500) {
+                return;
+            }
+            const edge = this.edgeOf(event);
+            const key = edge ?? this.cardOf(event)?.name;
+            if (key !== undefined) {
+                event.preventDefault();
+                this.editStop(key);
+            }
+        };
+        this.handleEditorKeydown = (event) => {
+            event.stopPropagation();
+            if (event.key === 'Enter' || event.key === 'Escape') {
+                event.preventDefault();
+                this.finishEditing(event.currentTarget, event.key === 'Enter');
+            }
+        };
+        this.handleEditorBlur = (event) => {
+            this.finishEditing(event.currentTarget, true);
+        };
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    get box() {
+        const viewport = this.renderRoot?.querySelector('[part="viewport"]');
+        return {
+            height: viewport?.clientHeight ?? 0,
+            width: viewport?.clientWidth ?? 0,
+        };
+    }
+    get cards() {
+        return this.remember('cards', () => this.knownChildren.filter((child) => child instanceof HelixHeadlessCanvasNode));
+    }
+    get byName() {
+        return this.remember('byName', () => new Map(this.cards.map((card) => [card.name, card])));
+    }
+    get byId() {
+        return this.remember('byId', () => new Map(this.nodes.map((node) => [node.id, node])));
+    }
+    get groups() {
+        return this.remember('groups', () => this.nodes.filter((node) => node.type === 'group'));
+    }
+    remember(key, compute) {
+        const cache = this.cache;
+        if (Object.keys(cache).length === 0) {
+            queueMicrotask(() => {
+                if (this.cache === cache) {
+                    this.cache = {};
+                }
+            });
+        }
+        cache[key] ??= compute();
+        return cache[key];
+    }
+    requestUpdate(name, oldValue, options) {
+        this.cache = {};
+        super.requestUpdate(name, oldValue, options);
+    }
+    get nodes() {
+        return this.remember('nodes', () => this.readNodes());
+    }
+    readNodes() {
+        return this.cards.map((card) => ({
+            color: colorOf(card.tone, this.paint(card, '--canvas-node-color')),
+            height: finite(card.height),
+            id: card.name,
+            label: card.label || undefined,
+            text: card.textContent?.trim() || undefined,
+            type: card.group ? 'group' : 'text',
+            width: finite(card.width),
+            x: finite(card.x),
+            y: finite(card.y),
+        }));
+    }
+    paint(element, name) {
+        const value = custom(element, name);
+        this.painted.set(element, value);
+        return value;
+    }
+    get edges() {
+        return this.remember('edges', () => this.readEdges());
+    }
+    readEdges() {
+        const byName = new Map(this.nodes.map((node) => [node.id, node]));
+        return this.edgeElements
+            .map((element) => ({ element, key: this.keyOfElement(element) }))
+            .map(({ element, key }) => {
+            const read = (edge) => {
+                this.edgeKeys.set(edge, key);
+                return edge;
+            };
+            const edge = {
+                color: colorOf(element.tone, this.paint(element, '--canvas-edge-color')),
+                fromEnd: element.fromEnd,
+                fromNode: element.from,
+                fromSide: element.fromSide,
+                id: element.name,
+                label: element.label,
+                path: element.path,
+                toEnd: element.toEnd,
+                toNode: element.to,
+                toSide: element.toSide,
+            };
+            if (edge.fromSide !== undefined && edge.toSide !== undefined) {
+                return read(edge);
+            }
+            const from = byName.get(edge.fromNode);
+            const to = byName.get(edge.toNode);
+            if (!from || !to) {
+                return read(edge);
+            }
+            const cards = `${edge.fromNode}->${edge.toNode}`;
+            let kept = this.sides.get(key);
+            if (kept?.cards !== cards) {
+                const drawn = ends(edge, from, to);
+                kept = { cards, from: drawn.fromSide, to: drawn.toSide };
+                this.sides.set(key, kept);
+            }
+            return read({
+                ...edge,
+                fromSide: edge.fromSide ?? kept.from,
+                toSide: edge.toSide ?? kept.to,
+            });
+        });
+    }
+    panEvent(detail) {
+        return new HelixCanvasPanEvent(detail);
+    }
+    zoomEvent(detail) {
+        return new HelixCanvasZoomEvent(detail);
+    }
+    get restingControlsLabel() {
+        return 'Board controls';
+    }
+    get restingControls() {
+        return 'zoom fullscreen';
+    }
+    pan(to) {
+        this.direct = false;
+        const across = this.box.width || extent(this.nodes).width;
+        const step = across * this.panStep;
+        const inline = isRtl(this) ? -step : step;
+        const by = {
+            down: { x: 0, y: -step },
+            end: { x: -inline, y: 0 },
+            start: { x: inline, y: 0 },
+            up: { x: 0, y: step },
+        }[to];
+        this.touched = true;
+        this.at = { ...this.at, x: this.at.x + by.x, y: this.at.y + by.y };
+        super.pan(to);
+    }
+    zoom(by) {
+        this.direct = false;
+        this.touched = true;
+        this.zoomAbout(by > 0 ? 1.25 : 1 / 1.25, { x: this.box.width / 2, y: this.box.height / 2 });
+        super.zoom(by);
+    }
+    show(name) {
+        this.direct = false;
+        const node = this.byId.get(name);
+        if (!node) {
+            return;
+        }
+        this.touched = true;
+        this.stop = name;
+        const board = extent(this.nodes);
+        const origin = { x: board.x - MARGIN, y: board.y - MARGIN };
+        const middle = {
+            x: (node.x - origin.x + node.width / 2) * this.at.zoom,
+            y: (node.y - origin.y + node.height / 2) * this.at.zoom,
+        };
+        this.at = {
+            ...this.at,
+            x: this.box.width / 2 - middle.x,
+            y: this.box.height / 2 - middle.y,
+        };
+    }
+    get walk() {
+        return this.remember('walk', () => this.readWalk());
+    }
+    readWalk() {
+        const edges = this.edges;
+        const ids = new Set(this.nodes.map((node) => node.id));
+        const leaving = new Map();
+        for (const edge of edges) {
+            if (ids.has(edge.toNode)) {
+                const stop = { edge, key: this.keyOf(edge), kind: 'edge' };
+                leaving.set(edge.fromNode, [...(leaving.get(edge.fromNode) ?? []), stop]);
+            }
+        }
+        return reading(this.nodes, edges, this.order ?? 'spatial').flatMap((node) => [
+            { key: node.id, kind: 'node' },
+            ...(leaving.get(node.id) ?? []),
+        ]);
+    }
+    focusStop(key) {
+        if (key === undefined) {
+            return;
+        }
+        if (key.startsWith('edge:')) {
+            const target = [...(this.renderRoot?.querySelectorAll('[data-edge]') ?? [])].find((one) => one.getAttribute('data-edge') === key);
+            target?.focus();
+            return;
+        }
+        this.byName.get(key)?.focus();
+    }
+    edgeOf(event) {
+        const origin = event.composedPath()[0];
+        return origin instanceof Element ? (origin.getAttribute('data-edge') ?? undefined) : undefined;
+    }
+    toDocument(event) {
+        const box = this.partNamed('viewport')?.getBoundingClientRect();
+        const origin = this.origin ?? { x: 0, y: 0 };
+        return {
+            x: origin.x + (event.clientX - (box?.left ?? 0) - this.at.x) / this.at.zoom,
+            y: origin.y + (event.clientY - (box?.top ?? 0) - this.at.y) / this.at.zoom,
+        };
+    }
+    cardAt(point) {
+        return this.nodes
+            .filter((one) => point.x >= one.x &&
+            point.x <= one.x + one.width &&
+            point.y >= one.y &&
+            point.y <= one.y + one.height)
+            .sort((a, b) => a.width * a.height - b.width * b.height)[0];
+    }
+    nameOf(id) {
+        const node = this.byId.get(id);
+        return node ? this.textOf(node) : id;
+    }
+    startLinking(from) {
+        this.linking = { from };
+        this.said = fillTemplate(this.connectingLabel, { from: this.nameOf(from) });
+    }
+    arrival(name) {
+        const card = this.cardNamed(name);
+        return card && name !== this.linking?.from && !this.fixed(card) ? name : undefined;
+    }
+    get drawing() {
+        return this.linking !== undefined && this.linking.pressed === undefined;
+    }
+    finishLinking(to, toSide) {
+        const linking = this.linking;
+        if (linking?.edge !== undefined) {
+            this.finishReconnect(to, toSide);
+            return;
+        }
+        const arriving = this.arrival(to);
+        this.linking = undefined;
+        if (!linking || arriving === undefined) {
+            this.said = linking ? this.stoppedLabel : '';
+            return;
+        }
+        this.said = fillTemplate(this.connectedLabel, {
+            from: this.nameOf(linking.from),
+            to: this.nameOf(arriving),
+        });
+        this.dispatchEvent(new HelixConnectEvent({
+            from: linking.from,
+            to: arriving,
+            ...(linking.side === undefined ? {} : { fromSide: linking.side }),
+            ...(toSide === undefined ? {} : { toSide }),
+        }));
+    }
+    startReconnect(key, moving, pointer) {
+        const edge = this.edges.find((one) => this.keyOf(one) === key);
+        if (!edge) {
+            return;
+        }
+        const stays = moving === 'to' ? edge.fromNode : edge.toNode;
+        const byId = new Map(this.nodes.map((one) => [one.id, one]));
+        const fromNode = byId.get(edge.fromNode);
+        const toNode = byId.get(edge.toNode);
+        const drawn = fromNode && toNode ? ends(edge, fromNode, toNode) : undefined;
+        this.linking = {
+            edge: key,
+            from: stays,
+            moving,
+            side: moving === 'to' ? drawn?.fromSide : drawn?.toSide,
+            ...(pointer ? { at: this.toDocument(pointer), pointer: pointer.pointerId } : {}),
+        };
+        this.said = pointer
+            ? ''
+            : fillTemplate(this.reconnectingLabel, {
+                from: this.nameOf(edge.fromNode),
+                to: this.nameOf(edge.toNode),
+            });
+    }
+    finishReconnect(to, toSide) {
+        const linking = this.linking;
+        this.linking = undefined;
+        const edge = linking ? this.edges.find((one) => this.keyOf(one) === linking.edge) : undefined;
+        if (!linking || !edge || linking.edge === undefined) {
+            return;
+        }
+        const arriving = to === undefined || to === linking.from ? undefined : to;
+        if (arriving === undefined || this.fixed(this.cardNamed(arriving))) {
+            this.said = linking.pointer === undefined ? this.stoppedLabel : '';
+            if (linking.pointer !== undefined && to === undefined) {
+                this.requestRemove(linking.edge);
+            }
+            return;
+        }
+        const detail = linking.moving === 'from'
+            ? {
+                from: arriving,
+                name: edge.id,
+                to: edge.toNode,
+                was: { from: edge.fromNode, to: edge.toNode },
+                ...(toSide === undefined ? {} : { fromSide: toSide }),
+                ...(linking.side === undefined ? {} : { toSide: linking.side }),
+            }
+            : {
+                from: edge.fromNode,
+                name: edge.id,
+                to: arriving,
+                was: { from: edge.fromNode, to: edge.toNode },
+                ...(linking.side === undefined ? {} : { fromSide: linking.side }),
+                ...(toSide === undefined ? {} : { toSide }),
+            };
+        this.said = '';
+        if (!this.dispatchEvent(new HelixBeforeReconnectEvent(detail))) {
+            return;
+        }
+        const element = this.edgeElement(linking.edge);
+        if (element) {
+            element.from = detail.from;
+            element.to = detail.to;
+            element.fromSide = detail.fromSide;
+            element.toSide = detail.toSide;
+            this.rekey(linking.edge, this.keyOfElement(element));
+        }
+        this.dispatchEvent(new HelixReconnectEvent(detail));
+    }
+    rekey(was, now) {
+        if (was === now) {
+            return;
+        }
+        if (this.stop === was) {
+            this.stop = now;
+        }
+        const old = this.publicName(was);
+        const names = this.selected
+            .split(',')
+            .map((one) => one.trim())
+            .filter(Boolean);
+        if (names.includes(old)) {
+            this.selected = names.map((one) => (one === old ? this.publicName(now) : one)).join(',');
+        }
+    }
+    requestRemove(keys) {
+        const asked = typeof keys === 'string' ? [keys] : keys;
+        const walk = this.walk;
+        const edges = this.edges;
+        const nodes = asked.filter((one) => !one.startsWith('edge:'));
+        const going = new Set(nodes);
+        const leaving = edges.filter((edge) => asked.includes(this.keyOf(edge)) || going.has(edge.fromNode) || going.has(edge.toNode));
+        const detail = {
+            edges: leaving.map((edge) => ({ from: edge.fromNode, name: edge.id, to: edge.toNode })),
+            nodes,
+        };
+        const gone = new Set([...asked, ...leaving.map((edge) => this.keyOf(edge))]);
+        const at = Math.min(...asked.map((one) => walk.findIndex((stop) => stop.key === one)));
+        const next = walk.slice(at + 1).find((one) => !gone.has(one.key)) ??
+            walk
+                .slice(0, Math.max(at, 0))
+                .reverse()
+                .find((one) => !gone.has(one.key));
+        this.refocus = { gone: [...gone], next: next?.key };
+        this.dispatchEvent(new HelixRemoveEvent(detail));
+    }
+    clicked(key, event) {
+        if (event.shiftKey || event.metaKey || event.ctrlKey) {
+            this.toggle(key);
+            return;
+        }
+        this.choose(key);
+    }
+    within(box) {
+        const left = Math.min(box.from.x, box.to.x);
+        const right = Math.max(box.from.x, box.to.x);
+        const top = Math.min(box.from.y, box.to.y);
+        const bottom = Math.max(box.from.y, box.to.y);
+        const drawn = { height: bottom - top, width: right - left, x: left, y: top };
+        return this.nodes
+            .filter((one) => one.type === 'group'
+            ? inside(one, drawn)
+            : one.x < right && one.x + one.width > left && one.y < bottom && one.y + one.height > top)
+            .map((one) => one.id);
+    }
+    geometryOf(edge, origin) {
+        const from = this.byId.get(edge.fromNode);
+        const to = this.byId.get(edge.toNode);
+        if (!from || !to) {
+            return undefined;
+        }
+        const drawn = connector(edge, onPlane(from, origin), onPlane(to, origin), edge.path ?? this.path ?? 'curve', heads(edge));
+        return { ...drawn, from, to };
+    }
+    cardOf(event) {
+        return event
+            .composedPath()
+            .find((one) => one instanceof HelixHeadlessCanvasNode);
+    }
+    carried(card) {
+        if (!card.group) {
+            return [card];
+        }
+        const box = { height: card.height, width: card.width, x: card.x, y: card.y };
+        return [
+            card,
+            ...this.cards.filter((one) => one !== card &&
+                !one.readOnly &&
+                inside({ height: one.height, width: one.width, x: one.x, y: one.y }, box)),
+        ];
+    }
+    carriedAll(card) {
+        const picked = this.pickedCards;
+        const roots = picked.includes(card) ? picked.filter((one) => !this.fixed(one)) : [card];
+        return [...new Set(roots.flatMap((one) => this.carried(one)))];
+    }
+    resized(start, corner, across, down) {
+        const left = corner.endsWith('left');
+        const top = corner.startsWith('top');
+        const width = Math.max(MIN_WIDTH, Math.round(start.width + (left ? -across : across)));
+        const height = Math.max(MIN_HEIGHT, Math.round(start.height + (top ? -down : down)));
+        return {
+            height,
+            width,
+            x: left ? start.x + start.width - width : start.x,
+            y: top ? start.y + start.height - height : start.y,
+        };
+    }
+    fixed(card) {
+        return this.readOnly || card === undefined || card.readOnly;
+    }
+    edgeElement(key) {
+        return this.edgeElements.find((child) => this.keyOfElement(child) === key);
+    }
+    get edgeElements() {
+        return this.knownChildren.filter((child) => child instanceof HelixHeadlessCanvasEdge);
+    }
+    keyOfElement(element) {
+        const base = keyBase({ fromNode: element.from, id: element.name, toNode: element.to });
+        if (element.name) {
+            return base;
+        }
+        const twins = this.edgeElements.filter((one) => !one.name && one.from === element.from && one.to === element.to);
+        const at = twins.indexOf(element);
+        return at > 0 ? `${base}#${at + 1}` : base;
+    }
+    keyOf(edge) {
+        return this.edgeKeys.get(edge) ?? keyBase(edge);
+    }
+    publicName(key) {
+        return key === undefined ? '' : key.startsWith('edge:') ? key.slice(5) : key;
+    }
+    keyNamed(name) {
+        if (name === '') {
+            return undefined;
+        }
+        const stops = this.remember('stops', () => new Set(this.walk.map((one) => one.key)));
+        return stops.has(name) ? name : stops.has(`edge:${name}`) ? `edge:${name}` : undefined;
+    }
+    get picked() {
+        return this.remember('picked', () => this.selected
+            .split(',')
+            .map((one) => this.keyNamed(one.trim()))
+            .filter((one) => one !== undefined));
+    }
+    choose(keys) {
+        const list = keys === undefined ? [] : typeof keys === 'string' ? [keys] : [...new Set(keys)];
+        const value = list.map((one) => this.publicName(one)).join(',');
+        if (value === this.selected) {
+            return;
+        }
+        if (this.dispatchEvent(new HelixSelectEvent({ value }))) {
+            this.selected = value;
+        }
+    }
+    toggle(key) {
+        const picked = this.picked;
+        this.choose(picked.includes(key) ? picked.filter((one) => one !== key) : [...picked, key]);
+    }
+    get pickedCards() {
+        const picked = new Set(this.picked);
+        return this.cards.filter((one) => picked.has(one.name));
+    }
+    cardNamed(name) {
+        return name === undefined ? undefined : this.byName.get(name);
+    }
+    requestMove(detail) {
+        if (!this.dispatchEvent(new HelixBeforeMoveEvent(detail))) {
+            return false;
+        }
+        for (const { height, name, width, x, y } of detail.nodes) {
+            const card = this.byName.get(name);
+            if (card) {
+                card.x = x;
+                card.y = y;
+                if (width !== undefined && height !== undefined) {
+                    card.width = width;
+                    card.height = height;
+                }
+            }
+        }
+        this.requestUpdate();
+        return true;
+    }
+    picksUp(gesture, event, from) {
+        if (gesture.held || this.putting || event.type === 'pointercancel') {
+            return false;
+        }
+        if (Math.hypot(event.clientX - from.x, event.clientY - from.y) >= SLOP) {
+            return false;
+        }
+        this.toggleState('holding', true);
+        this.holding = true;
+        document.addEventListener('keydown', this.handleHeldKey, true);
+        document.addEventListener('pointerdown', this.handleHeldOutside, true);
+        return true;
+    }
+    get held() {
+        return Boolean(this.sizing?.held || this.linking?.held || this.carrying?.held);
+    }
+    putDown(event) {
+        const pointer = event.pointerId;
+        if (this.sizing) {
+            this.sizing = { ...this.sizing, pointer };
+        }
+        if (this.linking) {
+            this.linking = { ...this.linking, pointer };
+        }
+        if (this.carrying) {
+            this.carrying = { ...this.carrying, pointer };
+        }
+        this.handlePointerMove(event);
+        this.putting = true;
+        try {
+            this.handlePointerUp(event);
+        }
+        finally {
+            this.putting = false;
+        }
+        this.putAt = event.timeStamp;
+        this.letGo();
+    }
+    putBack() {
+        const sizing = this.sizing;
+        if (sizing?.held) {
+            this.sizing = undefined;
+            if (sizing.asked) {
+                this.requestMove({ nodes: [{ name: sizing.card.name, ...sizing.start }] });
+            }
+        }
+        const carry = this.carrying;
+        if (carry?.held) {
+            this.carrying = undefined;
+            if (carry.asked) {
+                this.requestMove({
+                    nodes: carry.cards.map(({ card, x, y }) => ({ name: card.name, x, y })),
+                });
+            }
+        }
+        if (this.linking?.held) {
+            this.linking = undefined;
+            this.said = this.stoppedLabel;
+        }
+        this.letGo();
+    }
+    letGo() {
+        this.holding = false;
+        this.toggleState('holding', false);
+        document.removeEventListener('keydown', this.handleHeldKey, true);
+        document.removeEventListener('pointerdown', this.handleHeldOutside, true);
+    }
+    reveal(id) {
+        const node = this.byId.get(id);
+        const origin = this.origin;
+        if (!node || !origin) {
+            return;
+        }
+        const free = this.free;
+        const left = this.at.x + (node.x - origin.x) * this.at.zoom;
+        const top = this.at.y + (node.y - origin.y) * this.at.zoom;
+        const seen = left >= free.x &&
+            top >= free.y &&
+            left + node.width * this.at.zoom <= free.x + free.width &&
+            top + node.height * this.at.zoom <= free.y + free.height;
+        if (!seen) {
+            this.show(id);
+        }
+    }
+    editStop(key) {
+        if (this.readOnly) {
+            return;
+        }
+        if (key.startsWith('edge:')) {
+            const edge = this.edgeElement(key);
+            if (edge && !edge.readOnly) {
+                this.editing = { key, target: 'edge', was: edge.label ?? '' };
+            }
+            return;
+        }
+        const card = this.cardNamed(key);
+        if (!card || this.fixed(card)) {
+            return;
+        }
+        if (card.group) {
+            this.editing = { key, target: 'group', was: card.label };
+            return;
+        }
+        this.dispatchEvent(new HelixCanvasEditEvent({ name: card.name }));
+    }
+    finishEditing(field, keep) {
+        const editing = this.editing;
+        if (!editing) {
+            return;
+        }
+        this.editing = undefined;
+        const label = (field?.value ?? '').trim();
+        const back = () => {
+            void this.updateComplete.then(() => this.focusStop(editing.key));
+        };
+        if (!keep || label === editing.was) {
+            back();
+            return;
+        }
+        const edge = editing.target === 'edge' ? this.edgeElement(editing.key) : undefined;
+        const card = editing.target === 'group' ? this.cardNamed(editing.key) : undefined;
+        const detail = {
+            label,
+            name: edge ? edge.name : (card?.name ?? ''),
+            target: editing.target,
+            was: editing.was,
+            ...(edge ? { from: edge.from, to: edge.to } : {}),
+        };
+        if (this.dispatchEvent(new HelixBeforeRelabelEvent(detail))) {
+            if (edge) {
+                edge.label = label || undefined;
+            }
+            else if (card) {
+                card.label = label;
+            }
+            this.dispatchEvent(new HelixRelabelEvent(detail));
+        }
+        back();
+    }
+    renderEditor(origin) {
+        const editing = this.editing;
+        if (!editing) {
+            return nothing;
+        }
+        let at;
+        let named = '';
+        if (editing.target === 'edge') {
+            const edge = this.edges.find((one) => this.keyOf(one) === editing.key);
+            const drawn = edge ? this.geometryOf(edge, origin) : undefined;
+            if (drawn) {
+                at = drawn.mid;
+                named = fillTemplate(this.connectionLabel, {
+                    from: this.textOf(drawn.from),
+                    to: this.textOf(drawn.to),
+                });
+            }
+        }
+        else {
+            const group = this.byId.get(editing.key);
+            if (group) {
+                at = { x: group.x - origin.x, y: group.y - origin.y };
+                named = this.textOf(group);
+            }
+        }
+        if (!at) {
+            return nothing;
+        }
+        return html `<input
+      part="label-editor"
+      aria-label=${fillTemplate(this.labelEditorLabel, { name: named })}
+      data-target=${editing.target}
+      style=${`--_canvas-editor-x: ${at.x}px; --_canvas-editor-y: ${at.y}px`}
+      type="text"
+      .value=${editing.was}
+      @blur=${this.handleEditorBlur}
+      @keydown=${this.handleEditorKeydown}
+    />`;
+    }
+    renderMarquee(origin) {
+        const box = this.marquee;
+        if (!box) {
+            return nothing;
+        }
+        const left = Math.min(box.from.x, box.to.x) - origin.x;
+        const top = Math.min(box.from.y, box.to.y) - origin.y;
+        return html `<div
+      part="marquee"
+      aria-hidden="true"
+      style=${`--_canvas-marquee-x: ${left}px; --_canvas-marquee-y: ${top}px; --_canvas-marquee-inline-size: ${Math.abs(box.to.x - box.from.x)}px; --_canvas-marquee-block-size: ${Math.abs(box.to.y - box.from.y)}px`}
+    ></div>`;
+    }
+    zoomAbout(by, about) {
+        const from = this.at.zoom;
+        const to = Math.min(Math.max(from * by, ZOOM_MIN), ZOOM_MAX);
+        this.at = {
+            x: about.x - ((about.x - this.at.x) * to) / from,
+            y: about.y - ((about.y - this.at.y) * to) / from,
+            zoom: to,
+        };
+    }
+    linksOf(node) {
+        return this.remember('links', () => this.readLinks()).get(node.id) ?? '';
+    }
+    readLinks() {
+        const named = (id) => {
+            const other = this.byId.get(id);
+            return other ? this.textOf(other) : id;
+        };
+        const leads = new Map();
+        const from = new Map();
+        for (const edge of this.edges) {
+            leads.set(edge.fromNode, [...(leads.get(edge.fromNode) ?? []), named(edge.toNode)]);
+            from.set(edge.toNode, [...(from.get(edge.toNode) ?? []), named(edge.fromNode)]);
+        }
+        const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
+        const list = new Intl.ListFormat(lang, { type: 'conjunction' });
+        return new Map(this.nodes.map((one) => {
+            const out = leads.get(one.id) ?? [];
+            const into = from.get(one.id) ?? [];
+            return [
+                one.id,
+                [
+                    out.length > 0 ? fillTemplate(this.leadsToLabel, { cards: list.format(out) }) : '',
+                    into.length > 0 ? fillTemplate(this.comesFromLabel, { cards: list.format(into) }) : '',
+                ]
+                    .filter(Boolean)
+                    .join('; '),
+            ];
+        }));
+    }
+    textOf(node) {
+        return node.label ?? node.text ?? node.file ?? node.url ?? node.id;
+    }
+    get free() {
+        const { height, width } = this.box;
+        const whole = { height, width, x: 0, y: 0 };
+        const viewport = this.renderRoot?.querySelector('[part="viewport"]');
+        const controls = this.controlsElement;
+        if (!viewport || !controls) {
+            return whole;
+        }
+        const box = viewport.getBoundingClientRect();
+        const cluster = controls.getBoundingClientRect();
+        if (cluster.width === 0 || cluster.height === 0) {
+            return whole;
+        }
+        const atTop = cluster.top - box.top <= box.bottom - cluster.bottom;
+        const atLeft = cluster.left - box.left <= box.right - cluster.right;
+        const band = atTop
+            ? cluster.bottom - box.top + (cluster.top - box.top)
+            : box.bottom - cluster.top + (box.bottom - cluster.bottom);
+        const column = atLeft
+            ? cluster.right - box.left + (cluster.left - box.left)
+            : box.right - cluster.left + (box.right - cluster.right);
+        if (band / height <= column / width && band <= height / 2) {
+            return { height: height - band, width, x: 0, y: atTop ? band : 0 };
+        }
+        if (column <= width / 2) {
+            return { height, width: width - column, x: atLeft ? column : 0, y: 0 };
+        }
+        return whole;
+    }
+    get view() {
+        const origin = this.origin ?? { x: 0, y: 0 };
+        const { height, width } = this.box;
+        return {
+            x: origin.x + (width / 2 - this.at.x) / this.at.zoom,
+            y: origin.y + (height / 2 - this.at.y) / this.at.zoom,
+            zoom: this.at.zoom,
+        };
+    }
+    set view(next) {
+        const origin = this.origin ?? { x: 0, y: 0 };
+        const { height, width } = this.box;
+        const zoom = Math.min(Math.max(next.zoom, ZOOM_MIN), ZOOM_MAX);
+        this.touched = true;
+        this.direct = false;
+        this.at = {
+            x: width / 2 - (next.x - origin.x) * zoom,
+            y: height / 2 - (next.y - origin.y) * zoom,
+            zoom,
+        };
+    }
+    toJsonCanvas() {
+        const taken = new Set(this.edges.map((edge) => edge.id).filter(Boolean));
+        const edges = this.edges.map((edge) => {
+            if (edge.id) {
+                return { ...edge };
+            }
+            const base = this.publicName(this.keyOf(edge));
+            let id = base;
+            for (let count = 2; taken.has(id); count++) {
+                id = `${base}-${count}`;
+            }
+            taken.add(id);
+            return { ...edge, id };
+        });
+        return { edges, nodes: this.nodes.map((node) => ({ ...node })) };
+    }
+    fit() {
+        this.fitInto(false);
+    }
+    fitInto(direct) {
+        const board = extent(this.nodes);
+        const free = this.free;
+        if (board.width === 0 || free.width === 0 || free.height === 0) {
+            return;
+        }
+        const whole = { height: board.height + MARGIN * 2, width: board.width + MARGIN * 2 };
+        const zoom = Math.min(1, free.width / whole.width, free.height / whole.height);
+        if (!Number.isFinite(zoom) || zoom <= 0) {
+            return;
+        }
+        const next = {
+            x: free.x + (free.width - whole.width * zoom) / 2,
+            y: free.y + (free.height - whole.height * zoom) / 2,
+            zoom,
+        };
+        if (next.x === this.at.x && next.y === this.at.y && next.zoom === this.at.zoom) {
+            return;
+        }
+        this.direct = direct;
+        this.at = next;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.holding && !this.held) {
+            this.letGo();
+        }
+        if (changed.has('editing') && this.editing) {
+            const field = this.partNamed('label-editor');
+            field?.focus();
+            field?.select();
+        }
+        this.place({ x: extent(this.nodes).x - MARGIN, y: extent(this.nodes).y - MARGIN });
+        const view = this.view;
+        const was = this.reported;
+        if (!was || was.x !== view.x || was.y !== view.y || was.zoom !== view.zoom) {
+            this.reported = view;
+            if (was) {
+                this.dispatchEvent(new HelixCanvasViewEvent(view));
+            }
+        }
+        const refocus = this.refocus;
+        if (refocus) {
+            const keys = new Set(this.walk.map((one) => one.key));
+            if (refocus.gone.every((one) => !keys.has(one))) {
+                this.refocus = undefined;
+                this.focusStop(refocus.next !== undefined && keys.has(refocus.next) ? refocus.next : this.walk[0]?.key);
+            }
+        }
+        this.watchBox();
+        if (!this.touched) {
+            this.fitInto(true);
+        }
+    }
+    watchWords() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.words ??= new MutationObserver((records) => {
+            const seen = new Set();
+            const heard = records.filter((record) => {
+                if (record.type !== 'attributes') {
+                    return true;
+                }
+                if (seen.has(record.target)) {
+                    return false;
+                }
+                seen.add(record.target);
+                return true;
+            });
+            if (heard.some((record) => this.redraws(record))) {
+                this.requestUpdate();
+            }
+        });
+        this.words.observe(this, {
+            attributeFilter: ['style'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    redraws(record) {
+        if (record.type !== 'attributes') {
+            return true;
+        }
+        const target = record.target;
+        if (target instanceof HelixHeadlessCanvasNode &&
+            this.placed.has(target) &&
+            custom(target, '--_canvas-card-x') === '') {
+            this.placed.delete(target);
+            return true;
+        }
+        const name = target instanceof HelixHeadlessCanvasNode
+            ? '--canvas-node-color'
+            : target instanceof HelixHeadlessCanvasEdge
+                ? '--canvas-edge-color'
+                : undefined;
+        return (name !== undefined &&
+            custom(target, name) !== (this.painted.get(target) ?? ''));
+    }
+    watchBox() {
+        const viewport = this.renderRoot?.querySelector('[part="viewport"]');
+        if (typeof ResizeObserver === 'undefined' || !viewport || viewport === this.watched) {
+            return;
+        }
+        this.watched = viewport;
+        this.sizes ??= new ResizeObserver(() => {
+            const box = this.box;
+            const was = this.measured;
+            this.measured = box;
+            if (!this.touched) {
+                this.fitInto(true);
+                return;
+            }
+            if (was && (was.width !== box.width || was.height !== box.height)) {
+                this.direct = true;
+                this.at = {
+                    ...this.at,
+                    x: this.at.x + (box.width - was.width) / 2,
+                    y: this.at.y + (box.height - was.height) / 2,
+                };
+            }
+        });
+        this.sizes.disconnect();
+        this.sizes.observe(viewport);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.watchBox();
+        this.watchWords();
+        this.addEventListener('dblclick', this.handleDoubleClick);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
+        this.addEventListener('keydown', this.handleStopKeydown);
+        this.addEventListener('pointercancel', this.handlePointerUp);
+        this.addEventListener('pointerdown', this.handlePointerDown);
+        this.addEventListener('pointermove', this.handlePointerMove);
+        this.addEventListener('pointerup', this.handlePointerUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.held) {
+            this.putBack();
+        }
+        this.sizes?.disconnect();
+        this.watched = undefined;
+        this.words?.disconnect();
+        this.removeEventListener('dblclick', this.handleDoubleClick);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
+        this.removeEventListener('keydown', this.handleStopKeydown);
+        this.removeEventListener('pointercancel', this.handlePointerUp);
+        this.removeEventListener('pointerdown', this.handlePointerDown);
+        this.removeEventListener('pointermove', this.handlePointerMove);
+        this.removeEventListener('pointerup', this.handlePointerUp);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const drawn = extent(this.nodes);
+        const origin = { x: drawn.x - MARGIN, y: drawn.y - MARGIN };
+        if (this.origin && (origin.x !== this.origin.x || origin.y !== this.origin.y)) {
+            this.at = {
+                ...this.at,
+                x: this.at.x + (origin.x - this.origin.x) * this.at.zoom,
+                y: this.at.y + (origin.y - this.origin.y) * this.at.zoom,
+            };
+        }
+        this.origin = origin;
+        hostAria(this.internals, { label: this.label });
+        this.toggleState('connecting', this.drawing);
+        this.toggleState('direct', this.direct);
+        this.toggleState('pressing', this.pressing);
+        this.toggleState('empty', this.nodes.length === 0);
+        this.toggleState('fullscreen', this.filled);
+        this.toggleState('idle', this.resting);
+    }
+    place(origin) {
+        const all = this.nodes;
+        const picked = new Set([...this.picked, ...(this.marquee ? this.within(this.marquee) : [])]);
+        const alone = this.picked.length === 1 ? this.picked[0] : undefined;
+        const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop
+            ? this.stop
+            : reading(all, this.edges, this.order ?? 'spatial')[0]?.id;
+        const groups = this.groups;
+        for (const card of this.cards) {
+            const group = card.group
+                ? undefined
+                : groupOf({
+                    height: card.height,
+                    id: card.name,
+                    type: 'text',
+                    width: card.width,
+                    x: card.x,
+                    y: card.y,
+                }, groups);
+            const x = finite(card.x) - origin.x;
+            const y = finite(card.y) - origin.y;
+            const placed = `${x} ${y} ${finite(card.width)} ${finite(card.height)}`;
+            if (this.placed.get(card) !== placed) {
+                this.placed.set(card, placed);
+                card.style.setProperty('--_canvas-card-x', `${x}px`);
+                card.style.setProperty('--_canvas-card-y', `${y}px`);
+                size(card, '--_canvas-card-inline-size', finite(card.width));
+                size(card, '--_canvas-card-block-size', finite(card.height));
+            }
+            if (group) {
+                card.setAttribute('data-group', group.id);
+            }
+            else {
+                card.removeAttribute('data-group');
+            }
+            const node = this.byId.get(card.name);
+            card.links = node ? this.linksOf(node) : '';
+            card.current = card.name === stop;
+            card.selected = picked.has(card.name);
+            card.resizable = alone === card.name && !this.fixed(card);
+            card.movable = picked.has(card.name) && !this.fixed(card);
+            card.connectable = !this.fixed(card);
+            card.candidate = this.drawing && this.arrival(card.name) !== undefined;
+            card.target = this.linking?.to === card.name;
+        }
+    }
+    renderEnds(origin) {
+        if (this.readOnly) {
+            return nothing;
+        }
+        const picked = new Set(this.picked);
+        const byId = new Map(this.nodes.map((one) => [one.id, one]));
+        return this.edges.map((edge) => {
+            const key = this.keyOf(edge);
+            const from = byId.get(edge.fromNode);
+            const to = byId.get(edge.toNode);
+            const lifted = this.linking?.edge === key && !this.linking.pressed;
+            if (!picked.has(key) || lifted || this.edgeElement(key)?.readOnly || !from || !to) {
+                return nothing;
+            }
+            const { end, start } = ends(edge, onPlane(from, origin), onPlane(to, origin));
+            const at = (point) => `--_canvas-end-x: ${point.x}px; --_canvas-end-y: ${point.y}px`;
+            return html `<span part="edge-end" aria-hidden="true" data-edge=${key} data-end="from" style=${at(start)}></span
+        ><span part="edge-end" aria-hidden="true" data-edge=${key} data-end="to" style=${at(end)}></span>`;
+        });
+    }
+    renderEdges(origin, box) {
+        const elements = new Map(this.edgeElements.map((child) => [this.keyOfElement(child), child]));
+        const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop ? this.stop : undefined;
+        const pickedKeys = new Set(this.picked);
+        return html `<svg
+      part="edges"
+      role="none"
+      @focusin=${this.handleFocusIn}
+      viewBox=${`0 0 ${box.width} ${box.height}`}
+      width=${box.width}
+      height=${box.height}
+    >
+      <defs>
+        <marker
+          id=${ARROW}
+          markerHeight="8"
+          markerUnits="userSpaceOnUse"
+          markerWidth="8"
+          orient="auto-start-reverse"
+          refX="0"
+          refY="4"
+        >
+          <path part="arrow" d="M0 0 L8 4 L0 8 z" />
+        </marker>
+      </defs>
+      ${this.edges.map((edge) => {
+            const key = this.keyOf(edge);
+            const element = elements.get(key);
+            const drawn = this.geometryOf(edge, origin);
+            if (!drawn || (this.linking?.edge === key && !this.linking.pressed)) {
+                return nothing;
+            }
+            const { from, to } = drawn;
+            const ends = heads(edge);
+            return svg `<path
+            part="edge-target"
+            aria-description=${edge.label || nothing}
+            aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
+            d=${drawn.d}
+            data-edge=${key}
+            fill="none"
+            aria-keyshortcuts="Enter F2 C Delete"
+            role="button"
+            tabindex=${key === stop ? '0' : '-1'}
+          />
+          <path
+            part="edge"
+            aria-hidden="true"
+            d=${drawn.d}
+            data-selected=${pickedKeys.has(key) ? '' : nothing}
+            data-tone=${element?.tone ?? nothing}
+            data-variant=${element?.variant ?? nothing}
+            fill="none"
+            marker-end=${ends.end ? `url(#${ARROW})` : nothing}
+            marker-start=${ends.start ? `url(#${ARROW})` : nothing}
+            style=${custom(element, '--canvas-edge-color') ? `--_canvas-edge-color: ${custom(element, '--canvas-edge-color')}` : nothing}
+          />
+`;
+        })}
+      ${this.renderDraft(origin)}
+    </svg>`;
+    }
+    renderLabels(origin) {
+        return this.edges.map((edge) => {
+            const lifted = this.linking?.edge === this.keyOf(edge) && !this.linking.pressed;
+            const drawn = edge.label && !lifted ? this.geometryOf(edge, origin) : undefined;
+            if (!drawn) {
+                return nothing;
+            }
+            const { mid } = drawn;
+            return html `<span
+        part="label"
+        aria-hidden="true"
+        style=${`--_canvas-label-x: ${mid.x}px; --_canvas-label-y: ${mid.y}px`}
+        >${edge.label}</span
+      >`;
+        });
+    }
+    renderDraft(origin) {
+        const linking = this.linking;
+        const byId = new Map(this.nodes.map((one) => [one.id, one]));
+        const anchor = linking ? byId.get(linking.from) : undefined;
+        if (!linking || !anchor || linking.pressed) {
+            return nothing;
+        }
+        const shifted = (node) => onPlane(node, origin);
+        const moved = linking.edge
+            ? this.edges.find((one) => this.keyOf(one) === linking.edge)
+            : undefined;
+        const path = moved?.path ?? this.path ?? 'curve';
+        const drawnHeads = moved ? heads(moved) : { end: true, start: false };
+        const target = linking.to === undefined ? undefined : byId.get(linking.to);
+        if (target) {
+            const reversed = linking.moving === 'from';
+            const [from, to] = reversed ? [target, anchor] : [anchor, target];
+            const drawn = connector({
+                fromNode: from.id,
+                fromSide: reversed ? linking.toSide : linking.side,
+                id: '',
+                toNode: to.id,
+                toSide: reversed ? linking.side : linking.toSide,
+            }, shifted(from), shifted(to), path, drawnHeads);
+            return svg `<path
+        part="draft"
+        aria-hidden="true"
+        d=${drawn.d}
+        fill="none"
+        marker-end=${drawnHeads.end ? `url(#${ARROW})` : nothing}
+        marker-start=${drawnHeads.start ? `url(#${ARROW})` : nothing}
+      />`;
+        }
+        if (linking.at) {
+            const end = { x: linking.at.x - origin.x, y: linking.at.y - origin.y };
+            const start = port(shifted(anchor), linking.side ?? sideNear(anchor, linking.at));
+            return svg `<path part="draft" aria-hidden="true" d=${`M ${start.x} ${start.y} L ${end.x} ${end.y}`} fill="none" />`;
+        }
+        return nothing;
+    }
+    render() {
+        const nodes = this.nodes;
+        const drawn = extent(nodes);
+        const box = { height: drawn.height + MARGIN * 2, width: drawn.width + MARGIN * 2 };
+        const origin = { x: drawn.x - MARGIN, y: drawn.y - MARGIN };
+        return html `<div
+      part="region"
+      role="group"
+      aria-label=${this.label || 'Canvas'}
+      aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
+      tabindex="0"
+      @focusin=${this.idle.stir}
+      @keydown=${this.handleKeydown}
+      @pointerleave=${this.idle.leave}
+      @pointermove=${this.idle.stir}
+    >
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
+      <div
+        part="viewport"
+        style=${`--_canvas-x: ${this.at.x}px; --_canvas-y: ${this.at.y}px; --_canvas-zoom: ${this.at.zoom}; --_canvas-rule-x: ${this.at.x - origin.x * this.at.zoom}px; --_canvas-rule-y: ${this.at.y - origin.y * this.at.zoom}px; --_canvas-rule-zoom: ${ruling(this.at.zoom)}`}
+        @wheel=${this.handleWheel}
+      >
+        <!-- **One shape, whatever the board holds**, which is what hydration
+             needs: the server cannot see the cards, so a template that drew
+             something else while there were none rendered one thing on the
+             server and another on the client, and Lit reported a value mismatch
+             at the part where the two disagreed. Emptiness is a state on the
+             host instead, which is a fact about the board rather than a
+             different board. -->
+        <!-- Where the board sits is written on the viewport rather than the
+             plane, so the box can read it too: a ruling drawn behind the plane
+             has to move with it, and the plane only covers the cards. The
+             ruling's own offset is where the document's zero lands, so a line
+             falls on every multiple of its spacing in the document's units and
+             a card placed on one sits on a line. -->
+        <div
+          part="board"
+          style=${`--_canvas-plane-inline-size: ${box.width}px; --_canvas-plane-block-size: ${box.height}px`}
+        >
+          ${this.renderEdges(origin, box)} ${this.renderLabels(origin)}
+          <slot @slotchange=${this.handleSlotChange}></slot>
+          ${this.renderEnds(origin)}
+          ${this.renderEditor(origin)}
+          ${this.renderMarquee(origin)}
+        </div>
+        <slot name="empty"></slot>
+      </div>
+      ${this.renderControls()}
+      <span part="live" role="status">${this.said}</span>
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: 'comes-from-label' })
+], HelixHeadlessCanvas.prototype, "comesFromLabel", void 0);
+__decorate([
+    property({ attribute: 'connected-label' })
+], HelixHeadlessCanvas.prototype, "connectedLabel", void 0);
+__decorate([
+    property({ attribute: 'connecting-label' })
+], HelixHeadlessCanvas.prototype, "connectingLabel", void 0);
+__decorate([
+    property({ attribute: 'connection-label' })
+], HelixHeadlessCanvas.prototype, "connectionLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvas.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'label-editor-label' })
+], HelixHeadlessCanvas.prototype, "labelEditorLabel", void 0);
+__decorate([
+    property({ attribute: 'leads-to-label' })
+], HelixHeadlessCanvas.prototype, "leadsToLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvas.prototype, "order", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvas.prototype, "path", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessCanvas.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'reconnecting-label' })
+], HelixHeadlessCanvas.prototype, "reconnectingLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvas.prototype, "selected", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "editing", void 0);
+__decorate([
+    property({ attribute: 'stopped-label' })
+], HelixHeadlessCanvas.prototype, "stoppedLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "stop", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "linking", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "said", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "at", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "direct", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "pressing", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvas.prototype, "marquee", void 0);
+HelixHeadlessCanvas = __decorate([
+    customElement('helix-headless-canvas')
+], HelixHeadlessCanvas);
+export { HelixHeadlessCanvas };