@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -4,12 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, wordsConverter, } from '@fusion.dev/helix-core';
+import { assignSlots, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { descriptionOf } from '../describe.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
+import { EdgePan } from '../edge-pan.js';
+import { neighborOf } from '../neighbor.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
-import { colorOf, connector, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
+import { snapBox, snapTo, stepTo } from '../snap.js';
+import { colorOf, connector, distanceTo, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 const MARGIN = 32;
 const ARROW = 'canvas-arrow';
@@ -20,6 +24,7 @@ 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 REACH = 20;
 const heads = (edge) => ({
     end: (edge.toEnd ?? 'arrow') === 'arrow',
     start: edge.fromEnd === 'arrow',
@@ -37,19 +42,32 @@ const size = (value) => (value > 0 ? `${value}px` : undefined);
 let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.activateHintLabel = 'Press the board to use it';
         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.controlsLabel = 'Board controls';
+        this.fallbackLabel = 'Canvas';
         this.label = '';
         this.labelEditorLabel = 'Label for {name}';
         this.leadsToLabel = 'leads to {cards}';
+        this.linkedLabel = '{leadsTo}; {comesFrom}';
+        this.movedLabel = '{name} moved to {x}, {y}';
         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.resizedLabel = '{name} resized to {width} by {height}';
         this.selected = '';
+        this.selectedLabel = 'selected';
+        this.selectionLabel = '{count} selected';
         this.stoppedLabel = 'Stopped connecting.';
         this.toneLabels = {};
+        this.twoFingerHintLabel = 'Use two fingers to move the board';
+        this.usingLabel = 'Using the board. Press Escape to scroll the page again.';
+        this.wheelHintLabel = 'Use {key} and scroll to zoom the board';
+        this.zoomedLabel = 'Zoom {zoom}';
         this.said = '';
+        this.walked = [];
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
         this.touched = false;
@@ -62,6 +80,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.fingers = new Map();
         this.keying = undefined;
         this.edgeKeys = new WeakMap();
+        this.edgePan = new EdgePan(() => this.partNamed('viewport')?.getBoundingClientRect(), (by) => this.panCarrying(by), () => {
+            if (!this.dragging) {
+                this.direct = false;
+            }
+        });
         this.handlePointerDown = (event) => {
             if (!this.gestureAllowed(event)) {
                 return;
@@ -212,17 +235,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             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 box = snapBox(this.resized(sizing.start, sizing.corner, (event.clientX - sizing.from.x) / this.at.zoom, (event.clientY - sizing.from.y) / this.at.zoom), sizing.start, sizing.corner, this.snap, { height: MIN_HEIGHT, width: MIN_WIDTH });
                 const detail = { nodes: [{ name: sizing.card.name, ...box }] };
                 this.touched = true;
                 sizing.asked = true;
                 if (this.requestMove(detail)) {
                     sizing.moved = detail;
                 }
+                this.carryOn(event);
                 return;
             }
             if (this.marquee?.pointer === event.pointerId) {
                 this.marquee = { ...this.marquee, to: this.toDocument(event) };
+                this.carryOn(event);
                 return;
             }
             if (this.linking && (this.linking.held || this.linking.pointer === event.pointerId)) {
@@ -234,7 +259,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     capturePointer(this, event.pointerId);
                 }
                 const at = this.toDocument(event);
-                const over = this.cardAt(at);
+                const over = this.cardAt(at, REACH / this.at.zoom);
                 const to = this.arrival(over?.id);
                 this.linking = {
                     ...this.linking,
@@ -244,6 +269,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     to,
                     toSide: to !== undefined && over ? sideNear(over, at) : undefined,
                 };
+                this.carryOn(event);
                 return;
             }
             const carry = this.carrying;
@@ -258,17 +284,22 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 }
                 carry.started = true;
                 this.touched = true;
+                const lead = carry.cards.find(({ card }) => card.name === carry.pressed) ?? carry.cards[0];
+                const shift = (from, by) => from === undefined ? by : snapTo(from + by, this.snap) - from;
+                const right = shift(lead?.x, across / this.at.zoom);
+                const lower = shift(lead?.y, down / this.at.zoom);
                 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),
+                        x: Math.round(x + right),
+                        y: Math.round(y + lower),
                     })),
                 };
                 carry.asked = true;
                 if (this.requestMove(detail)) {
                     carry.moved = detail;
                 }
