@adia-ai/web-components 0.0.18 → 0.0.19

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/TableToolbar.json",
   "title": "TableToolbar",
-  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility.",
+  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi- select (searchable above 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
   "type": "object",
   "allOf": [
     {

package/components/table-toolbar/table-toolbar.css

@@ -150,12 +150,16 @@
   gap: var(--a-space-1);
 }
 
+/* The popover head + empty hint are <text-ui variant="kicker"|caption">,
+   so their typography (uppercase, tracking, muted color) comes from
+   text-ui's own variant rules — no rule needed here.
+   Sort rows are <menu-item-ui> — hover/focus/danger styling comes from
+   menu-item-ui's @scope block.
+   Filter and columns rows are <field-ui inline> — label/control geometry
+   comes from field-ui's @scope block. */
+
 [data-toolbar-popover] [data-popover-head] {
-  font-size: var(--a-ui-tiny);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--a-fg-muted);
-  padding: var(--a-space-1) var(--a-ui-px, var(--a-space-2));
+  padding: var(--a-space-1) var(--a-space-2);
 }
 
 [data-toolbar-popover] [data-popover-list] {
@@ -178,92 +182,21 @@
   padding-top: var(--a-space-1);
 }
 
-/* ── Filter rows ── */
-
-[data-toolbar-popover] [data-filter-row] {
-  display: grid;
-  grid-template-columns: 1fr minmax(8rem, 1.2fr);
-  align-items: center;
-  gap: var(--a-space-2);
+[data-toolbar-popover] [data-filter-row],
+[data-toolbar-popover] [data-columns-row] {
   padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius-sm);
-  color: var(--a-fg-subtle);
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-filter-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}
-
-[data-toolbar-popover] [data-filter-label] {
-  font-size: var(--a-ui-sm);
-  color: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 [data-toolbar-popover] [data-filter-input] {
   min-width: 0;
 }
 
-/* ── Sort rows ── */
-
-[data-toolbar-popover] [data-sort-row] {
-  all: unset;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--a-space-2);
-  padding: var(--a-space-1) var(--a-space-2);
-  font-size: var(--a-ui-sm);
-  color: var(--a-fg-subtle);
-  border-radius: var(--a-radius-sm);
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-sort-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}
-
+/* Active sort row: lift the menu-item-ui's bg/fg via CSS-var override —
+   menu-item-ui exposes --menu-item-bg / --menu-item-fg / --menu-item-icon-fg
+   for exactly this. Stays inside the menu-item-ui token contract. */
 [data-toolbar-popover] [data-sort-row][data-active] {
-  color: var(--a-fg);
-  background: var(--a-bg-selected);
+  --menu-item-bg: var(--a-bg-selected);
+  --menu-item-fg: var(--a-fg);
+  --menu-item-icon-fg: var(--a-fg);
   font-weight: var(--a-ui-weight, var(--a-weight-medium));
 }
-
-[data-toolbar-popover] [data-sort-indicator] {
-  color: var(--a-fg-muted);
-}
-
-[data-toolbar-popover] [data-sort-row][data-active] [data-sort-indicator] {
-  color: var(--a-fg);
-}
-
-/* ── Columns rows ── */
-
-[data-toolbar-popover] [data-columns-row] {
-  display: flex;
-  align-items: center;
-  gap: var(--a-space-2);
-  padding: var(--a-space-1) var(--a-space-2);
-  font-size: var(--a-ui-sm);
-  color: var(--a-fg-subtle);
-  border-radius: var(--a-radius-sm);
-  cursor: pointer;
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-[data-toolbar-popover] [data-columns-row]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-hover);
-}

package/components/table-toolbar/table-toolbar.js

