@ixfx/components 0.2.4 → 0.2.5

package/dist/ac-text.d.ts

@@ -0,0 +1,97 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/ac-text/ac-text.d.ts
+type AcTextItem = {
+  readonly label: string;
+  readonly subLabel?: string;
+  readonly icon?: string;
+  readonly key?: string;
+  readonly data?: unknown; /** When true, Tab-accept will not append `tabSuffix`. */
+  readonly isLeaf?: boolean; /** Character positions within label that matched the query, used for CSS highlight rendering. */
+  readonly positions?: ReadonlySet<number>;
+};
+type AcTextSelectDetail = {
+  readonly item: AcTextItem;
+  readonly query: string;
+};
+type AcTextSelectEvent = CustomEvent<AcTextSelectDetail>;
+/**
+ * Fired when the user commits a value — either by pressing Enter on typed text
+ *  or by selecting an item from the autocomplete popup (keyboard or click).
+ */
+type AcTextChangeDetail = {
+  /** The committed text value (typed text, or the selected item's label). */readonly value: string;
+  /**
+   * The item key. For autocomplete items: `item.key ?? item.label`.
+   *  For plain typed text: the text itself.
+   */
+  readonly key: string; /** The item's `data` payload. Only present for autocomplete selections. */
+  readonly data?: unknown; /** Whether the commit came from plain typed text or an autocomplete selection. */
+  readonly source: `text` | `autocomplete`;
+};
+type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;
+type AcTextCompletionProvider = (query: string, signal: AbortSignal) => Promise<AcTextItem[]> | AcTextItem[];
+/**
+ * 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));
+ * ```
+ */
+declare class AcTextElement extends LitElement {
+  #private;
+  /** Provides completion results for a query string. */
+  completionProvider: AcTextCompletionProvider | undefined;
+  /** Placeholder text for the input. */
+  placeholder: string;
+  /** Maximum number of query results to cache (LRU). */
+  cacheSize: number;
+  /** Debounce delay in ms before invoking the provider after keystroke. */
+  debounceMs: number;
+  /**
+   * Pre-populate the input with this value. Updated externally after construction is ignored
+   *  unless the input is not currently focused.
+   */
+  value: string;
+  /**
+   * 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.
+   */
+  tabSuffix: string;
+  private _query;
+  private _results;
+  private _isOpen;
+  private _isLoading;
+  private tickled;
+  constructor();
+  disconnectedCallback(): void;
+  protected updated(changedProps: PropertyValues): void;
+  focus(options?: FocusOptions, selectionStart?: number, selectionEnd?: number): void;
+  focusWithValue(value: string, selectionStart?: number, selectionEnd?: number): void;
+  selectRange(start: number, end?: number): void;
+  protected render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-ac-text': AcTextElement;
+  }
+} //# sourceMappingURL=ac-text.d.ts.map
+//#endregion
+export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent };
+//# sourceMappingURL=ac-text.d.ts.map

package/dist/ac-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ac-text.d.ts","names":[],"sources":["../src/ac-text/ac-text.ts"],"mappings":";;;;KAaY,UAAA;EAAA,SACD,KAAA;EAAA,SACA,QAAA;EAAA,SACA,IAAA;EAAA,SACA,GAAA;EAAA,SACA,IAAA,YAJA;EAAA,SAMA,MAAA,YAJA;EAAA,SAMA,SAAA,GAAY,WAAA;AAAA;AAAA,KAGX,kBAAA;EAAA,SACD,IAAA,EAAM,UAAA;EAAA,SACN,KAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAA,CAAY,kBAAA;AAL5C;;;;AAAA,KAWY,kBAAA;EAVK,oFAYN,KAAA;EAXK;;AAGhB;;EAHgB,SAgBL,GAAA,UAbqB;EAAA,SAerB,IAAA,YATC;EAAA,SAWD,MAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAA,CAAY,kBAAA;AAAA,KAEhC,wBAAA,IACP,KAAA,UAAe,MAAA,EAAQ,WAAA,KAAgB,OAAA,CAAQ,UAAA,MAAgB,UAAA;;;;;;AAHpE;;;;;AAEA;;;;;;;;;;;cAoDa,aAAA,SAAsB,UAAA;EAAA;EAnDiB;EAsDlD,kBAAA,EAAoB,wBAAA;EAtDwD;EA0D5E,WAAA;EAPW;EAWX,SAAA;;EAIA,UAAA;EAwCyC;;;;EAjCzC,KAAA;EAtB2C;;;;EA6B3C,SAAA;EAAA,QAEiB,MAAA;EAAA,QACA,QAAA;EAAA,QACA,OAAA;EAAA,QACA,UAAA;EAAA,QAET,OAAA;;EAaC,oBAAA,CAAA;EAAA,UAMU,OAAA,CAAQ,YAAA,EAAc,cAAA;EAiChC,KAAA,CAAM,OAAA,GAAU,YAAA,EAAc,cAAA,WAAyB,YAAA;EAWhE,cAAA,CAAe,KAAA,UAAe,cAAA,WAAyB,YAAA;EAavD,WAAA,CAAY,KAAA,UAAe,GAAA;EAAA,UAmPR,MAAA,CAAA,GA3QkB,KAAA,CA2QZ,cAAA;EAAA,OA6BT,MAAA,EA7BS,KAAA,CA6BH,SAAA;AAAA;AAAA,QAgJhB,MAAA;EAAA,UACI,qBAAA;IACR,cAAA,EAAgB,aAAA;EAAA;AAAA"}

package/dist/ac-text.js

@@ -0,0 +1,484 @@
+import { r as clearHighlights, t as applyHighlights } from "./highlight-CAjwQ4GE.js";
+import { n as tickledStyles, r as TickledController } from "./tickled-styles-Bg3QbcrD.js";
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import "./icon-BR5aTIiP.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/ac-text/ac-text.ts
+const HIGHLIGHT_KEY = `ac-text-highlight`;
+function makeLruCache(maxSize) {
+	const map = /* @__PURE__ */ 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()
+	};
+}
+let AcTextElement = class AcTextElement extends LitElement {
+	#cache;
+	#debounceTimer;
+	#abortController;
+	constructor() {
+		super();
+		this.placeholder = ``;
+		this.cacheSize = 20;
+		this.debounceMs = 150;
+		this.value = ``;
+		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);
+		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 !== void 0) 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]) {
+						e.preventDefault();
+						this.#selectItem(this._results[tickledIndex]);
+					} else if (this._query.trim()) {
+						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;
+			}
+		};
+		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`)) {
+			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);
+	}
+	#onFocus;
+	#onBlur;
+	#onInput;
+	#onKeyDown;
+	/** pointerdown beats blur — prevents popup vanishing before click registers */
+	#onItemPointerDown;
+	#triggerQuery(query) {
+		if (!this.completionProvider) return;
+		const cached = this.#cache.get(query);
+		if (cached !== void 0) {
+			this._results = cached;
+			this.tickled.clearTickled();
+			this._isLoading = false;
+			return;
+		}
+		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 !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
+		this.#abortController?.abort();
+		this.#abortController = void 0;
+		this._isLoading = false;
+	}
+	#scrollActiveIntoView() {
+		this.updateComplete.then(() => {
+			(this.shadowRoot?.querySelector(`.item.tickled`))?.scrollIntoView({ block: `nearest` });
+		});
+	}
+	#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}` : void 0;
+		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);
+//#endregion
+export { AcTextElement };
+
+//# sourceMappingURL=ac-text.js.map

package/dist/ac-text.js.map

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