@fusion.dev/helix-headless 0.110.6 → 0.111.0

package/custom-elements.json

@@ -11230,6 +11230,16 @@
               "description": "The text announced when a connection is stopped before it is requested.",
               "attribute": "stopped-label"
             },
+            {
+              "kind": "field",
+              "name": "toneLabels",
+              "type": {
+                "text": "Partial<Record<CanvasTone, string>>"
+              },
+              "default": "{}",
+              "description": "What each tone means on this board, in words read out with the cards and\nconnections in it, such as `{\"danger\": \"Blocked\", \"success\": \"Done\"}`.\n\n**Named by the page, since the tone names a color and the page gives it\nits meaning.** JSON Canvas leaves its six colors to the application, so\nred is \"blocked\" on one board and \"urgent\" on the next. A reader who can\nsee the board is told by the color; this is how a reader who cannot is\ntold the same. A tone left out is not read.",
+              "attribute": "tone-labels"
+            },
             {
               "kind": "field",
               "name": "stop",
@@ -11688,6 +11698,23 @@
               "privacy": "private",
               "description": "A card being resized from a corner, with the box it started from."
             },
+            {
+              "kind": "field",
+              "name": "fingers",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<number, { x: number; y: number }>()",
+              "description": "Where each finger on the board is, by pointer, which a pinch is measured from."
+            },
+            {
+              "kind": "field",
+              "name": "pinching",
+              "type": {
+                "text": "| {\n        at: { x: number; y: number; zoom: number }\n        middle: { x: number; y: number }\n        spread: number\n      }\n    | undefined"
+              },
+              "privacy": "private",
+              "description": "A pinch under way: how far apart its fingers were and the point between\nthem, in the box, and the view, when the second finger landed."
+            },
             {
               "kind": "field",
               "name": "dragging",
@@ -12696,6 +12723,39 @@
               ],
               "description": "The box a Shift-drag is drawing, on the plane, while it is."
             },
+            {
+              "kind": "method",
+              "name": "fingerSpan",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ middle: { x: number; y: number }; spread: number }"
+                }
+              },
+              "description": "The fingers' spread and the point between them, in the box. Taken from\nthe first two fingers down, where a third has landed as well."
+            },
+            {
+              "kind": "method",
+              "name": "startPinch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Turns what the first finger was doing into a pinch, where that was a pan\nor a press that had not yet moved anything. A finger already carrying a\ncard, drawing a line, resizing or drawing a box goes on doing that."
+            },
+            {
+              "kind": "method",
+              "name": "pinch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Scales the board by how far the fingers have spread since the pinch\nbegan, about the point between them, and carries it with that point, so\nwhat was under the fingers stays under them."
+            },
             {
               "kind": "method",
               "name": "zoomAbout",
@@ -13965,6 +14025,15 @@
               "description": "The text announced when a connection is stopped before it is requested.",
               "fieldName": "stoppedLabel"
             },