@@ -43,7 +43,6 @@ class AdiaTableToolbar extends AdiaElement {
 
   #target = null;
   #targetListeners = [];
-  #searchTimer = null;
   #activePopover = null;       // { btn, panel, cleanup }
   #docListenersBound = false;
 
@@ -57,8 +56,6 @@ class AdiaTableToolbar extends AdiaElement {
   }
 
   disconnected() {
-    clearTimeout(this.#searchTimer);
-    this.#searchTimer = null;
     this.#closePopover();
     this.#detachTarget();
   }
@@ -139,13 +136,16 @@ class AdiaTableToolbar extends AdiaElement {
     controls.appendChild(this.#mkButton('sort', 'Sort', 'arrows-down-up'));
     controls.appendChild(this.#mkButton('columns', 'Columns', 'columns'));
 
-    // Search
-    const search = document.createElement('input-ui');
+    // Search — compose <search-ui>, which already stamps input-ui with
+    // the magnifying-glass prefix + clear suffix and debounces a `search`
+    // event. Rolling our own from input-ui would re-derive that wiring
+    // and (as discovered) hit a first-paint timing race where the icon
+    // name renders as literal text before the icon registry resolves.
+    const search = document.createElement('search-ui');
     search.setAttribute('data-search', '');
-    search.setAttribute('type', 'search');
-    search.setAttribute('prefix', 'magnifying-glass');
     search.setAttribute('placeholder', this.placeholder);
-    search.addEventListener('input', this.#onSearchInput);
+    search.setAttribute('debounce', String(SEARCH_DEBOUNCE));
+    search.addEventListener('search', this.#onSearch);
 
     // Actions slot passthrough — we move any pre-existing [slot="actions"] children here
     const actionsSlot = document.createElement('div');
@@ -246,16 +246,13 @@ class AdiaTableToolbar extends AdiaElement {
 
   // ── Search ───────────────────────────────────────────────────────────────
 
-  #onSearchInput = (e) => {
-    const value = e.target?.value ?? '';
-    clearTimeout(this.#searchTimer);
-    this.#searchTimer = setTimeout(() => {
-      if (this.#target) this.#target.search = value;
-      this.dispatchEvent(new CustomEvent('search', {
-        bubbles: true,
-        detail: { value },
-      }));
-    }, SEARCH_DEBOUNCE);
+  #onSearch = (e) => {
+    const value = e.detail?.value ?? '';
+    if (this.#target) this.#target.search = value;
+    this.dispatchEvent(new CustomEvent('search', {
+      bubbles: true,
+      detail: { value },
+    }));
   };
 
   // ── Sync from target (initial paint) ─────────────────────────────────────
@@ -344,40 +341,78 @@ class AdiaTableToolbar extends AdiaElement {
     }
     const filters = target.filters || {};
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Filter rows';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Filter rows'));
 
     const list = document.createElement('div');
     list.setAttribute('data-popover-list', '');
 
+    const data = target.data || [];
     for (const col of target.columns) {
       if (col.hidden) continue;
-      const row = document.createElement('label');
+      // <field-ui inline label="…"><…control…></…></field-ui> — canonical
+      // label-binds-to-control pair, mints id + [for]. The CONTROL is
+      // chosen per-column from the column's filter shape:
+      //   • 'select' → <select-ui multiple searchable> populated from data
+      //   • 'text'   → <input-ui type="text"> (contains match)
+      // Shape comes from col.filter when set, otherwise auto-detected
+      // from the data (id-like keys → text; ≤ 50 distinct values → select).
+      const row = document.createElement('field-ui');
       row.setAttribute('data-filter-row', '');
+      row.setAttribute('inline', '');
+      row.setAttribute('label', col.label || col.key);
+
+      const shape = detectFilterShape(col, data);
+      const current = filters[col.key];
+
+      if (shape === 'select') {
+        const sel = document.createElement('select-ui');
+        sel.setAttribute('data-filter-input', '');
+        sel.setAttribute('multiple', '');
+        sel.setAttribute('placeholder', '—');
+
+        const uniqueValues = collectUniqueValues(col, data);
+        // Searchable kicks in at 12+ options — below that the listbox is
+        // fully scannable and a search field is overhead.
+        if (uniqueValues.length >= 12) sel.setAttribute('searchable', '');
+
+        for (const val of uniqueValues) {
+          const opt = document.createElement('option');
+          opt.setAttribute('value', val);
+          opt.textContent = val;
+          sel.appendChild(opt);
+        }
+        if (current?.op === 'select' && current.value) {
+          sel.value = current.value;
+        }
+        sel.addEventListener('change', () => {
+          const v = sel.value || '';
+          if (v) target.setFilter(col.key, v, 'select');
+          else target.setFilter(col.key, null);
+          this.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            detail: { filters: target.filters },
+          }));
+        });
+        row.appendChild(sel);
+      } else {
+        const input = document.createElement('input-ui');
+        input.setAttribute('type', 'text');
+        input.setAttribute('size', 'sm');
+        input.setAttribute('data-filter-input', '');
+        input.setAttribute('placeholder', '—');
+        if (current?.op === 'contains') input.value = current.value ?? '';
+        input.addEventListener('input', () => {
+          const v = input.value;
+          if (v) target.setFilter(col.key, v, 'contains');
+          else target.setFilter(col.key, null);
+          this.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            detail: { filters: target.filters },
+          }));
+        });
+        row.appendChild(input);
+      }
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-filter-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
-      const input = document.createElement('input-ui');
-      input.setAttribute('type', 'text');
-      input.setAttribute('size', 'sm');
-      input.setAttribute('data-filter-input', '');
-      input.setAttribute('placeholder', '—');
-      input.value = filters[col.key]?.value ?? '';
-      input.addEventListener('input', () => {
-        const v = input.value;
-        if (v) target.setFilter(col.key, v, 'contains');
-        else target.setFilter(col.key, null);
-        this.dispatchEvent(new CustomEvent('filter-change', {
-          bubbles: true,
-          detail: { filters: target.filters },
-        }));
-      });
-      row.appendChild(input);
       list.appendChild(row);
     }
 
