@fusion.dev/helix-headless 0.110.4 → 0.110.6

package/custom-elements.json

@@ -9993,6 +9993,14 @@
               "description": "The card's name as text. A group shows it, and another card's connections\nread it out.\n\nA group needs one because it has no text of its own; a card that has text\nis named by it, and one holding a picture or a figure is named by nothing\nshort enough to read out in another card's connections.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the card was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -10510,6 +10518,10 @@
               "description": "The card that receives focus when you tab into the board.",
               "name": "current"
             },
+            {
+              "description": "Placed on the board.",
+              "name": "placed"
+            },
             {
               "description": "The card is selected.",
               "name": "selected"
@@ -11386,16 +11398,6 @@
               "description": "A card's geometry by its name.",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "groups",
-              "type": {
-                "text": "CanvasNode[]"
-              },
-              "privacy": "private",
-              "description": "The groups alone, which is all a card's group is chosen from.",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "cache",
@@ -12196,6 +12198,26 @@
               ],
               "description": "The element behind a connection's key, for what only the element knows."
             },
+            {
+              "kind": "field",
+              "name": "keying",
+              "type": {
+                "text": "| {\n        byElement: Map<HelixHeadlessCanvasEdge, string>\n        byKey: Map<string, HelixHeadlessCanvasEdge>\n      }\n    | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "Every connection's key and every key's element, worked out once for the\nrender that asks for them.\n\n**One pass, where each asked alone walked them all.** A connection with no\n`name` counts its twins to be told apart, and a render asks every\nconnection's element by key, so four hundred unnamed connections cost 53\nms a render and 4.7 seconds with them all chosen, every step of a drag.\nKept from `willUpdate` to `updated` only: outside a render a handler may\nhave just moved a connection's ends, and its key is worked out afresh."
+            },
+            {
+              "kind": "method",
+              "name": "keyAll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    byElement: Map<HelixHeadlessCanvasEdge, string>\n    byKey: Map<string, HelixHeadlessCanvasEdge>\n  }"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "edgeElements",
@@ -12766,6 +12788,16 @@
               },
               "description": "The board's current view: the document's point at the middle of the view,\nand the zoom.\n\n**Read to save a view and written to restore one**, which a consumer keeping\na minimap in step, or putting a reader back where they were, had no way to\ndo: where the board sat was private, and the events said only which way a\ncontrol had moved it. The middle rather than a corner, so a view saved in\none box shows the same thing in the middle of a box of another size.\nWriting one counts as the reader choosing a view, so a later resize keeps\nit rather than fitting the board again."
             },
+            {
+              "kind": "field",
+              "name": "waiting",
+              "type": {
+                "text": "CanvasView | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "A view written before the board could place it, placed once it can."
+            },
             {
               "kind": "field",
               "name": "reported",
@@ -14109,7 +14141,7 @@
               "name": "holding"
             },
             {
-              "description": "The user has been still long enough for the controls to hide.",
+              "description": "The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.",
               "name": "idle"
             },
             {
@@ -64501,6 +64533,14 @@
               "description": "Longitude, in degrees.",
               "attribute": "lng"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the marker was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -65001,6 +65041,10 @@
               "description": "Marked as passed.",
               "name": "passed"
             },
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed"
+            },
             {
               "description": "Shows its name before the point, because there was no room after it.",
               "name": "start"
@@ -65865,6 +65909,14 @@
               "description": "Longitude, in degrees.",
               "attribute": "lng"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PlacementController(this)",
+              "description": "Where the position was placed, kept in its own shadow root."
+            },
             {
               "kind": "field",
               "name": "spoken",
@@ -66296,6 +66348,20 @@
               "fieldName": "lng"
             }
           ],
