@aceshooting/lyra-ui 0.1.0 → 0.1.2

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/skeleton/skeleton.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export type SkeletonEffect = 'pulse' | 'sheen';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
+ * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export declare class LyraSkeleton extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: SkeletonVariant;
+    effect: SkeletonEffect;
+    width?: string;
+    height?: string;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-skeleton': LyraSkeleton;
+    }
+}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,65 @@
+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 { srOnly } from '../../internal/a11y.js';
+import { styles } from './skeleton.styles.js';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
+ * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export class LyraSkeleton extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'text';
+        this.effect = 'pulse';
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    willUpdate() {
+        this.setAttribute('role', 'status');
+    }
+    updated(changed) {
+        if (changed.has('width') || changed.has('height')) {
+            const base = this.renderRoot.querySelector('[part="base"]');
+            if (!base)
+                return;
+            if (this.width) {
+                base.style.setProperty('--lyra-skeleton-w', this.width);
+            }
+            else {
+                base.style.removeProperty('--lyra-skeleton-w');
+            }
+            if (this.height) {
+                base.style.setProperty('--lyra-skeleton-h', this.height);
+            }
+            else {
+                base.style.removeProperty('--lyra-skeleton-h');
+            }
+        }
+    }
+    render() {
+        return html `<span part="base"><span class="sr-only">Loading…</span></span>`;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "effect", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "width", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "height", void 0);
+defineElement('skeleton', LyraSkeleton);

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    inline-size: var(--lyra-skeleton-w, 100%);
+    block-size: var(--lyra-skeleton-h, 1em);
+  }
+  [part='base'] {
+    inline-size: 100%;
+    block-size: 100%;
+    background: var(--lyra-color-border);
+  }
+  :host([variant='text']) [part='base'] {
+    border-radius: var(--lyra-radius);
+  }
+  :host([variant='circle']) [part='base'] {
+    border-radius: 50%;
+  }
+  :host([variant='rect']) [part='base'] {
+    border-radius: var(--lyra-radius);
+  }
+  :host([effect='pulse']) [part='base'] {
+    animation: lyra-skeleton-pulse 1.5s ease-in-out infinite;
+  }
+  :host([effect='sheen']) [part='base'] {
+    background-image: linear-gradient(
+      90deg,
+      var(--lyra-color-border) 0%,
+      var(--lyra-color-surface) 50%,
+      var(--lyra-color-border) 100%
+    );
+    background-size: 200% 100%;
+    animation: lyra-skeleton-sheen 1.5s ease-in-out infinite;
+  }
+  @keyframes lyra-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes lyra-skeleton-sheen {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      animation: none !important;
+    }
+  }
+`;

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

package/dist/components/split/split.js

@@ -0,0 +1,171 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './split.styles.js';
+const KEYBOARD_STEP = 2;
+/**
+ * `<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 class LyraSplit extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.sizes = [];
+        this.min = 10;
+        this.orientation = 'horizontal';
+        this.panelCount = 0;
+        this.dragIndex = -1;
+        this.dragStartPos = 0;
+        this.dragStartSizes = [];
+        this.onPointerDown = (e, index) => {
+            this.dragIndex = index;
+            this.dragStartPos = this.orientation === 'vertical' ? e.clientY : e.clientX;
+            this.dragStartSizes = [...this.sizes];
+            e.target.setPointerCapture(e.pointerId);
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
+        };
+        this.onPointerMove = (e) => {
+            if (this.dragIndex < 0)
+                return;
+            const base = this.renderRoot.querySelector('[part="base"]');
+            const total = this.orientation === 'vertical' ? base.clientHeight : base.clientWidth;
+            const pos = this.orientation === 'vertical' ? e.clientY : e.clientX;
+            const deltaPercent = ((pos - this.dragStartPos) / total) * 100;
+            this.sizes = this.clampPair(this.dragStartSizes, this.dragIndex, deltaPercent);
+            this.emit('lyra-resize', { sizes: [...this.sizes] });
+        };
+        this.onPointerUp = () => {
+            this.dragIndex = -1;
+            this.persist();
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+        };
+        this.onDividerKeyDown = (e, index) => {
+            const forwardKey = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+            const backwardKey = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+            if (e.key === forwardKey) {
+                e.preventDefault();
+                this.applyDelta(index, KEYBOARD_STEP, true);
+            }
+            else if (e.key === backwardKey) {
+                e.preventDefault();
+                this.applyDelta(index, -KEYBOARD_STEP, true);
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.panelCount = this.children.length;
+        this.ensureSizes();
+        this.loadPersisted();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up any remaining event listeners
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+    }
+    get storageFullKey() {
+        return this.storageKey ? `lyra-split:${this.storageKey}:${this.panelCount}` : undefined;
+    }
+    loadPersisted() {
+        const key = this.storageFullKey;
+        if (!key)
+            return;
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return;
+        try {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed) && parsed.length === this.panelCount)
+                this.sizes = parsed;
+        }
+        catch {
+            /* ignore malformed persisted state */
+        }
+    }
+    persist() {
+        const key = this.storageFullKey;
+        if (key)
+            localStorage.setItem(key, JSON.stringify(this.sizes));
+    }
+    ensureSizes() {
+        if (this.sizes.length === this.panelCount && this.panelCount > 0)
+            return;
+        const equal = 100 / Math.max(1, this.panelCount);
+        this.sizes = Array.from({ length: this.panelCount }, () => equal);
+    }
+    clampPair(sizes, i, delta) {
+        const next = [...sizes];
+        const a = next[i] + delta;
+        const b = next[i + 1] - delta;
+        if (a < this.min || b < this.min)
+            return sizes;
+        next[i] = a;
+        next[i + 1] = b;
+        return next;
+    }
+    applyDelta(index, delta, commit) {
+        this.sizes = this.clampPair(this.sizes, index, delta);
+        this.emit('lyra-resize', { sizes: [...this.sizes] });
+        if (commit)
+            this.persist();
+    }
+    updated(changed) {
+        if (changed.has('sizes') || this.sizes.length === 0)
+            this.ensureSizes();
+        const panels = [...this.children];
+        panels.forEach((panel, i) => {
+            panel.style.flex = `0 0 ${this.sizes[i] ?? 0}%`;
+            panel.style.order = String(i * 2);
+        });
+    }
+    render() {
+        const dividers = [];
+        for (let i = 0; i < this.panelCount - 1; i++) {
+            dividers.push(html `<div
+        part="divider"
+        role="separator"
+        aria-orientation=${this.orientation === 'vertical' ? 'horizontal' : 'vertical'}
+        aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
+        aria-valuemin=${this.min}
+        aria-valuemax=${100 - this.min}
+        tabindex="0"
+        style=${`order:${i * 2 + 1}`}
+        @pointerdown=${(e) => this.onPointerDown(e, i)}
+        @keydown=${(e) => this.onDividerKeyDown(e, i)}
+      ></div>`);
+        }
+        return html `<div part="base"><slot></slot>${dividers}</div>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraSplit.prototype, "sizes", void 0);
+__decorate([
+    property({ type: Number })
+], LyraSplit.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSplit.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'storage-key' })
+], LyraSplit.prototype, "storageKey", void 0);
+__decorate([
+    state()
+], LyraSplit.prototype, "panelCount", void 0);
+defineElement('split', LyraSplit);

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

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

package/dist/components/split/split.styles.js

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  [part='base'] {
+    display: flex;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :host([orientation='vertical']) [part='base'] {
+    flex-direction: column;
+  }
+  [part='divider'] {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: 3px;
+    block-size: auto;
+    background: var(--lyra-color-border);
+    cursor: col-resize;
+    touch-action: none;
+  }
+  /* Transparent hit-slop: widens the draggable/tappable box along the resize
+     axis only, without changing the divider's visible 3px width. Generated
+     content is part of the originating element's hit-test box, so pointer
+     events here still resolve e.target to [part="divider"] itself. */
+  [part='divider']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: -6px;
+  }
+  :host([orientation='vertical']) [part='divider'] {
+    inline-size: auto;
+    block-size: 3px;
+    cursor: row-resize;
+  }
+  :host([orientation='vertical']) [part='divider']::before {
+    inset-block: -6px;
+    inset-inline: 0;
+  }
+  [part='divider']:hover {
+    background: var(--lyra-color-brand);
+  }
+  [part='divider']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,36 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
+export type StatGoodDirection = 'up' | 'down';
+/**
+ * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
+ * "metric row" / "KPI card" pattern reinvented in every surveyed repo.
+ *
+ * @customElement lyra-stat
+ * @slot - Leading icon.
+ * @slot caption - Rich caption content (overrides the `caption` attribute).
+ * @csspart base, icon, label, value, unit, trend, caption
+ */
+export declare class LyraStat extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    value: string;
+    unit: string;
+    variant: StatVariant;
+    trend: number;
+    caption: string;
+    /** Which trend direction counts as "good" — inverts arrow/color polarity for
+     *  cost/latency/error-rate-style metrics where a decrease is the win. */
+    goodDirection: StatGoodDirection;
+    private hasIcon;
+    private hasCaptionSlot;
+    protected willUpdate(): void;
+    private onIconSlotChange;
+    private onCaptionSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-stat': LyraStat;
+    }
+}