@@ -412,10 +447,7 @@ class AdiaTableToolbar extends AdiaElement {
       return;
     }
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Sort by';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Sort by'));
 
     const sortState = target.sortState || [];
     const dirByKey = new Map(sortState.map((s) => [s.key, s.dir]));
@@ -427,29 +459,30 @@ class AdiaTableToolbar extends AdiaElement {
       if (col.hidden) continue;
       if (col.sortable === false) continue;
 
-      const row = document.createElement('button');
-      row.type = 'button';
+      // <menu-item-ui> is the canonical action-row primitive (role="menuitem",
+      // built-in icon + text slots, hover/focus tokens, danger variant). Append
+      // a trailing <icon-ui> after the auto-stamped [slot="text"] — its flex:1
+      // pushes any later child to the trailing edge.
+      const dir = dirByKey.get(col.key);
+      const row = document.createElement('menu-item-ui');
       row.setAttribute('data-sort-row', '');
+      row.setAttribute('text', col.label || col.key);
       row.dataset.key = col.key;
-
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-sort-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
-      const dir = dirByKey.get(col.key);
-      const indicator = document.createElement('icon-ui');
-      indicator.setAttribute('data-sort-indicator', '');
-      indicator.setAttribute('size', 'xs');
-      indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
       if (dir) row.dataset.active = dir;
-      row.appendChild(indicator);
+
+      // Trailing direction indicator — append AFTER menu-item-ui's connected()
+      // has run its #stamp() (defers via rAF so the [slot="text"] span exists).
+      requestAnimationFrame(() => {
+        const indicator = document.createElement('icon-ui');
+        indicator.setAttribute('data-sort-indicator', '');
+        indicator.setAttribute('size', 'xs');
+        indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
+        row.appendChild(indicator);
+      });
 
       row.addEventListener('click', (e) => {
-        // Multi-sort with shift: forward to the table by simulating a header click
-        // (the table already owns the asc / desc / clear cycle). Falls back to no-op
-        // when the table is not present — same defensive shape as chart-legend's
-        // [for] target check.
+        // Forward to the bound table by simulating a header click — the table
+        // already owns the asc / desc / clear cycle, so we don't duplicate state.
         const headerCell = target.querySelector(`:scope > [data-header] [data-sort-key="${col.key}"]`);
         if (!headerCell) return;
         const evt = new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: e.shiftKey });
@@ -512,17 +545,19 @@ class AdiaTableToolbar extends AdiaElement {
       return;
     }
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Visible columns';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Visible columns'));
 
     const list = document.createElement('div');
     list.setAttribute('data-popover-list', '');
 
     for (const col of target.columns) {
-      const row = document.createElement('label');
+      // <field-ui inline label="…"><check-ui></check-ui></field-ui> —
+      // canonical label-binds-to-control pair, mints id + [for] so clicking
+      // the label toggles the check. Same primitive used for filter rows.
+      const row = document.createElement('field-ui');
       row.setAttribute('data-columns-row', '');
+      row.setAttribute('inline', '');
+      row.setAttribute('label', col.label || col.key);
 
       const check = document.createElement('check-ui');
       if (!col.hidden) check.setAttribute('checked', '');
@@ -539,11 +574,6 @@ class AdiaTableToolbar extends AdiaElement {
       });
       row.appendChild(check);
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-columns-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
       list.appendChild(row);
     }
 
