@adia-ai/web-components 0.4.5 → 0.4.7

package/components/agent-artifact/agent-artifact.js

@@ -1,190 +1,17 @@
 /**
- * <agent-artifact-ui> — Inline container for a structured agent artifact.
+ * `<agent-artifact-ui>` — auto-registers the tag on import.
  *
- * Wraps an artifact (A2UI UI, JSON blob, ticket, code, etc.) with a compact
- * header showing a title + icon + optional kind badge, and two action slots:
- * "primary" (e.g. "Open in canvas") and "secondary" (e.g. "Download"). The
- * artifact body goes in the default slot.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * The host can attach any node (code-ui, canvas-ui, div, etc.) as the body.
+ *   import { UIAgentArtifact } from '@adia-ai/web-components/components/agent-artifact/class';
  *
- * Usage:
- *   <agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
- *     <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
- *     <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
- *     <code-ui language="json">{…}</code-ui>
- *   </agent-artifact-ui>
- *
- * Attributes:
- *   title       — header title (string)
- *   kind        — small badge, e.g. "A2UI", "JSON", "TICKET" (value is
- *                 normalized to uppercase before rendering)
- *   icon        — icon-ui name for the header
- *   collapsed   — start collapsed (body hidden)
- *   tone        — neutral (default) | accent | warning | danger
- *
- * Events:
- *   artifact-toggle — detail: { collapsed }
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-const TONE_TO_BADGE_VARIANT = {
-  neutral: 'default',
-  accent:  'accent',
-  warning: 'warning',
-  danger:  'danger',
-};
-
-class UIAgentArtifact extends UIElement {
-  static properties = {
-    title:     { type: String,  default: '', reflect: true },
-    kind:      { type: String,  default: '', reflect: true },
-    icon:      { type: String,  default: '', reflect: true },
-    collapsed: { type: Boolean, default: false, reflect: true },
-    tone:      { type: String,  default: 'neutral', reflect: true },
-  };
-
-  static template = () => null;
-
-  #headerEl = null;
-  #iconEl = null;
-  #titleEl = null;
-  #kindEl = null;
-  #chevronEl = null;
-  #bodyEl = null;
-
-  connected() {
-    this.#build();
-  }
-
-  disconnected() {
-    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
-    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
-    this.#headerEl = this.#iconEl = this.#titleEl = null;
-    this.#kindEl = this.#chevronEl = this.#bodyEl = null;
-  }
-
-  #onHeaderClick = (e) => {
-    // Ignore clicks that land on header action buttons
-    if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
-    this.collapsed = !this.collapsed;
-    this.dispatchEvent(new CustomEvent('artifact-toggle', {
-      bubbles: true, detail: { collapsed: this.collapsed },
-    }));
-    this.render();
-  };
-
-  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
-  #onHeaderKey = (e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      // Don't fire when the focus is on a slotted action button — let those
-      // handle their own activation.
-      if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
-      e.preventDefault();
-      this.#onHeaderClick(e);
-    }
-  };
-
-  render() {
-    if (!this.#headerEl) return;
-
-    if (this.#iconEl) {
-      if (this.icon) { this.#iconEl.setAttribute('name', this.icon); this.#iconEl.hidden = false; }
-      else { this.#iconEl.hidden = true; }
-    }
-    if (this.#titleEl) {
-      this.#titleEl.textContent = this.title || '';
-      this.#titleEl.hidden = !this.title;
-    }
-    if (this.#kindEl) {
-      this.#kindEl.setAttribute('text', (this.kind || '').toUpperCase());
-      this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
-      this.#kindEl.hidden = !this.kind;
-    }
-    if (this.#chevronEl) {
-      this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
-    }
-    if (this.#bodyEl) {
-      this.#bodyEl.hidden = this.collapsed;
-    }
-    if (this.#headerEl) {
-      this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
-    }
-  }
-
-  #build() {
-    // We operate in a slotted model: the author's children that match
-    // slot="primary"/slot="secondary" live in the header; the rest is body.
-    // We build scaffolding DOM around those children without reparenting.
-    //
-    // To keep the Light-DOM approach consistent, we wrap existing children
-    // into a body container if one isn't already present.
-
-    // Capture any existing non-slotted children to put into the body wrapper
-    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
-      if (n.nodeType === 1) {
-        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
-        return slot !== 'primary' && slot !== 'secondary';
-      }
-      return true;
-    });
-
-    // Clear — we'll rebuild, preserving slotted action buttons
-    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
-    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
-
-    this.innerHTML = '';
-
-    // Header — keyboard-focusable button-style row that toggles collapsed.
-    // role/tabindex make Space/Enter activate it the same as click.
-    this.#headerEl = document.createElement('div');
-    this.#headerEl.setAttribute('data-artifact-header', '');
-    this.#headerEl.setAttribute('role', 'button');
-    this.#headerEl.setAttribute('tabindex', '0');
-    this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
-    this.#headerEl.addEventListener('click', this.#onHeaderClick);
-    this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
-
-    this.#iconEl = document.createElement('icon-ui');
-    this.#iconEl.setAttribute('data-artifact-icon', '');
-    this.#iconEl.setAttribute('color', 'muted');
-    if (this.icon) this.#iconEl.setAttribute('name', this.icon);
-    else this.#iconEl.hidden = true;
-
-    this.#titleEl = document.createElement('span');
-    this.#titleEl.setAttribute('data-artifact-title', '');
-    if (this.title) this.#titleEl.textContent = this.title;
-    else this.#titleEl.hidden = true;
-
-    this.#kindEl = document.createElement('badge-ui');
-    this.#kindEl.setAttribute('data-artifact-kind', '');
-    this.#kindEl.setAttribute('size', 'sm');
-    this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
-    if (this.kind) this.#kindEl.setAttribute('text', this.kind.toUpperCase());
-    else this.#kindEl.hidden = true;
-
-    const actions = document.createElement('span');
-    actions.setAttribute('data-artifact-actions', '');
-    for (const btn of secondaryBtns) actions.appendChild(btn);
-    for (const btn of primaryBtns) actions.appendChild(btn);
-
-    this.#chevronEl = document.createElement('icon-ui');
-    this.#chevronEl.setAttribute('color', 'muted');
-    this.#chevronEl.setAttribute('data-artifact-chevron', '');
-    this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
-
-    this.#headerEl.append(this.#iconEl, this.#titleEl, this.#kindEl, actions, this.#chevronEl);
-
-    // Body
-    this.#bodyEl = document.createElement('div');
-    this.#bodyEl.setAttribute('data-artifact-body', '');
-    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
-    if (this.collapsed) this.#bodyEl.hidden = true;
+import { defineIfFree } from '../../core/register.js';
+import { UIAgentArtifact } from './class.js';
 
-    this.append(this.#headerEl, this.#bodyEl);
-  }
-}
+defineIfFree('agent-artifact-ui', UIAgentArtifact);
 
-customElements.define('agent-artifact-ui', UIAgentArtifact);
 export { UIAgentArtifact };

package/components/agent-artifact/class.js

@@ -0,0 +1,200 @@
+/**
+ * Non-side-effect class export for `<agent-artifact-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-artifact`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <agent-artifact-ui> — Inline container for a structured agent artifact.
+ *
+ * Wraps an artifact (A2UI UI, JSON blob, ticket, code, etc.) with a compact
+ * header showing a title + icon + optional kind badge, and two action slots:
+ * "primary" (e.g. "Open in canvas") and "secondary" (e.g. "Download"). The
+ * artifact body goes in the default slot.
+ *
+ * The host can attach any node (code-ui, canvas-ui, div, etc.) as the body.
+ *
+ * Usage:
+ *   <agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
+ *     <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
+ *     <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
+ *     <code-ui language="json">{…}</code-ui>
+ *   </agent-artifact-ui>
+ *
+ * Attributes:
+ *   title       — header title (string)
+ *   kind        — small badge, e.g. "A2UI", "JSON", "TICKET" (value is
+ *                 normalized to uppercase before rendering)
+ *   icon        — icon-ui name for the header
+ *   collapsed   — start collapsed (body hidden)
+ *   tone        — neutral (default) | accent | warning | danger
+ *
+ * Events:
+ *   artifact-toggle — detail: { collapsed }
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const TONE_TO_BADGE_VARIANT = {
+  neutral: 'default',
+  accent:  'accent',
+  warning: 'warning',
+  danger:  'danger',
+};
+
+export class UIAgentArtifact extends UIElement {
+  static properties = {
+    title:     { type: String,  default: '', reflect: true },
+    kind:      { type: String,  default: '', reflect: true },
+    icon:      { type: String,  default: '', reflect: true },
+    collapsed: { type: Boolean, default: false, reflect: true },
+    tone:      { type: String,  default: 'neutral', reflect: true },
+  };
+
+  static template = () => null;
+
+  #headerEl = null;
+  #iconEl = null;
+  #titleEl = null;
+  #kindEl = null;
+  #chevronEl = null;
+  #bodyEl = null;
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
+    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
+    this.#headerEl = this.#iconEl = this.#titleEl = null;
+    this.#kindEl = this.#chevronEl = this.#bodyEl = null;
+  }
+
+  #onHeaderClick = (e) => {
+    // Ignore clicks that land on header action buttons
+    if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('artifact-toggle', {
+      bubbles: true, detail: { collapsed: this.collapsed },
+    }));
+    this.render();
+  };
+
+  // Keyboard activation — Space/Enter toggle (matches role="button" semantics).
+  #onHeaderKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      // Don't fire when the focus is on a slotted action button — let those
+      // handle their own activation.
+      if (e.target.closest('[slot="primary"], [slot="secondary"]')) return;
+      e.preventDefault();
+      this.#onHeaderClick(e);
+    }
+  };
+
+  render() {
+    if (!this.#headerEl) return;
+
+    if (this.#iconEl) {
+      if (this.icon) { this.#iconEl.setAttribute('name', this.icon); this.#iconEl.hidden = false; }
+      else { this.#iconEl.hidden = true; }
+    }
+    if (this.#titleEl) {
+      this.#titleEl.textContent = this.title || '';
+      this.#titleEl.hidden = !this.title;
+    }
+    if (this.#kindEl) {
+      this.#kindEl.setAttribute('text', (this.kind || '').toUpperCase());
+      this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+      this.#kindEl.hidden = !this.kind;
+    }
+    if (this.#chevronEl) {
+      this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+    }
+    if (this.#bodyEl) {
+      this.#bodyEl.hidden = this.collapsed;
+    }
+    if (this.#headerEl) {
+      this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
+    }
+  }
+
+  #build() {
+    // We operate in a slotted model: the author's children that match
+    // slot="primary"/slot="secondary" live in the header; the rest is body.
+    // We build scaffolding DOM around those children without reparenting.
+    //
+    // To keep the Light-DOM approach consistent, we wrap existing children
+    // into a body container if one isn't already present.
+
+    // Capture any existing non-slotted children to put into the body wrapper
+    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
+      if (n.nodeType === 1) {
+        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
+        return slot !== 'primary' && slot !== 'secondary';
+      }
+      return true;
+    });
+
+    // Clear — we'll rebuild, preserving slotted action buttons
+    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
+    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
+
+    this.innerHTML = '';
+
+    // Header — keyboard-focusable button-style row that toggles collapsed.
+    // role/tabindex make Space/Enter activate it the same as click.
+    this.#headerEl = document.createElement('div');
+    this.#headerEl.setAttribute('data-artifact-header', '');
+    this.#headerEl.setAttribute('role', 'button');
+    this.#headerEl.setAttribute('tabindex', '0');
+    this.#headerEl.setAttribute('aria-expanded', String(!this.collapsed));
+    this.#headerEl.addEventListener('click', this.#onHeaderClick);
+    this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
+
+    this.#iconEl = document.createElement('icon-ui');
+    this.#iconEl.setAttribute('data-artifact-icon', '');
+    this.#iconEl.setAttribute('color', 'muted');
+    if (this.icon) this.#iconEl.setAttribute('name', this.icon);
+    else this.#iconEl.hidden = true;
+
+    this.#titleEl = document.createElement('span');
+    this.#titleEl.setAttribute('data-artifact-title', '');
+    if (this.title) this.#titleEl.textContent = this.title;
+    else this.#titleEl.hidden = true;
+
+    this.#kindEl = document.createElement('badge-ui');
+    this.#kindEl.setAttribute('data-artifact-kind', '');
+    this.#kindEl.setAttribute('size', 'sm');
+    this.#kindEl.setAttribute('variant', TONE_TO_BADGE_VARIANT[this.tone] || 'default');
+    if (this.kind) this.#kindEl.setAttribute('text', this.kind.toUpperCase());
+    else this.#kindEl.hidden = true;
+
+    const actions = document.createElement('span');
+    actions.setAttribute('data-artifact-actions', '');
+    for (const btn of secondaryBtns) actions.appendChild(btn);
+    for (const btn of primaryBtns) actions.appendChild(btn);
+
+    this.#chevronEl = document.createElement('icon-ui');
+    this.#chevronEl.setAttribute('color', 'muted');
+    this.#chevronEl.setAttribute('data-artifact-chevron', '');
+    this.#chevronEl.setAttribute('name', this.collapsed ? 'caret-right' : 'caret-down');
+
+    this.#headerEl.append(this.#iconEl, this.#titleEl, this.#kindEl, actions, this.#chevronEl);
+
+    // Body
+    this.#bodyEl = document.createElement('div');
+    this.#bodyEl.setAttribute('data-artifact-body', '');
+    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
+    if (this.collapsed) this.#bodyEl.hidden = true;
+
+    this.append(this.#headerEl, this.#bodyEl);
+  }
+}

package/components/agent-feedback-bar/agent-feedback-bar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<agent-feedback-bar-ui>` — Thumbs + save row under an agent response.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/agent-feedback-bar
+ *
+ * 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 UIAgentFeedbackBar extends UIElement {
+  /** Disable all actions. */
+  disabled: boolean;
+  /** Save button icon. */
+  saveIcon: string;
+  /** Save button text; empty hides it. */
+  saveLabel: string;
+}

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

@@ -1,152 +1,17 @@
 /**
- * <agent-feedback-bar-ui> — Thumbs + save row under an agent response.
+ * `<agent-feedback-bar-ui>` — auto-registers the tag on import.
  *
- * Emits semantic events; the host decides how to persist. Status slot shows a
- * short acknowledgement ("Thanks!", "Saved as X") after an action fires.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Usage:
- *   <agent-feedback-bar-ui
- *     save-label="Save pattern"
- *     save-icon="bookmark-simple"
- *   ></agent-feedback-bar-ui>
+ *   import { UIAgentFeedbackBar } from '@adia-ai/web-components/components/agent-feedback-bar/class';
  *
- *   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
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-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);
-  }
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIAgentFeedbackBar } from './class.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;
-}
+defineIfFree('agent-feedback-bar-ui', UIAgentFeedbackBar);
 
-customElements.define('agent-feedback-bar-ui', UIAgentFeedbackBar);
 export { UIAgentFeedbackBar };