+                this.carryOn(event);
                 return;
             }
             const drag = this.dragging;
@@ -303,6 +334,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (finger && !owner && this.fingers.size > 0) {
                 return;
             }
+            this.edgePan.stop();
+            this.carryPointer = undefined;
             this.pressing = false;
             const pointing = this.pointing;
             this.pointing = false;
@@ -322,7 +355,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (marquee?.pointer === event.pointerId) {
                 this.marquee = undefined;
                 if (event.type !== 'pointercancel') {
-                    this.choose([...marquee.base, ...this.within(marquee)]);
+                    this.choose([...marquee.base, ...this.within(marquee)], true);
                 }
                 return;
             }
@@ -433,15 +466,23 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.fixed(card)) {
                     return;
                 }
+                const step = this.snap;
+                const right = step ? stepTo(card.x, along, step) - card.x : along * NUDGE;
+                const lower = step ? stepTo(card.y, down, step) - card.y : down * NUDGE;
                 const detail = {
                     nodes: this.carriedAll(card).map((one) => ({
                         name: one.name,
-                        x: one.x + along * NUDGE,
-                        y: one.y + down * NUDGE,
+                        x: one.x + right,
+                        y: one.y + lower,
                     })),
                 };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
+                    this.say(formatWords(this, 'movedLabel', {
+                        name: this.nameOf(card.name),
+                        x: card.x,
+                        y: card.y,
+                    }));
                 }
                 void this.updateComplete.then(() => this.reveal(card.name));
                 return;
@@ -451,10 +492,17 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 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 step = this.snap;
+                const edge = { x: card.x + card.width, y: card.y + card.height };
+                const box = this.resized({ height: card.height, width: card.width, x: card.x, y: card.y }, 'bottom-right', step ? stepTo(edge.x, along, step) - edge.x : along * NUDGE, step ? stepTo(edge.y, down, step) - edge.y : down * NUDGE);
                 const detail = { nodes: [{ name: card.name, ...box }] };
                 if (this.requestMove(detail)) {
                     this.dispatchEvent(new HelixMoveEvent(detail));
+                    this.say(formatWords(this, 'resizedLabel', {
+                        height: box.height,
+                        name: this.nameOf(card.name),
+                        width: box.width,
+                    }));
                 }
                 return;
             }
@@ -465,7 +513,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             if ((event.metaKey || event.ctrlKey) && (event.key === 'a' || event.key === 'A')) {
                 event.preventDefault();
-                this.choose(this.walk.map((one) => one.key));
+                this.choose(this.walk.map((one) => one.key), true);
                 return;
             }
             if (event.key === 'Escape') {
@@ -477,7 +525,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     this.focusStop(back);
                     return;
                 }
-                this.choose(undefined);
+                this.choose(undefined, true);
                 this.partNamed('region')?.focus();
                 return;
             }
@@ -553,6 +601,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             this.refocus = undefined;
+            this.focusedCard = card;
             this.stop = edge ?? card?.name;
             if (!this.pointing && this.stop !== undefined && !this.picked.includes(this.stop)) {
                 this.choose(this.stop);
@@ -568,6 +617,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.handleFocusOut = (event) => {
             const next = event.relatedTarget;
+            this.forget(this.cardOf(event), next);
             const linking = this.linking;
             if (!linking ||
                 linking.pointer !== undefined ||
@@ -593,7 +643,28 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (key !== undefined) {
                 event.preventDefault();
                 this.editStop(key);
+                return;
+            }
+            const viewport = this.partNamed('viewport');
+            if (!viewport || !this.gestureAllowed(event)) {
+                return;
+            }
+            const box = viewport.getBoundingClientRect();
+            const inside = event.clientX >= box.left &&
+                event.clientX <= box.right &&
+                event.clientY >= box.top &&
+                event.clientY <= box.bottom;
+            const onControls = path.some((one) => one instanceof Element && (one.getAttribute('part') ?? '').split(' ').includes('controls'));
+            if (!inside || onControls) {
+                return;
             }
+            event.preventDefault();
+            this.touched = true;
+            this.direct = false;
+            this.zoomAbout(event.shiftKey ? 1 / 2 : 2, {
+                x: event.clientX - box.left,
+                y: event.clientY - box.top,
+            });
         };
         this.handleEditorKeydown = (event) => {
             event.stopPropagation();
@@ -610,10 +681,14 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-canvas'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    say(words) {
+        this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
+    }
     get box() {
         const viewport = this.renderRoot?.querySelector('[part="viewport"]');
         return {
@@ -719,17 +794,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     zoomEvent(detail) {
         return new HelixCanvasZoomEvent(detail);
     }
-    get restingControlsLabel() {
-        return 'Board controls';
-    }
-    get restingGestureLabels() {
-        return {
-            activate: 'Press the board to use it',
-            twoFinger: 'Use two fingers to move the board',
-            using: 'Using the board. Press Escape to scroll the page again.',
-            wheel: 'Use {key} and scroll to zoom the board',
-        };
-    }
     get restingControls() {
         return 'zoom fullscreen';
     }
@@ -752,6 +816,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         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 });
+        this.say(formatWords(this, 'zoomedLabel', { zoom: formatPercent(this.at.zoom, wordsLocale(this)) }));
         super.zoom(by);
     }
     show(name) {
@@ -815,13 +880,20 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             y: origin.y + (event.clientY - (box?.top ?? 0) - this.at.y) / this.at.zoom,
         };
     }