+            {
+              "name": "tone-labels",
+              "type": {
+                "text": "Partial<Record<CanvasTone, string>>"
+              },
+              "default": "{}",
+              "description": "What each tone means on this board, in words read out with the cards and\nconnections in it, such as `{\"danger\": \"Blocked\", \"success\": \"Done\"}`.\n\n**Named by the page, since the tone names a color and the page gives it\nits meaning.** JSON Canvas leaves its six colors to the application, so\nred is \"blocked\" on one board and \"urgent\" on the next. A reader who can\nsee the board is told by the color; this is how a reader who cannot is\ntold the same. A tone left out is not read.",
+              "fieldName": "toneLabels"
+            },
             {
               "name": "controls",
               "type": {

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

@@ -122,6 +122,12 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      * hears what the card says first and where it leads second.
      */
     links: string;
+    /**
+     * @internal What the card's tone means, in the page's words, written by the
+     * board from its `toneLabels`. Read out before where the card leads, since
+     * a reader who can see the board is told it by the card's color first.
+     */
+    meaning: string;
     /**
      * Prevents the card from being moved, connected, or removed.
      *
@@ -204,12 +210,15 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      */
     focus(options?: FocusOptions): void;
     /**
-     * The card, and the sentence that says where it leads.
+     * The card, and the sentence that says what its tone means and where it
+     * leads.
      *
      * **`aria-describedby` at a hidden element, which is allowed and is the
      * point.** A description is computed from its target whether or not the
      * target is rendered, so the connections are read out and never drawn: the
-     * arrows already draw them.
+     * arrows already draw them. **One element, the two joined with a comma**:
+     * two elements named in the reference are joined with a space alone, which
+     * read "Done leads to Launch" as one phrase.
      */
     protected render(): TemplateResult;
 }

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

@@ -31,6 +31,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.placement = new PlacementController(this);
         this.name = '';
         this.links = '';
+        this.meaning = '';
         this.readOnly = false;
         this.selected = false;
         this.movable = false;
@@ -71,7 +72,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
           </svg>`
             : nothing}<div
       part="node"
-      aria-describedby=${this.links ? 'links' : nothing}
+      aria-describedby=${this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.group ? this.label || nothing : nothing}
       aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
       role=${this.group ? 'group' : 'article'}
@@ -79,7 +80,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     >
       <slot></slot>
       <slot name="description"></slot>
-      <span id="links" hidden>${this.links}</span>
+      <span id="about" hidden>${[this.meaning, this.links].filter(Boolean).join(', ')}</span>
     </div>
     ${this.connectable
             ? html `<span part="handle handle-top" aria-hidden="true" data-side="top"></span>
@@ -120,6 +121,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCanvasNode.prototype, "links", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "meaning", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessCanvasNode.prototype, "readOnly", void 0);

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

@@ -1,6 +1,6 @@
 import { type CanvasView, HelixElement, type ViewportPanDetail, type ViewportWay, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type CanvasDocument } from './canvas-document.js';
+import { type CanvasDocument, type CanvasTone } from './canvas-document.js';
 export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & typeof HelixElement;
@@ -227,6 +227,17 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private editing;
     /** The text announced when a connection is stopped before it is requested. */
     stoppedLabel: string;
+    /**
+     * What each tone means on this board, in words read out with the cards and
+     * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+     *
+     * **Named by the page, since the tone names a color and the page gives it
+     * its meaning.** JSON Canvas leaves its six colors to the application, so
+     * red is "blocked" on one board and "urgent" on the next. A reader who can
+     * see the board is told by the color; this is how a reader who cannot is
+     * told the same. A tone left out is not read.
+     */
+    toneLabels: Partial<Record<CanvasTone, string>>;
     /** The card or connection that holds the board's one tab stop, by its key. */
     private stop;
     /**
@@ -419,6 +430,13 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private marquee;
     /** A card being resized from a corner, with the box it started from. */
     private sizing;
+    /** Where each finger on the board is, by pointer, which a pinch is measured from. */
+    private readonly fingers;
+    /**
+     * A pinch under way: how far apart its fingers were and the point between
+     * them, in the box, and the view, when the second finger landed.
+     */
+    private pinching;
     /** Where a drag started, and where the board was when it did. */
     private dragging;
     /**
@@ -749,6 +767,23 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private renderEditor;
     /** The box a Shift-drag is drawing, on the plane, while it is. */
     private renderMarquee;
+    /**
+     * The fingers' spread and the point between them, in the box. Taken from
+     * the first two fingers down, where a third has landed as well.
+     */
+    private fingerSpan;
+    /**
+     * Turns what the first finger was doing into a pinch, where that was a pan
+     * or a press that had not yet moved anything. A finger already carrying a
+     * card, drawing a line, resizing or drawing a box goes on doing that.
+     */
+    private startPinch;
+    /**
+     * Scales the board by how far the fingers have spread since the pinch
+     * began, about the point between them, and carries it with that point, so
+     * what was under the fingers stays under them.
+     */
+    private pinch;
     /** Scales about a point in the box, which is what both the buttons and a pinch want. */
     private zoomAbout;
     /** What one card says in the reading list, its links included. */

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

@@ -48,6 +48,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         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.toneLabels = {};
         this.said = '';
         this.at = { x: 0, y: 0, zoom: 1 };
         this.direct = false;
