@ixfx/components 0.2.2 → 0.2.4

package/dist/ac-text/ac-text.js

@@ -0,0 +1,571 @@
+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 { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { applyHighlights, clearHighlights } from '../incr-search/highlight.js';
+import { TickledController } from '../interaction/tickled-controller.js';
+import { tickledStyles } from '../interaction/tickled-styles.js';
+import '../icons/icon.js';
+const HIGHLIGHT_KEY = `ac-text-highlight`;
+function makeLruCache(maxSize) {
+    const map = new Map();
+    return {
+        get: (key) => map.get(key),
+        set: (key, value) => {
+            if (map.has(key))
+                map.delete(key);
+            map.set(key, value);
+            if (map.size > maxSize)
+                map.delete(map.keys().next().value);
+        },
+        has: (key) => map.has(key),
+        clear: () => map.clear(),
+    };
+}
+// ---- Component ----
+/**
+ * VS Code command-palette style autocomplete text input.
+ *
+ * Set `completionProvider` to a function that returns matching items for a
+ * given query string. Results are shown in a popup that only exists in the
+ * DOM while the input has focus.
+ *
+ * @fires {AcTextSelectEvent} ac-select — when an autocomplete item is selected
+ * @fires {AcTextChangeEvent} change — when the user commits a value (Enter on typed text or autocomplete selection)
+ *
+ * @example
+ * ```html
+ * <ixfx-ac-text placeholder="Search commands…"></ixfx-ac-text>
+ * ```
+ * ```ts
+ * el.completionProvider = async (query) => commands.filter(c =>
+ *   c.label.toLowerCase().includes(query.toLowerCase())
+ * );
+ * el.addEventListener('change', e => console.log(e.detail));
+ * ```
+ */
+let AcTextElement = class AcTextElement extends LitElement {
+    #cache;
+    #debounceTimer;
+    #abortController;
+    constructor() {
+        super();
+        /** Placeholder text for the input. */
+        this.placeholder = ``;
+        /** Maximum number of query results to cache (LRU). */
+        this.cacheSize = 20;
+        /** Debounce delay in ms before invoking the provider after keystroke. */
+        this.debounceMs = 150;
+        /**
+         * Pre-populate the input with this value. Updated externally after construction is ignored
+         *  unless the input is not currently focused.
+         */
+        this.value = ``;
+        /**
+         * String appended to the label when Tab is used to accept a suggestion.
+         *  Useful for path-style inputs where Tab-accepting a segment should add the separator.
+         */
+        this.tabSuffix = ``;
+        this._query = ``;
+        this._results = [];
+        this._isOpen = false;
+        this._isLoading = false;
+        this.tickled = new TickledController(this, {
+            getItems: () => this._results.map((_, i) => ({ id: i, enabled: true })),
+        });
+        this.#cache = makeLruCache(20);
+        // ---- Handlers ----
+        this.#onFocus = () => {
+            this._isOpen = true;
+            if (this._query.trim()) {
+                this.#triggerQuery(this._query);
+            }
+        };
+        this.#onBlur = () => {
+            this.#cancelPending();
+            this._isOpen = false;
+            this.tickled.clearTickled();
+        };
+        this.#onInput = (e) => {
+            const input = e.target;
+            this._query = input.value;
+            if (this.#debounceTimer !== undefined) {
+                clearTimeout(this.#debounceTimer);
+            }
+            if (!this._query.trim()) {
+                this._results = [];
+                this.tickled.clearTickled();
+                this._isLoading = false;
+                this._isOpen = false;
+                return;
+            }
+            this._isOpen = true;
+            this.#debounceTimer = setTimeout(() => {
+                this.#triggerQuery(this._query);
+            }, this.debounceMs);
+        };
+        this.#onKeyDown = (e) => {
+            switch (e.key) {
+                case `ArrowDown`: {
+                    if (!this._isOpen)
+                        return;
+                    e.preventDefault();
+                    if (this._results.length === 0)
+                        return;
+                    this.tickled.handleKeyboardNavigation(`next`);
+                    this.#scrollActiveIntoView();
+                    break;
+                }
+                case `ArrowUp`: {
+                    if (!this._isOpen)
+                        return;
+                    e.preventDefault();
+                    if (this._results.length === 0)
+                        return;
+                    this.tickled.handleKeyboardNavigation(`previous`);
+                    this.#scrollActiveIntoView();
+                    break;
+                }
+                case `Enter`: {
+                    const tickledIndex = this.tickled.tickledId ?? -1;
+                    if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {
+                        // Autocomplete selection via keyboard
+                        e.preventDefault();
+                        this.#selectItem(this._results[tickledIndex]);
+                    }
+                    else if (this._query.trim()) {
+                        // Plain text commit
+                        e.preventDefault();
+                        this.#commitText(this._query);
+                    }
+                    break;
+                }
+                case `Tab`: {
+                    const tickledIndex = this.tickled.tickledId ?? -1;
+                    if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {
+                        e.preventDefault();
+                        const tabItem = this._results[tickledIndex];
+                        this._query = tabItem.label + (tabItem.isLeaf ? `` : this.tabSuffix);
+                        this.tickled.clearTickled();
+                        this.#triggerQuery(this._query);
+                    }
+                    break;
+                }
+                case `Escape`: {
+                    if (!this._isOpen)
+                        return;
+                    e.preventDefault();
+                    this.#closePopup();
+                    break;
+                }
+            }
+        };
+        /** pointerdown beats blur — prevents popup vanishing before click registers */
+        this.#onItemPointerDown = (e, item) => {
+            e.preventDefault();
+            this.#selectItem(item);
+        };
+        this.#cache = makeLruCache(this.cacheSize);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#cancelPending();
+        clearHighlights({ key: HIGHLIGHT_KEY });
+    }
+    updated(changedProps) {
+        if (changedProps.has(`completionProvider`)) {
+            this.#cache.clear();
+        }
+        if (changedProps.has(`cacheSize`)) {
+            this.#cache = makeLruCache(this.cacheSize);
+        }
+        if (changedProps.has(`value`)) {
+            // Only sync when the input isn't focused (avoid clobbering user typing)
+            const input = this.shadowRoot?.querySelector(`input`);
+            if (!input || document.activeElement !== input) {
+                this._query = this.value;
+            }
+        }
+        this.#applyHighlights();
+    }
+    #applyHighlights() {
+        if (!this._isOpen || !this.shadowRoot) {
+            clearHighlights({ key: HIGHLIGHT_KEY });
+            return;
+        }
+        const labelEls = this.shadowRoot.querySelectorAll(`.item-label`);
+        const targets = [];
+        labelEls.forEach((el, index) => {
+            const positions = this._results[index]?.positions;
+            if (!positions?.size)
+                return;
+            targets.push({ element: el, text: this._results[index].label, positions });
+        });
+        applyHighlights(targets, { key: HIGHLIGHT_KEY });
+    }
+    focus(options, selectionStart, selectionEnd) {
+        const input = this.shadowRoot?.querySelector(`input`);
+        if (!input)
+            return;
+        input.focus(options);
+        const start = selectionStart ?? input.value.length;
+        const end = selectionEnd ?? input.value.length;
+        input.setSelectionRange(start, end);
+        input.scrollLeft = input.scrollWidth;
+    }
+    focusWithValue(value, selectionStart, selectionEnd) {
+        this._query = value;
+        this.updateComplete.then(() => {
+            const input = this.shadowRoot?.querySelector(`input`);
+            if (!input)
+                return;
+            input.focus();
+            const start = selectionStart ?? input.value.length;
+            const end = selectionEnd ?? input.value.length;
+            input.setSelectionRange(start, end);
+        });
+    }
+    selectRange(start, end) {
+        const input = this.shadowRoot?.querySelector(`input`);
+        if (!input)
+            return;
+        const endPos = end ?? input.value.length;
+        input.setSelectionRange(start, endPos);
+    }
+    // ---- Handlers ----
+    #onFocus;
+    #onBlur;
+    #onInput;
+    #onKeyDown;
+    /** pointerdown beats blur — prevents popup vanishing before click registers */
+    #onItemPointerDown;
+    // ---- Internal logic ----
+    #triggerQuery(query) {
+        if (!this.completionProvider)
+            return;
+        const cached = this.#cache.get(query);
+        if (cached !== undefined) {
+            this._results = cached;
+            this.tickled.clearTickled();
+            this._isLoading = false;
+            return;
+        }
+        // Cancel any in-flight request
+        this.#abortController?.abort();
+        this.#abortController = new AbortController();
+        const { signal } = this.#abortController;
+        this._isLoading = true;
+        Promise.resolve(this.completionProvider(query, signal))
+            .then((results) => {
+            if (signal.aborted)
+                return;
+            this.#cache.set(query, results);
+            this._results = results;
+            this.tickled.clearTickled();
+            this._isLoading = false;
+        })
+            .catch((err) => {
+            if (signal.aborted)
+                return;
+            console.error(`[ixfx-ac-text] completionProvider error:`, err);
+            this._results = [];
+            this._isLoading = false;
+        });
+    }
+    #selectItem(item) {
+        this.dispatchEvent(new CustomEvent(`ac-select`, {
+            detail: { item, query: this._query },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: {
+                value: item.label,
+                key: item.key ?? item.label,
+                data: item.data,
+                source: `autocomplete`,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        this._query = item.label;
+        this._isOpen = false;
+        this.tickled.clearTickled();
+    }
+    #commitText(text) {
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: {
+                value: text,
+                key: text,
+                source: `text`,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        this._isOpen = false;
+        this.tickled.clearTickled();
+    }
+    #closePopup() {
+        this._isOpen = false;
+        this.tickled.clearTickled();
+        clearHighlights({ key: HIGHLIGHT_KEY });
+    }
+    #cancelPending() {
+        if (this.#debounceTimer !== undefined) {
+            clearTimeout(this.#debounceTimer);
+            this.#debounceTimer = undefined;
+        }
+        this.#abortController?.abort();
+        this.#abortController = undefined;
+        this._isLoading = false;
+    }
+    #scrollActiveIntoView() {
+        // After Lit renders the new tickled item, scroll it into view
+        this.updateComplete.then(() => {
+            const item = this.shadowRoot?.querySelector(`.item.tickled`);
+            item?.scrollIntoView({ block: `nearest` });
+        });
+    }
+    // ---- Render helpers ----
+    #renderItem(item, index) {
+        const isTickled = this.tickled.isTickled(index);
+        return html `
+      <div
+        class="item ${isTickled ? `tickled` : ``}"
+        role="option"
+        id="ac-item-${index}"
+        aria-selected=${isTickled}
+        @pointerenter=${() => this.tickled.handlePointerEnter(index)}
+        @pointerdown=${(e) => this.#onItemPointerDown(e, item)}
+      >
+        ${item.icon ? html `<ixfx-icon class="item-icon" name=${item.icon}></ixfx-icon>` : nothing}
+        <span class="item-label">${item.label}</span>
+        ${item.subLabel ? html `<span class="item-sublabel">${item.subLabel}</span>` : nothing}
+      </div>
+    `;
+    }
+    #renderPopup() {
+        const showEmpty = !this._isLoading && this._results.length === 0;
+        return html `
+      <div
+        class="popup"
+        role="listbox"
+        aria-label="Suggestions"
+        data-input-mode=${this.tickled.inputMode}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+      >
+        ${showEmpty
+            ? html `<div class="no-results">No matching results</div>`
+            : this._results.map((item, i) => this.#renderItem(item, i))}
+      </div>
+    `;
+    }
+    render() {
+        const tickledIndex = this.tickled.tickledId ?? -1;
+        const activeDescendant = tickledIndex >= 0 ? `ac-item-${tickledIndex}` : undefined;
+        return html `
+      <div class="input-wrapper">
+        <input
+          type="text"
+          .value=${this._query}
+          placeholder=${this.placeholder || nothing}
+          autocomplete="off"
+          spellcheck="false"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded=${this._isOpen}
+          aria-activedescendant=${activeDescendant ?? nothing}
+          @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+        >
+        ${this._isLoading
+            ? html `<span class="spinner" aria-hidden="true"></span>`
+            : nothing}
+      </div>
+      ${this._isOpen ? this.#renderPopup() : nothing}
+    `;
+    }
+    static { this.styles = [
+        tickledStyles,
+        css `
+    :host {
+      display: block;
+      position: relative;
+      font-family: var(--font-family, system-ui, sans-serif);
+      font-size: var(--text-m, 12px);
+      color: var(--surface-2-text);
+    }
+
+    /* ---- Input ---- */
+
+    .input-wrapper {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    input {
+      appearance: none;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--ac-input-padding, var(--space-m, 8px) var(--space-l, 12px));
+      background: var(--ac-input-background, var(--surface-3, var(--surface-2)));
+      color: var(--surface-2-text);
+      border: var(--ac-input-border, var(--border));
+      border-radius: var(--ac-input-border-radius, var(--radius-m, 4px));
+      font: inherit;
+      caret-color: var(--accent);
+      outline: none;
+      transition: border-color var(--transition, 0.15s ease-out);
+    }
+
+    input:focus {
+      border-color: var(--accent);
+    }
+
+    input::placeholder {
+      color: var(--surface-muted-text);
+    }
+
+    /* ---- Spinner ---- */
+
+    .spinner {
+      position: absolute;
+      right: var(--space-m, 8px);
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: ac-spin 0.7s linear infinite;
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+
+    @keyframes ac-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ---- Popup ---- */
+
+    .popup {
+      position: absolute;
+      top: calc(100% + 2px);
+      left: 0;
+      right: 0;
+      z-index: 100;
+      background: var(--surface-3, var(--surface-2));
+      border: var(--border);
+      border-radius: var(--radius-m, 4px);
+      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));
+      padding: var(--space-xs, 3px) 0;
+      max-height: 280px;
+      overflow-y: auto;
+      font-size: var(--ac-popup-font-size, var(--text-s, 11px));
+    }
+
+    /* ---- Items ---- */
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-m, 8px);
+      padding: var(--space-xs, 3px) var(--space-l, 12px);
+      cursor: pointer;
+      border-radius: var(--radius-s, 3px);
+      margin: 0 var(--space-xs, 3px);
+      transition: background var(--transition, 0.1s ease-out);
+      user-select: none;
+      white-space: nowrap;
+      min-height: 28px;
+    }
+
+    
+
+    .item.tickled {
+      background: var(--_item-focused-bg, var(--accent));
+      color: var(--accent-text, #fff);
+    }
+
+    .item.tickled .item-sublabel {
+      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);
+    }
+
+    .item-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    .item-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .item-sublabel {
+      flex-shrink: 0;
+      margin-left: auto;
+      color: var(--surface-muted-text);
+      font-size: var(--text-s, 11px);
+    }
+
+    ::highlight(ac-text-highlight) {
+      background: var(--ac-highlight-background, var(--accent));
+      color: var(--ac-highlight-color, var(--accent-text, #fff));
+      border-radius: 2px;
+      padding: 0 1px;
+    }
+
+    /* ---- Empty state ---- */
+
+    .no-results {
+      padding: var(--space-m, 8px) var(--space-l, 12px);
+      color: var(--surface-muted-text);
+      font-style: italic;
+      font-size: var(--text-s, 11px);
+    }
+  `,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], AcTextElement.prototype, "completionProvider", void 0);
+__decorate([
+    property({ type: String })
+], AcTextElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Number, attribute: `cache-size` })
+], AcTextElement.prototype, "cacheSize", void 0);
+__decorate([
+    property({ type: Number, attribute: `debounce-ms` })
+], AcTextElement.prototype, "debounceMs", void 0);
+__decorate([
+    property({ type: String })
+], AcTextElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: `tab-suffix` })
+], AcTextElement.prototype, "tabSuffix", void 0);
+__decorate([
+    state()
+], AcTextElement.prototype, "_query", void 0);
+__decorate([
+    state()
+], AcTextElement.prototype, "_results", void 0);
+__decorate([
+    state()
+], AcTextElement.prototype, "_isOpen", void 0);
+__decorate([
+    state()
+], AcTextElement.prototype, "_isLoading", void 0);
+AcTextElement = __decorate([
+    customElement(`ixfx-ac-text`)
+], AcTextElement);
+export { AcTextElement };
+//# sourceMappingURL=ac-text.js.map

