@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/model-select/model-select.js

@@ -0,0 +1,588 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
+import { styles } from './model-select.styles.js';
+/**
+ * `<lyra-model-select>` — a provider/model picker that renders as a closed
+ * dropdown when a fixed `catalog` is available, or as a filterable free-text
+ * combobox when it isn't (or when `allow-custom` explicitly permits typing
+ * something outside the catalog). Built directly on the shared
+ * trigger-button/aria-activedescendant listbox technique `<lyra-select>` uses
+ * and the filter-as-you-type suggestion-popup technique `<lyra-combobox>`
+ * uses — not by composing either element, since the mode switch and the
+ * stale-value handling below are specific to this control.
+ *
+ * A `value` that isn't present in `catalog` (e.g. a model id saved from a
+ * provider whose live catalog has since changed) is never silently dropped:
+ * `effectiveEntries` appends it to the rendered option list as a synthetic,
+ * visually-distinct row (dashed border, italic label, "not in catalog"
+ * badge — see `model-select.styles.ts`) computed fresh from `catalog` +
+ * `value` on every render, without ever mutating the `catalog` property
+ * itself.
+ *
+ * @customElement lyra-model-select
+ * @event lyra-change - The selected/typed value changed. `detail: { value: string; inCatalog: boolean }`.
+ * @csspart form-control-label - The `<label>` element (only rendered — and only contributes to the
+ *   accessible name — once `label` is non-empty).
+ * @csspart trigger - The trigger button (closed-dropdown mode's positioning anchor).
+ * @csspart combobox - The text-input container (free-text mode's positioning anchor).
+ * @csspart combobox-input - The free-text mode's text input.
+ * @csspart provider-badge - The optional leading `provider` label.
+ * @csspart listbox - The options popover (shared by both modes).
+ * @csspart option - An option row.
+ * @csspart option-label - An option row's label.
+ * @csspart option-badge - The "not in catalog" badge on a synthetic stale-value row.
+ * @csspart expand-icon - The dropdown indicator.
+ */
+export class LyraModelSelect extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+        required: { type: Boolean, reflect: true, noAccessor: true },
+        value: { noAccessor: true },
+        name: { reflect: true, noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        /** Informational only — e.g. `'ollama'`. Rendered as a small leading badge for display grouping. */
+        this.provider = '';
+        /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
+        this.allowCustom = false;
+        /**
+         * Optional visible title above the control, mirroring `lyra-select`'s
+         * `label` exactly: rendered via a `part="form-control-label"` `<label>`
+         * paired with the control's id, and — once non-empty — it takes over as
+         * the accessible-name source (the `aria-label` fallback below is then only
+         * emitted when the host has an explicit `aria-label` override, same
+         * precedence as `lyra-select`). Leaving it empty (the default) keeps
+         * today's `aria-label || placeholder || 'Model'` chain untouched.
+         */
+        this.label = '';
+        this.placeholder = '';
+        this.open = false;
+        this.activeIndex = -1;
+        // Free-text mode's live input text. Only meaningful while `open` — the
+        // input is otherwise controlled by the committed value's label (see
+        // `renderFreeText`), so this never needs resetting on commit/hide.
+        this.query = '';
+        // Set on first blur; gates the `data-invalid` reflection below so
+        // validity styling never flashes on first render (matches lyra-select).
+        this.touched = false;
+        this.listId = nextId('model-select-list');
+        this.controlId = nextId('model-select-control');
+        this._value = '';
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._disabled = false;
+        this._required = false;
+        // What `form.reset()` restores to — captured from the `value` *content
+        // attribute* only, mirroring native `<input>`/`FormAssociated`'s
+        // `_defaultValue` (see internal/form-associated.ts). There's no child
+        // markup here to seed a declarative default from (unlike lyra-select's
+        // `<lyra-option selected>`), so the initial attribute is the only source.
+        this._defaultValue = '';
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        // -- Closed-dropdown mode (trigger button) --------------------------------
+        this.onTriggerClick = () => {
+            if (this.effectiveDisabled)
+                return;
+            this.open ? this.hide() : this.show();
+        };
+        this.onTriggerBlur = () => {
+            this.touched = true;
+            this.hide();
+        };
+        this.onTriggerKeyDown = (e) => {
+            const rows = this.effectiveEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.open) {
+                        e.preventDefault();
+                        if (this.activeIndex >= 0 && rows[this.activeIndex]) {
+                            this.selectEntry(rows[this.activeIndex]);
+                        }
+                        else {
+                            this.hide();
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Free-text mode (text input) ------------------------------------------
+        this.onComboMouseDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            e.preventDefault();
+            this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
+        };
+        this.onInputFocus = () => {
+            // Seed the editable text from the *current* value each time a fresh
+            // editing session starts, not on every keystroke (onInput overwrites
+            // `query` directly) — otherwise a same-session reopen via ArrowDown
+            // after Escape would clobber the just-reverted text right back to
+            // whatever the user had typed before Escape.
+            if (!this.open)
+                this.query = this.labelFor(this.value);
+            this.show();
+        };
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.activeIndex = -1;
+            this.show();
+        };
+        this.onInputBlur = () => {
+            this.touched = true;
+            this.hide();
+        };
+        this.onInputKeyDown = (e) => {
+            const rows = this.filteredEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.commitFreeText();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.query = this.labelFor(this.value);
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Shared listbox ---------------------------------------------------
+        // Delegated onto [part="listbox"] rather than one closure pair allocated
+        // per row per render — resolves the target row via closest('[part="option"]')
+        // + a data-value lookup, mirroring lyra-select/lyra-combobox.
+        this.onListboxMouseDown = (e) => {
+            if (e.target.closest('[part="option"]'))
+                e.preventDefault();
+        };
+        this.onListboxClick = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            const optionEl = e.target.closest('[part="option"]');
+            const value = optionEl?.dataset.value;
+            if (value === undefined)
+                return;
+            const entry = (this.closedMode ? this.effectiveEntries : this.filteredEntries).find((e2) => e2.id === value);
+            if (entry)
+                this.selectEntry(entry);
+        };
+        this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        // Native <input> always has a submission value ("") from construction —
+        // without this, a control whose `value` is never touched is entirely
+        // absent from FormData instead of present as "" (see form-associated.ts).
+        this.internals.setFormValue('');
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]') ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        this.cleanup = undefined;
+        document.removeEventListener('pointerdown', this.onDocPointer);
+        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
+        // `updated()`'s `open`-driven branch -- without this, `open` stays
+        // `true` across the disconnect/reconnect and `changed.has('open')` never
+        // fires again, leaving the listbox rendered open with no positioning and
+        // no outside-click listener.
+        this.open = false;
+    }
+    attributeChangedCallback(name, old, val) {
+        super.attributeChangedCallback(name, old, val);
+        if (name === 'value')
+            this._defaultValue = this._value;
+    }
+    /** The current model id (empty string when nothing is selected). */
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? '';
+        this.internals.setFormValue(this._value);
+        this.updateValidity();
+        this.requestUpdate('value', old);
+    }
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        if (this._disabled)
+            this.hide();
+        this.requestUpdate('disabled', old);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(next) {
+        const old = this._required;
+        this._required = Boolean(next);
+        this.toggleAttribute('required', this._required);
+        this.updateValidity();
+        this.requestUpdate('required', old);
+    }
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
+    updateValidity() {
+        if (this.required && !this._value) {
+            this.validityController.setValidity({ valueMissing: true }, 'Please choose a model.');
+        }
+        else {
+            this.validityController.setValidity({});
+        }
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+    }
+    formDisabledCallback(disabled) {
+        this._fieldsetDisabled = disabled;
+        if (disabled)
+            this.hide();
+        this.requestUpdate();
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** `catalog`, normalized to `{ id, label }[]` regardless of the plain-string-array shorthand. */
+    get normalizedCatalog() {
+        const raw = this.catalog;
+        if (!raw || raw.length === 0)
+            return [];
+        return raw.map((item) => (typeof item === 'string' ? { id: item, label: item } : item));
+    }
+    /** Closed-dropdown-with-listbox mode vs. free-text filterable mode — see class doc. */
+    get closedMode() {
+        return this.normalizedCatalog.length > 0 && !this.allowCustom;
+    }
+    /**
+     * `normalizedCatalog` plus, when `value` isn't one of its ids, a synthetic
+     * trailing row for it — recomputed from scratch on every access so it
+     * always reflects the *current* `catalog`/`value`, never a snapshot from
+     * whenever `value` happened to be assigned.
+     */
+    get effectiveEntries() {
+        const catalog = this.normalizedCatalog;
+        const entries = catalog.map((e) => ({ ...e, synthetic: false }));
+        if (catalog.length > 0 && this._value && !catalog.some((e) => e.id === this._value)) {
+            entries.push({ id: this._value, label: this._value, synthetic: true });
+        }
+        return entries;
+    }
+    /** `effectiveEntries` filtered by the typed `query` (free-text mode only; id or label substring, case-insensitive). */
+    get filteredEntries() {
+        const q = this.query.trim().toLowerCase();
+        if (!q)
+            return this.effectiveEntries;
+        return this.effectiveEntries.filter((e) => e.id.toLowerCase().includes(q) || e.label.toLowerCase().includes(q));
+    }
+    labelFor(id) {
+        if (!id)
+            return '';
+        return this.effectiveEntries.find((e) => e.id === id)?.label ?? id;
+    }
+    show() {
+        if (this.open || this.effectiveDisabled)
+            return;
+        this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    updated(changed) {
+        const reposition = changed.has('open') || (this.open && (changed.has('catalog') || changed.has('allowCustom')));
+        if (reposition) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            if (this.open) {
+                document.addEventListener('pointerdown', this.onDocPointer);
+                const anchor = this.renderRoot.querySelector(this.closedMode ? '[part="trigger"]' : '[part="combobox"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+            }
+        }
+        if (changed.has('required') || changed.has('touched') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    commitValue(next) {
+        const inCatalog = this.normalizedCatalog.some((e) => e.id === next);
+        this.value = next;
+        this.hide();
+        this.emit('lyra-change', { value: next, inCatalog });
+    }
+    selectEntry(entry) {
+        this.commitValue(entry.id);
+    }
+    /** Enter in free-text mode: commit the highlighted suggestion, else the raw typed text. */
+    commitFreeText() {
+        const rows = this.filteredEntries;
+        if (this.activeIndex >= 0 && rows[this.activeIndex]) {
+            this.commitValue(rows[this.activeIndex].id);
+            return;
+        }
+        this.commitValue(this.query.trim());
+    }
+    renderRows(rows, activeId) {
+        return rows.map((entry, i) => {
+            const id = `${this.listId}-opt-${i}`;
+            const selected = entry.id === this._value;
+            return html `<div
+        part="option"
+        id=${id}
+        role="option"
+        data-value=${entry.id}
+        ?data-synthetic=${entry.synthetic}
+        aria-selected=${selected ? 'true' : 'false'}
+        ?data-active=${id === activeId}
+      >
+        <span part="option-label">${entry.label}</span>
+        ${entry.synthetic ? html `<span part="option-badge">not in catalog</span>` : ''}
+      </div>`;
+        });
+    }
+    renderListbox(rows, activeId, emptyText) {
+        return html `
+      <div
+        part="listbox"
+        id=${this.listId}
+        role="listbox"
+        @mousedown=${this.onListboxMouseDown}
+        @click=${this.onListboxClick}
+      >
+        ${rows.length === 0
+            ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${emptyText}</div>`
+            : this.renderRows(rows, activeId)}
+      </div>
+    `;
+    }
+    /** `part="form-control-label"` — see `label`'s doc comment for its precedence over `aria-label`. */
+    renderLabel() {
+        return html `<label part="form-control-label" for=${this.controlId} ?hidden=${!this.label}>${this.label}</label>`;
+    }
+    renderClosed() {
+        const rows = this.effectiveEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasValue = this._value.length > 0;
+        const hasLabel = this.label.length > 0;
+        return html `
+      ${this.renderLabel()}
+      <button
+        id=${this.controlId}
+        part="trigger"
+        type="button"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls=${this.listId}
+        aria-activedescendant=${activeId}
+        aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Model')}
+        aria-required=${this.required ? 'true' : 'false'}
+        aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+        ?disabled=${this.effectiveDisabled}
+        @click=${this.onTriggerClick}
+        @keydown=${this.onTriggerKeyDown}
+        @blur=${this.onTriggerBlur}
+      >
+        ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+        <span class="trigger-label" ?data-placeholder=${!hasValue}
+          >${hasValue ? this.labelFor(this._value) : this.placeholder}</span
+        >
+        <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+      </button>
+      ${this.renderListbox(rows, activeId, 'No models')}
+    `;
+    }
+    renderFreeText() {
+        const rows = this.filteredEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasLabel = this.label.length > 0;
+        return html `
+      ${this.renderLabel()}
+      <div part="combobox" @mousedown=${this.onComboMouseDown}>
+        ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+        <input
+          id=${this.controlId}
+          part="combobox-input"
+          role="combobox"
+          aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Model')}
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls=${this.listId}
+          aria-activedescendant=${activeId}
+          aria-autocomplete="list"
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+          autocomplete="off"
+          .value=${this.open ? this.query : this.labelFor(this._value)}
+          placeholder=${this.placeholder}
+          ?disabled=${this.effectiveDisabled}
+          @input=${this.onInput}
+          @keydown=${this.onInputKeyDown}
+          @focus=${this.onInputFocus}
+          @blur=${this.onInputBlur}
+        />
+        <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+      </div>
+      ${this.renderListbox(rows, activeId, 'No matches')}
+    `;
+    }
+    render() {
+        return this.closedMode ? this.renderClosed() : this.renderFreeText();
+    }
+}
+__decorate([
+    property()
+], LyraModelSelect.prototype, "provider", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraModelSelect.prototype, "catalog", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'allow-custom' })
+], LyraModelSelect.prototype, "allowCustom", void 0);
+__decorate([
+    property()
+], LyraModelSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraModelSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "query", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "touched", void 0);
+defineElement('model-select', LyraModelSelect);

package/dist/components/model-select/model-select.styles.d.ts

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