@@ -560,6 +590,96 @@ function emptyHint(text) {
   return el;
 }
 
+function popoverHead(text) {
+  // <text-ui variant="kicker"> renders the uppercase + tracked + muted-color
+  // section-marker typography role — exactly what a popover head needs. No
+  // bespoke styling required, no [data-popover-head] CSS rule.
+  const el = document.createElement('text-ui');
+  el.setAttribute('data-popover-head', '');
+  el.setAttribute('variant', 'kicker');
+  el.setAttribute('color', 'subtle');
+  el.textContent = text;
+  return el;
+}
+
+// ── Filter shape detection ─────────────────────────────────────────────────
+
+const SELECT_THRESHOLD = 50;       // ≤ N distinct values → multi-select
+const SAMPLE_LIMIT     = 500;      // cap data scan for cardinality detection
+
+/**
+ * Resolve a cell value for a column. Mirrors table.js getCellValue —
+ * supports col.accessor (function) and dot-notation col.key paths.
+ */
+function getCellValue(row, col) {
+  if (typeof col?.accessor === 'function') return col.accessor(row);
+  const path = col?.key;
+  if (!path || row == null) return undefined;
+  const parts = String(path).split('.');
+  let cur = row;
+  for (const p of parts) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
+/**
+ * Heuristic: id-like keys (`id`, `userId`, `worker_id`, `uuid`, `guid`)
+ * are searched as free text — picking from a 10k-entry listbox is worse
+ * UX than typing a known value.
+ */
+function looksLikeIdKey(key) {
+  if (!key) return false;
+  const k = String(key);
+  if (k === 'id' || k === 'ID' || k === 'uuid' || k === 'guid') return true;
+  if (/[a-z](Id|ID)$/.test(k)) return true;   // camelCase: workerId, userId
+  if (/_id$/i.test(k)) return true;           // snake_case: worker_id
+  return false;
+}
+
+/**
+ * Choose the right filter primitive for a column.
+ *   col.filter = 'select' | 'text'   — explicit override (table-ui contract)
+ *   col.type   = 'number' | 'currency' | 'percent' → 'text' (numeric range
+ *                support is a future addition; falls back to contains for now)
+ *   id-like key → 'text'
+ *   ≤ SELECT_THRESHOLD distinct values in the sample → 'select'
+ *   otherwise → 'text'
+ */
+function detectFilterShape(col, data) {
+  if (col?.filter === 'select' || col?.filter === 'text') return col.filter;
+  if (looksLikeIdKey(col?.key)) return 'text';
+
+  const values = [];
+  const limit = Math.min(data?.length ?? 0, SAMPLE_LIMIT);
+  const unique = new Set();
+  for (let i = 0; i < limit; i++) {
+    const v = getCellValue(data[i], col);
+    if (v == null || v === '') continue;
+    values.push(v);
+    unique.add(String(v));
+    if (unique.size > SELECT_THRESHOLD) return 'text';
+  }
+  if (!values.length) return 'text';
+  return 'select';
+}
+
+/**
+ * Collect distinct stringified values for the column from data, sorted.
+ * Used to populate select-ui options when filter shape === 'select'.
+ */
+function collectUniqueValues(col, data) {
+  const set = new Set();
+  const limit = Math.min(data?.length ?? 0, SAMPLE_LIMIT);
+  for (let i = 0; i < limit; i++) {
+    const v = getCellValue(data[i], col);
+    if (v == null || v === '') continue;
+    set.add(String(v));
+  }
+  return [...set].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+}
+
 customElements.define('table-toolbar-ui', AdiaTableToolbar);
 
 export { AdiaTableToolbar };

package/components/table-toolbar/table-toolbar.yaml

@@ -10,6 +10,11 @@ description: >-
   target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding
   pattern. Drop next to (or above) any table-ui to add the standard data-grid
   toolbar without re-implementing search, filter, sort, or column visibility.
+  Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi-
+  select (searchable above 12 options), id-like keys → free-text contains. The
+  column descriptor's `filter` field overrides the auto-detect: `'select'`
+  forces multi-select even on high-cardinality columns; `'text'` forces a
+  contains input even on small enums.
 props:
   for:
     description: id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {