@adia-ai/web-components 0.0.1

package/components/agent-artifact/agent-artifact.yaml

@@ -0,0 +1,71 @@
+# 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: AdiaAgentArtifact
+tag: agent-artifact-ui
+component: AgentArtifact
+category: agent
+version: 1
+description: Inline container for structured agent artifacts (A2UI, JSON, tickets).
+props:
+  kind:
+    description: Uppercase badge label.
+    type: string
+    default: ""
+  collapsed:
+    description: Start collapsed.
+    type: boolean
+    default: false
+  icon:
+    description: icon-ui name in header.
+    type: string
+    default: ""
+  title:
+    description: Header title.
+    type: string
+    default: ""
+  tone:
+    description: neutral | accent | warning | danger
+    type: string
+    default: neutral
+events:
+  artifact-toggle:
+    description: "Fired on artifact-toggle."
+slots:
+  default:
+    description: "Default slot — primary child content."
+  primary:
+    description: "Child content region for the `primary` slot."
+  secondary:
+    description: "Child content region for the `secondary` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic
+    description: Artifact with a code body and two actions.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentArtifact",
+          "title": "product-card",
+          "kind": "A2UI",
+          "icon": "layout"
+        }
+      ]
+keywords:
+  - artifact
+  - container
+  - inline
+  - preview
+  - attachment
+synonyms: {}
+related:
+  - card-ui
+  - code-ui

