@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,588 +1,5 @@
-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';
+export * from './model-select.class.js';
+import { LyraModelSelect } from './model-select.class.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);
+//# sourceMappingURL=model-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.js","sourceRoot":"","sources":["../../../src/components/model-select/model-select.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=model-select.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model-select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/model-select/model-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyMlB,CAAC"}