@@ -58,6 +59,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.sides = new Map();
         this.pressing = false;
         this.pointing = false;
+        this.fingers = new Map();
         this.keying = undefined;
         this.edgeKeys = new WeakMap();
         this.handlePointerDown = (event) => {
@@ -67,6 +69,15 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             if (event.button !== 0 || on('controls') || !(card || on('viewport'))) {
                 return;
             }
+            if (event.pointerType === 'touch') {
+                this.fingers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                if (this.fingers.size > 1) {
+                    if (this.fingers.size === 2 && !this.pinching) {
+                        this.startPinch();
+                    }
+                    return;
+                }
+            }
             if (this.held) {
                 event.preventDefault();
                 this.putDown(event);
@@ -178,6 +189,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
         this.handlePointerMove = (event) => {
             this.idle.stir();
+            if (this.fingers.has(event.pointerId)) {
+                this.fingers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                if (this.pinching) {
+                    this.pinch();
+                    return;
+                }
+            }
             const pressed = this.carrying ?? this.dragging ?? this.sizing ?? this.marquee ?? this.linking?.pointer;
             if (event.pointerType === 'mouse' &&
                 event.buttons === 0 &&
@@ -258,6 +276,27 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             };
         };
         this.handlePointerUp = (event) => {
+            const finger = this.fingers.delete(event.pointerId);
+            if (this.pinching) {
+                if (this.fingers.size < 2) {
+                    this.pinching = undefined;
+                    this.direct = false;
+                }
+                if (this.fingers.size === 0) {
+                    this.pressing = false;
+                }
+                return;
+            }
+            const owner = [
+                this.sizing?.pointer,
+                this.marquee?.pointer,
+                this.linking?.pointer,
+                this.carrying?.pointer,
+                this.dragging?.pointer,
+            ].includes(event.pointerId);
+            if (finger && !owner && this.fingers.size > 0) {
+                return;
+            }
             this.pressing = false;
             const pointing = this.pointing;
             this.pointing = false;
@@ -1263,6 +1302,48 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
       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>`;
     }
+    fingerSpan() {
+        const [one, two] = [...this.fingers.values()];
+        const box = this.partNamed('viewport')?.getBoundingClientRect();
+        return {
+            middle: {
+                x: (one.x + two.x) / 2 - (box?.left ?? 0),
+                y: (one.y + two.y) / 2 - (box?.top ?? 0),
+            },
+            spread: Math.hypot(two.x - one.x, two.y - one.y),
+        };
+    }
+    startPinch() {
+        if (this.sizing || this.marquee || this.linking || this.held || this.carrying?.started) {
+            return;
+        }
+        this.carrying = undefined;
+        this.dragging = undefined;
+        this.pointing = false;
+        const { middle, spread } = this.fingerSpan();
+        if (spread === 0) {
+            return;
+        }
+        for (const pointer of this.fingers.keys()) {
+            capturePointer(this, pointer);
+        }
+        this.touched = true;
+        this.direct = true;
+        this.pinching = { at: { ...this.at }, middle, spread };
+    }
+    pinch() {
+        const start = this.pinching;
+        if (!start) {
+            return;
+        }
+        const { middle, spread } = this.fingerSpan();
+        const zoom = Math.min(Math.max((start.at.zoom * spread) / start.spread, ZOOM_MIN), ZOOM_MAX);
+        this.at = {
+            x: middle.x - ((start.middle.x - start.at.x) * zoom) / start.at.zoom,
+            y: middle.y - ((start.middle.y - start.at.y) * zoom) / start.at.zoom,
+            zoom,
+        };
+    }
     zoomAbout(by, about) {
         const from = this.at.zoom;
         const to = Math.min(Math.max(from * by, ZOOM_MIN), ZOOM_MAX);
@@ -1595,6 +1676,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
             const node = this.byId.get(card.name);
             card.links = node ? this.linksOf(node) : '';
+            card.meaning = card.tone ? (this.toneLabels[card.tone] ?? '') : '';
             card.current = card.name === stop;
             card.selected = picked.has(card.name);
             card.resizable = alone === card.name && !this.fixed(card);
@@ -1661,7 +1743,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const ends = heads(edge);
             return svg `<path
             part="edge-target"
-            aria-description=${edge.label || nothing}
+            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) })}
             d=${drawn.d}
             data-edge=${key}
