@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/canvas/node/canvas-node.js

@@ -33,6 +33,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.links = '';
         this.meaning = '';
         this.readOnly = false;
+        this.status = '';
         this.selected = false;
         this.movable = false;
         this.resizable = false;
@@ -72,7 +73,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
           </svg>`
             : nothing}<div
       part="node"
-      aria-describedby=${this.meaning || this.links ? 'about' : nothing}
+      aria-describedby=${this.status || this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.label || nothing}
       aria-labelledby=${this.label || this.group ? nothing : 'content'}
       aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
@@ -81,7 +82,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     >
       <slot id="content"></slot>
       <slot name="description"></slot>
-      <span id="about" hidden>${[this.meaning, this.links].filter(Boolean).join(', ')}</span>
+      <span id="about" hidden>${[this.status, this.meaning, this.links].filter(Boolean).join(', ')}</span>
     </div>
     ${this.connectable
             ? html `<span part="handle handle-top" aria-hidden="true" data-side="top"></span>
@@ -131,6 +132,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvasNode.prototype, "shape", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "status", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvasNode.prototype, "selected", void 0);

package/dist/canvas/root/canvas-document.d.ts

@@ -127,6 +127,16 @@ export declare const ends: (edge: CanvasEdge, from: CanvasNode, to: CanvasNode)
     fromSide: CanvasSide;
     toSide: CanvasSide;
 };
+/**
+ * How far a point is from a card's box, in the document's units: nothing
+ * inside it, and the shortest way to its edge outside.
+ */
+export declare const distanceTo: (node: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, point: Point) => number;
 /**
  * The side of a card nearest a point, which is where a connection a reader is
  * holding arrives.

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

@@ -175,6 +175,7 @@ export const ends = (edge, from, to) => {
     const toSide = edge.toSide ?? fallbackTo;
     return { end: port(to, toSide), fromSide, start: port(from, fromSide), toSide };
 };
+export const distanceTo = (node, point) => Math.hypot(Math.max(node.x - point.x, 0, point.x - (node.x + node.width)), Math.max(node.y - point.y, 0, point.y - (node.y + node.height)));
 export const sideNear = (node, point) => ['top', 'right', 'bottom', 'left']
     .map((side) => {
     const at = port(node, side);

package/dist/canvas/root/canvas-root.d.ts

@@ -34,20 +34,34 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * keep every card in place, such as on a published board. Set `readonly` on one
  * card or connection to keep only that one in place.
  *
+ * Set `snap` to a length in the document's units, such as `32`, and a card
+ * that is moved or resized lands on a multiple of it. Carrying a card, a
+ * corner, a connection, or the selection box near the edge of the board moves
+ * the board under it, so a card can be taken to a place off screen in one
+ * drag. A connection let go within 20 pixels of a card arrives at it. A
+ * double click on the empty board zooms in about that point, and Shift with a
+ * double click zooms out.
+ *
  * Keyboard behavior:
  * - One card holds the board's tab stop.
  * - The arrow keys move through the cards in reading order. The card you land
  *   on scrolls into view, and its connections are announced with it.
- * - Shift with an arrow key moves the card.
+ * - Shift with an arrow key moves the card: by 16 units, or to the next
+ *   multiple of `snap` where it is set. Alt with an arrow key resizes it from
+ *   its bottom right corner the same way.
  * - The connections leaving a card are stops of their own, straight after it.
  *   Enter on one moves to the card it arrives at.
+ * - What a key changes that a reader cannot see is said: where a card moved
+ *   to, its new size, how many cards are selected, and the zoom. A selected
+ *   card or connection says so when a reader arrives on it.
  *
  * Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that
  * cannot hold a button down. Click a selected card's move handle, a corner, a
  * card's connection point, or the end of a selected connection to pick it up.
  * It follows the pointer with no button held, and the next click puts it down
  * where a drag would have. On touch, the next tap sets where it lands. Escape,
- * or a press outside the board, puts it back.
+ * or a press outside the board, puts it back. So a finger connects two cards
+ * with three taps: the card, one of its points, and the card to connect to.
  *
  * Connecting and removing dispatch requests, and your code applies them:
  * - Drawing from a card's handle to another card, or pressing C on one card and
@@ -75,7 +89,14 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @slot - The board's `helix-canvas-node` and `helix-canvas-edge` elements, drawn on the plane.
  * @slot empty - Content shown when the document has no nodes.
  * @slot footer - Content below the board.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the board.
+ * @slot pan-down-icon - Replaces the glyph inside the pan down button.
+ * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
+ * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
+ * @slot pan-up-icon - Replaces the glyph inside the pan up button.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in button.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out button.
  *
  * @event {HelixBeforeMoveEvent} helix-before-move - Cards are about to move. Cancelable: cancel it to keep the positions in your own state.
  * @event {HelixBeforeReconnectEvent} helix-before-reconnect - A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state.
@@ -171,6 +192,15 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * Third", rather than with a comma this component chose.
      */
     leadsToLabel: string;
