@adia-ai/web-components 0.4.5 → 0.4.7

package/components/agent-feedback-bar/class.js

@@ -0,0 +1,162 @@
+/**
+ * Non-side-effect class export for `<agent-feedback-bar-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/agent-feedback-bar`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <agent-feedback-bar-ui> — Thumbs + save row under an agent response.
+ *
+ * Emits semantic events; the host decides how to persist. Status slot shows a
+ * short acknowledgement ("Thanks!", "Saved as X") after an action fires.
+ *
+ * Usage:
+ *   <agent-feedback-bar-ui
+ *     save-label="Save pattern"
+ *     save-icon="bookmark-simple"
+ *   ></agent-feedback-bar-ui>
+ *
+ *   el.addEventListener('feedback-rate', e => persist(e.detail.rating));
+ *   el.addEventListener('feedback-save', async () => {
+ *     const name = await savePattern(...);
+ *     el.setStatus(`Saved as "${name}"`, { lock: 'save' });
+ *   });
+ *
+ * Attributes:
+ *   save-label  — text of the save button (empty → save button hidden)
+ *   save-icon   — icon for the save button (default: bookmark-simple)
+ *   disabled    — disable all actions
+ *
+ * Events:
+ *   feedback-rate  — detail: { rating: 1..5 }  (thumbs-up = 5, thumbs-down = 2)
+ *   feedback-save  — detail: {}                (save action pressed)
+ *
+ * JS API:
+ *   .setStatus(text, { lock? })  lock='rate'|'save'|'all' disables matching buttons
+ *   .reset()                      clear status, re-enable buttons
+ */
+
+import { UIElement } from '../../core/element.js';
+
+function makeButton({ icon, text = '' }) {
+  const btn = document.createElement('button-ui');
+  btn.setAttribute('icon', icon);
+  btn.setAttribute('variant', 'ghost');
+  btn.setAttribute('size', 'sm');
+  if (text) btn.setAttribute('text', text);
+  return btn;
+}
+
+export class UIAgentFeedbackBar extends UIElement {
+  static properties = {
+    saveLabel: { type: String,  default: '',                reflect: true, attribute: 'save-label' },
+    saveIcon:  { type: String,  default: 'bookmark-simple', reflect: true, attribute: 'save-icon' },
+    disabled:  { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #upEl = null;
+  #downEl = null;
+  #saveEl = null;
+  #statusEl = null;
+  #rated = false;
+  #saved = false;
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#upEl?.removeEventListener('press', this.#onUp);
+    this.#downEl?.removeEventListener('press', this.#onDown);
+    this.#saveEl?.removeEventListener('press', this.#onSave);
+    this.#upEl = this.#downEl = this.#saveEl = this.#statusEl = null;
+  }
+
+  setStatus(text, { lock = '' } = {}) {
+    if (!this.#statusEl) return;
+    this.#statusEl.textContent = text || '';
+    if (lock === 'rate' || lock === 'all') {
+      this.#rated = true;
+      if (this.#upEl) this.#upEl.disabled = true;
+      if (this.#downEl) this.#downEl.disabled = true;
+    }
+    if (lock === 'save' || lock === 'all') {
+      this.#saved = true;
+      if (this.#saveEl) this.#saveEl.disabled = true;
+    }
+  }
+
+  reset() {
+    this.#rated = false;
+    this.#saved = false;
+    if (this.#statusEl) this.#statusEl.textContent = '';
+    if (this.#upEl) this.#upEl.disabled = false;
+    if (this.#downEl) this.#downEl.disabled = false;
+    if (this.#saveEl) this.#saveEl.disabled = false;
+  }
+
+  #onUp   = () => { if (!this.#rated && !this.disabled) this.#emitRate(5); };
+  #onDown = () => { if (!this.#rated && !this.disabled) this.#emitRate(2); };
+  #onSave = () => { if (!this.#saved && !this.disabled) this.#emitSave(); };
+
+  #emitRate(rating) {
+    this.dispatchEvent(new CustomEvent('feedback-rate', {
+      bubbles: true, detail: { rating },
+    }));
+    // Host owns lock — but pre-set a generic ack as a courtesy.
+    if (!this.#statusEl?.textContent) {
+      this.setStatus(rating >= 4 ? 'Thanks!' : 'Noted', { lock: 'rate' });
+    }
+  }
+
+  #emitSave() {
+    this.dispatchEvent(new CustomEvent('feedback-save', {
+      bubbles: true, detail: {},
+    }));
+  }
+
+  render() {
+    // Re-sync attributes (label/icon) that may have changed.
+    const label = this.saveLabel;
+    const icon = this.saveIcon;
+    if (this.#saveEl) {
+      if (label) {
+        this.#saveEl.setAttribute('text', label);
+        this.#saveEl.hidden = false;
+      } else {
+        this.#saveEl.hidden = true;
+      }
+      if (icon) this.#saveEl.setAttribute('icon', icon);
+    }
+  }
+
+  #build() {
+    this.innerHTML = '';
+
+    this.#upEl = makeButton({ icon: 'thumbs-up' });
+    this.#downEl = makeButton({ icon: 'thumbs-down' });
+    this.#saveEl = makeButton({
+      icon: this.saveIcon || 'bookmark-simple',
+      text: this.saveLabel || '',
+    });
+    if (!this.saveLabel) this.#saveEl.hidden = true;
+
+    this.#upEl.addEventListener('press', this.#onUp);
+    this.#downEl.addEventListener('press', this.#onDown);
+    this.#saveEl.addEventListener('press', this.#onSave);
+
+    this.#statusEl = document.createElement('span');
+    this.#statusEl.setAttribute('data-feedback-status', '');
+
+    this.append(this.#upEl, this.#downEl, this.#saveEl, this.#statusEl);
+  }
+}

package/components/agent-questions/agent-questions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<agent-questions-ui>` — Multi-choice clarifying-question cards.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/agent-questions
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIAgentQuestions extends UIElement {
+  /** Helper text. */
+  helper: string;
+  /** Allow multi-select. */
+  multi: boolean;
+  /** Headline question. */
+  question: string;
+  /** Submit button label (multi mode). */
+  submitLabel: string;
+}

package/components/agent-questions/agent-questions.js

@@ -1,189 +1,17 @@
 /**
- * <agent-questions-ui> — Multi-choice clarifying-question cards.
+ * `<agent-questions-ui>` — auto-registers the tag on import.
  *
- * The agent asks a structured question and offers 2-6 options as stacked cards
- * (claude.ai style). Supports single- or multi-select. On submit, host receives
- * the picked option ids.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * JS API:
- *   el.question = 'Which direction fits best?';
- *   el.helper   = 'Pick one — we can revisit later.';
- *   el.options  = [
- *     { id: 'lean',      label: 'Lean & minimal',   description: 'Whitespace-heavy, neutral palette.', icon: 'square' },
- *     { id: 'expressive',label: 'Expressive',       description: 'Bold type, vivid accents.',         icon: 'sparkle' },
- *     { id: 'utilitarian',label: 'Utilitarian',     description: 'Dense, information-first.',          icon: 'gear' },
- *   ];
+ *   import { UIAgentQuestions } from '@adia-ai/web-components/components/agent-questions/class';
  *
- *   el.addEventListener('questions-answer', (e) => {
- *     // detail: { selected: string[], option: optionObject | null }
- *   });
- *
- * Attributes:
- *   multi      — allow multiple selections (default: false)
- *   submit-label — label for the submit button (shown only when multi)
- *
- * Events:
- *   questions-answer — detail: { selected: string[], option: chosen | null }
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIAgentQuestions extends UIElement {
-  static properties = {
-    multi:       { type: Boolean, default: false, reflect: true },
-    question:    { type: String,  default: '',    reflect: true },
-    helper:      { type: String,  default: '',    reflect: true },
-    submitLabel: { type: String,  default: 'Continue', reflect: true, attribute: 'submit-label' },
-  };
-
-  static template = () => null;
-
-  #options = [];
-  #selected = new Set();
-  #answered = false;
-  #questionEl = null;
-  #helperEl = null;
-  #optionsEl = null;
-  #submitEl = null;
-
-  get options() { return this.#options; }
-  set options(v) {
-    this.#options = Array.isArray(v) ? v.slice() : [];
-    this.#selected.clear();
-    this.#answered = false;
-    this.#render();
-  }
-
-  connected() {
-    this.#build();
-  }
-
-  disconnected() {
-    this.#submitEl?.removeEventListener('press', this.#onSubmit);
-    this.#questionEl = this.#helperEl = this.#optionsEl = this.#submitEl = null;
-  }
-
-  render() {
-    // Keep question/helper text in sync with attribute changes
-    if (this.#questionEl) {
-      this.#questionEl.textContent = this.question || '';
-      this.#questionEl.hidden = !this.question;
-    }
-    if (this.#helperEl) {
-      this.#helperEl.textContent = this.helper || '';
-      this.#helperEl.hidden = !this.helper;
-    }
-    if (this.#submitEl) {
-      this.#submitEl.setAttribute('text', this.submitLabel || 'Continue');
-      this.#submitEl.hidden = !this.multi;
-    }
-  }
-
-  #build() {
-    this.innerHTML = '';
-
-    this.#questionEl = document.createElement('div');
-    this.#questionEl.setAttribute('data-questions-q', '');
-    if (this.question) this.#questionEl.textContent = this.question;
-    else this.#questionEl.hidden = true;
-
-    this.#helperEl = document.createElement('div');
-    this.#helperEl.setAttribute('data-questions-helper', '');
-    if (this.helper) this.#helperEl.textContent = this.helper;
-    else this.#helperEl.hidden = true;
-
-    this.#optionsEl = document.createElement('div');
-    this.#optionsEl.setAttribute('data-questions-options', '');
-
-    this.#submitEl = document.createElement('button-ui');
-    this.#submitEl.setAttribute('text', this.submitLabel || 'Continue');
-    this.#submitEl.setAttribute('variant', 'primary');
-    this.#submitEl.setAttribute('size', 'sm');
-    this.#submitEl.setAttribute('disabled', '');
-    if (!this.multi) this.#submitEl.hidden = true;
-    this.#submitEl.addEventListener('press', this.#onSubmit);
-
-    this.append(this.#questionEl, this.#helperEl, this.#optionsEl, this.#submitEl);
-    this.#render();
-  }
-
-  #render() {
-    if (!this.#optionsEl) return;
-    this.#optionsEl.innerHTML = '';
-
-    for (const opt of this.#options) {
-      const card = document.createElement('button');
-      card.type = 'button';
-      card.setAttribute('data-questions-option', '');
-      card.setAttribute('role', this.multi ? 'checkbox' : 'radio');
-      card.setAttribute('aria-checked', this.#selected.has(opt.id) ? 'true' : 'false');
-      if (this.#selected.has(opt.id)) card.setAttribute('data-selected', '');
-      if (this.#answered) card.setAttribute('disabled', '');
-
-      const iconHTML = opt.icon
-        ? `<icon-ui name="${escapeAttr(opt.icon)}" color="muted" data-questions-option-icon></icon-ui>`
-        : '';
-      const checkHTML = `
-        <span data-questions-option-check aria-hidden="true">
-          <icon-ui name="check" size="sm" color="accent"></icon-ui>
-        </span>`;
-
-      card.innerHTML = `
-        ${iconHTML}
-        <span data-questions-option-body>
-          <span data-questions-option-label>${escapeText(opt.label || '')}</span>
-          ${opt.description ? `<span data-questions-option-desc>${escapeText(opt.description)}</span>` : ''}
-        </span>
-        ${checkHTML}
-      `;
-
-      card.addEventListener('click', () => this.#pick(opt));
-      this.#optionsEl.appendChild(card);
-    }
-
-    if (this.#submitEl) {
-      this.#submitEl.disabled = this.#answered || this.#selected.size === 0;
-    }
-  }
-
-  #pick(opt) {
-    if (this.#answered) return;
-    if (this.multi) {
-      if (this.#selected.has(opt.id)) this.#selected.delete(opt.id);
-      else this.#selected.add(opt.id);
-      this.#render();
-    } else {
-      this.#selected.clear();
-      this.#selected.add(opt.id);
-      this.#answered = true;
-      this.#render();
-      this.dispatchEvent(new CustomEvent('questions-answer', {
-        bubbles: true,
-        detail: { selected: [opt.id], option: opt },
-      }));
-    }
-  }
-
-  #onSubmit = () => {
-    if (this.#answered || this.#selected.size === 0) return;
-    this.#answered = true;
-    this.#render();
-    const ids = [...this.#selected];
-    const first = this.#options.find(o => o.id === ids[0]) || null;
-    this.dispatchEvent(new CustomEvent('questions-answer', {
-      bubbles: true,
-      detail: { selected: ids, option: first },
-    }));
-  };
-}
-
-function escapeText(s) {
-  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIAgentQuestions } from './class.js';
 
-function escapeAttr(s) {
-  return String(s).replace(/"/g, '&quot;');
-}
+defineIfFree('agent-questions-ui', UIAgentQuestions);
 
-customElements.define('agent-questions-ui', UIAgentQuestions);
 export { UIAgentQuestions };

package/components/agent-questions/class.js

@@ -0,0 +1,199 @@
+/**
+ * Non-side-effect class export for `<agent-questions-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/agent-questions`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <agent-questions-ui> — Multi-choice clarifying-question cards.
+ *
+ * The agent asks a structured question and offers 2-6 options as stacked cards
+ * (claude.ai style). Supports single- or multi-select. On submit, host receives
+ * the picked option ids.
+ *
+ * JS API:
+ *   el.question = 'Which direction fits best?';
+ *   el.helper   = 'Pick one — we can revisit later.';
+ *   el.options  = [
+ *     { id: 'lean',      label: 'Lean & minimal',   description: 'Whitespace-heavy, neutral palette.', icon: 'square' },
+ *     { id: 'expressive',label: 'Expressive',       description: 'Bold type, vivid accents.',         icon: 'sparkle' },
+ *     { id: 'utilitarian',label: 'Utilitarian',     description: 'Dense, information-first.',          icon: 'gear' },
+ *   ];
+ *
+ *   el.addEventListener('questions-answer', (e) => {
+ *     // detail: { selected: string[], option: optionObject | null }
+ *   });
+ *
+ * Attributes:
+ *   multi      — allow multiple selections (default: false)
+ *   submit-label — label for the submit button (shown only when multi)
+ *
+ * Events:
+ *   questions-answer — detail: { selected: string[], option: chosen | null }
+ */
+
+import { UIElement } from '../../core/element.js';
+
+function escapeText(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeAttr(s) {
+  return String(s).replace(/"/g, '&quot;');
+}
+
+export class UIAgentQuestions extends UIElement {
+  static properties = {
+    multi:       { type: Boolean, default: false, reflect: true },
+    question:    { type: String,  default: '',    reflect: true },
+    helper:      { type: String,  default: '',    reflect: true },
+    submitLabel: { type: String,  default: 'Continue', reflect: true, attribute: 'submit-label' },
+  };
+
+  static template = () => null;
+
+  #options = [];
+  #selected = new Set();
+  #answered = false;
+  #questionEl = null;
+  #helperEl = null;
+  #optionsEl = null;
+  #submitEl = null;
+
+  get options() { return this.#options; }
+  set options(v) {
+    this.#options = Array.isArray(v) ? v.slice() : [];
+    this.#selected.clear();
+    this.#answered = false;
+    this.#render();
+  }
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#submitEl?.removeEventListener('press', this.#onSubmit);
+    this.#questionEl = this.#helperEl = this.#optionsEl = this.#submitEl = null;
+  }
+
+  render() {
+    // Keep question/helper text in sync with attribute changes
+    if (this.#questionEl) {
+      this.#questionEl.textContent = this.question || '';
+      this.#questionEl.hidden = !this.question;
+    }
+    if (this.#helperEl) {
+      this.#helperEl.textContent = this.helper || '';
+      this.#helperEl.hidden = !this.helper;
+    }
+    if (this.#submitEl) {
+      this.#submitEl.setAttribute('text', this.submitLabel || 'Continue');
+      this.#submitEl.hidden = !this.multi;
+    }
+  }
+
+  #build() {
+    this.innerHTML = '';
+
+    this.#questionEl = document.createElement('div');
+    this.#questionEl.setAttribute('data-questions-q', '');
+    if (this.question) this.#questionEl.textContent = this.question;
+    else this.#questionEl.hidden = true;
+
+    this.#helperEl = document.createElement('div');
+    this.#helperEl.setAttribute('data-questions-helper', '');
+    if (this.helper) this.#helperEl.textContent = this.helper;
+    else this.#helperEl.hidden = true;
+
+    this.#optionsEl = document.createElement('div');
+    this.#optionsEl.setAttribute('data-questions-options', '');
+
+    this.#submitEl = document.createElement('button-ui');
+    this.#submitEl.setAttribute('text', this.submitLabel || 'Continue');
+    this.#submitEl.setAttribute('variant', 'primary');
+    this.#submitEl.setAttribute('size', 'sm');
+    this.#submitEl.setAttribute('disabled', '');
+    if (!this.multi) this.#submitEl.hidden = true;
+    this.#submitEl.addEventListener('press', this.#onSubmit);
+
+    this.append(this.#questionEl, this.#helperEl, this.#optionsEl, this.#submitEl);
+    this.#render();
+  }
+
+  #render() {
+    if (!this.#optionsEl) return;
+    this.#optionsEl.innerHTML = '';
+
+    for (const opt of this.#options) {
+      const card = document.createElement('button');
+      card.type = 'button';
+      card.setAttribute('data-questions-option', '');
+      card.setAttribute('role', this.multi ? 'checkbox' : 'radio');
+      card.setAttribute('aria-checked', this.#selected.has(opt.id) ? 'true' : 'false');
+      if (this.#selected.has(opt.id)) card.setAttribute('data-selected', '');
+      if (this.#answered) card.setAttribute('disabled', '');
+
+      const iconHTML = opt.icon
+        ? `<icon-ui name="${escapeAttr(opt.icon)}" color="muted" data-questions-option-icon></icon-ui>`
+        : '';
+      const checkHTML = `
+        <span data-questions-option-check aria-hidden="true">
+          <icon-ui name="check" size="sm" color="accent"></icon-ui>
+        </span>`;
+
+      card.innerHTML = `
+        ${iconHTML}
+        <span data-questions-option-body>
+          <span data-questions-option-label>${escapeText(opt.label || '')}</span>
+          ${opt.description ? `<span data-questions-option-desc>${escapeText(opt.description)}</span>` : ''}
+        </span>
+        ${checkHTML}
+      `;
+
+      card.addEventListener('click', () => this.#pick(opt));
+      this.#optionsEl.appendChild(card);
+    }
+
+    if (this.#submitEl) {
+      this.#submitEl.disabled = this.#answered || this.#selected.size === 0;
+    }
+  }
+
+  #pick(opt) {
+    if (this.#answered) return;
+    if (this.multi) {
+      if (this.#selected.has(opt.id)) this.#selected.delete(opt.id);
+      else this.#selected.add(opt.id);
+      this.#render();
+    } else {
+      this.#selected.clear();
+      this.#selected.add(opt.id);
+      this.#answered = true;
+      this.#render();
+      this.dispatchEvent(new CustomEvent('questions-answer', {
+        bubbles: true,
+        detail: { selected: [opt.id], option: opt },
+      }));
+    }
+  }
+
+  #onSubmit = () => {
+    if (this.#answered || this.#selected.size === 0) return;
+    this.#answered = true;
+    this.#render();
+    const ids = [...this.#selected];
+    const first = this.#options.find(o => o.id === ids[0]) || null;
+    this.dispatchEvent(new CustomEvent('questions-answer', {
+      bubbles: true,
+      detail: { selected: ids, option: first },
+    }));
+  };
+}

package/components/agent-reasoning/agent-reasoning.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<agent-reasoning-ui>` — Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/agent-reasoning
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIAgentReasoning extends UIElement {
+  /** Start collapsed. */
+  collapsed: boolean;
+  /** Fallback summary label. */
+  heading: string;
+  /** Disable auto-collapse after finish(). */
+  noAutocollapse: boolean;
+  /** Drives the status icon — idle, active (spinner), done (check), error (warning). */
+  status: 'idle' | 'active' | 'done' | 'error';
+}