@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/graph/graph.js

@@ -1,579 +1,6 @@
-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, svg } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './graph.class.js';
+import { LyraGraph } from './graph.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { srOnly } from '../../internal/a11y.js';
-import { styles } from './graph.styles.js';
-import { loadD3 } from './graph-loader.js';
-import '../skeleton/skeleton.js';
-function prefersReducedMotion() {
-    return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}
-/**
- * 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
- * `--lyra-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;
-}
-/**
- * `<lyra-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.
- *
- * @customElement lyra-graph
- * @event lyra-node-click - `detail: { id }`.
- * @event lyra-link-click - `detail: { source, target }`.
- * @csspart base - The graph wrapper.
- * @csspart svg - The graph SVG.
- * @csspart node - A graph node.
- * @csspart link - A graph link.
- * @csspart label - A node label.
- * @csspart live-region - The current graph item announcement.
- * @csspart data-list - A visually hidden list alternative for graph data.
- */
-export class LyraGraph extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.nodes = [];
-        this.links = [];
-        this.width = 800;
-        this.height = 600;
-        this.chargeStrength = -300;
-        this.linkDistance = 100;
-        this.minZoom = 0.1;
-        this.maxZoom = 8;
-        /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
-        this.loading = true;
-        this.simNodes = [];
-        this.simLinks = [];
-        /** 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.linkEls = [];
-    }
-    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();
-            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();
-    }
-    /**
-     * 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;
-    }
-    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'))) {
-            this.rebuildSimulation();
-        }
-    }
-    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')) {
-            // 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.width / 2, this.height / 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.chargeStrength);
-                if (changed.has('linkDistance'))
-                    this.linkForce?.distance(this.linkDistance);
-                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);
-    }
-    /**
-     * 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;
-        const svgEl = this.renderRoot.querySelector('svg');
-        if (svgEl && svgEl !== this.zoomedEl) {
-            this.zoomedEl = svgEl;
-            this.gEl = this.renderRoot.querySelector('g') ?? undefined;
-            this.zoomBehavior = this.d3
-                .zoom()
-                .scaleExtent([this.minZoom, this.maxZoom])
-                .on('zoom', (event) => {
-                this.gEl?.setAttribute('transform', event.transform.toString());
-            });
-            this.d3.select(svgEl).call(this.zoomBehavior);
-        }
-        else if (this.zoomBehavior && (changed.has('minZoom') || changed.has('maxZoom'))) {
-            this.zoomBehavior.scaleExtent([this.minZoom, this.maxZoom]);
-        }
-        if (!(changed.has('simNodes') || changed.has('simLinks')))
-            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.linkEls = Array.from(this.renderRoot.querySelectorAll('[part="link"]'));
-        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) => {
-                // 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) => {
-                if (!event.active)
-                    this.simulation?.alphaTarget(0);
-                n.fx = null;
-                n.fy = null;
-            }));
-        });
-    }
-    /**
-     * 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() {
-        this.simNodes.forEach((n, i) => {
-            const circle = this.nodeEls[i];
-            if (circle) {
-                circle.setAttribute('cx', String(n.x ?? 0));
-                circle.setAttribute('cy', String(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 source = l.source;
-            const target = l.target;
-            line.setAttribute('x1', String(source.x ?? 0));
-            line.setAttribute('y1', String(source.y ?? 0));
-            line.setAttribute('x2', String(target.x ?? 0));
-            line.setAttribute('y2', String(target.y ?? 0));
-        });
-    }
-    rebuildSimulation() {
-        if (!this.d3)
-            return;
-        this.simulation?.stop();
-        this.boundNodeEls = new WeakSet();
-        // 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 prevById = new Map(this.simNodes.map((n) => [n.id, n]));
-        const nodes = this.nodes.map((n) => {
-            const prev = prevById.get(n.id);
-            return prev ? { ...prev, ...n } : { ...n };
-        });
-        const byId = new Map(nodes.map((n) => [n.id, n]));
-        const links = this.links
-            .filter((l) => byId.has(l.source) && byId.has(l.target))
-            .map((l) => ({ ...l, source: byId.get(l.source), target: byId.get(l.target) }));
-        // Give brand-new nodes (no carried-over position from prevById above) 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.
-        const seed = this.seed;
-        if (seed != null) {
-            for (const n of nodes) {
-                if (n.x != null && n.y != null)
-                    continue;
-                const rng = mulberry32(hashNodeSeed(seed, n.id));
-                n.x = rng() * this.width;
-                n.y = rng() * this.height;
-            }
-        }
-        this.linkForce = this.d3.forceLink(links).distance(this.linkDistance);
-        this.chargeForce = this.d3.forceManyBody().strength(this.chargeStrength);
-        const simulation = this.d3
-            .forceSimulation(nodes)
-            .force('link', this.linkForce)
-            .force('charge', this.chargeForce)
-            .force('center', this.d3.forceCenter(this.width / 2, this.height / 2))
-            .force('collide', this.d3.forceCollide().radius((n) => this.nodeRadius(n) + 10))
-            .on('tick', () => this.onTick());
-        this.simulation = simulation;
-        if (prefersReducedMotion() || this.seed != null) {
-            // 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();
-        }
-        // 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;
-    }
-    onNodeClick(node) {
-        this.emit('lyra-node-click', { id: node.id });
-    }
-    onLinkClick(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);
-        this.emit('lyra-link-click', { source, target });
-    }
-    graphItemCount() {
-        return this.simNodes.length + this.simLinks.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 ? `Node ${node.label ?? node.id}` : '';
-        }
-        const link = this.simLinks[index - this.simNodes.length];
-        if (!link)
-            return '';
-        const source = typeof link.source === 'object' ? link.source.label ?? link.source.id : String(link.source);
-        const target = typeof link.target === 'object' ? link.target.label ?? link.target.id : String(link.target);
-        return `Link from ${source} to ${target}`;
-    }
-    onGraphItemFocus(index) {
-        if (this.normalizedGraphItem(index) < 0)
-            return;
-        this.activeGraphItem = index;
-        this.graphLiveText = `${this.graphItemText(index)} (${index + 1} of ${this.graphItemCount()})`;
-    }
-    focusGraphItem(index) {
-        const normalized = this.normalizedGraphItem(index);
-        if (normalized < 0)
-            return;
-        this.activeGraphItem = normalized;
-        this.graphLiveText = `${this.graphItemText(normalized)} (${normalized + 1} of ${this.graphItemCount()})`;
-        void this.updateComplete.then(() => {
-            const items = [
-                ...Array.from(this.renderRoot.querySelectorAll('[part="node"]')),
-                ...Array.from(this.renderRoot.querySelectorAll('[part="link"]')),
-            ];
-            items[normalized]?.focus();
-        });
-    }
-    onGraphKeyDown(e, index, activate) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.onGraphItemFocus(index);
-            activate();
-            return;
-        }
-        const count = this.graphItemCount();
-        if (!count)
-            return;
-        let next = index;
-        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
-            next = Math.min(count - 1, index + 1);
-        else if (e.key === 'ArrowLeft' || 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">
-          <lyra-skeleton
-            variant="rect"
-            style=${`--lyra-skeleton-w:${this.width}px;--lyra-skeleton-h:${this.height}px`}
-          ></lyra-skeleton>
-        </div>
-      `;
-        }
-        return html `
-      <div part="base">
-        <svg
-          part="svg"
-          role="group"
-          aria-label="Node-link diagram with ${this.simNodes.length} nodes and ${this.simLinks.length} links"
-          viewBox="0 0 ${this.width} ${this.height}"
-          tabindex=${this.graphItemCount() ? '-1' : '0'}
-        >
-          <g transform="">
-            ${this.simLinks.map((l, linkIndex) => {
-            const source = l.source;
-            const target = l.target;
-            const itemIndex = this.simNodes.length + linkIndex;
-            return svg `<line
-                part="link"
-                role="button"
-                tabindex=${this.normalizedGraphItem() === itemIndex ? '0' : '-1'}
-                aria-label="Link from ${source.label ?? source.id} to ${target.label ?? target.id}"
-                stroke-width=${l.width ?? 1.5}
-                x1=${source.x ?? 0}
-                y1=${source.y ?? 0}
-                x2=${target.x ?? 0}
-                y2=${target.y ?? 0}
-                @click=${() => this.onLinkClick(l)}
-                @focus=${() => this.onGraphItemFocus(itemIndex)}
-                @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, () => this.onLinkClick(l))}
-              ></line>`;
-        })}
-            ${this.simNodes.map((n, nodeIndex) => {
-            const fill = sanitizeNodeColor(n.color);
-            const itemIndex = nodeIndex;
-            return svg `<g>
-                <circle
-                  part="node"
-                  role="button"
-                  tabindex=${this.normalizedGraphItem() === itemIndex ? '0' : '-1'}
-                  aria-label=${n.label ?? n.id}
-                  r=${this.nodeRadius(n)}
-                  cx=${n.x ?? 0}
-                  cy=${n.y ?? 0}
-                  style=${styleMap(fill ? { '--lyra-node-fill': fill } : {})}
-                  @click=${() => this.onNodeClick(n)}
-                  @focus=${() => this.onGraphItemFocus(itemIndex)}
-                  @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, () => this.onNodeClick(n))}
-                ></circle>
-                ${n.label
-                ? svg `<text part="label" aria-hidden="true" x=${(n.x ?? 0) + this.nodeRadius(n) + 2} y=${n.y ?? 0}>${n.label}</text>`
-                : ''}
-              </g>`;
-        })}
-          </g>
-        </svg>
-        <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-          ${this.graphLiveText || (this.normalizedGraphItem() >= 0 ? `${this.graphItemText(this.normalizedGraphItem())} (1 of ${this.graphItemCount()})` : '')}
-        </div>
-        <ul part="data-list" class="sr-only" aria-label="Graph data">
-          ${this.simNodes.map((node) => html `<li>Node ${node.label ?? node.id}</li>`)}
-          ${this.simLinks.map((link) => {
-            const source = link.source;
-            const target = link.target;
-            return html `<li>Link from ${source.label ?? source.id} to ${target.label ?? target.id}</li>`;
-        })}
-        </ul>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "nodes", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGraph.prototype, "links", 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({ type: Number })
-], LyraGraph.prototype, "seed", 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);
+import "../skeleton/skeleton.js";
 defineElement('graph', LyraGraph);
+//# sourceMappingURL=graph.js.map

package/dist/components/graph/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","sourceRoot":"","sources":["../../../src/components/graph/graph.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/graph/graph.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=graph.styles.d.ts.map

package/dist/components/graph/graph.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.styles.d.ts","sourceRoot":"","sources":["../../../src/components/graph/graph.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyClB,CAAC"}

package/dist/components/graph/graph.styles.js

@@ -17,6 +17,10 @@ export const styles = css `
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);
   }
+  [part='link'][data-dangling] {
+    stroke-dasharray: var(--lyra-size-2px) var(--lyra-size-2px);
+    opacity: var(--lyra-opacity-disabled);
+  }
   [part='node'] {
     /* --lyra-node-fill is set inline per-node (see graph.ts) from GraphNode.color;
        falls back to the brand token when a node doesn't supply one. An inline
@@ -31,9 +35,10 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
   [part='label'] {
-    font-size: 0.625rem;
+    font-size: var(--lyra-font-size-2xs);
     fill: var(--lyra-color-text);
     font-family: var(--lyra-font);
     pointer-events: none;
   }
 `;
+//# sourceMappingURL=graph.styles.js.map

package/dist/components/graph/graph.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.styles.js","sourceRoot":"","sources":["../../../src/components/graph/graph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCxB,CAAC"}

package/dist/components/heatmap/calendar-grid.d.ts

@@ -48,3 +48,4 @@ export declare function buildCalendarGrid(days: CalendarDay[], firstDayOfWeek?:
 };
 /** Splits `value`'s rank within `sorted` (ascending, pre-sorted by the caller) into `bucketCount` quartile-style buckets. */
 export declare function quartileBucket(value: number, sorted: number[], bucketCount: number): number;
