@aceshooting/lyra-ui 0.1.1 → 0.1.3

package/dist/components/graph/graph.js

@@ -0,0 +1,276 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './graph.styles.js';
+import '../skeleton/skeleton.js';
+let d3Modules;
+/**
+ * Lazily loads the optional peer dependencies `d3-force`/`d3-drag`/`d3-zoom`/
+ * `d3-selection` once per page. Resolves to `null` (with a one-time warning)
+ * if they aren't installed — mirrors `<lyra-flag>`'s peer-dependency pattern.
+ */
+function loadD3() {
+    if (!d3Modules) {
+        d3Modules = Promise.all([
+            import('d3-force'),
+            import('d3-drag'),
+            import('d3-zoom'),
+            import('d3-selection'),
+        ])
+            .then(([force, dragMod, zoomMod, selectionMod]) => ({
+            forceSimulation: force.forceSimulation,
+            forceLink: force.forceLink,
+            forceManyBody: force.forceManyBody,
+            forceCenter: force.forceCenter,
+            forceCollide: force.forceCollide,
+            drag: dragMod.drag,
+            zoom: zoomMod.zoom,
+            select: selectionMod.select,
+        }))
+            .catch(() => {
+            console.warn('<lyra-graph> needs the optional peer dependencies `d3-force`, `d3-drag`, ' +
+                '`d3-zoom`, and `d3-selection` — install them with `pnpm add d3-force d3-drag d3-zoom d3-selection`.');
+            return null;
+        });
+    }
+    return d3Modules;
+}
+const MIN_RADIUS = 6;
+const MAX_RADIUS = 24;
+/**
+ * `<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).
+ *
+ * @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;
+        /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
+        this.loading = true;
+        this.simNodes = [];
+        this.simLinks = [];
+        /** Current pan/zoom transform (SVG `transform` attribute syntax), driven by d3-zoom. */
+        this.transform = '';
+        /** 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();
+    }
+    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;
+    }
+    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')) {
+            this.rebuildSimulation();
+        }
+        else 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();
+        }
+        this.applyInteractions();
+    }
+    /**
+     * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
+     * (per-node drag) against the just-rendered DOM. Runs after every render:
+     * binding the `<svg>` is a one-time no-op guard (`zoomedEl`), and node
+     * `<circle>`s are skipped once bound (`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.
+     */
+    applyInteractions() {
+        if (!this.d3)
+            return;
+        const svgEl = this.renderRoot.querySelector('svg');
+        if (svgEl && svgEl !== this.zoomedEl) {
+            this.zoomedEl = svgEl;
+            const zoomBehavior = this.d3.zoom().on('zoom', (event) => {
+                this.transform = event.transform.toString();
+            });
+            this.d3.select(svgEl).call(zoomBehavior);
+        }
+        const nodeEls = this.renderRoot.querySelectorAll('[part="node"]');
+        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;
+            }));
+        });
+    }
+    rebuildSimulation() {
+        if (!this.d3)
+            return;
+        this.simulation?.stop();
+        this.boundNodeEls = new WeakSet();
+        const nodes = this.nodes.map((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) }));
+        this.simulation = this.d3
+            .forceSimulation(nodes)
+            .force('link', this.d3.forceLink(links).distance(this.linkDistance))
+            .force('charge', this.d3.forceManyBody().strength(this.chargeStrength))
+            .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.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" viewBox="0 0 ${this.width} ${this.height}">
+          <g transform=${this.transform}>
+            ${this.simLinks.map((l) => {
+            const source = l.source;
+            const target = l.target;
+            return svg `<line
+                part="link"
+                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)}
+              ></line>`;
+        })}
+            ${this.simNodes.map((n) => 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=${n.color ? `--lyra-node-fill:${n.color}` : ''}
+                  @click=${() => this.onNodeClick(n)}
+                  @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.onNodeClick(n);
+            }
+        }}
+                ></circle>
+                ${n.label
+            ? svg `<text part="label" 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([
+    state()
+], LyraGraph.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraGraph.prototype, "simNodes", void 0);
+__decorate([
+    state()
+], LyraGraph.prototype, "simLinks", void 0);
+__decorate([
+    state()
+], LyraGraph.prototype, "transform", void 0);
+defineElement('graph', LyraGraph);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  [part='link'] {
+    stroke: var(--lyra-color-border);
+    fill: none;
+  }
+  [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
+       style declaration always wins the cascade over this selector, so setting
+       fill directly here (rather than via the presentation attribute) is what
+       lets a per-node color actually take effect. */
+    fill: var(--lyra-node-fill, var(--lyra-color-brand));
+    cursor: pointer;
+  }
+  [part='node']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='label'] {
+    font-size: 10px;
+    fill: var(--lyra-color-text);
+    font-family: var(--lyra-font);
+    pointer-events: none;
+  }
+`;

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

@@ -0,0 +1,8 @@
+/** Maps `value` in `[lo, hi]` to a 0.1–1.0 alpha, matching the cd-heatmap ramp. */
+export declare function linearAlpha(value: number, lo: number, hi: number): number;
+/**
+ * Square-root-scaled bucket index in `[0, steps-1]`, or `-1` for no-data.
+ * Compresses large counts so a single heavy cell doesn't wash out the rest
+ * of a sequential color ramp.
+ */
+export declare function sqrtStep(count: number, max: number, steps: number): number;

package/dist/components/heatmap/heatmap-scale.js

@@ -0,0 +1,17 @@
+/** Maps `value` in `[lo, hi]` to a 0.1–1.0 alpha, matching the cd-heatmap ramp. */
+export function linearAlpha(value, lo, hi) {
+    const span = hi - lo || 1;
+    const t = (value - lo) / span;
+    return 0.1 + 0.9 * Math.min(1, Math.max(0, t));
+}
+/**
+ * Square-root-scaled bucket index in `[0, steps-1]`, or `-1` for no-data.
+ * Compresses large counts so a single heavy cell doesn't wash out the rest
+ * of a sequential color ramp.
+ */
+export function sqrtStep(count, max, steps) {
+    if (count <= 0 || max <= 0)
+        return -1;
+    const ratio = Math.sqrt(count) / Math.sqrt(max);
+    return Math.min(steps - 1, Math.floor(ratio * steps));
+}

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

@@ -0,0 +1,66 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * Parses a strict `#rgb` or `#rrggbb` hex string into an `[r, g, b]` triple,
+ * or `null` if `hex` isn't one (rather than silently coercing an unparsable
+ * string to `0` via `Number.parseInt(..., 16)` returning `NaN`).
+ */
+export declare function hexToRgb(hex: string): [number, number, number] | null;
+/**
+ * Resolves any syntactically valid CSS `<color>` — hex, `rgb()`, `hsl()`,
+ * `oklch()`, a named color, etc. — to an `[r, g, b]` triple.
+ *
+ * Hand-rolling a parser for every CSS color syntax is unnecessary and
+ * error-prone (a naive hex-only parser silently turns an unrecognized format
+ * into `NaN` -> `0`, i.e. solid black). The canvas 2D context already
+ * implements the full CSS color grammar via its `fillStyle` setter, so this
+ * normalizes through that instead. Assigning an unparsable string to
+ * `fillStyle` is a spec'd no-op (the previous value is kept, it never
+ * throws), so a sentinel round-trip is used to detect that case and fall
+ * back to `fallbackHex` (with a one-time `console.warn`) instead of
+ * silently drawing the wrong color.
+ */
+export declare function resolveRgb(color: string, fallbackHex: string): [number, number, number];
+/** Linearly interpolates between two CSS colors (any valid syntax) at `t` in `[0, 1]`. */
+export declare function mixColor(fromColor: string, toColor: string, t: number): string;
+/**
+ * `<lyra-heatmap>` — a Canvas matrix heatmap with a DPR-aware, resize-aware
+ * redraw loop. `-1` cells are treated as "no data". The sequential color
+ * ramp's endpoints are read from the `--lyra-heatmap-scale-lo`/`-hi` custom
+ * properties (declared in `heatmap.styles.ts`) so hosts can retheme it —
+ * canvas can't consume `var()` directly, so they're resolved once per draw
+ * via `getComputedStyle`, then normalized to RGB by `resolveRgb()` (any
+ * valid CSS color syntax, not just hex — see its doc comment).
+ *
+ * @customElement lyra-heatmap
+ * @csspart base, canvas, legend
+ */
+export declare class LyraHeatmap extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    rowLabels: string[];
+    colLabels: string[];
+    values: number[][];
+    cellSize: number;
+    valueLabel: string;
+    scale: 'linear' | 'sqrt';
+    private canvas?;
+    private resizeObserver?;
+    private dprQuery?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private watchDpr;
+    private onDprChange;
+    protected willUpdate(): void;
+    protected updated(): void;
+    /** Reads the customizable ramp endpoints off the host's computed style. */
+    private scaleEndpoints;
+    /** Resolves the `--lyra-color-text-quiet` chrome token for axis labels. */
+    private labelColor;
+    private draw;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-heatmap': LyraHeatmap;
+    }
+}

package/dist/components/heatmap/heatmap.js

@@ -0,0 +1,252 @@
+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 } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { linearAlpha, sqrtStep } from './heatmap-scale.js';
+import { styles } from './heatmap.styles.js';
+const PAD_LEFT = 60;
+const PAD_TOP = 20;
+const NO_DATA_FILL = 'rgba(128,128,128,0.25)';
+const RAMP_STEPS = 7;
+const FALLBACK_SCALE_LO = '#cde2fb';
+const FALLBACK_SCALE_HI = '#0969da';
+const HEX_RE = /^([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const RGB_RE = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i;
+/**
+ * Parses a strict `#rgb` or `#rrggbb` hex string into an `[r, g, b]` triple,
+ * or `null` if `hex` isn't one (rather than silently coercing an unparsable
+ * string to `0` via `Number.parseInt(..., 16)` returning `NaN`).
+ */
+export function hexToRgb(hex) {
+    const clean = hex.trim().replace('#', '');
+    if (!HEX_RE.test(clean))
+        return null;
+    const full = clean.length === 3 ? clean.split('').map((c) => c + c).join('') : clean;
+    const num = Number.parseInt(full, 16);
+    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+}
+function parseRgbString(value) {
+    const match = RGB_RE.exec(value);
+    return match ? [Number(match[1]), Number(match[2]), Number(match[3])] : null;
+}
+let scratchCtx;
+/** A detached 1x1 canvas used solely to normalize CSS color strings. */
+function getScratchCtx() {
+    if (scratchCtx === undefined) {
+        scratchCtx = document.createElement('canvas').getContext('2d');
+    }
+    return scratchCtx;
+}
+const warnedInvalidColors = new Set();
+function warnInvalidColor(color) {
+    if (warnedInvalidColors.has(color))
+        return;
+    warnedInvalidColors.add(color);
+    console.warn(`<lyra-heatmap> could not parse "${color}" (set via --lyra-heatmap-scale-lo/-hi) as a CSS ` +
+        'color; falling back to the default ramp endpoint.');
+}
+/**
+ * Resolves any syntactically valid CSS `<color>` — hex, `rgb()`, `hsl()`,
+ * `oklch()`, a named color, etc. — to an `[r, g, b]` triple.
+ *
+ * Hand-rolling a parser for every CSS color syntax is unnecessary and
+ * error-prone (a naive hex-only parser silently turns an unrecognized format
+ * into `NaN` -> `0`, i.e. solid black). The canvas 2D context already
+ * implements the full CSS color grammar via its `fillStyle` setter, so this
+ * normalizes through that instead. Assigning an unparsable string to
+ * `fillStyle` is a spec'd no-op (the previous value is kept, it never
+ * throws), so a sentinel round-trip is used to detect that case and fall
+ * back to `fallbackHex` (with a one-time `console.warn`) instead of
+ * silently drawing the wrong color.
+ */
+export function resolveRgb(color, fallbackHex) {
+    const fallback = hexToRgb(fallbackHex) ?? [0, 0, 0];
+    const direct = hexToRgb(color);
+    if (direct)
+        return direct;
+    const ctx = getScratchCtx();
+    if (!ctx)
+        return fallback;
+    const sentinel = 'rgb(1, 2, 3)';
+    ctx.fillStyle = sentinel;
+    const sentinelNormalized = ctx.fillStyle;
+    ctx.fillStyle = color;
+    if (ctx.fillStyle === sentinelNormalized && color.trim() !== sentinel) {
+        warnInvalidColor(color);
+        return fallback;
+    }
+    const normalized = ctx.fillStyle;
+    return hexToRgb(normalized) ?? parseRgbString(normalized) ?? fallback;
+}
+/** Linearly interpolates between two already-resolved `[r, g, b]` triples at `t` in `[0, 1]`. */
+function mixRgb(from, to, t) {
+    const clamped = Math.min(1, Math.max(0, t));
+    const r = Math.round(from[0] + (to[0] - from[0]) * clamped);
+    const g = Math.round(from[1] + (to[1] - from[1]) * clamped);
+    const b = Math.round(from[2] + (to[2] - from[2]) * clamped);
+    return `rgb(${r}, ${g}, ${b})`;
+}
+/** Linearly interpolates between two CSS colors (any valid syntax) at `t` in `[0, 1]`. */
+export function mixColor(fromColor, toColor, t) {
+    return mixRgb(resolveRgb(fromColor, FALLBACK_SCALE_LO), resolveRgb(toColor, FALLBACK_SCALE_HI), t);
+}
+/**
+ * `<lyra-heatmap>` — a Canvas matrix heatmap with a DPR-aware, resize-aware
+ * redraw loop. `-1` cells are treated as "no data". The sequential color
+ * ramp's endpoints are read from the `--lyra-heatmap-scale-lo`/`-hi` custom
+ * properties (declared in `heatmap.styles.ts`) so hosts can retheme it —
+ * canvas can't consume `var()` directly, so they're resolved once per draw
+ * via `getComputedStyle`, then normalized to RGB by `resolveRgb()` (any
+ * valid CSS color syntax, not just hex — see its doc comment).
+ *
+ * @customElement lyra-heatmap
+ * @csspart base, canvas, legend
+ */
+export class LyraHeatmap extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.rowLabels = [];
+        this.colLabels = [];
+        this.values = [];
+        this.cellSize = 22;
+        this.valueLabel = 'value';
+        this.scale = 'linear';
+        this.onDprChange = () => {
+            this.watchDpr();
+            this.draw();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => this.draw());
+        this.resizeObserver.observe(this);
+        this.watchDpr();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.dprQuery?.removeEventListener('change', this.onDprChange);
+    }
+    watchDpr() {
+        this.dprQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        this.dprQuery.addEventListener('change', this.onDprChange);
+    }
+    willUpdate() {
+        const rows = this.rowLabels.length;
+        const cols = this.colLabels.length;
+        const flat = this.values.flat().filter((v) => v >= 0);
+        const range = flat.length ? `${Math.min(...flat)}–${Math.max(...flat)}` : 'no data';
+        this.setAttribute('role', 'img');
+        this.setAttribute('aria-label', `Heatmap of ${rows} × ${cols} cells, ${this.valueLabel} range ${range}`);
+    }
+    updated() {
+        this.draw();
+    }
+    /** Reads the customizable ramp endpoints off the host's computed style. */
+    scaleEndpoints() {
+        const cs = getComputedStyle(this);
+        const lo = cs.getPropertyValue('--lyra-heatmap-scale-lo').trim() || FALLBACK_SCALE_LO;
+        const hi = cs.getPropertyValue('--lyra-heatmap-scale-hi').trim() || FALLBACK_SCALE_HI;
+        return [lo, hi];
+    }
+    /** Resolves the `--lyra-color-text-quiet` chrome token for axis labels. */
+    labelColor() {
+        return getComputedStyle(this).getPropertyValue('--lyra-color-text-quiet').trim() || '#6b7280';
+    }
+    draw() {
+        if (!this.canvas)
+            return;
+        const rows = this.rowLabels.length;
+        const cols = this.colLabels.length;
+        const w = PAD_LEFT + cols * this.cellSize;
+        const h = PAD_TOP + rows * this.cellSize;
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = w * dpr;
+        this.canvas.height = h * dpr;
+        this.canvas.style.width = `${w}px`;
+        this.canvas.style.height = `${h}px`;
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, w, h);
+        const flat = this.values.flat().filter((v) => v >= 0);
+        const lo = flat.length ? Math.min(...flat) : 0;
+        const hi = flat.length ? Math.max(...flat) : 1;
+        const [scaleLo, scaleHi] = this.scaleEndpoints();
+        const loRgb = resolveRgb(scaleLo, FALLBACK_SCALE_LO);
+        const hiRgb = resolveRgb(scaleHi, FALLBACK_SCALE_HI);
+        const ramp = Array.from({ length: RAMP_STEPS }, (_, i) => mixRgb(loRgb, hiRgb, i / (RAMP_STEPS - 1)));
+        for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < cols; c++) {
+                const v = this.values[r]?.[c] ?? -1;
+                const x = PAD_LEFT + c * this.cellSize;
+                const y = PAD_TOP + r * this.cellSize;
+                if (v < 0) {
+                    ctx.fillStyle = NO_DATA_FILL;
+                }
+                else if (this.scale === 'sqrt') {
+                    const step = sqrtStep(v, hi, RAMP_STEPS);
+                    ctx.fillStyle = step < 0 ? NO_DATA_FILL : ramp[step];
+                }
+                else {
+                    // linearAlpha() returns a 0.1-1.0 ramp position; reused here as a
+                    // mix ratio between the two ramp-endpoint colors (rather than as a
+                    // literal canvas alpha channel) so the 'linear' scale also respects
+                    // --lyra-heatmap-scale-lo/-hi.
+                    const t = linearAlpha(v, lo, hi);
+                    ctx.fillStyle = mixRgb(loRgb, hiRgb, t);
+                }
+                ctx.fillRect(x, y, this.cellSize - 1, this.cellSize - 1);
+            }
+        }
+        ctx.fillStyle = this.labelColor();
+        ctx.font = '10px sans-serif';
+        this.rowLabels.forEach((label, r) => {
+            ctx.fillText(label, 4, PAD_TOP + r * this.cellSize + this.cellSize / 2 + 3);
+        });
+        this.colLabels.forEach((label, c) => {
+            ctx.fillText(label, PAD_LEFT + c * this.cellSize + 2, PAD_TOP - 6);
+        });
+    }
+    render() {
+        return html `
+      <div part="base">
+        <canvas part="canvas"></canvas>
+        <div part="legend">
+          <span class="bar"></span>
+          <span>${this.valueLabel}</span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraHeatmap.prototype, "rowLabels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraHeatmap.prototype, "colLabels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraHeatmap.prototype, "values", void 0);
+__decorate([
+    property({ type: Number, attribute: 'cell-size' })
+], LyraHeatmap.prototype, "cellSize", void 0);
+__decorate([
+    property({ attribute: 'value-label' })
+], LyraHeatmap.prototype, "valueLabel", void 0);
+__decorate([
+    property()
+], LyraHeatmap.prototype, "scale", void 0);
+__decorate([
+    query('canvas')
+], LyraHeatmap.prototype, "canvas", void 0);
+defineElement('heatmap', LyraHeatmap);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;