@aceshooting/lyra-ui 4.2.0 → 5.1.0

package/dist/components/graph/graph.class.js

@@ -1,2334 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing, svg } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { nextId, srOnly } from '../../internal/a11y.js';
-import { prefersReducedMotion } from '../../internal/motion.js';
-import { isRtl } from '../../internal/rtl.js';
-import { getScratchCtx } from '../../internal/canvas.js';
-import { styles } from './graph.styles.js';
-import { loadD3 } from './graph-loader.js';
-import { convexHull, hullPathD, hullCentroidX, hullTopY } from './graph-hull.js';
-import { drawGraphScene, drawPickingScene, pickColorToIndex } from './graph-canvas.js';
-import { layeredLayout } from '../../internal/layered-layout.js';
-import { finiteNumber, finiteRange, finiteInteger } from '../../internal/numbers.js';
-import '../skeleton/skeleton.class.js';
-const STUB_OFFSET_PX = 14; // matches the length of a typical broken-link stub in comparable UIs
-const EDGE_LABEL_OFFSET_PX = 4; // perpendicular offset from the segment midpoint, in world px
-const EDGE_LABEL_LENGTH_GATE_RATIO = 0.85; // label hides when its measured width exceeds this * edge length
-const EDGE_LABEL_WIDTH_CACHE_MAX = 512; // distinct measured label texts kept before the oldest entry is evicted
-const EXPAND_KEY_INTERVAL_MS = 500; // window for a double-Enter/Space to count as a double-activate
-const EXPAND_BADGE_R = 5; // world px, the "+" badge circle radius
-const EXPAND_BADGE_OFFSET = Math.SQRT1_2; // places the badge at the node's edge, diagonally upper-right
-const FOCUS_HALO_PADDING = 6; // world px added to the node's own radius for the halo ring
-const HULL_PADDING = 24; // world px; CSS mirrors this via stroke-width: 2 * --lr-size-24px
-const CANVAS_NODE_LABEL_MIN_ZOOM = 0.5; // canvas-only declutter -- node labels draw only at/above this scale
-/**
- * Tiny deterministic PRNG (mulberry32, public-domain) used only when `seed`
- * is set, so a node's initial x/y is reproducible instead of whatever
- * forceSimulation() would otherwise randomize it to. This is the whole
- * algorithm — not worth a dependency for.
- */
-function mulberry32(seed) {
-    let a = seed >>> 0;
-    return () => {
-        a = (a + 0x6d2b79f5) | 0;
-        let t = Math.imul(a ^ (a >>> 15), a | 1);
-        t = (t + Math.imul(t ^ (t >>> 7), t | 61)) ^ t;
-        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-}
-/**
- * Derives a per-node mulberry32 seed from the component's `seed` and the
- * node's **id** — hashing by id (a simple FNV-1a-style mix), not by the
- * node's index in `nodes`, is what keeps a seeded layout reproducible no
- * matter how a caller orders/reorders the `nodes` array between renders.
- */
-function hashNodeSeed(seed, id) {
-    let h = seed >>> 0;
-    for (let i = 0; i < id.length; i++) {
-        h = Math.imul(h ^ id.charCodeAt(i), 2654435761);
-        h ^= h >>> 15;
-    }
-    return h >>> 0;
-}
-const MIN_RADIUS = 6;
-const MAX_RADIUS = 24;
-/**
- * Rejects a `GraphNode.color` that could break out of the single
- * `--lr-node-fill` custom-property declaration it's assigned to — `;`,
- * `{`, and `}` are all a value needs to terminate that declaration and start
- * another. This matters even though the node fill is set via Lit's
- * `styleMap` directive (not raw string interpolation): `styleMap`'s first
- * commit for a given attribute part serializes the whole `style` value as a
- * single string (only later updates go through the safe
- * `CSSStyleDeclaration.setProperty()` path), so an unsanitized value could
- * still inject on that first render.
- */
-function sanitizeNodeColor(color) {
-    return color != null && !/[;{}]/.test(color) ? color : undefined;
-}
-function normalizeLinkDash(dash) {
-    if (!dash?.length || dash.some((value) => !Number.isFinite(value) || value < 0))
-        return undefined;
-    return dash.join(' ');
-}
-/** Assigns a typed node with no explicit color a slot from the ordered categorical fallback
- *  palette, cycling every 8 entries (`--lr-graph-cat-1`…`--lr-graph-cat-8`). `index` is the
- *  node's `GraphNodeType`'s position in `nodeTypes`, not the node's own index in `nodes`. */
-function categoricalPaletteColor(index) {
-    return `var(--lr-graph-cat-${(index % 8) + 1})`;
-}
-/** side = r * sqrt(pi), area-matched to a circle of radius r (side^2 = pi*r^2). Half-side is what
- *  the path data actually needs, since both shapes are drawn centered on the origin and
- *  positioned via a `transform="translate(x,y)"` per tick, never via absolute cx/cy. */
-function shapeHalfSide(r) {
-    return (r * Math.sqrt(Math.PI)) / 2;
-}
-/** A square, centered on the origin, side ~= 1.772 * r (area-matched to the circle of radius r). */
-function squarePath(r) {
-    const s = shapeHalfSide(r);
-    return `M ${-s} ${-s} L ${s} ${-s} L ${s} ${s} L ${-s} ${s} Z`;
-}
-/** The same square as `squarePath()`, rotated 45 degrees: same side length, vertices at the
- *  half-diagonal distance (s * sqrt(2)) along each axis instead of the square's own corners. */
-function diamondPath(r) {
-    const d = shapeHalfSide(r) * Math.SQRT2;
-    return `M 0 ${-d} L ${d} 0 L 0 ${d} L ${-d} 0 Z`;
-}
-/**
- * `<lr-graph>` — a force-directed node-link diagram with pan/zoom/drag.
- * Requires the optional peer deps `d3-force`/`d3-drag`/`d3-zoom`/`d3-selection`
- * (lazy-loaded; a consumer who never uses this component pays zero d3 cost).
- *
- * Set `seed` for a deterministic layout: node initial positions become
- * reproducible (keyed by node id) and the settle happens synchronously
- * instead of animating, like `prefers-reduced-motion`. `seed` only takes
- * effect on the update that first populates `nodes`/`links` (or a later
- * update that adds genuinely new node ids) — willUpdate() only reads it from
- * inside rebuildSimulation(), which itself only ever assigns x/y to nodes
- * that don't already have a settled position, so changing `seed` on an
- * already-rendered graph is a no-op; nothing re-derives already-positioned
- * nodes' x/y from the new value.
- *
- * `hiddenTypes` filters nodes/links by `GraphNode.type` without discarding position state --
- * `lastPositionById` remembers every node's last settled x/y across a hide/show round-trip, so
- * toggling a type off and back on restores each node where it was instead of re-randomizing it.
- *
- * `communities` draws one translucent convex-hull blob per entry, behind links/nodes -- a hull's
- * membership is the union of its own `memberIds` and every node whose `communityId` matches its
- * `id`. A community with no currently-visible members (all its nodes hidden by `hiddenTypes`, or
- * simply empty) renders no hull.
- *
- * `layout="layered"` swaps the d3-force simulation for a deterministic layered layout (see
- * `src/internal/layered-layout.ts`) -- node drag is disabled in that mode, and `chargeStrength` is
- * a documented no-op.
- *
- * `renderer="canvas"` swaps the per-node/per-link SVG DOM for a single DPR-aware `<canvas>` --
- * every event/method/property behaves identically to `renderer="svg"` (the default), with hit-
- * testing resolved via an offscreen color-picking canvas instead of DOM event targets. The
- * documented trade-offs: no `::part(node)`/`::part(link)` styling (pixels, not elements -- theme
- * via cssprops instead), no native SVG `<title>` tooltip (replaced by `part="tooltip"`), and a
- * drawn focus ring instead of a CSS one. Keyboard roving/announcements are preserved through an
- * offscreen `part="cursor-item"` button per node/link/hull, driving the identical roving-tabindex
- * logic as `renderer="svg"`.
- *
- * @customElement lr-graph
- * @event lr-node-click - `detail: { id, x, y }`, where `x` and `y` are the
- *   node's current coordinates in the graph's local drawing space.
- * @event lr-link-click - `detail: { source, target, id? }`.
- * @event lr-node-enter - A node was hovered. `detail: { id }`. Suppressed while dragging or
- *   panning. Also toggles a `data-hovered` attribute on that node's `[part="node"]` element for
- *   pure-CSS theming (not a substitute for this event — a consumer computing its own
- *   adjacency-based highlight needs the id, which only the event carries).
- * @event lr-node-leave - The hover from `lr-node-enter` ended. `detail: { id }`.
- * @event lr-link-enter - A link was hovered. `detail: { source, target, id? }`. Same
- *   suppression/`data-hovered` behavior as `lr-node-enter`.
- * @event lr-link-leave - The hover from `lr-link-enter` ended. `detail: { source, target, id?
- *   }`.
- * @event lr-node-expand - A node was double-activated (native `dblclick`, or two Enter/Space
- *   activations of the same focused node within 500ms). `detail: { id }`. Fires for any node
- *   regardless of `GraphNode.expandable` -- that flag only controls the visual "+" affordance and
- *   spoken "expandable" suffix.
- * @event lr-selection-change - `detail: { nodeIds, linkIds }`. Fires when `selectionMode` is not
- *   `'none'` and the user activates/clears a node or link. The component never assigns
- *   `selectedNodeIds`/`selectedLinkIds` itself -- controlled, mirroring `lr-heatmap.selectedCell`.
- * @event lr-community-click - A hull was activated. `detail: { id }`.
- * @csspart base - The graph wrapper.
- * @csspart svg - The graph SVG.
- * @csspart node - A graph node.
- * @csspart link - A graph link.
- * @csspart arrowhead - The marker used by directed graph links.
- * @csspart label - A node label.
- * @csspart link-label - A drawn edge label (only rendered when `showEdgeLabels` is set).
- * @csspart expand-indicator - The "+" badge rendered on a node with `expandable: true`.
- * @csspart focus-halo - The persistent ring tracking `focusId`'s node.
- * @csspart hull - A community hull (behind links/nodes; role="button").
- * @csspart community-label - A hull's label text.
- * @csspart live-region - The current graph item announcement.
- * @csspart data-list - A visually hidden list alternative for graph data.
- * @csspart empty - The empty-state message, shown when `nodes` is empty.
- * @csspart canvas - The single canvas surface (`renderer="canvas"` only).
- * @csspart tooltip - The hover tooltip (`renderer="canvas"` only; the SVG `<title>` replacement).
- * @csspart cursor-items - The container of offscreen keyboard-roving items (`renderer="canvas"` only).
- * @csspart cursor-item - An offscreen keyboard-roving item (`renderer="canvas"`'s a11y virtual cursor).
- * @cssprop [--lr-node-fill=var(--lr-color-brand)] - Default node fill, overridden per-node by `GraphNode.color`.
- * @cssprop [--lr-link-color=var(--lr-color-border)] - Default link stroke, overridden per-link by a link's own `color`.
- * @cssprop [--lr-graph-cat-1..8] - Ordered categorical fallback palette for a typed node with no
- *   `GraphNodeType.color`, assigned by the type's index in `nodeTypes` (wraps every 8 entries).
- *   Declared centrally in `tokens.styles.ts` so `<lr-graph>` and any future `<lr-graph-legend>`-
- *   style component resolve the identical default.
- * @cssprop [--lr-graph-edge-label-halo=var(--lr-color-surface)] - Legibility halo (`stroke`)
- *   behind a drawn edge label, painted under the fill via `paint-order: stroke`.
- * @cssprop [--lr-graph-focus-halo-color=var(--lr-color-brand)] - `focus-halo` stroke color.
- * @cssprop [--lr-graph-selected-color=var(--lr-color-success)] - Selected node/link stroke.
- * @cssprop [--lr-graph-dimmed-opacity=1] - Opacity applied to a node/link when
- *   `dimmedNodeIds`/`dimmedLinkIds` includes its id (both SVG and canvas renderers). `1` (the
- *   default) is a no-op -- an unset host sees no visual change.
- * @cssprop [--lr-graph-hull-fill=var(--lr-color-brand)] - Hull fill/stroke color.
- * @cssprop [--lr-graph-hull-opacity=0.12] - Hull element opacity (composites fill+stroke as one
- *   group, avoiding a double-opacity seam at the fill/stroke boundary).
- */
-export class LyraGraph extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.nodes = [];
-        this.links = [];
-        /** Declares each `GraphNode.type` value's legend label, fill color, and shape. A typed node with
-         *  no matching entry here renders as untyped (default circle, token fill) but still participates
-         *  in `hiddenTypes` filtering by its raw `type` string. */
-        this.nodeTypes = [];
-        /** Hides every node whose raw `type` value is listed here (no matching `nodeTypes` entry
-         *  required), plus every link incident to a hidden node -- removed from the render, the
-         *  simulation input, the keyboard roving ring, the sr-only data list, and the accessible
-         *  diagram counts, as if absent. Positions round-trip via `lastPositionById`: toggling a type
-         *  off and back on restores each node where it was. */
-        this.hiddenTypes = [];
-        /** Renders one translucent hull per entry, behind links/nodes. Membership is the union of
-         *  `memberIds` and every node whose `communityId` matches this entry's `id`. */
-        this.communities = [];
-        /** `'force'` (default) runs the existing d3-force simulation, untouched. `'layered'` computes a
-         *  deterministic Sugiyama-lite layout (`src/internal/layered-layout.ts`, a shared,
-         *  dependency-free util suitable for any future layered-diagram consumer) instead -- no settle
-         *  animation, node drag disabled (dragging would fight a computed layout), `chargeStrength` a
-         *  documented no-op, `linkDistance` retunes the layer gap. Switching at runtime repositions
-         *  without a tween. */
-        this.layout = 'force';
-        /** `'svg'` (default, unchanged) renders the existing per-node/per-link DOM. `'canvas'` swaps to
-         *  a single `<canvas part="canvas">` -- the scale path (an honest ceiling for `'svg'`: dozens to
-         *  low hundreds of nodes; `'canvas'` targets roughly 5,000 nodes / 10,000 links). Feature-reduced
-         *  by design: no `::part(node)`/`::part(link)` styling (pixels, not elements -- theme via
-         *  cssprops), no SVG `<title>`, a drawn focus ring instead of a CSS one. All events/methods/
-         *  props otherwise behave identically across renderers. Runtime changes tear down and rebuild
-         *  the surface; positions survive via `prevById`/`lastPositionById`. */
-        this.renderer = 'svg';
-        this.width = 800;
-        this.height = 600;
-        this.chargeStrength = -300;
-        this.linkDistance = 100;
-        this.minZoom = 0.1;
-        this.maxZoom = 8;
-        /** Accessible name forwarded from the host to the semantic graph SVG. */
-        this.accessibleLabel = null;
-        /** Draws each resolved (non-dangling) link's `label` as visible SVG text at the segment
-         *  midpoint. Off by default — `GraphLink.label` stays spoken/tooltip-only, matching today's
-         *  behavior, unless this is set. */
-        this.showEdgeLabels = false;
-        /** Below this zoom scale, every drawn edge label is hidden (a `data-edge-labels-hidden`
-         *  attribute toggled on the zoomed `<g>`, no Lit re-render). Ignored when `showEdgeLabels` is
-         *  false. */
-        this.edgeLabelMinZoom = 0.6;
-        /** Declaratively centers the camera on this node id once, the first time it resolves (on mount
-         *  or when the id first appears in `nodes`) -- does not re-center on later mutations, so it
-         *  can't fight a user's panning on a streaming graph. Renders a persistent halo
-         *  (`part="focus-halo"`) around the node while set. See `focusNode()` for the imperative twin. */
-        this.focusId = null;
-        /** `'none'` (default) preserves today's behavior exactly -- no `aria-pressed`/`data-selected`,
-         *  no `lr-selection-change`. Controlled, mirroring `lr-heatmap.selectedCell`: the component
-         *  never mutates `selectedNodeIds`/`selectedLinkIds` itself, only emits intent; the host assigns
-         *  them back. */
-        this.selectionMode = 'none';
-        this.selectedNodeIds = [];
-        this.selectedLinkIds = [];
-        /** Node ids to render dimmed (`data-dimmed` on the matching `[part="node"]`, themeable via
-         *  `--lr-graph-dimmed-opacity`). Controlled, mirroring `selectedNodeIds`/`selectedLinkIds`: the
-         *  component never assigns this itself, only renders it -- a host typically computes it from a
-         *  `lr-node-enter`/`lr-link-enter` hover (the complement of the hovered id's neighbor set,
-         *  computed from the host's own `links` array) and assigns the result back. Empty (the default)
-         *  renders every node at full opacity, unchanged from today. */
-        this.dimmedNodeIds = [];
-        /** Same contract as `dimmedNodeIds`, for links. A link's dimming key is the same `linkKey()`
-         *  value (`GraphLink.id`, else `` `${source}->${target}` ``) `selectedLinkIds` already uses. */
-        this.dimmedLinkIds = [];
-        this.arrowMarkerId = nextId('graph-arrow');
-        /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
-        this.loading = true;
-        this.simNodes = [];
-        this.simLinks = [];
-        this.danglingLinks = [];
-        /** Every node's last-known settled position, keyed by id, independent of current visibility --
-         *  consulted by `rebuildSimulation()` (after the existing carried-over-position map) so a
-         *  `hiddenTypes` toggle restores a node where it was instead of re-randomizing it. Pruned to ids
-         *  present in `this.nodes` (not just currently-visible ones) on every rebuild. */
-        this.lastPositionById = new Map();
-        /** The `hiddenNodeCount` computed by the most recent `rebuildSimulation()` -- lets that method
-         *  tell "nothing has ever been hidden" (never touch `graphLiveText`, so a consumer that never
-         *  sets `hiddenTypes` keeps today's exact live-region output) apart from "a hide was just
-         *  cleared" (still announce the resulting "0 of N" count). */
-        this.lastHiddenNodeCount = 0;
-        /** One roving tab stop across all nodes and links; nodes are the initial entry order. */
-        this.activeGraphItem = 0;
-        this.graphLiveText = '';
-        /** Node `<circle>`s already wired up with d3-drag; cleared on every simulation rebuild
-         *  so DOM elements Lit reuses across a rebuild get rebound to their fresh datum. */
-        this.boundNodeEls = new WeakSet();
-        /** Node/link/label DOM elements, index-aligned with simNodes/simLinks, cached
-         *  once per structural rebuild and written to directly by onTick() — this is
-         *  what lets ticks update positions without going through Lit's reactive
-         *  simNodes/simLinks properties (see rebuildSimulation()'s doc comment). */
-        this.nodeEls = [];
-        this.nodeLabelEls = [];
-        this.expandIndicatorEls = [];
-        /** Tracks the index/time of the last Enter/Space activation, for double-Enter expand detection
-         *  (mirroring native dblclick semantics for keyboard users). */
-        this.lastKeyActivateIndex = null;
-        this.lastKeyActivateTime = 0;
-        /** The last `focusId` value `focusNode()` was auto-invoked for by `updated()`'s declarative
-         *  centering branch -- guards against re-centering on every update while `focusId` stays set
-         *  (see the `focusId` property doc for why it only ever centers once per value). Reset to `null`
-         *  whenever `focusId` itself is cleared, so the same id can center again later. */
-        this.lastAppliedFocusId = null;
-        this.communityHullEls = [];
-        this.communityLabelEls = [];
-        this.pickDirty = true;
-        this.canvasCamera = { k: 1, x: 0, y: 0 };
-        /** Flat, index-aligned list matching `drawPickingScene()`'s own hulls-then-links-then-nodes pick
-         *  order -- rebuilt by `redrawPickCanvas()` alongside the pick canvas itself, so a pick color's
-         *  decoded index always maps back to the exact item it was drawn for. */
-        this.pickItems = [];
-        /** Whether `canvasScene` was built with edge labels included -- the zoom gate makes the scene
-         *  camera-dependent at exactly two thresholds (`edgeLabelMinZoom`, `CANVAS_NODE_LABEL_MIN_ZOOM`),
-         *  so a camera-only draw that crosses either must rebuild instead of reusing the cache. */
-        this.canvasSceneHasEdgeLabels = false;
-        /** True for a camera tween's whole duration (set before its first frame, cleared on
-         *  resolution) -- `isPanning` alone doesn't cover this: `applyZoomTransform()`'s per-frame
-         *  `zoomBehavior.transform()` call on a non-transition selection fires d3-zoom's
-         *  start/zoom/end synchronously within that single call, so `isPanning` flips true-then-false
-         *  within one frame rather than staying true for the tween's real duration the way an actual
-         *  user gesture does. */
-        this.isCameraTweening = false;
-        this.linkEls = [];
-        this.linkLabelEls = [];
-        /** Per-simLink-index flip cache for the length declutter gate -- `onTick()` only writes
-         *  `visibility` when the boolean actually changes, not every tick. */
-        this.linkLabelHiddenByLength = [];
-        this.edgeLabelWidthCache = new Map();
-        /** Dangling-stub `<line>`s, index-aligned with `danglingLinks` -- cached separately from
-         *  `linkEls` (real, simulated links only) so onTick() can write their positions too; see
-         *  onTick()'s own comment for why a stub needs this at all. */
-        this.danglingLinkEls = [];
-        /** Writing a transform on a plain (non-transition) selection makes d3-zoom fire its own
-         *  start/zoom/end sequence synchronously, in this same call -- `isApplyingZoomTransform` lets
-         *  the zoom `'start'` handler tell that self-triggered echo apart from a genuine external
-         *  gesture, so a camera tween's own per-frame write doesn't cancel itself. */
-        this.isApplyingZoomTransform = false;
-        this.onCanvasDprChange = () => {
-            this.watchCanvasDpr();
-            this.markCanvasDirty();
-        };
-        this.onCanvasPointerDown = (e) => {
-            if (e.button !== 0)
-                return; // primary button only, matching native `click`'s own semantics
-            this.canvasPointerDownAt = { x: e.clientX, y: e.clientY };
-            if (this.layout === 'layered')
-                return; // drag disabled in layered mode, same as svg mode
-            const hit = this.hitTest(e.clientX, e.clientY);
-            if (hit?.kind === 'node') {
-                this.canvasDragNode = hit.node;
-                this.canvasPointerId = e.pointerId;
-                this.canvasEl.setPointerCapture(e.pointerId);
-                hit.node.fx = hit.node.x;
-                hit.node.fy = hit.node.y;
-                this.simulation?.alphaTarget(0.3).restart();
-            }
-        };
-        this.onCanvasPointerMove = (e) => {
-            if (this.canvasDragNode && this.canvasPointerId === e.pointerId) {
-                const rect = this.canvasEl.getBoundingClientRect();
-                this.canvasDragNode.fx = (e.clientX - rect.left - this.canvasCamera.x) / this.canvasCamera.k;
-                this.canvasDragNode.fy = (e.clientY - rect.top - this.canvasCamera.y) / this.canvasCamera.k;
-                this.markCanvasDirty();
-                return;
-            }
-            // Coalesce hover hit-testing to one per animation frame (see pendingHover's doc) -- only the
-            // latest position matters, and running the readback-per-pointermove would multiply the cost
-            // by however many moves the browser delivers between paints.
-            this.pendingHover = { x: e.clientX, y: e.clientY };
-            if (this.hoverRafId != null)
-                return;
-            this.hoverRafId = requestAnimationFrame(() => {
-                this.hoverRafId = undefined;
-                const pending = this.pendingHover;
-                this.pendingHover = undefined;
-                if (!pending)
-                    return;
-                // While the force simulation is still ticking, every tick invalidates the pick canvas, so
-                // resolving hover here would re-render the full offscreen picking scene once per frame on
-                // top of the per-tick visible redraw -- and the result would be stale a frame later anyway,
-                // since positions are still moving. Defer hover resolution until the layout settles; the
-                // next pointermove after that picks it up.
-                if (this.pickDirty && this.simulationIsTicking())
-                    return;
-                const hit = this.hitTest(pending.x, pending.y);
-                this.updateCanvasTooltip(hit, pending.x, pending.y);
-            });
-        };
-        this.onCanvasPointerUp = (e) => {
-            // Starting a drag on a node (onCanvasPointerDown) and ending it here without ever crossing the
-            // move-distance threshold below is exactly a plain click -- release the drag state first, but
-            // keep going into the same click-vs-drag distance check every pointerup goes through, instead
-            // of returning early and silently swallowing the click. This mirrors svg mode, where a plain
-            // click on a node fires both d3-drag's own start/end (a no-op, since fx/fy never actually
-            // moved) and the browser's native `click` event -- the two aren't mutually exclusive there
-            // either.
-            if (this.canvasDragNode && this.canvasPointerId === e.pointerId) {
-                this.simulation?.alphaTarget(0);
-                this.canvasDragNode.fx = null;
-                this.canvasDragNode.fy = null;
-                this.canvasDragNode = undefined;
-                this.canvasPointerId = undefined;
-                this.markCanvasDirty();
-            }
-            const down = this.canvasPointerDownAt;
-            this.canvasPointerDownAt = undefined;
-            if (!down)
-                return;
-            if (Math.hypot(e.clientX - down.x, e.clientY - down.y) > 5)
-                return; // a pan/drag gesture, not a click
-            const hit = this.hitTest(e.clientX, e.clientY);
-            if (!hit) {
-                this.clearSelection();
-                return;
-            }
-            if (hit.kind === 'node')
-                this.onNodeClick(hit.node, e);
-            else if (hit.kind === 'link')
-                this.onLinkClick(hit.link, e);
-            else
-                this.onCommunityClick(hit.entry.community);
-        };
-        this.onCanvasPointerLeave = () => {
-            // Drop any coalesced hover still waiting on its frame -- letting it run after the pointer
-            // already left would re-show the tooltip this handler is about to hide.
-            this.pendingHover = undefined;
-            if (this.hoverRafId != null) {
-                cancelAnimationFrame(this.hoverRafId);
-                this.hoverRafId = undefined;
-            }
-            this.updateCanvasTooltip(undefined, 0, 0);
-        };
-        this.onCanvasDblClick = (e) => {
-            const hit = this.hitTest(e.clientX, e.clientY);
-            const node = hit?.kind === 'node' ? hit.node : this.nodeAtCanvasPoint(e.clientX, e.clientY);
-            if (!node)
-                return; // background dblclick still reaches d3-zoom's own zoom-in, same as svg mode
-            // d3-zoom's own default double-click-to-zoom-in handler is bound to this identical <canvas>
-            // element (not an ancestor, so plain stopPropagation() -- which only blocks *bubbling*, not a
-            // sibling listener on the very same target -- would not suppress it). Matches svg mode's own
-            // onNodeDblClick(), which stops the equivalent bubble-phase echo on the svg one level up.
-            e.stopImmediatePropagation();
-            this.emit('lr-node-expand', { id: node.id });
-        };
-        /** Suppresses hover events/`data-hovered` while a node drag is in progress (tracked from the
-         *  existing d3-drag `.on('start')`/`.on('end')` handlers in `applyInteractions()`) — a drag
-         *  crossing over other nodes/links would otherwise spam enter/leave pairs unrelated to genuine
-         *  pointer hovering. */
-        this.isDragging = false;
-        /** Same purpose as `isDragging`, for d3-zoom pan/zoom gestures (tracked from `applyInteractions()`'s
-         *  zoom `.on('start')`/`.on('end')` handlers, added by this same change). */
-        this.isPanning = false;
-    }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    connectedCallback() {
-        super.connectedCallback();
-        // A reconnect (e.g. a drag-and-drop reparent that keeps this same
-        // element instance) fires disconnectedCallback then connectedCallback
-        // synchronously with no update in between — this.d3 is already set from
-        // the initial mount, and the live simulation/DOM are still intact
-        // (disconnectedCallback only stops the simulation's timer, it doesn't
-        // tear anything down). Redoing the lazy-load + rebuildSimulation() here
-        // would discard every already-settled node's position and restart the
-        // whole ~300-tick alpha=1 settle animation for no reason — just resume
-        // the existing simulation in place instead.
-        if (this.d3) {
-            this.simulation?.restart();
-            // renderer="canvas" mode's own resize/DPR watchers are torn down by disconnectedCallback()
-            // below on every disconnect (including this reconnect) -- the <canvas> element itself
-            // survived the reparent along with the rest of this shadow tree (canvasEl === zoomedEl still
-            // holds), so re-arm them in place instead of waiting for a property-driven update that a bare
-            // reparent never triggers.
-            if (this.renderer === 'canvas' && this.canvasEl && this.canvasEl === this.zoomedEl) {
-                this.watchCanvasResize();
-                this.watchCanvasDpr();
-                this.markCanvasDirty();
-            }
-            return;
-        }
-        void loadD3().then((mods) => {
-            this.loading = false;
-            // The element may have been removed from the DOM while the dynamic
-            // d3 imports were in flight — don't spin up a simulation for a
-            // detached instance (disconnectedCallback's cleanup already ran).
-            if (!mods || !this.isConnected)
-                return;
-            this.d3 = mods;
-            this.rebuildSimulation();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.simulation?.stop();
-        // An in-flight focusNode()/fit() tween would otherwise keep scheduling frames and writing
-        // zoom transforms against the detached tree -- cancel it (which also settles the caller's
-        // pending Promise with `false` instead of leaving it hanging forever).
-        this.cancelCameraTween();
-        this.canvasResizeObserver?.disconnect();
-        this.canvasDprQuery?.removeEventListener('change', this.onCanvasDprChange);
-        if (this.canvasDrawRafId != null) {
-            cancelAnimationFrame(this.canvasDrawRafId);
-            this.canvasDrawRafId = undefined;
-        }
-        if (this.hoverRafId != null) {
-            cancelAnimationFrame(this.hoverRafId);
-            this.hoverRafId = undefined;
-        }
-        this.pendingHover = undefined;
-    }
-    /**
-     * A caller-supplied `radius` is clamped to [MIN_RADIUS, MAX_RADIUS] (and a
-     * non-finite/NaN value falls back to the same default average as an unset
-     * one) — an unclamped 0/negative radius would render an invisibly small
-     * `<circle>` that's still `role="button" tabindex="0"`, an invisible,
-     * focusable/clickable control with no visible focus indicator.
-     */
-    nodeRadius(n) {
-        const r = n.radius ?? (MIN_RADIUS + MAX_RADIUS) / 2;
-        return Number.isFinite(r) ? Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, r)) : (MIN_RADIUS + MAX_RADIUS) / 2;
-    }
-    /** `width`/`height` normalized to a finite, positive viewport size — an invalid attribute value
-     *  would otherwise flow straight into `forceCenter`, the SVG `viewBox`, and the canvas backing
-     *  store's `width`/`height`, producing `NaN` geometry/transforms that silently render nothing
-     *  instead of erroring. */
-    get safeWidth() {
-        return finiteRange(this.width, 800, 1);
-    }
-    get safeHeight() {
-        return finiteRange(this.height, 600, 1);
-    }
-    /** `minZoom`/`maxZoom` normalized to finite, positive scale bounds before ever reaching
-     *  d3-zoom's `scaleExtent()` or a camera-clamp `Math.min`/`Math.max` — a non-finite bound would
-     *  otherwise poison every subsequent zoom/pan computation with `NaN`. */
-    get safeMinZoom() {
-        return finiteRange(this.minZoom, 0.1, 0.001, 1000);
-    }
-    get safeMaxZoom() {
-        return finiteRange(this.maxZoom, 8, 0.001, 1000);
-    }
-    /** `edgeLabelMinZoom` is compared directly against the live camera scale (same domain as
-     *  `minZoom`/`maxZoom`), so it's normalized with the same bounds -- a non-finite value would
-     *  otherwise make every `>=`/`<` comparison against it silently `false`/`true` forever. */
-    get safeEdgeLabelMinZoom() {
-        return finiteRange(this.edgeLabelMinZoom, 0.6, 0.001, 1000);
-    }
-    /** `seed`, normalized to a finite integer when set -- `undefined` (unseeded/random) is left
-     *  untouched, since it's a meaningful third state, not a missing number. Without this,
-     *  `hashNodeSeed`/`mulberry32`'s `>>> 0` coercion would silently fold `NaN`/`Infinity` to `0`
-     *  instead of normalizing an out-of-range attribute value the way every other numeric prop here
-     *  does. */
-    get safeSeed() {
-        return this.seed == null ? undefined : finiteInteger(this.seed, 0);
-    }
-    /** `chargeStrength` is a signed d3-force strength (negative = repulsion, positive = attraction)
-     *  — only guarded for finiteness, not clamped to a range, since either sign is a legitimate
-     *  value. */
-    get safeChargeStrength() {
-        return finiteNumber(this.chargeStrength, -300);
-    }
-    /** `linkDistance` normalized to a finite, non-negative pixel distance — feeds `forceLink()`'s
-     *  `distance()`, the layered layout's `gapY`, and the neighbor-jitter spawn radius, none of
-     *  which have a sane meaning for a negative/non-finite value. */
-    get safeLinkDistance() {
-        return finiteRange(this.linkDistance, 100, 0);
-    }
-    resolveNodeType(node) {
-        return node.type != null ? this.nodeTypes.find((t) => t.id === node.type) : undefined;
-    }
-    nodeShape(node) {
-        return this.resolveNodeType(node)?.shape ?? 'circle';
-    }
-    /** Resolution precedence: `node.color` (existing, most specific) > matched `GraphNodeType.color`
-     *  > the ordered categorical fallback palette by the type's index in `nodeTypes` > (returns
-     *  `undefined`, letting the untyped `--lr-node-fill` token default apply). Both data-driven
-     *  color sources pass the existing `sanitizeNodeColor()`. */
-    nodeFill(node) {
-        const ownColor = sanitizeNodeColor(node.color);
-        if (ownColor)
-            return ownColor;
-        const type = this.resolveNodeType(node);
-        if (!type)
-            return undefined;
-        const typeColor = sanitizeNodeColor(type.color);
-        if (typeColor)
-            return typeColor;
-        return categoricalPaletteColor(this.nodeTypes.indexOf(type));
-    }
-    /** `this.nodes` filtered down to the ids `hiddenTypes` doesn't hide -- an untyped node (`type ==
-     *  null`) is never hidden, regardless of `hiddenTypes`' contents. */
-    visibleNodes() {
-        if (!this.hiddenTypes.length)
-            return this.nodes;
-        const hidden = new Set(this.hiddenTypes);
-        return this.nodes.filter((n) => n.type == null || !hidden.has(n.type));
-    }
-    /** Resolves `this.links` against an already-built `byId` node map: a link whose source isn't in
-     *  `byId` is dropped (hidden source, or a genuinely missing one); a link whose target isn't in
-     *  `byId` either stubs as a dangling link (target id doesn't exist in `this.nodes` at all) or is
-     *  dropped (target exists but is hidden by `hiddenTypes`). Shared by both the force and layered
-     *  layout paths in `rebuildSimulation()`. */
-    resolveLinksAgainst(byId) {
-        const nodeExists = new Set(this.nodes.map((n) => n.id));
-        const resolved = [];
-        const dangling = [];
-        for (const l of this.links) {
-            const source = byId.get(l.source);
-            if (!source)
-                continue;
-            const target = byId.get(l.target);
-            if (target) {
-                resolved.push({ ...l, source, target });
-            }
-            else if (!nodeExists.has(l.target)) {
-                dangling.push({ ...l, source, target: { id: l.target, x: source.x, y: source.y }, dangling: true });
-            }
-        }
-        return { resolved, dangling };
-    }
-    /** A community's currently-visible members -- the union of `memberIds` and every currently
-     *  simulated node (already filtered by `hiddenTypes`) whose `communityId` matches. */
-    communityMembers(community) {
-        const idSet = new Set(community.memberIds);
-        return this.simNodes.filter((n) => idSet.has(n.id) || n.communityId === community.id);
-    }
-    /** `communities` narrowed to entries with at least one currently-visible member -- a community
-     *  whose members are all hidden by `hiddenTypes` (or that starts out empty) draws no hull and
-     *  doesn't occupy a roving-ring slot. */
-    visibleCommunities() {
-        if (!this.visibleCommunitiesCache) {
-            this.visibleCommunitiesCache = this.communities
-                .map((community) => ({ community, members: this.communityMembers(community) }))
-                .filter((entry) => entry.members.length > 0);
-        }
-        return this.visibleCommunitiesCache;
-    }
-    communityHull(members) {
-        return convexHull(members.map((n) => ({ x: n.x ?? 0, y: n.y ?? 0 })));
-    }
-    onCommunityClick(community) {
-        this.emit('lr-community-click', { id: community.id });
-    }
-    cameraTransitionMs() {
-        const parsed = parseFloat(getComputedStyle(this).getPropertyValue('--lr-transition-base'));
-        return Number.isFinite(parsed) ? parsed : 180;
-    }
-    cancelCameraTween() {
-        if (this.cameraTweenId != null) {
-            cancelAnimationFrame(this.cameraTweenId);
-            this.cameraTweenId = undefined;
-        }
-        this.isCameraTweening = false;
-        const resolve = this.cameraTweenResolve;
-        if (resolve) {
-            this.cameraTweenResolve = undefined;
-            resolve(false);
-        }
-    }
-    applyZoomTransform(transform) {
-        if (!this.d3 || !this.zoomedEl || !this.zoomBehavior)
-            return;
-        this.isApplyingZoomTransform = true;
-        try {
-            this.zoomBehavior.transform(this.d3.select(this.zoomedEl), transform);
-        }
-        finally {
-            this.isApplyingZoomTransform = false;
-        }
-    }
-    /** Animates from the zoom behavior's current transform toward `computeTarget()`'s result via a
-     *  rAF tween that calls `zoomBehavior.transform()` every frame -- keeps d3-zoom's own internal
-     *  state consistent (so the next user pan doesn't jump), unlike writing the `<g>` transform
-     *  attribute directly. `computeTarget` is re-invoked on every single frame (not read once
-     *  up-front) so the tween keeps tracking a still-settling force simulation's live node positions
-     *  instead of tweening toward a stale snapshot from the moment the call was made --
-     *  `focusNode()`/`fit()` are just as likely to run while the graph is still animating its initial
-     *  layout as after it's settled. `prefers-reduced-motion` jumps straight to one write of the
-     *  then-current target. A concurrent call cancels the previous tween -- resolves `true` on
-     *  genuine arrival, `false` if superseded or interrupted by a user gesture before completing. */
-    tweenCamera(computeTarget) {
-        return new Promise((resolve) => {
-            if (!this.d3 || !this.zoomedEl || !this.zoomBehavior) {
-                resolve(false);
-                return;
-            }
-            this.cancelCameraTween();
-            this.cameraTweenResolve = resolve;
-            this.isCameraTweening = true;
-            if (prefersReducedMotion()) {
-                this.applyZoomTransform(computeTarget());
-                this.isCameraTweening = false;
-                this.cameraTweenResolve = undefined;
-                resolve(true);
-                return;
-            }
-            const current = this.d3.zoomTransform(this.zoomedEl);
-            const duration = this.cameraTransitionMs();
-            const start = performance.now();
-            const startK = current.k;
-            const startX = current.x;
-            const startY = current.y;
-            const step = (now) => {
-                const t = duration > 0 ? Math.min(1, (now - start) / duration) : 1;
-                const target = computeTarget();
-                const targetK = target.k;
-                const targetX = target.x;
-                const targetY = target.y;
-                this.applyZoomTransform(this.d3.zoomIdentity
-                    .translate(startX + (targetX - startX) * t, startY + (targetY - startY) * t)
-                    .scale(startK + (targetK - startK) * t));
-                if (t < 1) {
-                    this.cameraTweenId = requestAnimationFrame(step);
-                }
-                else {
-                    this.cameraTweenId = undefined;
-                    this.isCameraTweening = false;
-                    this.cameraTweenResolve = undefined;
-                    resolve(true);
-                }
-            };
-            this.cameraTweenId = requestAnimationFrame(step);
-        });
-    }
-    /** Animates the camera so `id` centers in the viewport (the `width` x `height` viewBox), at
-     *  `options.zoom` (clamped to `[minZoom, maxZoom]`) or the current scale when omitted. Resolves
-     *  `true` on arrival; `false` for an id with no matching entry in `simNodes` -- there's nothing
-     *  to center on. Announces `graphNodeFocused` through the existing live region. Does not move DOM
-     *  focus -- this is a camera operation, not a roving-focus one. */
-    async focusNode(id, options) {
-        const node = this.simNodes.find((n) => n.id === id);
-        if (!node || !this.d3 || !this.zoomedEl || !this.zoomBehavior)
-            return false;
-        const current = this.d3.zoomTransform(this.zoomedEl);
-        const k = Math.min(this.safeMaxZoom, Math.max(this.safeMinZoom, options?.zoom ?? current.k));
-        const arrived = await this.tweenCamera(() => this.d3.zoomIdentity
-            .translate(this.safeWidth / 2 - k * (node.x ?? 0), this.safeHeight / 2 - k * (node.y ?? 0))
-            .scale(k));
-        if (arrived) {
-            this.graphLiveText = this.localize('graphNodeFocused', undefined, { label: this.nodeAccessibleText(node) });
-        }
-        return arrived;
-    }
-    /** Animates the camera to frame the bounding box of every currently visible node position (plus
-     *  each node's own radius) at the largest scale that fits within `width` x `height` minus
-     *  `padding` viewport-px on each side (clamped to `[minZoom, maxZoom]`). Silent -- no data
-     *  changed, so no announcement. A no-op with no visible nodes. */
-    fit(options) {
-        if (!this.d3 || !this.zoomedEl || !this.zoomBehavior || !this.simNodes.length)
-            return;
-        const padding = options?.padding ?? 24;
-        void this.tweenCamera(() => {
-            let minX = Infinity;
-            let minY = Infinity;
-            let maxX = -Infinity;
-            let maxY = -Infinity;
-            for (const n of this.simNodes) {
-                const r = this.nodeRadius(n);
-                minX = Math.min(minX, (n.x ?? 0) - r);
-                maxX = Math.max(maxX, (n.x ?? 0) + r);
-                minY = Math.min(minY, (n.y ?? 0) - r);
-                maxY = Math.max(maxY, (n.y ?? 0) + r);
-            }
-            for (const entry of this.visibleCommunities()) {
-                for (const p of this.communityHull(entry.members)) {
-                    minX = Math.min(minX, p.x - HULL_PADDING);
-                    maxX = Math.max(maxX, p.x + HULL_PADDING);
-                    minY = Math.min(minY, p.y - HULL_PADDING);
-                    maxY = Math.max(maxY, p.y + HULL_PADDING);
-                }
-            }
-            const boxW = Math.max(1, maxX - minX);
-            const boxH = Math.max(1, maxY - minY);
-            const availW = Math.max(1, this.safeWidth - padding * 2);
-            const availH = Math.max(1, this.safeHeight - padding * 2);
-            const k = Math.min(this.safeMaxZoom, Math.max(this.safeMinZoom, Math.min(availW / boxW, availH / boxH)));
-            const cx = (minX + maxX) / 2;
-            const cy = (minY + maxY) / 2;
-            return this.d3.zoomIdentity.translate(this.safeWidth / 2 - k * cx, this.safeHeight / 2 - k * cy).scale(k);
-        });
-    }
-    updateFocusHalo() {
-        if (!this.focusHaloEl)
-            return;
-        const node = this.focusId != null ? this.simNodes.find((n) => n.id === this.focusId) : undefined;
-        if (node) {
-            this.focusHaloEl.setAttribute('cx', String(node.x ?? 0));
-            this.focusHaloEl.setAttribute('cy', String(node.y ?? 0));
-            this.focusHaloEl.setAttribute('r', String(this.nodeRadius(node) + FOCUS_HALO_PADDING));
-            this.focusHaloEl.removeAttribute('hidden');
-        }
-        else {
-            this.focusHaloEl.setAttribute('hidden', '');
-        }
-    }
-    // ---------------------------------------------------------------------------------------------
-    // renderer="canvas": surface setup, DPR/resize watching, scene building, and the static draw.
-    // ---------------------------------------------------------------------------------------------
-    setUpCanvasSurface() {
-        this.canvasCtx = this.canvasEl.getContext('2d') ?? undefined;
-        this.pickCanvas = document.createElement('canvas');
-        this.pickCtx = this.pickCanvas.getContext('2d', { willReadFrequently: true });
-        this.watchCanvasResize();
-        this.watchCanvasDpr();
-        this.canvasTooltipEl = this.renderRoot.querySelector('[part="tooltip"]') ?? undefined;
-        // bindCanvasPointer() (which owns onCanvasDblClick) is bound BEFORE bindCanvasZoom() -- both
-        // end up with a 'dblclick' listener on this same <canvas>, and d3-zoom's own default
-        // double-click-to-zoom-in handler calls stopImmediatePropagation() unconditionally (see
-        // onCanvasDblClick()'s own comment). Registering first means onCanvasDblClick() runs first and
-        // gets the chance to itself stop the event (only when it actually hit a node) before d3-zoom's
-        // handler would otherwise suppress it from ever being observed at all.
-        this.bindCanvasPointer();
-        this.bindCanvasZoom();
-    }
-    watchCanvasResize() {
-        // Re-arming replaces the observer instance -- disconnect the previous one first, or a
-        // canvas -> svg -> canvas renderer round trip leaves an orphaned observer still watching the
-        // host (disconnectedCallback only ever cleans up whichever instance is current).
-        this.canvasResizeObserver?.disconnect();
-        this.canvasResizeObserver = new ResizeObserver(() => this.markCanvasDirty());
-        this.canvasResizeObserver.observe(this);
-    }
-    watchCanvasDpr() {
-        // A MediaQueryList's `matches` is fixed at creation time, so crossing the DPR threshold it was
-        // built for means building a fresh one for the new ratio -- remove the previous instance's
-        // listener first, or it leaks (disconnectedCallback only ever cleans up whichever is current).
-        this.canvasDprQuery?.removeEventListener('change', this.onCanvasDprChange);
-        this.canvasDprQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-        this.canvasDprQuery.addEventListener('change', this.onCanvasDprChange);
-    }
-    markCanvasDirty() {
-        this.canvasScene = undefined;
-        this.pickDirty = true;
-        this.scheduleCanvasDraw();
-    }
-    /** The camera-only sibling of `markCanvasDirty()`: a pan/zoom moves the camera but leaves every
-     *  world-space scene value (positions, colors, labels) untouched, so the cached `canvasScene`
-     *  stays valid and only needs redrawing under the new transform. The pick canvas bakes the
-     *  camera transform into its pixels, though, so it still needs a redraw before the next hit
-     *  test. */
-    markCanvasCameraDirty() {
-        this.pickDirty = true;
-        this.scheduleCanvasDraw();
-    }
-    scheduleCanvasDraw() {
-        if (this.canvasDrawRafId != null)
-            return;
-        this.canvasDrawRafId = requestAnimationFrame(() => {
-            this.canvasDrawRafId = undefined;
-            this.drawCanvas();
-        });
-    }
-    /** Canvas 2D's `fillStyle`/`strokeStyle` don't accept a raw `var(--x)` string the way an inline
-     *  SVG `style` attribute does -- resolves it to the actual cascaded color via `getComputedStyle`
-     *  first (the same "canvas can't consume var() directly" resolution `<lr-heatmap>` already
-     *  uses for its own canvas-drawn tokens). `value` untouched when it isn't a bare `var(...)` ref
-     *  (a literal `GraphNode.color`/`GraphLink.color` hex/rgb string already resolves fine as-is). */
-    resolveCssColorValue(value, cs) {
-        const match = value.match(/^var\((--[\w-]+)/);
-        if (!match)
-            return value;
-        return cs.getPropertyValue(match[1]).trim() || value;
-    }
-    buildCanvasScene(cs) {
-        const hullFillDefault = cs.getPropertyValue('--lr-graph-hull-fill').trim() || cs.getPropertyValue('--lr-color-brand').trim();
-        const hulls = this.visibleCommunities().map((entry) => ({
-            d: hullPathD(this.communityHull(entry.members)),
-            fill: sanitizeNodeColor(entry.community.color) ?? hullFillDefault,
-        }));
-        const linkColorDefault = cs.getPropertyValue('--lr-link-color').trim() || cs.getPropertyValue('--lr-color-border').trim();
-        const links = this.simLinks.map((l) => {
-            const coords = this.linkCoordinates(l);
-            const own = sanitizeNodeColor(l.color);
-            return {
-                x1: coords.x1,
-                y1: coords.y1,
-                x2: coords.x2,
-                y2: coords.y2,
-                color: own ? this.resolveCssColorValue(own, cs) : linkColorDefault,
-                width: l.width ?? 1.5,
-                dash: l.dash,
-                directed: l.directed,
-                selected: this.isSelected('link', this.linkKey(l)),
-                dimmed: this.isDimmed('link', this.linkKey(l)),
-            };
-        });
-        const edgeLabels = this.showEdgeLabels && this.canvasCamera.k >= this.safeEdgeLabelMinZoom
-            ? this.simLinks
-                .filter((l) => l.label)
-                .map((l) => {
-                const pos = this.edgeLabelPosition(l);
-                const coords = this.linkCoordinates(l);
-                const edgeLength = Math.hypot(coords.x2 - coords.x1, coords.y2 - coords.y1);
-                const tooLong = this.edgeLabelWidth(l.label) > edgeLength * EDGE_LABEL_LENGTH_GATE_RATIO;
-                return { x: pos.x, y: pos.y, text: l.label, tooLong };
-            })
-                .filter((l) => !l.tooLong)
-                .map(({ x, y, text }) => ({ x, y, text }))
-            : [];
-        const nodeFillDefault = cs.getPropertyValue('--lr-node-fill').trim() || cs.getPropertyValue('--lr-color-brand').trim();
-        const nodes = this.simNodes.map((n) => {
-            const fill = this.nodeFill(n);
-            return {
-                x: n.x ?? 0,
-                y: n.y ?? 0,
-                r: this.nodeRadius(n),
-                shape: this.nodeShape(n),
-                fill: fill ? this.resolveCssColorValue(fill, cs) : nodeFillDefault,
-                selected: this.isSelected('node', n.id),
-                dimmed: this.isDimmed('node', n.id),
-            };
-        });
-        const nodeLabels = this.simNodes
-            .filter((n) => n.label)
-            .map((n) => ({ x: (n.x ?? 0) + this.nodeRadius(n) + 2, y: n.y ?? 0, text: n.label }));
-        const focusNode = this.focusId != null ? this.simNodes.find((n) => n.id === this.focusId) : undefined;
-        const activeNode = this.activeGraphItem >= 0 && this.activeGraphItem < this.simNodes.length
-            ? this.simNodes[this.activeGraphItem]
-            : undefined;
-        return {
-            hulls,
-            links,
-            edgeLabels,
-            nodes,
-            nodeLabels,
-            focusHalo: focusNode
-                ? { x: focusNode.x ?? 0, y: focusNode.y ?? 0, r: this.nodeRadius(focusNode) + FOCUS_HALO_PADDING }
-                : undefined,
-            keyboardFocusRing: activeNode
-                ? { x: activeNode.x ?? 0, y: activeNode.y ?? 0, r: this.nodeRadius(activeNode) + 4 }
-                : undefined,
-            showNodeLabels: this.canvasCamera.k >= CANVAS_NODE_LABEL_MIN_ZOOM,
-            haloColor: cs.getPropertyValue('--lr-graph-focus-halo-color').trim() || cs.getPropertyValue('--lr-color-brand').trim(),
-            selectedColor: cs.getPropertyValue('--lr-graph-selected-color').trim() || cs.getPropertyValue('--lr-color-success').trim(),
-            dimmedOpacity: Number(cs.getPropertyValue('--lr-graph-dimmed-opacity').trim()) || 1,
-            labelColor: cs.getPropertyValue('--lr-color-text').trim(),
-            labelHaloColor: cs.getPropertyValue('--lr-graph-edge-label-halo').trim() || cs.getPropertyValue('--lr-color-surface').trim(),
-            font: `${this.edgeLabelFontPx()}px ${cs.getPropertyValue('--lr-font').trim() || 'sans-serif'}`,
-        };
-    }
-    /** Sizes the backing store to the canvas's own rendered CSS box (`clientWidth`/`clientHeight`,
-     *  themselves stretched to fill the host via `[part="base"]`/`[part="canvas"]`'s `100%` sizing)
-     *  times `devicePixelRatio`, only touching `width`/`height` when the target actually changed --
-     *  reassigning either unconditionally would implicitly clear the canvas and reset its transform
-     *  on every single draw, even a pure pan/zoom repaint. Mirrors `<lr-heatmap>`'s own DPR-scaled
-     *  backing-store convention (`watchDpr()`/`onDprChange()`), adapted to `setTransform()` (an
-     *  absolute reset) rather than a relative `scale()`, since this canvas -- unlike heatmap's, which
-     *  always resizes its backing store on every draw -- only resizes conditionally. */
-    drawCanvas() {
-        if (!this.canvasEl || !this.canvasCtx)
-            return;
-        const dpr = window.devicePixelRatio || 1;
-        const w = this.canvasEl.clientWidth || this.safeWidth;
-        const h = this.canvasEl.clientHeight || this.safeHeight;
-        const backingW = Math.round(w * dpr);
-        const backingH = Math.round(h * dpr);
-        if (this.canvasEl.width !== backingW || this.canvasEl.height !== backingH) {
-            this.canvasEl.width = backingW;
-            this.canvasEl.height = backingH;
-        }
-        const ctx = this.canvasCtx;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, w, h);
-        // Reuse the cached scene for a camera-only repaint; rebuild when it was invalidated
-        // (markCanvasDirty()) or when the camera crossed one of the two label-visibility zoom gates
-        // the scene bakes in (see canvasSceneHasEdgeLabels' doc).
-        const edgeLabelsVisible = this.showEdgeLabels && this.canvasCamera.k >= this.safeEdgeLabelMinZoom;
-        const nodeLabelsVisible = this.canvasCamera.k >= CANVAS_NODE_LABEL_MIN_ZOOM;
-        if (!this.canvasScene ||
-            this.canvasScene.showNodeLabels !== nodeLabelsVisible ||
-            this.canvasSceneHasEdgeLabels !== edgeLabelsVisible) {
-            this.canvasScene = this.buildCanvasScene(getComputedStyle(this));
-            this.canvasSceneHasEdgeLabels = edgeLabelsVisible;
-        }
-        drawGraphScene(ctx, this.canvasCamera, this.canvasScene);
-    }
-    // ---------------------------------------------------------------------------------------------
-    // renderer="canvas": color-picking hit-testing, pointer interaction, and the hover tooltip.
-    // ---------------------------------------------------------------------------------------------
-    rebuildPickItems() {
-        this.pickItems = [
-            ...this.visibleCommunities().map((entry) => ({ kind: 'hull', entry })),
-            ...this.simLinks.map((link) => ({ kind: 'link', link })),
-            ...this.simNodes.map((node) => ({ kind: 'node', node })),
-        ];
-    }
-    redrawPickCanvas() {
-        if (!this.pickCtx || !this.canvasEl || !this.pickCanvas)
-            return;
-        if (this.pickCanvas.width !== this.canvasEl.width || this.pickCanvas.height !== this.canvasEl.height) {
-            this.pickCanvas.width = this.canvasEl.width;
-            this.pickCanvas.height = this.canvasEl.height;
-        }
-        this.rebuildPickItems();
-        const dpr = window.devicePixelRatio || 1;
-        this.pickCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        drawPickingScene(this.pickCtx, this.canvasCamera, {
-            hulls: this.pickItems
-                .filter((i) => i.kind === 'hull')
-                .map((i) => ({ d: hullPathD(this.communityHull(i.entry.members)) })),
-            links: this.pickItems
-                .filter((i) => i.kind === 'link')
-                .map((i) => {
-                const c = this.linkCoordinates(i.link);
-                return { x1: c.x1, y1: c.y1, x2: c.x2, y2: c.y2, width: i.link.width ?? 1.5 };
-            }),
-            nodes: this.pickItems
-                .filter((i) => i.kind === 'node')
-                .map((i) => ({
-                x: i.node.x ?? 0,
-                y: i.node.y ?? 0,
-                r: this.nodeRadius(i.node) + 2,
-                shape: this.nodeShape(i.node),
-            })),
-        });
-        this.pickDirty = false;
-    }
-    hitTest(clientX, clientY) {
-        if (!this.canvasEl || !this.pickCtx)
-            return undefined;
-        if (this.pickDirty)
-            this.redrawPickCanvas();
-        const rect = this.canvasEl.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
-        const px = Math.round((clientX - rect.left) * dpr);
-        const py = Math.round((clientY - rect.top) * dpr);
-        if (px < 0 || py < 0 || px >= this.pickCtx.canvas.width || py >= this.pickCtx.canvas.height)
-            return undefined;
-        const data = this.pickCtx.getImageData(px, py, 1, 1).data;
-        const index = pickColorToIndex(data[0], data[1], data[2]);
-        return index >= 0 ? this.pickItems[index] : undefined;
-    }
-    bindCanvasZoom() {
-        if (!this.d3 || !this.canvasEl)
-            return;
-        this.zoomBehavior = this.d3
-            .zoom()
-            .scaleExtent([this.safeMinZoom, this.safeMaxZoom])
-            .on('start', () => {
-            // Same self-triggered-echo guard as the svg zoom bind's own 'start' handler above (see its
-            // comment) -- a camera tween's per-frame applyZoomTransform() call fires this synchronously,
-            // and without the guard cancelCameraTween() here would cancel that very tween on its own
-            // first frame.
-            if (this.isApplyingZoomTransform)
-                return;
-            this.isPanning = true;
-            this.cancelCameraTween();
-        })
-            .on('zoom', (event) => {
-            this.canvasCamera = { k: event.transform.k, x: event.transform.x, y: event.transform.y };
-            this.markCanvasCameraDirty();
-        })
-            .on('end', () => {
-            this.isPanning = false;
-        });
-        this.d3.select(this.canvasEl).call(this.zoomBehavior);
-    }
-    bindCanvasPointer() {
-        const canvas = this.canvasEl;
-        canvas.addEventListener('pointerdown', this.onCanvasPointerDown);
-        canvas.addEventListener('pointermove', this.onCanvasPointerMove);
-        canvas.addEventListener('pointerup', this.onCanvasPointerUp);
-        canvas.addEventListener('pointerleave', this.onCanvasPointerLeave);
-        canvas.addEventListener('dblclick', this.onCanvasDblClick);
-    }
-    /** `alpha` decays toward `alphaMin` and d3-force stops its internal timer once it crosses below
-     *  it, so `alpha > alphaMin` mirrors the simulation's own running condition -- including a drag's
-     *  `alphaTarget(0.3)` reheat, and correctly excluding a seeded/reduced-motion graph whose settle
-     *  loop already converged synchronously. */
-    simulationIsTicking() {
-        return this.simulation != null && this.simulation.alpha() > this.simulation.alphaMin();
-    }
-    /** Geometric fallback for dblclick: browsers can deliver the event before the offscreen pick
-     * canvas has painted the latest frame, while the simulation coordinates are already current. */
-    nodeAtCanvasPoint(clientX, clientY) {
-        if (!this.canvasEl)
-            return undefined;
-        const rect = this.canvasEl.getBoundingClientRect();
-        const worldX = (clientX - rect.left - this.canvasCamera.x) / this.canvasCamera.k;
-        const worldY = (clientY - rect.top - this.canvasCamera.y) / this.canvasCamera.k;
-        let closest;
-        let closestDistance = Infinity;
-        for (const node of this.simNodes) {
-            const distance = Math.hypot((node.x ?? 0) - worldX, (node.y ?? 0) - worldY);
-            if (distance <= this.nodeRadius(node) + 2 / this.canvasCamera.k && distance < closestDistance) {
-                closest = node;
-                closestDistance = distance;
-            }
-        }
-        return closest;
-    }
-    updateCanvasTooltip(hit, clientX, clientY) {
-        if (!this.canvasTooltipEl)
-            return;
-        if (!hit || hit.kind === 'hull') {
-            this.canvasTooltipEl.setAttribute('hidden', '');
-            return;
-        }
-        const rect = this.canvasEl.getBoundingClientRect();
-        this.canvasTooltipEl.textContent =
-            hit.kind === 'node' ? this.nodeAccessibleText(hit.node) : this.linkAccessibleText(hit.link);
-        // `clientX - rect.left`/`clientY - rect.top` are physical viewport offsets, so they must be
-        // written to the physical `left`/`top` -- a logical `inset-inline-start` maps to `right` under
-        // RTL and would mirror the tooltip across the canvas instead of tracking the cursor.
-        this.canvasTooltipEl.style.left = `${clientX - rect.left}px`;
-        this.canvasTooltipEl.style.top = `${clientY - rect.top}px`;
-        this.canvasTooltipEl.removeAttribute('hidden');
-    }
-    isSelected(kind, id) {
-        return kind === 'node' ? this.selectedNodeIds.includes(id) : this.selectedLinkIds.includes(id);
-    }
-    isDimmed(kind, id) {
-        return kind === 'node' ? this.dimmedNodeIds.includes(id) : this.dimmedLinkIds.includes(id);
-    }
-    linkKey(link) {
-        const source = typeof link.source === 'object' ? link.source.id : String(link.source);
-        const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        return link.id ?? `${source}->${target}`;
-    }
-    /** Computes and emits the selection intent for activating `id`; never assigns
-     *  `selectedNodeIds`/`selectedLinkIds` itself -- see the class doc's controlled-selection note. */
-    emitSelectionIntent(kind, id, toggle) {
-        if (this.selectionMode === 'none')
-            return;
-        const selected = this.isSelected(kind, id);
-        if (this.selectionMode === 'single' || !toggle) {
-            if (this.selectionMode === 'single' && selected) {
-                this.emit('lr-selection-change', { nodeIds: [], linkIds: [] });
-                return;
-            }
-            this.emit('lr-selection-change', kind === 'node' ? { nodeIds: [id], linkIds: [] } : { nodeIds: [], linkIds: [id] });
-            return;
-        }
-        const nodeIds = kind === 'node'
-            ? selected
-                ? this.selectedNodeIds.filter((x) => x !== id)
-                : [...this.selectedNodeIds, id]
-            : this.selectedNodeIds;
-        const linkIds = kind === 'link'
-            ? selected
-                ? this.selectedLinkIds.filter((x) => x !== id)
-                : [...this.selectedLinkIds, id]
-            : this.selectedLinkIds;
-        this.emit('lr-selection-change', { nodeIds, linkIds });
-    }
-    clearSelection() {
-        if (this.selectionMode === 'none')
-            return;
-        if (!this.selectedNodeIds.length && !this.selectedLinkIds.length)
-            return;
-        this.emit('lr-selection-change', { nodeIds: [], linkIds: [] });
-    }
-    willUpdate(changed) {
-        // rebuildSimulation() (re)assigns the simNodes/simLinks reactive
-        // properties — doing that from willUpdate() folds them into the render
-        // this same update is already about to perform. Doing it from updated()
-        // instead would set a reactive property *after* the update completed,
-        // which Lit schedules as a whole extra update pass (a dev-mode warning,
-        // and pointless work).
-        if (this.d3 &&
-            (changed.has('nodes') ||
-                changed.has('links') ||
-                changed.has('hiddenTypes') ||
-                changed.has('layout') ||
-                (this.layout === 'layered' && changed.has('linkDistance')))) {
-            this.rebuildSimulation();
-        }
-        // rebuildSimulation() above always reassigns simNodes, so checking it here (after that call)
-        // also catches a nodes/links/hiddenTypes-driven rebuild, not just a direct communities set.
-        if (changed.has('simNodes') || changed.has('communities')) {
-            this.visibleCommunitiesCache = undefined;
-        }
-        // Same reasoning as rebuildSimulation() above -- assigning graphLiveText from updated() would
-        // schedule a whole extra update pass instead of landing in the render this update is already
-        // about to perform.
-        if (changed.has('selectedNodeIds') || changed.has('selectedLinkIds')) {
-            this.graphLiveText = this.localize('graphSelectionCount', undefined, {
-                count: this.selectedNodeIds.length + this.selectedLinkIds.length,
-            });
-        }
-    }
-    updated(changed) {
-        if (this.loading)
-            this.setAttribute('aria-busy', 'true');
-        else
-            this.removeAttribute('aria-busy');
-        if (!this.d3)
-            return;
-        if (!changed.has('nodes') && !changed.has('links') && !changed.has('hiddenTypes')) {
-            // These two branches are independent (not else-if): a consumer can set
-            // width/height and chargeStrength/linkDistance in the same reactive
-            // update batch, and both retunes must apply — not just whichever branch
-            // happens to come first.
-            if (changed.has('width') || changed.has('height')) {
-                this.simulation?.force('center', this.d3.forceCenter(this.safeWidth / 2, this.safeHeight / 2));
-                this.simulation?.alpha(0.1).restart();
-            }
-            if (changed.has('chargeStrength') || changed.has('linkDistance')) {
-                // Without this branch, chargeStrength/linkDistance only took effect
-                // the next time nodes/links also changed (rebuildSimulation() reads
-                // them fresh) — retune the already-created force objects in place
-                // instead of rebuilding the whole simulation.
-                if (changed.has('chargeStrength'))
-                    this.chargeForce?.strength(this.safeChargeStrength);
-                if (changed.has('linkDistance'))
-                    this.linkForce?.distance(this.safeLinkDistance);
-                this.simulation?.alpha(0.3).restart();
-            }
-        }
-        // simNodes/simLinks only ever change once per structural rebuild (see
-        // rebuildSimulation()'s doc comment) — never on a tick — so gating the
-        // node/link querySelectorAll scan on that is equivalent to "structurally
-        // changed" without needing a separate flag.
-        this.applyInteractions(changed);
-        this.applyCanvasInteractions();
-        if (this.focusId == null) {
-            this.lastAppliedFocusId = null;
-        }
-        else if (this.focusId !== this.lastAppliedFocusId && this.simNodes.some((n) => n.id === this.focusId)) {
-            this.lastAppliedFocusId = this.focusId;
-            void this.focusNode(this.focusId);
-        }
-        this.updateFocusHalo();
-    }
-    /**
-     * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
-     * (per-node drag) against the just-rendered DOM. The zoom bind itself is a
-     * one-time guard (`zoomedEl`) — but the bound `zoomBehavior`'s
-     * `scaleExtent` is re-read from `minZoom`/`maxZoom` on every call so a
-     * post-mount change to either still takes effect. The node-drag bind +
-     * node/link/label element caching for `onTick()` only run when
-     * `changed` indicates a fresh structural render just happened, not on
-     * every call — otherwise this would re-scan the DOM via
-     * `querySelectorAll` on every Lit update, which used to include every
-     * single simulation tick. `<circle>`s already bound are skipped
-     * (`boundNodeEls`) — a WeakSet reset on every `rebuildSimulation()` so DOM
-     * nodes Lit reuses across a rebuild get rebound against their new datum
-     * instead of a stale one. The zoom handler writes the resulting transform
-     * straight to the cached `gEl` (bound once alongside `zoomedEl`, since the
-     * outer `<g>` is a static part of the template and never recreated by Lit)
-     * instead of assigning a Lit reactive property — panning/zooming fires
-     * continuously while dragging, and reassigning a `@state()` there would
-     * force a full re-render (recomputing every node/link template) on every
-     * single event, the same class of cost `onTick()` already avoids for ticks.
-     */
-    applyInteractions(changed) {
-        if (!this.d3)
-            return;
-        if (this.renderer !== 'svg')
-            return;
-        const svgEl = this.renderRoot.querySelector('svg');
-        if (svgEl && svgEl !== this.zoomedEl) {
-            // Binding a fresh svg means any previous renderer="canvas" surface is gone -- stop its
-            // resize watcher now (it observes the host, not the removed <canvas>, so it would keep
-            // firing markCanvasDirty() for as long as the element lives in svg mode).
-            this.canvasResizeObserver?.disconnect();
-            this.canvasResizeObserver = undefined;
-            this.zoomedEl = svgEl;
-            this.gEl = this.renderRoot.querySelector('g') ?? undefined;
-            this.focusHaloEl = this.renderRoot.querySelector('[part="focus-halo"]') ?? undefined;
-            this.zoomBehavior = this.d3
-                .zoom()
-                .scaleExtent([this.safeMinZoom, this.safeMaxZoom])
-                .on('start', () => {
-                // A camera tween writes a transform on every frame via applyZoomTransform(), which
-                // itself synchronously replays this same 'start' handler -- ignore that self-triggered
-                // echo so a tween doesn't cancel itself on its own first frame.
-                if (this.isApplyingZoomTransform)
-                    return;
-                this.isPanning = true;
-                this.cancelCameraTween();
-            })
-                .on('zoom', (event) => {
-                this.gEl?.setAttribute('transform', event.transform.toString());
-                this.updateEdgeLabelZoomGate(event.transform.k);
-            })
-                .on('end', () => {
-                this.isPanning = false;
-            });
-            this.d3.select(svgEl).call(this.zoomBehavior);
-            // `.call(zoomBehavior)` does not synchronously fire the 'zoom' handler above (only a real
-            // user gesture or an explicit `.transform()` call does, and nothing in this component ever
-            // calls `.transform()`) -- so the initial transform right here is always d3-zoom's own
-            // identity transform, k=1. Apply the edge-label zoom gate against that known value now, or
-            // it stays unset (edge labels wrongly visible) until the user's first pan/zoom, regardless
-            // of what edgeLabelMinZoom actually is.
-            this.updateEdgeLabelZoomGate(1);
-        }
-        else if (this.zoomBehavior && (changed.has('minZoom') || changed.has('maxZoom'))) {
-            this.zoomBehavior.scaleExtent([this.safeMinZoom, this.safeMaxZoom]);
-        }
-        if (!(changed.has('simNodes') ||
-            changed.has('simLinks') ||
-            changed.has('nodeTypes') ||
-            changed.has('showEdgeLabels') ||
-            changed.has('communities')))
-            return;
-        const nodeEls = Array.from(this.renderRoot.querySelectorAll('[part="node"]'));
-        this.nodeEls = nodeEls;
-        this.nodeLabelEls = nodeEls.map((el) => el.parentElement?.querySelector('[part="label"]') ?? null);
-        this.expandIndicatorEls = nodeEls.map((el) => el.parentElement?.querySelector('[part="expand-indicator"]') ?? null);
-        // Dangling stubs also carry part="link" (so they inherit the same themeable styling as a
-        // real edge) -- excluded here explicitly so `linkEls` stays index-aligned with `simLinks`
-        // rather than relying on stubs always sorting after real links in template/DOM order.
-        this.linkEls = Array.from(this.renderRoot.querySelectorAll('[part="link"]:not([data-dangling])'));
-        this.linkLabelEls = this.linkEls.map((el) => el.parentElement?.querySelector('[part="link-label"]') ?? null);
-        this.linkLabelHiddenByLength = [];
-        this.danglingLinkEls = Array.from(this.renderRoot.querySelectorAll('[part="link"][data-dangling]'));
-        this.communityHullEls = Array.from(this.renderRoot.querySelectorAll('[part="hull"]'));
-        this.communityLabelEls = Array.from(this.renderRoot.querySelectorAll('[part="community-label"]'));
-        if (this.layout !== 'layered') {
-            nodeEls.forEach((el, i) => {
-                if (this.boundNodeEls.has(el))
-                    return;
-                const n = this.simNodes[i];
-                if (!n)
-                    return;
-                this.boundNodeEls.add(el);
-                this.d3.select(el).call(this.d3.drag()
-                    .on('start', (event) => {
-                    this.isDragging = true;
-                    // Keep a node drag from also triggering the svg's own pan gesture.
-                    event.sourceEvent?.stopPropagation();
-                    if (!event.active)
-                        this.simulation?.alphaTarget(0.3).restart();
-                    n.fx = n.x;
-                    n.fy = n.y;
-                })
-                    .on('drag', (event) => {
-                    n.fx = event.x;
-                    n.fy = event.y;
-                })
-                    .on('end', (event) => {
-                    this.isDragging = false;
-                    if (!event.active)
-                        this.simulation?.alphaTarget(0);
-                    n.fx = null;
-                    n.fy = null;
-                }));
-            });
-        }
-    }
-    /** The `renderer="canvas"` twin of `applyInteractions()`'s svg zoom-bind branch -- binds d3-zoom
-     *  and the pointer/hit-testing handlers to the just-rendered `<canvas>` once (guarded by the same
-     *  `zoomedEl` field `applyInteractions()` uses, so `focusNode()`/`fit()`/`tweenCamera()` keep
-     *  working unmodified against whichever element -- svg or canvas -- is currently bound), then
-     *  marks the canvas dirty on every call so any structural/style-affecting change (new nodes/
-     *  links, a selection change, a hiddenTypes toggle, ...) schedules a fresh draw the same way a
-     *  Lit re-render already does for svg mode. */
-    applyCanvasInteractions() {
-        if (this.renderer !== 'canvas' || !this.canvasEl)
-            return;
-        if (this.canvasEl !== this.zoomedEl) {
-            this.zoomedEl = this.canvasEl;
-            this.setUpCanvasSurface();
-        }
-        this.markCanvasDirty();
-    }
-    /**
-     * Runs on every d3-force simulation tick (up to ~300 while a graph settles
-     * on load, continuously while a node is being dragged via
-     * `alphaTarget(0.3)`). Writes positions straight to the already-rendered
-     * DOM via `setAttribute()` instead of reassigning the reactive
-     * `simNodes`/`simLinks` properties, which would force a full Lit re-render
-     * (and, before the structural-render gate in `applyInteractions()`, an
-     * unconditional `querySelectorAll` scan) on every single frame. Writing attributes
-     * directly (rather than wrapping each element in a d3 selection just to
-     * call `.attr()`) avoids allocating a throwaway Selection per element on
-     * this component's highest-frequency code path.
-     */
-    onTick() {
-        for (const l of this.danglingLinks) {
-            const source = l.source;
-            const target = l.target;
-            target.x = (source.x ?? 0) + STUB_OFFSET_PX;
-            target.y = (source.y ?? 0) + STUB_OFFSET_PX;
-        }
-        // Keep the remembered-position cache current with a position captured mid-settle or mid-drag
-        // (not just the one snapshotted at the end of rebuildSimulation()) -- a hiddenTypes toggle
-        // that lands before the next structural rebuild should still restore a node to where it
-        // actually was, not an earlier, since-superseded snapshot. Plain Map writes, no DOM/no
-        // reactive-property touch, so this stays on the same cheap per-tick path as the rest of this
-        // method.
-        for (const n of this.simNodes) {
-            if (n.x != null && n.y != null)
-                this.lastPositionById.set(n.id, { x: n.x, y: n.y });
-        }
-        this.simNodes.forEach((n, i) => {
-            const el = this.nodeEls[i];
-            if (el) {
-                if (el.tagName === 'circle') {
-                    el.setAttribute('cx', String(n.x ?? 0));
-                    el.setAttribute('cy', String(n.y ?? 0));
-                }
-                else {
-                    el.setAttribute('transform', `translate(${n.x ?? 0},${n.y ?? 0})`);
-                }
-            }
-            const label = this.nodeLabelEls[i];
-            if (label) {
-                label.setAttribute('x', String((n.x ?? 0) + this.nodeRadius(n) + 2));
-                label.setAttribute('y', String(n.y ?? 0));
-            }
-        });
-        this.simLinks.forEach((l, i) => {
-            const line = this.linkEls[i];
-            if (!line)
-                return;
-            const coordinates = this.linkCoordinates(l);
-            line.setAttribute('x1', String(coordinates.x1));
-            line.setAttribute('y1', String(coordinates.y1));
-            line.setAttribute('x2', String(coordinates.x2));
-            line.setAttribute('y2', String(coordinates.y2));
-        });
-        if (this.showEdgeLabels) {
-            this.simLinks.forEach((l, i) => {
-                const labelEl = this.linkLabelEls[i];
-                if (!labelEl)
-                    return;
-                const pos = this.edgeLabelPosition(l);
-                labelEl.setAttribute('x', String(pos.x));
-                labelEl.setAttribute('y', String(pos.y));
-                const { x1, y1, x2, y2 } = this.linkCoordinates(l);
-                const edgeLength = Math.hypot(x2 - x1, y2 - y1);
-                const tooLong = this.edgeLabelWidth(l.label ?? '') > edgeLength * EDGE_LABEL_LENGTH_GATE_RATIO;
-                if (this.linkLabelHiddenByLength[i] !== tooLong) {
-                    this.linkLabelHiddenByLength[i] = tooLong;
-                    labelEl.setAttribute('visibility', tooLong ? 'hidden' : 'visible');
-                }
-            });
-        }
-        this.simNodes.forEach((n, i) => {
-            const indicator = this.expandIndicatorEls[i];
-            if (indicator)
-                indicator.setAttribute('transform', `translate(${n.x ?? 0},${n.y ?? 0})`);
-        });
-        // Dangling stubs are excluded from d3-force's own simulation input (see
-        // rebuildSimulation()'s "stubs never enter d3-force's own simulation input"), so the
-        // synthetic target position the danglingLinks loop at the top of this method just
-        // recomputed is never picked up by the simLinks loop above -- write it here the same way,
-        // or a stub stays frozen at its pre-settle position while the source node it hangs off
-        // keeps moving.
-        this.danglingLinks.forEach((l, i) => {
-            const line = this.danglingLinkEls[i];
-            if (!line)
-                return;
-            const coordinates = this.linkCoordinates(l);
-            line.setAttribute('x1', String(coordinates.x1));
-            line.setAttribute('y1', String(coordinates.y1));
-            line.setAttribute('x2', String(coordinates.x2));
-            line.setAttribute('y2', String(coordinates.y2));
-        });
-        this.updateFocusHalo();
-        this.visibleCommunities().forEach((entry, i) => {
-            const hullEl = this.communityHullEls[i];
-            const labelEl = this.communityLabelEls[i];
-            if (!hullEl && !labelEl)
-                return;
-            const hull = this.communityHull(entry.members);
-            if (hullEl)
-                hullEl.setAttribute('d', hullPathD(hull));
-            if (labelEl) {
-                labelEl.setAttribute('x', String(hullCentroidX(hull)));
-                labelEl.setAttribute('y', String(hullTopY(hull) - HULL_PADDING));
-            }
-        });
-        // renderer="canvas" mode has no DOM to write positions straight to (everything above this line
-        // no-ops there: nodeEls/linkEls/etc. are only ever populated by applyInteractions()'s svg-only
-        // branch) -- schedule a fresh draw off the same simulation tick instead, so the settle
-        // animation and a live node drag actually repaint the canvas rather than freezing at whatever
-        // was last drawn on mount.
-        if (this.renderer === 'canvas')
-            this.markCanvasDirty();
-    }
-    rebuildSimulation() {
-        if (!this.d3)
-            return;
-        this.simulation?.stop();
-        this.boundNodeEls = new WeakSet();
-        // Prune remembered positions for ids no longer present in `this.nodes` at all (not merely
-        // hidden by hiddenTypes) -- otherwise this cache would grow forever across a long-lived,
-        // mutating graph instead of tracking only ids that could plausibly reappear.
-        const liveIds = new Set(this.nodes.map((n) => n.id));
-        for (const id of this.lastPositionById.keys()) {
-            if (!liveIds.has(id))
-                this.lastPositionById.delete(id);
-        }
-        // Carry over each existing SimNode's settled position/velocity (and any
-        // in-progress drag fx/fy) by id instead of starting every node fresh —
-        // otherwise any structural nodes/links change (e.g. appending one new
-        // node to a live/streaming graph) would discard every already-settled
-        // node's (x, y) and restart the whole force layout's ~300-tick random-
-        // start settle animation from scratch. Only nodes with no previous
-        // counterpart (genuinely new ids) get forceSimulation()'s default
-        // fresh random start below.
-        const visible = this.visibleNodes();
-        if (this.layout === 'layered') {
-            this.rebuildLayeredLayout(visible);
-            return;
-        }
-        const prevById = new Map(this.simNodes.map((n) => [n.id, n]));
-        const nodes = visible.map((n) => {
-            const prev = prevById.get(n.id);
-            if (prev)
-                return { ...prev, ...n };
-            // A node hidden by hiddenTypes and now visible again has no prevById entry (it fell out of
-            // simNodes while hidden) but may still have a remembered settled position from before it was
-            // hidden -- restore that instead of leaving it for the neighbor-jitter/seed spawn logic below,
-            // or forceSimulation()'s own random start, to place it as if it were a brand-new node.
-            const remembered = this.lastPositionById.get(n.id);
-            return remembered ? { ...n, x: remembered.x, y: remembered.y } : { ...n };
-        });
-        const byId = new Map(nodes.map((n) => [n.id, n]));
-        const { resolved: resolvedLinks, dangling: danglingLinks } = this.resolveLinksAgainst(byId);
-        const links = resolvedLinks; // stubs never enter d3-force's own simulation input
-        this.danglingLinks = danglingLinks;
-        const seedForSpawn = this.safeSeed;
-        // Give a brand-new node with no carried-over position (from prevById above) a spawn point
-        // near an already-positioned neighbor instead of forceSimulation()'s eventual random start --
-        // expanded neighborhoods bloom around their origin instead of flying in from nowhere. Only
-        // touches nodes with no position yet, so it can't move anything already settled.
-        for (const n of nodes) {
-            if (n.x != null && n.y != null)
-                continue;
-            const neighborLink = resolvedLinks.find((l) => {
-                const source = l.source;
-                const target = l.target;
-                return (source.id === n.id && target.x != null) || (target.id === n.id && source.x != null);
-            });
-            if (!neighborLink)
-                continue;
-            const source = neighborLink.source;
-            const target = neighborLink.target;
-            const neighbor = source.id === n.id ? target : source;
-            const jitterRadius = this.safeLinkDistance / 2;
-            const angle = seedForSpawn != null
-                ? (hashNodeSeed(seedForSpawn, n.id) / 4294967296) * Math.PI * 2
-                : Math.random() * Math.PI * 2;
-            n.x = (neighbor.x ?? 0) + Math.cos(angle) * jitterRadius;
-            n.y = (neighbor.y ?? 0) + Math.sin(angle) * jitterRadius;
-        }
-        // Give any remaining brand-new nodes (no carried-over position from prevById above, and no
-        // already-positioned neighbor for the jitter spawn above to anchor to) a deterministic
-        // starting x/y, keyed by node id, instead of leaving them for forceSimulation() below to
-        // randomize. Nodes that already have a position are left untouched — same "only randomize
-        // nodes without x/y" rule forceSimulation() itself follows — so an incremental update to a
-        // seeded, already-settled graph doesn't reshuffle existing nodes.
-        if (seedForSpawn != null) {
-            for (const n of nodes) {
-                if (n.x != null && n.y != null)
-                    continue;
-                const rng = mulberry32(hashNodeSeed(seedForSpawn, n.id));
-                n.x = rng() * this.safeWidth;
-                n.y = rng() * this.safeHeight;
-            }
-        }
-        this.linkForce = this.d3.forceLink(links).distance(this.safeLinkDistance);
-        this.chargeForce = this.d3.forceManyBody().strength(this.safeChargeStrength);
-        const simulation = this.d3
-            .forceSimulation(nodes)
-            .force('link', this.linkForce)
-            .force('charge', this.chargeForce)
-            .force('center', this.d3.forceCenter(this.safeWidth / 2, this.safeHeight / 2))
-            .force('collide', this.d3.forceCollide().radius((n) => this.nodeRadius(n) + 10))
-            .on('tick', () => this.onTick());
-        this.simulation = simulation;
-        if (prefersReducedMotion() || this.safeSeed != null) {
-            // Pin every node that already had a known position before this rebuild -- either carried
-            // over directly (fx/fy, the same mechanism a user drag uses) or restored from
-            // lastPositionById after being hidden by hiddenTypes -- so introducing a new node/link can't
-            // visibly reposition it during this synchronous settle. Only a genuinely new node (no prior
-            // counterpart in either source) is free to move while the simulation converges. A node whose
-            // fx/fy was already set (an active user drag concurrent with this rebuild) is left alone
-            // entirely -- both the pin and the later release below only apply to a node this loop itself
-            // pinned, so a real in-progress drag's own fx/fy is never clobbered. Everything this loop
-            // does pin gets released again immediately below, so this has no lasting effect on a later
-            // user-initiated drag, nor on the live, async settle a non-seeded/non-reduced-motion graph
-            // still animates over ~300 frames.
-            const pinnedForSettle = new Set();
-            for (const n of nodes) {
-                const hadKnownPosition = prevById.has(n.id) || this.lastPositionById.has(n.id);
-                if (hadKnownPosition && n.x != null && n.y != null && n.fx == null && n.fy == null) {
-                    n.fx = n.x;
-                    n.fy = n.y;
-                    pinnedForSettle.add(n.id);
-                }
-            }
-            // Converge synchronously instead of animating the settle over ~300
-            // rendered frames — the simulation is already stopped (alpha at
-            // alphaMin) by the time the DOM for this rebuild is first painted.
-            // A seed converging synchronously (not just deterministically-seeded)
-            // is what makes its end state reproducible: two runs must agree on the
-            // exact same number of ticks, not merely start from the same x/y.
-            // User-initiated motion (dragging a node) is unaffected.
-            simulation.stop();
-            while (simulation.alpha() > simulation.alphaMin())
-                simulation.tick();
-            for (const n of nodes) {
-                if (pinnedForSettle.has(n.id)) {
-                    n.fx = null;
-                    n.fy = null;
-                }
-            }
-        }
-        // Assign these SAME array/object references (not copies) exactly once
-        // for this structural rebuild: forceSimulation(nodes) above already
-        // initialized their .x/.y synchronously, so this one Lit re-render
-        // creates the initial DOM with correct starting positions. Every
-        // subsequent tick mutates these same node/link objects in place and
-        // calls onTick() to write positions straight to the DOM — reassigning
-        // simNodes/simLinks on every tick (as before) would force a full Lit
-        // re-render up to ~300 times on load and continuously while dragging.
-        this.simNodes = nodes;
-        this.simLinks = links;
-        for (const n of nodes) {
-            if (n.x != null && n.y != null)
-                this.lastPositionById.set(n.id, { x: n.x, y: n.y });
-        }
-        this.announceHiddenNodeCount(nodes.length);
-    }
-    /** Announces the current hidden-node count via the live region -- shared by both the force and
-     *  layered rebuild paths (each calls this with its own final visible-node count) so `hiddenTypes`
-     *  filtering announces identically regardless of `layout`. Called from right here (not from
-     *  willUpdate()/updated() gated on a 'hiddenTypes'/'nodes' PropertyValues diff) because
-     *  rebuildSimulation() itself is also invoked directly from connectedCallback() once the lazy d3
-     *  peer deps resolve -- a call that never goes through Lit's changed-property diffing at all.
-     *  Computing it there instead would miss that path entirely: a graph mounted with hiddenTypes
-     *  already set would compute this from a still-empty simNodes (0 settled nodes yet) on the
-     *  property-driven pass, then never get a chance to correct it once the real simNodes became
-     *  available. Only ever touches graphLiveText when there's something to say -- a node is
-     *  currently hidden, or one just stopped being hidden -- so a consumer that never sets
-     *  hiddenTypes keeps today's exact live-region output. */
-    announceHiddenNodeCount(visibleNodeCount) {
-        const totalNodeCount = this.nodes.length;
-        const hiddenNodeCount = totalNodeCount - visibleNodeCount;
-        if (totalNodeCount > 0 && (hiddenNodeCount > 0 || this.lastHiddenNodeCount > 0)) {
-            this.graphLiveText = this.localize('graphNodesHidden', undefined, {
-                hidden: hiddenNodeCount,
-                total: totalNodeCount,
-            });
-        }
-        this.lastHiddenNodeCount = hiddenNodeCount;
-    }
-    /** The `layout="layered"` path: computes final positions synchronously via the shared
-     *  `layeredLayout()` util (2r x 2r boxes, `gapY = linkDistance`, `gapX = 12`), centers the
-     *  drawing in `width` x `height`, and skips forceSimulation() entirely -- no `this.simulation`,
-     *  no ticking, no `prevById` carry-over (deterministic input -> output makes it unnecessary; a
-     *  structural change simply recomputes wholesale). `lr-graph` never passes `fixedPositions`. */
-    rebuildLayeredLayout(visible) {
-        const boxes = visible.map((n) => {
-            const r = this.nodeRadius(n);
-            return { id: n.id, width: r * 2, height: r * 2 };
-        });
-        const visibleIds = new Set(visible.map((n) => n.id));
-        const edges = this.links
-            .filter((l) => visibleIds.has(l.source) && visibleIds.has(l.target))
-            .map((l) => ({ source: l.source, target: l.target }));
-        const raw = layeredLayout({ nodes: boxes, edges, options: { gapX: 12, gapY: this.safeLinkDistance } });
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        for (const p of raw.values()) {
-            minX = Math.min(minX, p.x);
-            maxX = Math.max(maxX, p.x);
-            minY = Math.min(minY, p.y);
-            maxY = Math.max(maxY, p.y);
-        }
-        const offsetX = raw.size ? this.safeWidth / 2 - (minX + (maxX - minX) / 2) : this.safeWidth / 2;
-        const offsetY = raw.size ? this.safeHeight / 2 - (minY + (maxY - minY) / 2) : this.safeHeight / 2;
-        const nodes = visible.map((n) => {
-            const p = raw.get(n.id);
-            return { ...n, x: (p?.x ?? this.safeWidth / 2) + offsetX, y: (p?.y ?? this.safeHeight / 2) + offsetY };
-        });
-        const byId = new Map(nodes.map((n) => [n.id, n]));
-        const { resolved, dangling } = this.resolveLinksAgainst(byId);
-        this.danglingLinks = dangling;
-        this.simulation = undefined;
-        this.simNodes = nodes;
-        this.simLinks = resolved;
-        for (const n of nodes) {
-            if (n.x != null && n.y != null)
-                this.lastPositionById.set(n.id, { x: n.x, y: n.y });
-        }
-        this.announceHiddenNodeCount(nodes.length);
-    }
-    onNodeClick(node, e) {
-        this.emit('lr-node-click', { id: node.id, x: node.x ?? 0, y: node.y ?? 0 });
-        this.emitSelectionIntent('node', node.id, !!(e?.ctrlKey || e?.metaKey));
-    }
-    /** Returns a node's current position in the graph's local drawing space. */
-    getNodePosition(id) {
-        const node = this.simNodes.find((candidate) => candidate.id === id);
-        if (!node || !Number.isFinite(node.x) || !Number.isFinite(node.y))
-            return undefined;
-        return { x: node.x, y: node.y };
-    }
-    onLinkClick(link, e) {
-        const source = typeof link.source === 'object' ? link.source.id : String(link.source);
-        const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lr-link-click', { source, target, ...(link.id ? { id: link.id } : {}) });
-        this.emitSelectionIntent('link', this.linkKey(link), !!(e?.ctrlKey || e?.metaKey));
-    }
-    onNodeEnter(node, e) {
-        if (this.isDragging || this.isPanning || this.isCameraTweening)
-            return;
-        e.currentTarget.setAttribute('data-hovered', '');
-        this.emit('lr-node-enter', { id: node.id });
-    }
-    onNodeLeave(node, e) {
-        if (this.isDragging || this.isPanning || this.isCameraTweening)
-            return;
-        e.currentTarget.removeAttribute('data-hovered');
-        this.emit('lr-node-leave', { id: node.id });
-    }
-    onNodeDblClick(node, e) {
-        // Stops the dblclick from also reaching the svg's own d3-zoom double-click-to-zoom-in
-        // listener -- background double-click (not on a node) keeps that default behavior.
-        e.stopPropagation();
-        this.emit('lr-node-expand', { id: node.id });
-    }
-    onLinkEnter(link, e) {
-        if (this.isDragging || this.isPanning || this.isCameraTweening)
-            return;
-        e.currentTarget.setAttribute('data-hovered', '');
-        const source = typeof link.source === 'object' ? link.source.id : String(link.source);
-        const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lr-link-enter', { source, target, ...(link.id ? { id: link.id } : {}) });
-    }
-    onLinkLeave(link, e) {
-        if (this.isDragging || this.isPanning || this.isCameraTweening)
-            return;
-        e.currentTarget.removeAttribute('data-hovered');
-        const source = typeof link.source === 'object' ? link.source.id : String(link.source);
-        const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lr-link-leave', { source, target, ...(link.id ? { id: link.id } : {}) });
-    }
-    nodeAccessibleText(node) {
-        let text = node.accessibleLabel || node.label || node.id;
-        const type = this.resolveNodeType(node);
-        if (type)
-            text = this.localize('graphTypedNode', undefined, { label: text, type: type.label });
-        if (node.expandable)
-            text = this.localize('graphExpandableItem', undefined, { item: text });
-        return text;
-    }
-    linkAccessibleText(link) {
-        if (link.accessibleLabel)
-            return link.accessibleLabel;
-        const source = typeof link.source === 'object'
-            ? this.nodeAccessibleText(link.source)
-            : String(link.source);
-        const target = typeof link.target === 'object'
-            ? this.nodeAccessibleText(link.target)
-            : String(link.target);
-        return link.label || this.localize('graphLink', undefined, { source, target });
-    }
-    linkCoordinates(link) {
-        const source = link.source;
-        const target = link.target;
-        const x1 = source.x ?? 0;
-        const y1 = source.y ?? 0;
-        const targetX = target.x ?? 0;
-        const targetY = target.y ?? 0;
-        if (!link.directed || link.dangling)
-            return { x1, y1, x2: targetX, y2: targetY };
-        const dx = targetX - x1;
-        const dy = targetY - y1;
-        const distance = Math.hypot(dx, dy);
-        if (distance === 0)
-            return { x1, y1, x2: targetX, y2: targetY };
-        const inset = Math.min(this.nodeRadius(target), distance);
-        return {
-            x1,
-            y1,
-            x2: targetX - (dx / distance) * inset,
-            y2: targetY - (dy / distance) * inset,
-        };
-    }
-    /** World-space midpoint of a link, offset EDGE_LABEL_OFFSET_PX perpendicular to the segment
-     *  (horizontal, unrotated text — rotated edge-label text is a readability and RTL hazard). */
-    edgeLabelPosition(link) {
-        const { x1, y1, x2, y2 } = this.linkCoordinates(link);
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-        const len = Math.hypot(dx, dy);
-        const mx = (x1 + x2) / 2;
-        const my = (y1 + y2) / 2;
-        if (len === 0)
-            return { x: mx, y: my };
-        return {
-            x: mx + (-dy / len) * EDGE_LABEL_OFFSET_PX,
-            y: my + (dx / len) * EDGE_LABEL_OFFSET_PX,
-        };
-    }
-    edgeLabelFontPx() {
-        const raw = getComputedStyle(this).getPropertyValue('--lr-font-size-2xs').trim();
-        const parsed = parseFloat(raw);
-        if (!Number.isFinite(parsed))
-            return 10;
-        // rem tokens are resolved relative to the root font-size; this is a decluttering heuristic,
-        // not a pixel-perfect layout, so the standard 16px/rem approximation is sufficient.
-        return raw.endsWith('rem') ? parsed * 16 : parsed;
-    }
-    edgeLabelWidth(text) {
-        const cached = this.edgeLabelWidthCache.get(text);
-        if (cached != null)
-            return cached;
-        const ctx = getScratchCtx();
-        let width;
-        if (ctx) {
-            const fontFamily = getComputedStyle(this).getPropertyValue('--lr-font').trim() || 'sans-serif';
-            ctx.font = `${this.edgeLabelFontPx()}px ${fontFamily}`;
-            width = ctx.measureText(text).width;
-        }
-        else {
-            width = text.length * this.edgeLabelFontPx() * 0.6;
-        }
-        // Bound the cache under label churn (a streaming graph can cycle through unbounded distinct
-        // label texts) -- Map iteration yields insertion order, so evicting the first key drops the
-        // oldest-measured entry.
-        if (this.edgeLabelWidthCache.size >= EDGE_LABEL_WIDTH_CACHE_MAX) {
-            const oldest = this.edgeLabelWidthCache.keys().next().value;
-            if (oldest !== undefined)
-                this.edgeLabelWidthCache.delete(oldest);
-        }
-        this.edgeLabelWidthCache.set(text, width);
-        return width;
-    }
-    /** Toggles `data-edge-labels-hidden` on the cached zoomed `<g>` when crossing `edgeLabelMinZoom`
-     *  -- called from the d3-zoom `'zoom'` handler (render-free, CSS hides `[part="link-label"]`
-     *  beneath the attribute) so this scales with every pan/zoom event without a Lit re-render. */
-    updateEdgeLabelZoomGate(k) {
-        if (!this.gEl)
-            return;
-        if (k < this.safeEdgeLabelMinZoom)
-            this.gEl.setAttribute('data-edge-labels-hidden', '');
-        else
-            this.gEl.removeAttribute('data-edge-labels-hidden');
-    }
-    graphItemCount() {
-        return this.simNodes.length + this.simLinks.length + this.visibleCommunities().length;
-    }
-    normalizedGraphItem(index = this.activeGraphItem) {
-        const count = this.graphItemCount();
-        return count ? Math.min(Math.max(index, 0), count - 1) : -1;
-    }
-    graphItemText(index) {
-        if (index < this.simNodes.length) {
-            const node = this.simNodes[index];
-            return node ? this.localize('graphNode', undefined, { label: this.nodeAccessibleText(node) }) : '';
-        }
-        const linkIndex = index - this.simNodes.length;
-        if (linkIndex < this.simLinks.length) {
-            const link = this.simLinks[linkIndex];
-            return link ? this.linkAccessibleText(link) : '';
-        }
-        const hullIndex = linkIndex - this.simLinks.length;
-        const entry = this.visibleCommunities()[hullIndex];
-        return entry
-            ? this.localize('graphCommunity', undefined, {
-                label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
-            })
-            : '';
-    }
-    graphItemAnnouncement(index) {
-        return this.localize('graphItemAnnouncement', undefined, {
-            item: this.graphItemText(index),
-            index: index + 1,
-            total: this.graphItemCount(),
-        });
-    }
-    onGraphItemFocus(index) {
-        if (this.normalizedGraphItem(index) < 0)
-            return;
-        this.activeGraphItem = index;
-        this.graphLiveText = this.graphItemAnnouncement(index);
-    }
-    focusGraphItem(index) {
-        const normalized = this.normalizedGraphItem(index);
-        if (normalized < 0)
-            return;
-        this.activeGraphItem = normalized;
-        this.graphLiveText = this.graphItemAnnouncement(normalized);
-        void this.updateComplete.then(() => {
-            // renderer="canvas" has no [part="node"]/[part="link"]/[part="hull"] elements at all -- the
-            // roving tab stop lives on the offscreen [part="cursor-item"] buttons instead (see render()),
-            // in the same flat nodes-then-links-then-hulls order.
-            const items = (this.renderer === 'canvas'
-                ? Array.from(this.renderRoot.querySelectorAll('[part="cursor-item"]'))
-                : [
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="node"]')),
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="link"]')),
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="hull"]')),
-                ]);
-            items[normalized]?.focus();
-        });
-    }
-    /**
-     * The forward physical arrow key (`ArrowRight` in LTR, `ArrowLeft` under
-     * `dir="rtl"` — see `isRtl()`) moves to the next roving-tabindex item, the
-     * backward one to the previous, in flat array order (`simNodes` then
-     * `simLinks`) — the same `forwardKey`/`backwardKey` swap this library's
-     * other "physical arrow key drives sequential previous/next" components
-     * (`<lr-tabs>`, `<lr-slider>`, `<lr-segmented>`) apply under RTL.
-     * `ArrowDown`/`ArrowUp` always mean next/previous regardless of direction.
-     */
-    onGraphKeyDown(e, index, activate) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.onGraphItemFocus(index);
-            activate(e);
-            if (index < this.simNodes.length) {
-                const now = performance.now();
-                if (this.lastKeyActivateIndex === index && now - this.lastKeyActivateTime <= EXPAND_KEY_INTERVAL_MS) {
-                    const node = this.simNodes[index];
-                    if (node)
-                        this.emit('lr-node-expand', { id: node.id });
-                    this.lastKeyActivateIndex = null;
-                }
-                else {
-                    this.lastKeyActivateIndex = index;
-                    this.lastKeyActivateTime = now;
-                }
-            }
-            return;
-        }
-        const count = this.graphItemCount();
-        if (!count)
-            return;
-        const rtl = isRtl(this);
-        const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
-        const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
-        let next = index;
-        if (e.key === forwardKey || e.key === 'ArrowDown')
-            next = Math.min(count - 1, index + 1);
-        else if (e.key === backwardKey || e.key === 'ArrowUp')
-            next = Math.max(0, index - 1);
-        else if (e.key === 'Home')
-            next = 0;
-        else if (e.key === 'End')
-            next = count - 1;
-        else
-            return;
-        e.preventDefault();
-        this.focusGraphItem(next);
-    }
-    render() {
-        if (this.loading) {
-            return html `
-        <div part="base">
-          <lr-skeleton
-            variant="rect"
-            style=${`--lr-skeleton-w:${this.safeWidth}px;--lr-skeleton-h:${this.safeHeight}px`}
-          ></lr-skeleton>
-        </div>
-      `;
-        }
-        if (!this.nodes.length) {
-            return html `<div part="base"><div part="empty">${this.localize('noData')}</div></div>`;
-        }
-        if (this.renderer === 'canvas') {
-            return html `
-        <div part="base">
-          <canvas
-            part="canvas"
-            role="group"
-            aria-label=${this.accessibleLabel ||
-                this.localize('graphDiagram', undefined, {
-                    nodeCount: this.simNodes.length,
-                    linkCount: this.simLinks.length,
-                })}
-            tabindex=${this.graphItemCount() ? '-1' : '0'}
-          ></canvas>
-          <div part="tooltip" hidden></div>
-          <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-            ${this.graphLiveText ||
-                (this.normalizedGraphItem() >= 0 ? this.graphItemAnnouncement(this.normalizedGraphItem()) : '')}
-          </div>
-          <ul part="data-list" class="sr-only" aria-label=${this.localize('graphDataList')}>
-            ${this.simNodes.map((node) => html `<li>${this.localize('graphNode', undefined, { label: this.nodeAccessibleText(node) })}</li>`)}
-            ${this.simLinks.map((link) => html `<li>${this.linkAccessibleText(link)}</li>`)}
-            ${this.visibleCommunities().map((entry) => html `<li>${this.localize('graphCommunity', undefined, {
-                label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
-            })}</li>`)}
-          </ul>
-          <div
-            part="cursor-items"
-            class="sr-only"
-            @keydown=${(e) => {
-                // Escape-clears-selection lives here (not on the canvas itself) because keydown from
-                // a focused cursor-item bubbles up through this container, never through the canvas
-                // -- the cursor-items list is canvas's sibling, not its descendant. Mirrors the svg
-                // template's own root-level Escape handler; each cursor-item's own onGraphKeyDown()
-                // (Enter/Space/arrows/Home/End) leaves Escape unhandled the same way a node/link
-                // element does, so it bubbles here.
-                if (e.key === 'Escape')
-                    this.clearSelection();
-            }}
-          >
-            ${this.simNodes.map((n, i) => html `
-                <!-- hit-area-exempt: this button lives inside [part="cursor-items"]'s
-                     class="sr-only" (internal/a11y.ts's clip: rect(0 0 0 0) box) -- it's
-                     the offscreen keyboard-roving a11y virtual cursor described in this
-                     class's own doc comment, never a visible/pointer-clickable box, so
-                     the 40px hit-area floor (meant for on-screen tap targets) doesn't apply. -->
-                <button
-                  part="cursor-item"
-                  tabindex=${this.normalizedGraphItem() === i ? '0' : '-1'}
-                  aria-label=${this.nodeAccessibleText(n)}
-                  @focus=${() => this.onGraphItemFocus(i)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, i, (ev) => this.onNodeClick(n, ev))}
-                  @click=${(e) => this.onNodeClick(n, e)}
-                ></button>
-              `)}
-            ${this.simLinks.map((l, li) => {
-                const i = this.simNodes.length + li;
-                return html `
-                <!-- hit-area-exempt: see the node cursor-item above -- same offscreen
-                     sr-only virtual-cursor button, no visible/pointer-clickable box. -->
-                <button
-                  part="cursor-item"
-                  tabindex=${this.normalizedGraphItem() === i ? '0' : '-1'}
-                  aria-label=${this.linkAccessibleText(l)}
-                  @focus=${() => this.onGraphItemFocus(i)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, i, (ev) => this.onLinkClick(l, ev))}
-                  @click=${(e) => this.onLinkClick(l, e)}
-                ></button>
-              `;
-            })}
-            ${this.visibleCommunities().map((entry, hi) => {
-                const i = this.simNodes.length + this.simLinks.length + hi;
-                const label = this.localize('graphCommunity', undefined, {
-                    label: entry.community.label ?? entry.community.id,
-                    count: entry.members.length,
-                });
-                return html `
-                <!-- hit-area-exempt: see the node cursor-item above -- same offscreen
-                     sr-only virtual-cursor button, no visible/pointer-clickable box. -->
-                <button
-                  part="cursor-item"
-                  tabindex=${this.normalizedGraphItem() === i ? '0' : '-1'}
-                  aria-label=${label}
-                  @focus=${() => this.onGraphItemFocus(i)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, i, () => this.onCommunityClick(entry.community))}
-                  @click=${() => this.onCommunityClick(entry.community)}
-                ></button>
-              `;
-            })}
-          </div>
-        </div>
-      `;
-        }
-        return html `
-      <div part="base">
-        <svg
-          part="svg"
-          role="group"
-          aria-label=${this.accessibleLabel ||
-            this.localize('graphDiagram', undefined, {
-                nodeCount: this.simNodes.length,
-                linkCount: this.simLinks.length,
-            })}
-          viewBox="0 0 ${this.safeWidth} ${this.safeHeight}"
-          tabindex=${this.graphItemCount() ? '-1' : '0'}
-          @click=${(e) => {
-            if (e.target === e.currentTarget)
-                this.clearSelection();
-        }}
-          @keydown=${(e) => {
-            if (e.key === 'Escape')
-                this.clearSelection();
-        }}
-        >
-          <defs>
-            <marker
-              id=${this.arrowMarkerId}
-              viewBox="0 0 10 10"
-              refX="9"
-              refY="5"
-              markerWidth="6"
-              markerHeight="6"
-              orient="auto-start-reverse"
-              markerUnits="strokeWidth"
-            >
-              <path part="arrowhead" d="M 0 0 L 10 5 L 0 10 z"></path>
-            </marker>
-          </defs>
-          <g transform="">
-            ${this.visibleCommunities().map((entry, hullIndex) => {
-            const itemIndex = this.simNodes.length + this.simLinks.length + hullIndex;
-            const hull = this.communityHull(entry.members);
-            const fill = sanitizeNodeColor(entry.community.color);
-            const label = this.localize('graphCommunity', undefined, {
-                label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
-            });
-            return svg `<g>
-                <path
-                  part="hull"
-                  role="button"
-                  tabindex=${this.normalizedGraphItem() === itemIndex ? '0' : '-1'}
-                  aria-label=${label}
-                  d=${hullPathD(hull)}
-                  style=${styleMap(fill ? { '--lr-graph-hull-fill': fill } : {})}
-                  @click=${() => this.onCommunityClick(entry.community)}
-                  @focus=${() => this.onGraphItemFocus(itemIndex)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, () => this.onCommunityClick(entry.community))}
-                ></path>
-                <text part="community-label" aria-hidden="true" x=${hullCentroidX(hull)} y=${hullTopY(hull) - HULL_PADDING}>${entry.community.label ?? entry.community.id}</text>
-              </g>`;
-        })}
-            ${this.simLinks.map((l, linkIndex) => {
-            const itemIndex = this.simNodes.length + linkIndex;
-            const coordinates = this.linkCoordinates(l);
-            const color = sanitizeNodeColor(l.color);
-            const dash = normalizeLinkDash(l.dash);
-            const labelPos = this.showEdgeLabels && l.label ? this.edgeLabelPosition(l) : undefined;
-            const lineEl = svg `<line
-                  part="link"
-                  role="button"
-                  tabindex=${this.normalizedGraphItem() === itemIndex ? '0' : '-1'}
-                  aria-label=${this.linkAccessibleText(l)}
-                  aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('link', this.linkKey(l))) : nothing}
-                  ?data-selected=${this.isSelected('link', this.linkKey(l))}
-                  ?data-dimmed=${this.isDimmed('link', this.linkKey(l))}
-                  stroke-width=${l.width ?? 1.5}
-                  stroke-dasharray=${dash ?? nothing}
-                  marker-end=${l.directed ? `url(#${this.arrowMarkerId})` : nothing}
-                  style=${styleMap(color ? { '--lr-link-color': color } : {})}
-                  x1=${coordinates.x1}
-                  y1=${coordinates.y1}
-                  x2=${coordinates.x2}
-                  y2=${coordinates.y2}
-                  @click=${(e) => this.onLinkClick(l, e)}
-                  @focus=${() => this.onGraphItemFocus(itemIndex)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, (ev) => this.onLinkClick(l, ev))}
-                  @mouseenter=${(e) => this.onLinkEnter(l, e)}
-                  @mouseleave=${(e) => this.onLinkLeave(l, e)}
-                >${l.description || l.label ? svg `<title>${l.description || l.label}</title>` : nothing}</line>`;
-            // Only wrap in a <g> when a label will actually be drawn -- an unconditional wrapper
-            // would change existing consumers' rendered link DOM (bare <line part="link">) even
-            // when showEdgeLabels is never set, breaking the "existing usage renders byte-for-byte
-            // identical output" contract this drawn-edge-label feature must preserve.
-            return labelPos
-                ? svg `<g>${lineEl}<text part="link-label" aria-hidden="true" text-anchor="middle" x=${labelPos.x} y=${labelPos.y}>${l.label}</text></g>`
-                : lineEl;
-        })}
-            ${this.danglingLinks.map((l) => {
-            const source = l.source;
-            const target = l.target;
-            return svg `<line
-                part="link"
-                data-dangling
-                aria-hidden="true"
-                x1=${source.x ?? 0}
-                y1=${source.y ?? 0}
-                x2=${target.x ?? 0}
-                y2=${target.y ?? 0}
-              ></line>`;
-        })}
-            ${this.simNodes.map((n, nodeIndex) => {
-            const shape = this.nodeShape(n);
-            const fill = this.nodeFill(n);
-            const itemIndex = nodeIndex;
-            const tabindex = this.normalizedGraphItem() === itemIndex ? '0' : '-1';
-            const label = this.nodeAccessibleText(n);
-            // Unlike link styling below (which always renders style=${styleMap(...)}, even as
-            // an empty string), an untyped/unknown-type node must render with NO style
-            // attribute at all -- not just an empty one -- so hasAttribute('style') distinguishes
-            // "no fill override" from "fill override present" for consumers/tests probing the DOM.
-            const style = fill ? styleMap({ '--lr-node-fill': fill }) : nothing;
-            const title = n.description ? svg `<title>${n.description}</title>` : nothing;
-            const shapeEl = shape === 'circle'
-                ? svg `<circle
-                      part="node"
-                      role="button"
-                      tabindex=${tabindex}
-                      aria-label=${label}
-                      aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('node', n.id)) : nothing}
-                      ?data-selected=${this.isSelected('node', n.id)}
-                      ?data-dimmed=${this.isDimmed('node', n.id)}
-                      r=${this.nodeRadius(n)}
-                      cx=${n.x ?? 0}
-                      cy=${n.y ?? 0}
-                      style=${style}
-                      @click=${(e) => this.onNodeClick(n, e)}
-                      @dblclick=${(e) => this.onNodeDblClick(n, e)}
-                      @focus=${() => this.onGraphItemFocus(itemIndex)}
-                      @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, (ev) => this.onNodeClick(n, ev))}
-                      @mouseenter=${(e) => this.onNodeEnter(n, e)}
-                      @mouseleave=${(e) => this.onNodeLeave(n, e)}
-                    >${title}</circle>`
-                : svg `<path
-                      part="node"
-                      role="button"
-                      tabindex=${tabindex}
-                      aria-label=${label}
-                      aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('node', n.id)) : nothing}
-                      ?data-selected=${this.isSelected('node', n.id)}
-                      ?data-dimmed=${this.isDimmed('node', n.id)}
-                      d=${shape === 'square' ? squarePath(this.nodeRadius(n)) : diamondPath(this.nodeRadius(n))}
-                      transform="translate(${n.x ?? 0},${n.y ?? 0})"
-                      style=${style}
-                      @click=${(e) => this.onNodeClick(n, e)}
-                      @dblclick=${(e) => this.onNodeDblClick(n, e)}
-                      @focus=${() => this.onGraphItemFocus(itemIndex)}
-                      @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, (ev) => this.onNodeClick(n, ev))}
-                      @mouseenter=${(e) => this.onNodeEnter(n, e)}
-                      @mouseleave=${(e) => this.onNodeLeave(n, e)}
-                    >${title}</path>`;
-            return svg `<g>
-                ${shapeEl}
-                ${n.label
-                ? svg `<text part="label" aria-hidden="true" x=${(n.x ?? 0) + this.nodeRadius(n) + 2} y=${n.y ?? 0}>${n.label}</text>`
-                : ''}
-                ${n.expandable
-                ? svg `<g part="expand-indicator" aria-hidden="true" transform="translate(${n.x ?? 0},${n.y ?? 0})">
-                      <circle r=${EXPAND_BADGE_R} cx=${this.nodeRadius(n) * EXPAND_BADGE_OFFSET} cy=${-this.nodeRadius(n) * EXPAND_BADGE_OFFSET}></circle>
-                      <path d="M ${this.nodeRadius(n) * EXPAND_BADGE_OFFSET - EXPAND_BADGE_R / 2} ${-this.nodeRadius(n) * EXPAND_BADGE_OFFSET} L ${this.nodeRadius(n) * EXPAND_BADGE_OFFSET + EXPAND_BADGE_R / 2} ${-this.nodeRadius(n) * EXPAND_BADGE_OFFSET} M ${this.nodeRadius(n) * EXPAND_BADGE_OFFSET} ${-this.nodeRadius(n) * EXPAND_BADGE_OFFSET - EXPAND_BADGE_R / 2} L ${this.nodeRadius(n) * EXPAND_BADGE_OFFSET} ${-this.nodeRadius(n) * EXPAND_BADGE_OFFSET + EXPAND_BADGE_R / 2}"></path>
-                    </g>`
-                : ''}
-              </g>`;
-        })}
-            <circle part="focus-halo" aria-hidden="true" hidden r="0" cx="0" cy="0"></circle>
-          </g>
-        </svg>
-        <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-          ${this.graphLiveText ||
-            (this.normalizedGraphItem() >= 0 ? this.graphItemAnnouncement(this.normalizedGraphItem()) : '')}
-        </div>
-        <ul part="data-list" class="sr-only" aria-label=${this.localize('graphDataList')}>
-          ${this.simNodes.map((node) => html `<li>${this.localize('graphNode', undefined, { label: this.nodeAccessibleText(node) })}</li>`)}
-          ${this.simLinks.map((link) => html `<li>${this.linkAccessibleText(link)}</li>`)}
-          ${this.visibleCommunities().map((entry) => html `<li>${this.localize('graphCommunity', undefined, {
-            label: entry.community.label ?? entry.community.id,
-            count: entry.members.length,
-        })}</li>`)}
-        </ul>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "nodes", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "links", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "nodeTypes", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "hiddenTypes", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "communities", void 0);
-__decorate([
-    property()
-], LyraGraph.prototype, "layout", void 0);
-__decorate([
-    property()
-], LyraGraph.prototype, "renderer", void 0);
-__decorate([
-    property({ type: Number })
-], LyraGraph.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], LyraGraph.prototype, "height", void 0);
-__decorate([
-    property({ type: Number, attribute: 'charge-strength' })
-], LyraGraph.prototype, "chargeStrength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'link-distance' })
-], LyraGraph.prototype, "linkDistance", void 0);
-__decorate([
-    property({ type: Number, attribute: 'min-zoom' })
-], LyraGraph.prototype, "minZoom", void 0);
-__decorate([
-    property({ type: Number, attribute: 'max-zoom' })
-], LyraGraph.prototype, "maxZoom", void 0);
-__decorate([
-    property({ attribute: 'aria-label' })
-], LyraGraph.prototype, "accessibleLabel", void 0);
-__decorate([
-    property({ type: Number })
-], LyraGraph.prototype, "seed", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-edge-labels' })
-], LyraGraph.prototype, "showEdgeLabels", void 0);
-__decorate([
-    property({ type: Number, attribute: 'edge-label-min-zoom' })
-], LyraGraph.prototype, "edgeLabelMinZoom", void 0);
-__decorate([
-    property({ attribute: 'focus-id' })
-], LyraGraph.prototype, "focusId", void 0);
-__decorate([
-    property({ attribute: 'selection-mode' })
-], LyraGraph.prototype, "selectionMode", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "selectedNodeIds", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "selectedLinkIds", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "dimmedNodeIds", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "dimmedLinkIds", void 0);
-__decorate([
-    state()
-], LyraGraph.prototype, "loading", void 0);
-__decorate([
-    state()
-], LyraGraph.prototype, "simNodes", void 0);
-__decorate([
-    state()
-], LyraGraph.prototype, "simLinks", void 0);
-__decorate([
-    state()
-], LyraGraph.prototype, "activeGraphItem", void 0);
-__decorate([
-    state()
-], LyraGraph.prototype, "graphLiveText", void 0);
-__decorate([
-    query('canvas')
-], LyraGraph.prototype, "canvasEl", void 0);
-//# sourceMappingURL=graph.class.js.map