@aceshooting/lyra-ui 0.1.0 → 0.1.2

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;

package/dist/components/heatmap/heatmap.styles.js

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Sequential ramp endpoints for the data-driven cell colors (canvas can't
+       consume var() directly, so heatmap.ts resolves these via
+       getComputedStyle and interpolates between them). Componentspecific
+       business color per Global Constraints — exposed so hosts can retheme
+       the ramp without raw hex leaking into the public API. */
+    --lyra-heatmap-scale-lo: #cde2fb;
+    --lyra-heatmap-scale-hi: #0969da;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  canvas {
+    display: block;
+    inline-size: 100%;
+  }
+  [part='legend'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='legend'] .bar {
+    inline-size: 6rem;
+    block-size: 0.5rem;
+    border-radius: 2px;
+    background: linear-gradient(
+      to right,
+      var(--lyra-heatmap-scale-lo),
+      var(--lyra-heatmap-scale-hi)
+    );
+  }
+`;

package/dist/components/map/map-loader.d.ts

@@ -0,0 +1,8 @@
+import type * as MaplibreModule from 'maplibre-gl';
+/**
+ * Lazily loads the optional peer dependency `maplibre-gl` once per page.
+ * Resolves to `null` (with a one-time warning) if it isn't installed —
+ * mirrors `<lyra-flag>`'s peer-dependency pattern. Consumers must separately
+ * import `maplibre-gl/dist/maplibre-gl.css` once they install the peer.
+ */
+export declare function loadMaplibre(): Promise<typeof MaplibreModule | null>;

package/dist/components/map/map-loader.js

@@ -0,0 +1,17 @@
+let maplibre;
+/**
+ * Lazily loads the optional peer dependency `maplibre-gl` once per page.
+ * Resolves to `null` (with a one-time warning) if it isn't installed —
+ * mirrors `<lyra-flag>`'s peer-dependency pattern. Consumers must separately
+ * import `maplibre-gl/dist/maplibre-gl.css` once they install the peer.
+ */
+export function loadMaplibre() {
+    if (!maplibre) {
+        maplibre = import('maplibre-gl').catch(() => {
+            console.warn('<lyra-map> needs the optional peer dependency `maplibre-gl` — install it with ' +
+                '`pnpm add maplibre-gl` and import `maplibre-gl/dist/maplibre-gl.css` once in your app.');
+            return null;
+        });
+    }
+    return maplibre;
+}

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

@@ -0,0 +1,49 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import type { Map as MaplibreMap, StyleSpecification } from 'maplibre-gl';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
+export interface LegendEntry {
+    color: string;
+    label: string;
+}
+export interface ChoroplethLayer {
+    sourceId: string;
+    geojson: GeoJSON.FeatureCollection;
+    field: string;
+    stops: [number, string][];
+}
+/**
+ * `<lyra-map>` — a maplibre-gl wrapper with a declarative legend and
+ * choropleth GeoJSON layer, plus a raw `map` escape hatch. Requires the
+ * optional peer dep `maplibre-gl` (consumers also import its CSS once).
+ *
+ * @customElement lyra-map
+ * @event lyra-map-load - Fired once the underlying maplibregl.Map loads.
+ * @event lyra-map-click - `detail: { lngLat, feature? }`.
+ * @csspart base, container, legend, legend-swatch
+ */
+export declare class LyraMap extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    center: [number, number];
+    zoom: number;
+    mapStyle: StyleSpecification | string;
+    legend: LegendEntry[];
+    choropleth?: ChoroplethLayer;
+    /** True until the lazy-loaded `maplibre-gl` peer dependency has settled (success or failure). */
+    private loading;
+    private containerEl?;
+    private _map?;
+    private _styleLoaded;
+    /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
+    get map(): MaplibreMap | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private applyChoropleth;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-map': LyraMap;
+    }
+}

package/dist/components/map/map.js

@@ -0,0 +1,189 @@
+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;
+};
+/// <reference types="geojson" />
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { loadMaplibre } from './map-loader.js';
+import { styles } from './map.styles.js';
+import '../skeleton/skeleton.js';
+const DEFAULT_STYLE = {
+    version: 8,
+    sources: {
+        'lyra-osm': {
+            type: 'raster',
+            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+            tileSize: 256,
+            attribution: '© OpenStreetMap contributors',
+        },
+    },
+    layers: [{ id: 'lyra-osm', type: 'raster', source: 'lyra-osm' }],
+};
+/**
+ * `<lyra-map>` — a maplibre-gl wrapper with a declarative legend and
+ * choropleth GeoJSON layer, plus a raw `map` escape hatch. Requires the
+ * optional peer dep `maplibre-gl` (consumers also import its CSS once).
+ *
+ * @customElement lyra-map
+ * @event lyra-map-load - Fired once the underlying maplibregl.Map loads.
+ * @event lyra-map-click - `detail: { lngLat, feature? }`.
+ * @csspart base, container, legend, legend-swatch
+ */
+export class LyraMap extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.center = [0, 0];
+        this.zoom = 2;
+        this.mapStyle = DEFAULT_STYLE;
+        this.legend = [];
+        /** True until the lazy-loaded `maplibre-gl` peer dependency has settled (success or failure). */
+        this.loading = true;
+        // Tracks whether the style has fired its initial 'load' (i.e. addSource/
+        // addLayer/setPaintProperty are now safe to call), rather than re-querying
+        // `this._map.isStyleLoaded()`: that also reflects in-flight *tile* loading
+        // for every source, so it flips back to `false` as soon as the choropleth's
+        // own GeoJSON source is added — which would wrongly block subsequent
+        // choropleth updates from ever re-running.
+        this._styleLoaded = false;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
+    get map() {
+        return this._map;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void loadMaplibre().then(async (mod) => {
+            this.loading = false;
+            if (!mod)
+                return;
+            // `[part="container"]` only exists once `loading` flips to `false` and
+            // Lit re-renders — wait for that render to land before querying it.
+            await this.updateComplete;
+            // The element may have been removed from the DOM while the async
+            // loadMaplibre()/updateComplete window was in flight — don't spin up
+            // a maplibre Map (WebGL context + event listeners) for a detached
+            // instance (disconnectedCallback's cleanup already ran).
+            if (!this.containerEl || !this.isConnected)
+                return;
+            this._map = new mod.Map({
+                container: this.containerEl,
+                style: this.mapStyle,
+                center: this.center,
+                zoom: this.zoom,
+            });
+            this._map.on('load', () => {
+                this._styleLoaded = true;
+                this.applyChoropleth();
+                this.emit('lyra-map-load');
+            });
+            this._map.on('click', (e) => {
+                // Guard on the fill layer actually existing, not just `this.choropleth` being
+                // set: applyChoropleth() only adds it once the style has finished loading, so
+                // a click landing in that window (choropleth set before the map's own 'load')
+                // would otherwise query a layer id maplibre-gl doesn't know about yet.
+                const fillLayerId = this.choropleth ? `${this.choropleth.sourceId}-fill` : undefined;
+                const features = fillLayerId && this._map.getLayer(fillLayerId)
+                    ? this._map.queryRenderedFeatures(e.point, { layers: [fillLayerId] })
+                    : [];
+                this.emit('lyra-map-click', {
+                    lngLat: [e.lngLat.lng, e.lngLat.lat],
+                    feature: features[0],
+                });
+            });
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._map?.remove();
+        this._map = undefined;
+        this._styleLoaded = false;
+    }
+    updated(changed) {
+        if (this.loading)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+        if (changed.has('choropleth') && this._styleLoaded)
+            this.applyChoropleth();
+        if (changed.has('center') && this._map)
+            this._map.setCenter(this.center);
+        if (changed.has('zoom') && this._map)
+            this._map.setZoom(this.zoom);
+    }
+    applyChoropleth() {
+        if (!this.choropleth || !this._map)
+            return;
+        const { sourceId, geojson, field, stops } = this.choropleth;
+        const fillLayerId = `${sourceId}-fill`;
+        const colorExpr = ['interpolate', ['linear'], ['get', field]];
+        for (const [value, color] of stops)
+            colorExpr.push(value, color);
+        const existingSource = this._map.getSource(sourceId);
+        if (existingSource) {
+            // Re-apply both the data and the color expression: `field`/`stops` may have
+            // changed even though `sourceId` didn't (e.g. switching which metric colors
+            // the same GeoJSON), so the paint property must be refreshed too.
+            existingSource.setData(geojson);
+            this._map.setPaintProperty(fillLayerId, 'fill-color', colorExpr);
+        }
+        else {
+            this._map.addSource(sourceId, { type: 'geojson', data: geojson, promoteId: 'id' });
+            this._map.addLayer({
+                id: fillLayerId,
+                type: 'fill',
+                source: sourceId,
+                paint: { 'fill-color': colorExpr, 'fill-opacity': 0.75 },
+            });
+        }
+    }
+    render() {
+        // Lit's own whitespace/comment marker nodes around the `${...}` binding mean
+        // `[part="legend"]` is never truly `:empty` in CSS even with zero entries, so
+        // the panel is omitted from the template entirely when `legend` is empty
+        // (same `nothing` pattern `stat.ts` uses to omit its optional trend section)
+        // rather than relying on a CSS `:empty` selector that can never match.
+        return html `
+      <div part="base">
+        ${this.loading
+            ? html `<lyra-skeleton variant="rect"></lyra-skeleton>`
+            : html `<div part="container"></div>`}
+        ${this.legend.length
+            ? html `<div part="legend">
+              ${this.legend.map((entry) => html `<div class="legend-row">
+                  <span part="legend-swatch" style=${`background:${entry.color}`}></span>
+                  <span>${entry.label}</span>
+                </div>`)}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], LyraMap.prototype, "center", void 0);
+__decorate([
+    property({ type: Number })
+], LyraMap.prototype, "zoom", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraMap.prototype, "mapStyle", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraMap.prototype, "legend", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraMap.prototype, "choropleth", void 0);
+__decorate([
+    state()
+], LyraMap.prototype, "loading", void 0);
+__decorate([
+    query('[part="container"]')
+], LyraMap.prototype, "containerEl", void 0);
+defineElement('map', LyraMap);

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

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

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

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    inline-size: 100%;
+    block-size: 24rem;
+  }
+  [part='base'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  lyra-skeleton {
+    --lyra-skeleton-w: 100%;
+    --lyra-skeleton-h: 100%;
+  }
+  [part='container'] {
+    position: absolute;
+    inset: 0;
+  }
+  [part='legend'] {
+    position: absolute;
+    inset-block-end: var(--lyra-space-s);
+    inset-inline-start: var(--lyra-space-s);
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    font-size: 0.75rem;
+  }
+  .legend-row {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+  [part='legend-swatch'] {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    border-radius: 2px;
+    flex: 0 0 auto;
+  }
+`;

package/dist/components/playback/playback.d.ts

@@ -0,0 +1,51 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
+ * interval (play/pause), like the manual play-timers duplicated across
+ * per-repo time-series dashboards.
+ *
+ * @customElement lyra-playback
+ * @event lyra-play
+ * @event lyra-pause
+ * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
+ * @csspart base, play-button, slider
+ */
+export declare class LyraPlayback extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    length: number;
+    index: number;
+    intervalMs: number;
+    playing: boolean;
+    loop: boolean;
+    /**
+     * Re-declared as a Lit reactive property (shadowing the inherited plain
+     * `HTMLElement.hidden` IDL property) so that setting `el.hidden = true` —
+     * or the `hidden` attribute — actually enters Lit's change-tracking system
+     * and the `willUpdate` auto-pause guard below can see it via `changed`.
+     * `reflect: true` preserves the native attribute-reflection behavior.
+     */
+    hidden: boolean;
+    private timer?;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Start playback; no-op if there's nothing to advance through. */
+    play(): void;
+    /** Stop playback. */
+    pause(): void;
+    toggle(): void;
+    private tick;
+    private setIndex;
+    /** Advance one step without starting playback. */
+    next(): void;
+    /** Go back one step without starting playback. */
+    previous(): void;
+    /** Jump to an explicit index, pausing playback. */
+    goTo(index: number): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-playback': LyraPlayback;
+    }
+}