@adia-ai/web-components 0.0.1

package/components/chat/chat.js

@@ -0,0 +1,155 @@
+import { AdiaElement } from '@core/element.js';
+import { renderMarkdown } from '@core/markdown.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/**
+ * <chat-ui> — Minimal chat container.
+ *
+ * Structure:
+ *   <chat-ui>
+ *     <header>
+ *       <span slot="avatar">AI</span>
+ *       <span slot="name">Assistant</span>
+ *     </header>
+ *     <section>
+ *       <!-- messages rendered here -->
+ *     </section>
+ *     <footer>
+ *       <chat-input-ui placeholder="Type a message..."></chat-input-ui>
+ *     </footer>
+ *   </chat-ui>
+ *
+ * JS API:
+ *   chat.appendMessage({ role: 'user', content: 'Hello' })
+ *   chat.appendMessage({ role: 'assistant', content: 'Hi!' })
+ *   chat.appendChunk('token')       // append to last assistant message
+ *   chat.startStreaming()            // show cursor, disable input
+ *   chat.stopStreaming()             // hide cursor, enable input
+ *   chat.clear()
+ *   chat.messages                   // read all messages
+ *
+ * Events:
+ *   chat-submit  — user pressed send (detail: { text, model })
+ */
+class AdiaChat extends AdiaElement {
+  static properties = {
+    streaming: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null; // wrapper mode
+
+  #messages = [];
+  #messagesEl = null;
+  #inputEl = null;
+
+  get messages() { return [...this.#messages]; }
+
+  connected() {
+    // Stamp default structure if empty
+    if (!this.querySelector('header') && !this.querySelector('section')) {
+      this.innerHTML = `
+        <header>
+          <span slot="avatar">AI</span>
+          <span slot="name">Assistant</span>
+        </header>
+        <section></section>
+        <footer>
+          <chat-input-ui placeholder="Type a message..."></chat-input-ui>
+        </footer>
+      `;
+    }
+
+    this.#messagesEl = this.querySelector('section');
+    this.#inputEl = this.querySelector('chat-input-ui');
+
+    this.#inputEl?.addEventListener('submit', this.#onSubmit);
+  }
+
+  disconnected() {
+    this.#inputEl?.removeEventListener('submit', this.#onSubmit);
+    this.#messagesEl = null;
+    this.#inputEl = null;
+  }
+
+  #onSubmit = (e) => {
+    if (this.streaming) return;
+    const { text, model } = e.detail || {};
+    if (!text) return;
+    this.#inputEl.clear();
+    this.dispatchEvent(new CustomEvent('chat-submit', { bubbles: true, detail: { text, model } }));
+  };
+
+  appendMessage({ role, content = '', render = false }) {
+    this.#messages.push({ role, content });
+    const el = document.createElement('div');
+    el.setAttribute('data-role', role);
+
+    const body = render ? renderMarkdown(content) : escapeHTML(content);
+
+    if (role === 'user') {
+      el.innerHTML = `<div slot="bubble">${body}</div>`;
+    } else {
+      const cursor = render ? '' : '<span slot="cursor"></span>';
+      el.innerHTML = `
+        <span slot="avatar">${role === 'assistant' ? 'AI' : role[0].toUpperCase()}</span>
+        <div slot="bubble">${body}${cursor}</div>
+      `;
+    }
+
+    this.#messagesEl?.appendChild(el);
+    this.#scrollToBottom();
+    return el;
+  }
+
+  appendChunk(text) {
+    const last = this.#messages[this.#messages.length - 1];
+    if (!last || last.role === 'user') return;
+    last.content += text;
+
+    const bubble = this.#messagesEl?.querySelector('[data-role]:last-child [slot="bubble"]');
+    if (bubble) {
+      const cursor = bubble.querySelector('[slot="cursor"]');
+      if (cursor) cursor.remove();
+      bubble.insertAdjacentText('beforeend', text);
+      bubble.insertAdjacentHTML('beforeend', '<span slot="cursor"></span>');
+    }
+    this.#scrollToBottom();
+  }
+
+  startStreaming() {
+    this.streaming = true;
+    if (this.#inputEl) this.#inputEl.disabled = true;
+  }
+
+  stopStreaming() {
+    this.streaming = false;
+    if (this.#inputEl) this.#inputEl.disabled = false;
+    // Remove cursor from last message
+    this.#messagesEl?.querySelector('[data-role]:last-child [slot="cursor"]')?.remove();
+
+    // Render markdown in the last assistant bubble
+    const last = this.#messages[this.#messages.length - 1];
+    if (last && last.role === 'assistant' && last.content) {
+      const bubble = this.#messagesEl?.querySelector('[data-role]:last-child [slot="bubble"]');
+      if (bubble) bubble.innerHTML = renderMarkdown(last.content);
+    }
+
+    this.#inputEl?.focus();
+  }
+
+  clear() {
+    this.#messages.length = 0;
+    if (this.#messagesEl) this.#messagesEl.innerHTML = '';
+  }
+
+  #scrollToBottom() {
+    const el = this.#messagesEl;
+    if (el) requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; });
+  }
+}
+customElements.define('chat-ui', AdiaChat);
+
+export { AdiaChat };

package/components/chat/chat.yaml

@@ -0,0 +1,230 @@
+# 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: AdiaChat
+tag: chat-ui
+component: Chat
+category: agent
+version: 1
+description: Minimal chat container.
+props:
+  streaming:
+    description: "Component property: streaming."
+    type: boolean
+    default: false
+events:
+  chat-submit:
+    description: "Fired on chat-submit."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-chat
+    description: Basic Chat usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Chat"
+        }
+      ]
+  - name: basic
+    description: Chat transcript with user and assistant messages; role attribute styles turns.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Chat",
+          "children": [
+            "m1",
+            "m2"
+          ]
+        },
+        {
+          "id": "m1",
+          "component": "Text",
+          "role": "user",
+          "textContent": "What's the capital of France?"
+        },
+        {
+          "id": "m2",
+          "component": "Text",
+          "role": "assistant",
+          "textContent": "The capital of France is Paris."
+        }
+      ]
+  - name: streaming
+    description: Chat with streaming cursor on an in-progress assistant message.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Chat",
+          "streaming": true,
+          "children": [
+            "m1",
+            "m2"
+          ]
+        },
+        {
+          "id": "m1",
+          "component": "Text",
+          "role": "user",
+          "textContent": "Explain black holes briefly."
+        },
+        {
+          "id": "m2",
+          "component": "Text",
+          "role": "assistant",
+          "streaming": true,
+          "textContent": "A black hole is a region of spacetime where gravity is so strong that"
+        }
+      ]
+  - name: with-input
+    description: Chat transcript composed with ChatInput for a full conversation surface.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "gap": "2",
+          "children": [
+            "chat",
+            "input"
+          ]
+        },
+        {
+          "id": "chat",
+          "component": "Chat",
+          "children": [
+            "m1",
+            "m2"
+          ]
+        },
+        {
+          "id": "m1",
+          "component": "Text",
+          "role": "user",
+          "textContent": "Give me a short haiku about the ocean."
+        },
+        {
+          "id": "m2",
+          "component": "Text",
+          "role": "assistant",
+          "textContent": "Waves whisper secrets — the tide retreats then returns, carrying the moon."
+        },
+        {
+          "id": "input",
+          "component": "ChatInput",
+          "placeholder": "Type a message..."
+        }
+      ]
+keywords:
+  - chat
+  - message
+  - messaging
+  - sms
+  - chatbot
+  - conversation
+  - ai-chat
+  - messenger
+  - assistant
+  - copilot
+  - gpt
+  - llm
+  - ai
+  - bot
+  - prompt
+  - comment
+  - support
+synonyms:
+  ai:
+    - chat
+    - streaming
+    - response
+    - command
+  ai-chat:
+    - chat
+    - streaming
+    - response
+  assistant:
+    - chat
+    - streaming
+    - response
+    - command
+  bot:
+    - chat
+    - streaming
+    - response
+  chatbot:
+    - chat
+    - streaming
+    - response
+  comment:
+    - social
+    - post
+    - chat
+  conversation:
+    - chat
+    - streaming
+    - response
+  copilot:
+    - chat
+    - streaming
+    - response
+    - command
+  gpt:
+    - chat
+    - streaming
+    - response
+  llm:
+    - chat
+    - streaming
+    - response
+  message:
+    - chat
+    - notification
+    - toast
+    - alert
+  messaging:
+    - chat
+    - notification
+    - streaming
+  messenger:
+    - chat
+    - streaming
+  prompt:
+    - chat
+    - streaming
+    - command
+    - palette
+  sms:
+    - chat
+    - notification
+  support:
+    - faq
+    - accordion
+    - chat
+related: []

package/components/check/check.a2ui.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Check.json",
+  "title": "Check",
+  "description": "Checkbox. The host IS the control.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks as required",
+      "type": "boolean",
+      "default": false
+    },
+    "checked": {
+      "description": "Whether the checkbox is checked",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Check"
+    },
+    "disabled": {
+      "description": "Disables the checkbox",
+      "type": "boolean",
+      "default": false
+    },
+    "hint": {
+      "description": "Help text below the label",
+      "type": "string",
+      "default": ""
+    },
+    "indeterminate": {
+      "description": "Indeterminate state (dash indicator). Cleared on toggle.",
+      "type": "boolean",
+      "default": false
+    },
+    "label": {
+      "description": "Label text beside the checkbox",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Form value (submitted as 'on' when checked)",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "change": {
+        "description": "Fired when checked state changes"
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Check usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Check\",\n    \"label\": \"Example Check\"\n  }\n]",
+        "name": "basic-check"
+      }
+    ],
+    "keywords": [
+      "check"
+    ],
+    "name": "AdiaCheck",
+    "related": [],
+    "slots": {
+      "box": {
+        "description": "Visual checkbox indicator"
+      },
+      "hint": {
+        "description": "Help text below the label"
+      },
+      "label": {
+        "description": "Label text beside the checkbox"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "check-ui",
+    "tokens": {
+      "--check-box-background": {
+        "description": "Unchecked background"
+      },
+      "--check-box-border-color": {
+        "description": "Unchecked border color"
+      },
+      "--check-box-radius": {
+        "description": "Checkbox border radius"
+      },
+      "--check-box-size": {
+        "description": "Checkbox indicator size"
+      },
+      "--check-checked-background": {
+        "description": "Checked/indeterminate background"
+      },
+      "--check-checked-border-color": {
+        "description": "Checked/indeterminate border"
+      },
+      "--check-checked-foreground": {
+        "description": "Checkmark/dash color"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/check/check.css

@@ -0,0 +1,126 @@
+@scope (check-ui) {
+  :where(:scope) {
+    /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
+    --check-size:             var(--a-toggle-size);
+    --check-gap:              var(--a-space-2);
+    --check-font-size:        var(--a-ui-size);
+    --check-radius:           min(var(--a-radius-md), var(--a-space-1-5));
+
+    /* ── State: default ── */
+    --check-bg:               var(--a-ui-bg);
+    --check-border:           var(--a-ui-border);
+    --check-border-hover:     var(--a-fg-subtle);
+
+    /* ── Transitions ── */
+    --check-duration:         var(--a-duration-fast);
+    --check-easing:           var(--a-easing);
+
+    /* ── Focus ── */
+    --check-focus-ring:       var(--a-focus-ring);
+
+    /* ── State: default hover ── */
+    --check-bg-hover:         var(--a-bg-muted);
+
+    /* ── State: checked ── */
+    --check-bg-checked:       var(--a-primary);
+    --check-border-checked:   var(--a-primary);
+    --check-fg-checked:       white;
+    --check-bg-checked-hover: var(--a-primary-hover);
+
+    /* ── State: disabled ── */
+    --check-fg-disabled:      var(--a-fg-muted);
+
+    /* ── Check icon (CSS border trick, no SVG) ── */
+    --_icon-w:    0;
+    --_icon-h:    0;
+    --_icon-border: none;
+    --_icon-bw:   0;
+    --_icon-transform: none;
+
+    /* ── Indeterminate indicator ── */
+    --_dash-bg:   transparent;
+    --_dash-w:    0;
+    --_dash-h:    0;
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--check-gap);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--check-font-size);
+    outline: none;
+  }
+  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled); }
+
+  /* Box */
+  [slot="box"] {
+    flex-shrink: 0;
+    width: var(--check-size);
+    height: var(--check-size);
+    border: 1.5px solid var(--check-border);
+    border-radius: var(--check-radius);
+    background: var(--check-bg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background var(--check-duration) var(--check-easing),
+      border-color var(--check-duration) var(--check-easing);
+  }
+
+  /* Icon (checkmark or dash) */
+  [slot="box"]::after {
+    content: '';
+    width: var(--_icon-w);
+    height: var(--_icon-h);
+    border: var(--_icon-border);
+    border-width: var(--_icon-bw);
+    transform: var(--_icon-transform);
+    background: var(--_dash-bg);
+  }
+
+  :scope:not([disabled]):hover [slot="box"] {
+    border-color: var(--check-border-hover);
+    background: var(--check-bg-hover);
+  }
+
+  /* Checked — CSS border checkmark */
+  :scope[checked] [slot="box"],
+  :scope[indeterminate] [slot="box"] {
+    background: var(--check-bg-checked);
+    border-color: var(--check-border-checked);
+  }
+
+  :scope[checked] {
+    --_icon-w:         calc(var(--check-size) * 0.3);
+    --_icon-h:         calc(var(--check-size) * 0.55);
+    --_icon-border:    solid var(--check-fg-checked);
+    --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
+    --_icon-transform: rotate(45deg) translate(-1px, -1px);
+  }
+
+  /* Indeterminate — horizontal dash */
+  :scope[indeterminate] {
+    --_dash-bg: var(--check-fg-checked);
+    --_icon-w:  calc(var(--check-size) * 0.5);
+    --_icon-h:  calc(var(--check-size) * 0.12);
+  }
+
+  :scope[checked]:not([disabled]):hover [slot="box"],
+  :scope[indeterminate]:not([disabled]):hover [slot="box"] {
+    background: var(--check-bg-checked-hover);
+    border-color: var(--check-bg-checked-hover);
+  }
+
+  /* Label */
+  :scope[label]::after { content: attr(label); }
+
+  /* Focus */
+  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); }
+
+  /* Size handled by universal [size] attribute system. */
+}

package/components/check/check.js

@@ -0,0 +1,58 @@
+/**
+ * <check-ui> — Checkbox. The host IS the control.
+ * Pure CSS checkmark via border trick on [slot="box"]::after. No SVG.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import { html } from '@core/element.js';
+
+class AdiaCheck extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    checked:       { type: Boolean, default: false, reflect: true },
+    indeterminate: { type: Boolean, default: false, reflect: true },
+    label:         { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => html`<span slot="box"></span>`;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'checkbox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#toggle);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    if (this.indeterminate) {
+      this.setAttribute('aria-checked', 'mixed');
+    } else {
+      this.setAttribute('aria-checked', String(this.checked));
+    }
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+    if (this.label) this.setAttribute('aria-label', this.label);
+    this.syncValue(this.checked ? (this.value || 'on') : '');
+  }
+
+  #toggle = () => {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  #onKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#toggle(); }
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#toggle);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+customElements.define('check-ui', AdiaCheck);
+
+export { AdiaCheck };