@aceshooting/lyra-ui 0.1.1 → 0.1.3

package/dist/components/file-input/file-input.js

@@ -0,0 +1,182 @@
+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, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './file-input.styles.js';
+import { matchesAccept } from './accept.js';
+/**
+ * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, matching every
+ * surveyed upload seed (all of which upload raw files to a backend).
+ *
+ * @customElement lyra-file-input
+ * @slot - Custom drop-zone content, overrides the `label` attribute.
+ * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
+ * @csspart base, input
+ */
+export class LyraFileInput extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.disabled = false;
+        this.accept = '';
+        this.allowedMimeTypes = [];
+        this.forbiddenMimeTypes = [];
+        this.maxFileSize = 0;
+        this.label = 'Drop files here or click to browse';
+        this.dragState = 'default';
+        this.dragCounter = 0;
+        this.onDragEnter = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this.dragCounter++;
+            const items = e.dataTransfer ? [...e.dataTransfer.items].filter((i) => i.kind === 'file') : [];
+            this.dragState = items.length ? this.previewState(items) : 'default';
+        };
+        this.onDragOver = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+        };
+        this.onDragLeave = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this.dragCounter = Math.max(0, this.dragCounter - 1);
+            if (this.dragCounter === 0)
+                this.dragState = 'default';
+        };
+        this.onDrop = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this.dragCounter = 0;
+            this.dragState = 'default';
+            const files = [...(e.dataTransfer?.files ?? [])];
+            if (files.length)
+                this.emitFiles(files);
+        };
+        this.onInputChange = (e) => {
+            const files = [...(e.target.files ?? [])];
+            e.target.value = '';
+            if (files.length)
+                this.emitFiles(files);
+        };
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+                // Prevent Space from scrolling the page, matching the `table.ts`
+                // sortable-header/row convention for role-based clickable elements.
+                e.preventDefault();
+                this.openPicker();
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    isAllowed(file) {
+        if (this.forbiddenMimeTypes.includes(file.type))
+            return 'type';
+        if (this.allowedMimeTypes.length > 0 && !this.allowedMimeTypes.includes(file.type))
+            return 'type';
+        if (this.accept && !matchesAccept(file, this.accept))
+            return 'type';
+        // `file.size` is `undefined` on the synthetic `DataTransferItem`-cast objects
+        // used during dragenter preview (real sizes aren't available until drop),
+        // so this naturally only takes effect for the real `classify()` call at drop time.
+        if (this.maxFileSize > 0 && file.size > this.maxFileSize)
+            return 'size';
+        return 'ok';
+    }
+    classify(fileList) {
+        if (!this.multiple && fileList.length > 1) {
+            return { files: [], rejected: fileList.map((file) => ({ file, reason: 'count' })) };
+        }
+        const files = [];
+        const rejected = [];
+        for (const f of fileList) {
+            const reason = this.isAllowed(f);
+            if (reason === 'ok')
+                files.push(f);
+            else
+                rejected.push({ file: f, reason });
+        }
+        return { files, rejected };
+    }
+    emitFiles(fileList) {
+        const { files, rejected } = this.classify(fileList);
+        this.emit('lyra-files', { files, rejected });
+    }
+    /** Programmatically open the native file picker. */
+    openPicker() {
+        this.inputEl?.click();
+    }
+    previewState(fileList) {
+        const { rejected } = this.classify(fileList);
+        return rejected.length > 0 ? 'reject' : 'accept';
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        role="button"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        data-drag-state=${this.dragState}
+        @dragenter=${this.onDragEnter}
+        @dragover=${this.onDragOver}
+        @dragleave=${this.onDragLeave}
+        @drop=${this.onDrop}
+        @click=${() => !this.disabled && this.openPicker()}
+        @keydown=${this.onKeyDown}
+      >
+        <slot>${this.label}</slot>
+      </div>
+      <input
+        part="input"
+        type="file"
+        tabindex="-1"
+        aria-hidden="true"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this.onInputChange}
+      />
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFileInput.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LyraFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraFileInput.prototype, "allowedMimeTypes", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraFileInput.prototype, "forbiddenMimeTypes", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-file-size' })
+], LyraFileInput.prototype, "maxFileSize", void 0);
+__decorate([
+    property()
+], LyraFileInput.prototype, "label", void 0);
+__decorate([
+    state()
+], LyraFileInput.prototype, "dragState", void 0);
+__decorate([
+    query('input[type="file"]')
+], LyraFileInput.prototype, "inputEl", void 0);
+defineElement('file-input', LyraFileInput);