+    /**
+     * What screen readers hear after a key moves a card, with `{name}` for the
+     * card and `{x}` and `{y}` for where it now is, in the document's units.
+     *
+     * **A move a reader cannot see has to be said.** Shift with an arrow moved
+     * the card and said nothing, so a reader moving one by keys could not tell
+     * whether it had moved, or how far.
+     */
+    movedLabel: string;
     /**
      * The order the arrow keys and screen readers move through the cards:
      * `spatial` or `edges`.
@@ -208,6 +238,12 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * `{to}`.
      */
     reconnectingLabel: string;
+    /**
+     * What screen readers hear after a key resizes a card, with `{name}` for the
+     * card and `{width}` and `{height}` for its new size, in the document's
+     * units.
+     */
+    resizedLabel: string;
     /**
      * The names of the selected cards and connections, comma separated. Empty
      * when nothing is selected.
@@ -230,6 +266,35 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * Written to select from outside, and read to act on the selection.
      */
     selected: string;
+    /**
+     * What a selected card or connection adds to what screen readers hear on
+     * it, before its tone and its connections. Empty adds nothing.
+     *
+     * A card is an article and a connection a button, and neither has a selected
+     * state for `aria-selected` to carry, so the state is said in words.
+     */
+    selectedLabel: string;
+    /**
+     * What screen readers hear after the selection grows or shrinks, with
+     * `{count}` for how many cards and connections are selected: by Space, a
+     * click with Shift, Command or Control, Command or Control with A, a box
+     * drawn across the board, or Escape.
+     *
+     * A selection of one made by arriving on a card or clicking it is not said,
+     * since the card is.
+     */
+    selectionLabel: string;
+    /**
+     * Snaps the cards a reader moves or resizes to a multiple of this many of the
+     * document's units, such as `32` to land on the lines `grid` draws.
+     *
+     * **A drag lets go on the nearest line and a key goes to the next one.**
+     * Shift with an arrow moves a card to the next line that way, rather than
+     * by its step of 16, and Alt with an arrow moves its bottom right corner
+     * the same way. A group moves with what it carries, so a card inside one
+     * keeps its place in it. Absent, cards land where they are let go.
+     */
+    snap?: number;
     /**
      * A label being edited in place: whose, and what it said before.
      */
@@ -247,6 +312,11 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * told the same. A tone left out is not read.
      */
     toneLabels: Partial<Record<CanvasTone, string>>;
+    /**
+     * What screen readers hear after a zoom button or key, with `{zoom}` for the
+     * zoom as a percentage, written the way the page's language writes one.
+     */
+    zoomedLabel: string;
     /** The card or connection that holds the board's one tab stop, by its key. */
     private stop;
     /**
@@ -254,8 +324,20 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * started it, and where the pointer is, in the document's own units.
      */
     private linking;
-    /** What the live region says, which is only ever about a connection being made. */
+    /**
+     * What the live region says: a connection being made, and what a key did
+     * that a reader cannot see, a move, a resize, the selection, the zoom.
+     */
     private said;
+    /**
+     * Says something in the live region.
+     *
+     * The same words twice would change nothing in the region and be heard
+     * once, so a second "2 selected" differs by a space no reader says.
+     */
+    private say;
+    /** Numbers as the page's language writes them. */
+    private get numbers();
     /**
      * Where focus goes once something a reader removed has gone.
      *
@@ -469,7 +551,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private toDocument;
     /**
      * The card under a point, the smallest where they overlap, so a card inside
-     * a group is found before the group around it.
+     * a group is found before the group around it. Where none is, the nearest
+     * within `reach`, in the document's units.
      */
     private cardAt;
     /** What a card is called, by id, for what the live region says. */
@@ -631,6 +714,22 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * Returns whether it applied, so a caller knows whether to report a finish.
      */
     private requestMove;
