@adia-ai/web-components 0.0.1

package/components/command/command.js

@@ -0,0 +1,284 @@
+import { AdiaElement } from '@core/element.js';
+
+/**
+ * <command-ui> — Searchable command palette.
+ *
+ * Usage:
+ *   <command-ui placeholder="Search...">
+ *     <optgroup label="Navigation">
+ *       <option value="home" data-icon="home" data-shortcut="⌘H">Go Home</option>
+ *     </optgroup>
+ *   </command-ui>
+ *
+ * Attributes on <option>:
+ *   data-icon      — icon name (renders icon-ui)
+ *   data-shortcut  — keyboard shortcut hint
+ *   data-keywords  — extra searchable text
+ *   disabled       — skips in navigation
+ *
+ * Events:
+ *   select  — { detail: { value, label } }
+ *   dismiss — Escape pressed
+ */
+class AdiaCommand extends AdiaElement {
+  static properties = {
+    placeholder: { type: String, default: 'Type a command...', reflect: true },
+    open:        { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #items = [];
+  #activeIdx = -1;
+  #inputEl = null;
+  #listEl = null;
+  #footerEl = null;
+  #bound = false;
+
+  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);
+      this.#renderItems();
+    }
+
+    if (this.open) {
+      requestAnimationFrame(() => this.#inputEl?.focus());
+    }
+  }
+
+  // ── Public API ──
+
+  get value() { return this.#inputEl?.value || ''; }
+  set value(v) { if (this.#inputEl) this.#inputEl.value = v; }
+
+  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;
+
+    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);
+  }
+
+  #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>` : ''}
+    `;
+
+    el.addEventListener('click', () => {
+      if (item.disabled) return;
+      this.#select(item);
+    });
+
+    el.addEventListener('pointerenter', () => {
+      if (item.disabled) return;
+      this.#activate(idx);
+    });
+
+    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.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.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;
+    }
+  };
+
+  disconnected() {
+    this.removeEventListener('keydown', this.#onKeydown);
+    this.#inputEl?.removeEventListener('input', this.#onInput);
+    this.#inputEl = null;
+    this.#listEl = null;
+    this.#footerEl = null;
+    this.#bound = false;
+  }
+}
+
+customElements.define('command-ui', AdiaCommand);
+export { AdiaCommand };

package/components/command/command.yaml

@@ -0,0 +1,186 @@
+# 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: AdiaCommand
+tag: command-ui
+component: Command
+category: container
+version: 1
+description: Searchable command palette with keyboard navigation.
+props:
+  open:
+    description: Whether the command palette is visible
+    type: boolean
+    default: false
+    reflect: true
+  placeholder:
+    description: Placeholder text for the search input
+    type: string
+    default: Type a command...
+events:
+  dismiss:
+    description: Fired when Escape is pressed
+  select:
+    description: Fired when an item is selected. Detail contains { value, label, item }.
+slots:
+  empty:
+    description: Empty state shown when no items match
+  footer:
+    description: Keyboard hint bar
+  list:
+    description: Container for command items and groups
+  search:
+    description: Search input with combobox role
+states:
+  - 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..."
+        }
+      ]
+keywords:
+  - 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
+  assistant:
+    - chat
+    - streaming
+    - response
+    - command
+  autocomplete:
+    - search
+    - command
+    - palette
+    - tag
+  combobox:
+    - search
+    - command
+    - select
+  command:
+    - command
+    - palette
+    - kbd
+    - shortcut
+  console:
+    - dashboard
+    - table
+    - data
+    - sidebar
+    - command
+  copilot:
+    - chat
+    - streaming
+    - response
+    - command
+  find:
+    - search
+    - filter
+    - command
+  hotkey:
+    - kbd
+    - shortcut
+    - command
+  keybinding:
+    - kbd
+    - shortcut
+    - command
+  keyboard:
+    - kbd
+    - shortcut
+    - command
+  lookup:
+    - search
+    - filter
+    - command
+  menu:
+    - nav
+    - sidebar
+    - popover
+    - menu
+    - command
+  omnibar:
+    - command
+    - palette
+    - search
+  palette:
+    - color
+    - picker
+    - command
+    - palette
+  prompt:
+    - chat
+    - streaming
+    - command
+    - palette
+  search:
+    - search
+    - filter
+    - command
+    - palette
+  shortcut:
+    - kbd
+    - shortcut
+    - command
+  spotlight:
+    - command
+    - palette
+    - search
+  terminal:
+    - code
+    - block
+    - command
+  typeahead:
+    - search
+    - command
+    - palette
+related: []

package/components/description-list/description-list.a2ui.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/DescriptionList.json",
+  "title": "DescriptionList",
+  "description": "Semantic key-value list (dl/dt/dd). Preserves native HTML semantics for screen readers and SSR. Layout supports stacked (default) or inline.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "items": {
+      "description": "Optional JSON array of {term, description} — alternative to declarative <dt>/<dd> children",
+      "type": "array",
+      "default": []
+    },
+    "align": {
+      "description": "Alignment for inline layout — between = term left, value right.",
+      "type": "string",
+      "enum": [
+        "start",
+        "between"
+      ],
+      "default": "start"
+    },
+    "component": {
+      "const": "DescriptionList"
+    },
+    "layout": {
+      "description": "stacked: term above description. inline: term and description on one row.",
+      "type": "string",
+      "enum": [
+        "stacked",
+        "inline"
+      ],
+      "default": "stacked"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "description list",
+      "key value",
+      "metadata",
+      "specs",
+      "properties",
+      "summary",
+      "details",
+      "dl"
+    ],
+    "name": "AdiaDescriptionList",
+    "related": [],
+    "slots": {
+      "[object Object]": {
+        "description": "Child content region for the `[object Object]` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "description-list": [
+        "description list",
+        "key value list",
+        "spec list",
+        "metadata list",
+        "property list"
+      ]
+    },
+    "tag": "description-list-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/description-list/description-list.css

@@ -0,0 +1,70 @@
+@scope (description-list-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --description-list-gap-row:        var(--a-space-2);
+    --description-list-gap-column:     var(--a-space-3);
+    --description-list-term-min-width: 8rem;
+
+    /* ── Typography ── */
+    --description-list-term-font-size: var(--a-ui-sm);
+    --description-list-term-weight:    var(--a-weight-medium);
+    --description-list-desc-font-size: var(--a-ui-sm);
+    --description-list-desc-weight:    var(--a-weight-normal);
+
+    /* ── Colors ── */
+    --description-list-term-fg:        var(--a-fg-muted);
+    --description-list-desc-fg:        var(--a-fg);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--description-list-gap-row) var(--description-list-gap-column);
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Default stacked: term above desc. Each pair in its own implicit row. */
+  :scope {
+    grid-template-columns: 1fr;
+  }
+
+  [data-dl-term],
+  dt {
+    margin: 0;
+    font-size: var(--description-list-term-font-size);
+    font-weight: var(--description-list-term-weight);
+    color: var(--description-list-term-fg);
+    line-height: 1.3;
+  }
+
+  [data-dl-desc],
+  dd {
+    margin: 0;
+    font-size: var(--description-list-desc-font-size);
+    font-weight: var(--description-list-desc-weight);
+    color: var(--description-list-desc-fg);
+    line-height: 1.4;
+  }
+
+  /* Separate pairs with extra gap when stacked */
+  :scope[layout="stacked"] [data-dl-desc]:not(:last-child),
+  :scope[layout="stacked"] dd:not(:last-child) {
+    margin-bottom: var(--description-list-gap-row);
+  }
+
+  /* Inline: term and desc on one row */
+  :scope[layout="inline"] {
+    grid-template-columns: minmax(var(--description-list-term-min-width), max-content) 1fr;
+    align-items: baseline;
+  }
+
+  :scope[layout="inline"][align="between"] [data-dl-desc],
+  :scope[layout="inline"][align="between"] dd {
+    text-align: end;
+  }
+
+  /* Size handled by the universal [size] attribute scaling --a-ui-size;
+     components pick up font-size from token chain automatically. */
+}

package/components/description-list/description-list.js

@@ -0,0 +1,75 @@
+/**
+ * <description-list-ui> — Semantic dl/dt/dd wrapper for key-value metadata.
+ *
+ * Pure layout component. Renders terms and descriptions in a grid.
+ *
+ * Declarative use (recommended — preserves semantics for SSR + AT):
+ *   <description-list-ui>
+ *     <dt>Status</dt><dd>Active</dd>
+ *     <dt>Plan</dt><dd>Pro</dd>
+ *   </description-list-ui>
+ *
+ * Programmatic use:
+ *   <description-list-ui
+ *     items='[{"term":"Status","description":"Active"}]'></description-list-ui>
+ *
+ * Props:
+ *   layout    — "stacked" (term above, default) | "inline" (term : value on one row)
+ *   align     — "start" (default) | "between" (space-between for inline layout)
+ *   items     — optional JSON array of {term, description} pairs
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaDescriptionList extends AdiaElement {
+  static properties = {
+    layout: { type: String, default: 'stacked', reflect: true },
+    align:  { type: String, default: 'start', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    // Use the native <dl> role by wrapping or using the tag directly —
+    // since we're a custom element, we set role explicitly.
+    this.setAttribute('role', 'list');
+  }
+
+  render() {
+    const items = this.#resolveItems();
+    if (!items.length) return; // preserve declarative children
+
+    this.innerHTML = items.map(({ term, description }) => `
+      <dt data-dl-term>${this.#escape(term)}</dt>
+      <dd data-dl-desc>${this.#escape(description)}</dd>
+    `).join('');
+  }
+
+  #resolveItems() {
+    if (Array.isArray(this._items) && this._items.length) return this._items;
+    const attr = this.getAttribute('items');
+    if (attr) {
+      try {
+        const parsed = JSON.parse(attr);
+        if (Array.isArray(parsed)) return parsed;
+      } catch { /* fall through */ }
+    }
+    return [];
+  }
+
+  set items(v) {
+    this._items = Array.isArray(v) ? v : [];
+    this.render();
+  }
+
+  get items() {
+    return this._items || [];
+  }
+
+  #escape(s) {
+    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+}
+
+customElements.define('description-list-ui', AdiaDescriptionList);
+export { AdiaDescriptionList };