+          "cssStates": [
+            {
+              "description": "Placed on the map by the connector.",
+              "name": "placed"
+            },
+            {
+              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
           "superclass": {
             "name": "HelixElement",
             "package": "@fusion.dev/helix-core"
@@ -66318,16 +66384,6 @@
           },
           "tagName": "helix-headless-map-position",
           "customElement": true,
-          "cssStates": [
-            {
-              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
-              "name": "settled",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
-            }
-          ],
           "modulePath": "src/map/position/map-position.ts",
           "definitionPath": "src/map/position/map-position.ts"
         }

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

@@ -57,6 +57,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate candidate - While a connection is being drawn and this card is somewhere it could arrive.
  * @cssstate current - The card that receives focus when you tab into the board.
+ * @cssstate placed - Placed on the board.
  * @cssstate selected - The card is selected.
  * @cssstate target - A connection being drawn would end here if you released it.
  */
@@ -97,6 +98,16 @@ export declare class HelixHeadlessCanvasNode extends HelixElement {
      * short enough to read out in another card's connections.
      */
     label: string;
+    /** Where the card was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the card, written by the board: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /**
      * The name that connections and events use for this card, unique on its
      * board.

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

@@ -4,7 +4,7 @@ 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 { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, PlacementController } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const DRAWN = [
@@ -28,6 +28,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.current = false;
         this.height = 0;
         this.label = '';
+        this.placement = new PlacementController(this);
         this.name = '';
         this.links = '';
         this.readOnly = false;
@@ -39,6 +40,13 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
         this.x = 0;
         this.y = 0;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_canvas-card-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('candidate', this.candidate);

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

@@ -119,7 +119,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @cssstate empty - While the document has no nodes.
  * @cssstate fullscreen - While the board fills the screen.
  * @cssstate holding - An item picked up with a click follows the pointer until the next press puts it down.
- * @cssstate idle - The user has been still long enough for the controls to hide.
+ * @cssstate idle - The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
  * @cssstate pressing - While a press on the board, its cards or its connections is under way.
  */
 export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
@@ -320,8 +320,6 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private get byName();
     /** A card's geometry by its name. */
     private get byId();
-    /** The groups alone, which is all a card's group is chosen from. */
-    private get groups();
     /**
      * What the board reads from its children, kept for the rest of the turn.
      *
@@ -549,6 +547,19 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private fixed;
     /** The element behind a connection's key, for what only the element knows. */
     private edgeElement;
+    /**
+     * Every connection's key and every key's element, worked out once for the
+     * render that asks for them.
+     *
+     * **One pass, where each asked alone walked them all.** A connection with no
+     * `name` counts its twins to be told apart, and a render asks every
+     * connection's element by key, so four hundred unnamed connections cost 53
+     * ms a render and 4.7 seconds with them all chosen, every step of a drag.
+     * Kept from `willUpdate` to `updated` only: outside a render a handler may
+     * have just moved a connection's ends, and its key is worked out afresh.
+     */
+    private keying;
+    private keyAll;
     /** The connections declared, in the order they were written. */
     private get edgeElements();
     /**
@@ -784,6 +795,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      */
     get view(): CanvasView;
     set view(next: CanvasView);
+    /** A view written before the board could place it, placed once it can. */
+    private waiting;
     /** The view last reported, so a render that did not move the board says nothing. */
     private reported?;
     /**

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

@@ -9,7 +9,7 @@ import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
-import { colorOf, connector, ends, extent, groupOf, inside, port, reading, sideNear, } from './canvas-document.js';
+import { colorOf, connector, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 const MARGIN = 32;
 const ARROW = 'canvas-arrow';
@@ -33,14 +33,7 @@ const onPlane = (node, origin) => ({
 const INTERACTIVE = 'input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"])';
 const custom = (element, name) => element?.style.getPropertyValue(name).trim() ?? '';
 const finite = (value) => (Number.isFinite(value) ? value : 0);
-const size = (element, name, value) => {
-    if (value > 0) {
-        element.style.setProperty(name, `${value}px`);
-    }
-    else {
-        element.style.removeProperty(name);
-    }
-};
+const size = (value) => (value > 0 ? `${value}px` : undefined);
 let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
@@ -65,6 +58,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.sides = new Map();
         this.pressing = false;
         this.pointing = false;
+        this.keying = undefined;
         this.edgeKeys = new WeakMap();
         this.handlePointerDown = (event) => {
             const path = event.composedPath();
@@ -379,6 +373,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const key = edge ?? card.name;
             const along = inlineStep(this, event.key);
             const down = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+            const plain = !event.metaKey && !event.ctrlKey && !event.altKey;
             if (card && event.shiftKey && (along !== 0 || down !== 0)) {
                 event.preventDefault();
                 if (this.fixed(card)) {
@@ -432,7 +427,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 this.partNamed('region')?.focus();
                 return;
             }
-            if (!this.linking && (event.key === 'F2' || (card && event.key === 'Enter'))) {
+            if (plain && !this.linking && (event.key === 'F2' || (card && event.key === 'Enter'))) {
                 event.preventDefault();
                 this.editStop(key);
                 return;
@@ -450,7 +445,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 }
                 return;
             }
-            if (card && !this.fixed(card) && !this.linking && (event.key === 'c' || event.key === 'C')) {
+            if (plain &&
+                card &&
+                !this.fixed(card) &&
+                !this.linking &&
+                (event.key === 'c' || event.key === 'C')) {
                 event.preventDefault();
                 this.startLinking(card.name);
                 return;
@@ -459,12 +458,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 !this.linking &&
                 !this.readOnly &&
                 !this.edgeElement(edge)?.readOnly &&
+                plain &&
                 (event.key === 'c' || event.key === 'C')) {
                 event.preventDefault();
                 this.startReconnect(edge, 'to');
                 return;
             }
-            if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (plain && !this.linking && (event.key === 'Delete' || event.key === 'Backspace')) {
                 const picked = this.picked;
                 const keys = picked.includes(key) ? picked : [key];
                 const loose = keys.filter((one) => one.startsWith('edge:')
@@ -477,7 +477,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             const walk = this.linking ? this.walk.filter((one) => one.kind === 'node') : this.walk;
-            const at = walk.findIndex((one) => one.key === key);
+            const found = walk.findIndex((one) => one.key === key);
+            const at = found === -1 && this.linking ? walk.findIndex((one) => one.key === this.linking?.from) : found;
             const to = event.key === 'Home'
                 ? 0
                 : event.key === 'End'
@@ -506,7 +507,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.linking) {
                     this.linking = { ...this.linking, to: this.arrival(card.name) };
                 }
-                this.reveal(card.name);
+                if (!this.pointing) {
+                    this.reveal(card.name);
+                }
             }
         };
         this.handleFocusOut = (event) => {
@@ -548,6 +551,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.handleEditorBlur = (event) => {
             this.finishEditing(event.currentTarget, true);
         };
+        this.waiting = undefined;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -568,9 +572,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     get byId() {
         return this.remember('byId', () => new Map(this.nodes.map((node) => [node.id, node])));
     }
-    get groups() {
-        return this.remember('groups', () => this.nodes.filter((node) => node.type === 'group'));
-    }
     remember(key, compute) {
         const cache = this.cache;
         if (Object.keys(cache).length === 0) {
@@ -862,6 +863,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             element.toSide = detail.toSide;
             this.rekey(linking.edge, this.keyOfElement(element));
         }
+        if (linking.pointer === undefined) {
+            this.said = fillTemplate(this.connectedLabel, {
+                from: this.nameOf(detail.from),
+                to: this.nameOf(detail.to),
+            });
+        }
         this.dispatchEvent(new HelixReconnectEvent(detail));
     }
     rekey(was, now) {
@@ -967,12 +974,38 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return this.readOnly || card === undefined || card.readOnly;
     }
     edgeElement(key) {
+        if (this.keying) {
+            return this.keying.byKey.get(key);
+        }
         return this.edgeElements.find((child) => this.keyOfElement(child) === key);
     }
+    keyAll() {
+        const byElement = new Map();
+        const byKey = new Map();
+        const twins = new Map();
+        for (const element of this.edgeElements) {
+            const base = keyBase({ fromNode: element.from, id: element.name, toNode: element.to });
+            let key = base;
+            if (!element.name) {
+                const count = (twins.get(base) ?? 0) + 1;
+                twins.set(base, count);
+                key = count > 1 ? `${base}#${count}` : base;
+            }
+            byElement.set(element, key);
+            if (!byKey.has(key)) {
+                byKey.set(key, element);
+            }
+        }
+        return { byElement, byKey };
+    }
     get edgeElements() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessCanvasEdge);
     }
     keyOfElement(element) {
+        const known = this.keying?.byElement.get(element);
+        if (known !== undefined) {
+            return known;
+        }
         const base = keyBase({ fromNode: element.from, id: element.name, toNode: element.to });
         if (element.name) {
             return base;
@@ -1302,6 +1335,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return whole;
     }
     get view() {
+        if (this.waiting) {
+            return this.waiting;
+        }
         const origin = this.origin ?? { x: 0, y: 0 };
         const { height, width } = this.box;
         return {
@@ -1311,10 +1347,18 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
     }
     set view(next) {
-        const origin = this.origin ?? { x: 0, y: 0 };
+        if (![next.x, next.y, next.zoom].every(Number.isFinite)) {
+            return;
+        }
+        this.touched = true;
+        if (!this.hasUpdated || !this.origin) {
+            this.waiting = next;
+            return;
+        }
+        this.waiting = undefined;
         const { height, width } = this.box;
+        const origin = this.origin;
         const zoom = Math.min(Math.max(next.zoom, ZOOM_MIN), ZOOM_MAX);
-        this.touched = true;
         this.direct = false;
         this.at = {
             x: width / 2 - (next.x - origin.x) * zoom,
@@ -1324,11 +1368,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
     toJsonCanvas() {
         const taken = new Set(this.edges.map((edge) => edge.id).filter(Boolean));
-        const edges = this.edges.map((edge) => {
+        const edges = this.edges.map((read) => {
+            const { fromSide: _from, toSide: _to, ...rest } = read;
+            const key = this.keyOf(read);
+            const element = this.edgeElement(key);
+            const edge = {
+                ...rest,
+                ...(element?.fromSide ? { fromSide: element.fromSide } : {}),
+                ...(element?.toSide ? { toSide: element.toSide } : {}),
+            };
             if (edge.id) {
-                return { ...edge };
+                return edge;
             }
-            const base = this.publicName(this.keyOf(edge));
+            const base = this.publicName(key);
             let id = base;
             for (let count = 2; taken.has(id); count++) {
                 id = `${base}-${count}`;
@@ -1366,8 +1418,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        if (this.waiting) {
+            this.measured = this.box;
+            this.view = this.waiting;
+        }
     }
     updated(changed) {
+        this.keying = undefined;
         super.updated(changed);
         if (this.holding && !this.held) {
             this.letGo();
@@ -1431,12 +1488,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             return true;
         }
         const target = record.target;
-        if (target instanceof HelixHeadlessCanvasNode &&
-            this.placed.has(target) &&
-            custom(target, '--_canvas-card-x') === '') {
-            this.placed.delete(target);
-            return true;
-        }
         const name = target instanceof HelixHeadlessCanvasNode
             ? '--canvas-node-color'
             : target instanceof HelixHeadlessCanvasEdge
@@ -1502,6 +1553,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.removeEventListener('pointerup', this.handlePointerUp);
     }
     willUpdate(changed) {
+        this.keying = this.keyAll();
         super.willUpdate(changed);
         const drawn = extent(this.nodes);
         const origin = { x: drawn.x - MARGIN, y: drawn.y - MARGIN };
@@ -1528,33 +1580,18 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop
             ? this.stop
             : reading(all, this.edges, this.order ?? 'spatial')[0]?.id;
-        const groups = this.groups;
         for (const card of this.cards) {
-            const group = card.group
-                ? undefined
-                : groupOf({
-                    height: card.height,
-                    id: card.name,
-                    type: 'text',
-                    width: card.width,
-                    x: card.x,
-                    y: card.y,
-                }, groups);
             const x = finite(card.x) - origin.x;
             const y = finite(card.y) - origin.y;
             const placed = `${x} ${y} ${finite(card.width)} ${finite(card.height)}`;
             if (this.placed.get(card) !== placed) {
                 this.placed.set(card, placed);
-                card.style.setProperty('--_canvas-card-x', `${x}px`);
-                card.style.setProperty('--_canvas-card-y', `${y}px`);
-                size(card, '--_canvas-card-inline-size', finite(card.width));
-                size(card, '--_canvas-card-block-size', finite(card.height));
-            }
-            if (group) {
-                card.setAttribute('data-group', group.id);
-            }
-            else {
-                card.removeAttribute('data-group');
+                card.place({
+                    '--_canvas-card-block-size': size(finite(card.height)),
+                    '--_canvas-card-inline-size': size(finite(card.width)),
+                    '--_canvas-card-x': `${x}px`,
+                    '--_canvas-card-y': `${y}px`,
+                });
             }
             const node = this.byId.get(card.name);
             card.links = node ? this.linksOf(node) : '';
@@ -1616,7 +1653,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const key = this.keyOf(edge);
             const element = elements.get(key);
             const drawn = this.geometryOf(edge, origin);
-            if (!drawn || (this.linking?.edge === key && !this.linking.pressed)) {
+            const lifted = this.linking?.edge === key && !this.linking.pressed;
+            if (!drawn || (lifted && this.linking?.pointer !== undefined)) {
                 return nothing;
             }
             const { from, to } = drawn;
@@ -1632,7 +1670,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             role="button"
             tabindex=${key === stop ? '0' : '-1'}
           />
-          <path
+          ${lifted
+                ? nothing
+                : svg `<path
             part="edge"
             aria-hidden="true"
             d=${drawn.d}
@@ -1643,7 +1683,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             marker-end=${ends.end ? `url(#${ARROW})` : nothing}
             marker-start=${ends.start ? `url(#${ARROW})` : nothing}
             style=${custom(element, '--canvas-edge-color') ? `--_canvas-edge-color: ${custom(element, '--canvas-edge-color')}` : nothing}
-          />
+          />`}
 `;
         })}
       ${this.renderDraft(origin)}

package/dist/map/marker/map-marker.d.ts

@@ -36,6 +36,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate fanned - Spread out from a location it shares with other markers, after their cluster was pressed.
  * @cssstate icon - Has content in the icon slot.
  * @cssstate passed - Marked as passed.
+ * @cssstate placed - Placed on the map by the connector.
  * @cssstate start - Shows its name before the point, because there was no room after it.
  */
 export declare class HelixHeadlessMapMarker extends HelixElement {
@@ -86,6 +87,16 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      * the point unless the view's edge would cut the name off there.
      */
     side: 'end' | 'start';
+    /** Where the marker was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the marker, written by the connector: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /** The value `helix-activate` reports. Defaults to the label. */
     name: string;
     /**

package/dist/map/marker/map-marker.js

@@ -4,7 +4,7 @@ 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 { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, PlacementController, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const BOOKKEEPING = new Set([
@@ -25,11 +25,19 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
         this.gatheredBy = undefined;
         this.isMapMarker = true;
         this.side = 'end';
+        this.placement = new PlacementController(this);
         this.name = '';
         this.passed = false;
         this.passedLabel = 'passed';
         this.handingOver = false;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_map-marker-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.handingOver =

package/dist/map/position/map-position.d.ts

@@ -28,6 +28,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart position - The image of the position, named by its label.
  * @csspart pulse - A ring that spreads out from the point, showing that the position is live.
  * @csspart status - The description, announced when it changes.
+ *
+ * @cssstate placed - Placed on the map by the connector.
  */
 export declare class HelixHeadlessMapPosition extends HelixElement {
     /** How accurate the position is, in meters. Drawn as a ring with this radius. */
@@ -49,6 +51,16 @@ export declare class HelixHeadlessMapPosition extends HelixElement {
     lat?: number;
     /** Longitude, in degrees. */
     lng?: number;
+    /** Where the position was placed, kept in its own shadow root. */
+    private readonly placement;
+    /**
+     * @internal Places the position, written by the connector: each custom property
+     * given, and each one given as `undefined` taken away. Kept in a sheet in the
+     * element's own shadow root, since its `style` is the page's.
+     */
+    place(properties: Readonly<Record<string, string | undefined>>): void;
+    /** @internal What a custom property was placed at, or `undefined` where it was not. */
+    placed(name: string): string | undefined;
     /** The words last spoken, which is what the status holds. */
     private spoken;
     /** When they were spoken, for the interval. */

package/dist/map/position/map-position.js

@@ -4,7 +4,7 @@ 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 { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, PlacementController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixElement {
@@ -13,9 +13,17 @@ let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixEleme
         this.announceEvery = 5000;
         this.isMapPosition = true;
         this.label = 'Live position';
+        this.placement = new PlacementController(this);
         this.spoken = '';
         this.spokenAt = Number.NEGATIVE_INFINITY;
     }
+    place(properties) {
+        this.placement.set(properties);
+        this.toggleState('placed', this.placement.get('--_map-position-x') !== undefined);
+    }
+    placed(name) {
+        return this.placement.get(name);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!changed.has('description') || !this.hasUpdated) {

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.4",
+  "version": "0.110.6",
   "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.4",
-    "@fusion.dev/helix-icons": "0.110.4",
+    "@fusion.dev/helix-core": "0.110.6",
+    "@fusion.dev/helix-icons": "0.110.6",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.4",
-    "@fusion.dev/helix-testing": "0.110.4",
+    "@fusion.dev/helix-cem": "0.110.6",
+    "@fusion.dev/helix-testing": "0.110.6",
     "@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

@@ -24517,6 +24517,7 @@ export type CustomElements = {
    *
    * - `candidate`: While a connection is being drawn and this card is somewhere it could arrive.
    * - `current`: The card that receives focus when you tab into the board.
+   * - `placed`: Placed on the board.
    * - `selected`: The card is selected.
    * - `target`: A connection being drawn would end here if you released it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -24856,7 +24857,7 @@ export type CustomElements = {
    * - `empty`: While the document has no nodes.
    * - `fullscreen`: While the board fills the screen.
    * - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
-   * - `idle`: The user has been still long enough for the controls to hide.
+   * - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
    * - `pressing`: While a press on the board, its cards or its connections is under way.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -32754,6 +32755,7 @@ export type CustomElements = {
    * - `fanned`: Spread out from a location it shares with other markers, after their cluster was pressed.
    * - `icon`: Has content in the icon slot.
    * - `passed`: Marked as passed.
+   * - `placed`: Placed on the map by the connector.
    * - `start`: Shows its name before the point, because there was no room after it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -32908,6 +32910,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed`: Placed on the map by the connector.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-map-position": Partial<
@@ -44449,6 +44452,7 @@ export type CustomElementsSolidJs = {
    *
    * - `candidate`: While a connection is being drawn and this card is somewhere it could arrive.
    * - `current`: The card that receives focus when you tab into the board.
+   * - `placed`: Placed on the board.
    * - `selected`: The card is selected.
    * - `target`: A connection being drawn would end here if you released it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -44789,7 +44793,7 @@ export type CustomElementsSolidJs = {
    * - `empty`: While the document has no nodes.
    * - `fullscreen`: While the board fills the screen.
    * - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
-   * - `idle`: The user has been still long enough for the controls to hide.
+   * - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
    * - `pressing`: While a press on the board, its cards or its connections is under way.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -52799,6 +52803,7 @@ export type CustomElementsSolidJs = {
    * - `fanned`: Spread out from a location it shares with other markers, after their cluster was pressed.
    * - `icon`: Has content in the icon slot.
    * - `passed`: Marked as passed.
+   * - `placed`: Placed on the map by the connector.
    * - `start`: Shows its name before the point, because there was no room after it.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -52959,6 +52964,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed`: Placed on the map by the connector.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-map-position": Partial<