+    /**
+     * Moves the view while a pointer carries something near its edge, and
+     * carries it along: a card, a corner, a connection being drawn, the box that
+     * selects.
+     */
+    private readonly edgePan;
+    /** The last pointer move of a carry, which a frame of `edgePan` moves on from. */
+    private carryPointer;
+    /**
+     * One frame of moving the view under something carried to its edge: the
+     * board moves by `by` and what is in hand stays under the pointer, so a card
+     * goes on moving over the board while the hand is still.
+     */
+    private panCarrying;
+    /** Follows a pointer carrying something, which moves the view at an edge. */
+    private carryOn;
     /**
      * Drag to move the board, which is the gesture a canvas is reached for with.
      *
@@ -767,7 +866,10 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * board draws; a card's content by asking, which the board does not.
      */
     private editStop;
-    /** A double-click on a card or a connection edits it, the pointer's F2. */
+    /**
+     * A double-click on a card or a connection edits it, the pointer's F2, and
+     * one on the empty board zooms in about where it landed.
+     */
     private readonly handleDoubleClick;
     /**
      * Finishes editing a label: asks, writes it where the page did not refuse,

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

@@ -4,12 +4,14 @@ 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, fillTemplate, formatNumbers, 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 { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
+import { EdgePan } from '../edge-pan.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 +22,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',
@@ -44,11 +47,16 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.label = '';
         this.labelEditorLabel = 'Label for {name}';
         this.leadsToLabel = 'leads to {cards}';
+        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.zoomedLabel = 'Zoom {zoom}';
         this.said = '';
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
@@ -62,6 +70,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 +225,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 +249,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 +259,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 +274,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 +324,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 +345,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 +456,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(fillTemplate(this.movedLabel, {
+                        name: this.nameOf(card.name),
+                        x: this.numbers(card.x),
+                        y: this.numbers(card.y),
+                    }));
                 }
                 void this.updateComplete.then(() => this.reveal(card.name));
                 return;
@@ -451,10 +482,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(fillTemplate(this.resizedLabel, {
+                        height: this.numbers(box.height),
+                        name: this.nameOf(card.name),
+                        width: this.numbers(box.width),
+                    }));
                 }
                 return;
             }
@@ -465,7 +503,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 +515,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                     this.focusStop(back);
                     return;
                 }
-                this.choose(undefined);
+                this.choose(undefined, true);
                 this.partNamed('region')?.focus();
                 return;
             }
@@ -593,7 +631,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();
@@ -614,6 +673,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    say(words) {
+        this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
+    }
+    get numbers() {
+        return formatNumbers(this.closest('[lang]')?.getAttribute('lang') ?? '');
+    }
     get box() {
         const viewport = this.renderRoot?.querySelector('[part="viewport"]');
         return {
@@ -752,6 +817,10 @@ 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 });
+        const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
+        this.say(fillTemplate(this.zoomedLabel, {
+            zoom: new Intl.NumberFormat(lang, { maximumFractionDigits: 0, style: 'percent' }).format(this.at.zoom),
+        }));
         super.zoom(by);
     }
     show(name) {
@@ -815,13 +884,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);
@@ -1099,7 +1175,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 +1183,14 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         }
         if (this.dispatchEvent(new HelixSelectEvent({ value }))) {
             this.selected = value;
+            if (said) {
+                this.say(fillTemplate(this.selectionLabel, { count: this.numbers(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 +1217,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,6 +1299,8 @@ 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);
@@ -1655,6 +1756,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 +1822,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,7 +1911,7 @@ 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-description=${[pickedKeys.has(key) ? this.selectedLabel : undefined, 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) })}
         d=${drawn.d}
         data-edge=${key}
@@ -1855,25 +1959,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) => {
@@ -2021,6 +2107,9 @@ __decorate([
 __decorate([
     property({ attribute: 'leads-to-label' })
 ], HelixHeadlessCanvas.prototype, "leadsToLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-label' })
+], HelixHeadlessCanvas.prototype, "movedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvas.prototype, "order", void 0);
@@ -2033,9 +2122,21 @@ __decorate([
 __decorate([
     property({ attribute: 'reconnecting-label' })
 ], HelixHeadlessCanvas.prototype, "reconnectingLabel", void 0);
+__decorate([
+    property({ attribute: 'resized-label' })
+], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessCanvas.prototype, "selectedLabel", void 0);
+__decorate([
+    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);
@@ -2045,6 +2146,9 @@ __decorate([
 __decorate([
     property({ attribute: 'tone-labels', converter: wordsConverter })
 ], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
+__decorate([
+    property({ attribute: 'zoomed-label' })
+], HelixHeadlessCanvas.prototype, "zoomedLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "stop", void 0);