@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -1,123 +1,3 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import '../skeleton/skeleton.js';
-export interface GraphNode {
-    id: string;
-    label?: string;
-    radius?: number;
-    color?: string;
-}
-export interface GraphLink {
-    source: string;
-    target: string;
-    width?: number;
-}
-/**
- * `<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`.
- *
- * @customElement lyra-graph
- * @event lyra-node-click - `detail: { id }`.
- * @event lyra-link-click - `detail: { source, target }`.
- * @csspart base, svg, node, link, label
- */
-export declare class LyraGraph extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    nodes: GraphNode[];
-    links: GraphLink[];
-    width: number;
-    height: number;
-    chargeStrength: number;
-    linkDistance: number;
-    minZoom: number;
-    maxZoom: number;
-    /** When set, seeds each node's initial x/y deterministically (keyed by
-     *  node id, not array index) instead of forceSimulation()'s own random
-     *  start, and settles the simulation synchronously — see rebuildSimulation(). */
-    seed?: number;
-    /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
-    private loading;
-    private simNodes;
-    private simLinks;
-    private simulation?;
-    /** The live charge/link force objects, kept so chargeStrength/linkDistance
-     *  changes can retune them in place (see updated()) instead of requiring a
-     *  full rebuildSimulation(). */
-    private chargeForce?;
-    private linkForce?;
-    private d3?;
-    /** The `<svg>` currently wired up with d3-zoom (guards a one-time bind). */
-    private zoomedEl?;
-    /** The pan/zoom `<g>`, cached alongside `zoomedEl` so the zoom handler can
-     *  write the transform straight to the DOM (see applyInteractions()) instead
-     *  of round-tripping through a Lit reactive property on every pan/zoom event. */
-    private gEl?;
-    /** The live zoom behavior, kept so minZoom/maxZoom changes can retune its
-     *  scaleExtent in place (see applyInteractions()) instead of requiring the
-     *  `<svg>` to be rebound. */
-    private zoomBehavior?;
-    /** 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. */
-    private boundNodeEls;
-    /** 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). */
-    private nodeEls;
-    private nodeLabelEls;
-    private linkEls;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private nodeRadius;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    /**
-     * 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.
-     */
-    private applyInteractions;
-    /**
-     * 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.
-     */
-    private onTick;
-    private rebuildSimulation;
-    private onNodeClick;
-    private onLinkClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-graph': LyraGraph;
-    }
-}
+export * from './graph.class.js';
+import "../skeleton/skeleton.js";
+//# sourceMappingURL=graph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../../src/components/graph/graph.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAGjC,OAAO,yBAAyB,CAAC"}

package/dist/components/graph/graph.js

@@ -1,467 +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 { 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`.
- *
- * @customElement lyra-graph
- * @event lyra-node-click - `detail: { id }`.
- * @event lyra-link-click - `detail: { source, target }`.
- * @csspart base, svg, node, link, label
- */
-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 = [];
-        /** 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]; }
-    connectedCallback() {
-        super.connectedCallback();
-        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();
-    }
-    nodeRadius(n) {
-        return n.radius ?? (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 });
-    }
-    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}"
-        >
-          <g transform="">
-            ${this.simLinks.map((l) => {
-            const source = l.source;
-            const target = l.target;
-            return svg `<line
-                part="link"
-                role="button"
-                tabindex="0"
-                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)}
-                @keydown=${(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.onLinkClick(l);
-                }
-            }}
-              ></line>`;
-        })}
-            ${this.simNodes.map((n) => {
-            const fill = sanitizeNodeColor(n.color);
-            return svg `<g>
-                <circle
-                  part="node"
-                  role="button"
-                  tabindex="0"
-                  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)}
-                  @keydown=${(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    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>
-    `;
-    }
-}
-__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);
+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,yBAqClB,CAAC"}

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

@@ -31,9 +31,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC"}

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

@@ -6,17 +6,26 @@ export interface CalendarDay {
 export interface CalendarCell {
     date: string;
     value: number;
-    /** 0-based week column, counting from the grid's first (earliest-containing) Sunday. */
+    /** 0-based week column, counting from the grid's first (earliest-containing) anchor week — see `buildCalendarGrid()`'s `firstDayOfWeek` parameter. */
     week: number;
-    /** 0 (Sunday) .. 6 (Saturday). */
+    /**
+     * Day-of-week position within the row, relative to `firstDayOfWeek`: 0 for
+     * the anchor weekday itself, up to 6 for the day immediately before it.
+     * With the default `firstDayOfWeek` of 0, this is the familiar 0 (Sunday)
+     * .. 6 (Saturday) numbering, unchanged from before `firstDayOfWeek` existed.
+     */
     weekday: number;
 }
 /** Parses a `yyyy-mm-dd` string as UTC midnight, avoiding local-timezone day-boundary drift. */
 export declare function parseIsoDate(iso: string): Date;
 /**
- * Lays `days` out onto a GitHub-style Sunday-Saturday x week grid. `days`
- * need not be sorted or contiguous; the grid spans from the earliest to the
- * latest date present, anchored at the Sunday on/before the earliest date.
+ * Lays `days` out onto a GitHub-style week grid, 7 rows deep. `days` need not
+ * be sorted or contiguous; the grid spans from the earliest to the latest
+ * date present, anchored at the `firstDayOfWeek`-weekday on/before the
+ * earliest date (`firstDayOfWeek` is 0–6, Sunday-first by default — same
+ * numbering as `CalendarCell.weekday`). With the default `firstDayOfWeek` of
+ * 0, this is the Sunday on/before the earliest date, exactly as before this
+ * parameter existed.
  *
  * An entry whose `date` doesn't parse to a valid calendar date (e.g. `''` or
  * `'2026-03'`) is dropped rather than included: `parseIsoDate` on a malformed
@@ -28,7 +37,7 @@ export declare function parseIsoDate(iso: string): Date;
  * over into March) is dropped rather than silently renormalized — see
  * `isCalendarValid()`.
  */
-export declare function buildCalendarGrid(days: CalendarDay[]): {
+export declare function buildCalendarGrid(days: CalendarDay[], firstDayOfWeek?: number): {
     cells: CalendarCell[];
     weekCount: number;
     firstWeekStart: Date;
@@ -39,3 +48,4 @@ export declare function buildCalendarGrid(days: CalendarDay[]): {
 };
 /** 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