@@ -1844,6 +1926,9 @@ __decorate([
 __decorate([
     property({ attribute: 'stopped-label' })
 ], HelixHeadlessCanvas.prototype, "stoppedLabel", void 0);
+__decorate([
+    property({ attribute: 'tone-labels', type: Object })
+], HelixHeadlessCanvas.prototype, "toneLabels", void 0);
 __decorate([
     state()
 ], HelixHeadlessCanvas.prototype, "stop", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.110.6",
+  "version": "0.111.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.6",
-    "@fusion.dev/helix-icons": "0.110.6",
+    "@fusion.dev/helix-core": "0.111.0",
+    "@fusion.dev/helix-icons": "0.111.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.6",
-    "@fusion.dev/helix-testing": "0.110.6",
+    "@fusion.dev/helix-cem": "0.111.0",
+    "@fusion.dev/helix-testing": "0.111.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -2242,6 +2242,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  toneLabels?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.
 
@@ -2542,6 +2560,24 @@ Written to select from outside, and read to act on the selection. */
   "attr:stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   "prop:stoppedLabel"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "attr:tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "prop:toneLabels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.
 
@@ -24658,6 +24694,14 @@ export type CustomElements = {
    *
    * Written to select from outside, and read to act on the selection.
    * - `stopped-label`/`stoppedLabel`: The text announced when a connection is stopped before it is requested.
+   * - `tone-labels`/`toneLabels`: What each tone means on this board, in words read out with the cards and
+   * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+   *
+   * **Named by the page, since the tone names a color and the page gives it
+   * its meaning.** JSON Canvas leaves its six colors to the application, so
+   * red is "blocked" on one board and "urgent" on the next. A reader who can
+   * see the board is told by the color; this is how a reader who cannot is
+   * told the same. A tone left out is not read.
    * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
    * `none`. A family can add words of its own.
    *
@@ -44594,6 +44638,14 @@ export type CustomElementsSolidJs = {
    *
    * Written to select from outside, and read to act on the selection.
    * - `stopped-label`/`stoppedLabel`: The text announced when a connection is stopped before it is requested.
+   * - `tone-labels`/`toneLabels`: What each tone means on this board, in words read out with the cards and
+   * connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+   *
+   * **Named by the page, since the tone names a color and the page gives it
+   * its meaning.** JSON Canvas leaves its six colors to the application, so
+   * red is "blocked" on one board and "urgent" on the next. A reader who can
+   * see the board is told by the color; this is how a reader who cannot is
+   * told the same. A tone left out is not read.
    * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
    * `none`. A family can add words of its own.
    *

package/types/svelte.d.ts

@@ -24,6 +24,8 @@ declare module 'svelte/elements' {
     'helix-headless-callout': CustomElements['helix-headless-callout']
     'helix-headless-canvas-edge': CustomElements['helix-headless-canvas-edge']
     'helix-headless-canvas-node': CustomElements['helix-headless-canvas-node']
+    'danger': CustomElements['danger']
+    'success': CustomElements['success']
     'helix-headless-canvas': CustomElements['helix-headless-canvas']
     'helix-headless-card': CustomElements['helix-headless-card']
     'helix-headless-carousel': CustomElements['helix-headless-carousel']

package/types/vue.d.ts

@@ -1246,6 +1246,24 @@ Written to select from outside, and read to act on the selection. */
   "stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   stoppedLabel?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  "tone-labels"?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What each tone means on this board, in words read out with the cards and
+connections in it, such as `{"danger": "Blocked", "success": "Done"}`.
+
+**Named by the page, since the tone names a color and the page gives it
+its meaning.** JSON Canvas leaves its six colors to the application, so
+red is "blocked" on one board and "urgent" on the next. A reader who can
+see the board is told by the color; this is how a reader who cannot is
+told the same. A tone left out is not read. */
+  toneLabels?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
   /** Which controls to show, as a list such as `pan zoom fullscreen`, or
 `none`. A family can add words of its own.