@aceshooting/lyra-ui 0.1.1 → 0.1.3

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;
+    }
+}

package/dist/components/playback/playback.js

@@ -0,0 +1,146 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { playIcon, pauseIcon } from '../../internal/icons.js';
+import { styles } from './playback.styles.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 class LyraPlayback extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.length = 0;
+        this.index = 0;
+        this.intervalMs = 900;
+        this.playing = false;
+        this.loop = true;
+        /**
+         * 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.
+         */
+        this.hidden = false;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.pause();
+    }
+    willUpdate(changed) {
+        if (changed.has('hidden') && this.hidden)
+            this.pause();
+    }
+    /** Start playback; no-op if there's nothing to advance through. */
+    play() {
+        if (this.playing || this.length <= 1)
+            return;
+        this.playing = true;
+        this.emit('lyra-play');
+        this.timer = window.setInterval(() => this.tick(), this.intervalMs);
+    }
+    /** Stop playback. */
+    pause() {
+        if (!this.playing)
+            return;
+        window.clearInterval(this.timer);
+        this.timer = undefined;
+        this.playing = false;
+        this.emit('lyra-pause');
+    }
+    toggle() {
+        this.playing ? this.pause() : this.play();
+    }
+    tick() {
+        const next = this.index + 1;
+        if (next >= this.length) {
+            if (this.loop)
+                this.setIndex(0);
+            else {
+                this.setIndex(this.length - 1);
+                this.pause();
+            }
+        }
+        else {
+            this.setIndex(next);
+        }
+    }
+    setIndex(i) {
+        this.index = i;
+        this.emit('lyra-step', { index: this.index });
+    }
+    /** Advance one step without starting playback. */
+    next() {
+        if (this.index + 1 < this.length)
+            this.setIndex(this.index + 1);
+    }
+    /** Go back one step without starting playback. */
+    previous() {
+        if (this.index > 0)
+            this.setIndex(this.index - 1);
+    }
+    /** Jump to an explicit index, pausing playback. */
+    goTo(index) {
+        this.pause();
+        this.setIndex(Math.min(this.length - 1, Math.max(0, index)));
+    }
+    render() {
+        return html `
+      <div part="base">
+        <button
+          part="play-button"
+          type="button"
+          aria-label=${this.playing ? 'Pause' : 'Play'}
+          ?disabled=${this.length <= 1}
+          @click=${() => this.toggle()}
+        >
+          ${this.playing ? pauseIcon() : playIcon()}
+        </button>
+        <input
+          part="slider"
+          type="range"
+          min="0"
+          max=${Math.max(0, this.length - 1)}
+          .value=${String(this.index)}
+          aria-label="Playback position"
+          @input=${(e) => this.goTo(Number(e.target.value))}
+        />
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraPlayback.prototype, "length", void 0);
+__decorate([
+    property({ type: Number })
+], LyraPlayback.prototype, "index", void 0);
+__decorate([
+    property({ type: Number, attribute: 'interval-ms' })
+], LyraPlayback.prototype, "intervalMs", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraPlayback.prototype, "playing", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraPlayback.prototype, "loop", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraPlayback.prototype, "hidden", void 0);
+defineElement('playback', LyraPlayback);

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

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

package/dist/components/playback/playback.styles.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+  }
+  [part='base'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+  }
+  [part='play-button'] {
+    inline-size: 2rem;
+    block-size: 2rem;
+    border-radius: 50%;
+    border: 1px solid var(--lyra-color-border);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+  }
+  [part='play-button']:hover {
+    border-color: var(--lyra-color-brand);
+  }
+  [part='play-button']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='play-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='slider'] {
+    accent-color: var(--lyra-color-brand);
+  }
+`;

package/dist/components/split/split.d.ts

@@ -0,0 +1,41 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
+ * children are the panels; a divider is auto-inserted between each pair.
+ *
+ * @customElement lyra-split
+ * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
+ *   and every keyboard step.
+ * @csspart base, divider
+ */
+export declare class LyraSplit extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    sizes: number[];
+    min: number;
+    orientation: 'horizontal' | 'vertical';
+    storageKey?: string;
+    private panelCount;
+    private dragIndex;
+    private dragStartPos;
+    private dragStartSizes;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get storageFullKey();
+    private loadPersisted;
+    private persist;
+    private ensureSizes;
+    private clampPair;
+    private applyDelta;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onDividerKeyDown;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-split': LyraSplit;
+    }
+}