package/components/agent-feedback-bar/agent-feedback-bar.a2ui.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentFeedbackBar.json",
+  "title": "AgentFeedbackBar",
+  "description": "Thumbs + save row under an agent response.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AgentFeedbackBar"
+    },
+    "disabled": {
+      "description": "Disable all actions.",
+      "type": "boolean",
+      "default": false
+    },
+    "saveIcon": {
+      "description": "Save button icon.",
+      "type": "string",
+      "default": "bookmark-simple"
+    },
+    "saveLabel": {
+      "description": "Save button text; empty hides it.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "feedback-rate": {
+        "description": "Fired on feedback-rate."
+      },
+      "feedback-save": {
+        "description": "Fired on feedback-save."
+      }
+    },
+    "examples": [
+      {
+        "description": "Thumbs + save",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentFeedbackBar\",\n    \"saveLabel\": \"Save pattern\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "feedback",
+      "thumbs",
+      "rating",
+      "save",
+      "bookmark"
+    ],
+    "name": "AdiaAgentFeedbackBar",
+    "related": [
+      "agent-suggestions-ui",
+      "agent-trace-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "agent-feedback-bar-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,33 @@
+@scope (agent-feedback-bar-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --agent-feedback-bar-gap:      var(--a-space-1);
+    --agent-feedback-bar-padding:  var(--a-space-2);
+
+    /* ── Typography ── */
+    --agent-feedback-bar-font:     var(--a-ui-sm);
+
+    /* ── Colors ── */
+    --agent-feedback-bar-fg:       var(--a-fg-muted);
+  }
+
+  :scope {
+    display: flex;
+    align-items: center;
+    gap: var(--agent-feedback-bar-gap);
+    padding-block: var(--agent-feedback-bar-padding);
+    font-size: var(--agent-feedback-bar-font);
+    color: var(--agent-feedback-bar-fg);
+  }
+
+  [data-feedback-status] {
+    margin-inline-start: auto;
+    color: var(--agent-feedback-bar-fg);
+    font-size: var(--agent-feedback-bar-font);
+  }
+
+  :scope[disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,152 @@
+/**
+ * <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 { AdiaElement } from '@core/element.js';
+
+class AdiaAgentFeedbackBar extends AdiaElement {
+  static properties = {
+    'save-label': { type: String,  default: '',                 attribute: 'save-label' },
+    'save-icon':  { type: String,  default: 'bookmark-simple',  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['save-label'];
+    const icon = this['save-icon'];
+    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['save-icon'] || 'bookmark-simple',
+      text: this['save-label'] || '',
+    });
+    if (!this['save-label']) 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);
+  }
+}
+
+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;
+}
+
+customElements.define('agent-feedback-bar-ui', AdiaAgentFeedbackBar);
+export { AdiaAgentFeedbackBar };

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

@@ -0,0 +1,65 @@
+# 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: AdiaAgentFeedbackBar
+tag: agent-feedback-bar-ui
+component: AgentFeedbackBar
+category: agent
+version: 1
+description: Thumbs + save row under an agent response.
+props:
+  disabled:
+    description: Disable all actions.
+    type: boolean
+    default: false
+    reflect: true
+  saveIcon:
+    description: Save button icon.
+    type: string
+    default: bookmark-simple
+    attribute: save-icon
+  saveLabel:
+    description: Save button text; empty hides it.
+    type: string
+    default: ""
+    attribute: save-label
+events:
+  feedback-rate:
+    description: "Fired on feedback-rate."
+  feedback-save:
+    description: "Fired on feedback-save."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic
+    description: Thumbs + save
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentFeedbackBar",
+          "saveLabel": "Save pattern"
+        }
+      ]
+keywords:
+  - feedback
+  - thumbs
+  - rating
+  - save
+  - bookmark
+synonyms: {}
+related:
+  - agent-suggestions-ui
+  - agent-trace-ui

package/components/agent-questions/agent-questions.a2ui.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentQuestions.json",
+  "title": "AgentQuestions",
+  "description": "Multi-choice clarifying-question cards.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AgentQuestions"
+    },
+    "helper": {
+      "description": "Helper text.",
+      "type": "string",
+      "default": ""
+    },
+    "multi": {
+      "description": "Allow multi-select.",
+      "type": "boolean",
+      "default": false
+    },
+    "question": {
+      "description": "Headline question.",
+      "type": "string",
+      "default": ""
+    },
+    "submitLabel": {
+      "description": "Submit button label (multi mode).",
+      "type": "string",
+      "default": "Continue"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "questions-answer": {
+        "description": "Fired on questions-answer."
+      }
+    },
+    "examples": [
+      {
+        "description": "Three-option clarifying question",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentQuestions\",\n    \"question\": \"Which direction fits best?\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "questions",
+      "choices",
+      "options",
+      "multiple choice",
+      "elicit",
+      "clarify"
+    ],
+    "name": "AdiaAgentQuestions",
+    "related": [
+      "agent-suggestions-ui",
+      "agent-reasoning-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "agent-questions-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/agent-questions/agent-questions.css

@@ -0,0 +1,146 @@
+@scope (agent-questions-ui) {
+  :where(:scope) {
+    /* ── Typography ── */
+    --agent-questions-q-size:          var(--a-ui-md);
+    --agent-questions-q-weight:        var(--a-weight-medium);
+    --agent-questions-helper-size:     var(--a-ui-sm);
+    --agent-questions-label-size:      var(--a-ui-md);
+    --agent-questions-label-weight:    var(--a-weight-medium);
+    --agent-questions-desc-size:       var(--a-ui-sm);
+
+    /* ── Colors ── */
+    --agent-questions-q-fg:            var(--a-fg);
+    --agent-questions-helper-fg:       var(--a-fg-muted);
+    --agent-questions-label-fg:        var(--a-fg);
+    --agent-questions-desc-fg:         var(--a-fg-muted);
+    --agent-questions-option-bg:       var(--a-bg);
+    --agent-questions-option-bg-hover: var(--a-bg-subtle);
+    --agent-questions-option-bg-sel:   var(--a-accent-muted);
+    --agent-questions-option-border:   var(--a-border-subtle);
+    --agent-questions-option-border-sel: var(--a-accent-bg);
+    --agent-questions-check-bg:        var(--a-accent-bg);
+    --agent-questions-check-fg:        var(--a-accent-fg);
+
+    /* ── Layout ── */
+    --agent-questions-gap:             var(--a-space-2);
+    --agent-questions-option-gap:      var(--a-space-3);
+    --agent-questions-option-padding:  var(--a-space-3);
+    --agent-questions-option-radius:   var(--a-radius);
+    --agent-questions-q-padding:       var(--a-space-1);
+    /* Component-intrinsic measurement; no --a-space-* equivalent */
+    --agent-questions-check-size:      20px;
+
+    /* ── Motion ── */
+    --agent-questions-duration:        var(--a-duration-fast);
+    --agent-questions-easing:          var(--a-easing-out);
+  }
+
+  :scope {
+    display: flex;
+    flex-direction: column;
+    gap: var(--agent-questions-gap);
+  }
+
+  [data-questions-q] {
+    font-size: var(--agent-questions-q-size);
+    font-weight: var(--agent-questions-q-weight);
+    color: var(--agent-questions-q-fg);
+    padding: var(--agent-questions-q-padding) 0;
+  }
+
+  [data-questions-helper] {
+    font-size: var(--agent-questions-helper-size);
+    color: var(--agent-questions-helper-fg);
+    padding-block-end: var(--a-space-1);
+  }
+
+  [data-questions-options] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--agent-questions-gap);
+  }
+
+  [data-questions-option] {
+    display: flex;
+    align-items: center;
+    gap: var(--agent-questions-option-gap);
+    padding: var(--agent-questions-option-padding);
+    border: 1px solid var(--agent-questions-option-border);
+    border-radius: var(--agent-questions-option-radius);
+    background: var(--agent-questions-option-bg);
+    color: inherit;
+    cursor: pointer;
+    text-align: start;
+    font: inherit;
+    transition:
+      background var(--agent-questions-duration) var(--agent-questions-easing),
+      border-color var(--agent-questions-duration) var(--agent-questions-easing);
+    min-width: 0;
+    width: 100%;
+  }
+
+  [data-questions-option]:hover {
+    background: var(--agent-questions-option-bg-hover);
+  }
+
+  [data-questions-option][data-selected] {
+    background: var(--agent-questions-option-bg-sel);
+    border-color: var(--agent-questions-option-border-sel);
+  }
+
+  [data-questions-option][disabled] {
+    cursor: default;
+    opacity: 0.7;
+  }
+
+  [data-questions-option]:focus-visible {
+    outline: 2px solid var(--agent-questions-option-border-sel);
+    outline-offset: 2px;
+  }
+
+  [data-questions-option-icon] {
+    flex-shrink: 0;
+  }
+
+  [data-questions-option-body] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  [data-questions-option-label] {
+    font-size: var(--agent-questions-label-size);
+    font-weight: var(--agent-questions-label-weight);
+    color: var(--agent-questions-label-fg);
+  }
+
+  [data-questions-option-desc] {
+    font-size: var(--agent-questions-desc-size);
+    color: var(--agent-questions-desc-fg);
+    line-height: 1.4;
+  }
+
+  [data-questions-option-check] {
+    width: var(--agent-questions-check-size);
+    height: var(--agent-questions-check-size);
+    border-radius: 50%;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    opacity: 0;
+    transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
+  }
+
+  [data-questions-option][data-selected] [data-questions-option-check] {
+    background: var(--agent-questions-check-bg);
+    opacity: 1;
+  }
+
+  [data-questions-option][data-selected] [data-questions-option-check] icon-ui {
+    color: var(--agent-questions-check-fg);
+  }
+}