package/dist/components/file-input/file-input.styles.d.ts

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

package/dist/components/file-input/file-input.styles.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-l);
+    border: 2px dashed var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text-quiet);
+    text-align: center;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+  [part='base'][data-drag-state='accept'] {
+    border-color: var(--lyra-color-success);
+    background: color-mix(in srgb, var(--lyra-color-success) 8%, transparent);
+  }
+  [part='base'][data-drag-state='reject'] {
+    border-color: var(--lyra-color-danger);
+    background: color-mix(in srgb, var(--lyra-color-danger) 8%, transparent);
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([disabled]) [part='base'] {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+    overflow: hidden;
+  }
+`;

package/dist/components/flag/flag.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
 /**
  * `<lyra-flag>` — a country/language flag.
  *
@@ -24,8 +25,11 @@ export declare class LyraFlag extends LyraElement {
     /** Render as a circular flag. */
     round: boolean;
     private src?;
+    /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
+    private loading;
     private get code();
     protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/flag/flag.js

@@ -10,6 +10,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { styles } from './flag.styles.js';
 import { languageToCountry } from './language-map.js';
+import '../skeleton/skeleton.js';
 let flagUrlResolver;
 /**
  * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
@@ -45,6 +46,8 @@ export class LyraFlag extends LyraElement {
         super(...arguments);
         /** Render as a circular flag. */
         this.round = false;
+        /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
+        this.loading = true;
     }
     static { this.styles = [LyraElement.styles, styles]; }
     get code() {
@@ -55,18 +58,35 @@ export class LyraFlag extends LyraElement {
         return undefined;
     }
     willUpdate(changed) {
-        if (!changed.has('country') && !changed.has('language'))
+        // `this.hasUpdated` (not just `changed`) forces this body to run once on
+        // the very first update even when neither `country` nor `language` is
+        // ever set: an unset optional property's first "assignment" is
+        // undefined -> undefined (no-op to Lit), so `changed.has('country')`
+        // would otherwise never become true for a `<lyra-flag>` that never
+        // receives a code, leaving `loading` stuck at its initial `true` forever.
+        if (this.hasUpdated && !changed.has('country') && !changed.has('language'))
             return;
         const code = this.code;
         if (!code) {
             this.src = undefined;
+            this.loading = false;
             return;
         }
+        this.loading = true;
         void loadFlagUrlResolver().then((resolve) => {
             this.src = resolve?.(code);
+            this.loading = false;
         });
     }
+    updated() {
+        if (this.loading)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+    }
     render() {
+        if (this.loading)
+            return html `<lyra-skeleton variant="rect"></lyra-skeleton>`;
         if (!this.src)
             return html ``;
         const alt = this.label ?? (this.code ?? '').toUpperCase();
@@ -88,4 +108,7 @@ __decorate([
 __decorate([
     state()
 ], LyraFlag.prototype, "src", void 0);
+__decorate([
+    state()
+], LyraFlag.prototype, "loading", void 0);
 defineElement('flag', LyraFlag);

package/dist/components/flag/flag.styles.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    inline-size: auto;
+    aspect-ratio: 4 / 3;
     block-size: 1em;
     line-height: 0;
     vertical-align: middle;

package/dist/components/gauge/gauge.d.ts

@@ -0,0 +1,29 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type GaugeType = 'radial' | 'linear';
+/**
+ * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
+ * generic gauge widget was found across the surveyed repos.
+ *
+ * @customElement lyra-gauge
+ * @csspart base, track, fill, value, label
+ */
+export declare class LyraGauge extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    value: number;
+    min: number;
+    max: number;
+    type: GaugeType;
+    label: string;
+    valueLabel?: string;
+    private get ratio();
+    protected willUpdate(): void;
+    private renderRadial;
+    private renderLinear;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-gauge': LyraGauge;
+    }
+}

package/dist/components/gauge/gauge.js

@@ -0,0 +1,133 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './gauge.styles.js';
+// Radial gauge sweeps 270° (like a speedometer), leaving a 90° gap at the bottom.
+const SWEEP_DEG = 270;
+const START_DEG = 135; // rotate so the gap is centered at the bottom
+const RADIUS = 40;
+const CENTER = 50;
+const STROKE = 10;
+// Linear gauge: keep the bar thin and low in the 0..20 viewBox so the top
+// ~12 units are free for a value/label text row above it.
+const LINEAR_STROKE = 6;
+const LINEAR_BAR_Y = 15;
+const LINEAR_TEXT_Y = 8;
+// Length of the x1=0 -> x2=100 horizontal fill/track line (Euclidean, y1==y2).
+const LINEAR_LENGTH = 100;
+function polarToCartesian(angleDeg) {
+    const rad = (angleDeg * Math.PI) / 180;
+    return [CENTER + RADIUS * Math.cos(rad), CENTER + RADIUS * Math.sin(rad)];
+}
+function arcPath(startDeg, endDeg) {
+    const [sx, sy] = polarToCartesian(startDeg);
+    const [ex, ey] = polarToCartesian(endDeg);
+    const largeArc = endDeg - startDeg > 180 ? 1 : 0;
+    return `M ${sx} ${sy} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${ex} ${ey}`;
+}
+// The radial fill's `d` is fixed geometry (the full 270° sweep), built once —
+// a `d` rebuilt from `ratio` on every render is not reliably CSS-transitionable
+// across browsers. Animated progress instead rides stroke-dasharray/
+// stroke-dashoffset (always transitionable) over this constant path, the same
+// technique used for the linear variant's fill line below.
+const RADIAL_ARC_D = arcPath(START_DEG, START_DEG + SWEEP_DEG);
+const RADIAL_ARC_LENGTH = (SWEEP_DEG / 360) * 2 * Math.PI * RADIUS;
+/**
+ * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
+ * generic gauge widget was found across the surveyed repos.
+ *
+ * @customElement lyra-gauge
+ * @csspart base, track, fill, value, label
+ */
+export class LyraGauge extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.type = 'radial';
+        this.label = '';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get ratio() {
+        const span = this.max - this.min || 1;
+        return Math.min(1, Math.max(0, (this.value - this.min) / span));
+    }
+    willUpdate() {
+        this.setAttribute('role', 'meter');
+        this.setAttribute('aria-valuenow', String(this.value));
+        this.setAttribute('aria-valuemin', String(this.min));
+        this.setAttribute('aria-valuemax', String(this.max));
+        if (this.label)
+            this.setAttribute('aria-label', this.label);
+        else
+            this.removeAttribute('aria-label');
+    }
+    renderRadial() {
+        const text = this.valueLabel ?? String(this.value);
+        // Dashoffset counts down from the full arc length (nothing revealed) to 0
+        // (whole sweep revealed) as ratio goes 0 -> 1 — the classic "draw an SVG
+        // path" technique, which transitions smoothly via plain CSS.
+        const dashoffset = RADIAL_ARC_LENGTH * (1 - this.ratio);
+        return html `<svg part="base" viewBox="0 0 100 100">
+      <path part="track" stroke-width=${STROKE} d=${RADIAL_ARC_D}></path>
+      <path
+        part="fill"
+        stroke-width=${STROKE}
+        d=${RADIAL_ARC_D}
+        stroke-dasharray=${RADIAL_ARC_LENGTH}
+        stroke-dashoffset=${dashoffset}
+      ></path>
+      <text part="value" x="50" y="52">${text}</text>
+      ${this.label ? svg `<text part="label" x="50" y="68">${this.label}</text>` : ''}
+    </svg>`;
+    }
+    renderLinear() {
+        const text = this.valueLabel ?? String(this.value);
+        const dashoffset = LINEAR_LENGTH * (1 - this.ratio);
+        return html `<svg part="base" viewBox="0 0 100 20" preserveAspectRatio="none">
+      <line part="track" x1="0" y1=${LINEAR_BAR_Y} x2="100" y2=${LINEAR_BAR_Y} stroke-width=${LINEAR_STROKE}></line>
+      <line
+        part="fill"
+        x1="0"
+        y1=${LINEAR_BAR_Y}
+        x2="100"
+        y2=${LINEAR_BAR_Y}
+        stroke-width=${LINEAR_STROKE}
+        stroke-dasharray=${LINEAR_LENGTH}
+        stroke-dashoffset=${dashoffset}
+      ></line>
+      ${this.label ? svg `<text part="label" x="0" y=${LINEAR_TEXT_Y}>${this.label}</text>` : ''}
+      <text part="value" x="100" y=${LINEAR_TEXT_Y}>${text}</text>
+    </svg>`;
+    }
+    render() {
+        return this.type === 'linear' ? this.renderLinear() : this.renderRadial();
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraGauge.prototype, "type", void 0);
+__decorate([
+    property()
+], LyraGauge.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraGauge.prototype, "valueLabel", void 0);
+defineElement('gauge', LyraGauge);

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

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

package/dist/components/gauge/gauge.styles.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    inline-size: 8em;
+    block-size: 8em;
+  }
+  :host([type='linear']) {
+    inline-size: 12em;
+    block-size: 1.5em;
+  }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  [part='track'] {
+    fill: none;
+    stroke: var(--lyra-color-border);
+  }
+  [part='fill'] {
+    fill: none;
+    stroke: var(--lyra-color-brand);
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--lyra-transition-base);
+  }
+  [part='value'] {
+    font-size: 1rem;
+    font-weight: 700;
+    text-anchor: middle;
+    fill: var(--lyra-color-text);
+    font-family: var(--lyra-font);
+  }
+  [part='label'] {
+    font-size: 0.625rem;
+    text-anchor: middle;
+    fill: var(--lyra-color-text-quiet);
+    font-family: var(--lyra-font);
+    text-transform: uppercase;
+  }
+  :host([type='linear']) [part='fill'] {
+    stroke-linecap: butt;
+  }
+  :host([type='linear']) [part='value'],
+  :host([type='linear']) [part='label'] {
+    font-size: 0.5rem;
+  }
+  :host([type='linear']) [part='value'] {
+    text-anchor: end;
+  }
+  :host([type='linear']) [part='label'] {
+    text-anchor: start;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='fill'] {
+      transition: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,68 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
+export interface GraphNode {
+    id: string;
+    label?: string;
+    radius?: number;
+    color?: string;
+}
+export interface GraphLink {
+    source: string;
+    target: string;
+    width?: number;
+}
+/**
+ * `<lyra-graph>` — a force-directed node-link diagram with pan/zoom/drag.
+ * Requires the optional peer deps `d3-force`/`d3-drag`/`d3-zoom`/`d3-selection`
+ * (lazy-loaded; a consumer who never uses this component pays zero d3 cost).
+ *
+ * @customElement lyra-graph
+ * @event lyra-node-click - `detail: { id }`.
+ * @event lyra-link-click - `detail: { source, target }`.
+ * @csspart base, svg, node, link, label
+ */
+export declare class LyraGraph extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    nodes: GraphNode[];
+    links: GraphLink[];
+    width: number;
+    height: number;
+    chargeStrength: number;
+    linkDistance: number;
+    /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
+    private loading;
+    private simNodes;
+    private simLinks;
+    /** Current pan/zoom transform (SVG `transform` attribute syntax), driven by d3-zoom. */
+    private transform;
+    private simulation?;
+    private d3?;
+    /** The `<svg>` currently wired up with d3-zoom (guards a one-time bind). */
+    private zoomedEl?;
+    /** Node `<circle>`s already wired up with d3-drag; cleared on every simulation rebuild
+     *  so DOM elements Lit reuses across a rebuild get rebound to their fresh datum. */
+    private boundNodeEls;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private nodeRadius;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
+     * (per-node drag) against the just-rendered DOM. 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.
+     */
+    private applyInteractions;
+    private rebuildSimulation;
+    private onNodeClick;
+    private onLinkClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-graph': LyraGraph;
+    }
+}