@adia-ai/web-components 0.4.6 → 0.4.7

package/components/command/command.js

@@ -1,354 +1,17 @@
-import { UIElement } from '../../core/element.js';
-
 /**
- * <command-ui> — Searchable command palette.
+ * `<command-ui>` — auto-registers the tag on import.
  *
- * Usage:
- *   <command-ui placeholder="Search...">
- *     <optgroup label="Navigation">
- *       <option value="home" data-icon="home" data-shortcut="⌘H">Go Home</option>
- *     </optgroup>
- *   </command-ui>
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Attributes on <option>:
- *   data-icon      — icon name (renders icon-ui)
- *   data-shortcut  — keyboard shortcut hint
- *   data-keywords  — extra searchable text
- *   disabled       — skips in navigation
+ *   import { UICommand } from '@adia-ai/web-components/components/command/class';
  *
- * Events:
- *   select  — { detail: { value, label } }
- *   dismiss — Escape pressed
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
-class UICommand extends UIElement {
-  static properties = {
-    placeholder: { type: String, default: 'Type a command...', reflect: true },
-    open:        { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #items = [];
-  #recents = [];
-  #activeIdx = -1;
-  #inputEl = null;
-  #listEl = null;
-  #focusRaf = null;
-  #footerEl = null;
-  #bound = false;
-  #itemByEl = new WeakMap();
-
-  static #RECENTS_MAX = 3;
-
-  #onListClick = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
-    if (!el) return;
-    const item = this.#itemByEl.get(el);
-    if (item) this.#select(item);
-  };
-
-  #onListPointerOver = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
-    if (!el) return;
-    const idx = parseInt(el.dataset.idx);
-    if (Number.isFinite(idx) && idx !== this.#activeIdx) this.#activate(idx);
-  };
-
-  connected() {
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('keydown', this.#onKeydown);
-    }
-  }
-
-  render() {
-    // Stamp internal structure once
-    if (!this.#inputEl) {
-      // Parse options from declarative children before replacing innerHTML
-      this.#parseOptions();
-
-      this.innerHTML = `
-        <header>
-          <icon-ui name="magnifying-glass" slot="icon"></icon-ui>
-          <input type="text" placeholder="${this.placeholder}" slot="input" />
-        </header>
-        <section slot="list"></section>
-        <footer>
-          <span data-hint><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
-          <span data-hint><kbd>↵</kbd> Select</span>
-          <span data-hint><kbd>⎋</kbd> Close</span>
-        </footer>
-      `;
-
-      this.#inputEl = this.querySelector('input');
-      this.#listEl = this.querySelector('[slot="list"]');
-      this.#footerEl = this.querySelector('footer');
-
-      this.#inputEl.addEventListener('input', this.#onInput);
-      // Delegated item handlers — handler identity is stable so teardown is symmetric.
-      this.#listEl.addEventListener('click', this.#onListClick);
-      this.#listEl.addEventListener('pointerover', this.#onListPointerOver);
-      this.#renderItems();
-    }
-
-    if (this.open) {
-      this.#focusRaf = requestAnimationFrame(() => {
-        this.#focusRaf = null;
-        this.#inputEl?.focus();
-      });
-    }
-  }
-
-  // ── Public API ──
-
-  get value() { return this.#inputEl?.value || ''; }
-  set value(v) {
-    if (!this.#inputEl) return;
-    const next = v ?? '';
-    this.#inputEl.value = next;
-    // Keep the rendered list in sync with the visible input — the host
-    // commonly clears value on (re)open, and consumers expect to see the
-    // full list (plus recents) rather than the previous filter's residue.
-    this.#renderItems(next);
-  }
-
-  focus() { this.#inputEl?.focus(); }
-
-  setItems(items) {
-    this.#items = items;
-    this.#renderItems();
-  }
-
-  // ── Parse declarative <option>/<optgroup> ──
-
-  #parseOptions() {
-    const items = [];
-    for (const child of this.children) {
-      if (child.tagName === 'OPTGROUP') {
-        const group = { label: child.label, items: [] };
-        for (const opt of child.querySelectorAll('option')) {
-          group.items.push(this.#optionToItem(opt));
-        }
-        items.push(group);
-      } else if (child.tagName === 'OPTION') {
-        items.push(this.#optionToItem(child));
-      }
-    }
-    this.#items = items;
-  }
-
-  #optionToItem(opt) {
-    return {
-      value: opt.value,
-      label: opt.textContent.trim(),
-      icon: opt.dataset.icon || '',
-      shortcut: opt.dataset.shortcut || '',
-      keywords: opt.dataset.keywords || '',
-      disabled: opt.disabled,
-    };
-  }
-
-  // ── Render ──
-
-  #renderItems(filter = '') {
-    if (!this.#listEl) return;
-    this.#listEl.innerHTML = '';
-    this.#activeIdx = -1;
-    const q = filter.toLowerCase();
-
-    const flat = this.#items;
-    let visibleCount = 0;
-
-    // Recents — only when no filter is applied. Resolved against the
-    // current item set so a stale recent (item removed via setItems)
-    // is silently dropped.
-    if (!q && this.#recents.length) {
-      const resolved = this.#recents
-        .map(v => this.#findItem(v))
-        .filter(it => it && !it.disabled);
-      if (resolved.length) {
-        const groupEl = document.createElement('div');
-        groupEl.setAttribute('data-group', '');
-        groupEl.setAttribute('data-recent', '');
-        groupEl.innerHTML = `<div data-group-label>Recent</div>`;
-        for (const item of resolved) {
-          groupEl.appendChild(this.#createItemEl(item, visibleCount));
-          visibleCount++;
-        }
-        this.#listEl.appendChild(groupEl);
-      }
-    }
-
-    for (const entry of flat) {
-      if (entry.items) {
-        // Group
-        const filtered = entry.items.filter(i => this.#matches(i, q));
-        if (!filtered.length) continue;
-
-        const groupEl = document.createElement('div');
-        groupEl.setAttribute('data-group', '');
-        groupEl.innerHTML = `<div data-group-label>${entry.label}</div>`;
-
-        for (const item of filtered) {
-          groupEl.appendChild(this.#createItemEl(item, visibleCount));
-          visibleCount++;
-        }
-        this.#listEl.appendChild(groupEl);
-      } else {
-        if (!this.#matches(entry, q)) continue;
-        this.#listEl.appendChild(this.#createItemEl(entry, visibleCount));
-        visibleCount++;
-      }
-    }
-
-    // Empty state
-    if (!visibleCount) {
-      const empty = document.createElement('div');
-      empty.setAttribute('data-empty', '');
-      empty.textContent = 'No results found.';
-      this.#listEl.appendChild(empty);
-    }
-
-    // Activate first non-disabled
-    if (visibleCount > 0) this.#activate(0);
-  }
-
-  #findItem(value) {
-    for (const entry of this.#items) {
-      if (entry.items) {
-        const hit = entry.items.find(i => i.value === value);
-        if (hit) return hit;
-      } else if (entry.value === value) {
-        return entry;
-      }
-    }
-    return null;
-  }
-
-  #pushRecent(value) {
-    if (!value) return;
-    this.#recents = [value, ...this.#recents.filter(v => v !== value)]
-      .slice(0, UICommand.#RECENTS_MAX);
-  }
-
-  #createItemEl(item, idx) {
-    const el = document.createElement('div');
-    el.setAttribute('role', 'option');
-    el.setAttribute('data-value', item.value);
-    el.setAttribute('data-idx', idx);
-    if (item.disabled) el.setAttribute('aria-disabled', 'true');
-
-    el.innerHTML = `
-      ${item.icon ? `<icon-ui name="${item.icon}"></icon-ui>` : ''}
-      <span data-text>${item.label}</span>
-      ${item.shortcut ? `<span data-shortcut>${item.shortcut}</span>` : ''}
-    `;
-
-    this.#itemByEl.set(el, item);
-    return el;
-  }
-
-  #matches(item, q) {
-    if (!q) return true;
-    return (item.label || '').toLowerCase().includes(q) ||
-           (item.value || '').toLowerCase().includes(q) ||
-           (item.keywords || '').toLowerCase().includes(q);
-  }
-
-  // ── Navigation ──
-
-  #activate(idx) {
-    const options = this.#listEl.querySelectorAll('[role="option"]:not([aria-disabled])');
-    const prev = this.#listEl.querySelector('[data-active]');
-    if (prev) prev.removeAttribute('data-active');
-
-    const target = [...options].find(el => parseInt(el.dataset.idx) === idx);
-    if (target) {
-      target.setAttribute('data-active', '');
-      target.scrollIntoView({ block: 'nearest' });
-      this.#activeIdx = idx;
-    }
-  }
-
-  #moveActive(dir) {
-    const options = [...this.#listEl.querySelectorAll('[role="option"]:not([aria-disabled])')];
-    if (!options.length) return;
-
-    const currentEl = this.#listEl.querySelector('[data-active]');
-    const currentPos = currentEl ? options.indexOf(currentEl) : -1;
-    let next = currentPos + dir;
-    if (next < 0) next = options.length - 1;
-    if (next >= options.length) next = 0;
-
-    this.#activate(parseInt(options[next].dataset.idx));
-  }
-
-  #select(item) {
-    this.#pushRecent(item.value);
-    this.dispatchEvent(new CustomEvent('select', {
-      bubbles: true,
-      detail: { value: item.value, label: item.label },
-    }));
-  }
-
-  #selectActive() {
-    const active = this.#listEl.querySelector('[data-active]');
-    if (!active) return;
-    const value = active.dataset.value;
-    const label = active.querySelector('[data-text]')?.textContent || '';
-    this.#pushRecent(value);
-    this.dispatchEvent(new CustomEvent('select', {
-      bubbles: true,
-      detail: { value, label },
-    }));
-  }
-
-  // ── Events ──
-
-  #onInput = () => {
-    this.#renderItems(this.#inputEl.value);
-  };
 
-  #onKeydown = (e) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        this.#moveActive(1);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        this.#moveActive(-1);
-        break;
-      case 'Enter':
-        e.preventDefault();
-        this.#selectActive();
-        break;
-      case 'Tab':
-        e.preventDefault();
-        this.#selectActive();
-        break;
-      case 'Escape':
-        e.preventDefault();
-        this.dispatchEvent(new Event('dismiss', { bubbles: true }));
-        break;
-    }
-  };
+import { defineIfFree } from '../../core/register.js';
+import { UICommand } from './class.js';
 
-  disconnected() {
-    if (this.#focusRaf != null) {
-      cancelAnimationFrame(this.#focusRaf);
-      this.#focusRaf = null;
-    }
-    this.removeEventListener('keydown', this.#onKeydown);
-    this.#inputEl?.removeEventListener('input', this.#onInput);
-    this.#listEl?.removeEventListener('click', this.#onListClick);
-    this.#listEl?.removeEventListener('pointerover', this.#onListPointerOver);
-    this.#inputEl = null;
-    this.#listEl = null;
-    this.#footerEl = null;
-    this.#bound = false;
-  }
-}
+defineIfFree('command-ui', UICommand);
 
-customElements.define('command-ui', UICommand);
 export { UICommand };

package/components/command/command.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UICommand
 tag: command-ui
@@ -32,155 +30,138 @@ slots:
   search:
     description: Search input with combobox role
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: basic-command
-    description: Basic Command usage
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "comp"
-          ]
-        },
-        {
-          "id": "comp",
-          "component": "Command",
-          "placeholder": "Enter command..."
-        }
-      ]
+- name: basic-command
+  description: Basic Command usage
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"\
+    id\": \"comp\",\n    \"component\": \"Command\",\n    \"placeholder\": \"Enter command...\"\n  }\n]"
 keywords:
-  - command
-  - assistant
-  - copilot
-  - ai
-  - prompt
-  - console
-  - menu
-  - terminal
-  - search
-  - find
-  - lookup
-  - autocomplete
-  - typeahead
-  - spotlight
-  - omnibar
-  - combobox
-  - palette
-  - shortcut
-  - hotkey
-  - keyboard
-  - keybinding
+- command
+- assistant
+- copilot
+- ai
+- prompt
+- console
+- menu
+- terminal
+- search
+- find
+- lookup
+- autocomplete
+- typeahead
+- spotlight
+- omnibar
+- combobox
+- palette
+- shortcut
+- hotkey
+- keyboard
+- keybinding
 synonyms:
   ai:
-    - chat
-    - streaming
-    - response
-    - command
+  - chat
+  - streaming
+  - response
+  - command
   assistant:
-    - chat
-    - streaming
-    - response
-    - command
+  - chat
+  - streaming
+  - response
+  - command
   autocomplete:
-    - search
-    - command
-    - palette
-    - tag
+  - search
+  - command
+  - palette
+  - tag
   combobox:
-    - search
-    - command
-    - select
+  - search
+  - command
+  - select
   command:
-    - command
-    - palette
-    - kbd
-    - shortcut
+  - command
+  - palette
+  - kbd
+  - shortcut
   console:
-    - dashboard
-    - table
-    - data
-    - sidebar
-    - command
+  - dashboard
+  - table
+  - data
+  - sidebar
+  - command
   copilot:
-    - chat
-    - streaming
-    - response
-    - command
+  - chat
+  - streaming
+  - response
+  - command
   find:
-    - search
-    - filter
-    - command
+  - search
+  - filter
+  - command
   hotkey:
-    - kbd
-    - shortcut
-    - command
+  - kbd
+  - shortcut
+  - command
   keybinding:
-    - kbd
-    - shortcut
-    - command
+  - kbd
+  - shortcut
+  - command
   keyboard:
-    - kbd
-    - shortcut
-    - command
+  - kbd
+  - shortcut
+  - command
   lookup:
-    - search
-    - filter
-    - command
+  - search
+  - filter
+  - command
   menu:
-    - nav
-    - sidebar
-    - popover
-    - menu
-    - command
+  - nav
+  - sidebar
+  - popover
+  - menu
+  - command
   omnibar:
-    - command
-    - palette
-    - search
+  - command
+  - palette
+  - search
   palette:
-    - color
-    - picker
-    - command
-    - palette
+  - color
+  - picker
+  - command
+  - palette
   prompt:
-    - chat
-    - streaming
-    - command
-    - palette
+  - chat
+  - streaming
+  - command
+  - palette
   search:
-    - search
-    - filter
-    - command
-    - palette
+  - search
+  - filter
+  - command
+  - palette
   shortcut:
-    - kbd
-    - shortcut
-    - command
+  - kbd
+  - shortcut
+  - command
   spotlight:
-    - command
-    - palette
-    - search
+  - command
+  - palette
+  - search
   terminal:
-    - code
-    - block
-    - command
+  - code
+  - block
+  - command
   typeahead:
-    - search
-    - command
-    - palette
+  - search
+  - command
+  - palette
+  tags:
+  - CommandPalette
 related: []