+//# sourceMappingURL=calendar-grid.d.ts.map

package/dist/components/heatmap/calendar-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid.d.ts","sourceRoot":"","sources":["../../../src/components/heatmap/calendar-grid.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,sJAAsJ;IACtJ,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB;AAID,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAG9C;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,WAAW,EAAE,EACnB,cAAc,SAAI,GACjB;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,IAAI,CAAC;IACrB,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAChD,CAiDA;AAED,6HAA6H;AAC7H,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAa3F"}

package/dist/components/heatmap/calendar-grid.js

@@ -91,3 +91,4 @@ export function quartileBucket(value, sorted, bucketCount) {
     const rank = lo / sorted.length;
     return Math.min(bucketCount - 1, Math.floor(rank * bucketCount));
 }
+//# sourceMappingURL=calendar-grid.js.map

package/dist/components/heatmap/calendar-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid.js","sourceRoot":"","sources":["../../../src/components/heatmap/calendar-grid.ts"],"names":[],"mappings":"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"}

package/dist/components/heatmap/heatmap-scale.d.ts

@@ -24,3 +24,12 @@ export declare function minMax(values: number[]): [number, number] | null;
  * buckets to the lowest step rather than being misread as no-data.
  */
 export declare function sqrtStep(count: number, max: number, steps: number): number;
+/**
+ * Linear (non-quantile) bucket index in `[0, steps-1]` for `value` in `[lo, hi]` — mirrors
+ * `linearAlpha()`'s own min-max normalization (matrix mode's default continuous color mapping),
+ * discretized into `steps` buckets instead of a continuous alpha. Used when a discrete
+ * `colorSteps` ramp replaces the default continuous 2-endpoint interpolation for the `'linear'`
+ * scale case (the `'sqrt'` scale already has its own discrete `sqrtStep()`).
+ */
+export declare function linearBucket(value: number, lo: number, hi: number, steps: number): number;
+//# sourceMappingURL=heatmap-scale.d.ts.map

package/dist/components/heatmap/heatmap-scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-scale.d.ts","sourceRoot":"","sources":["../../../src/components/heatmap/heatmap-scale.ts"],"names":[],"mappings":"AAAA,mIAAmI;AACnI,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAIzE;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAUhE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAK1E;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIzF"}