package/dist/ac-text/ac-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ac-text.js","sourceRoot":"","sources":["../../src/ac-text/ac-text.ts"],"names":[],"mappings":"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"}

package/dist/button/button-styles.d.ts

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

package/dist/button/button-styles.d.ts.map

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

package/dist/button/button-styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const buttonStyles = css `
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  button {
+    cursor: pointer;
+    appearance: none;
+    background: var(--surface-4, #ccc);
+    color: var(--surface-3-text, #000);
+    border: var(--border, 1px solid #999);
+    border-radius: var(--radius-xl, 8px);
+    corner-shape: superellipse(1);
+    padding: var(--space-m, 8px) var(--space-l, 12px);
+    font-family: var(--font-family, inherit);
+    font-size: var(--text-m, 14px);
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    box-shadow: 
+      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  button:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--surface-4) 80%, transparent);
+    border-color: var(--accent, #666);
+    box-shadow: 
+      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), 
+      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);
+  }
+
+  button:active:not(:disabled) {
+    background: var(--surface-2, #aaa);
+    transform: translateY(1px);
+    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);
+  }
+
+  .button-icon {
+    display: var(--ixfx-button-hide-icon, inline-flex);
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .button-label {
+    white-space: nowrap;
+    display: var(--ixfx-button-hide-label, inline);
+  }
+
+  :host([hide-label]) .button-label {
+    display: none;
+  }
+
+  :host([hide-icon]) .button-icon {
+    display: none;
+  }
+`;
+//# sourceMappingURL=button-styles.js.map

package/dist/button/button-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../../src/button/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE9B,CAAC"}