-    cardAt(point) {
-        return this.nodes
+    cardAt(point, reach = 0) {
+        const under = 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];
+        if (under || reach <= 0) {
+            return under;
+        }
+        return this.nodes
+            .map((one) => ({ away: distanceTo(one, point), one }))
+            .filter(({ away }) => away <= reach)
+            .sort((a, b) => a.away - b.away)[0]?.one;
     }
     nameOf(id) {
         const node = this.byId.get(id);
@@ -829,7 +901,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
     startLinking(from) {
         this.linking = { from };
-        this.said = fillTemplate(this.connectingLabel, { from: this.nameOf(from) });
+        this.said = formatWords(this, 'connectingLabel', { from: this.nameOf(from) });
     }
     arrival(name) {
         const card = this.cardNamed(name);
@@ -850,7 +922,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.said = linking ? this.stoppedLabel : '';
             return;
         }
-        this.said = fillTemplate(this.connectedLabel, {
+        this.said = formatWords(this, 'connectedLabel', {
             from: this.nameOf(linking.from),
             to: this.nameOf(arriving),
         });
@@ -880,7 +952,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.said = pointer
             ? ''
-            : fillTemplate(this.reconnectingLabel, {
+            : formatWords(this, 'reconnectingLabel', {
                 from: this.nameOf(edge.fromNode),
                 to: this.nameOf(edge.toNode),
             });
@@ -930,7 +1002,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.rekey(linking.edge, this.keyOfElement(element));
         }
         if (linking.pointer === undefined) {
-            this.said = fillTemplate(this.connectedLabel, {
+            this.said = formatWords(this, 'connectedLabel', {
                 from: this.nameOf(detail.from),
                 to: this.nameOf(detail.to),
             });
@@ -966,12 +1038,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         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 };
+        const next = neighborOf(walk.map((one) => one.key), at, (key) => !gone.has(key));
+        this.refocus = { gone: [...gone], next };
         this.dispatchEvent(new HelixRemoveEvent(detail));
     }
     clicked(key, event) {
@@ -1099,7 +1167,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             .map((one) => this.keyNamed(one.trim()))
             .filter((one) => one !== undefined));
     }
-    choose(keys) {
+    choose(keys, said = false) {
         const list = keys === undefined ? [] : typeof keys === 'string' ? [keys] : [...new Set(keys)];
         const value = list.map((one) => this.publicName(one)).join(',');
         if (value === this.selected) {
@@ -1107,11 +1175,14 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         if (this.dispatchEvent(new HelixSelectEvent({ value }))) {
             this.selected = value;
+            if (said) {
+                this.say(formatWords(this, 'selectionLabel', { count: list.length }));
+            }
         }
     }
     toggle(key) {
         const picked = this.picked;
-        this.choose(picked.includes(key) ? picked.filter((one) => one !== key) : [...picked, key]);
+        this.choose(picked.includes(key) ? picked.filter((one) => one !== key) : [...picked, key], true);
     }
     get pickedCards() {
         const picked = new Set(this.picked);
@@ -1138,6 +1209,26 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.requestUpdate();
         return true;
     }
+    panCarrying(by) {
+        const last = this.carryPointer;
+        if (!last) {
+            this.edgePan.stop();
+            return;
+        }
+        this.touched = true;
+        this.direct = true;
+        this.at = { ...this.at, x: this.at.x - by.x, y: this.at.y - by.y };
+        for (const gesture of [this.carrying, this.sizing]) {
+            if (gesture) {
+                gesture.from = { x: gesture.from.x - by.x, y: gesture.from.y - by.y };
+            }
+        }
+        this.handlePointerMove(last);
+    }
+    carryOn(event) {
+        this.carryPointer = event;
+        this.edgePan.follow({ x: event.clientX, y: event.clientY });
+    }
     picksUp(gesture, event, from) {
         if (gesture.held || this.putting || event.type === 'pointercancel') {
             return false;
@@ -1200,11 +1291,46 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.letGo();
     }
     letGo() {
+        this.edgePan.stop();
+        this.carryPointer = undefined;
         this.holding = false;
         this.toggleState('holding', false);
         document.removeEventListener('keydown', this.handleHeldKey, true);
         document.removeEventListener('pointerdown', this.handleHeldOutside, true);
     }
+    forget(card, to) {
+        if (!card || card !== this.focusedCard) {
+            return;
+        }
+        if (to) {
+            this.focusedCard = undefined;
+            return;
+        }
+        queueMicrotask(() => {
+            if (card.isConnected && this.focusedCard === card) {
+                this.focusedCard = undefined;
+            }
+        });
+    }
+    handOn() {
+        const gone = this.focusedCard;
+        if (!gone || this.cards.includes(gone)) {
+            return;
+        }
+        this.focusedCard = undefined;
+        const active = this.ownerDocument.activeElement;
+        if (active !== null && active !== this.ownerDocument.body) {
+            return;
+        }
+        const keys = new Set(this.walk.map((one) => one.key));
+        const next = neighborOf(this.walked.map((one) => one.key), this.walked.findIndex((one) => one.key === gone.name), (key) => keys.has(key));
+        if (next === undefined) {
+            this.partNamed('region')?.focus();
+        }
+        else {
+            this.focusStop(next);
+        }
+    }
     reveal(id) {
         const node = this.byId.get(id);
         const origin = this.origin;
@@ -1289,7 +1415,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const drawn = edge ? this.geometryOf(edge, origin) : undefined;
             if (drawn) {
                 at = drawn.mid;
-                named = fillTemplate(this.connectionLabel, {
+                named = formatWords(this, 'connectionLabel', {
                     from: this.textOf(drawn.from),
                     to: this.textOf(drawn.to),
                 });
@@ -1307,7 +1433,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         return html `<input
       part="label-editor"
-      aria-label=${fillTemplate(this.labelEditorLabel, { name: named })}
+      aria-label=${formatWords(this, 'labelEditorLabel', { name: named })}
       data-target=${editing.target}
       style=${`--_canvas-editor-x: ${at.x}px; --_canvas-editor-y: ${at.y}px`}
       type="text"
@@ -1394,19 +1520,17 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             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' });
+        const list = new Intl.ListFormat(wordsLocale(this), { type: 'conjunction' });
         return new Map(this.nodes.map((one) => {
             const out = leads.get(one.id) ?? [];
             const into = from.get(one.id) ?? [];
+            const leadsTo = out.length > 0 ? formatWords(this, 'leadsToLabel', { cards: list.format(out) }) : '';
+            const comesFrom = into.length > 0 ? formatWords(this, 'comesFromLabel', { cards: list.format(into) }) : '';
             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('; '),
+                leadsTo && comesFrom
+                    ? formatWords(this, 'linkedLabel', { comesFrom, leadsTo })
+                    : leadsTo || comesFrom,
             ];
         }));
     }
@@ -1565,6 +1689,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 this.focusStop(refocus.next !== undefined && keys.has(refocus.next) ? refocus.next : this.walk[0]?.key);
             }
         }
+        this.handOn();
+        this.walked = this.walk;
         this.watchBox();
         if (!this.touched) {
             this.fitInto(true);
@@ -1655,6 +1781,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         if (this.held) {
             this.putBack();
         }
+        this.edgePan.stop();
+        this.carryPointer = undefined;
         this.sizes?.disconnect();
         this.watched = undefined;
         this.words?.disconnect();
@@ -1719,6 +1847,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             card.meaning = card.tone ? (this.toneLabels[card.tone] ?? '') : '';
             card.current = card.name === stop;
             card.selected = picked.has(card.name);
+            card.status = card.selected ? this.selectedLabel : '';
             card.resizable = alone === card.name && !this.fixed(card);
             card.movable = picked.has(card.name) && !this.fixed(card);
             card.connectable = !this.fixed(card);
@@ -1807,8 +1936,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const ends = heads(edge);
         return svg `<path
         part="edge-target"
-        aria-description=${[element?.tone ? this.toneLabels[element.tone] : undefined, edge.label].filter(Boolean).join(', ') || nothing}
-        aria-label=${fillTemplate(this.connectionLabel, { from: this.textOf(from), to: this.textOf(to) })}
+        aria-description=${descriptionOf(wordsLocale(this), [pickedKeys.has(key) ? this.selectedLabel : '', element?.tone ? this.toneLabels[element.tone] : '', edge.label]) || nothing}
+        aria-label=${formatWords(this, 'connectionLabel', { from: this.textOf(from), to: this.textOf(to) })}
         d=${drawn.d}
         data-edge=${key}
         fill="none"
@@ -1855,25 +1984,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             return;
         }
-        const root = this.renderRoot;
-        const rest = [];
-        const named = new Map();
-        for (const child of this.knownChildren) {
-            const name = placed.get(child) ?? child.getAttribute('slot') ?? undefined;
-            if (name === undefined) {
-                rest.push(child);
-            }
-            else {
-                named.set(name, [...(named.get(name) ?? []), child]);
-            }
-        }
-        for (const slot of root?.querySelectorAll?.('slot') ?? []) {
-            const wanted = slot.name === '' ? rest : (named.get(slot.name) ?? []);
-            const had = slot.assignedNodes();
-            if (had.length !== wanted.length || had.some((one, at) => one !== wanted[at])) {
-                slot.assign?.(...wanted);
-            }
-        }
+        assignSlots(this.renderRoot, this.knownChildren, (child) => placed.get(child));
     }
     renderLabels(origin) {
         return this.edges.map((edge) => {
@@ -1939,7 +2050,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || 'Canvas'}
+      aria-label=${this.label || this.fallbackLabel}
       aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -2001,26 +2112,52 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'activate-hint-label' })
+], HelixHeadlessCanvas.prototype, "activateHintLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'comes-from-label' })
 ], HelixHeadlessCanvas.prototype, "comesFromLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connected-label' })
 ], HelixHeadlessCanvas.prototype, "connectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connecting-label' })
 ], HelixHeadlessCanvas.prototype, "connectingLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'connection-label' })
 ], HelixHeadlessCanvas.prototype, "connectionLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessCanvas.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessCanvas.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'label-editor-label' })
 ], HelixHeadlessCanvas.prototype, "labelEditorLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'leads-to-label' })
 ], HelixHeadlessCanvas.prototype, "leadsToLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'linked-label' })
+], HelixHeadlessCanvas.prototype, "linkedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessCanvas.prototype, "movedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvas.prototype, "order", void 0);
@@ -2031,20 +2168,53 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCanvas.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'reconnecting-label' })
 ], HelixHeadlessCanvas.prototype, "reconnectingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'resized-label' })
+], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCanvas.prototype, "selectedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'selection-label' })
+], HelixHeadlessCanvas.prototype, "selectionLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvas.prototype, "snap", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "editing", void 0);
 __decorate([
+    words,
     property({ attribute: 'stopped-label' })
 ], HelixHeadlessCanvas.prototype, "stoppedLabel", void 0);
 __decorate([
     property({ attribute: 'tone-labels', converter: wordsConverter })
 ], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
+__decorate([
+    words,
+    property({ attribute: 'two-finger-hint-label' })
+], HelixHeadlessCanvas.prototype, "twoFingerHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'using-label' })
+], HelixHeadlessCanvas.prototype, "usingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wheel-hint-label' })
+], HelixHeadlessCanvas.prototype, "wheelHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'zoomed-label' })
+], HelixHeadlessCanvas.prototype, "zoomedLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "stop", void 0);